feat: 消息追踪

package.json

@@ -15,6 +15,7 @@
     "axios": "^1.3.5",
     "babel-plugin-import": "^1.13.6",
     "core-js": "^3.8.3",
+    "dayjs": "^1.11.7",
     "mitt": "^3.0.0",
     "path-browserify": "^1.0.1",
     "pinia": "^2.0.33",

src/api/iot/event.ts

@@ -22,3 +22,31 @@ export const getEventAll = (params: {deviceId: string, lastId?: string, startTim
     params
   })
 }
+
+/**
+ * 该函数为特定设备添加事件跟踪。
+ * @param data - `data` 参数是一个包含 `deviceId` 属性的对象。此对象用作对“/event/trace”端点的 HTTP POST 请求的有效负载。
+ * @returns `addEventTrace` 函数返回一个解析为字符串的 Promise。该字符串是对 `/event/trace` 端点发出的 HTTP POST 请求的响应，其中提供的
+ * `data` 对象作为请求主体。
+ */
+export const addEventTrace = (data: {deviceId: string}) => {
+  return request<string>({
+    url: '/event/trace',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 函数 getEventTrace 发出 GET 请求以检索特定设备的事件跟踪。
+ * @param params - `params` 参数是一个包含单个属性 `deviceId` 的对象，它是一个表示设备 ID 的字符串。此参数用于向“/event/trace”端点发出 GET
+ * 请求，以检索指定设备的事件跟踪。
+ * @returns 一个函数，它使用 deviceId 参数向“/event/trace”端点发出 GET 请求，并返回一个用字符串解析的 Promise。
+ */
+export const getEventTrace = (params: {deviceId: string}) => {
+  return request<IOT.API.EVENT.Event[]>({
+    url: '/event/trace',
+    method: 'GET',
+    params
+  })
+}

src/components/MicroComponents/index.tsx

@@ -0,0 +1,66 @@
+import { defineComponent } from 'vue'
+import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons-vue'
+
+/* 此代码导出一个名为“ReloadIconTsx”的 Vue
+组件，该组件显示一个用于重新加载内容的图标。该组件有两个道具：`loading`（一个布尔值，指示内容当前是否正在加载）和`reload`（单击重新加载图标时调用的函数）。该组件使用 Vue
+中的“defineComponent”函数来定义其行为，并使用“@ant-design/icons-vue”库中的“LoadingOutlined”和“ReloadOutlined”图标来显示适当的图标。该组件还使用
+Ant Design Vue 库中的“a-tooltip”组件在用户将鼠标悬停在图标上时显示工具提示。 */
+
+export const ReloadIconTsx = defineComponent({
+  name: 'reload-icon-tsx',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    reload: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  setup (props, context) {
+    return () => (
+      <a-tooltip
+        title="刷新"
+      >
+         { props.loading ? <LoadingOutlined /> : <ReloadOutlined onClick={() => props.reload()} /> }
+      </a-tooltip>
+    )
+  }
+})
+
+/**
+ * 这是一个 TypeScript React 组件，用于呈现带有可自定义内容和操作插槽的警报。
+ * @param props - 包含两个属性的对象：
+ * @param context - `setup` 函数中的 `context`
+ * 参数是一个对象，它提供对当前组件实例的属性和方法的访问。它包括“attrs”、“emit”、“slots”和“refs”等属性。在此特定代码中，“slots”属性用于访问
+ * @returns 呈现具有两列的行的功能组件。第一列的内容由 valueSlot 槽确定，第二列的内容由 operaSlot
+ * 槽确定。该组件还接受字符串类型的“value”属性和对象类型的“operaSlot”属性。
+ */
+export const AlertTsx = defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  setup (props, context) {
+    const { slots } = context
+
+    return () => (
+      <a-row
+        justify='space-between'
+        align="middle"
+        style={{
+          backgroundColor: '#e6f7ff',
+          border: '1px solid #91d5ff',
+          minHeight: '40px',
+          padding: '0px 20px '
+        }}
+      >
+        <a-col>{ props.value ? props.value : slots.valueSlot!()}</a-col>
+        <a-col>{slots.operaSlot!()}</a-col>
+      </a-row>
+    )
+  }
+})

src/components/TablePro/index.vue

@@ -16,8 +16,6 @@
                     <download-outlined />
                   </template>
                 </a-button>
-                <!-- 小组件 -->
-
                 <a-tooltip>
                   <template #title >刷新</template>
                   <reload-outlined v-if="!state.loading"  @click="reload"/>

src/controller/iot/event.ts

@@ -1,4 +1,5 @@
-import { getEventAll, getEventList } from '@/api/iot/event'
+import { addEventTrace, getEventAll, getEventList, getEventTrace } from '@/api/iot/event'
+import { message } from 'ant-design-vue'
 
 export class EventController {
   static async page (params: any) {
@@ -8,4 +9,24 @@ export class EventController {
   static async list (params: {deviceId: string, lastId?: string, startTime?: string}) {
     return await getEventAll(params)
   }
+
+  /**
+  * 该函数检索指定设备 ID 的事件跟踪数据。
+  * @param params - `params` 参数是一个包含单个属性 `deviceId` 的对象，它是一个表示设备 ID 的字符串。此参数用于检索指定设备的事件跟踪数据。
+  * @returns `listTrace` 函数返回以 `params` 对象作为参数调用 `getEventTrace` 函数结果的 `data` 属性。 `data`
+  * 属性可能是一个数组或对象，其中包含有关指定 `deviceId` 的事件跟踪信息。
+  */
+  static async listTrace (params: {deviceId: string}) {
+    const { data } = await getEventTrace(params)
+    return data
+  }
+
+  /**
+   * 此函数为设备添加事件跟踪并显示成功消息。
+   * @param params - 参数“params”是一个包含单个属性“deviceId”的对象，它是一个字符串。
+   */
+  static async addTrace (params: {deviceId: string}) {
+    await addEventTrace(params)
+    message.success('新增时间跟踪成功')
+  }
 }

src/pages/Iot/device/components/deviceShadow.vue

@@ -5,10 +5,35 @@
 
       当设备离线时，“设备影子”将显示设备最近一次上报的属性值；通过下发“期望值”，“设备影子”将存储对设备属性的预期控制，当设备重新连接时，服务将“期望值”更新至设备
     </div>
+
+    <a-row justify="space-between" style="margin-top: 20px;" >
+      <a-col><a-input-search></a-input-search></a-col>
+      <a-col>
+        <a-space>
+          <a-button type="primary" >属性配置</a-button>
+          <reload-icon-tsx :loading="state.loading" :reload="getDeviceShadow" />
+        </a-space>
+      </a-col>
+    </a-row>
   </a-card>
 </template>
 
 <script lang="ts" setup >
+import { ReloadIconTsx } from '@/components/MicroComponents/index'
+import { onMounted, reactive } from 'vue'
+
+const state = reactive({
+  loading: false
+})
+
+const getDeviceShadow = () => {
+  // state.loading = true
+  console.log('getDeviceShadow')
+}
+
+onMounted(() => {
+  getDeviceShadow()
+})
 
 </script>
 

src/pages/Iot/device/components/msgTrack.vue

@@ -0,0 +1,108 @@
+<template>
+  <a-card >
+    <div class="subtitle" > 消息跟踪可记录设备在运行过程中的各类操作信息，状态和结果。当数据上报、响应命令等业务场景中出现故障时，消息跟踪功能可帮助您快速进行故障定位和原因分析</div>
+
+    <div class="subtitle" >为避免占用读写计算、存储资源，同时保证数据有效，平台限制最长可跟踪3天的数据，且单个用户下，仅支持同时启动10个设备的消息跟踪。</div>
+
+    <AlertTsx style="margin-top: 20px;"  >
+      <template #valueSlot> 执行情况[ 中止 ]
+        启动时间： 2023/04/29 14:01:02 GMT+08:00
+        结束时间： 2023/04/29 14:28:16 GMT+08:00
+      </template>
+      <template #operaSlot>
+        <a-space>
+          <a-button type="link" >停止</a-button>
+          <a-button type="link" >清除数据</a-button>
+        </a-space>
+      </template>
+    </AlertTsx>
+
+    <a-row  style="margin: 20px 0px;" justify="space-between" >
+      <a-col>
+        <a-space>
+
+        </a-space>
+      </a-col>
+      <a-col>
+        <a-space>
+          <a-button type="primary" @click="addEventTrace" >新增事件跟踪</a-button>
+        </a-space>
+      </a-col>
+    </a-row>
+
+    <a-table
+      :columns="columns"
+      :loading="state.loading"
+      :dataSource="state.dataSource"
+    >
+
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup >
+import { AlertTsx } from '@/components/MicroComponents/index'
+import { EventController } from '@/controller'
+import { onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import dayjs from 'dayjs'
+
+const route = useRoute()
+const deviceId = route.query.id as string
+
+const columns = [
+  {
+    title: '业务类型',
+    dataIndex: 'eventType'
+  },
+  {
+    title: '业务步骤',
+    dataIndex: 'setup'
+  },
+  {
+    title: '业务详情',
+    dataIndex: 'detail'
+  },
+  {
+    title: '记录时间',
+    dataIndex: 'date'
+  },
+  {
+    title: '消息状态',
+    dataIndex: 'status'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action'
+  }
+]
+
+const state = reactive({
+  loading: false,
+  dataSource: []
+})
+
+const addEventTrace = () => {
+  EventController.addTrace({ deviceId: deviceId })
+}
+
+const getEventTraceList = async () => {
+  const data = await EventController.listTrace({ deviceId: deviceId }) as unknown as Number
+  console.log(dayjs(data).format('YYYY-MM-DD hh:mm:ss'))
+}
+
+onMounted(() => {
+  getEventTraceList()
+})
+
+</script>
+
+<style lang="less" scoped >
+
+@import '~@/styles/theme.less';
+.subtitle {
+  color: @sublabel-color;
+  font-size: 14px;
+}
+</style>

src/pages/Iot/device/detail.vue

@@ -8,7 +8,9 @@
       />
     </a-tabs>
     <OverView  v-if="state.tabsActive === '1'"/>
-    <CloudView   v-if="state.tabsActive === '2'"/>
+    <CloudView   v-else-if="state.tabsActive === '2'"/>
+    <DeviceShadow v-else-if="state.tabsActive === '3'" />
+    <MsgTrack v-else-if="state.tabsActive === '4'" />
   </a-card>
 </template>
 
@@ -16,7 +18,8 @@
 import { computed, reactive } from 'vue'
 import OverView from './components/overview.vue'
 import CloudView from './components/cloudview.vue'
-
+import DeviceShadow from './components/deviceShadow.vue'
+import MsgTrack from './components/msgTrack.vue'
 const tabs = [
   {
     name: '概述',
@@ -45,7 +48,7 @@ const tabs = [
 ]
 
 const state = reactive({
-  tabsActive: '2'
+  tabsActive: '4'
 })
 
 const domainCom = () => {

src/type/iot.d.ts

@@ -158,7 +158,6 @@ declare namespace IOT {
         eventType: EventTypeEnum
         endTime: string
       }
-
     }
   }
 }

yarn.lock

@@ -2995,6 +2995,11 @@ dayjs@^1.10.5:
   resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
+dayjs@^1.11.7:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"