fix: 运行状态详情查看

package.json

@@ -37,6 +37,7 @@
     "unplugin-vue-components": "^0.22.12",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.2.45",
+    "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.1.6",
     "vue3-markdown-it": "^1.0.10",
     "vue3-ts-jsoneditor": "^2.7.1"

src/api/device/instance.ts

@@ -467,3 +467,19 @@ export const saveEdgeMap = (deviceId: string, data?: any) => server.post(`/edge/
  * @returns 
  */
 export const getPropertyData = (deviceId: string, params: Record<string, unknown>) => server.get(`/device-instance/${deviceId}/properties/_query`, params)
+
+/**
+ * 聚合查询设备属性
+ * @param deviceId 
+ * @param data 
+ * @returns 
+ */
+export const getPropertiesInfo = (deviceId: string, data: Record<string, unknown>) => server.post(`/device-instance/${deviceId}/agg/_query`, data)
+
+/**
+ * 聚合查询设备属性
+ * @param deviceId 
+ * @param data 
+ * @returns 
+ */
+export const getPropertiesList = (deviceId: string, property: string, data: Record<string, unknown>) => server.post(`/device-instance/${deviceId}/property/${property}/_query`, data)

src/store/menu.ts

@@ -4,6 +4,8 @@ import { filterAsnycRouter, MenuItem } from '@/utils/menu'
 import { isArray } from 'lodash-es'
 import { usePermissionStore } from './permission'
 import router from '@/router'
+import { message } from 'ant-design-vue'
+import { onlyMessage } from '@/utils/comm'
 
 const defaultOwnParams = [
   {
@@ -77,6 +79,7 @@ export const useMenuStore = defineStore({
           name, params, query
         })
       } else {
+        onlyMessage('暂无权限，请联系管理员', 'error')
         console.warn(`没有找到对应的页面: ${name}`)
       }
     },

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

@@ -1,4 +1,6 @@
 import AIcon from "@/components/AIcon";
+import { useInstanceStore } from "@/store/instance";
+import { useMenuStore } from "@/store/menu";
 import { Button, Descriptions, Modal } from "ant-design-vue"
 import styles from './index.module.less'
 
@@ -14,6 +16,10 @@ const ManualInspection = defineComponent({
 
         const { data } = props
 
+        const instanceStore = useInstanceStore();
+
+        const menuStory = useMenuStore();
+
         const dataRender = () => {
             if (data.type === 'device' || data.type === 'product') {
                 return (
@@ -207,7 +213,13 @@ const ManualInspection = defineComponent({
                 emit('save', data)
             }}
             onCancel={() => {
-                // TODO 跳转设备和产品
+                if (data.type === 'device') {
+                    instanceStore.tabActiveKey = 'Info'
+                } else if (data.type === 'product') {
+                    menuStory.jumpPage('device/Product/Detail', { id: data.productId, tab: 'access' });
+                } else {
+                    menuStory.jumpPage('link/AccessConfig/Detail', { id: data.configuration?.id });
+                }
             }}>
             <div style={{ display: 'flex' }}>{dataRender()}</div>
         </Modal>

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

@@ -11,6 +11,8 @@ import _ from "lodash"
 import DiagnosticAdvice from './DiagnosticAdvice'
 import ManualInspection from './ManualInspection'
 import { deployDevice } from "@/api/initHome"
+import PermissionButton from '@/components/PermissionButton/index.vue'
+import { useMenuStore } from "@/store/menu"
 
 type TypeProps = 'network' | 'child-device' | 'media' | 'cloud' | 'channel'
 
@@ -41,6 +43,7 @@ const Status = defineComponent({
         const diagnoseData = ref<Partial<Record<string, any>>>()
 
         const bindParentVisible = ref<boolean>(false)
+        const menuStory = useMenuStore();
 
         const configuration = reactive<{
             product: Record<string, any>,
@@ -57,19 +60,8 @@ const Status = defineComponent({
             artificialData.value = params
         }
 
-        // TODO
         const jumpAccessConfig = () => {
-            // const purl = getMenuPathByCode(MENUS_CODE['device/Product/Detail']);
+            menuStory.jumpPage('device/Product/Detail', { id: unref(device).productId, tab: 'access' });
-            // if (purl) {
-            //   history.push(
-            //     `${getMenuPathByParams(MENUS_CODE['device/Product/Detail'], device.productId)}`,
-            //     {
-            //       tab: 'access',
-            //     },
-            //   );
-            // } else {
-            //   message.error('规则可能有加密处理，请联系管理员');
-            // }
         };
 
         const jumpDeviceConfig = () => {
@@ -123,9 +115,13 @@ const Status = defineComponent({
                                             <Badge
                                                 status="default"
                                                 text={
-                                                    <span>网络组件已禁用，请先<Popconfirm
+                                                    <span>网络组件已禁用，请先
-                                                        title="确认启用"
+                                                        <PermissionButton
-                                                        onConfirm={async () => {
+                                                            type="link"
+                                                            hasPermission="link/Type:action"
+                                                            popConfirm={{
+                                                                title: '确认启用',
+                                                                onConfirm: async () => {
                                                                     const res = await startNetwork(
                                                                         unref(gateway)?.channelId,
                                                                     );
@@ -143,10 +139,12 @@ const Status = defineComponent({
                                                                             },
                                                                         );
                                                                     }
+                                                                }
                                                             }}
                                                         >
-                                                        <Button type="link" style="padding: 0">启用</Button>
+                                                            启用
-                                                    </Popconfirm></span>
+                                                        </PermissionButton>
+                                                    </span>
                                                 }
                                             />
                                         </div>
@@ -287,9 +285,11 @@ const Status = defineComponent({
                                                 <Badge
                                                     status="default"
                                                     text={<span>设备接入网关已禁用，请先
-                                                        <Popconfirm
+                                                        <PermissionButton
-                                                            title="确认启用"
+                                                            hasPermission="link/Type:action"
-                                                            onConfirm={async () => {
+                                                            popConfirm={{
+                                                                title: '确认启用',
+                                                                onConfirm: async () => {
                                                                     const resp = await startGateway(unref(device).accessId || '');
                                                                     if (resp.status === 200) {
                                                                         message.success('操作成功！');
@@ -305,10 +305,11 @@ const Status = defineComponent({
                                                                             },
                                                                         );
                                                                     }
+                                                                }
                                                             }}
                                                         >
-                                                            <Button type="link" style="padding: 0">启用</Button>
+                                                            启用
-                                                        </Popconfirm>
+                                                        </PermissionButton>
                                                     </span>}
                                                 />
                                             </div>
@@ -411,9 +412,12 @@ const Status = defineComponent({
                                             status="default"
                                             text={
                                                 <span>
-                                                    设备接入网关已禁用，请先<Popconfirm
+                                                    设备接入网关已禁用，请先
-                                                        title="确认启用"
+                                                    <PermissionButton
-                                                        onConfirm={async () => {
+                                                        hasPermission="link/AccessConfig:action"
+                                                        popConfirm={{
+                                                            title: '确认启用',
+                                                            onConfirm: async () => {
                                                                 const resp = await startGateway(unref(device).accessId || '');
                                                                 if (resp.status === 200) {
                                                                     message.success('操作成功！');
@@ -429,10 +433,11 @@ const Status = defineComponent({
                                                                         },
                                                                     );
                                                                 }
+                                                            }
                                                         }}
                                                     >
-                                                        <Button type="link" style="padding: 0">启用</Button>
+                                                        启用
-                                                    </Popconfirm>
+                                                    </PermissionButton>
                                                 </span>
                                             }
                                         />
@@ -519,9 +524,12 @@ const Status = defineComponent({
                                                 status="default"
                                                 text={
                                                     <span>
-                                                        网关父设备已禁用，请先<Popconfirm
+                                                        网关父设备已禁用，请先
-                                                            title="确认启用"
+                                                        <PermissionButton
-                                                            onConfirm={async () => {
+                                                            hasPermission="device/Product:action"
+                                                            popConfirm={{
+                                                                title: '确认启用',
+                                                                onConfirm: async () => {
                                                                     const resp = await _deploy(response?.result?.id || '');
                                                                     if (resp.status === 200) {
                                                                         message.success('操作成功！');
@@ -537,10 +545,11 @@ const Status = defineComponent({
                                                                             },
                                                                         );
                                                                     }
+                                                                }
                                                             }}
                                                         >
-                                                            <Button type="link" style="padding: 0">启用</Button>
+                                                            启用
-                                                        </Popconfirm>
+                                                        </PermissionButton>
                                                     </span>
                                                 }
                                             />
@@ -623,9 +632,12 @@ const Status = defineComponent({
                                                 status="default"
                                                 text={
                                                     <span>
-                                                        产品已禁用，请<Popconfirm
+                                                        产品已禁用，请
-                                                            title="确认启用"
+                                                        <PermissionButton
-                                                            onConfirm={async () => {
+                                                            hasPermission="device/Product:action"
+                                                            popConfirm={{
+                                                                title: '确认启用',
+                                                                onConfirm: async () => {
                                                                     const resp = await _deployProduct(unref(device).productId || '');
                                                                     if (resp.status === 200) {
                                                                         message.success('操作成功！');
@@ -641,10 +653,11 @@ const Status = defineComponent({
                                                                             },
                                                                         );
                                                                     }
+                                                                }
                                                             }}
                                                         >
-                                                            <Button type="link" style="padding: 0">启用</Button>
+                                                            启用
-                                                        </Popconfirm>
+                                                        </PermissionButton>
                                                         产品
                                                     </span>
                                                 }
@@ -695,9 +708,12 @@ const Status = defineComponent({
                                         status="default"
                                         text={
                                             <span>
-                                                设备已禁用，请<Popconfirm
+                                                设备已禁用，请
-                                                    title="确认启用"
+                                                <PermissionButton
-                                                    onConfirm={async () => {
+                                                    hasPermission="device/Instance:action"
+                                                    popConfirm={{
+                                                        title: '确认启用',
+                                                        onConfirm: async () => {
                                                             const resp = await _deploy(unref(device)?.id || '');
                                                             if (resp.status === 200) {
                                                                 instanceStore.current.state = { value: 'offline', text: '离线' }
@@ -714,10 +730,12 @@ const Status = defineComponent({
                                                                     },
                                                                 );
                                                             }
+                                                        }
                                                     }}
                                                 >
-                                                    <Button type="link" style="padding: 0">启用</Button>
+                                                    启用
-                                                </Popconfirm>设备
+                                                </PermissionButton>
+                                                设备
                                             </span>
                                         }
                                     />

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

@@ -19,18 +19,18 @@
 </template>
 
 <script lang="ts" setup>
-import moment from 'moment'
+import moment from 'moment';
-import { getEventList } from '@/api/device/instance'
+import { getEventList } from '@/api/device/instance';
-import { useInstanceStore } from '@/store/instance'
+import { useInstanceStore } from '@/store/instance';
-import { Modal } from 'ant-design-vue'
+import { Modal } from 'ant-design-vue';
 
 const events = defineProps({
     data: {
         type: Object,
-        default: () => {}
+        default: () => {},
-    }
+    },
-})
+});
-const instanceStore = useInstanceStore()
+const instanceStore = useInstanceStore();
 
 const columns = ref<Record<string, any>>([
     {
@@ -38,17 +38,25 @@ const columns = ref<Record<string, any>>([
         dataIndex: 'timestamp',
         key: 'timestamp',
         scopedSlots: true,
+        search: {
+            type: 'date',
+        },
     },
     {
         title: '操作',
         dataIndex: 'action',
         key: 'action',
         scopedSlots: true,
-    }
+    },
-])
+]);
-const params = ref<Record<string, any>>({})
+const params = ref<Record<string, any>>({});
 
-const _getEventList = () => getEventList(instanceStore.current.id || '', events.data.id || '', params.value)
+const _getEventList = () =>
+    getEventList(
+        instanceStore.current.id || '',
+        events.data.id || '',
+        params.value,
+    );
 
 watchEffect(() => {
     if (events.data?.valueType?.type === 'object') {
@@ -56,25 +64,26 @@ watchEffect(() => {
             columns.value.splice(0, 0, {
                 key: i.id,
                 title: i.name,
-              dataIndex: `${i.id}_format`
+                dataIndex: `${i.id}_format`,
-            })
+                search: {
-        })
+                    type: 'string',
+                },
+            });
+        });
     } else {
         columns.value.splice(0, 0, {
             title: '数据',
             dataIndex: 'value',
-        })
+        });
     }
-})
+});
 
 const detail = () => {
     Modal.info({
         title: () => '详情',
         width: 850,
-        content: () => h('div', {}, [
+        content: () => h('div', {}, [h('p', '暂未开发')]),
-          h('p', '暂未开发'),
+        okText: '关闭',
-        ]),
-        okText: '关闭'
     });
-}
+};
 </script>

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

@@ -1,3 +1,54 @@
+<!-- 坐标点拾取组件 -->
 <template>
-    <div>AMap</div>
+    <div style="width: 100%; height: 400px">
+        <div style="position: relative">
+            <div style="position: absolute; right: 0; top: 5px; z-index: 999">
+                <a-space>
+                    <a-button type="primary" @click="start">开始动画</a-button>
+                    <a-button type="primary" @click="stop">停止动画</a-button>
+                </a-space>
+            </div>
+        </div>
+        <el-amap :center="center" :zooms="[3, 20]" @init="initMap" ref="map"></el-amap>
+    </div>
 </template>
+
+<script setup lang="ts">
+import { initAMapApiLoader } from '@vuemap/vue-amap';
+import AMapUI from '@vuemap/vue-amap'
+import '@vuemap/vue-amap/dist/style.css';
+
+initAMapApiLoader({
+    key: 'a0415acfc35af15f10221bfa5a6850b4',
+    securityJsCode: 'cae6108ec3dd222f946d1a7237c78be0',
+});
+
+interface EmitProps {
+    (e: 'update:points', data: string): void;
+}
+const props = defineProps({
+    points: { type: Array, default: () => [] },
+});
+const emit = defineEmits<EmitProps>();
+
+// 地图拾取的坐标点(经纬度字符串)
+const mapPoint = ref('');
+
+const map = ref(null);
+
+const center = ref([106.55, 29.56]);
+const marker = ref(null);
+
+/**
+ * 地图初始化
+ * @param e
+ */
+const initMap = (e: any) => {
+    console.log(e)
+    // map = e;
+    // const pointStr = mapPoint.value as string;
+};
+</script>
+
+<style lang="less" scoped>
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+    <div class="chart" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+
+const { proxy } = <any>getCurrentInstance();
+
+const props = defineProps({
+    // 图表数据
+    options:{
+        type:Object,
+        default:()=>{}
+    }
+});
+
+/**
+ * 绘制图表
+ */
+const createChart = () => {
+    nextTick(() => {
+        const myChart = echarts.init(proxy.$refs.chart);
+        myChart.setOption(props.options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    });
+};
+
+watch(
+    () => props.options,
+    () => createChart(),
+    { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="less">
+.chart {
+    width: 100%;
+    height: 100%;
+}
+</style>

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

@@ -1,3 +1,218 @@
 <template>
-    <div>Charts</div>
+    <a-spin :spinning="loading">
+        <div>
+            <a-space>
+                <div>
+                    统计周期：
+                    <a-select v-model:value="cycle" style="width: 120px">
+                        <a-select-option value="*" v-if="_type"
+                            >实际值</a-select-option
+                        >
+                        <a-select-option value="1m">按分钟统计</a-select-option>
+                        <a-select-option value="1h">按小时统计</a-select-option>
+                        <a-select-option value="1d">按天统计</a-select-option>
+                        <a-select-option value="1w">按周统计</a-select-option>
+                        <a-select-option value="1M">按月统计</a-select-option>
+                    </a-select>
+                </div>
+                <div v-if="cycle !== '*' && _type">
+                    统计规则：
+                    <a-select v-model:value="agg" style="width: 120px">
+                        <a-select-option value="AVG">平均值</a-select-option>
+                        <a-select-option value="MAX">最大值</a-select-option>
+                        <a-select-option value="MIN">最小值</a-select-option>
+                        <a-select-option value="COUNT">总数</a-select-option>
+                    </a-select>
+                </div>
+            </a-space>
+        </div>
+        <div style="width: 100%; height: 500px">
+            <Chart :options="options" v-if="chartsList.length" />
+            <JEmpty v-else />
+        </div>
+    </a-spin>
 </template>
+
+<script lang="ts" setup>
+import { getPropertiesInfo, getPropertiesList } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import Chart from './Chart.vue';
+import * as echarts from 'echarts';
+
+const list = ['int', 'float', 'double', 'long'];
+
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+    time: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const cycle = ref<string>('*');
+const agg = ref<string>('AVG');
+const loading = ref<boolean>(false);
+const chartsList = ref<any[]>([]);
+const instanceStore = useInstanceStore();
+const options = ref({});
+
+const _type = computed(() => {
+    const flag = list.includes(prop.data?.valueType?.type || '')
+    cycle.value =  flag ? '*' : '1m'
+    return flag
+});
+
+const queryChartsAggList = async () => {
+    loading.value = true;
+    const resp = await getPropertiesInfo(instanceStore.current.id, {
+        columns: [
+            {
+                property: prop.data.id,
+                alias: prop.data.id,
+                agg: agg.value,
+            },
+        ],
+        query: {
+            interval: cycle.value,
+            format: 'yyyy-MM-dd HH:mm:ss',
+            from: prop.time[0],
+            to: prop.time[1],
+        },
+    });
+    loading.value = false;
+    if (resp.status === 200) {
+        const dataList: any[] = [
+            {
+                year: prop.time[1],
+                value: undefined,
+                type: prop.data?.name || '',
+            },
+        ];
+        (resp.result as any[]).forEach((i: any) => {
+            dataList.push({
+                ...i,
+                year: i.time,
+                value: Number(i[prop.data.id || '']),
+                type: prop.data?.name || '',
+            });
+        });
+        dataList.push({
+            year: prop.time[0],
+            value: undefined,
+            type: prop.data?.name || '',
+        });
+        chartsList.value = (dataList || []).reverse();
+    }
+};
+
+const queryChartsList = async () => {
+    loading.value = true;
+    const resp = await getPropertiesList(
+        instanceStore.current.id,
+        prop.data.id,
+        {
+            paging: false,
+            terms: [
+                {
+                    column: 'timestamp$BTW',
+                    value:
+                        prop.time[0] && prop.time[1]
+                            ? [prop.time[0], prop.time[1]]
+                            : [],
+                    type: 'and',
+                },
+            ],
+            sorts: [{ name: 'timestamp', order: 'asc' }],
+        },
+    );
+    loading.value = false;
+    if (resp.status === 200) {
+        const dataList: any[] = [
+            {
+                year: prop.time[0],
+                value: undefined,
+                type: prop.data?.name || '',
+            },
+        ];
+        (resp.result as any)?.data?.forEach((i: any) => {
+            dataList.push({
+                ...i,
+                year: i.timestamp,
+                value: i.value,
+                type: prop.data?.name || '',
+            });
+        });
+        dataList.push({
+            year: prop.time[1],
+            value: undefined,
+            type: prop.data?.name || '',
+        });
+        chartsList.value = dataList || [];
+    }
+};
+
+const getOptions = (arr: any[]) => {
+    options.value = {
+        xAxis: {
+            type: 'category',
+            data: arr.map((item) => {
+                return echarts.format.formatTime(
+                    'yyyy-MM-dd\nhh:mm:ss',
+                    item.year,
+                    false,
+                );
+            }),
+            name: '时间',
+        },
+        yAxis: {
+            type: 'value',
+            name: arr[0]?.type,
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                start: 0,
+                end: 10,
+            },
+            {
+                start: 0,
+                end: 10,
+            },
+        ],
+        tooltip: {
+            trigger: 'axis',
+            position: function (pt: any) {
+                return [pt[0], '10%'];
+            },
+        },
+        series: [
+            {
+                data: arr.map((i: any) => i.value),
+                type: 'line',
+                areaStyle: {},
+            },
+        ],
+    };
+};
+
+watch(
+    () => [cycle, agg],
+    ([newCycle, newAgg]) => {
+        if (newCycle.value === '*' && _type.value) {
+            queryChartsList();
+        } else {
+            queryChartsAggList();
+        }
+    },
+    { deep: true, immediate: true },
+);
+
+watchEffect(() => {
+    if (chartsList.value.length) {
+        getOptions(chartsList.value);
+    }
+});
+</script>

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

@@ -0,0 +1,74 @@
+<template>
+    <a-spin :spinning="loading">
+        <div style="position: relative">
+            <div style="position: absolute; right: 0; top: 5px; z-index: 999">
+                <a-space>
+                    <a-button type="primary">开始动画</a-button>
+                    <a-button type="primary">停止动画</a-button>
+                </a-space>
+            </div>
+        </div>
+        <AMap :points="geoList" />
+    </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { getPropertyData } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import encodeQuery from '@/utils/encodeQuery';
+import AMap from './AMap.vue';
+
+const instanceStore = useInstanceStore();
+
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+    time: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const geoList = ref<any[]>([]);
+const loading = ref<boolean>(false);
+
+const query = async () => {
+    loading.value = true;
+    const resp = await getPropertyData(
+        instanceStore.current.id,
+        encodeQuery({
+            paging: false,
+            terms: {
+                property: prop.data.id,
+                timestamp$BTW: prop.time[0] && prop.time[1] ? prop.time : [],
+            },
+            sorts: { timestamp: 'asc' },
+        }),
+    );
+    loading.value = false;
+    if (resp.status === 200) {
+        const list: any[] = [];
+        ((resp.result as any)?.data || []).forEach((item: any) => {
+            list.push([item.value.lon, item.value.lat]);
+        });
+        geoList.value = list
+    }
+};
+
+watch(
+    () => [prop.data.id, prop.time],
+    ([newVal]) => {
+        if (newVal) {
+            query();
+        }
+    },
+    {
+        deep: true, immediate: true
+    }
+);
+</script>
+
+<style lang="less" scoped>
+</style>

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

@@ -18,6 +18,13 @@
                 <template v-if="column.key === 'timestamp'">
                     {{ moment(record.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
                 </template>
+                <template v-if="column.key === 'value'">
+                    <ValueRender
+                        type="table"
+                        :data="_props.data"
+                        :value="{ formatValue: record.value }"
+                    />
+                </template>
                 <template v-else-if="column.key === 'action'">
                     <a-space>
                         <a-button
@@ -30,7 +37,7 @@
                             @click="_download(record)"
                             ><AIcon type="DownloadOutlined"
                         /></a-button>
-                        <a-button type="link"
+                        <a-button type="link" @click="showDetail(record)"
                             ><AIcon type="SearchOutlined"
                         /></a-button>
                     </a-space>
@@ -38,6 +45,28 @@
             </template>
         </a-table>
     </div>
+    <a-modal
+        title="详情"
+        :visible="visible"
+        @ok="visible = false"
+        @cancel="visible = false"
+    >
+        <div>自定义属性</div>
+        <JsonViewer
+            v-if="
+                data?.valueType?.type === 'object' ||
+                data?.valueType?.type === 'array'
+            "
+            :expand-depth="5"
+            :value="current.formatValue"
+        />
+        <a-textarea
+            v-else-if="data?.valueType?.type === 'file'"
+            :value="current.formatValue"
+            :row="3"
+        />
+        <a-input v-else disabled :value="current.formatValue" />
+    </a-modal>
 </template>
 
 <script lang="ts" setup>
@@ -46,6 +75,8 @@ import { useInstanceStore } from '@/store/instance';
 import encodeQuery from '@/utils/encodeQuery';
 import moment from 'moment';
 import { getType } from '../index';
+import ValueRender from '../ValueRender.vue';
+import JsonViewer from 'vue-json-viewer';
 
 const _props = defineProps({
     data: {
@@ -57,8 +88,11 @@ const _props = defineProps({
         default: () => [],
     },
 });
+
 const instanceStore = useInstanceStore();
 const dataSource = ref({});
+const current = ref<any>({});
+const visible = ref<boolean>(false);
 
 const columns = computed(() => {
     const arr: any[] = [
@@ -92,6 +126,11 @@ const showLoad = computed(() => {
     );
 });
 
+const showDetail = (item: any) => {
+    visible.value = true;
+    current.value = item;
+};
+
 const queryPropertyData = async (params: any) => {
     const resp = await getPropertyData(
         instanceStore.current.id,
@@ -99,7 +138,7 @@ const queryPropertyData = async (params: any) => {
             ...params,
             terms: {
                 property: _props.data.id,
-                timestamp$BTW: _props.time?.length ? _props.time : [],
+                timestamp$BTW: _props.time,
             },
             sorts: { timestamp: 'desc' },
         }),
@@ -109,14 +148,20 @@ const queryPropertyData = async (params: any) => {
     }
 };
 
-watchEffect(() => {
+watch(
-    if (_props.data.id) {
+    () => [_props.data.id, _props.time],
+    ([newVal]) => {
+        if (newVal) {
             queryPropertyData({
                 pageSize: _props.data.valueType?.type === 'file' ? 5 : 10,
                 pageIndex: 0,
             });
         }
-});
+    },
+    {
+        deep: true, immediate: true
+    }
+);
 
 const onChange = (page: any) => {
     queryPropertyData({
@@ -141,3 +186,9 @@ const _download = (record: any) => {
     document.body.removeChild(downNode);
 };
 </script>
+
+<style lang="less" scoped>
+:deep(.ant-pagination-item) {
+    display: none !important;
+}
+</style>

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

@@ -2,15 +2,15 @@
     <a-modal title="详情" visible width="50vw" @ok="onCancel" @cancel="onCancel">
         <div style="margin-bottom: 10px"><TimeComponent v-model="dateValue" /></div>
         <div>
-            <a-tabs v-model:activeKey="activeKey">
+            <a-tabs v-model:activeKey="activeKey" style="max-height: 600px; overflow-y: auto">
                 <a-tab-pane key="table" tab="列表">
                     <Table :data="props.data" :time="_getTimes" />
                 </a-tab-pane>
                 <a-tab-pane key="charts" tab="图表">
-                    <Charts />
+                    <Charts :data="props.data" :time="_getTimes" />
                 </a-tab-pane>
-                <a-tab-pane key="geo" tab="轨迹">
+                <a-tab-pane key="geo" tab="轨迹" v-if="data?.valueType?.type === 'geoPoint'">
-                    <AMap />
+                    <PropertyAMap :data="props.data" :time="_getTimes" />
                 </a-tab-pane>
             </a-tabs>
         </div>
@@ -21,7 +21,7 @@
 import type { Dayjs } from 'dayjs';
 import TimeComponent from './TimeComponent.vue'
 import Charts from './Charts.vue'
-import AMap from './AMap.vue'
+import PropertyAMap from './PropertyAMap.vue'
 import Table from './Table.vue'
 
 const props = defineProps({

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

@@ -6,10 +6,10 @@
                 <div class="title">{{ _props.data.name }}</div>
                 <div class="extra">
                     <a-space :size="16">
+                        <template v-for="i in actions" :key="i.key">
                             <a-tooltip
-                                v-for="i in actions"
-                                :key="i.key"
                                 v-bind="i.tooltip"
+                                v-if="i.key !== 'edit'"
                             >
                                 <a-button
                                     style="padding: 0; margin: 0"
@@ -17,9 +17,27 @@
                                     :disabled="i.disabled"
                                     @click="i.onClick && i.onClick(data)"
                                 >
-                                    <AIcon :type="i.icon" style="color: #323130; font-size: 12px" />
+                                    <AIcon
+                                        :type="i.icon"
+                                        style="color: #323130; font-size: 12px"
+                                    />
                                 </a-button>
                             </a-tooltip>
+                            <PermissionButton
+                                :disabled="i.disabled"
+                                v-else
+                                :popConfirm="i.popConfirm"
+                                :tooltip="i.tooltip"
+                                @click="i.onClick && i.onClick(slotProps)"
+                                type="link"
+                                style="padding: 0px"
+                                :hasPermission="'device/Instance:update'"
+                            >
+                                <template #icon
+                                    ><AIcon :type="i.icon" style="color: #323130; font-size: 12px"
+                                /></template>
+                            </PermissionButton>
+                        </template>
                     </a-space>
                 </div>
             </div>
@@ -27,8 +45,12 @@
                 <ValueRender :data="data" :value="_props.data" type="card" />
             </div>
             <div class="bottom">
-                    <div style="color: rgba(0, 0, 0, .65); font-size: 12px">更新时间</div>
+                <div style="color: rgba(0, 0, 0, 0.65); font-size: 12px">
-                    <div class="time-value">{{_props?.data?.timeString || '--'}}</div>
+                    更新时间
+                </div>
+                <div class="time-value">
+                    {{ _props?.data?.timeString || '--' }}
+                </div>
             </div>
         </div>
         <!-- </a-spin> -->
@@ -36,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import ValueRender from './ValueRender.vue'
+import ValueRender from './ValueRender.vue';
 const _props = defineProps({
     data: {
         type: Object,
@@ -44,7 +66,7 @@ const _props = defineProps({
     },
     actions: {
         type: Array,
-        default: () => []
+        default: () => [],
     },
 });
 // const loading = ref<boolean>(true);

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

@@ -13,23 +13,18 @@
             <a-image :src="value?.formatValue" />
         </template>
         <template v-else-if="['.flv', '.m3u8', '.mp4'].includes(type)">
-            <!-- TODO 视频组件缺失 -->
         </template>
         <template v-else>
-            <!-- <json-viewer
+            <JsonViewer
-                :value="{
+                :expand-depth="5"
-                    'id': '123'
+                :value="value?.formatValue"
-                }"
+            />
-                copyable
-                boxed
-                sort
-            ></json-viewer> -->
         </template>
     </a-modal>
 </template>
 
 <script lang="ts" setup>
-// import JsonViewer from 'vue3-json-viewer';
+import JsonViewer from 'vue-json-viewer';
 
 const _data = defineProps({
     type: {
@@ -46,9 +41,6 @@ const handleCancel = () => {
     _emit('close');
 };
 
-// watchEffect(() => {
-//     console.log(_data.value?.formatValue)
-// })
 </script>
 
 <style lang="less" scoped>

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

@@ -1,7 +1,7 @@
 <template>
     <div class="value">
         <div v-if="value?.formatValue !== 0 && !value?.formatValue" :class="valueClass">--</div>
-        <div v-else-if="data?.valueType?.type === 'file'">
+        <div v-else-if="_data.data?.valueType?.type === 'file'">
           <template v-if="data?.valueType?.fileType === 'base64'">
             <div :class="valueClass" v-if="!!getType(value?.formatValue)">
               <img :src="imgMap.get(_type)" @error="onError" />
@@ -36,10 +36,10 @@
             </template>
           </template>
         </div>
-        <div v-else-if="data?.valueType?.type === 'object'" @click="getDetail('obj')" :class="valueClass">
+        <div v-else-if="_data.data?.valueType?.type === 'object'" @click="getDetail('obj')" :class="valueClass">
           <img :src="imgMap.get('obj')" />
         </div>
-        <div v-else-if="data?.valueType?.type === 'geoPoint' || data?.valueType?.type === 'array'" :class="valueClass">
+        <div v-else-if="_data.data?.valueType?.type === 'geoPoint' || _data.data?.valueType?.type === 'array'" :class="valueClass">
           {{JSON.stringify(value?.formatValue)}}
         </div>
         <div v-else :class="valueClass">
@@ -53,7 +53,7 @@
 import { getImage } from "@/utils/comm";
 import { message } from "ant-design-vue";
 import ValueDetail from './ValueDetail.vue'
-import {getType, imgMap} from './index'
+import {getType, imgMap, imgList, videoList, fileList} from './index'
 
 const _data = defineProps({
     data: {
@@ -115,7 +115,6 @@ const getDetail = (_type: string) => {
   _types.value = flag
   visible.value = true
 }
-
 </script>
 
 <style lang="less" scoped>

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

@@ -32,11 +32,8 @@
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip
+                    <template v-for="i in getActions(slotProps)" :key="i.key">
-                        v-for="i in getActions(slotProps)"
+                        <a-tooltip v-bind="i.tooltip" v-if="i.key !== 'edit'">
-                        :key="i.key"
-                        v-bind="i.tooltip"
-                    >
                             <a-button
                                 style="padding: 0"
                                 type="link"
@@ -46,6 +43,19 @@
                                 <AIcon :type="i.icon" />
                             </a-button>
                         </a-tooltip>
+                        <PermissionButton
+                            :disabled="i.disabled"
+                            v-else
+                            :popConfirm="i.popConfirm"
+                            :tooltip="i.tooltip"
+                            @click="i.onClick && i.onClick(slotProps)"
+                            type="link"
+                            style="padding: 0px"
+                            :hasPermission="'device/Instance:update'"
+                        >
+                            <template #icon><AIcon :type="i.icon" /></template>
+                        </PermissionButton>
+                    </template>
                 </a-space>
             </template>
             <template #paginationRender>
@@ -76,7 +86,11 @@
         @close="indicatorVisible = false"
         :data="currentInfo"
     />
-    <Detail v-if="detailVisible" :data="currentInfo" @close="detailVisible = false" />
+    <Detail
+        v-if="detailVisible"
+        :data="currentInfo"
+        @close="detailVisible = false"
+    />
 </template>
 
 <script lang="ts" setup>
@@ -240,10 +254,14 @@ const subscribeProperty = () => {
         ?.pipe(map((res: any) => res.payload))
         .subscribe((payload) => {
             list.value = [...list.value, payload];
-            unref(list).sort((a: any, b: any) => a.timestamp - b.timestamp)
+            unref(list)
+                .sort((a: any, b: any) => a.timestamp - b.timestamp)
                 .forEach((item: any) => {
                     const { value } = item;
-                propertyValue.value[value?.property] = { ...item, ...value };
+                    propertyValue.value[value?.property] = {
+                        ...item,
+                        ...value,
+                    };
                 });
             // list.value = [...list.value, payload];
             // throttle(valueChange(list.value), 500);
@@ -337,8 +355,8 @@ const onSearch = () => {
 };
 
 onUnmounted(() => {
-    subRef.value && subRef.value?.unsubscribe()
+    subRef.value && subRef.value?.unsubscribe();
-})
+});
 </script>
 
 <style scoped lang="less">

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

@@ -2,7 +2,7 @@
     <page-container
         :tabList="list"
         @back="onBack"
-        :tabActiveKey="instanceStore.active"
+        :tabActiveKey="instanceStore.tabActiveKey"
         @tabChange="onTabChange"
     >
         <template #title>

src/views/device/Instance/index.vue

@@ -155,13 +155,12 @@
                         />
                     </template>
                     <template #content>
-                        <h3
+                        <Ellipsis style="width: calc(100% - 100px)">
-                            class="card-item-content-title"
+                            <span style="font-size: 16px; font-weight: 600"  @click.stop="handleView(slotProps.id)">
-                            @click.stop="handleView(slotProps.id)"
-                        >
                                 {{ slotProps.name }}
-                        </h3>
+                            </span>
-                        <a-row>
+                        </Ellipsis>
+                        <a-row style="margin-top: 20px">
                             <a-col :span="12">
                                 <div class="card-item-content-text">
                                     设备类型
@@ -172,7 +171,9 @@
                                 <div class="card-item-content-text">
                                     产品名称
                                 </div>
-                                <div>{{ slotProps.productName }}</div>
+                                <Ellipsis style="width: 100%">
+                                    {{ slotProps.productName }}
+                                </Ellipsis>
                             </a-col>
                         </a-row>
                     </template>