Merge branch 'dev' into dev-hub

2023-02-21 09:38:32 +08:00 · 2023-02-21 09:38:32 +08:00 · 9fee5864c5
parent 5f56b3d4db 97e40c509a
commit 9fee5864c5
32 changed files with 1320 additions and 268 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -19,5 +19,8 @@ module.exports = {

    rules: {
        // override/add rules settings here, such as:
+    },
+    globals: {
+        NodeJS: 'readonly'
    }
 };
--- a/package.json
+++ b/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",
--- a/src/api/comm.ts
+++ b/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)
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@ -314,3 +314,37 @@ 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)
+
+/**
+ * 设备功能-执行
+ * @param id 设备id
+ * @param action 
+ * @param data 
+ * @returns 
+ */
+ export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)
--- a/src/api/iot-card/cardManagement.ts
+++ b/src/api/iot-card/cardManagement.ts
@ -97,7 +97,7 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
 * @param format 类型 xlsx、csv
 * @param params
 */
-export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
+export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, { responseType: 'blob' });

 /**
 * 验证iccid
--- a/src/api/rule-engine/config.ts
+++ b/src/api/rule-engine/config.ts
@ -0,0 +1,5 @@
+import server from '@/utils/request';
+/**
+ * 查询等级
+ */
+export const queryLevel = () => server.get('/alarm/config/default/level');
--- a/src/components/MonacoEditor/index.vue
+++ b/src/components/MonacoEditor/index.vue
@ -59,6 +59,20 @@ onMounted(() => {
        emit('update:modelValue', value);
    });
 });
+
+/**
+ * 代码格式化
+ */
+const editorFormat = () => {
+    if (!instance) return;
+    instance.getAction('editor.action.formatDocument')?.run();
+};
+
+watchEffect(() => {
+    setTimeout(() => {
+        editorFormat();
+    }, 300);
+});
 </script>

 <style lang="less" scoped>
--- a/src/store/product.ts
+++ b/src/store/product.ts
@ -1,6 +1,7 @@
 import { ProductItem } from "@/views/device/Product/typings";
 import { defineStore } from "pinia";
-import { detail} from '@/api/device/product'
+import { detail , getDeviceNumber} from '@/api/device/product'
+import encodeQuery from "@/utils/encodeQuery";

 export const useProductStore = defineStore({
  id: 'product',
@ -16,9 +17,13 @@ export const useProductStore = defineStore({
    },
    async refresh(id: string) {
      const resp = await detail(id)
+      const res = await getDeviceNumber(encodeQuery({ terms: { productId: id } }))
      if(resp.status === 200){
        this.current = resp.result
        this.detail = resp.result
+        if(res.status === 200){
+          this.current.count = res.result
+        }
      }
    },
    setTabActiveKey(key: string) {
--- a/src/utils/websocket.ts
+++ b/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' }))
+    }
+}
--- a/src/views/device/Instance/Detail/Diagnose/Message/Function/EditTable.vue
+++ b/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 || {
-            messageType: undefined,
-            message: {
-                properties: undefined,
-                functionId: undefined,
-                inputs: []
-            }
-        }
+        return _props.modelValue || []
    },
    set: (val: any) => {
        _emit('update:modelValue', val);
--- a/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
+++ b/src/views/device/Instance/Detail/Diagnose/Message/Function/index.vue
@ -1,60 +1,118 @@
 <template>
    <div class="function">
-        <a-form 
-            :layout="'vertical'"
-            ref="formRef"
-            :model="modelRef"
-        >
+        <a-form :layout="'vertical'" ref="formRef" :model="modelRef">
            <a-row :gutter="24">
                <a-col :span="6">
-                    <a-form-item name="messageType" :rules="{
-                        required: true,
-                        message: '请选择',
-                    }">
-                        <a-select placeholder="请选择" v-model:value="modelRef.messageType" 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-form-item
+                        name="type"
+                        :rules="{
+                            required: true,
+                            message: '请选择',
+                        }"
+                    >
+                        <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-form-item :name="['message', 'properties']" :rules="{
-                        required: true,
-                        message: '请选择属性',
-                    }">
-                        <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-col
+                    :span="6"
+                    v-if="
+                        ['READ_PROPERTY', 'WRITE_PROPERTY'].includes(
+                            modelRef.type,
+                        )
+                    "
+                >
+                    <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-form-item :name="['message', 'value']" :rules="{
-                        required: true,
-                        message: '请输入值',
-                    }">
-                        <a-input />
+                <a-col :span="6" v-if="modelRef.type === 'WRITE_PROPERTY'">
+                    <a-form-item
+                        name="propertyValue"
+                        :rules="{
+                            required: true,
+                            message: '请输入值',
+                        }"
+                    >
+                        <a-input v-model:value="propertyValue" />
                    </a-form-item>
                </a-col>
