feat: export record check

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

@@ -9,6 +9,9 @@ import { destr } from 'destr';
 import { groupBy } from 'es-toolkit';
 import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm, NScrollbar } from 'naive-ui';
 import { computed, onMounted, ref, toRefs } from 'vue';
+import { downloadByData } from '@/utils/download';
+import { DownloadOutlined } from '@vicons/antd';
+import { useStationStore } from '@/stores/station';
 
 type NvrRecordDiag = {
   gbCode: string;
@@ -18,7 +21,7 @@ type NvrRecordDiag = {
 };
 
 // 过滤出丢失的录像时间段
-const filterLostRecordList = (rawRecordChecks: NdmRecordCheck[]): NvrRecordDiag[] => {
+const transformRecordCheck = (rawRecordChecks: NdmRecordCheck[]): NvrRecordDiag[] => {
   // 1. 解析diagInfo
   const recordChecks = rawRecordChecks.map((recordCheck) => {
     return {
@@ -84,14 +87,14 @@ const { stationCode, ndmNvr } = toRefs(props);
 
 const recordCheckList = ref<NdmRecordCheck[]>([]);
 
-const lostRecordList = computed(() => filterLostRecordList(recordCheckList.value));
+const transformedRecordCheck = computed(() => transformRecordCheck(recordCheckList.value));
 
 const recordDiagStatistics = computed(() => {
-  const channelCount = lostRecordList.value.length;
+  const channelCount = transformedRecordCheck.value.length;
-  const channelWithLossCount = lostRecordList.value.filter((diag) => diag.lostRecordList.length > 0).length;
+  const channelWithLossCount = transformedRecordCheck.value.filter((diag) => diag.lostRecordList.length > 0).length;
-  const lossCount = lostRecordList.value.reduce((count, diag) => count + diag.lostRecordList.length, 0);
+  const lossCount = transformedRecordCheck.value.reduce((count, diag) => count + diag.lostRecordList.length, 0);
 
-  const totalLossDuration = lostRecordList.value.reduce((totalDuration, diag) => {
+  const totalLossDuration = transformedRecordCheck.value.reduce((totalDuration, diag) => {
     const channelLossDuration = diag.lostRecordList.reduce((duration, loss) => {
       return duration + dayjs(loss.endTime).diff(dayjs(loss.startTime));
     }, 0);
@@ -148,6 +151,27 @@ const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
 onMounted(() => {
   getRecordCheckByParentId();
 });
+
+const onClickExportRecordCheck = () => {
+  const header = '通道名称,开始时间,结束时间,持续时长\n';
+  const rows = transformedRecordCheck.value
+    .map((channel) => {
+      if (channel.lostRecordList.length === 0) {
+        return `${channel.channelName},,,`;
+      }
+      return channel.lostRecordList
+        .map((loss) => {
+          const duration = formatDuration(loss.startTime, loss.endTime);
+          return `${channel.channelName},${formatTime(loss.startTime)},${formatTime(loss.endTime)},${duration}`;
+        })
+        .join('\n');
+    })
+    .join('\n');
+  const csvContent = header + rows;
+  const stationStore = useStationStore();
+  const stationName = stationStore.stationList.find((station) => station.code === stationCode.value)?.name;
+  downloadByData(csvContent, `${stationName}-录像缺失记录-${dayjs().format('YYYY-MM-DD-HHmmss')}.csv`, 'text/csv');
+};
 </script>
 
 <template>
@@ -175,6 +199,13 @@ onMounted(() => {
           </NIcon>
         </template>
       </NButton>
+      <NButton size="small" quaternary circle @click="onClickExportRecordCheck">
+        <template #icon>
+          <NIcon>
+            <DownloadOutlined />
+          </NIcon>
+        </template>
+      </NButton>
     </template>
     <NFlex vertical :size="16">
       <!-- 统计信息 -->
@@ -210,9 +241,9 @@ onMounted(() => {
       </NGrid>
 
       <!-- 通道录像缺失详情 -->
-      <div v-if="lostRecordList.length > 0">
+      <div v-if="transformedRecordCheck.length > 0">
         <NCollapse accordion>
-          <NCollapseItem v-for="channel in lostRecordList" :key="channel.gbCode" :name="channel.gbCode">
+          <NCollapseItem v-for="channel in transformedRecordCheck" :key="channel.gbCode" :name="channel.gbCode">
             <template #header>
               <NFlex align="center" :size="8">
                 <NIcon size="16" :color="channel.lostRecordList.length > 0 ? '#f5222d' : '#52c41a'">