feat: 消息追踪

src/api/iot/event.ts

@@ -15,7 +15,7 @@ export const getEventList = (params: IOT.API.EVENT.Event) => {
   })
 }
 
-export const getEventAll = (params: {deviceId: string, lastId?: string, startTime?: string}) => {
+export const getEventAll = (params: {deviceId: string, lastId?: string, startTime?: number}) => {
   return request<IOT.API.EVENT.Event>({
     url: '/event/list',
     method: 'GET',

src/controller/iot/event.ts

@@ -6,7 +6,7 @@ export class EventController {
     return await getEventList(params)
   }
 
-  static async list (params: {deviceId: string, lastId?: string, startTime?: string}) {
+  static async list (params: {deviceId: string, lastId?: string, startTime?: number}) {
     return await getEventAll(params)
   }
 

src/hooks/effect.ts

@@ -1,6 +1,8 @@
 import { Emitter } from '@/enum/emitter'
 import mitt from 'mitt'
 
+import { ref, onUnmounted } from 'vue'
+
 const emitter = mitt()
 
 export const useEmitter = () => {
@@ -14,3 +16,24 @@ export const useEmitter = () => {
     off: _off
   }
 }
+
+export const useScheduler = (callback: () => void, delay: number) => {
+  const timer = ref<any>()
+
+  function start () {
+    timer.value = setInterval(callback, delay)
+  }
+
+  function stop () {
+    clearInterval(timer.value)
+  }
+
+  onUnmounted(() => {
+    stop()
+  })
+
+  return {
+    start,
+    stop
+  }
+}

src/hooks/index.ts

@@ -1,3 +1,3 @@
-export { useEmitter } from './effect'
+export { useEmitter, useScheduler } from './effect'
 
 export { useId } from './state'

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

@@ -5,14 +5,13 @@
     <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 #valueSlot>
+        执行情况[ 中止 ]
+        结束时间： {{state.formatStartTime}}
       </template>
       <template #operaSlot>
         <a-space>
-          <a-button type="link" >停止</a-button>
-          <a-button type="link" >清除数据</a-button>
+          <a-button type="link" @click="clearDataSource">清除数据</a-button>
         </a-space>
       </template>
     </AlertTsx>
@@ -80,20 +79,37 @@ const columns = [
 
 const state = reactive({
   loading: false,
-  dataSource: []
+  dataSource: [],
+  total: 0,
+  startTime: new Date().getTime(),
+  lastId: '',
+  formatStartTime: ''
 })
 
-const addEventTrace = () => {
-  EventController.addTrace({ deviceId: deviceId })
+const clearDataSource = () => {
+  state.dataSource = []
+}
+
+const addEventTrace = async () => {
+  await EventController.addTrace({ deviceId: deviceId })
+  getEventTraceList()
+}
+
+const getEventList = async () => {
+  const { data, sum } = await EventController.list({ deviceId: deviceId, startTime: state.startTime, lastId: state.lastId })
+  state.dataSource = data
+  state.total = 0
 }
 
 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'))
+  state.formatStartTime = dayjs(data).format('YYYY-MM-DD hh:mm:ss')
+  getEventList()
 }
 
 onMounted(() => {
   getEventTraceList()
+  getEventList()
 })
 
 </script>