-                <a-col :span="6" v-if="modelRef.messageType === 'INVOKE_FUNCTION'">
-                    <a-form-item :name="['message', 'functionId']" :rules="{
-                        required: true,
-                        message: '请选择功能',
-                    }">
-                        <a-select placeholder="请选择功能" v-model:value="modelRef.message.functionId" 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-col :span="6" v-if="modelRef.type === 'INVOKE_FUNCTION'">
+                    <a-form-item
+                        name="function"
+                        :rules="{
+                            required: true,
+                            message: '请选择功能',
+                        }"
+                    >
+                        <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-form-item :name="['message', 'inputs']" label="参数列表" :rules="{
-                        required: true,
-                        message: '请输入参数列表',
-                    }">
-                        <EditTable v-model="modelRef.message.inputs"/>
+                <a-col
+                    :span="24"
+                    v-if="
+                        modelRef.type === 'INVOKE_FUNCTION' && modelRef.function && modelRef.inputs.length
+                    "
+                >
+                    <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,
-    message: {
-        properties: undefined,
-        functionId: undefined,
-        inputs: []
-    }
-})
+    type: undefined,
+    properties: undefined,
+    function: undefined,
+    inputs: [],
+    propertyValue: undefined,
+});

 const metadata = computed(() => {
-    return JSON.parse(instanceStore.current?.metadata || '{}')
-})
+    return JSON.parse(instanceStore.current?.metadata || '{}');
+});

 const funcChange = (val: string) => {
-    if(val){
-        const arr = metadata.value?.functions.find((item: any) => item.id === val)?.inputs || []
+    if (val) {
+        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()
-    .then(() => {
-        console.log(toRaw(modelRef))
-    })
-}
-
-defineExpose({ saveBtn })
+    formRef.value.validate().then(async () => {
+        const values = toRaw(modelRef);
+        let _inputs: any[] = [];
+        if (modelRef.inputs.length) {
+            _inputs = modelRef.inputs.filter((i: any) => !i.value);
+            if (_inputs.length) {
+                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;
-  background-color: #e7eaec;
+    padding: 15px;
+    background-color: #e7eaec;
 }
 </style>
--- a/src/views/device/Instance/Detail/Diagnose/Message/index.vue
+++ b/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>

--- a/src/views/device/Instance/Detail/Diagnose/Status/ManualInspection.tsx
+++ b/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>
--- a/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
+++ b/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 parent = ref<Partial<Record<string, any>>>() // 父设备
-        const product = ref<Partial<Record<string, any>>>() // 产品
+        const gateway = ref<Partial<Record<string, any>>>({}) // 网关信息
+        const parent = 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"]}>
--- a/src/views/device/Instance/Detail/Function/components/Advance.vue
+++ b/src/views/device/Instance/Detail/Function/components/Advance.vue
@ -0,0 +1,149 @@
+<template>
+    <div class="wrapper">
+        <a-tabs v-model="activeKey" tab-position="left">
+            <a-tab-pane
+                v-for="func in newFunctions"
+                :key="func.id"
+                :tab="func.name"
+            >
+                <a-row :gutter="30">
+                    <a-col :span="15">
+                        <MonacoEditor
+                            :ref="`monacoEditor${func.id}`"
+                            v-model="func.json"
+                            theme="vs-dark"
+                            style="height: 400px"
+                        />
+                        <div class="editor-btn">
+                            <a-space>
+                                <a-button
+                                    type="primary"
+                                    @click="handleExecute(func)"
+                                >
+                                    执行
+                                </a-button>
+                                <a-button
+                                    type="default"
+                                    @click="handleClear(func)"
+                                >
+                                    清空
+                                </a-button>
+                            </a-space>
+                        </div>
+                    </a-col>
+                    <a-col :span="9">
+                        <h6>执行结果：</h6>
+                        <span class="execute-result">
+                            {{ func.executeResult }}
+                        </span>
+                    </a-col>
+                </a-row>
+            </a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ComponentInternalInstance } from 'vue';
+import { message } from 'ant-design-vue';
+import { useInstanceStore } from '@/store/instance';
+import { execute } from '@/api/device/instance';
+
+const instanceStore = useInstanceStore();
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const activeKey = ref('');
+// 物模型数据
+const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
+
+// 设备功能数据处理
+const newFunctions = computed(() => {
+    const result: any = [];
+    metadata.value.functions?.forEach((func: any) => {
+        const obj = {};
+        const jsonData = func.inputs || func.properties;
+        for (const jsonItem of jsonData) {
+            const type = jsonItem.valueType ? jsonItem.valueType.type : '-';
+            obj[jsonItem.id] = setInitValue(type, jsonItem['json']);
+        }
+
+        result.push({
+            ...func,
+            json: JSON.stringify(obj),
+            executeResult: '',
+        });
+    });
+    // console.log('newFunctions: ', result);
+    return result;
+});
+
+/**
+ * 根据数据类型, 赋初始值
+ * @param type
+ * @param json
+ */
+const setInitValue = (type: string, json?: any) => {
+    let initVal: any = '';
+    if (['int', 'long', 'float', 'double'].includes(type)) {
+        initVal = 0;
+    } else if (
+        ['string', 'date', 'enum', 'password', 'geoPoint'].includes(type)
+    ) {
+        initVal = '';
+    } else if (['boolean'].includes(type)) {
+        initVal = false;
+    } else if (['array'].includes(type)) {
+        initVal = [];
+    } else if (['object'].includes(type)) {
+        initVal = {};
+        if (json) {
+            const childObj = json['properties'][0];
+            initVal[childObj.id] = setInitValue(childObj.valueType.type);
+        }
+    }
+    return initVal;
+};
+
+/**
+ * 执行
+ */
+const handleExecute = async (func: any) => {
+    const { success, result } = await execute(
+        route.params.id as string,
+        func.id,
+        JSON.parse(func.json),
+    );
+    if (!success) return;
+    message.success('操作成功');
+    func.executeResult = result instanceof Array ? result[0] : result;
+    proxy?.$forceUpdate();
+};
+/**
+ * 清空
+ */
+const handleClear = (func: any) => {
+    func.json = '';
+    proxy?.$forceUpdate();
+};
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+    .editor-btn {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 10px;
+    }
+    .execute-result {
+        display: inline-block;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        padding: 4px 11px;
+        min-height: 140px;
+        width: 100%;
+        max-height: 450px;
+        overflow: auto;
+    }
+}
+</style>
--- a/src/views/device/Instance/Detail/Function/components/Simple.vue
+++ b/src/views/device/Instance/Detail/Function/components/Simple.vue
@ -0,0 +1,233 @@
+<template>
+    <div class="wrapper">
+        <div class="tips">
+            <a-space>
+                <AIcon type="QuestionCircleOutlined" />
+                <span>精简模式下参数只支持输入框的方式录入</span>
+            </a-space>
+        </div>
+        <a-tabs v-model="activeKey" tab-position="left">
+            <a-tab-pane
+                v-for="func in newFunctions"
+                :key="func.id"
+                :tab="func.name"
+            >
+                <a-row :gutter="30">
+                    <a-col :span="15">
+                        <a-table
+                            :columns="columns"
+                            :data-source="func.table"
+                            :pagination="false"
+                            rowKey="id"
+                        >
+                            <template #bodyCell="{ column, text, record }">
+                                <template v-if="column.dataIndex === 'type'">
+                                    <span>{{ record.type }}</span>
+                                    <a-tooltip v-if="record.type === 'object'">
+                                        <template slot="title">
+                                            请按照json格式输入
+                                        </template>
+
+                                        <AIcon
+                                            type="QuestionCircleOutlined"
+                                            :style="{
+                                                marginLeft: '5px',
+                                                cursor: 'help',
+                                            }"
+                                        />
+                                    </a-tooltip>
+                                </template>
+                                <template v-if="column.dataIndex === 'value'">
+                                    <ValueItem
+                                        :ref="`valueItemRef${record.id}`"
+                                        v-model:modelValue="record.value"
+                                        :itemType="record.type"
+                                        :options="
+                                            record.type === 'enum'
+                                                ? (
+                                                      record?.options
+                                                          ?.elements || []
+                                                  ).map((item:any) => ({
+                                                          label: item.text,
+                                                          value: item.value,
+                                                      }))
+                                                : record.type === 'boolean'
+                                                ? [
+                                                      {
+                                                          label: '是',
+                                                          value: true,
+                                                      },
+                                                      {
+                                                          label: '否',
+                                                          value: false,
+                                                      },
+                                                  ]
+                                                : undefined
+                                        "
+                                    />
+                                </template>
+                            </template>
+                        </a-table>
+                        <div class="editor-btn">
+                            <a-space>
+                                <a-button
+                                    type="primary"
+                                    @click="handleExecute(func)"
+                                >
+                                    执行
+                                </a-button>
+                                <a-button
+                                    type="default"
+                                    @click="handleClear(func)"
+                                >
+                                    清空
+                                </a-button>
+                            </a-space>
+                        </div>
+                    </a-col>
+                    <a-col :span="9">
+                        <h6>执行结果：</h6>
+                        <span class="execute-result">
+                            {{ func.executeResult }}
+                        </span>
+                    </a-col>
+                </a-row>
+            </a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ComponentInternalInstance } from 'vue';
+import { message } from 'ant-design-vue';
+import { useInstanceStore } from '@/store/instance';
+import { execute } from '@/api/device/instance';
+
+const instanceStore = useInstanceStore();
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const activeKey = ref('');
+// 物模型数据
+const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
+const columns = ref([
+    {
+        title: '参数名称',
+        dataIndex: 'name',
+        width: 150,
+        ellipsis: true,
+    },
+    {
+        title: '输入类型',
+        dataIndex: 'type',
+        width: 150,
+    },
+    {
+        title: '值',
+        dataIndex: 'value',
+    },
+]);
+
+// 设备功能数据处理
+const newFunctions = computed(() => {
+    const result: any = [];
+    metadata.value.functions?.forEach((func: any) => {
+        const array = [];
+        const tableData = func.inputs || func.properties;
+        for (const tableItem of tableData) {
+            const type = tableItem.valueType ? tableItem.valueType.type : '-';
+            if (type === 'boolean') {
+                tableItem.valueType.elements = [
+                    {
+                        text: tableItem.valueType.trueText,
+                        value: String(tableItem.valueType.trueValue),
+                    },
+                    {
+                        text: tableItem.valueType.falseText,
+                        value: String(tableItem.valueType.falseValue),
+                    },
+                ];
+            }
+            array.push({
+                id: tableItem.id,
+                name: tableItem.name,
+                type: type,
+                format: tableItem.valueType
+                    ? tableItem.valueType.format
+                    : undefined,
+                options: tableItem.valueType
+                    ? tableItem.valueType.elements
+                    : undefined,
+                json:
+                    type === 'object'
+                        ? tableItem['json']?.['properties'][0]
+                        : undefined,
+                value: undefined,
+            });
+        }
+
+        result.push({
+            ...func,
+            table: array,
+            executeResult: '',
+        });
+    });
+    // console.log('newFunctions: ', result)
+    return result;
+});
+
+/**
+ * 执行
+ */
+const handleExecute = async (func: any) => {
+    const obj = {};
+    func.table.forEach((item: any) => {
+        if (item.type === 'object') {
+            obj[item.id] = JSON.parse(item.value);
+        } else {
+            obj[item.id] = item.value;
+        }
+    });
+    const { success, result } = await execute(
+        route.params.id as string,
+        func.id,
+        obj,
+    );
+    if (!success) return;
+    message.success('操作成功');
+    func.executeResult = result instanceof Array ? result[0] : result;
+    proxy?.$forceUpdate();
+};
+/**
+ * 清空
+ */
+const handleClear = (func: any) => {
+    func.table.forEach((item: any) => {
+        item.value = undefined;
+        proxy.$refs[`valueItemRef${item.id}`][0].myValue = undefined;
+    });
+};
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+    .tips {
+        margin-bottom: 10px;
+    }
+    .editor-btn {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 10px;
+    }
+    .execute-result {
+        display: inline-block;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        padding: 4px 11px;
+        min-height: 140px;
+        width: 100%;
+        max-height: 450px;
+        overflow: auto;
+    }
+}
+</style>
--- a/src/views/device/Instance/Detail/Function/index.vue
+++ b/src/views/device/Instance/Detail/Function/index.vue
@ -0,0 +1,39 @@
+<template>
+    <a-card>
+        <a-empty
+            v-if="!metadata || (metadata && !metadata.functions)"
+            style="margin-top: 100px"
+        >
+            <template #description>
+                暂无数据，请配置
+                <a @click="emits('onJump', 'Metadata')">物模型</a>
+            </template>
+        </a-empty>
+        <template v-else>
+            <a-tabs v-model:activeKey="activeKey">
+                <a-tab-pane key="Simple" tab="精简模式" />
+                <a-tab-pane key="Advance" tab="高级模式" />
+            </a-tabs>
+            <component :is="tabs[activeKey]" />
+        </template>
+    </a-card>
+</template>
+
+<script setup lang="ts">
+import { useInstanceStore } from '@/store/instance';
+import Simple from './components/Simple.vue';
+import Advance from './components/Advance.vue';
+
+const instanceStore = useInstanceStore();
+const emits = defineEmits(['onJump']);
+
+const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
+
+const activeKey = ref('Simple');
+const tabs = {
+    Simple,
+    Advance,
+};
+</script>
+
+<style lang="less" scoped></style>
--- a/src/views/device/Instance/Detail/Running/Property/PropertyCard.vue
+++ b/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(() => {
-    if (_props.data.name) {
-        loading.value = false;
-    }
-});
+// watchEffect(() => {
+//     if (_props.data) {
+//         console.log(_props.data)
+//         loading.value = false;
+//     }
+// });
 </script>

 <style lang="less" scoped>
