feat: websocket

.eslintrc.cjs

@@ -19,5 +19,8 @@ module.exports = {
 
     rules: {
         // override/add rules settings here, such as:
+    },
+    globals: {
+        NodeJS: 'readonly'
     }
 };

package.json

@@ -43,7 +43,7 @@
     "@commitlint/config-conventional": "^17.4.0",
     "@types/lodash-es": "^4.17.6",
     "@types/moment": "^2.13.0",
-    "@types/node": "^18.11.17",
+    "@types/node": "^18.14.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vuemap/unplugin-resolver": "^1.0.4",
     "autoprefixer": "^10.4.13",

src/api/comm.ts

@@ -27,4 +27,11 @@ export const deleteSearchHistory = (target:string, id:string) => server.remove<S
 /**
  * 获取当前系统版本
  */
-export const systemVersion = () => server.get<{edition?: string}>('/system/version')
+export const systemVersion = () => server.get<{edition?: string}>('/system/version')
+
+/**
+ * 聚合查询
+ * @param data 
+ * @returns 
+ */
+export const queryDashboard = (data: Record<string, any>) => server.post(`/dashboard/_multi`, data)

src/api/device/instance.ts

@@ -314,3 +314,29 @@ export const getGatewayDetail = (id: string) => server.get(`/gateway/device/${id
  * @returns 单位列表
  */
 export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
+
+/**
+ * 执行功能
+ * @param deviceId 设备id
+ * @param functionId 功能id
+ * @param data 
+ * @returns 
+ */
+export const executeFunctions = (deviceId: string, functionId: string, data: any) => server.post(`/device/invoked/${deviceId}/function/${functionId}`, data)
+
+/**
+ * 读取属性
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const readProperties = (deviceId: string, data: any) => server.post(`/device/instance/${deviceId}/properties/_read`, data)
+
+/**
+ * 设置属性
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const settingProperties = (deviceId: string, data: any) => server.put(`/device/instance/${deviceId}/property`, data)
+

src/utils/websocket.ts

@@ -0,0 +1,127 @@
+import { Observable } from 'rxjs'
+import { BASE_API_PATH } from '@/utils/variable';
+import { notification } from 'ant-design-vue';
+import { getToken } from '@/utils/comm';
+
+let ws: any = null
+let count = 0 // 重连计数
+let timer: NodeJS.Timeout = null
+let lockReconnect = false // 避免重复连接
+const total = 100 // 重连总次数
+const subs = {}
+const timeout = 5000
+const tempQueue: any[] = [] // websocket未连接上时，缓存消息列
+
+export const initWebSocket = () => {
+    if (ws) {
+        return ws
+    }
+    const token = getToken()
+    const url = `${document.location.protocol.replace('http', 'ws')}//${document.location.host}${BASE_API_PATH}/messaging/${token}?:X_Access_Token=${token}`;
+    if (count < total) {
+        count += 1
+        ws = new WebSocket(url)
+
+        ws.onopen = () => {
+            count = 0
+            timer = setInterval(heartCheck, 2000)
+            if (tempQueue.length > 0) {
+                for (let i = tempQueue.length - 1; i >= 0; i--) {
+                    ws.send(tempQueue[i])
+                    tempQueue.splice(i, 1)
+                }
+            }
+        }
+
+        ws.onclose = () => {
+            console.log('onerror', count)
+            ws = null
+            reconnect()
+        }
+
+        ws.onmessage = (msg: Record<string, any>) => {
+            const data = JSON.parse(msg.data)
+
+            if (data.type === 'error') {
+                notification.error({ key: 'wserr', message: data.message })
+            }
+
+            if (subs[data.requestId]) {
+                if (data.type === 'complete') {
+                    subs[data.requestId].forEach((item: Record<string, any>) => {
+                        item.complete()
+                    })
+                } else if (data.type === 'result') {
+                    subs[data.requestId].forEach((element: Record<string, any>) => {
+                        element.next(data)
+                    })
+                }
+            }
+        }
+
+        ws.onerror = () => {
+            console.log('onerror', count)
+            ws = null
+            reconnect()
+        }
+
+        return ws
+    }
+}
+
+export const getWebSocket = (id: string, topic: string, parameter: Record<string, any>) => new Observable(subscriber => {
+    if (!subs[id]) {
+        subs[id] = []
+    }
+
+    subs[id].push({
+        next(val: Record<string, any>) {
+            subscriber.next(val)
+        },
+        complete() {
+            subscriber.complete()
+        }
+    })
+
+    const msg = JSON.stringify({ id, topic, parameter, type: 'sub' })
+    const thisWs = initWebSocket()
+    if (thisWs) {
+        if (thisWs.readyState === WebSocket.OPEN) {
+            thisWs.send(msg)
+        } else {
+            tempQueue.push(msg)
+        }
+    }
+
+    return () => {
+        const unsub = JSON.stringify({ id, type: 'unsub' })
+        delete subs[id]
+        if (thisWs) {
+            thisWs.send(unsub)
+        }
+    }
+})
+
+/**
+ * 重连
+ */
+function reconnect() {
+    timer && clearInterval(timer)
+    if (lockReconnect) {
+        return
+    }
+    lockReconnect = true
+    timer = setTimeout(() => {
+        initWebSocket()
+        lockReconnect = false
+    }, timeout * count)
+}
+
+/**
+ * 心跳检测
+ */
+function heartCheck() {
+    if (ws) {
+        ws.send(JSON.stringify({ type: 'ping' }))
+    }
+}

