feat: 设备-日志管理

src/api/device/instance.ts

@@ -483,3 +483,18 @@ export const getPropertiesInfo = (deviceId: string, data: Record<string, unknown
  * @returns 
  */
 export const getPropertiesList = (deviceId: string, property: string, data: Record<string, unknown>) => server.post(`/device-instance/${deviceId}/property/${property}/_query`, data)
+
+/**
+ * 查询设备日志
+ * @param deviceId 
+ * @param data 
+ * @returns 
+ */
+export const queryLog = (deviceId: string, data: Record<string, unknown>) => server.post(`/device-instance/${deviceId}/logs`, data)
+
+/**
+ * 查询设备日志类型
+ * @returns 
+ */
+export const queryLogsType = () => server.get(`/dictionary/device-log-type/items`)
+

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

@@ -28,7 +28,7 @@
                 instanceStore.current.firmwareInfo?.version
             }}</a-descriptions-item>
             <a-descriptions-item label="连接协议">{{
-                instanceStore.current.protocolName
+                instanceStore.current?.protocolName
             }}</a-descriptions-item>
             <a-descriptions-item label="消息协议">{{
                 instanceStore.current.transport

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

@@ -0,0 +1,153 @@
+<template>
+    <a-card>
+        <Search
+            :columns="columns"
+            target="device-instance-log"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="instanceRefLog"
+            :columns="columns"
+            :request="(e: Record<string, any>) => queryLog(instanceStore.current.id, e)"
+            model="TABLE"
+            :defaultParams="{ sorts: [{ name: 'timestamp', order: 'desc' }] }"
+            :params="params"
+        >
+            <template #type="slotProps">
+                {{ slotProps?.type?.text }}
+            </template>
+            <template #timestamp="slotProps">
+                {{
+                    slotProps.timestamp
+                        ? moment(slotProps.timestamp).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #action="slotProps">
+                <a-space>
+                    <template
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                    >
+                        <a-button
+                            @click="i.onClick"
+                            type="link"
+                            style="padding: 0px"
+                        >
+                            <template #icon><AIcon :type="i.icon" /></template>
+                        </a-button>
+                    </template>
+                </a-space>
+            </template>
+        </JTable>
+    </a-card>
+</template>
+
+<script lang="ts" setup>
+import type { ActionsType } from '@/components/Table';
+import { queryLog, queryLogsType } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import moment from 'moment';
+import { Modal, Textarea } from 'ant-design-vue';
+
+const params = ref<Record<string, any>>({});
+const instanceStore = useInstanceStore();
+
+const columns = [
+    {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        scopedSlots: true,
+        ellipsis: true,
+        search: {
+            type: 'select',
+            options: () =>
+                new Promise((resolve) => {
+                    queryLogsType().then((resp: any) => {
+                        resolve(
+                            resp.result.map((item: any) => ({
+                                label: item.text,
+                                value: item.value,
+                            })),
+                        );
+                    });
+                }),
+        },
+    },
+    {
+        title: '时间',
+        dataIndex: 'timestamp',
+        key: 'timestamp',
+        scopedSlots: true,
+        ellipsis: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '内容',
+        ellipsis: true,
+        dataIndex: 'content',
+        key: 'content',
+        scopedSlots: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    return [
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'SearchOutlined',
+            onClick: () => {
+                let content = '';
+                try {
+                    content = JSON.stringify(
+                        JSON.parse(data.content),
+                        null,
+                        2,
+                    );
+                } catch (error) {
+                    content = data.content;
+                }
+                Modal.info({
+                    title: '详细信息',
+                    width: 700,
+                    content: h(Textarea, {
+                        bordered: false,
+                        rows: 15,
+                        value: content
+                    }),
+                });
+            },
+        },
+    ];
+};
+
+const handleSearch = (_params: any) => {
+    params.value = _params;
+};
+</script>
+
+<style lang="less" scoped>
+</style>

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

@@ -116,6 +116,7 @@ import Function from './Function/index.vue';
 import Modbus from './Modbus/index.vue';
 import OPCUA from './OPCUA/index.vue';
 import EdgeMap from './EdgeMap/index.vue';
+import Log from './Log/index.vue'
 import { _deploy, _disconnect } from '@/api/device/instance';
 import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
@@ -147,6 +148,10 @@ const list = ref([
         key: 'Metadata',
         tab: '物模型',
     },
+    {
+        key: 'Log',
+        tab: '日志管理',
+    },
     {
         key: 'Function',
         tab: '设备功能',
@@ -167,6 +172,7 @@ const tabs = {
     Modbus,
     OPCUA,
     EdgeMap,
+    Log
 };
 
 const getStatus = (id: string) => {

src/views/device/Instance/index.vue

@@ -694,7 +694,6 @@ const saveBtn = () => {
 };
 
 const handleSearch = (_params: any) => {
-    console.log(_params);
     params.value = _params;
 };
 </script>