--- a/src/views/device/Instance/Detail/Running/Property/ValueRender.vue
+++ b/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],
-        default: '--'
+        type: Object,
+        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>
--- a/src/views/device/Instance/Detail/Running/Property/index.vue
+++ b/src/views/device/Instance/Detail/Running/Property/index.vue
@ -1,74 +1,95 @@
 <template>
-    <JTable
-        :columns="columns"
-        :dataSource="dataSource"
-        :bodyStyle="{padding: '0 0 0 20px'}"
-    >
-        <template #headerTitle>
-            <a-input-search
-                placeholder="请输入名称"
-                style="width: 300px; margin-bottom: 10px"
-                @search="onSearch"
-                v-model:value="value"
-                :allowClear="true"
-            />
-        </template>
-        <template #card="slotProps">
-            <PropertyCard :data="slotProps" :actions="getActions(slotProps)" />
-        </template>
-        <template #value="slotProps">
-            <ValueRender :data="slotProps" />
-        </template>
-        <template #time="slotProps">
-            {{slotProps.time || '--'}}
-        </template>
-        <template #action="slotProps">
-            <a-space :size="16">
-                <a-tooltip
-                    v-for="i in getActions(slotProps)"
-                    :key="i.key"
-                    v-bind="i.tooltip"
-                >
-                    <a-button
-                        style="padding: 0"
-                        type="link"
-                        :disabled="i.disabled"
-                        @click="i.onClick && i.onClick(slotProps)"
+    <a-spin :spinning="loading">
+        <JTable
+            :columns="columns"
+            :dataSource="dataSource"
+            :bodyStyle="{ padding: '0 0 0 20px' }"
+        >
+            <template #headerTitle>
+                <a-input-search
+                    placeholder="请输入名称"
+                    style="width: 300px; margin-bottom: 10px"
+                    @search="onSearch"
+                    v-model:value="value"
+                    :allowClear="true"
+                />
+            </template>
+            <template #card="slotProps">
+                <PropertyCard
+                    :data="{ ...slotProps, ...propertyValue[slotProps?.id] }"
+                    :actions="getActions(slotProps)"
+                />
+            </template>
+            <template #value="slotProps">
+                <ValueRender
+                    :data="slotProps"
+                    :value="propertyValue[slotProps?.id]"
+                />
+            </template>
+            <template #time="slotProps">
+                {{ propertyValue[slotProps?.id]?.timeString || '--' }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
                    >
-                        <AIcon :type="i.icon" />
-                    </a-button>
-                </a-tooltip>
-            </a-space>
-        </template>
-        <template #paginationRender>
-            <a-pagination
-                size="small"
-                :total="total"
-                :showQuickJumper="false"
-                :showSizeChanger="true"
-                :current="pageIndex + 1"
-                :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-button
+                            style="padding: 0"
+                            type="link"
+                            :disabled="i.disabled"
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <AIcon :type="i.icon" />
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+            <template #paginationRender>
+                <a-pagination
+                    size="small"
+                    :total="total"
+                    :showQuickJumper="false"
+                    :showSizeChanger="true"
+                    :current="pageIndex + 1"
+                    :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 { PropertyData } from "../../../typings"
-import PropertyCard from './PropertyCard.vue'
-import ValueRender from './ValueRender.vue'
-import Save from './Save.vue'
-import Indicators from './Indicators.vue'
-import { getProperty } from '@/api/device/instance'
-import { useInstanceStore } from "@/store/instance"
-import { message } from "ant-design-vue"
-
+import _, { groupBy, throttle, toArray } from 'lodash-es';
+import { PropertyData } from '../../../typings';
+import PropertyCard from './PropertyCard.vue';
+import ValueRender from './ValueRender.vue';
+import Save from './Save.vue';
+import Indicators from './Indicators.vue';
+import { getProperty } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+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: () => []
-    }
-})
-const value = ref<string>('')
-const dataSource = ref<PropertyData[]>([])
-const _dataSource = ref<PropertyData[]>([])
-const pageIndex = ref<number>(0)
-const pageSize = ref<number>(8)
-const total = ref<number>(0)
-const editVisible = ref<boolean>(false) // 编辑
-const detailVisible = ref<boolean>(false) // 详情
-const currentInfo = ref<Record<string, any>>({})
-const instanceStore = useInstanceStore()
-const indicatorVisible = ref<boolean>(false) // 指标
+        default: () => [],
+    },
+});
+const value = ref<string>('');
+const dataSource = ref<PropertyData[]>([]);
+const _dataSource = ref<PropertyData[]>([]);
+const pageIndex = ref<number>(0);
+const pageSize = ref<number>(8);
+const total = ref<number>(0);
+const editVisible = ref<boolean>(false); // 编辑
+const detailVisible = ref<boolean>(false); // 详情
+const currentInfo = ref<Record<string, any>>({});
+const instanceStore = useInstanceStore();
+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 = []
-    if(data.expands?.type?.includes('write')){
+    const arr = [];
+    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
-                currentInfo.value = data
+                editVisible.value = true;
+                currentInfo.value = data;
            },
