feat(statioin-page): action button group

src/apis/domain/biz/station/station.ts

@@ -2,5 +2,5 @@ export interface Station {
   code: string;
   name: string;
   online: boolean;
-  ip?: string;
+  ip: string;
 }

src/apis/request/biz/log/index.ts

@@ -1,5 +1,6 @@
 export * from './ndm-call-log';
 export * from './ndm-device-alarm-log';
 export * from './ndm-icmp-log';
+export * from './ndm-record-check';
 export * from './ndm-snmp-log';
 export * from './ndm-vimp-log';

src/apis/request/biz/log/ndm-record-check.ts

@@ -0,0 +1,59 @@
+import { ndmClient, userClient, type ClientChannel, type NdmNvrResultVO, type NdmRecordCheck } from '@/apis';
+import dayjs from 'dayjs';
+
+export const getChannelListApi = async (ndmNvr: NdmNvrResultVO, options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/getChannelList`;
+  const resp = await client.post<ClientChannel[]>(endpoint, { code: ndmNvr.gbCode, time: '' }, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};
+
+export const getRecordCheckApi = async (ndmNvr: NdmNvrResultVO, lastDays: number, gbCodeList: string[], options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/getRecordCheckByParentId`;
+  const endDateTime = dayjs();
+  const startDateTime = endDateTime.subtract(lastDays, 'day');
+  const start = startDateTime.format('YYYY-MM-DD');
+  const end = endDateTime.format('YYYY-MM-DD');
+  const parentId = ndmNvr.gbCode;
+  const resp = await client.post<NdmRecordCheck[]>(endpoint, { start, end, parentId, gbCodeList }, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};
+
+export const reloadRecordCheckApi = async (channel: ClientChannel, dayOffset: number, options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/reloadRecordCheckByGbId`;
+  const resp = await client.post<boolean>(endpoint, { ...channel, dayOffset }, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};
+
+export const reloadAllRecordCheckApi = async (dayOffset: number, options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/reloadAllRecordCheck`;
+  const resp = await client.post<boolean>(endpoint, dayOffset, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};

src/apis/request/biz/storage/ndm-nvr.ts

@@ -52,59 +52,14 @@ export const probeNvrApi = async (ids: string[], options?: { stationCode?: strin
   }
 };
 
-export const getChannelListApi = async (ndmNvr: NdmNvrResultVO, options?: { stationCode?: string; signal?: AbortSignal }) => {
+export const syncNvrChannelsApi = async (options?: { stationCode?: string; signal?: AbortSignal }) => {
   const { stationCode, signal } = options ?? {};
   const client = stationCode ? ndmClient : userClient;
   const prefix = stationCode ? `/${stationCode}` : '';
-  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/getChannelList`;
+  const endpoint = `${prefix}/api/ndm/ndmNvr/syncNvrChannels`;
-  const resp = await client.post<ClientChannel[]>(endpoint, { code: ndmNvr.gbCode, time: '' }, { signal });
+  const resp = await client.get<void>(endpoint, { signal });
-  const [err, data] = resp;
+  const [err] = resp;
-  if (err || !data) {
+  if (err) {
     throw err;
   }
-  return data;
-};
-
-export const getRecordCheckApi = async (ndmNvr: NdmNvrResultVO, lastDays: number, gbCodeList: string[], options?: { stationCode?: string; signal?: AbortSignal }) => {
-  const { stationCode, signal } = options ?? {};
-  const client = stationCode ? ndmClient : userClient;
-  const prefix = stationCode ? `/${stationCode}` : '';
-  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/getRecordCheckByParentId`;
-  const endDateTime = dayjs();
-  const startDateTime = endDateTime.subtract(lastDays, 'day');
-  const start = startDateTime.format('YYYY-MM-DD');
-  const end = endDateTime.format('YYYY-MM-DD');
-  const parentId = ndmNvr.gbCode;
-  const resp = await client.post<NdmRecordCheck[]>(endpoint, { start, end, parentId, gbCodeList }, { signal });
-  const [err, data] = resp;
-  if (err || !data) {
-    throw err;
-  }
-  return data;
-};
-
-export const reloadRecordCheckApi = async (channel: ClientChannel, dayOffset: number, options?: { stationCode?: string; signal?: AbortSignal }) => {
-  const { stationCode, signal } = options ?? {};
-  const client = stationCode ? ndmClient : userClient;
-  const prefix = stationCode ? `/${stationCode}` : '';
-  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/reloadRecordCheckByGbId`;
-  const resp = await client.post<boolean>(endpoint, { ...channel, dayOffset }, { signal });
-  const [err, data] = resp;
-  if (err || !data) {
-    throw err;
-  }
-  return data;
-};
-
-export const reloadAllRecordCheckApi = async (dayOffset: number, options?: { stationCode?: string; signal?: AbortSignal }) => {
-  const { stationCode, signal } = options ?? {};
-  const client = stationCode ? ndmClient : userClient;
-  const prefix = stationCode ? `/${stationCode}` : '';
-  const endpoint = `${prefix}/api/ndm/ndmRecordCheck/reloadAllRecordCheck`;
-  const resp = await client.post<boolean>(endpoint, dayOffset, { signal });
-  const [err, data] = resp;
-  if (err || !data) {
-    throw err;
-  }
-  return data;
 };

src/apis/request/biz/video/ndm-camera.ts

@@ -49,3 +49,15 @@ export const getCameraSnapApi = async (deviceId: string, options?: { signal?: Ab
   }
   return data;
 };
+
+export const syncCameraApi = async (options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmCamera/syncCamera`;
+  const resp = await client.get<void>(endpoint, { signal });
+  const [err] = resp;
+  if (err) {
+    throw err;
+  }
+};

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

@@ -1,81 +1,15 @@
 <script setup lang="ts">
-import type { NdmNvrResultVO, NdmRecordCheck, RecordInfo, RecordItem, Station } from '@/apis';
+import type { NdmNvrResultVO, NdmRecordCheck, RecordItem, Station } from '@/apis';
 import { getChannelListApi, getRecordCheckApi as getRecordCheckByParentIdApi, reloadAllRecordCheckApi as reloadAllRecordCheckApi, reloadRecordCheckApi as reloadRecordCheckByGbIdApi } from '@/apis';
+import { exportRecordDiagCsv, transformRecordChecks } from '@/helper';
 import { useStationStore } from '@/stores';
-import { downloadByData, formatDuration } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { DownloadOutlined } from '@vicons/antd';
 import { RefreshOutline } from '@vicons/ionicons5';
 import dayjs from 'dayjs';
-import destr from 'destr';
-import { groupBy } from 'es-toolkit';
 import { NButton, NCard, NFlex, NIcon, NPagination, NPopconfirm, NPopover, NRadioButton, NRadioGroup, NTooltip, useThemeVars } from 'naive-ui';
 import { computed, onMounted, ref, toRefs } from 'vue';
 
-type NvrRecordDiag = {
-  gbCode: string;
-  channelName: string;
-  recordDuration: RecordItem;
-  lostChunks: RecordItem[];
-};
-
-// 解析出丢失的录像时间段
-const transformRecordChecks = (rawRecordChecks: NdmRecordCheck[]): NvrRecordDiag[] => {
-  // 解析diagInfo
-  const parsedRecordChecks = rawRecordChecks.map((recordCheck) => ({
-    ...recordCheck,
-    diagInfo: destr<RecordInfo>(recordCheck.diagInfo),
-  }));
-  // 按国标码分组
-  const recordChecksByGbCode = groupBy(parsedRecordChecks, (recordCheck) => recordCheck.gbCode);
-  // 提取分组后的国标码和录像诊断记录
-  const channelGbCodes = Object.keys(recordChecksByGbCode);
-  const recordChecksList = Object.values(recordChecksByGbCode);
-  // 初始化每个通道的录像诊断数据结构
-  const recordDiags = channelGbCodes.map((gbCode, index) => ({
-    gbCode,
-    channelName: recordChecksList.at(index)?.at(-1)?.name ?? '',
-    records: [] as RecordItem[],
-    lostChunks: [] as RecordItem[],
-  }));
-  // 写入同一gbCode的录像片段
-  recordChecksList.forEach((recordChecks, index) => {
-    recordChecks.forEach((recordCheck) => {
-      recordDiags.at(index)?.records.push(...recordCheck.diagInfo.recordList);
-    });
-  });
-  // 过滤掉没有录像记录的通道
-  const filteredRecordDiags = recordDiags.filter((recordDiag) => recordDiag.records.length > 0);
-  // 计算每个通道丢失的录像时间片段
-  filteredRecordDiags.forEach((recordDiag) => {
-    recordDiag.records.forEach((record, index, records) => {
-      if (!!records.at(index + 1)) {
-        // 如果下一段录像的开始时间不等于当前录像的结束时间，则判定为丢失
-        const nextStartTime = records[index + 1].startTime;
-        const currEndTime = record.endTime;
-        if (nextStartTime !== currEndTime) {
-          recordDiag.lostChunks.push({
-            startTime: currEndTime,
-            endTime: nextStartTime,
-          });
-        }
-      }
-    });
-  });
-  return recordDiags.map((recordDiag) => {
-    const firstRecord = recordDiag.records.at(0);
-    const startTime = firstRecord ? dayjs(firstRecord.startTime).format('YYYY-MM-DD HH:mm:ss') : '';
-    const lastRecord = recordDiag.records.at(-1);
-    const endTime = lastRecord ? dayjs(lastRecord.endTime).format('YYYY-MM-DD HH:mm:ss') : '';
-    return {
-      gbCode: recordDiag.gbCode,
-      channelName: recordDiag.channelName,
-      recordDuration: { startTime, endTime },
-      lostChunks: recordDiag.lostChunks,
-    };
-  });
-};
-
 const props = defineProps<{
   stationCode: Station['code'];
   ndmNvr: NdmNvrResultVO;
@@ -128,27 +62,9 @@ const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
 });
 
 const onExportRecordCheck = () => {
-  const header = '通道名称,开始时间,结束时间,持续时长\n';
-  const rows = recordDiags.value
-    .map((channel) => {
-      if (channel.lostChunks.length === 0) {
-        return `${channel.channelName},,,`;
-      }
-      return channel.lostChunks
-        .map((loss) => {
-          const duration = formatDuration(loss.startTime, loss.endTime);
-          const startTime = dayjs(loss.startTime).format('YYYY-MM-DD HH:mm:ss');
-          const endTime = dayjs(loss.endTime).format('YYYY-MM-DD HH:mm:ss');
-          return `${channel.channelName},${startTime},${endTime},${duration}`;
-        })
-        .join('\n');
-    })
-    .join('\n');
-  const csvContent = header + rows;
   const stationStore = useStationStore();
-  const stationName = stationStore.stationList.find((station) => station.code === stationCode.value)?.name;
+  const stationName = stationStore.stationList.find((station) => station.code === stationCode.value)?.name ?? '';
-  const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+  exportRecordDiagCsv(recordDiags.value, stationName);
-  downloadByData(csvContent, `${stationName}_录像缺失记录_${time}.csv`, 'text/csv;charset=utf-8', '\ufeff');
 };
 
 const page = ref(1);

src/components/device-page/device-card/current-diag-card/switch-port-card.vue

@@ -16,7 +16,7 @@
  */
 
 import type { NdmSwitchPortInfo } from '@/apis';
-import { getPortStatusVal, transformPortSpeed } from '@/components';
+import { getPortStatusVal, transformPortSpeed } from '@/helper';
 import { NCard, NGrid, NGridItem, NPopover } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 

src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { pageDeviceAlarmLogApi, type NdmDeviceAlarmLogResultVO, type NdmDeviceResultVO, type PageParams } from '@/apis';
-import { renderAlarmDateCell, renderAlarmTypeCell, renderFaultDescriptionCell, renderFaultLevelCell } from '@/components';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderFaultDescriptionCell, renderFaultLevelCell } from '@/helper';
 import { useMutation } from '@tanstack/vue-query';
 import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
 import { h } from 'vue';

src/components/device-page/device-card/history-diag-card/nvr-history-diag-card.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { NdmNvrResultVO } from '@/apis';
-import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard, DeviceUsageHistoryDiagCard, isNvrCluster, NvrDiskHealthHistoryDiagCard } from '@/components';
+import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard, DeviceUsageHistoryDiagCard, NvrDiskHealthHistoryDiagCard } from '@/components';
+import { isNvrCluster } from '@/helper';
 import dayjs from 'dayjs';
 import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
 import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';