src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue

@@ -72,18 +72,9 @@ const columns = [
     },
 ];
 
-// const dataSource = ref<Record<any, any>[]>(_props.modelValue || []);
-
 const dataSource = computed({
     get: () => {
-        return _props.modelValue || {
+        return _props.modelValue || []
-            messageType: undefined,
-            message: {
-                properties: undefined,
-                functionId: undefined,
-                inputs: []
-            }
-        }
     },
     set: (val: any) => {
         _emit('update:modelValue', val);

src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue

@@ -1,60 +1,118 @@
 <template>
     <div class="function">
-        <a-form 
+        <a-form :layout="'vertical'" ref="formRef" :model="modelRef">
-            :layout="'vertical'"
-            ref="formRef"
-            :model="modelRef"
-        >
             <a-row :gutter="24">
                 <a-col :span="6">
-                    <a-form-item name="messageType" :rules="{
+                    <a-form-item
-                        required: true,
+                        name="type"
-                        message: '请选择',
+                        :rules="{
-                    }">
+                            required: true,
-                        <a-select placeholder="请选择" v-model:value="modelRef.messageType" show-search :filter-option="filterOption">
+                            message: '请选择',
-                            <a-select-option value="READ_PROPERTY">读取属性</a-select-option>
+                        }"
-                            <a-select-option value="WRITE_PROPERTY">修改属性</a-select-option>
+                    >
-                            <a-select-option value="INVOKE_FUNCTION">调用功能</a-select-option>
+                        <a-select
+                            placeholder="请选择"
+                            v-model:value="modelRef.type"
+                            show-search
+                            :filter-option="filterOption"
+                        >
+                            <a-select-option value="READ_PROPERTY"
+                                >读取属性</a-select-option
+                            >
+                            <a-select-option value="WRITE_PROPERTY"
+                                >修改属性</a-select-option
+                            >
+                            <a-select-option value="INVOKE_FUNCTION"
+                                >调用功能</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="['READ_PROPERTY','WRITE_PROPERTY'].includes(modelRef.messageType)">
+                <a-col
-                    <a-form-item :name="['message', 'properties']" :rules="{
+                    :span="6"
-                        required: true,
+                    v-if="
-                        message: '请选择属性',
+                        ['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
-                    }">
+                            modelRef.type,
-                        <a-select placeholder="请选择属性" v-model:value="modelRef.message.properties" show-search :filter-option="filterOption">
+                        )
-                            <a-select-option v-for="i in (metadata?.properties) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
+                    "
+                >
+                    <a-form-item
+                        name="properties"
+                        :rules="{
+                            required: true,
+                            message: '请选择属性',
+                        }"
+                    >
+                        <a-select
+                            placeholder="请选择属性"
+                            v-model:value="modelRef.properties"
+                            show-search
+                            :filter-option="filterOption"
+                        >
+                            <a-select-option
+                                v-for="i in metadata?.properties || []"
+                                :key="i.id"
+                                :value="i.id"
+                                :label="i.name"
+                                >{{ i.name }}</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="modelRef.messageType === 'WRITE_PROPERTY'">
+                <a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
-                    <a-form-item :name="['message', 'value']" :rules="{
+                    <a-form-item
-                        required: true,
+                        name="propertyValue"
-                        message: '请输入值',
+                        :rules="{
-                    }">
+                            required: true,
-                        <a-input />
+                            message: '请输入值',
+                        }"
+                    >
+                        <a-input v-model:value="propertyValue" />
                     </a-form-item>
                 </a-col>
-                <a-col :span="6" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
+                <a-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
-                    <a-form-item :name="['message', 'functionId']" :rules="{
+                    <a-form-item
-                        required: true,
+                        name="function"
-                        message: '请选择功能',
+                        :rules="{
-                    }">
+                            required: true,
-                        <a-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" show-search :filter-option="filterOption" @change="funcChange">
+                            message: '请选择功能',
-                            <a-select-option v-for="i in (metadata?.functions) || []" :key="i.id" :value="i.id" :label="i.name">{{i.name}}</a-select-option>
+                        }"
+                    >
+                        <a-select
+                            placeholder="请选择功能"
+                            v-model:value="modelRef.function"
+                            show-search
+                            :filter-option="filterOption"
+                            @change="funcChange"
+                        >
+                            <a-select-option
+                                v-for="i in metadata?.functions || []"
+                                :key="i.id"
+                                :value="i.id"
+                                :label="i.name"
+                                >{{ i.name }}</a-select-option
+                            >
                         </a-select>
                     </a-form-item>
                 </a-col>
                 <a-col :span="4">
                     <a-button type="primary" @click="saveBtn">发送</a-button>
                 </a-col>
