feat：采集设备-添加运行状态、采集时间字段

src/api/iot/device/index.ts

@@ -8,6 +8,7 @@ export interface DeviceVO {
   deviceType: string // 设备类型
   status: string // 状态
   isConnect?: string | number
+  operatingStatus?: string | number
   readTopic: string // 读主题
   writeTopic: string // 写主题
   gatewayId: number // 网关id
@@ -24,6 +25,7 @@ export interface DeviceVO {
   password: string // 密码
   certificate?: string // 证书
   secretKey?: string // 秘钥
+  collectionTime?: string | number
 }
 
 export interface DeviceConnectParams {

src/views/iot/device/index.vue

@@ -70,22 +70,32 @@ ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-to
       <el-table-column type="selection" width="55" reserve-selection />
       <el-table-column label="设备编号" align="left" prop="deviceCode" />
       <el-table-column label="设备名称" align="left" prop="deviceName" />
+      <el-table-column label="运行状态" align="center" prop="operatingStatus" width="120px">
+        <template #default="scope">
+          <el-tag
+            size="small"
+            :type="getOperatingStatusType(scope.row.operatingStatus)"
+          >
+            {{ getOperatingStatusLabel(scope.row.operatingStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
       <!-- <el-table-column label="设备类型" align="left" prop="deviceType" width="150px"> -->
       <!-- <template #default="scope">
           <dict-tag :type="DICT_TYPE.IOT_DEVICE_TYPE" :value="scope.row.deviceType" />
         </template>
 </el-table-column> -->
-      <el-table-column label="采集协议" align="left" prop="protocol" width="200px">
+      <el-table-column label="采集协议" align="left" prop="protocol" width="120px">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.IOT_PROTOCOL" :value="scope.row.protocol" />
         </template>
       </el-table-column>
-      <el-table-column label="连接状态" align="center" prop="status" width="200px">
+      <el-table-column label="连接状态" align="center" prop="status" width="120px">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.IOT_GATEWAY_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="采集周期(s)" align="center" prop="sampleCycle" width="100px" />
+      <el-table-column label="采集周期(s)" align="center" prop="sampleCycle" width="120px" />
 
       <!-- <el-table-column label="读主题" align="center" prop="readTopic" />
       <el-table-column label="写主题" align="center" prop="writeTopic" />
@@ -107,11 +117,18 @@ ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-to
         :formatter="dateFormatter"
         width="170px"
       /> -->
-      <el-table-column label="是否启用" align="center" prop="isEnable"  width="100px">
+      <el-table-column label="是否启用" align="center" prop="isEnable" width="120px">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
         </template>
       </el-table-column>
+      <el-table-column
+        label="采集时间"
+        align="center"
+        prop="collectionTime"
+        width="180px"
+        :formatter="dateFormatter"
+      />
       <el-table-column label="操作" align="center" fixed="right" width="380px">
         <template #default="scope">
           <el-button link type="primary" @click.stop="handleShowAttribute(scope.row)">点位</el-button>
@@ -454,21 +471,41 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+const getOperatingStatusLabel = (value: string | number | undefined) => {
+  const text = String(value ?? '').trim()
+  if (!text) return '离线'
+  return text
+}
+
+const getOperatingStatusType = (value: string | number | undefined) => {
+  const text = String(value ?? '').trim()
+  if (!text) return 'info'
+  if (text === '运行') return 'success'
+  if (text === '待机中') return 'info'
+  if (text === '故障中') return 'danger'
+  if (text === '报警中') return 'warning'
+  return 'info'
+}
+
 const selectedIds = ref<number[]>([])
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
 }
 
 /** 查询列表 */
-const getList = async () => {
+const getList = async (showLoading = true) => {
+  if (showLoading) {
     loading.value = true
+  }
   try {
     const data = await DeviceApi.getDevicePage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
+    if (showLoading) {
       loading.value = false
     }
+  }
 }
 
 /** 搜索按钮操作 */
@@ -948,9 +985,36 @@ const handleToggleConnect = async (row: DeviceVO) => {
   }
 }
 
-/** 初始化 **/
+let deviceTimer: number | undefined
+
+const startDeviceTimer = () => {
+  if (deviceTimer) return
+  deviceTimer = window.setInterval(() => {
+    getList(false)
+  }, 5000)
+}
+
+const stopDeviceTimer = () => {
+  if (!deviceTimer) return
+  window.clearInterval(deviceTimer)
+  deviceTimer = undefined
+}
+
 onMounted(() => {
   getList()
+  startDeviceTimer()
+})
+
+onActivated(() => {
+  startDeviceTimer()
+})
+
+onDeactivated(() => {
+  stopDeviceTimer()
+})
+
+onBeforeUnmount(() => {
+  stopDeviceTimer()
 })
 
 </script>