Просмотр исходного кода

refactor(deviceStatsDrawer): 优化统计表格列配置和数据显示逻辑

移除未使用的滞留统计列配置,简化表格模板结构
将info字段解析为JSON并格式化显示详细信息
处理pose字段为空的情况,避免显示异常
liujia 1 месяц назад
Родитель
Сommit
4f5e9f0

+ 1 - 54
src/views/device/detail/components/deviceStatsDrawer/const.ts

@@ -51,7 +51,7 @@ export const alarmColumns = [
     dataIndex: 'info',
     key: 'info',
     align: 'center',
-    width: 150,
+    // width: 200,
   },
   {
     title: '处理状态',
@@ -68,56 +68,3 @@ export const alarmColumns = [
     width: 150,
   },
 ]
-
-//异常滞留统计列表表头
-export const alarmRetentionColumns = [
-  {
-    title: '告警类型',
-    dataIndex: 'eventType',
-    key: 'eventType',
-    align: 'center',
-    width: 150,
-  },
-  {
-    title: '姿势',
-    dataIndex: 'pose',
-    key: 'pose',
-    align: 'center',
-    width: 150,
-  },
-  {
-    title: '处理状态',
-    dataIndex: 'isHandle',
-    key: 'isHandle',
-    align: 'center',
-    width: 150,
-  },
-]
-
-// 一般滞留统计列表表头
-export const generalRetentionColumns = [
-  {
-    title: '滞留类型',
-    dataIndex: 'type',
-    key: 'type',
-    align: 'center',
-  },
-  {
-    title: '进入时间',
-    dataIndex: 'enterTime',
-    key: 'enterTime',
-    align: 'center',
-  },
-  {
-    title: '离开时间',
-    dataIndex: 'leaveTime',
-    key: 'leaveTime',
-    align: 'center',
-  },
-  {
-    title: '停留时间',
-    dataIndex: 'stayTime',
-    key: 'stayTime',
-    align: 'center',
-  },
-]

+ 21 - 12
src/views/device/detail/components/deviceStatsDrawer/index.vue

@@ -47,26 +47,30 @@
     <div class="tableCard">
       <a-table :columns="columns" :data-source="tableList" :loading="loading" :pagination="false">
         <template #bodyCell="{ column, record }">
-          <!-- 跌倒、异常统计 姿势  -->
           <template v-if="column.key === 'pose'">
             {{ record.poseName }}
           </template>
-          <!-- 跌倒、异常统计 是否处理  -->
           <template v-if="column.key === 'isHandle'">
             <a-tag v-if="record.isHandle === 0" :bordered="false" color="red">未处理</a-tag>
             <a-tag v-if="record.isHandle === 1" :bordered="false" color="green">已处理</a-tag>
           </template>
-          <!-- 异常滞留 告警类型 -->
           <template v-if="column.key === 'eventType'">
             {{ record.eventTypeName }}
           </template>
-          <!-- 一般滞留 滞留类型 -->
-          <template v-if="column.key === 'type'">
-            {{ record.typeName }}
-          </template>
-          <!-- 一般滞留 停留时间 -->
-          <template v-if="column.key === 'stayTime'">
-            {{ formatSeconds(record.stayTime) }}
+          <template v-if="column.key === 'info'">
+            <div v-if="record.info?.start_time">开始时间:{{ record.info?.start_time }}</div>
+            <div v-if="record.info?.end_time">结束时间:{{ record.info?.end_time }}</div>
+            <div v-if="record.info?.stay_time">停留时长:{{ record.info?.stay_time }}(秒)</div>
+            <div v-if="record.info?.count">次数{{ record.info?.count }}</div>
+            <template v-if="record.info?.event_list">
+              事件列表:
+              <div v-for="(event, index) in record.info?.event_list" :key="index">
+                <div>开始时间{{ event.start_time }}</div>
+                <div>结束时间{{ event.end_time }}</div>
+                <div>停留时长{{ event.stay_time }}(秒)</div>
+                <div>消失时长{{ event.absence_time }}(秒)</div>
+              </div>
+            </template>
           </template>
         </template>
       </a-table>
@@ -91,7 +95,6 @@ import * as statsApi from '@/api/stats'
 import type { StatsFallQueryDataRow, StatsAlarmQueryDataRow } from '@/api/stats/types'
 import { useDict, type DictItem } from '@/hooks/useDict'
 import { useDictName } from '@/hooks/useDictName'
-import { formatSeconds } from '@/utils'
 import * as alarmApi from '@/api/alarm'
 
 defineOptions({
@@ -241,7 +244,7 @@ const fetchFallList = async () => {
     const { rows, total } = res.data
     fallList.value = rows as StatsFallQueryDataRow[]
     fallList.value.forEach((item) => {
-      item.poseName = personPoseName(String(item.pose))
+      item.poseName = item.pose !== null ? personPoseName(String(item.pose)) : ''
     })
     tableList.value = fallList.value
     tableTotal.value = Number(total)
@@ -270,6 +273,12 @@ const fetchAlarmList = async () => {
     alarmList.value = rows as StatsAlarmQueryDataRow[]
     alarmList.value.forEach((item) => {
       item.eventTypeName = alarmEventTypeName(item.eventType)
+      try {
+        item.info = item.info && JSON.parse(item.info)
+      } catch (error) {
+        item.info = ''
+        console.log('❌ 解析info失败', error)
+      }
     })
     tableList.value = alarmList.value
     tableTotal.value = Number(total)