-                <a-col :span="24" v-if="modelRef.messageType === 'INVOKE_FUNCTION' && modelRef.message.functionId">
+                <a-col
-                    <a-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
+                    :span="24"
-                        required: true,
+                    v-if="
-                        message: '请输入参数列表',
+                        modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
-                    }">
+                    "
-                        <EditTable v-model="modelRef.message.inputs"/>
+                >
+                    <a-form-item
+                        name="inputs"
+                        label="参数列表"
+                        :rules="{
+                            required: true,
+                            message: '请输入参数列表',
+                        }"
+                    >
+                        <EditTable v-model="modelRef.inputs" />
                     </a-form-item>
                 </a-col>
             </a-row>
@@ -64,9 +122,14 @@
 
 <script lang="ts" setup>
 import { useInstanceStore } from '@/store/instance';
-import EditTable from './EditTable.vue'
+import EditTable from './EditTable.vue';
+import {
+    executeFunctions,
+    readProperties,
+    settingProperties,
+} from '@/api/device/instance';
 
-const instanceStore = useInstanceStore()
+const instanceStore = useInstanceStore();
 
 const formRef = ref();
 
@@ -80,48 +143,78 @@ type Emits = {
 const emit = defineEmits<Emits>();
 
 const modelRef = reactive({
-    messageType: undefined,
+    type: undefined,
-    message: {
+    properties: undefined,
-        properties: undefined,
+    function: undefined,
-        functionId: undefined,
+    inputs: [],
-        inputs: []
+    propertyValue: undefined,
-    }
+});
-})
 
 const metadata = computed(() => {
-    return JSON.parse(instanceStore.current?.metadata || '{}')
+    return JSON.parse(instanceStore.current?.metadata || '{}');
-})
+});
 
 const funcChange = (val: string) => {
-    if(val){
+    if (val) {
-        const arr = metadata.value?.functions.find((item: any) => item.id === val)?.inputs || []
+        const arr =
+            metadata.value?.functions.find((item: any) => item.id === val)
+                ?.inputs || [];
         const list = arr.map((item: any) => {
             return {
                 id: item.id,
                 name: item.name,
                 value: undefined,
                 valueType: item?.valueType?.type,
-            }
+            };
-        })
+        });
-        modelRef.message.inputs = list
+        modelRef.inputs = list;
     }
-}
+};
 
 const saveBtn = () => {
-    formRef.value.validate()
+    formRef.value.validate().then(async () => {
-    .then(() => {
+        const values = toRaw(modelRef);
-        console.log(toRaw(modelRef))
+        let _inputs: any[] = [];
-    })
+        if (modelRef.inputs.length) {
-}
+            _inputs = modelRef.inputs.filter((i: any) => !i.value);
-
+            if (_inputs.length) {
-defineExpose({ saveBtn })
+                return;
+            }
+        }
 
+        if (values.type === 'INVOKE_FUNCTION') {
+            const list = (modelRef.inputs || []).filter((it: any) => !!it.value);
+            const obj = {};
+            list.map((it: any) => {
+                obj[it.id] = it.value;
+            });
+            await executeFunctions(
+                instanceStore.current.id || '',
+                values?.function || '',
+                {
+                    ...obj,
+                },
+            );
+        } else {
+            if (values.type === 'READ_PROPERTY') {
+                await readProperties(instanceStore.current?.id || '', [
+                    values.properties,
+                ]);
+            } else {
+                await settingProperties(instanceStore.current?.id || '', {
+                    [values.properties || '']: values.propertyValue,
+                });
+            }
+        }
+    });
+};
 
+defineExpose({ saveBtn });
 </script>
 
 <style lang="less" scoped>
 .function {
-  padding: 15px;
+    padding: 15px;
-  background-color: #e7eaec;
+    background-color: #e7eaec;
 }
 </style>

src/views/device/Instance/Detail/Diagnose/Message/index.vue

@@ -24,7 +24,7 @@
         <a-col :span="8">
             <div class="right-log">
                 <TitleComponent data="日志" />
-                <div :style="{ marginTop: 10 }">
+                <div :style="{ marginTop: '10px' }">
                     <template v-if="logList.length">
                         <Log v-for="item in logList" :data="item" :key="item.key" />
                     </template>
@@ -61,6 +61,10 @@ const messageArr = computed(() => {
     return arr.map(i => { return {...message[i], key: i}})
 })
 
+const subscribeLog = () => {
+
+}
+
 
 </script>
 

src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx

