feat(statioin-page): action button group

2025-11-27 17:59:39 +08:00
parent f278a690c6
commit 7f9d868643
10 changed files with 294 additions and 45 deletions
--- a/src/apis/request/biz/storage/ndm-nvr.ts
+++ b/src/apis/request/biz/storage/ndm-nvr.ts
@@ -51,3 +51,15 @@ export const probeNvrApi = async (ids: string[], options?: { stationCode?: strin
    throw err;
  }
 };
+
+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/ndmNvr/syncNvrChannels`;
+  const resp = await client.get<void>(endpoint, { signal });
+  const [err] = resp;
+  if (err) {
+    throw err;
+  }
+};
--- a/src/apis/request/biz/video/ndm-camera.ts
+++ b/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;
+  }
+};
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,3 @@
 export * from './device-page';
 export * from './global';
-export * from './helper';
 export * from './station-page';
--- a/src/components/station-page/device-export-modal.vue
+++ b/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>

--- a/src/components/station-page/index.ts
+++ b/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';
--- a/src/components/station-page/record-check-export-modal.vue
+++ b/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>
--- a/src/components/station-page/station-card.vue
+++ b/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">
--- a/src/composables/query/use-station-list-query.ts
+++ b/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 });
--- a/src/pages/station-page.vue
+++ b/src/pages/station-page.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { Station } from '@/apis';
-import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
+import { syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
+import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, RecordCheckExportModal, StationCard } from '@/components';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
-import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
-import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton } from 'naive-ui';
+import { useAlarmStore, useDeviceStore, usePollingStore, useSettingStore, useStationStore } from '@/stores';
+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 showActionConfirm = ref(false);
-const showDeviceExportModal = ref(false);
-const openDeviceExportModal = () => {
-  showDeviceExportModal.value = true;
+const stationSelection = ref<Record<Station['code'], boolean>>({});
+// TODO: 后期导出设备也会支持选择车站，而不是目前的Modal交互
+const showIcmpExportModal = ref(false);
+const showRecordCheckExportModal = ref(false);
+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 deviceAlarmTreeModalShow = ref(false);
-const deviceParamsConfigModalShow = ref(false);
+const showOfflineDeviceDetailModal = ref(false);
+const showDeviceAlarmDetailModal = 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 v-if="false">导出录像诊断</NButton>
-        <NButton v-if="false">同步摄像机</NButton>
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-icmp'" @click="() => onAction('export-icmp')">导出设备状态</NButton>
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-record'" @click="() => onAction('export-record')">导出录像诊断</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">
-        <NButton quaternary size="small" type="primary" :focusable="false">确定</NButton>
-        <NButton quaternary size="small" type="tertiary" :focusable="false">取消</NButton>
-      </NFlex>
+      <template v-if="showOperation">
+        <NCheckbox label="全选" @update:checked="onToggleSelectAll" />
+        <NButton tertiary size="small" type="primary" :focusable="false" :loading="confirming" @click="onConfirm">确定</NButton>
+        <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>
--- a/src/stores/polling.ts
+++ b/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);