From 9e2c0069b69ee6c18802503cb4fe9f9ae0bc3509 Mon Sep 17 00:00:00 2001 From: easy <1358086367@qq.com> Date: Fri, 17 Feb 2023 14:37:26 +0800 Subject: [PATCH 1/5] =?UTF-8?q?update:=20=E8=8F=9C=E5=8D=95=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E3=80=81=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86=E3=80=81?= =?UTF-8?q?=E5=85=B3=E7=B3=BB=E9=85=8D=E7=BD=AE=E6=B7=BB=E5=8A=A0=E6=9D=83?= =?UTF-8?q?=E9=99=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/system/Menu/Detail/BasicInfo.vue | 11 +- src/views/system/Menu/Detail/ButtonMange.vue | 77 ++++---- .../Menu/components/ButtonAddDialog.vue | 16 +- .../system/Menu/components/PermissChoose.vue | 30 +++- src/views/system/Menu/index.vue | 80 +++++---- src/views/system/Permission/index.vue | 168 +++++++++--------- src/views/system/Relationship/index.vue | 74 ++++---- 7 files changed, 245 insertions(+), 211 deletions(-) diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue index ea01abbc..2a52fd3c 100644 --- a/src/views/system/Menu/Detail/BasicInfo.vue +++ b/src/views/system/Menu/Detail/BasicInfo.vue @@ -185,16 +185,18 @@ :first-width="3" max-height="350px" v-model:value="form.data.permissions" + :key="form.data.id || ''" /> - 保存 + 保存 + @@ -205,6 +207,7 @@ - + diff --git a/src/views/system/Relationship/index.vue b/src/views/system/Relationship/index.vue index e50f04c7..c0e6a011 100644 --- a/src/views/system/Relationship/index.vue +++ b/src/views/system/Relationship/index.vue @@ -11,38 +11,39 @@ :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }" > @@ -52,14 +53,16 @@ + \ No newline at end of file diff --git a/src/components/Metadata/ArrayParam/index.vue b/src/components/Metadata/ArrayParam/index.vue new file mode 100644 index 00000000..576c63fa --- /dev/null +++ b/src/components/Metadata/ArrayParam/index.vue @@ -0,0 +1,67 @@ + + + \ No newline at end of file diff --git a/src/components/Metadata/BooleanParam/index.vue b/src/components/Metadata/BooleanParam/index.vue new file mode 100644 index 00000000..4e14a89a --- /dev/null +++ b/src/components/Metadata/BooleanParam/index.vue @@ -0,0 +1,81 @@ + + + \ No newline at end of file diff --git a/src/components/Metadata/EnumParam/index.vue b/src/components/Metadata/EnumParam/index.vue new file mode 100644 index 00000000..bb9daf5d --- /dev/null +++ b/src/components/Metadata/EnumParam/index.vue @@ -0,0 +1,160 @@ + + + \ No newline at end of file diff --git a/src/components/Metadata/JsonParam/index.vue b/src/components/Metadata/JsonParam/index.vue new file mode 100644 index 00000000..2b77587c --- /dev/null +++ b/src/components/Metadata/JsonParam/index.vue @@ -0,0 +1,172 @@ + + + \ No newline at end of file diff --git a/src/views/device/Instance/typings.d.ts b/src/views/device/Instance/typings.d.ts index 2fbe7f1c..e00c9319 100644 --- a/src/views/device/Instance/typings.d.ts +++ b/src/views/device/Instance/typings.d.ts @@ -1,3 +1,5 @@ +import { MetadataItem } from "../Product/typings"; + export type DeviceInstance = { id: string; name: string; diff --git a/src/views/device/components/Metadata/Base/Edit/PropertyForm.vue b/src/views/device/components/Metadata/Base/Edit/PropertyForm.vue new file mode 100644 index 00000000..8c58661c --- /dev/null +++ b/src/views/device/components/Metadata/Base/Edit/PropertyForm.vue @@ -0,0 +1,99 @@ + + + \ No newline at end of file diff --git a/src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue b/src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue new file mode 100644 index 00000000..2efa7b2a --- /dev/null +++ b/src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue @@ -0,0 +1,151 @@ + + + \ No newline at end of file diff --git a/src/views/device/components/Metadata/Base/Edit/index.vue b/src/views/device/components/Metadata/Base/Edit/index.vue index 5a86c950..d783b65e 100644 --- a/src/views/device/components/Metadata/Base/Edit/index.vue +++ b/src/views/device/components/Metadata/Base/Edit/index.vue @@ -1,10 +1,10 @@ \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue new file mode 100644 index 00000000..975d91fd --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue @@ -0,0 +1,93 @@ + + + \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue new file mode 100644 index 00000000..32462129 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue @@ -0,0 +1,127 @@ + + + + + \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Message/Log/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/Log/index.vue new file mode 100644 index 00000000..81efb838 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Message/Log/index.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Message/index.vue b/src/views/device/Instance/Detail/Diagnose/Message/index.vue new file mode 100644 index 00000000..2a185673 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Message/index.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/src/views/device/Instance/Detail/Diagnose/Message/util.ts b/src/views/device/Instance/Detail/Diagnose/Message/util.ts new file mode 100644 index 00000000..30da1df0 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Message/util.ts @@ -0,0 +1,29 @@ +export type MessageType = { + up: { + text: string; + status: 'loading' | 'success' | 'error'; + }; + down: { + text: string; + status: 'loading' | 'success' | 'error'; + }; +} + +export const messageStyleMap = new Map(); +messageStyleMap.set('loading', { + background: 'linear-gradient(0deg, rgba(30, 165, 241, 0.03), rgba(30, 165, 241, 0.03)), #FFFFFF', + boxShadow: '-2px 0px 0px #1EA5F1', +}); +messageStyleMap.set('error', { + background: 'linear-gradient(0deg, rgba(255, 77, 79, 0.03), rgba(255, 77, 79, 0.03)), #FFFFFF', + boxShadow: '-2px 0px 0px #FF4D4F', +}); +messageStyleMap.set('success', { + background: 'linear-gradient(0deg, rgba(50, 212, 164, 0.03), rgba(50, 212, 164, 0.03)), #FFFFFF', + boxShadow: '-2px 0px 0px #32D4A4', +}); + +export const messageStatusMap = new Map(); +messageStatusMap.set('loading', 'processing'); +messageStatusMap.set('error', 'error'); +messageStatusMap.set('success', 'success'); \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx b/src/views/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx new file mode 100644 index 00000000..acb456ff --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx @@ -0,0 +1,101 @@ +import { Badge, Descriptions, Modal, Tooltip } from "ant-design-vue" +import TitleComponent from '@/components/TitleComponent/index.vue' +import styles from './index.module.less' +import AIcon from "@/components/AIcon"; +import _ from "lodash"; + +const DiagnosticAdvice = defineComponent({ + props: { + data: { + type: Object, + default: () => { } + } + }, + emits: ['close'], + setup(props, { emit }) { + const { data } = props + return () => { + emit('close') + }} + onCancel={() => { + emit('close') + }} + > +
+ +
+
+ + 所有诊断均无异常但设备仍未上线,请检查以下内容 +
+
+ { + (data?.list || []).map((item: any, index: number) => ( +
+ {item} +
+ )) + } +
+
+
+
+ + + + {data?.info?.id || ''} + + {data?.info?.address?.length > 0 && ( + + + {(data?.info?.address || []).map((i: any) => ( +
+ + {i.address} +
+ ))} +
+ } + > +
+ {(data?.info?.address || []).slice(0, 1).map((i: any) => ( +
+ + {i.address} +
+ ))} +
+ + + )} + + {(_.flatten(_.map(data?.info?.config, 'properties')) || []).map((item: any, index: number) => ( + + {item.name} + + + + + ) : ( + item.name + ) + } + > + {data?.info?.configValue[item?.property] || ''} + + ))} + + +
+ } +}) + +export default DiagnosticAdvice \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx b/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx new file mode 100644 index 00000000..cd066848 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx @@ -0,0 +1,217 @@ +import AIcon from "@/components/AIcon"; +import { Button, Descriptions, Modal } from "ant-design-vue" +import styles from './index.module.less' + +const ManualInspection = defineComponent({ + props: { + data: { + type: Object, + default: () => { } + } + }, + emits: ['close', 'save'], + setup(props, { emit }) { + + const { data } = props + + const dataRender = () => { + if (data.type === 'device' || data.type === 'product') { + return ( + <> +
+
+ + 请检查配置项是否填写正确,若您确定该项无需诊断可 + +
+
+ + {(data?.data?.properties || []).map((item: any) => ( + + {data?.configuration[item.property] || ''} + + ))} + +
+
+ {data?.data?.description ? ( +
+

诊断项说明

+

{data?.data?.description}

+
+ ) : ( + '' + )} + + ); + } else if (data.type === 'cloud') { + return ( + <> +
+
+ + 请检查配置项是否填写正确,若您确定该项无需诊断可 + +
+
+ + {data.configuration?.provider === 'OneNet' ? ( + <> + + {data?.configuration?.configuration?.apiAddress || ''} + + + {data?.configuration?.configuration?.apiKey || ''} + + + {data?.configuration?.configuration?.validateToken || ''} + + + {data?.configuration?.configuration?.aesKey || ''} + + + ) : ( + <> + + {data?.configuration?.configuration?.apiAddress || ''} + + + {data?.configuration?.configuration?.appKey || ''} + + + {data?.configuration?.configuration?.appSecret || ''} + + + )} + +
+
+ {data?.configuration?.configuration?.description ? ( +
+

诊断项说明

+

{data?.configuration?.configuration?.description}

+
+ ) : ( + '' + )} + + ); + } else if (data.type === 'media') { + return ( + <> +
+
+ + 请检查配置项是否填写正确,若您确定该项无需诊断可 + +
+
+ + {data?.configuration?.configuration?.shareCluster ? ( + <> + + {data?.configuration?.configuration?.domain || ''} + + + {data?.configuration?.configuration?.sipId || ''} + + + {data?.configuration?.configuration?.shareCluster ? '共享配置' : '独立配置'} + + + {`${data?.configuration?.configuration?.hostPort?.host}:${data?.configuration?.configuration?.hostPort?.port}`} + + + {`${data?.configuration?.configuration?.hostPort?.publicHost}:${data?.configuration?.configuration?.hostPort?.publicPort}`} + + + ) : ( + <> + + {data?.configuration?.configuration?.domain || ''} + + + {data?.configuration?.configuration?.sipId || ''} + + + {data?.configuration?.configuration?.shareCluster ? '共享配置' : '独立配置'} + + {data?.configuration?.configuration?.cluster.map((i: any, it: number) => ( +
+
节点{it + 1}
+ + {i?.clusterNodeId || ''} + + + {`${i.host}:${i?.port}`} + + + {`${i?.publicHost}:${i?.publicPort}`} + +
+ ))} + + )} +
+
+
+ {data?.configuration?.configuration.description ? ( +
+

诊断项说明

+

{data?.configuration?.description}

+
+ ) : ( + '' + )} + + ); + } else { + return null; + } + }; + + return () => { + emit('save', data) + }} + onCancel={() => { + // TODO 跳转设备和产品 + }}> +
{dataRender()}
+
+ } +}) + +export default ManualInspection \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Status/index.module.less b/src/views/device/Instance/Detail/Diagnose/Status/index.module.less new file mode 100644 index 00000000..ce805739 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Status/index.module.less @@ -0,0 +1,90 @@ +.statusBox { + width: 100%; + + .statusHeader { + display: flex; + } + + .statusContent { + width: 100%; + margin: 20px 0; + border: 1px solid #ececec; + border-bottom: none; + + .statusItem { + display: flex; + justify-content: space-between; + padding: 20px; + border-bottom: 1px solid #ececec; + + .statusLeft { + display: flex; + + .statusImg { + width: 32px; + height: 32px; + margin: 15px 20px 0 0; + } + + .statusContext { + .statusTitle { + color: rgba(0, 0, 0, 0.8); + font-weight: 700; + font-size: 18px; + } + + .statusDesc { + color: rgba(0, 0, 0, 0.65); + font-size: 14px; + } + + .info { + margin-top: 10px; + color: #646464; + font-size: 14px; + + .infoItem { + width: 100%; + } + } + } + } + + .statusRight { + margin-top: 10px; + font-weight: 700; + font-size: 18px; + } + } + } + } + + .loading { + animation: loading 2s linear infinite; + } + + @keyframes loading { + 0% { + transform: rotate(0deg); + } + 25% { + transform: rotate(90deg); + } + 50% { + transform: rotate(180deg); + } + 75% { + transform: rotate(270deg); + } + 100% { + transform: rotate(360deg); + } + } + + .alert { + height: 40px; + padding-left: 10px; + color: rgba(0, 0, 0, 0.55); + line-height: 40px; + background-color: #f6f6f6; + } \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Status/index.tsx b/src/views/device/Instance/Detail/Diagnose/Status/index.tsx new file mode 100644 index 00000000..db57848b --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Status/index.tsx @@ -0,0 +1,1585 @@ +import { Badge, Button, message, Popconfirm, Space } from "ant-design-vue" +import TitleComponent from '@/components/TitleComponent/index.vue' +import styles from './index.module.less' +import type { ListProps } from './util' +import { networkInitList, childInitList, cloudInitList, mediaInitList, TextColorMap, StatusMap, modifyArrayList, isExit, gatewayList, urlMap } from './util' +import { useInstanceStore } from "@/store/instance" +import { startNetwork, startGateway, getGatewayDetail, queryGatewayState, queryProtocolDetail, detail, queryProductState, queryProductConfig, queryDeviceConfig, _deploy } from '@/api/device/instance' +import { PropType, VNode } from "vue" +import { _deploy as _deployProduct } from "@/api/device/product" +import _ from "lodash" +import DiagnosticAdvice from './DiagnosticAdvice' +import ManualInspection from './ManualInspection' + +type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel' + +const Status = defineComponent({ + components: { TitleComponent }, + props: { + providerType: { + type: String as PropType, + default: undefined + } + }, + emits: ['percentChange', 'countChange', 'stateChange'], + setup(props, { emit }) { + const instanceStore = useInstanceStore() + const time = 500; + + const status = ref<'loading' | 'finish'>('loading') + + const device = ref(instanceStore.current) + const gateway = ref>>() // 网关信息 + const parent = ref>>() // 父设备 + const product = ref>>() // 产品 + + const artificialVisible = ref(false) + const artificialData = ref>>() + + const diagnoseVisible = ref(false) + const diagnoseData = ref>>() + + const bindParentVisible = ref(false) + + const configuration = reactive<{ + product: Record, + device: Record + }>({ + product: {}, + device: [] + }) + + const list = ref([]) + + const manualInspection = (params: any) => { + artificialVisible.value = true + artificialData.value = params + } + + // TODO + const jumpAccessConfig = () => { + // const purl = getMenuPathByCode(MENUS_CODE['device/Product/Detail']); + // if (purl) { + // history.push( + // `${getMenuPathByParams(MENUS_CODE['device/Product/Detail'], device.productId)}`, + // { + // tab: 'access', + // }, + // ); + // } else { + // message.error('规则可能有加密处理,请联系管理员'); + // } + }; + + const jumpDeviceConfig = () => { + instanceStore.tabActiveKey = 'Info' + } + + // 网络信息 + const diagnoseNetwork = () => new Promise(async (resolve) => { + if (unref(device).state?.value === 'online') { + setTimeout(() => { + list.value = modifyArrayList(unref(list), { + key: 'network', + name: '网络组件', + desc: '诊断网络组件配置是否正确,配置错误将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }); + resolve({}) + }, time) + } else { + const _device = unref(device) + if (_device.accessId) { + const response: Record = await queryGatewayState(_device.accessId) + if (response.status === 200) { + gateway.value = response.request + const address = response.result?.channelInfo?.addresses || []; + const _label = address.some((i: any) => i.health === -1); + const __label = address.every((i: any) => i.health === 1); + const health = _label ? -1 : __label ? 1 : 0; + let _item: ListProps | undefined = undefined + if (health === 1) { + _item = { + key: 'network', + name: '网络组件', + desc: '诊断网络组件配置是否正确,配置错误将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }; + } else { + _item = { + key: 'network', + name: '网络组件', + desc: '诊断网络组件配置是否正确,配置错误将导致设备连接失败', + status: 'error', + text: '异常', + info: health === -1 ? ( +
+
+ 网络组件已禁用,请先 { + const res = await startNetwork( + unref(gateway)?.channelId, + ); + if (res.status === 200) { + message.success('操作成功!'); + list.value = modifyArrayList( + list.value, + { + key: 'network', + name: '网络组件', + desc: '诊断网络组件配置是否正确,配置错误将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + } + }} + > + + + } + /> +
+
+ ) : ( +
+
+ +
+
+ +
+
+ ), + }; + } + setTimeout(() => { + if (_item) { + list.value = modifyArrayList(list.value, _item); + } + resolve({}); + }, time); + } else { + message.error('请求发生错误') + } + } else { + message.error('设备不含accessId') + } + } + }) + + // 设备接入网关 + const diagnoseGateway = () => new Promise(async (resolve) => { + const desc = props.providerType && ['child-device', 'cloud'].includes(props.providerType) + ? '诊断设备接入网关状态是否正常,网关配置是否正确' + : '诊断设备接入网关状态是否正常,禁用状态将导致连接失败'; + if (unref(device).state.value === 'online') { + setTimeout(() => { + list.value = modifyArrayList(list.value, { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'success', + text: '正常', + info: null, + }); + resolve({}); + }, time); + } else { + let _item: ListProps | undefined = undefined + if (!unref(gateway)) { + const accessId = unref(device)?.accessId + if (accessId) { + const response: Record = await queryGatewayState(accessId) + if (response.status === 200) { + gateway.value = response.result + if (response.result?.state?.value === 'enabled') { + if (props.providerType === 'cloud' || unref(device)?.accessProvider === 'gb28181-2016') { + _item = { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'warning', + text: '可能存在异常', + info: ( +
+
+ + 请网关配置是否已填写正确,若您确定该项无需诊断可 + { + list.value = modifyArrayList( + list.value, + { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'success', + text: '正常', + info: null, + }, + ); + }} + > + + + + } + /> +
+
+ ), + }; + } else { + _item = { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'success', + text: '正常', + info: null, + }; + } + } else { + _item = { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'error', + text: '异常', + info: ( +
+
+ 设备接入网关已禁用,请先 + { + const resp = await startGateway(unref(device).accessId || ''); + if (resp.status === 200) { + message.success('操作成功!'); + list.value = modifyArrayList( + list.value, + { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'success', + text: '正常', + info: null, + }, + ); + } + }} + > + + + } + /> +
+
+ ), + }; + } + setTimeout(() => { + if (_item) { + list.value = modifyArrayList(list.value, _item); + } + resolve({}); + }, time); + } else { + message.error('请求发生错误') + } + } else { + message.error('设备不含accessId') + } + } else { + if (unref(gateway)?.state?.value === 'enabled') { + if (props.providerType === 'cloud' || unref(device)?.accessProvider === 'gb28181-2016') { + _item = { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'warning', + text: '可能存在异常', + info: ( +
+
+ + 请 + 网关配置是否已填写正确,若您确定该项无需诊断可 + { + list.value = modifyArrayList( + list.value, + { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'success', + text: '正常', + info: null, + }, + ); + }} + > + + + + } + /> +
+
+ ), + }; + } else { + _item = { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'success', + text: '正常', + info: null, + }; + } + } else { + _item = { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'error', + text: '异常', + info: ( +
+
+ + 设备接入网关已禁用,请先 { + const resp = await startGateway(unref(device).accessId || ''); + if (resp.status === 200) { + message.success('操作成功!'); + list.value = modifyArrayList( + list.value, + { + key: 'gateway', + name: '设备接入网关', + desc: desc, + status: 'success', + text: '正常', + info: null, + }, + ); + } + }} + > + + + + } + /> +
+
+ ), + }; + } + setTimeout(() => { + if (_item) { + list.value = modifyArrayList(list.value, _item); + } + resolve({}); + }, time); + } + } + }) + + // 网关父设备 + const diagnoseParentDevice = new Promise(async (resolve) => { + if (unref(device).state.value === 'online') { + setTimeout(() => { + list.value = modifyArrayList(unref(list), { + key: 'parent-device', + name: '网关父设备', + desc: '诊断网关父设备状态是否正常,禁用或离线将导致连接失败', + status: 'success', + text: '正常', + info: null, + }); + resolve({}); + }, time); + } else { + const _device = unref(device) + if (!_device?.parentId) { + setTimeout(() => { + list.value = modifyArrayList(unref(list), { + key: 'parent-device', + name: '网关父设备', + desc: '诊断网关父设备状态是否正常,禁用或离线将导致连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ + 未绑定父设备,请先 + + 父设备后重试 + + } + /> +
+
+ ), + }); + resolve({}); + }, time); + } else { + let _item: ListProps | undefined = undefined; + const response = await detail(_device?.parentId); + parent.value = response.result + if (response.status === 200) { + if (response?.result?.state?.value === 'notActive') { + _item = { + key: 'parent-device', + name: '网关父设备', + desc: '诊断网关父设备状态是否正常,禁用或离线将导致连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ + 网关父设备已禁用,请先 { + const resp = await _deploy(response?.result?.id || ''); + if (resp.status === 200) { + message.success('操作成功!'); + list.value = modifyArrayList( + list.value, + { + key: 'parent-device', + name: '网关父设备', + desc: '诊断网关父设备状态是否正常,禁用或离线将导致连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + } + }} + > + + + + } + /> +
+
+ ), + }; + } else if (response?.result?.state?.value === 'online') { + _item = { + key: 'parent-device', + name: '网关父设备', + desc: '诊断网关父设备状态是否正常,禁用或离线将导致连接失败', + status: 'success', + text: '正常', + info: null, + }; + } else { + _item = { + key: 'parent-device', + name: '网关父设备', + desc: '诊断网关父设备状态是否正常,禁用或离线将导致连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ 网关父设备已离线,请先排查网关设备故障} + /> +
+
+ ), + }; + } + setTimeout(() => { + if (_item) { + list.value = modifyArrayList(unref(list), _item); + } + resolve({}); + }, time); + } + } + } + }) + + // 产品状态 + const diagnoseProduct = () => new Promise(async (resolve) => { + if (unref(device).state?.value === 'online') { + setTimeout(() => { + list.value = modifyArrayList(unref(list), { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }); + resolve({}); + }, time); + } else { + const _device = unref(device) + if (_device.productId) { + const response: Record = await queryProductState(_device.productId) + if (response.status === 200) { + product.value = response.result + let _item: ListProps | undefined = undefined + const state = response.result?.state + _item = { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: state === 1 ? 'success' : 'error', + text: state === 1 ? '正常' : '异常', + info: + state === 1 ? null : ( +
+
+ + 产品已禁用,请 { + const resp = await _deployProduct(unref(device).productId || ''); + if (resp.status === 200) { + message.success('操作成功!'); + list.value = modifyArrayList( + list.value, + { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + } + }} + > + + + 产品 + + } + /> +
+
+ ), + }; + setTimeout(() => { + if (_item) { + list.value = modifyArrayList(unref(list), _item); + } + resolve({}); + }, time); + } + } + } + }) + + // 设备状态 + const diagnoseDevice = () => new Promise(resolve => { + const _device = unref(device) + if (_device.state?.value === 'online') { + setTimeout(() => { + list.value = modifyArrayList(unref(list), { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }); + resolve({}); + }, time); + } else { + let item: ListProps | undefined = undefined; + if (_device.state?.value === 'notActive') { + item = { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ + 设备已禁用,请 { + const resp = await _deploy(unref(device)?.id || ''); + if (resp.status === 200) { + instanceStore.current.state = { value: 'offline', text: '离线' } + message.success('操作成功!'); + list.value = modifyArrayList( + list.value, + { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + } + }} + > + + 设备 + + } + /> +
+
+ ), + }; + } else { + item = { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'success', + text: '正常', + info: null, + }; + } + setTimeout(() => { + if (item) { + list.value = modifyArrayList(unref(list), item); + } + resolve({}); + }, time); + } + }) + + // 产品认证配置 + const diagnoseProductAuthConfig = () => new Promise(async (resolve) => { + const _device = unref(device) + if (_device.productId) { + const response: Record = await queryProductConfig(_device.productId) + if (response.status === 200 && response.result.length > 0) { + configuration.product = response.result; + const _configuration = unref(product)?.configuration || {}; + response.result.map((item: any, i: number) => { + const _list = [...list.value]; + if (!_.map(_list, 'key').includes(`product-auth${i}`)) { + list.value = modifyArrayList( + list.value, + { + key: `product-auth${i}`, + name: `产品-${item?.name}`, + desc: '诊断产品MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + list.value.length, + ); + } + const properties = _.map(item?.properties, 'property'); + if (unref(device).state?.value === 'online') { + setTimeout(() => { + list.value = modifyArrayList(list.value, { + key: `product-auth${i}`, + name: `产品-${item?.name}`, + desc: '诊断产品MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }); + resolve({}); + }, time); + } else if ( + !isExit( + properties, + Object.keys(_configuration).filter((k: string) => !!_configuration[k]), + ) + ) { + setTimeout(() => { + list.value = modifyArrayList(list.value, { + key: `product-auth${i}`, + name: `产品-${item?.name}`, + desc: '诊断产品MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ + 请根据设备接入配置需要 + + ,若您确定该项无需诊断可 + { + list.value = modifyArrayList( + list.value, + { + key: `product-auth${i}`, + name: `产品-${item?.name}`, + desc: '诊断产品MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + }} + > + + + + } + /> +
+
+ ), + }); + resolve({}); + }, time); + } else { + setTimeout(() => { + list.value = modifyArrayList(list.value, { + key: `product-auth${i}`, + name: `产品-${item?.name}`, + desc: '诊断产品MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'warning', + text: '可能存在异常', + info: ( +
+
+ + 请 + + 产品{item.name} + 配置是否已填写正确,若您确定该项无需诊断可 + { + list.value = modifyArrayList( + list.value, + { + key: `product-auth${i}`, + name: `产品-${item?.name}`, + desc: '诊断产品MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + }} + > + + + + } + /> +
+
+ ), + }); + resolve({}); + }, time); + } + }); + } else { + resolve({}); + } + } + }) + + // 设备认证配置 + const diagnoseDeviceAuthConfig = () => new Promise(async (resolve) => { + const _device = unref(device) + if (_device.id) { + const response: Record = await queryDeviceConfig(_device.id) + if (response.status === 200 && response.result.length > 0) { + configuration.device = response.result; + const _configuration = _device?.configuration || {}; + response.result.map((item: any, i: number) => { + const _list = [...list.value]; + if (!_.map(_list, 'key').includes(`device-auth${i}`)) { + list.value = modifyArrayList( + list.value, + { + key: `device-auth${i}`, + name: `设备-${item?.name}`, + desc: '诊断设备MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + list.value.length, + ); + } + const properties = _.map(item?.properties, 'property'); + if (_device.state?.value === 'online') { + setTimeout(() => { + list.value = modifyArrayList(list.value, { + key: `device-auth${i}`, + name: `设备-${item?.name}`, + desc: '诊断设备MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }); + resolve({}); + }, time); + } else if ( + !isExit( + properties, + Object.keys(_configuration).filter((k: string) => !!_configuration[k]), + ) + ) { + setTimeout(() => { + list.value = modifyArrayList(list.value, { + key: `device-auth${i}`, + name: `设备-${item?.name}`, + desc: '诊断设备MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ + 请根据设备接入配置需要 + + ,若您确定该项无需诊断可 + { + list.value = modifyArrayList( + list.value, + { + key: `device-auth${i}`, + name: `设备-${item?.name}`, + desc: '诊断设备MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + }} + > + + + + } + /> +
+
+ ), + }); + resolve({}); + }, time); + } else { + setTimeout(() => { + list.value = modifyArrayList(list.value, { + key: `device-auth${i}`, + name: `设备-${item?.name}`, + desc: '诊断设备MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'warning', + text: '可能存在异常', + info: ( +
+
+ + 请 + + 设备{item.name} + 配置是否已填写正确,若您确定该项无需诊断可 + { + list.value = modifyArrayList( + list.value, + { + key: `device-auth${i}`, + name: `设备-${item?.name}`, + desc: '诊断设备MQTT认证配置是否正确,错误的配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }, + ); + }} + > + + + + } + /> +
+
+ ), + }); + resolve({}); + }, time); + } + }); + } else { + resolve({}); + } + } + }) + + // onenet + const diagnoseOnenet = () => new Promise(async (resolve) => { + const _device = unref(device) + if (_device?.accessProvider === 'OneNet') { + const response: any = await queryDeviceConfig(_device?.id || ''); + configuration.device = response.result; + const _configuration = _device?.configuration || {}; + let item: ListProps | undefined = undefined; + if ( + _device.configuration?.onenet_imei || + _device.configuration?.onenet_imsi || + (unref(product)?.configuration && + unref(product)?.configuration['api-key']) + ) { + item = { + key: `onenet`, + name: `设备-OneNet配置`, + desc: '诊断设备OneNet是否已配置,未配置将导致连接失败', + status: 'warning', + text: '可能存在异常', + info: ( +
+
+ 请 + + 设备-OneNet配置是否已填写正确,若您确定该项无需诊断可 + { + list.value = modifyArrayList(list.value, { + key: `onenet`, + name: `设备-OneNet配置`, + desc: '诊断设备OneNet是否已配置,未配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }); + }} + > + + +
+
+ ), + }; + } else { + item = { + key: `onenet`, + name: `设备-OneNet配置`, + desc: '诊断设备OneNet是否已配置,未配置将导致连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ 请根据设备接入配置需要 + + ,若您确定该项无需诊断可 + { + list.value = modifyArrayList(list.value, { + key: `onenet`, + name: `设备-OneNet配置`, + desc: '诊断设备OneNet是否已配置,未配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }); + }} + > + + +
+
+ ), + }; + } + setTimeout(() => { + if (item) { + list.value = modifyArrayList( + list.value, + item, + list.value.length, + ); + } + resolve({}); + }, time); + } else { + resolve({}); + } + }) + + // ctwing + const diagnoseCTWing = () => new Promise(async (resolve) => { + const _device = unref(device) + if (_device?.accessProvider === 'Ctwing') { + const response: any = await queryDeviceConfig(_device?.id || ''); + configuration.device = response.result; + const _configuration = _device?.configuration || {}; + let item: ListProps | undefined = undefined; + const config = unref(product)?.configuration; + if ( + _device.configuration?.ctwing_imei || + _device.configuration?.ctwing_imsi || + (config && (config.ctwing_product_id || config.master_key)) + ) { + item = { + key: `ctwing`, + name: `设备-CTWing配置`, + desc: '诊断设备CTWing是否已配置,未配置将导致连接失败', + status: 'warning', + text: '可能存在异常', + info: ( +
+
+ 请 + + 设备-CTWing配置是否已填写正确,若您确定该项无需诊断可 + { + list.value = modifyArrayList(list.value, { + key: `ctwing`, + name: `设备-CTWing配置`, + desc: '诊断设备CTWing是否已配置,未配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }); + }} + > + + +
+
+ ), + }; + } else { + item = { + key: `ctwing`, + name: `设备-CTWing配置`, + desc: '诊断设备CTWing是否已配置,未配置将导致连接失败', + status: 'error', + text: '异常', + info: ( +
+
+ 请根据设备接入配置需要 + + ,若您确定该项无需诊断可 + { + list.value = modifyArrayList(list.value, { + key: `ctwing`, + name: `设备-CTWing配置`, + desc: '诊断设备CTWing是否已配置,未配置将导致连接失败', + status: 'success', + text: '正常', + info: null, + }); + }} + > + + +
+
+ ), + }; + } + setTimeout(() => { + if (item) { + list.value = modifyArrayList( + list.value, + item, + list.value.length, + ); + } + resolve({}); + }, time); + } else { + resolve({}); + } + }) + + const diagnoseNetworkOtherConfig = async () => { + if (unref(device).state?.value != 'online') { + const item: VNode[] = []; + let info: any = { + id: unref(device).id, + }; + item.push(); + if (props.providerType === 'network') { + item.push( + 1 ? ( + <> + 请检查设备网络是否畅通,并确保设备已连接到以下地址之一: +
+ {(unref(gateway)?.channelInfo?.addresses || []).map((i: any) => ( + + + {i.address} + + ))} +
+ + ) : ( + <> + 请检查设备网络是否畅通,并确保设备已连接到: + {(unref(gateway)?.channelInfo?.addresses || []).map((i: any) => ( + + + {i.address} + + ))} + + ) + } + />, + ); + if ( + unref(device)?.protocol && + unref(device)?.accessProvider && + gatewayList.includes(unref(device).accessProvider as string) + ) { + const response = await queryProtocolDetail(unref(device).protocol, 'MQTT'); + if (response.status === 200) { + if ((response.result?.routes || []).length > 0) { + item.push( + + 请根据 + + 中${urlMap.get(unref(device)?.accessProvider) || ''}信息,任意上报一条数据 + + } + />, + ); + } else { + item.push( + + 请联系管理员提供${urlMap.get(unref(device)?.accessProvider) || ''} + 信息,并根据URL信息任意上报一条数据 + + } + />, + ); + } + } + } + info = { + ...info, + address: unref(gateway)?.channelInfo?.addresses || [], + config: configuration.device || [], + }; + } else if (props.providerType === 'child-device') { + if (unref(device)?.accessProvider === 'gb28181-2016') { + const address = unref(gateway)?.channelInfo?.addresses[0]; + if (address) { + item.push( + + 请检查设备网络是否畅通,并确保设备已连接到:SIP{' '} + + + {address.address} + + + } + />, + ); + info = { + ...info, + address: [address] || [], + }; + } + } + } else if (props.providerType === 'media') { + if (unref(device)?.accessProvider === 'gb28181-2016') { + const address = unref(gateway)?.channelInfo?.addresses[0]; + if (address) { + item.push( + + 请检查设备网络是否畅通,并确保设备已连接到:SIP{' '} + + + {address.address} + + + } + />, + ); + info = { + ...info, + address: [address] || [], + }; + } + } + } else if (props.providerType === 'cloud') { + item.push( + , + ); + item.push(); + } else if (props.providerType === 'channel') { + } + info = { + ...info, + configValue: unref(device)?.configuration || {}, + }; + diagnoseData.value = { + list: [...item], + info, + } + diagnoseVisible.value = true + } else { + emit('stateChange', 'success') + } + }; + + const handleSearch = async () => { + emit('percentChange', 0) + emit('countChange', 0) + emit('stateChange', 'loading') + status.value = 'loading' + const { providerType } = props + let arr: any[] = []; + if (providerType === 'network') { + list.value = [...networkInitList]; + arr = [ + diagnoseNetwork, + diagnoseGateway, + diagnoseProduct, + diagnoseDevice, + diagnoseProductAuthConfig, + diagnoseDeviceAuthConfig, + ]; + } else if (providerType === 'child-device') { + list.value = [...childInitList]; + arr = [ + diagnoseGateway, + diagnoseParentDevice, + diagnoseProduct, + diagnoseDevice, + diagnoseProductAuthConfig, + diagnoseDeviceAuthConfig, + ]; + } else if (providerType === 'media') { + list.value = [...mediaInitList]; + arr = [diagnoseGateway, diagnoseProduct, diagnoseDevice]; + } else if (providerType === 'cloud') { + list.value = [...cloudInitList]; + arr = [diagnoseGateway, diagnoseProduct, diagnoseDevice, diagnoseCTWing, diagnoseOnenet]; + } else if (providerType === 'channel') { + message.error('未开发'); + return; + } + if (arr.length > 0) { + for (let i = 0; i < arr.length; i++) { + await arr[i](); + emit('percentChange') + } + emit('percentChange', 100) + status.value = 'finish' + } + } + + watch(() => props.providerType, (newVal) => { + if (newVal) { + device.value = instanceStore.current + handleSearch() + } + }, { deep: true, immediate: true }) + + watch(() => [list, status], () => { + if (status.value === 'finish') { + const _list = _.uniq(_.map(unref(list), 'status')); + if (unref(device).state?.value !== 'online') { + emit('stateChange', 'error') + if (_list[0] === 'success' && _list.length === 1) { + diagnoseNetworkOtherConfig(); + } + } else { + emit('stateChange', 'success') + } + } else if (status.value === 'loading') { + const arr = _.map(unref(list), 'status').filter((i) => i !== 'loading'); + emit('countChange', arr.length) + } + }, { deep: true, immediate: true }) + + return () =>
+
+ + + { + status.value === 'finish' && unref(device).state?.value !== 'online' && + } + + +
+
+ { + list.value.map(item => ( +
+
+
+ +
+
+
{item?.name}
+
{item.desc}
+
{item?.info}
+
+
+
+ {item?.text} +
+
+ )) + } +
+ { + diagnoseVisible.value && { + diagnoseVisible.value = false + }} + /> + } + {artificialVisible.value && ( + { + artificialVisible.value = false + }} + onSave={(params: any) => { + list.value = modifyArrayList(list.value, { + key: params.key, + name: params.name, + desc: params.desc, + status: 'success', + text: '正常', + info: null, + }); + artificialVisible.value = false + }} + /> + )} +
+ }, +}) + +export default Status \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/Status/util.ts b/src/views/device/Instance/Detail/Diagnose/Status/util.ts new file mode 100644 index 00000000..11811906 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/Status/util.ts @@ -0,0 +1,262 @@ +import { getImage } from '@/utils/comm'; +import { VNode } from 'vue'; + +export type ListProps = { + key: string; + name: string; + desc?: string; + status: 'loading' | 'error' | 'success' | 'warning'; + text?: string; + info?: VNode | null; +}; + +export const TextColorMap = new Map(); +TextColorMap.set('loading', 'black'); +TextColorMap.set('error', 'red'); +TextColorMap.set('success', 'green'); +TextColorMap.set('warning', '#FAB247'); + +export const StatusMap = new Map(); +StatusMap.set('error', getImage('/diagnose/status/error.png')); +StatusMap.set('success', getImage('/diagnose/status/success.png')); +StatusMap.set('warning', getImage('/diagnose/status/warning.png')); +StatusMap.set('loading', getImage('/diagnose/status/loading.png')); + +export const networkInitList: ListProps[] = [ + // { + // key: 'access', + // name: '设备接入配置', + // desc: '诊断该设备所属产品是否已配置“设备接入”方式,未配置将导致设备连接失败。', + // status: 'loading', + // text: '正在诊断中...', + // info: null, + // }, + { + key: 'network', + name: '网络组件', + desc: '诊断网络组件配置是否正确,配置错误将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'gateway', + name: '设备接入网关', + desc: '诊断设备接入网关状态是否正常,禁用状态将导致连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, +]; + +export const childInitList: ListProps[] = [ + // { + // key: 'access', + // name: '设备接入配置', + // desc: '诊断该设备所属产品是否已配置“设备接入”方式,未配置将导致设备连接失败。', + // status: 'loading', + // text: '正在诊断中...', + // info: null, + // }, + // { + // key: 'network', + // name: '网络组件', + // desc: '诊断网络组件配置是否正确,配置错误将导致设备连接失败', + // status: 'loading', + // text: '正在诊断中...', + // info: null, + // }, + { + key: 'gateway', + name: '设备接入网关', + desc: '诊断设备接入网关状态是否正常,网关配置是否正确', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'parent-device', + name: '网关父设备', + desc: '诊断网关父设备状态是否正常,禁用或离线将导致连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, +]; + +export const cloudInitList: ListProps[] = [ + // { + // key: 'access', + // name: '设备接入配置', + // desc: '诊断该设备所属产品是否已配置“设备接入”方式,未配置将导致设备连接失败。', + // status: 'loading', + // text: '正在诊断中...', + // info: null, + // }, + { + key: 'gateway', + name: '设备接入网关', + desc: '诊断设备接入网关状态是否正常,网关配置是否正确', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, +]; + +export const channelInitList: ListProps[] = [ + // { + // key: 'access', + // name: '设备接入配置', + // desc: '诊断该设备所属产品是否已配置“设备接入”方式,未配置将导致设备连接失败。', + // status: 'loading', + // text: '正在诊断中...', + // info: null, + // }, + { + key: 'gateway', + name: '设备接入网关', + desc: '诊断设备接入网关状态是否正常,禁用状态将导致连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, +]; + +export const mediaInitList: ListProps[] = [ + // { + // key: 'access', + // name: '设备接入配置', + // desc: '诊断该设备所属产品是否已配置“设备接入”方式,未配置将导致设备连接失败。', + // status: 'loading', + // text: '正在诊断中...', + // info: null, + // }, + { + key: 'gateway', + name: '设备接入网关', + desc: '诊断设备接入网关状态是否正常,禁用状态将导致连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'product', + name: '产品状态', + desc: '诊断产品状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, + { + key: 'device', + name: '设备状态', + desc: '诊断设备状态是否正常,禁用状态将导致设备连接失败', + status: 'loading', + text: '正在诊断中...', + info: null, + }, +]; + +export const modifyArrayList = (oldList: ListProps[], item: ListProps, index?: number) => { + let newList: ListProps[] = []; + if (index !== 0 && !index) { + // 添加 + for (let i = 0; i < oldList.length; i++) { + const dt = oldList[i]; + if (item.key === dt.key) { + newList.push(item); + } else { + newList.push(dt); + } + } + } else { + // 修改 + oldList.splice(index, 0, item); + newList = [...oldList]; + } + return newList; +}; + +export const isExit = (arr1: any[], arr2: any[]) => { + return arr1.find((item) => arr2.includes(item)); +}; + +export const gatewayList = [ + 'websocket-server', + 'http-server-gateway', + 'udp-device-gateway', + 'coap-server-gateway', + 'mqtt-client-gateway', + 'tcp-server-gateway', +]; + +export const urlMap = new Map(); +urlMap.set('mqtt-client-gateway', 'topic'); +urlMap.set('http-server-gateway', 'url'); +urlMap.set('websocket-server', 'url'); +urlMap.set('coap-server-gateway', 'url'); + diff --git a/src/views/device/Instance/Detail/Diagnose/index.vue b/src/views/device/Instance/Detail/Diagnose/index.vue new file mode 100644 index 00000000..c1180ffc --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/index.vue @@ -0,0 +1,201 @@ + + + + + \ No newline at end of file diff --git a/src/views/device/Instance/Detail/Diagnose/util.ts b/src/views/device/Instance/Detail/Diagnose/util.ts new file mode 100644 index 00000000..ad5ac915 --- /dev/null +++ b/src/views/device/Instance/Detail/Diagnose/util.ts @@ -0,0 +1,30 @@ +import { getImage } from '@/utils/comm'; + +export const headerImgMap = new Map(); +headerImgMap.set('loading', getImage('/diagnose/loading-2.png')); +headerImgMap.set('error', getImage('/diagnose/error.png')); +headerImgMap.set('success', getImage('/diagnose/success.png')); + +export const headerColorMap = new Map(); +headerColorMap.set('loading', 'linear-gradient(89.95deg, #E6F5FF 0.03%, #E9EAFF 99.95%)'); +headerColorMap.set( + 'error', + 'linear-gradient(89.95deg, rgba(231, 173, 86, 0.1) 0.03%, rgba(247, 111, 93, 0.1) 99.95%)', +); +headerColorMap.set('success', 'linear-gradient(89.95deg, #E8F8F7 0.03%, #EBEFFA 99.95%)'); + + +export const headerTitleMap = new Map(); +headerTitleMap.set('loading', '正在诊断中'); +headerTitleMap.set('error', '发现连接问题'); +headerTitleMap.set('success', '连接状态正常'); + +export const headerDescMap = new Map(); +headerDescMap.set('loading', '已诊断XX个'); +headerDescMap.set('error', '请处理连接异常'); +headerDescMap.set('success', '现在可调试消息通信'); + +export const progressMap = new Map(); +progressMap.set('loading', '#597EF7'); +progressMap.set('error', '#FAB247'); +progressMap.set('success', '#32D4A4'); diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue index 2e4c2609..d7a90c8e 100644 --- a/src/views/device/Instance/Detail/index.vue +++ b/src/views/device/Instance/Detail/index.vue @@ -44,6 +44,7 @@ import Info from './Info/index.vue'; import Running from './Running/index.vue' import Metadata from '../../components/Metadata/index.vue'; import ChildDevice from './ChildDevice/index.vue'; +import Diagnose from './Diagnose/index.vue' import { _deploy, _disconnect } from '@/api/device/instance' import { message } from 'ant-design-vue'; import { getImage } from '@/utils/comm'; @@ -52,7 +53,7 @@ const route = useRoute(); const instanceStore = useInstanceStore() const statusMap = new Map(); -statusMap.set('online', 'processing'); +statusMap.set('online', 'success'); statusMap.set('offline', 'error'); statusMap.set('notActive', 'warning'); @@ -72,7 +73,11 @@ const list = [ { key: 'ChildDevice', tab: '子设备' - } + }, + { + key: 'Diagnose', + tab: '设备诊断' + }, ] const tabs = { @@ -80,6 +85,7 @@ const tabs = { Metadata, Running, ChildDevice, + Diagnose } watch( diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue index 4ef603ac..3270902a 100644 --- a/src/views/device/Instance/index.vue +++ b/src/views/device/Instance/index.vue @@ -1,6 +1,10 @@ \ No newline at end of file diff --git a/src/views/northbound/AliCloud/index.vue b/src/views/northbound/AliCloud/index.vue index 3d4e8ccc..52228bac 100644 --- a/src/views/northbound/AliCloud/index.vue +++ b/src/views/northbound/AliCloud/index.vue @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/src/views/northbound/DuerOS/index.vue b/src/views/northbound/DuerOS/index.vue index c35da774..b1079742 100644 --- a/src/views/northbound/DuerOS/index.vue +++ b/src/views/northbound/DuerOS/index.vue @@ -1,6 +1,10 @@