@@ -20,7 +20,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -30,7 +30,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {(data?.data?.properties || []).map((item: any) => (
                                         <Descriptions.Item
@@ -45,7 +45,7 @@ const ManualInspection = defineComponent({
                         </div>
                         {data?.data?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.data?.description}</p>
@@ -60,7 +60,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -70,7 +70,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data.configuration?.provider === 'OneNet' ? (
                                         <>
@@ -105,7 +105,7 @@ const ManualInspection = defineComponent({
                         </div>
                         {data?.configuration?.configuration?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.configuration?.configuration?.description}</p>
@@ -120,7 +120,7 @@ const ManualInspection = defineComponent({
                     <>
                         <div style={{ flex: 1 }}>
                             <div class={styles.alert}>
-                                <span style={{ marginRight: 10 }}><AIcon type="InfoCircleOutlined" /></span>
+                                <span style={{ marginRight: '10px' }}><AIcon type="InfoCircleOutlined" /></span>
                                 请检查配置项是否填写正确，若您确定该项无需诊断可
                                 <Button type="link" style="padding: 0"
                                     onClick={() => {
@@ -130,7 +130,7 @@ const ManualInspection = defineComponent({
                                     忽略
                                 </Button>
                             </div>
-                            <div style={{ marginTop: 10 }}>
+                            <div style={{ marginTop: '10px' }}>
                                 <Descriptions title={data?.data?.name} layout="vertical" bordered>
                                     {data?.configuration?.configuration?.shareCluster ? (
                                         <>
@@ -180,9 +180,9 @@ const ManualInspection = defineComponent({
                                 </Descriptions>
                             </div>
                         </div>
-                        {data?.configuration?.configuration.description ? (
+                        {data?.configuration?.description ? (
                             <div
-                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: 10, borderLeft: 'none' }}
+                                style={{ width: '50%', border: '1px solid #f0f0f0', padding: '10px', borderLeft: 'none' }}
                             >
                                 <h4>诊断项说明</h4>
                                 <p>{data?.configuration?.description}</p>

src/views/device/Instance/Detail/Diagnose/Status/index.tsx

@@ -10,6 +10,7 @@ import { _deploy as _deployProduct } from "@/api/device/product"
 import _ from "lodash"
 import DiagnosticAdvice from './DiagnosticAdvice'
 import ManualInspection from './ManualInspection'
+import { deployDevice } from "@/api/initHome"
 
 type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
 
@@ -29,9 +30,9 @@ const Status = defineComponent({
         const status = ref<'loading' | 'finish'>('loading')
 
         const device = ref(instanceStore.current)
-        const gateway = ref<Partial<Record<string, any>>>() // 网关信息
+        const gateway = ref<Partial<Record<string, any>>>({}) // 网关信息
-        const parent = ref<Partial<Record<string, any>>>() // 父设备
+        const parent = ref<Partial<Record<string, any>>>({}) // 父设备
-        const product = ref<Partial<Record<string, any>>>() // 产品
+        const product = ref<Partial<Record<string, any>>>({}) // 产品
 
         const artificialVisible = ref<boolean>(false)
         const artificialData = ref<Partial<Record<string, any>>>()
@@ -1332,7 +1333,7 @@ const Status = defineComponent({
                         unref(device)?.accessProvider &&
                         gatewayList.includes(unref(device).accessProvider as string)
                     ) {
-                        const response = await queryProtocolDetail(unref(device).protocol, 'MQTT');
+                        const response: any = await queryProtocolDetail(unref(device).protocol, 'MQTT');
                         if (response.status === 200) {
                             if ((response.result?.routes || []).length > 0) {
                                 item.push(
@@ -1521,9 +1522,103 @@ const Status = defineComponent({
                 <TitleComponent data="连接详情" />
                 <Space>
                     {
-                        status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary">一键修复</Button>
+                        status.value === 'finish' && unref(device).state?.value !== 'online' && <Button type="primary" onClick={async () => {
+                            let flag: boolean = true;
+                            if (
+                                Object.keys(unref(gateway)).length > 0 &&
+                                unref(gateway)?.state?.value !== 'enabled'
+                            ) {
+                                const resp = await startGateway(unref(device).accessId || '');
+                                if (resp.status === 200) {
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'gateway',
+                                        name: '设备接入网关',
+                                        desc: '诊断设备接入网关状态是否正常，禁用状态将导致连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (unref(product)?.state !== 1) {
+                                const resp = await _deployProduct(unref(device).productId || '');
+                                if (resp.status === 200) {
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'product',
+                                        name: '产品状态',
+                                        desc: '诊断产品状态是否正常，禁用状态将导致设备连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (unref(device)?.state?.value === 'notActive') {
+                                const resp = await deployDevice(unref(device)?.id || '');
+                                if (resp.status === 200) {
+                                    unref(device).state = { value: 'offline', text: '离线' };
+                                    list.value = modifyArrayList(list.value, {
+                                        key: 'device',
+                                        name: '设备状态',
+                                        desc: '诊断设备状态是否正常，禁用状态将导致设备连接失败',
+                                        status: 'success',
+                                        text: '正常',
+                                        info: null,
+                                    });
+                                } else {
+                                    flag = false;
+                                }
+                            }
+                            if (props.providerType === 'network' || props.providerType === 'child-device') {
+                                const address = unref(gateway)?.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;
+                                if (health === -1 && unref(gateway)?.channelId) {
+                                    const res = await startNetwork(unref(gateway)?.channelId);
+                                    if (res.status === 200) {
+                                        list.value = modifyArrayList(list.value, {
+                                            key: 'network',
+                                            name: '网络组件',
+                                            desc: '诊断网络组件配置是否正确，配置错误将导致设备连接失败',
+                                            status: 'success',
+                                            text: '正常',
+                                            info: null,
+                                        });
+                                    } else {
+                                        flag = false;
+                                    }
+                                }
+                            }
+                            if (props.providerType === 'child-device' && unref(device)?.parentId) {
+                                if (unref(parent)?.state?.value === 'notActive') {
+                                    const resp = await deployDevice(unref(device)?.parentId || '');
+                                    if (resp.status === 200) {
+                                        list.value = modifyArrayList(list.value, {
+                                            key: 'parent-device',
+                                            name: '网关父设备',
+                                            desc: '诊断网关父设备状态是否正常，禁用或离线将导致连接失败',
+                                            status: 'success',
+                                            text: '正常',
+                                            info: null,
+                                        });
+                                    } else {
+                                        flag = false;
+                                    }
+                                }
+                            }
+                            if (flag) {
+                                message.success('操作成功！');
+                            }
+                        }}>一键修复</Button>
                     }
-                    <Button>重新诊断</Button>
+                    <Button onClick={() => {
+                        handleSearch()
+                    }}>重新诊断</Button>
                 </Space>
             </div>
             <div class={styles["statusContent"]}>

src/views/device/Instance/Detail/Running/Property/PropertyCard.vue

@@ -1,6 +1,6 @@
 <template>
     <a-card :hoverable="true" class="card-box">
-        <a-spin :spinning="loading">
+        <!-- <a-spin :spinning="loading"> -->
             <div class="card-container">
                 <div class="header">
                     <div class="title">{{ _props.data.name }}</div>
@@ -24,14 +24,14 @@
                     </div>
                 </div>
                 <div class="value">
-                    <ValueRender :data="data" />
+                    <ValueRender :data="data" :value="_props.data" />
                 </div>
                 <div class="bottom">
                     <div style="color: rgba(0, 0, 0, .65); font-size: 12px">更新时间</div>
-                    <div class="time-value">{{data?.time || '--'}}</div>
+                    <div class="time-value">{{_props?.data?.timeString || '--'}}</div>
                 </div>
             </div>
-        </a-spin>
+        <!-- </a-spin> -->
     </a-card>
 </template>
 
@@ -47,13 +47,14 @@ const _props = defineProps({
         default: () => []
     },
 });
-const loading = ref<boolean>(true);
+// const loading = ref<boolean>(true);
 
-watchEffect(() => {
+// watchEffect(() => {
-    if (_props.data.name) {
+//     if (_props.data) {
-        loading.value = false;
+//         console.log(_props.data)
-    }
+//         loading.value = false;
-});
+//     }
+// });
 </script>
 
 <style lang="less" scoped>

src/views/device/Instance/Detail/Running/Property/ValueRender.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="value">
-        {{value}}
+        {{value?.value || '--'}}
     </div>
 </template>
 
@@ -13,8 +13,8 @@ const _data = defineProps({
         default: () => {},
     },
     value: {
-        type: [Object, String, Number],
+        type: Object,
-        default: '--'
+        default: () => {}
     },
     type: {
         type: String,
@@ -40,6 +40,7 @@ imgMap.set('obj', getImage('/running/obj.png'));
 const imgList = ['.jpg', '.png', '.swf', '.tiff'];
 const videoList = ['.m3u8', '.flv', '.mp4', '.rmvb', '.mvb'];
 const fileList = ['.txt', '.doc', '.xls', '.pdf', '.ppt', '.docx', '.xlsx', '.pptx'];
+
 </script>
 
 <style lang="less" scoped>

src/views/device/Instance/Detail/Running/Property/index.vue

@@ -1,74 +1,95 @@
 <template>
-    <JTable
+    <a-spin :spinning="loading">
-        :columns="columns"
+        <JTable
-        :dataSource="dataSource"
+            :columns="columns"
-        :bodyStyle="{padding: '0 0 0 20px'}"
+            :dataSource="dataSource"
-    >
+            :bodyStyle="{ padding: '0 0 0 20px' }"
-        <template #headerTitle>
+        >
-            <a-input-search
+            <template #headerTitle>
-                placeholder="请输入名称"
+                <a-input-search
-                style="width: 300px; margin-bottom: 10px"
+                    placeholder="请输入名称"
-                @search="onSearch"
+                    style="width: 300px; margin-bottom: 10px"
-                v-model:value="value"
+                    @search="onSearch"
-                :allowClear="true"
+                    v-model:value="value"
-            />
+                    :allowClear="true"
-        </template>
+                />
-        <template #card="slotProps">
+            </template>
-            <PropertyCard :data="slotProps" :actions="getActions(slotProps)" />
+            <template #card="slotProps">
-        </template>
+                <PropertyCard
-        <template #value="slotProps">
+                    :data="{ ...slotProps, ...propertyValue[slotProps?.id] }"
-            <ValueRender :data="slotProps" />
+                    :actions="getActions(slotProps)"
-        </template>
+                />
-        <template #time="slotProps">
+            </template>
-            {{slotProps.time || '--'}}
+            <template #value="slotProps">
-        </template>
+                <ValueRender
-        <template #action="slotProps">
+                    :data="slotProps"
-            <a-space :size="16">
+                    :value="propertyValue[slotProps?.id]"
-                <a-tooltip
+                />
-                    v-for="i in getActions(slotProps)"
+            </template>
-                    :key="i.key"
+            <template #time="slotProps">
-                    v-bind="i.tooltip"
+                {{ propertyValue[slotProps?.id]?.timeString || '--' }}
-                >
+            </template>
-                    <a-button
+            <template #action="slotProps">
-                        style="padding: 0"
+                <a-space :size="16">
-                        type="link"
+                    <a-tooltip
-                        :disabled="i.disabled"
+                        v-for="i in getActions(slotProps)"
-                        @click="i.onClick && i.onClick(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
                     >
-                        <AIcon :type="i.icon" />
+                        <a-button
-                    </a-button>
+                            style="padding: 0"
-                </a-tooltip>
+                            type="link"
-            </a-space>
+                            :disabled="i.disabled"
-        </template>
+                            @click="i.onClick && i.onClick(slotProps)"
-        <template #paginationRender>
+                        >
-            <a-pagination
+                            <AIcon :type="i.icon" />
-                size="small"
+                        </a-button>
-                :total="total"
+                    </a-tooltip>
-                :showQuickJumper="false"
+                </a-space>
-                :showSizeChanger="true"
+            </template>
-                :current="pageIndex + 1"
+            <template #paginationRender>
-                :pageSize="pageSize"
+                <a-pagination
-                :pageSizeOptions="['8', '12', '24', '60', '100']"
+                    size="small"
-                :show-total="(num) => `第 ${pageIndex * pageSize + 1} - ${(pageIndex + 1) * pageSize > num ? num : (pageIndex + 1) * pageSize} 条/总共 ${num} 条`"
+                    :total="total"
-                @change="pageChange"
+                    :showQuickJumper="false"
-            />
+                    :showSizeChanger="true"
-        </template>
+                    :current="pageIndex + 1"
-    </JTable>
+                    :pageSize="pageSize"
+                    :pageSizeOptions="['8', '12', '24', '60', '100']"
+                    :show-total="
+                        (num) =>
+                            `第 ${pageIndex * pageSize + 1} - ${
+                                (pageIndex + 1) * pageSize > num
+                                    ? num
+                                    : (pageIndex + 1) * pageSize
+                            } 条/总共 ${num} 条`
+                    "
+                    @change="pageChange"
+                />
+            </template>
+        </JTable>
+    </a-spin>
     <Save v-if="editVisible" @close="editVisible = false" :data="currentInfo" />
-    <Indicators v-if="indicatorVisible" @close="indicatorVisible = false" :data="currentInfo" />
+    <Indicators
+        v-if="indicatorVisible"
+        @close="indicatorVisible = false"
+        :data="currentInfo"
+    />
 </template>
 
 <script lang="ts" setup>
-import _ from "lodash"
+import _, { groupBy, throttle, toArray } from 'lodash-es';
-import { PropertyData } from "../../../typings"
+import { PropertyData } from '../../../typings';
-import PropertyCard from './PropertyCard.vue'
+import PropertyCard from './PropertyCard.vue';
-import ValueRender from './ValueRender.vue'
+import ValueRender from './ValueRender.vue';
-import Save from './Save.vue'
+import Save from './Save.vue';
-import Indicators from './Indicators.vue'
+import Indicators from './Indicators.vue';
-import { getProperty } from '@/api/device/instance'
+import { getProperty } from '@/api/device/instance';
-import { useInstanceStore } from "@/store/instance"
+import { useInstanceStore } from '@/store/instance';
-import { message } from "ant-design-vue"
+import { message } from 'ant-design-vue';
-
+import { getWebSocket } from '@/utils/websocket';
+import { map } from 'rxjs/operators';
+import { queryDashboard } from '@/api/comm';
 const columns = [
     {
         title: '名称',
@@ -79,7 +100,7 @@ const columns = [
         title: '值',
         dataIndex: 'value',
         key: 'value',
-        scopedSlots: true
+        scopedSlots: true,
     },
     {
         title: '更新时间',
@@ -93,29 +114,35 @@ const columns = [
         key: 'action',
         scopedSlots: true,
     },
-]
+];
 
 const _data = defineProps({
     data: {
         type: Array,
-        default: () => []
+        default: () => [],
-    }
+    },
-})
+});
-const value = ref<string>('')
+const value = ref<string>('');
-const dataSource = ref<PropertyData[]>([])
+const dataSource = ref<PropertyData[]>([]);
-const _dataSource = ref<PropertyData[]>([])
+const _dataSource = ref<PropertyData[]>([]);
-const pageIndex = ref<number>(0)
+const pageIndex = ref<number>(0);
-const pageSize = ref<number>(8)
+const pageSize = ref<number>(8);
-const total = ref<number>(0)
+const total = ref<number>(0);
-const editVisible = ref<boolean>(false) // 编辑
+const editVisible = ref<boolean>(false); // 编辑
-const detailVisible = ref<boolean>(false) // 详情
+const detailVisible = ref<boolean>(false); // 详情
-const currentInfo = ref<Record<string, any>>({})
+const currentInfo = ref<Record<string, any>>({});
-const instanceStore = useInstanceStore()
+const instanceStore = useInstanceStore();
-const indicatorVisible = ref<boolean>(false) // 指标
+const indicatorVisible = ref<boolean>(false); // 指标
+const loading = ref<boolean>(false);
+const propertyValue = ref<Record<string, any>>({});
+
+const subRef = ref();
+
+const list = ref<any[]>([]);
 
 const getActions = (data: Partial<Record<string, any>>) => {
-    const arr = []
+    const arr = [];
-    if(data.expands?.type?.includes('write')){
+    if (data.expands?.type?.includes('write')) {
         arr.push({
             key: 'edit',
             tooltip: {
@@ -123,14 +150,23 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'EditOutlined',
             onClick: () => {
-                editVisible.value = true
+                editVisible.value = true;
-                currentInfo.value = data
+                currentInfo.value = data;
             },
-        })
+        });
     }
-    if((data.expands?.metrics || []).length && ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
+    if (
-        data.valueType?.type || '',
+        (data.expands?.metrics || []).length &&
-    )){
+        [
+            'int',
+            'long',
+            'float',
+            'double',
+            'string',
+            'boolean',
+            'date',
+        ].includes(data.valueType?.type || '')
+    ) {
         arr.push({
             key: 'metrics',
             tooltip: {
@@ -138,12 +174,12 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'ClockCircleOutlined',
             onClick: () => {
-                indicatorVisible.value = true
+                indicatorVisible.value = true;
-                currentInfo.value = data
+                currentInfo.value = data;
             },
-        })
+        });
     }
-    if(data.expands?.type?.includes('read')){
+    if (data.expands?.type?.includes('read')) {
         arr.push({
             key: 'read',
             tooltip: {
@@ -151,14 +187,17 @@ const getActions = (data: Partial<Record<string, any>>) => {
             },
             icon: 'SyncOutlined',
             onClick: async () => {
-                if(instanceStore.current.id && data.id){
+                if (instanceStore.current.id && data.id) {
-                    const resp = await getProperty(instanceStore.current.id, data.id)
+                    const resp = await getProperty(
-                    if(resp.status === 200){
+                        instanceStore.current.id,
-                        message.success('操作成功！')
+                        data.id,
+                    );
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
                     }
                 }
             },
-        })
+        });
     }
     arr.push({
         key: 'detail',
@@ -168,56 +207,132 @@ const getActions = (data: Partial<Record<string, any>>) => {
         },
         icon: 'BarsOutlined',
         onClick: () => {
-            detailVisible.value = true
+            detailVisible.value = true;
-            currentInfo.value = data
+            currentInfo.value = data;
         },
-    })
+    });
-    return arr
+    return arr;
-}
-
-const query = (page: number, size: number, value: string) => {
-    pageIndex.value = page || 0
-    pageSize.value = size || 8
-    const _from = pageIndex.value * pageSize.value
-    const _to = (pageIndex.value + 1) * pageSize.value
-    const arr = _.cloneDeep(_dataSource.value)
-    if(value){
-        const li = arr.filter((i: any) => {
-            return i?.name.indexOf(value) !== -1;
-        })
-        dataSource.value = li.slice(_from, _to)
-        total.value = li.length
-    } else {
-        dataSource.value = arr.slice(_from, _to)
-        total.value = arr.length
-    }
-}
-
-const pageChange = (page: number, size: number) => {
-    if(size === pageSize.value) {
-        query(page - 1, size, value.value)
-    } else {
-        query(0, size, value.value)
-    }
-}
-
-watch(() => _data.data,
-    (newVal) => {
-        if(newVal.length) {
-            _dataSource.value = newVal as PropertyData[]
-             query(0, 8, value.value)
-        }
-}, {
-    deep: true,
-    immediate: true
-})
-
-const onSearch = () => {
-    query(0, 8, value.value)
 };
 
+// const valueChange = (arr: Record<string, any>[]) => {
+//     (arr || [])
+//         .sort((a: any, b: any) => a.timestamp - b.timestamp)
+//         .forEach((item: any) => {
+//             const { value } = item;
+//             propertyValue.value[value?.property] = { ...item, ...value };
+//         });
+//     list.value = []
+// };
+
+const subscribeProperty = () => {
+    const id = `instance-info-property-${instanceStore.current.id}-${
+        instanceStore.current.productId
+    }-${dataSource.value.map((i: Record<string, any>) => i.id).join('-')}`;
+    const topic = `/dashboard/device/${instanceStore.current.productId}/properties/realTime`;
+    subRef.value = getWebSocket(id, topic, {
+        deviceId: instanceStore.current.id,
+        properties: dataSource.value.map((i: Record<string, any>) => i.id),
+        history: 1,
+    })
+        ?.pipe(map((res: any) => res.payload))
+        .subscribe((payload) => {
+            list.value = [...list.value, payload];
+            unref(list).sort((a: any, b: any) => a.timestamp - b.timestamp)
+            .forEach((item: any) => {
+                const { value } = item;
+                propertyValue.value[value?.property] = { ...item, ...value };
+            });
+            // list.value = [...list.value, payload];
+            // throttle(valueChange(list.value), 500);
+        });
+};
+
+const getDashboard = async () => {
+    const param = [
+        {
+            dashboard: 'device',
+            object: instanceStore.current.productId,
+            measurement: 'properties',
+            dimension: 'history',
+            params: {
+                deviceId: instanceStore.current.id,
+                history: 1,
+                properties: dataSource.value.map((i: any) => i.id),
+            },
+        },
+    ];
+    loading.value = true;
+    const resp: Record<string, any> = await queryDashboard(param);
+    if (resp.status === 200) {
+        const t1 = (resp.result || []).map((item: any) => {
+            return {
+                timeString: item.data?.timeString,
+                timestamp: item.data?.timestamp,
+                ...item?.data?.value,
+            };
+        });
+        const obj = {};
+        toArray(groupBy(t1, 'property'))
+            .map((item) => {
+                return {
+                    list: item.sort((a, b) => b.timestamp - a.timestamp),
+                    property: item[0].property,
+                };
+            })
+            .forEach((i) => {
+                obj[i.property] = i.list[0];
+            });
+        propertyValue.value = { ...unref(propertyValue), ...obj };
+    }
+    subscribeProperty();
+    loading.value = false;
+};
+
+const query = (page: number, size: number, value: string) => {
+    pageIndex.value = page || 0;
+    pageSize.value = size || 8;
+    const _from = pageIndex.value * pageSize.value;
+    const _to = (pageIndex.value + 1) * pageSize.value;
+    const arr = _.cloneDeep(_dataSource.value);
+    if (unref(value)) {
+        const li = arr.filter((i: any) => {
+            return i?.name.indexOf(unref(value)) !== -1;
+        });
+        dataSource.value = li.slice(_from, _to);
+        total.value = li.length;
+    } else {
+        dataSource.value = arr.slice(_from, _to);
+        total.value = arr.length;
+    }
+    getDashboard();
+};
+
+const pageChange = (page: number, size: number) => {
+    if (size === pageSize.value) {
+        query(page - 1, size, value.value);
+    } else {
+        query(0, size, value.value);
+    }
+};
+
+watch(
+    () => _data.data,
+    (newVal) => {
+        if (newVal.length) {
+            _dataSource.value = newVal as PropertyData[];
+            query(0, 8, value.value);
+        }
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+
+const onSearch = () => {
+    query(0, 8, value.value);
+};
 </script>
 
 <style scoped lang="less">
-    
 </style>

vite.config.ts

@@ -83,7 +83,9 @@ export default defineConfig(({ mode}) => {
                   // target: 'http://192.168.32.244:8881',
                 //   target: 'http://47.112.135.104:5096', // opcua
                 //   target: 'http://120.77.179.54:8844', // 120测试
-                  target: 'http://47.108.63.174:8845', // 测试
+                //   target: 'http://47.108.63.174:8845', // 测试
+                  target: 'http://120.77.179.54:8844',
+                  ws: 'ws://120.77.179.54:8844',
                   changeOrigin: true,
                   rewrite: (path) => path.replace(/^\/api/, '')
               }

yarn.lock

@@ -784,11 +784,16 @@
   dependencies:
     moment "*"
 
-"@types/node@*", "@types/node@^18.11.17":
+"@types/node@*":
   version "18.11.18"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
 
+"@types/node@^18.14.0":
+  version "18.14.0"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-18.14.0.tgz#94c47b9217bbac49d4a67a967fdcdeed89ebb7d0"
+  integrity sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"