feat: 监控运维 - 日志服务

src/api/common/types.ts

@@ -14,5 +14,6 @@ export type SystemEnumKeys =
   | 'eRoleAlias'
   | 'eAuthType'
   | 'eSubscribeMessageType'
+  | 'eDeviceLogBizType'
 
 export type SystemEnum = Record<SystemEnumKeys, SystemEnumValue[]>

src/api/monitor-ops/log/index.ts

@@ -0,0 +1,18 @@
+import type { GetLogListParams, Log, MessageContent } from './types'
+import { defHttp } from '@/utils/http/axios'
+
+export function getLogList(params: GetLogListParams) {
+  return defHttp.get<PageResult<Log>>({
+    url: '/device/log/page',
+    params,
+  })
+}
+
+export function getMessageContent(id: string) {
+  return defHttp.get<MessageContent>({
+    url: '/device/log/message',
+    params: {
+      id,
+    },
+  })
+}

src/api/monitor-ops/log/types.ts

@@ -0,0 +1,25 @@
+export interface GetLogListParams extends PageParam {
+  productId: string
+  deviceSn: string
+  traceId: string
+  bizType: string
+  queryStartTime: string
+  queryEndTime: string
+}
+
+export interface Log {
+  productId: string
+  deviceSn: string
+  traceId: string
+  messageId?: string
+  bizType: number
+  operation: string
+  createTime: string
+  code: number
+}
+
+export interface MessageContent {
+  message: string
+  topic: string
+  createTime: string
+}

src/views/monitor-ops/log/MessageContentModal.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue'
+import { Button } from 'ant-design-vue'
+import { CopyOutlined } from '@ant-design/icons-vue'
+import { getMessageContent } from '@/api/monitor-ops/log'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { noop } from '@/utils'
+import type { DescItem } from '@/components/Description'
+import { Description } from '@/components/Description'
+import { copyText } from '@/utils/copyTextToClipboard'
+import type { MessageContent } from '@/api/monitor-ops/log/types'
+
+defineEmits(['register'])
+
+const data = ref<MessageContent>()
+const [register] = useModalInner((id: string) => {
+  getMessageContent(id)
+    .then((res) => {
+      data.value = res
+    })
+    .catch(noop)
+})
+
+const schema: DescItem[] = [
+  {
+    field: 'topic',
+    label: 'Topic',
+  },
+  {
+    field: 'createTime',
+    label: '时间',
+  },
+  {
+    field: 'message',
+    label: '内容',
+    render(val) {
+      let content = val
+      try {
+        content = JSON.stringify(JSON.parse(val), null, 2)
+      }
+      catch {}
+      return h('div', [
+        h(Button, {
+          size: 'small',
+          onClick: () => copyText(content),
+        }, () => [h(CopyOutlined), '复制']),
+        h('pre', {
+          style: {
+            marginTop: '10px',
+          },
+        }, content),
+      ])
+    },
+  },
+]
+</script>
+
+<template>
+  <BasicModal title="消息内容" :footer="null" @register="register">
+    <Description :data="data" :schema="schema" :column="1" />
+  </BasicModal>
+</template>

src/views/monitor-ops/log/data.ts

@@ -0,0 +1,131 @@
+import { h } from 'vue'
+import { Tag } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import type { BasicColumn, FormSchema } from '@/components/Table'
+import { getAllProducts } from '@/api/product'
+import type { Product } from '@/api/product/types'
+import { useSystemEnumStoreWithOut } from '@/store/modules/systemEnum'
+
+let productsCache: Pick<Product, 'id' | 'productName'>[] = []
+async function getCachedProducts() {
+  if (productsCache.length)
+    return productsCache
+
+  try {
+    return productsCache = await getAllProducts()
+  }
+  catch {
+    return []
+  }
+}
+
+const { getSystemEnumLabel, getSystemEnums } = useSystemEnumStoreWithOut()
+
+export const columns: BasicColumn[] = [
+  {
+    title: '所属产品',
+    dataIndex: 'productId',
+    customRender({ value }) {
+      return productsCache.find(item => item.id === value)?.productName
+    },
+  },
+  {
+    title: '设备序列号',
+    dataIndex: 'deviceSn',
+  },
+  {
+    title: 'TraceID',
+    dataIndex: 'traceId',
+  },
+  {
+    title: '消息内容',
+    dataIndex: 'messageId',
+    width: 120,
+  },
+  {
+    title: '业务类型',
+    dataIndex: 'bizType',
+    width: 150,
+    customRender({ value }) {
+      return h(Tag, () => getSystemEnumLabel('eDeviceLogBizType', value))
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+  },
+  {
+    title: '时间',
+    dataIndex: 'createTime',
+  },
+  {
+    title: '状态',
+    dataIndex: 'code',
+    width: 120,
+    customRender({ value }) {
+      return h('b', {
+        style: {
+          color: value === 200 ? '#16a34a' : '#dc2626',
+        },
+      }, value)
+    },
+  },
+]
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'productId',
+    label: '所属产品',
+    component: 'ApiSelect',
+    componentProps: {
+      api: getCachedProducts,
+      valueField: 'id',
+      labelField: 'productName',
+      showSearch: true,
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: 'deviceSn',
+    label: '设备序列号',
+    component: 'Input',
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: 'traceId',
+    label: 'TraceId',
+    component: 'Input',
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: 'bizType',
+    label: '业务类型',
+    component: 'Select',
+    componentProps: {
+      options: getSystemEnums('eDeviceLogBizType'),
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+  {
+    field: 'time',
+    label: '日志时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: true,
+      disabledDate(current) {
+        return current && current > dayjs().endOf('day')
+      },
+    },
+    colProps: {
+      span: 6,
+    },
+  },
+]

src/views/monitor-ops/log/index.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { columns, searchFormSchema } from './data'
+import MessageContentModal from './MessageContentModal.vue'
+import { getLogList } from '@/api/monitor-ops/log'
+import { BasicTable, useTable } from '@/components/Table'
+import { useModal } from '@/components/Modal'
+import type { GetLogListParams, Log } from '@/api/monitor-ops/log/types'
+
+const [registerModal, { openModal }] = useModal<string>()
+
+const [register] = useTable({
+  api(params: GetLogListParams & { time: [string, string] }) {
+    return getLogList({
+      ...params,
+      queryStartTime: params.time && params.time[0],
+      queryEndTime: params.time && params.time[1],
+    })
+  },
+  columns,
+  formConfig: {
+    labelWidth: 90,
+    schemas: searchFormSchema,
+  },
+  bordered: true,
+  canResize: false,
+  isTreeTable: true,
+  useSearchForm: true,
+})
+</script>
+
+<template>
+  <div>
+    <BasicTable :api="async () => ([] as Log[])" @register="register">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'messageId'">
+          <a-button v-if="record.messageId" type="link" size="small" @click="openModal(true, record.messageId)">
+            查看
+          </a-button>
+        </template>
+      </template>
+    </BasicTable>
+
+    <MessageContentModal @register="registerModal" />
+  </div>
+</template>