feat: 云端下发日志查询

src/api/device-manage/device/cloud-command.ts

@@ -0,0 +1,18 @@
+import type { GetCloudCommandLogsParams } from './types'
+import { defHttp } from '@/utils/http/axios'
+
+export function getCloudCommandLogs(params: GetCloudCommandLogsParams) {
+  return defHttp.get({
+    url: '/cloud/logPage',
+    params,
+  })
+}
+
+export function getMessageContent(id: string) {
+  return defHttp.get({
+    url: '/cloud/message',
+    params: {
+      id,
+    },
+  })
+}

src/api/device-manage/device/types.ts

@@ -21,3 +21,7 @@ export interface DevicePropertie {
   value: string
   sort: number
 }
+
+export interface GetCloudCommandLogsParams extends PageParam {
+  messageType?: number
+}

src/views/device-manage/device/components/CloudCommand.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { computed, h, ref } from 'vue'
+import { CloudSyncOutlined } from '@ant-design/icons-vue'
+import { Alert, Segmented } from 'ant-design-vue'
+import MessageModal from './MessageModal.vue'
+import { BasicTable, useTable } from '@/components/Table'
+import { getCloudCommandLogs, getMessageContent } from '@/api/device-manage/device/cloud-command'
+
+const commandTypes = [
+  {
+    label: '命令下发',
+    value: 2,
+    desc: '如果设备所属产品定义了命令功能，则您可以通过应用调用平台接口或者操作 “下发” 按钮下发命令，当前MQTT设备仅支持同步命令下发，NB设备仅支持异步命令下发。',
+  },
+  {
+    label: '属性下发',
+    value: 1,
+    desc: '属性下发依赖产品模型，平台会以异步方式（属性下发后无需等待设备侧回复相应）下发消息给设备，当前仅MQTT设备支持属性下发。',
+  },
+  {
+    label: '消息下发',
+    value: 3,
+    desc: '消息下发不依赖产品模型，平台会以异步方式（消息下发后无需等待设备侧回复相应）下发消息给设备，当前仅MQTT设备支持消息下发。',
+  },
+]
+const currentCommandType = ref(2)
+const currentCommandTypeDesc = computed(() => commandTypes.find(item => item.value === currentCommandType.value)?.desc)
+
+const [register, { reload }] = useTable({
+  api: params => getCloudCommandLogs({ ...params, messageType: currentCommandType.value }),
+  columns: [
+    {
+      title: '追踪 ID',
+      dataIndex: 'traceId',
+    },
+    {
+      title: '内容',
+      width: 200,
+      dataIndex: 'messageId',
+      customRender({ value }) {
+        return value && h(MessageModal, {
+          buttonText: '查看',
+          request: () => getMessageContent(value),
+        })
+      },
+    },
+    {
+      title: '主题',
+      dataIndex: 't',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+    },
+  ],
+  bordered: true,
+  inset: true,
+  canResize: false,
+})
+</script>
+
+<template>
+  <div>
+    <div flex="~ items-center gap-12px" mb="12px">
+      <Segmented v-model:value="currentCommandType" :options="commandTypes" @change="() => reload()" />
+      <a-button type="primary">
+        <CloudSyncOutlined />下发
+      </a-button>
+      <Alert
+        type="info"
+        show-icon
+        class="py-4px text-13px"
+        :message="currentCommandTypeDesc"
+      />
+    </div>
+
+    <BasicTable @register="register" />
+  </div>
+</template>

src/views/device-manage/device/components/MessageModal.vue

@@ -3,15 +3,17 @@ import { h, ref } from 'vue'
 import { Modal } from 'ant-design-vue'
 import { EyeOutlined } from '@ant-design/icons-vue'
 import { useAsyncState } from '@vueuse/core'
-import { getReportExample } from '@/api/device-manage/device'
 import type { DescItem } from '@/components/Description'
 import { Description } from '@/components/Description'
 import { JsonPreview } from '@/components/CodeEditor'
 import { noop } from '@/utils'
 
-const props = defineProps<{ productId: string, deviceSn: string }>()
+const props = defineProps<{
+  buttonText?: string
+  request: (...args: any[]) => Promise<{ topic: string, message: string }>
+}>()
 
-const { state, execute, isLoading } = useAsyncState(() => getReportExample(props.productId, props.deviceSn), undefined, { immediate: false })
+const { state, execute, isLoading } = useAsyncState(props.request, undefined, { immediate: false })
 
 const open = ref(false)
 function handleOpen() {
@@ -29,7 +31,7 @@ const schema: DescItem[] = [
     field: 'topic',
   },
   {
-    label: '上报示例',
+    label: '内容',
     field: 'message',
     render(value) {
       let content = value
@@ -48,7 +50,7 @@ const schema: DescItem[] = [
 <template>
   <a-button size="small" :loading="isLoading" @click="handleOpen">
     <EyeOutlined />
-    查看参数
+    {{ buttonText || '查看参数' }}
   </a-button>
 
   <Modal v-model:open="open" title="上报示例" :footer="null" width="50%">

src/views/device-manage/device/components/composables/useDeviceInfo.ts

@@ -3,9 +3,9 @@ import { Tag } from 'ant-design-vue'
 import { useRoute } from 'vue-router'
 import { useAsyncState } from '@vueuse/core'
 import MqttParamsModal from '../MqttParamsModal.vue'
-import ReportExampleModal from '../ReportExampleModal.vue'
+import MessageModal from '../MessageModal.vue'
 import type { DescItem } from '@/components/Description'
-import { getDeviceDetail } from '@/api/device-manage/device'
+import { getDeviceDetail, getReportExample } from '@/api/device-manage/device'
 import { usePermission } from '@/hooks/web/usePermission'
 
 export function useDeviceInfo() {
@@ -68,9 +68,8 @@ export function useDeviceInfo() {
       field: 'report',
       label: '上报示例',
       show: () => hasPermission('device_report_example'),
-      render: () => h(ReportExampleModal, {
-        productId: data.value!.productId,
-        deviceSn: data.value!.deviceSn,
+      render: () => h(MessageModal, {
+        request: () => getReportExample(data.value!.productId, data.value!.deviceSn),
       }),
     },
     {

src/views/device-manage/device/components/index.ts

@@ -1,2 +1,3 @@
 export { default as DeviceInfo } from './DeviceInfo.vue'
 export { default as TopicList } from './TopicList.vue'
+export { default as CloudCommand } from './CloudCommand.vue'

src/views/device-manage/device/detail.vue

@@ -1,6 +1,6 @@
 <script lang='ts' setup>
 import { Card, Tabs } from 'ant-design-vue'
-import { DeviceInfo, TopicList } from './components'
+import { CloudCommand, DeviceInfo, TopicList } from './components'
 import { usePermission } from '@/hooks/web/usePermission'
 
 defineOptions({ name: 'DeviceDetail' })
@@ -18,8 +18,8 @@ const { hasPermission } = usePermission()
         <Tabs.TabPane v-if="hasPermission('device_topic_view')" key="2" tab="已订阅 Topic">
           <TopicList />
         </Tabs.TabPane>
-        <Tabs.TabPane key="3" tab="云端下发">
-          TODO
+        <Tabs.TabPane v-if="hasPermission('device_cloud_command_view')" key="3" tab="云端下发">
+          <CloudCommand />
         </Tabs.TabPane>
       </Tabs>
     </Card>