fix: bug-5/4

src/api/iot/event.ts

@@ -7,7 +7,7 @@ import request from '@/service/request'
  * @returns `getEventList` 函数返回一个解析为 `IOT.API.MODEL.ModelDot` 对象数组的
  * Promise。该数组包含使用指定查询参数向“/event/list”端点发出 GET 请求从服务器获取的事件列表。
  */
-export const getEventList = (params: IOT.API.EVENT.Event) => {
+export const getEventList = (params: IOT.API.EVENT.QueryParams) => {
   return request<IOT.API.MODEL.ModelDot[]>({
     url: '/event/page',
     method: 'GET',

src/controller/iot/event.ts

@@ -2,7 +2,7 @@ import { addEventTrace, getEventAll, getEventList, getEventTrace } from '@/api/i
 import { message } from 'ant-design-vue'
 
 export class EventController {
-  static async page (params: any) {
+  static async page (params: IOT.API.EVENT.QueryParams) {
     return await getEventList(params)
   }
 

src/pages/Iot/devOps/msgTracking.vue

@@ -1,18 +1,58 @@
 <template>
-  <a-card>
-
+  <a-row justify="space-between" >
+    <a-col style="font-size: 20px;" >消息跟踪</a-col>
+    <a-col>
+      <a-space>
+        {{state.device.deviceLabel}}
+        <a-button type="primary" @click="openSelectDrawer">选择设备</a-button>
+      </a-space>
+    </a-col>
+  </a-row>
+  <a-card style="margin-top: 20px" >
+    <a-empty  v-if="state.dataSource.length === 0" >
+      <template #description>
+        <span>消息跟踪可记录设备运行过程中的各类信息，帮助您定位设备故障</span>
+      </template>
+    </a-empty>
     <a-table
+      v-else
       :columns="columns"
       :loading="state.loading"
       :dataSource="state.dataSource"
     >
-
     </a-table>
   </a-card>
+
+  <a-drawer
+    v-model:visible="state.drawerVisible"
+    size="large"
+    class="custom-class"
+    title="选择设备"
+    placement="right"
+  >
+    <SelectDevice ref="selectDeviceRef" />
+    <template #footer >
+        <a-row justify="end" >
+            <a-col>
+                <a-space>
+                    <a-button @click="state.drawerVisible = false">取消</a-button>
+                    <a-button type="primary" @click="handleSelectDevice">确定</a-button>
+                </a-space>
+            </a-col>
+        </a-row>
+    </template>
+  </a-drawer>
   </template>
 <script lang='ts' setup >
 import { EventController } from '@/controller'
-import { onMounted, reactive } from 'vue'
+import { message } from 'ant-design-vue'
+import { onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import SelectDevice from '@/pages/iot/rule/components/selectDevice.vue'
+
+const route = useRoute()
+
+const deviceId = route.query.id as string
 
 const columns = [
   {
@@ -36,20 +76,58 @@ const columns = [
     dataIndex: 'status'
   }
 ]
+
+const selectDeviceRef = ref()
+
+const queryParamsState = reactive({
+  deviceId: deviceId,
+  page: 1,
+  pageSize: 10,
+  eventType: '',
+  success: false,
+  total: 0,
+  startTime: 0,
+  endTime: '',
+  lastId: ''
+})
+
 const state = reactive({
   loading: false,
-  dataSource: []
+  device: {},
+  dataSource: [],
+  drawerVisible: false
 })
 
+const openSelectDrawer = () => {
+  state.drawerVisible = true
+}
+
+const handleSelectDevice = () => {
+  const _device = selectDeviceRef.value.getSelectDevice()
+  if (_device) {
+    state.device = _device
+    console.log(_device)
+    state.drawerVisible = false
+    queryParamsState.deviceId = _device.id
+    queryParamsState.page = 1
+    getMsgTrace()
+  } else {
+    message.warn('请选择产品')
+  }
+}
+
 const getMsgTrace = async () => {
   state.loading = true
-  const { data } = await EventController.list({ deviceId: '1', startTime: 0 })
+  const { data, sum } = await EventController.page(queryParamsState)
   state.loading = false
   state.dataSource = data
+  state.total = sum
 }
 
 onMounted(() => {
-  getMsgTrace()
+  if (deviceId) {
+    getMsgTrace()
+  }
 })
 
 </script>

src/pages/Iot/devOps/onlineTest.vue

@@ -23,10 +23,17 @@
                     <a-col :span="6" class="device-imitate" >真实设备</a-col>
                 </a-row>
                 <a-row style="height: 505px;width: 100%" justify="space-between"   >
-                    <a-col :span="11" style="height: 100%;background-color: #fff" >
-                        <div v-for="(item, index) in state.eventList" :key="index" >{{JSON.stringify(item)}}</div>
+
+                    <a-col :span="11" style="height: 100%;background-color: #fff;position: relative;" >
+                        <a-empty v-if="state.eventList.length == 0" style="position: absolute;top: 50%;left:50%; transform: translate(-50%, -50%);" ></a-empty>
+                        <span v-else >
+                            <div v-for="(item, index) in state.eventList" :key="index" >{{JSON.stringify(item)}}</div>
+                        </span>
+
+                    </a-col>
+                    <a-col :span="11" style='background-color: #fff;eight: 100%' >
+                        <a-empty v-if="state.eventList.length == 0" style="position: absolute;top: 50%;left:50%; transform: translate(-50%, -50%);" ></a-empty>
                     </a-col>
-                    <a-col :span="11" style='background-color: #fff;eight: 100%' ></a-col>
                 </a-row>
             </a-card>
         </a-col>
@@ -160,7 +167,7 @@ const state = reactive<{
   cmdId: '',
   modelCmdList: [],
   eventList: [],
-  startTime: new Date().getTime(),
+  startTime: 0,
   lastId: '',
   device: {
     id: '1',
@@ -198,7 +205,11 @@ const getModelCmdList = async () => {
 
 const getEventList = async () => {
   const { data, sum } = await EventController.list({ deviceId: state.device.id, startTime: state.startTime, lastId: state.lastId })
-  state.eventList.push(data)
+  if (data) {
+    state.eventList.push(data)
+  } else {
+    state.eventList = []
+  }
 }
 
 const { start, stop } = useScheduler(getEventList, 2000)
@@ -221,8 +232,8 @@ const getDeviceById = async () => {
 }
 
 onMounted(() => {
-//   const deviceId = route.query.id as string
-  const deviceId = 1
+  const deviceId = route.query.id as string
+
   if (deviceId) {
     state.device.id = deviceId
     getDeviceById()

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

@@ -10,6 +10,9 @@
           <!-- 执行情况[ 中止 ] -->
           结束时间： {{state.formatStartTime}}
         </div>
+        <div v-else >
+          尚未追踪
+        </div>
 
       </template>
       <template #operaSlot>
@@ -84,7 +87,7 @@ const state = reactive({
   loading: false,
   dataSource: [],
   total: 0,
-  startTime: new Date().getTime(),
+  startTime: 0,
   lastId: '',
   formatStartTime: ''
 })

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

@@ -5,7 +5,9 @@
         <a-space :size="50" >
           <span>{{state.deviceDetail?.deviceLabel}}</span>
           <a-button type="primary" @click="state.visible = true" >修改</a-button>
-          <span>{{state.deviceDetail?.deviceStatus}}</span>
+          <a-tag :color="DeviceContriller.deviceStatusMap.get(state.deviceDetail?.deviceStatus!)?.color " >
+            {{ DeviceContriller.deviceStatusMap.get(state.deviceDetail?.deviceStatus!)?.name  }}
+          </a-tag>
           <a-tag style="scale: 1.2;" >
             <span>所属产品：{{state.deviceDetail?.modelLabel}}</span>
           </a-tag>
@@ -32,13 +34,22 @@
     </a-row>
 
     <a-row :gutter="[8, 8]" >
-      <a-col :lg="8" :md="8" :sm="24"  v-for="(item, index) in state.liveDataSource" :key="item.ts" >
-        <div class="data">
-          <div>{{item.keyLabel}}</div>
-          <div> {{`<${item.key}>`}}</div>
-          <div>{{dayjs(item.ts).format('YYYY/MM/DD HH:MM:ss')}}</div>
-        </div>
+      <a-col :span="24" v-if="state.liveDataSource.length === 0" >
+        <a-empty></a-empty>
       </a-col>
+      <span v-else >
+        <a-col
+        :lg="8" :md="8" :sm="24"
+        v-for="(item, index) in state.liveDataSource"
+        :key="item.ts"
+      >
+          <div class="data">
+            <div>{{item.keyLabel}}</div>
+            <div> {{`<${item.key}:>`}}</div>
+            <div>{{dayjs(item.ts).format('YYYY/MM/DD HH:MM:ss')}}</div>
+          </div>
+        </a-col>
+      </span>
     </a-row>
 
   <modal-pro
@@ -114,6 +125,7 @@ onMounted(async () => {
   justify-content: space-around;
   align-items: center;
   height: 100px;
+
 }
 
 </style>

src/pages/Iot/device/index.vue

@@ -24,9 +24,9 @@
           <a-form-item label="设备名称" >
             <a-input v-model:value="searchState.deviceStatus" />
           </a-form-item>
-          <a-form-item>
-            <a-input-group compact>
-              <a-select v-model:value="searchState.searchKey">
+          <a-form-item style="width: 400px;">
+            <a-input-group compact >
+              <a-select v-model:value="searchState.searchKey" style="width: 150px;" >
                 <a-select-option v-for="item in searchList" :key="item.key" :value="item.key">{{item.name}}</a-select-option>
               </a-select>
               <a-input v-model:value="searchState.searchValue" style="width: 176px" />

src/pages/Iot/model/components/plugins.vue

@@ -95,8 +95,32 @@ const savePlugin = async () => {
 
 const getPlugin = async () => {
   const { data } = await ModelController.getPlugin({ modelId })
-  state.modelPluginBody = data.modelPluginBody
-  state.pluginId = data.id
+  console.log('gePlusins:', data != null)
+
+  state.modelPluginBody = data != null
+    ? data.modelPluginBody
+    : `/**
+        * 设备上报数据到物联网平台时调用此接口进行解码, 将设备的原始数据解码为符合产品模型定义的JSON格式数据。
+        * 该接口名称和入参已经定义好，开发者只需要实现具体接口即可。
+        * @param byte[] payload   设备上报的原始码流
+        * @return string json     符合产品模型定义的JSON格式字符串
+        */
+        function decode(payload) {
+            let jsonObj = {};
+            return JSON.stringify(jsonObj);
+        }
+
+        /**
+         * 物联网平台下发指令时，调用此接口进行编码, 将产品模型定义的JSON格式数据编码为设备的原始码流。
+         * 该接口名称和入参格式已经定义好，开发者只需要实现具体接口即可。
+         * @param string json      符合产品模型定义的JSON格式字符串
+         * @return byte[] payload  编码后的原始码流
+         */
+        function encode(json) {
+            let payload = [];
+            return payload;
+        }`
+  state.pluginId = data != null ? data.id : ''
   createView()
 }
 

src/pages/Iot/model/components/topic.vue

@@ -17,7 +17,6 @@ import { useRoute } from 'vue-router'
 const queryParams = useRoute().query as {id: string}
 
 const columns = [
-
   {
     title: 'topic分类',
     dataIndex: 'cate',
@@ -26,6 +25,10 @@ const columns = [
         return { rowSpan: 2 }
       } else if (index === 2) {
         return { rowSpan: 0 }
+      } else if (index === 3) {
+        return { rowSpan: 2 }
+      } else if (index === 4) {
+        return { rowSpan: 0 }
       }
     }
   },

src/pages/Iot/model/detail.vue

@@ -3,7 +3,11 @@
   <template #title>
     <a-row :gutter="[8, 8]">
       <a-col> <h1>{{state.model?.modelLabel}}</h1> </a-col>
-      <a-col> <span class="subtitle" >ID: {{state.model?.id}}</span> </a-col>
+      <a-col>
+          <span class="subtitle" >ID: {{state.model?.id}}</span>
+          <a-divider type="vertical" style="height: 10px; width: 6px; border-color: #7cb305"  />
+          <span>注册设备数： <a>{{state.deviceCount}}</a> </span>
+        </a-col>
     </a-row>
   </template>
   <a-descriptions
@@ -33,7 +37,7 @@
 </template>
 
 <script lang="ts" setup >
-import { ModelController } from '@/controller'
+import { DeviceContriller, ModelController } from '@/controller'
 import { onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import ModelDefine from './components/modelDefine.vue'
@@ -41,14 +45,18 @@ import OnlineTest from './components/onlineTest.vue'
 import Plugins from './components/plugins.vue'
 import Topic from './components/topic.vue'
 
-const queryParams = useRoute().query as {id: string}
+const route = useRoute()
+
+const modelId = route.query.id as string
 
 const state = reactive<{
   model: IOT.API.MODEL.ModelDot | null,
-  activeKey: number
+  activeKey: number,
+  deviceCount: string
 }>({
   model: null,
-  activeKey: 0
+  activeKey: 0,
+  deviceCount: ''
 })
 
 const tabsdata = [
@@ -70,17 +78,25 @@ const tabsdata = [
   }
 ]
 
+const getDeviceCount = async () => {
+  const data = await DeviceContriller.statistics({ modelId: modelId })
+  state.deviceCount = data.find(item => item.key === 'TOTAL')!.value!
+
+  // state.deviceCount = data
+}
+
 const changeTabs = (record: number) => {
   console.log(record)
   state.activeKey = record
 }
 
-const getModelById = async (id: string) => {
-  state.model = await ModelController.detail(id)
+const getModelById = async () => {
+  state.model = await ModelController.detail(modelId)
 }
 
 onMounted(() => {
-  getModelById(queryParams.id)
+  getModelById()
+  getDeviceCount()
 })
 
 </script>

src/type/iot.d.ts

@@ -179,6 +179,7 @@ declare namespace IOT {
         lastId: string
         startTime: string,
         page: string
+        success?: boolean
         pageSize: string
         eventType: EventTypeEnum
         endTime: string