fix: 详情返回
This commit is contained in:
100011797
parent
49ed583525
commit
f8cad6d7b1
|
|
@ -6,7 +6,7 @@
|
||||||
v-model:selectedKeys="state.selectedKeys"
|
v-model:selectedKeys="state.selectedKeys"
|
||||||
:pure="state.pure"
|
:pure="state.pure"
|
||||||
:breadcrumb="{ routes: breadcrumb }"
|
:breadcrumb="{ routes: breadcrumb }"
|
||||||
@back='routerBack'
|
@backClick='routerBack'
|
||||||
>
|
>
|
||||||
<template #breadcrumbRender="slotProps">
|
<template #breadcrumbRender="slotProps">
|
||||||
<a
|
<a
|
||||||
|
|
|
||||||
|
|
@ -1,101 +1,91 @@
|
||||||
<template>
|
<template>
|
||||||
<page-container
|
<page-container
|
||||||
:tabList="list"
|
:tabList="list"
|
||||||
|
:showBack="true"
|
||||||
:tabActiveKey="instanceStore.tabActiveKey"
|
:tabActiveKey="instanceStore.tabActiveKey"
|
||||||
@tabChange="onTabChange"
|
@tabChange="onTabChange"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div>
|
<div style="display: flex; align-items: center">
|
||||||
<div style="display: flex; align-items: center">
|
{{ instanceStore.current?.name }}
|
||||||
<!-- <j-button @click="onBack" size="small">返回</j-button> -->
|
<j-divider type="vertical" />
|
||||||
<div style="font-size: 24px">
|
<j-space>
|
||||||
{{ instanceStore.current?.name }}
|
<span style="font-size: 14px; color: rgba(0, 0, 0, 0.85)">
|
||||||
</div>
|
状态：
|
||||||
<j-divider type="vertical" />
|
<j-badge
|
||||||
<j-space>
|
:status="
|
||||||
<span
|
statusMap.get(
|
||||||
style="font-size: 14px; color: rgba(0, 0, 0, 0.85)"
|
instanceStore.current?.state?.value,
|
||||||
>
|
|
||||||
状态：
|
|
||||||
<j-badge
|
|
||||||
:status="
|
|
||||||
statusMap.get(
|
|
||||||
instanceStore.current?.state?.value,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
{{ instanceStore.current?.state?.text }}
|
|
||||||
</span>
|
|
||||||
<PermissionButton
|
|
||||||
v-if="
|
|
||||||
instanceStore.current?.state?.value ===
|
|
||||||
'notActive'
|
|
||||||
"
|
|
||||||
type="link"
|
|
||||||
style="margin-top: -5px; padding: 0 20px"
|
|
||||||
:popConfirm="{
|
|
||||||
title: '确认启用设备',
|
|
||||||
onConfirm: handleAction,
|
|
||||||
}"
|
|
||||||
hasPermission="device/Instance:action"
|
|
||||||
>
|
|
||||||
启用设备
|
|
||||||
</PermissionButton>
|
|
||||||
<PermissionButton
|
|
||||||
v-if="
|
|
||||||
instanceStore.current?.state?.value === 'online'
|
|
||||||
"
|
|
||||||
type="link"
|
|
||||||
style="margin-top: -5px; padding: 0 20px"
|
|
||||||
:popConfirm="{
|
|
||||||
title: '确认断开连接？',
|
|
||||||
onConfirm: handleDisconnect,
|
|
||||||
}"
|
|
||||||
hasPermission="device/Instance:action"
|
|
||||||
>
|
|
||||||
断开连接
|
|
||||||
</PermissionButton>
|
|
||||||
<j-tooltip
|
|
||||||
v-if="
|
|
||||||
instanceStore.current?.accessProvider ===
|
|
||||||
'child-device' &&
|
|
||||||
instanceStore.current?.state?.value ===
|
|
||||||
'offline'
|
|
||||||
"
|
|
||||||
:title="
|
|
||||||
instanceStore.current?.features?.find(
|
|
||||||
(item) => item?.id === 'selfManageState',
|
|
||||||
)
|
)
|
||||||
? '该设备的在线状态与父设备(网关设备)保持一致'
|
|
||||||
: '该设备在线状态由设备自身运行状态决定，不继承父设备（网关设备）的在线状态'
|
|
||||||
"
|
"
|
||||||
>
|
/>
|
||||||
<AIcon
|
{{ instanceStore.current?.state?.text }}
|
||||||
type="QuestionCircleOutlined"
|
</span>
|
||||||
style="font-size: 14px"
|
<PermissionButton
|
||||||
/>
|
v-if="
|
||||||
</j-tooltip>
|
instanceStore.current?.state?.value === 'notActive'
|
||||||
</j-space>
|
"
|
||||||
</div>
|
type="link"
|
||||||
<div style="padding-top: 24px">
|
style="margin-top: -5px; padding: 0 20px"
|
||||||
<j-descriptions size="small" :column="4">
|
:popConfirm="{
|
||||||
<j-descriptions-item label="ID">{{
|
title: '确认启用设备',
|
||||||
instanceStore.current?.id
|
onConfirm: handleAction,
|
||||||
}}</j-descriptions-item>
|
}"
|
||||||
<j-descriptions-item label="所属产品">
|
hasPermission="device/Instance:action"
|
||||||
<PermissionButton
|
>
|
||||||
type="link"
|
启用设备
|
||||||
style="margin-top: -5px; padding: 0"
|
</PermissionButton>
|
||||||
@click="jumpProduct"
|
<PermissionButton
|
||||||
hasPermission="device/Product:view"
|
v-if="instanceStore.current?.state?.value === 'online'"
|
||||||
>
|
type="link"
|
||||||
{{ instanceStore.current?.productName }}
|
style="margin-top: -5px; padding: 0 20px"
|
||||||
</PermissionButton>
|
:popConfirm="{
|
||||||
</j-descriptions-item>
|
title: '确认断开连接？',
|
||||||
</j-descriptions>
|
onConfirm: handleDisconnect,
|
||||||
</div>
|
}"
|
||||||
|
hasPermission="device/Instance:action"
|
||||||
|
>
|
||||||
|
断开连接
|
||||||
|
</PermissionButton>
|
||||||
|
<j-tooltip
|
||||||
|
v-if="
|
||||||
|
instanceStore.current?.accessProvider ===
|
||||||
|
'child-device' &&
|
||||||
|
instanceStore.current?.state?.value === 'offline'
|
||||||
|
"
|
||||||
|
:title="
|
||||||
|
instanceStore.current?.features?.find(
|
||||||
|
(item) => item?.id === 'selfManageState',
|
||||||
|
)
|
||||||
|
? '该设备的在线状态与父设备(网关设备)保持一致'
|
||||||
|
: '该设备在线状态由设备自身运行状态决定，不继承父设备（网关设备）的在线状态'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
style="font-size: 14px"
|
||||||
|
/>
|
||||||
|
</j-tooltip>
|
||||||
|
</j-space>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<j-descriptions size="small" :column="4">
|
||||||
|
<j-descriptions-item label="ID">{{
|
||||||
|
instanceStore.current?.id
|
||||||
|
}}</j-descriptions-item>
|
||||||
|
<j-descriptions-item label="所属产品">
|
||||||
|
<PermissionButton
|
||||||
|
type="link"
|
||||||
|
style="margin-top: -5px; padding: 0"
|
||||||
|
@click="jumpProduct"
|
||||||
|
hasPermission="device/Product:view"
|
||||||
|
>
|
||||||
|
{{ instanceStore.current?.productName }}
|
||||||
|
</PermissionButton>
|
||||||
|
</j-descriptions-item>
|
||||||
|
</j-descriptions>
|
||||||
|
</template>
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<img
|
<img
|
||||||
@click="handleRefresh"
|
@click="handleRefresh"
|
||||||
|
|
@ -142,7 +132,7 @@ statusMap.set('notActive', 'warning');
|
||||||
|
|
||||||
const statusRef = ref();
|
const statusRef = ref();
|
||||||
|
|
||||||
const list = ref([
|
const initList = [
|
||||||
{
|
{
|
||||||
key: 'Info',
|
key: 'Info',
|
||||||
tab: '实例信息',
|
tab: '实例信息',
|
||||||
|
|
@ -163,7 +153,9 @@ const list = ref([
|
||||||
key: 'Log',
|
key: 'Log',
|
||||||
tab: '日志管理',
|
tab: '日志管理',
|
||||||
},
|
},
|
||||||
]);
|
];
|
||||||
|
|
||||||
|
const list = ref([...initList]);
|
||||||
|
|
||||||
const tabs = {
|
const tabs = {
|
||||||
Info,
|
Info,
|
||||||
|
|
@ -191,64 +183,7 @@ const getStatus = (id: string) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(
|
const getDetail = () => {
|
||||||
() => route.params?.id,
|
|
||||||
(newId) => {
|
|
||||||
if (newId) {
|
|
||||||
instanceStore.refresh(String(newId));
|
|
||||||
getStatus(String(newId));
|
|
||||||
instanceStore.tabActiveKey = 'Info'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true, deep: true },
|
|
||||||
);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
instanceStore.tabActiveKey = history.state?.params?.tab || 'Info';
|
|
||||||
});
|
|
||||||
|
|
||||||
// const onBack = () => {
|
|
||||||
// menuStory.jumpPage('device/Instance');
|
|
||||||
// };
|
|
||||||
|
|
||||||
const onTabChange = (e: string) => {
|
|
||||||
instanceStore.tabActiveKey = e;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAction = async () => {
|
|
||||||
if (instanceStore.current?.id) {
|
|
||||||
const resp = await _deploy(instanceStore.current?.id);
|
|
||||||
if (resp.status === 200) {
|
|
||||||
message.success('操作成功！');
|
|
||||||
instanceStore.refresh(instanceStore.current?.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDisconnect = async () => {
|
|
||||||
if (instanceStore.current?.id) {
|
|
||||||
const resp = await _disconnect(instanceStore.current?.id);
|
|
||||||
if (resp.status === 200) {
|
|
||||||
message.success('操作成功！');
|
|
||||||
instanceStore.refresh(instanceStore.current?.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRefresh = async () => {
|
|
||||||
if (instanceStore.current?.id) {
|
|
||||||
await instanceStore.refresh(instanceStore.current?.id);
|
|
||||||
message.success('操作成功');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const jumpProduct = () => {
|
|
||||||
menuStory.jumpPage('device/Product/Detail', {
|
|
||||||
id: instanceStore.current?.productId,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
const keys = list.value.map((i) => i.key);
|
const keys = list.value.map((i) => i.key);
|
||||||
if (
|
if (
|
||||||
instanceStore.current?.protocol &&
|
instanceStore.current?.protocol &&
|
||||||
|
|
@ -309,8 +244,67 @@ watchEffect(() => {
|
||||||
tab: '边缘端映射',
|
tab: '边缘端映射',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => route.params?.id,
|
||||||
|
async (newId) => {
|
||||||
|
if (newId) {
|
||||||
|
await instanceStore.refresh(String(newId));
|
||||||
|
getStatus(String(newId));
|
||||||
|
list.value = [...initList];
|
||||||
|
getDetail();
|
||||||
|
instanceStore.tabActiveKey = 'Info';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
instanceStore.tabActiveKey = history.state?.params?.tab || 'Info';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const onBack = () => {
|
||||||
|
menuStory.jumpPage('device/Instance');
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTabChange = (e: string) => {
|
||||||
|
instanceStore.tabActiveKey = e;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAction = async () => {
|
||||||
|
if (instanceStore.current?.id) {
|
||||||
|
const resp = await _deploy(instanceStore.current?.id);
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
instanceStore.refresh(instanceStore.current?.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDisconnect = async () => {
|
||||||
|
if (instanceStore.current?.id) {
|
||||||
|
const resp = await _disconnect(instanceStore.current?.id);
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
instanceStore.refresh(instanceStore.current?.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRefresh = async () => {
|
||||||
|
if (instanceStore.current?.id) {
|
||||||
|
await instanceStore.refresh(instanceStore.current?.id);
|
||||||
|
message.success('操作成功');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const jumpProduct = () => {
|
||||||
|
menuStory.jumpPage('device/Product/Detail', {
|
||||||
|
id: instanceStore.current?.productId,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
statusRef.value && statusRef.value.unsubscribe();
|
statusRef.value && statusRef.value.unsubscribe();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue