refactor: recordDiagStatistics

src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.vue

@@ -14,7 +14,7 @@ import { computed, onMounted, ref, toRefs } from 'vue';
 
 type NvrRecordDiag = {
   gbCode: string;
-  recordName: string;
+  channelName: string;
   recordDuration: RecordItem;
   lostRecordList: RecordItem[];
 };
@@ -36,7 +36,7 @@ const filterLostRecordList = (rawRecordChecks: NdmRecordCheck[]): NvrRecordDiag[
   // 4. 初始化每个通道的诊断数据结构
   let recordDiagList = channelGbCodes.map((gbCode, index) => ({
     gbCode,
-    recordName: groupedRecordChecks[index].at(-1)?.name ?? '',
+    channelName: groupedRecordChecks[index].at(-1)?.name ?? '',
     records: [] as RecordItem[],
     lostRecords: [] as RecordItem[],
   }));
@@ -64,7 +64,7 @@ const filterLostRecordList = (rawRecordChecks: NdmRecordCheck[]): NvrRecordDiag[
   });
   return recordDiagList.map((recordDiag) => ({
     gbCode: recordDiag.gbCode,
-    recordName: recordDiag.recordName,
+    channelName: recordDiag.channelName,
     recordDuration: {
       startTime: recordDiag.records.at(0)?.startTime ?? '',
       endTime: recordDiag.records.at(-1)?.endTime ?? '',
@@ -89,36 +89,34 @@ const recordCheckList = ref<NdmRecordCheck[]>([]);
 const lostRecordList = computed(() => filterLostRecordList(recordCheckList.value));
 
 const recordDiagStatistics = computed(() => {
-  // 总通道数：参与录像诊断的通道总数
-  const totalChannels = lostRecordList.value.length;
+  const channelCount = lostRecordList.value.length;
+  const channelWithLossCount = lostRecordList.value.filter((diag) => diag.lostRecordList.length > 0).length;
+  const lossCount = lostRecordList.value.reduce((count, diag) => count + diag.lostRecordList.length, 0);
 
-  // 有缺失通道数：存在录像缺失的通道数量
-  const channelsWithLoss = lostRecordList.value.filter((item) => item.lostRecordList.length > 0).length;
+  const totalLossDuration = lostRecordList.value.reduce((totalDuration, diag) => {
+    const channelLossDuration = diag.lostRecordList.reduce((duration, loss) => {
+      return duration + dayjs(loss.endTime).diff(dayjs(loss.startTime));
+    }, 0);
+    return totalDuration + channelLossDuration;
+  }, 0);
 
-  // 总缺失次数：所有通道的录像缺失次数总和
-  const totalLossCount = lostRecordList.value.reduce((sum, item) => sum + item.lostRecordList.length, 0);
-
-  // 计算总缺失时长（毫秒）
-  let totalLossDuration = 0;
-  lostRecordList.value.forEach((item) => {
-    item.lostRecordList.forEach((loss) => {
-      // 计算每个缺失时间段的持续时长并累加
-      totalLossDuration += dayjs(loss.endTime).diff(dayjs(loss.startTime));
-    });
-  });
-
-  // 格式化总缺失时长为可读格式
-  // 根据时长大小选择合适的显示单位（小时分钟 或 分钟秒）
-  const formattedTotalDuration =
-    dayjs.duration(totalLossDuration).asHours() >= 1
-      ? `${Math.floor(dayjs.duration(totalLossDuration).asHours())}小时${dayjs.duration(totalLossDuration).minutes()}分钟`
-      : `${dayjs.duration(totalLossDuration).minutes()}分钟${dayjs.duration(totalLossDuration).seconds()}秒`;
+  const formatTotalLossDuration = (duration: number) => {
+    const dayjsDuration = dayjs.duration(duration);
+    const asHours = dayjsDuration.asHours();
+    const h = Math.floor(asHours);
+    const m = dayjsDuration.minutes();
+    const s = dayjsDuration.seconds();
+    if (asHours >= 1) {
+      return `${h}小时${m}分钟${s}秒`;
+    }
+    return `${m}分钟${s}秒`;
+  };
 
   return {
-    totalChannels, // 总通道数
-    channelsWithLoss, // 有缺失通道数
-    totalLossCount, // 总缺失次数
-    formattedTotalDuration, // 格式化的总缺失时长
+    totalChannels: channelCount,
+    channelsWithLoss: channelWithLossCount,
+    totalLossCount: lossCount,
+    totalLossDuration: formatTotalLossDuration(totalLossDuration),
   };
 });
 
@@ -193,7 +191,7 @@ onMounted(() => {
           <NStatistic label="缺失次数" :value="recordDiagStatistics.totalLossCount" />
         </NGridItem>
         <NGridItem>
-          <NStatistic label="缺失时长" :value="recordDiagStatistics.formattedTotalDuration" />
+          <NStatistic label="缺失时长" :value="recordDiagStatistics.totalLossDuration" />
         </NGridItem>
       </NGrid>
 
@@ -206,7 +204,7 @@ onMounted(() => {
                 <NIcon size="16" :color="channel.lostRecordList.length > 0 ? '#f5222d' : '#52c41a'">
                   <VideocamOutline />
                 </NIcon>
-                <NText strong>{{ channel.recordName }}</NText>
+                <NText strong>{{ channel.channelName }}</NText>
                 <NTag :type="channel.lostRecordList.length > 0 ? 'error' : 'success'" size="small">
                   {{ channel.lostRecordList.length > 0 ? `${channel.lostRecordList.length}次缺失` : '正常' }}
                 </NTag>