-        })
+        });
    }
-    if((data.expands?.metrics || []).length && ['int', 'long', 'float', 'double', 'string', 'boolean', 'date'].includes(
-        data.valueType?.type || '',
-    )){
+    if (
+        (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
-                currentInfo.value = data
+                indicatorVisible.value = true;
+                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){
-                    const resp = await getProperty(instanceStore.current.id, data.id)
-                    if(resp.status === 200){
-                        message.success('操作成功！')
+                if (instanceStore.current.id && data.id) {
+                    const resp = await getProperty(
+                        instanceStore.current.id,
+                        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
-            currentInfo.value = data
+            detailVisible.value = true;
+            currentInfo.value = data;
        },
-    })
-    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)
+    });
+    return arr;
 };

+// 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>
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@ -34,7 +34,7 @@
        <template #extra>
            <img @click="handleRefresh" :src="getImage('/device/button.png')" style="margin-right: 20px; cursor: pointer;" />
        </template>
-        <component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" />
+        <component :is="tabs[instanceStore.tabActiveKey]" v-bind="{ type: 'device' }" @onJump="onTabChange" />
    </page-container>
 </template>

@ -45,6 +45,7 @@ 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 Function from './Function/index.vue'
 import { _deploy, _disconnect } from '@/api/device/instance'
 import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