src/components/device-page/device-card/history-diag-card/switch-port-history-diag-card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { pageSnmpLogApi, type NdmSwitchDiagInfo, type NdmSwitchPortInfo, type NdmSwitchResultVO, type PageParams } from '@/apis';
-import { getPortStatusVal, transformPortSpeed } from '@/components';
+import { getPortStatusVal, transformPortSpeed } from '@/helper';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import destr from 'destr';

src/components/device-page/device-card/nvr-card.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { NdmNvrDiagInfo, NdmNvrResultVO } from '@/apis';
-import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, isNvrCluster, NvrDiskCard, NvrHistoryDiagCard, NvrRecordDiagCard } from '@/components';
+import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, NvrDiskCard, NvrHistoryDiagCard, NvrRecordDiagCard } from '@/components';
+import { isNvrCluster } from '@/helper';
 import { useSettingStore } from '@/stores';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';

src/components/device-page/device-tree.vue

@@ -10,7 +10,7 @@ const deviceTabPanes = Object.keys(DeviceType).map((key) => {
 
 <script setup lang="ts">
 import type { LineDevices, NdmDeviceResultVO, NdmNvrResultVO, Station } from '@/apis';
-import { isNvrCluster } from '@/components';
+import { isNvrCluster } from '@/helper';
 import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums';
 import { destr } from 'destr';
 import {

src/components/index.ts

@@ -1,4 +1,3 @@
 export * from './device-page';
 export * from './global';
-export * from './helper';
 export * from './station-page';

src/components/station-page/device-alarm-detail-modal.vue

@@ -10,12 +10,12 @@ import {
   type StationAlarmCounts,
 } from '@/apis';
 import { AlarmType, DeviceType, DeviceTypeCode, DeviceTypeName, FaultLevel, type DeviceTypeVal } from '@/enums';
+import { renderAlarmDateCell, renderDeviceTypeCell, renderAlarmTypeCell, renderFaultLevelCell } from '@/helper';
 import { downloadByData } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
 import { computed, h, reactive, ref, toRefs } from 'vue';
-import { renderAlarmDateCell, renderDeviceTypeCell, renderAlarmTypeCell, renderFaultLevelCell } from '../helper';
 
 interface Props {
   station?: Station;

src/components/station-page/device-export-modal.vue

@@ -11,6 +11,10 @@ import { computed, ref } from 'vue';
 
 const show = defineModel<boolean>('show', { default: false });
 
+const emit = defineEmits<{
+  'after-leave': [];
+}>();
+
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 const deviceStore = useDeviceStore();
@@ -18,6 +22,11 @@ const { lineDevices } = storeToRefs(deviceStore);
 
 const status = ref('');
 
+const onAfterLeave = () => {
+  status.value = '';
+  emit('after-leave');
+};
+
 const { mutate: exportIcmp, isPending: loading } = useMutation({
   mutationFn: async (params: { status: string }) => {
     const data = await exportIcmpApi(params.status);
@@ -70,16 +79,8 @@ const deviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" title="导出设备列表" @after-leave="() => (status = '')" style="width: 1000px">
+  <NModal v-model:show="show" preset="card" title="导出设备列表" @after-leave="onAfterLeave" style="width: 800px; height: 300px">
     <template #default>
-      <NFlex justify="flex-end" align="center">
-        <NRadioGroup v-model:value="status">
-          <NRadio value="">全部</NRadio>
-          <NRadio value="10">在线</NRadio>
-          <NRadio value="20">离线</NRadio>
-        </NRadioGroup>
-        <NButton secondary :loading="loading" @click="() => exportIcmp({ status })">导出</NButton>
-      </NFlex>
       <NGrid :cols="3" :x-gap="24" :y-gap="8">
         <NGridItem>
           <NStatistic label="全部设备" :value="deviceCount" />
@@ -92,6 +93,16 @@ const deviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.
         </NGridItem>
       </NGrid>
     </template>
+    <template #action>
+      <NFlex justify="flex-end" align="center">
+        <NRadioGroup v-model:value="status">
+          <NRadio value="">全部</NRadio>
+          <NRadio value="10">在线</NRadio>
+          <NRadio value="20">离线</NRadio>
+        </NRadioGroup>
+        <NButton secondary :loading="loading" @click="() => exportIcmp({ status })">导出</NButton>
+      </NFlex>
+    </template>
   </NModal>
 </template>
 

src/components/station-page/index.ts

@@ -2,4 +2,5 @@ export { default as DeviceAlarmDetailModal } from './device-alarm-detail-modal.v
 export { default as DeviceExportModal } from './device-export-modal.vue';
 export { default as DeviceParamsConfigModal } from './device-params-config-modal.vue';
 export { default as OfflineDeviceDetailModal } from './offline-device-detail-modal.vue';
+export { default as RecordCheckExportModal } from './record-check-export-modal.vue';
 export { default as StationCard } from './station-card.vue';

src/components/station-page/record-check-export-modal.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { getRecordCheckApi, type NdmNvrResultVO, type Station } from '@/apis';
+import { exportRecordDiagCsv, isNvrCluster, transformRecordChecks } from '@/helper';
+import { useDeviceStore } from '@/stores';
+import { useMutation } from '@tanstack/vue-query';
+import { NButton, NGrid, NGridItem, NModal, NScrollbar, NSpin } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, toRefs } from 'vue';
+
+const props = defineProps<{
+  stations: Station[];
+}>();
+
+const emit = defineEmits<{
+  'after-leave': [];
+}>();
+
+const show = defineModel<boolean>('show', { default: false });
+
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
+
+const { stations } = toRefs(props);
+
+const nvrClusterRecord = computed(() => {
+  const clusterMap: Record<Station['code'], { stationName: Station['name']; clusters: NdmNvrResultVO[] }> = {};
+  stations.value.forEach((station) => {
+    clusterMap[station.code] = {
+      stationName: station.name,
+      clusters: [],
+    };
+    const stationDevices = lineDevices.value[station.code];
+    const nvrs = stationDevices?.['ndmNvr'] ?? [];
+    nvrs.forEach((nvr) => {
+      if (isNvrCluster(nvr)) {
+        clusterMap[station.code].clusters.push(nvr);
+      }
+    });
+  });
+  return clusterMap;
+});
+
+const { mutate: exportRecordDiags, isPending: exporting } = useMutation({
+  mutationFn: async (params: { clusters: NdmNvrResultVO[]; stationCode: Station['code'] }) => {
+    const { clusters, stationCode } = params;
+    if (clusters.length === 0) {
+      const stationName = nvrClusterRecord.value[stationCode].stationName;
+      window.$message.info(`${stationName} 没有录像诊断数据`);
+      return;
+    }
+    const checks = await getRecordCheckApi(clusters[0], 90, [], { stationCode: stationCode });
+    return checks;
+  },
+  onSuccess: (checks, { stationCode }) => {
+    if (!checks || checks.length === 0) return;
+    const recordDiags = transformRecordChecks(checks);
+    exportRecordDiagCsv(recordDiags, nvrClusterRecord.value[stationCode].stationName);
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
+const onAfterLeave = () => {
+  emit('after-leave');
+};
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" title="导出录像诊断" @after-leave="onAfterLeave" style="width: 800px">
+    <template #default>
+      <NScrollbar style="height: 300px">
+        <NSpin size="small" :show="exporting">
+          <NGrid :cols="6">
+            <template v-for="({ stationName, clusters }, code) in nvrClusterRecord" :key="code">
+              <NGridItem>
+                <NButton text type="info" style="height: 30px" @click="() => exportRecordDiags({ clusters, stationCode: code })">{{ stationName }}</NButton>
+              </NGridItem>
+            </template>
+          </NGrid>
+        </NSpin>
+      </NScrollbar>
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>

src/components/station-page/station-card.vue

@@ -3,15 +3,18 @@ import type { Station, StationAlarmCounts, StationDevices } from '@/apis';
 import { DeviceType } from '@/enums';
 import { MoreOutlined, EllipsisOutlined } from '@vicons/antd';
 import axios from 'axios';
-import { NCard, NTag, NButton, NIcon, useThemeVars, NFlex, NText, NTooltip, NDropdown, type DropdownOption } from 'naive-ui';
+import { NCard, NTag, NButton, NIcon, useThemeVars, NFlex, NTooltip, NDropdown, type DropdownOption, NCheckbox } from 'naive-ui';
 import { toRefs, computed } from 'vue';
 
 const props = defineProps<{
   station: Station;
   stationDevices?: StationDevices;
   stationAlarmCounts?: StationAlarmCounts;
+  selectable?: boolean;
 }>();
 
+const selected = defineModel<boolean>('selected', { default: false });
+
 const emit = defineEmits<{
   'open-offline-device-detail-modal': [station: Station];
   'open-device-alarm-detail-modal': [station: Station];
@@ -125,7 +128,8 @@ const theme = useThemeVars();
       </template>
     </template>
     <template #header-extra>
-      <NFlex :size="4">
+      <NFlex :size="4" align="center">
+        <NCheckbox v-if="selectable" v-model:checked="selected" :disabled="!station.online" />
         <NTag :type="station.online ? 'success' : 'error'" size="small">
           {{ station.online ? '在线' : '离线' }}
         </NTag>
@@ -149,7 +153,7 @@ const theme = useThemeVars();
           <NFlex justify="end" align="center">
             <span>
               <span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">在线 {{ onlineDeviceCount }} 台</span>
-              <NText depth="3"> · </NText>
+              <span> · </span>
               <span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">离线 {{ offlineDeviceCount }} 台</span>
             </span>
             <NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">

src/composables/query/use-station-list-query.ts

@@ -17,7 +17,7 @@ export function useLineStationsQuery() {
     queryKey: computed(() => [LINE_STATIONS_QUERY_KEY]),
     enabled: computed(() => pollingEnabled.value),
     refetchInterval: getAppEnvConfig().requestInterval * 1000,
-    staleTime: getAppEnvConfig().requestInterval * 1000,
+    staleTime: getAppEnvConfig().requestInterval * 500,
     queryFn: async ({ signal }) => {
       console.time('useStationListQuery');
       await getStationList({ signal });
@@ -45,6 +45,7 @@ function useLineStationsMutation() {
         code: station.code ?? '',
         name: station.name ?? '',
         online: false,
+        ip: '',
       }));
       if (stationVerifyMode.value === 'concurrent') {
         // 方案一：并发ping所有station
@@ -60,7 +61,7 @@ function useLineStationsMutation() {
           return {
             ...station,
             online: !!verifyList.find((stn) => stn.stationCode === station.code)?.onlineState,
-            ip: verifyList.find((stn) => stn.stationCode === station.code)?.ipAddress,
+            ip: verifyList.find((stn) => stn.stationCode === station.code)?.ipAddress ?? '',
           };
         });
       }

src/helper/export-record-diag-csv.ts

@@ -0,0 +1,26 @@
+import type { Station } from '@/apis';
+import type { NvrRecordDiag } from './record-check';
+import { downloadByData, formatDuration } from '@/utils';
+import dayjs from 'dayjs';
+
+export const exportRecordDiagCsv = (recordDiags: NvrRecordDiag[], stationName: Station['name']) => {
+  const header = '通道名称,开始时间,结束时间,持续时长\n';
+  const rows = recordDiags
+    .map((channel) => {
+      if (channel.lostChunks.length === 0) {
+        return `${channel.channelName},,,`;
+      }
+      return channel.lostChunks
+        .map((loss) => {
+          const duration = formatDuration(loss.startTime, loss.endTime);
+          const startTime = dayjs(loss.startTime).format('YYYY-MM-DD HH:mm:ss');
+          const endTime = dayjs(loss.endTime).format('YYYY-MM-DD HH:mm:ss');
+          return `${channel.channelName},${startTime},${endTime},${duration}`;
+        })
+        .join('\n');
+    })
+    .join('\n');
+  const csvContent = header + rows;
+  const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+  downloadByData(csvContent, `${stationName}_录像缺失记录_${time}.csv`, 'text/csv;charset=utf-8', '\ufeff');
+};

src/helper/index.ts

@@ -1,3 +1,5 @@
 export * from './device-alarm';
+export * from './export-record-diag-csv';
 export * from './nvr-cluster';
+export * from './record-check';
 export * from './switch-port';

src/helper/record-check.ts

@@ -0,0 +1,68 @@
+import type { NdmRecordCheck, RecordInfo, RecordItem } from '@/apis';
+import dayjs from 'dayjs';
+import { destr } from 'destr';
+import { groupBy } from 'es-toolkit';
+
+export type NvrRecordDiag = {
+  gbCode: string;
+  channelName: string;
+  recordDuration: RecordItem;
+  lostChunks: RecordItem[];
+};
+
+// 解析出丢失的录像时间段
+export const transformRecordChecks = (rawRecordChecks: NdmRecordCheck[]): NvrRecordDiag[] => {
+  // 解析diagInfo
+  const parsedRecordChecks = rawRecordChecks.map((recordCheck) => ({
+    ...recordCheck,
+    diagInfo: destr<RecordInfo>(recordCheck.diagInfo),
+  }));
+  // 按国标码分组
+  const recordChecksByGbCode = groupBy(parsedRecordChecks, (recordCheck) => recordCheck.gbCode);
+  // 提取分组后的国标码和录像诊断记录
+  const channelGbCodes = Object.keys(recordChecksByGbCode);
+  const recordChecksList = Object.values(recordChecksByGbCode);
+  // 初始化每个通道的录像诊断数据结构
+  const recordDiags = channelGbCodes.map((gbCode, index) => ({
+    gbCode,
+    channelName: recordChecksList.at(index)?.at(-1)?.name ?? '',
+    records: [] as RecordItem[],
+    lostChunks: [] as RecordItem[],
+  }));
+  // 写入同一gbCode的录像片段
+  recordChecksList.forEach((recordChecks, index) => {
+    recordChecks.forEach((recordCheck) => {
+      recordDiags.at(index)?.records.push(...recordCheck.diagInfo.recordList);
+    });
+  });
+  // 过滤掉没有录像记录的通道
+  const filteredRecordDiags = recordDiags.filter((recordDiag) => recordDiag.records.length > 0);
+  // 计算每个通道丢失的录像时间片段
+  filteredRecordDiags.forEach((recordDiag) => {
+    recordDiag.records.forEach((record, index, records) => {
+      if (!!records.at(index + 1)) {
+        // 如果下一段录像的开始时间不等于当前录像的结束时间，则判定为丢失
+        const nextStartTime = records[index + 1].startTime;
+        const currEndTime = record.endTime;
+        if (nextStartTime !== currEndTime) {
+          recordDiag.lostChunks.push({
+            startTime: currEndTime,
+            endTime: nextStartTime,
+          });
+        }
+      }
+    });
+  });
+  return recordDiags.map((recordDiag) => {
+    const firstRecord = recordDiag.records.at(0);
+    const startTime = firstRecord ? dayjs(firstRecord.startTime).format('YYYY-MM-DD HH:mm:ss') : '';
+    const lastRecord = recordDiag.records.at(-1);
+    const endTime = lastRecord ? dayjs(lastRecord.endTime).format('YYYY-MM-DD HH:mm:ss') : '';
+    return {
+      gbCode: recordDiag.gbCode,
+      channelName: recordDiag.channelName,
+      recordDuration: { startTime, endTime },
+      lostChunks: recordDiag.lostChunks,
+    };
+  });
+};

src/pages/alarm-page.vue

@@ -9,7 +9,7 @@ import {
   removeCameraIgnoreApi,
   type NdmDeviceAlarmLogResultVO,
 } from '@/apis';
-import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/helper';
 import { AlarmType, DeviceType, DeviceTypeCode, DeviceTypeName, FaultLevel, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
 import { useAlarmStore, useStationStore } from '@/stores';
 import { downloadByData } from '@/utils';

src/pages/station-page.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { Station } from '@/apis';
+import { syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
-import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
+import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, RecordCheckExportModal, StationCard } from '@/components';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
-import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
+import { useAlarmStore, useDeviceStore, usePollingStore, useSettingStore, useStationStore } from '@/stores';
-import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton } from 'naive-ui';
+import { useMutation } from '@tanstack/vue-query';
+import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton, NCheckbox } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
@@ -13,11 +14,12 @@ const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);
 const alarmStore = useAlarmStore();
 const { lineAlarmCounts } = storeToRefs(alarmStore);
+const settingStore = useSettingStore();
+const { stationGridColumns } = storeToRefs(settingStore);
+const pollingStore = usePollingStore();
 
 const { error: lineDevicesQueryError } = useLineDevicesQuery();
 const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
-const settingStore = useSettingStore();
-const { stationGridColumns } = storeToRefs(settingStore);
 
 watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
   if (newLineDevicesQueryError) {
@@ -28,51 +30,157 @@ watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError,
   }
 });
 
+// 操作栏
+// 当点击操作栏中的一个按钮时，其他按钮会被禁用
+type Action = 'export-icmp' | 'export-record' | 'sync-camera' | 'sync-nvr' | null;
+const selectedAction = ref<Action>(null);
+const showOperation = ref(false);
 const stationSelectable = ref(false);
-const selectedStations = ref<Record<Station['code'], boolean>>({});
+const stationSelection = ref<Record<Station['code'], boolean>>({});
-const showActionConfirm = ref(false);
+// TODO: 后期导出设备也会支持选择车站，而不是目前的Modal交互
-const showDeviceExportModal = ref(false);
+const showIcmpExportModal = ref(false);
-const openDeviceExportModal = () => {
+const showRecordCheckExportModal = ref(false);
-  showDeviceExportModal.value = true;
+const onToggleSelectAll = (checked: boolean) => {
+  if (!checked) {
+    stationSelection.value = {};
+  } else {
+    stationSelection.value = Object.fromEntries(stationList.value.map((station) => [station.code, true]));
+  }
 };
+const onAction = (action: Action) => {
+  selectedAction.value = action;
+  if (action === 'export-icmp') {
+    showIcmpExportModal.value = true;
+  } else if (action === 'export-record') {
+    showOperation.value = true;
+    stationSelectable.value = true;
+  } else if (action === 'sync-camera') {
+    showOperation.value = true;
+    stationSelectable.value = true;
+  } else if (action === 'sync-nvr') {
+    showOperation.value = true;
+    stationSelectable.value = true;
+  } else {
+    return;
+  }
+};
+const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
+  mutationFn: async () => {
+    const stationCodes = Object.entries(stationSelection.value)
+      .filter(([, selected]) => selected)
+      .map(([code]) => code);
+    for (const stationCode of stationCodes) {
+      await syncCameraApi({ stationCode });
+    }
+  },
+  onSuccess: () => {
+    window.$message.success('摄像机同步成功');
+    pollingStore.disablePolling();
+    pollingStore.enablePolling();
+    onFinish();
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+    onCancel();
+  },
+});
+const { mutate: syncNvrChannels, isPending: nvrChannelsSyncing } = useMutation({
+  mutationFn: async () => {
+    const stationCodes = Object.entries(stationSelection.value)
+      .filter(([, selected]) => selected)
+      .map(([code]) => code);
+    for (const stationCode of stationCodes) {
+      await syncNvrChannelsApi({ stationCode });
+    }
+  },
+  onSuccess: () => {
+    window.$message.info('正在同步录像机通道，可能需要一些时间');
+    onFinish();
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+    onCancel();
+  },
+});
+const confirming = computed(() => cameraSyncing.value || nvrChannelsSyncing.value);
+const onConfirm = async () => {
+  if (selectedAction.value === 'export-icmp') {
+  } else if (selectedAction.value === 'export-record') {
+    if (!Object.values(stationSelection.value).some((selected) => selected)) {
+      window.$message.warning('请选择要导出录像诊断的车站');
+      return;
+    }
+    showRecordCheckExportModal.value = true;
+  } else if (selectedAction.value === 'sync-camera') {
+    if (!Object.values(stationSelection.value).some((selected) => selected)) {
+      window.$message.warning('请选择要同步摄像机的车站');
+      return;
+    }
+    syncCamera();
+  } else if (selectedAction.value === 'sync-nvr') {
+    if (!Object.values(stationSelection.value).some((selected) => selected)) {
+      window.$message.warning('请选择要同步录像机通道的车站');
+      return;
+    }
+    syncNvrChannels();
+  } else {
+    return;
+  }
+};
+const onCancel = () => {
+  selectedAction.value = null;
+  showOperation.value = false;
+  stationSelectable.value = false;
+  stationSelection.value = {};
+};
+const onFinish = onCancel;
 
+// 车站卡片的事件
 const selectedStation = ref<Station>();
-const offlineDeviceTreeModalShow = ref(false);
+const showOfflineDeviceDetailModal = ref(false);
-const deviceAlarmTreeModalShow = ref(false);
+const showDeviceAlarmDetailModal = ref(false);
-const deviceParamsConfigModalShow = ref(false);
+const showDeviceParamsConfigModal = ref(false);
 const openOfflineDeviceDetailModal = (station: Station) => {
   selectedStation.value = station;
-  offlineDeviceTreeModalShow.value = true;
+  showOfflineDeviceDetailModal.value = true;
 };
 const openDeviceAlarmDetailModal = (station: Station) => {
   selectedStation.value = station;
-  deviceAlarmTreeModalShow.value = true;
+  showDeviceAlarmDetailModal.value = true;
 };
 const openDeviceParamsConfigModal = (station: Station) => {
   selectedStation.value = station;
-  deviceParamsConfigModalShow.value = true;
+  showDeviceParamsConfigModal.value = true;
 };
 </script>
 
 <template>
   <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
-    <NFlex justify="space-between" align="center" style="padding: 8px 8px 0 8px">
+    <!-- 工具栏 -->
+    <NFlex align="center" style="padding: 8px 8px 0 8px">
       <NButtonGroup>
-        <NButton secondary :focusable="false" @click="openDeviceExportModal">导出设备状态</NButton>
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-icmp'" @click="() => onAction('export-icmp')">导出设备状态</NButton>
-        <NButton v-if="false">导出录像诊断</NButton>
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-record'" @click="() => onAction('export-record')">导出录像诊断</NButton>
-        <NButton v-if="false">同步摄像机</NButton>
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-camera'" @click="() => onAction('sync-camera')">同步摄像机</NButton>
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-nvr'" @click="() => onAction('sync-nvr')">同步录像机通道</NButton>
       </NButtonGroup>
-      <NFlex v-if="showActionConfirm" size="small">
+      <template v-if="showOperation">
-        <NButton quaternary size="small" type="primary" :focusable="false">确定</NButton>
+        <NCheckbox label="全选" @update:checked="onToggleSelectAll" />
-        <NButton quaternary size="small" type="tertiary" :focusable="false">取消</NButton>
+        <NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onConfirm">确定</NButton>
-      </NFlex>
+        <NButton tertiary size="small" type="tertiary" :focusable="false" @click="onCancel">取消</NButton>
+      </template>
     </NFlex>
+    <!-- 车站 -->
     <NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
       <NGi v-for="station in stationList" :key="station.code">
         <StationCard
           :station="station"
           :station-devices="lineDevices[station.code]"
           :station-alarm-counts="lineAlarmCounts[station.code]"
+          :selectable="stationSelectable"
+          v-model:selected="stationSelection[station.code]"
           @open-offline-device-detail-modal="openOfflineDeviceDetailModal"
           @open-device-alarm-detail-modal="openDeviceAlarmDetailModal"
           @open-device-params-config-modal="openDeviceParamsConfigModal"
@@ -82,13 +190,15 @@ const openDeviceParamsConfigModal = (station: Station) => {
   </NScrollbar>
 
   <!-- 离线设备详情对话框 -->
-  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
+  <OfflineDeviceDetailModal v-model:show="showOfflineDeviceDetailModal" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
   <!-- 设备告警详情对话框 -->
-  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
+  <DeviceAlarmDetailModal v-model:show="showDeviceAlarmDetailModal" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
   <!-- 设备配置面板对话框 -->
-  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
+  <DeviceParamsConfigModal v-model:show="showDeviceParamsConfigModal" :station="selectedStation" />
   <!-- 设备状态导出对话框 -->
-  <DeviceExportModal v-model:show="showDeviceExportModal" />
+  <DeviceExportModal v-model:show="showIcmpExportModal" @after-leave="onFinish" />
+  <!-- 录像诊断导出对话框 -->
+  <RecordCheckExportModal v-model:show="showRecordCheckExportModal" :stations="stationList.filter((station) => stationSelection[station.code])" @after-leave="onFinish" />
 </template>
 
 <style scoped lang="scss"></style>

src/stores/polling.ts

@@ -1,3 +1,5 @@
+import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_QUERY_KEY } from '@/constants';
+import { useQueryClient } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
@@ -5,9 +7,19 @@ import { ref } from 'vue';
 export const usePollingStore = defineStore(
   'ndm-polling-store',
   () => {
+    const queryClient = useQueryClient();
+
     const pollingEnabled = ref(true);
     const enablePolling = () => (pollingEnabled.value = true);
-    const disablePolling = () => (pollingEnabled.value = false);
+    const disablePolling = () => {
+      queryClient.cancelQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
+      queryClient.cancelQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
+      queryClient.cancelQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
+      queryClient.invalidateQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
+      queryClient.invalidateQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
+      queryClient.invalidateQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
+      pollingEnabled.value = false;
+    };
 
     const deviceQueryStamp = ref(0);
     const alarmQueryStamp = ref(0);