@ -70,6 +71,10 @@ const list = [
        key: 'Metadata',
        tab: '物模型'
    },
+    {
+        key: 'Function',
+        tab: '设备功能'
+    },
    {
        key: 'ChildDevice',
        tab: '子设备'
@ -85,7 +90,8 @@ const tabs = {
  Metadata,
  Running,
  ChildDevice,
-  Diagnose
+  Diagnose,
+  Function
 }

 watch(
--- a/src/views/device/Product/Detail/BasicInfo/indev.vue
+++ b/src/views/device/Product/Detail/BasicInfo/indev.vue
@ -29,10 +29,10 @@
                }}</a-button>
            </a-descriptions-item>
            <a-descriptions-item label="创建时间">{{
-                productStore.current.createTime
+                moment(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss')
            }}</a-descriptions-item>
            <a-descriptions-item label="更新时间">{{
-                productStore.current.modifyTime
+                moment(productStore.current.modifyTime).format('YYYY-MM-DD HH:mm:ss')
            }}</a-descriptions-item>

            <a-descriptions-item label="说明" :span="3">
@ -47,6 +47,7 @@
 <script lang="ts" setup>
 import { useProductStore } from '@/store/product';
 import Save from '../../Save/index.vue';
+import moment from 'moment';
 import {
    EditOutlined,
    DeleteOutlined,
--- a/src/views/device/Product/Detail/DeviceAccess/index.vue
+++ b/src/views/device/Product/Detail/DeviceAccess/index.vue
@ -60,7 +60,7 @@
                        <!-- 显示md文件内容 -->
                        <div
                            v-if="config?.document"
-                            v-html="config?.document"
+                            v-html="markdownToHtml"
                        ></div>
                    </div>
                    <div class="item-style">
@ -385,10 +385,11 @@ const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
 const visible = ref<boolean>(false);
 const listData = ref<string[]>([]);
 const access = ref({});
-const config = ref({});
+const config = ref<any>({});
 const metadata = ref<ConfigMetadata[]>([]);
 const dataSource = ref<string[]>([]);
 const storageList = ref<any[]>([]);
+const markdownToHtml = shallowRef('');
 const current = ref({
    id: productStore.current?.accessId,
    name: productStore.current?.accessName,
@ -805,6 +806,9 @@ const getConfigDetail = async (
        (resp) => {
            if (resp.status === 200) {
                config.value = resp.result;
+                if (config.value?.document) {
+                    markdownToHtml.value = marked(config.value.document);
+                }
            }
        },
    );
--- a/src/views/device/Product/Detail/index.vue
+++ b/src/views/device/Product/Detail/index.vue
@ -2,7 +2,7 @@
    <page-container
        :tabList="list"
        @back="onBack"
-        :tabActiveKey="productStore.active"
+        :tabActiveKey="productStore.tabActiveKey"
        @tabChange="onTabChange"
    >
        <template #title>
@ -129,6 +129,7 @@ watch(
    () => route.params.id,
    (newId) => {
        if (newId) {
+            console.log(newId);
            productStore.tabActiveKey = 'Info';
            productStore.refresh(newId as string);
        }
--- a/src/views/iot-card/CardManagement/Export.vue
+++ b/src/views/iot-card/CardManagement/Export.vue
@ -45,8 +45,9 @@ const handleOk = () => {
    console.log(props.data);
    _export(type.value, props.data).then((res: any) => {
        if (res) {
-            const blob = new Blob([res.data], { type: type.value });
+            const blob = new Blob([res], { type: type.value });
            const url = URL.createObjectURL(blob);
+            console.log(url);
            downloadFileByUrl(
                url,
                `物联卡管理-${moment(new Date()).format(
--- a/src/views/media/Device/Save/index.vue
+++ b/src/views/media/Device/Save/index.vue
@ -355,8 +355,6 @@ const getDetail = async () => {
    // console.log('res: ', res);
    formData.value = res.result;
    formData.value.channel = res.result.provider;
-    console.log('formData.value: ', formData.value);
-    // validate();
 };

 onMounted(() => {
@ -368,8 +366,8 @@ onMounted(() => {
 */
 const btnLoading = ref<boolean>(false);
 const handleSubmit = () => {
-    console.log('formData.value: ', formData.value);
-    validate()
+    const form = useForm(formData.value, formRules.value);
+    form.validate()
        .then(async () => {
            btnLoading.value = true;
            let res;
@ -378,7 +376,6 @@ const handleSubmit = () => {
            } else {
                res = await DeviceApi.update(formData.value);
            }
-            // console.log('res: ', res);
            if (res?.success) {
                message.success('保存成功');
                router.back();
--- a/src/views/notice/Config/index.vue
+++ b/src/views/notice/Config/index.vue
@ -13,6 +13,7 @@
                sorts: [{ name: 'createTime', order: 'desc' }],
            }"
            :params="params"
+            :gridColumn="3"
        >
            <template #headerTitle>
                <a-space>
--- a/src/views/notice/Template/index.vue
+++ b/src/views/notice/Template/index.vue
@ -13,6 +13,7 @@
                sorts: [{ name: 'createTime', order: 'desc' }],
            }"
            :params="params"
+            :gridColumn="3"
        >
            <template #headerTitle>
                <a-space>
--- a/src/views/rule-engine/Alarm/Config/index.vue
+++ b/src/views/rule-engine/Alarm/Config/index.vue
@ -0,0 +1,91 @@
+<template>
+    <page-container :tabList="list" @tabChange="onTabChange">
+        <div v-if="true">
+            <a-row :gutter="24">
+                <a-col :span="14">
+                    <div class="alarm-level">
+                        <a-card :headStyle="{ borderBottom: 'none' }" :bodyStyle="{paddingTop:0}">
+                            <template #title>
+                                <div class="alarmLevelTitle">告警级别配置</div>
+                            </template>
+                            <div
+                                v-for="(item, i) in levels"
+                                :key="i"
+                                class="alarmInputItem"
+                            >
+                                <div>
+                                    <img
+                                        :src="
+                                            getImage(`/alarm/alarm${i + 1}.png`)
+                                        "
+                                        alt=""
+                                    />
+                                    <span>{{ `级别${i + 1}` }}</span>
+                                </div>
+                                <div>
+                                    <a-input type="text" v-model:value="item.title" :maxlength=64></a-input>
+                                </div>
+                            </div>
+                        </a-card>
+                    </div>
+                </a-col>
+                <a-col :span="10">123</a-col>
+            </a-row>
+        </div>
+    </page-container>
+</template>
+
+<script lang="ts" setup>
+import { getImage } from '@/utils/comm';
+import { queryLevel } from '@/api/rule-engine/config';
+const list = ref([
+    {
+        key: 'config',
+        tab: '告警级别',
+    },
+    {
+        key: 'io',
+        tab: '数据流转',
+    },
+]);
+interface levelsObj {
+    level: number;
+    title?: string;
+}
+let levels = ref<levelsObj[]>([]);
+const getAlarmLevel = () => {
+    queryLevel().then((res: any) => {
+        if (res.status == 200) {
+            levels.value = res.result.levels;
+        }
+    });
+};
+getAlarmLevel();
+const onTabChange = (e: string) => {};
+</script>
+<style lang="less" scoped>
+.alarm-level {
+    padding: 24px;
+}
+.alarmLevelTitle {
+    position: relative;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.8);
+    font-weight: 600;
+    line-height: 1;
+    margin-bottom: 16px;
+}
+.alarmLevelTitle::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-color: #1d39c4;
+    border-radius: 0 3px 3px 0;
+    content: ' ';
+}
+.alarmInputItem {
+    margin-bottom: 22px;
+}
+</style>
--- a/src/views/rule-engine/Alarm/Config/typing.d.ts
+++ b/src/views/rule-engine/Alarm/Config/typing.d.ts
@ -0,0 +1,26 @@
+import { BaseItem } from '@/utils/typings';
+
+type LevelItem = {
+  level: number;
+  title: string;
+};
+
+type IOConfigItem = {
+  id?: string;
+  address: string;
+  topic: string;
+  username: string;
+  password: string;
+};
+type IOItem = {
+  alarmConfigId: string;
+  sourceType: string;
+  config: Partial<{
+    type: string;
+    dataSourceId: string;
+    config: Partial<IOConfigItem>;
+  }>;
+  exchangeType: 'consume' | 'producer'; //订阅｜推送
+  state: 'disable' | 'enabled'; //禁用|正常
+  description: string;
+} & BaseItem;
--- a/vite.config.ts
+++ b/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/, '')
              }
--- a/yarn.lock
+++ b/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"