style: code state

.env

@@ -16,7 +16,7 @@ VITE_LAMP_PASSWORD = fjoc(1KHP(Ls&Bje)C
 VITE_LAMP_AUTHORIZATION = Y3VlZGVzX2FkbWluOmN1ZWRlc19hZG1pbl9zZWNyZXQ=
 
 # 当需要重置localStorage时, 修改此变量
-VITE_STORAGE_VERSION = 1
+VITE_STORAGE_VERSION = 2
 
 # 调试授权码
 VITE_DEBUG_CODE = ndm_debug

src/App.vue

@@ -13,13 +13,13 @@ const GlobalFeedback = defineComponent({
 <script setup lang="ts">
 import { dateZhCN, NConfigProvider, NDialogProvider, NLoadingBarProvider, NMessageProvider, NNotificationProvider, useDialog, useLoadingBar, useMessage, useNotification, zhCN } from 'naive-ui';
 import { defineComponent } from 'vue';
-import { useThemeStore } from '@/stores/theme';
+import { useSettingStore } from '@/stores';
 import { storeToRefs } from 'pinia';
 import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
 import { useVersionCheckQuery } from './composables/query';
 
-const themeStore = useThemeStore();
+const settingStore = useSettingStore();
-const { themeMode } = storeToRefs(themeStore);
+const { themeMode } = storeToRefs(settingStore);
 
 useVersionCheckQuery();
 </script>

src/apis/client/user-client.ts

@@ -28,9 +28,6 @@ export const userClient = new RequestClient({
       userStore.resetStore();
       router.push('/login');
     }
-    if (err.response?.status === 404) {
-      router.push('/404');
-    }
     return Promise.reject(error);
   },
 });

src/apis/domain/biz/diag/ndm-switch-diag-info.ts

@@ -10,12 +10,12 @@ export interface NdmSwitchDiagInfo {
 }
 
 export interface NdmSwitchPortInfo {
-  flow: number;
   inBytes: number;
-  inFlow: number;
   lastInBytes: number;
   lastOutBytes: number;
   outBytes: number;
+  flow: number;
+  inFlow: number;
   outFlow: number;
   portName: string;
   upDown: number;

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

@@ -1,6 +1,7 @@
 import type { DeviceType } from '@/enums';
 
 export interface StationAlarmCounts {
+  [DeviceType.AlarmHost]: number;
   [DeviceType.Camera]: number;
   [DeviceType.Decoder]: number;
   [DeviceType.Keyboard]: number;

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

@@ -1,7 +1,18 @@
-import type { NdmCameraResultVO, NdmDecoderResultVO, NdmKeyboardResultVO, NdmMediaServerResultVO, NdmNvrResultVO, NdmSecurityBoxResultVO, NdmSwitchResultVO, NdmVideoServerResultVO } from '@/apis';
+import type {
+  NdmAlarmHostResultVO,
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis';
 import type { DeviceType } from '@/enums';
 
 export interface StationDevices {
+  [DeviceType.AlarmHost]: NdmAlarmHostResultVO[];
   [DeviceType.Camera]: NdmCameraResultVO[];
   [DeviceType.Decoder]: NdmDecoderResultVO[];
   [DeviceType.Keyboard]: NdmKeyboardResultVO[];

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/model/biz/entity/alarm/index.ts

@@ -0,0 +1 @@
+export * from './ndm-alarm-host';

src/apis/model/biz/entity/alarm/ndm-alarm-host.ts

@@ -0,0 +1,38 @@
+import type { BaseModel, ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '@/apis';
+
+export interface NdmAlarmHost extends BaseModel {
+  deviceId: string;
+  name: string;
+  manufacturer: string;
+  state: boolean;
+  model: string;
+  ipAddress: string;
+  manageUrl: string;
+  manageUsername: string;
+  managePassword: string;
+  gbCode: string;
+  gbPort: number;
+  gbDomain: string;
+  gb28181Enabled: boolean;
+  diagFlag: string;
+  diagParam: string;
+  diagFormat: string;
+  lastDiagInfo: string;
+  lastDiagTime: string;
+  icmpEnabled: boolean;
+  description: string;
+  deviceStatus: string;
+  deviceType: string;
+  community: string;
+  frontendConfig: string;
+  linkDescription: string;
+  snmpEnabled: boolean;
+}
+
+export type NdmAlarmHostResultVO = Partial<NdmAlarmHost>;
+
+export type NdmAlarmHostSaveVO = Partial<Omit<NdmAlarmHost, ReduceForSaveVO>>;
+
+export type NdmAlarmHostUpdateVO = Partial<Omit<NdmAlarmHost, ReduceForUpdateVO>>;
+
+export type NdmAlarmHostPageQuery = Partial<Omit<NdmAlarmHost, ReduceForPageQuery>>;

src/apis/model/biz/entity/index.ts

@@ -1,8 +1,9 @@
+import type { NdmAlarmHost } from './alarm';
 import type { NdmSecurityBox, NdmSwitch } from './other';
 import type { NdmNvr } from './storage';
 import type { NdmCamera, NdmDecoder, NdmKeyboard, NdmMediaServer, NdmVideoServer } from './video';
 
-export type NdmDeviceVO = NdmCamera | NdmDecoder | NdmKeyboard | NdmMediaServer | NdmNvr | NdmSecurityBox | NdmSwitch | NdmVideoServer;
+export type NdmDeviceVO = NdmAlarmHost | NdmCamera | NdmDecoder | NdmKeyboard | NdmMediaServer | NdmNvr | NdmSecurityBox | NdmSwitch | NdmVideoServer;
 
 export type NdmDeviceResultVO = Partial<NdmDeviceVO>;
 
@@ -10,7 +11,9 @@ export type NdmServerVO = NdmMediaServer | NdmVideoServer;
 
 export type NdmServerResultVO = Partial<NdmServerVO>;
 
+export * from './alarm';
 export * from './log';
 export * from './other';
 export * from './storage';
+export * from './upper-ndm';
 export * from './video';

src/apis/model/biz/entity/upper-ndm/index.ts

@@ -0,0 +1,2 @@
+export * from './sync-camera-result';
+export * from './sync-camera-result-detail';

src/apis/model/biz/entity/upper-ndm/sync-camera-result-detail.ts

@@ -0,0 +1,6 @@
+export interface SyncCameraResultDetail {
+  name: string;
+  deviceId: string;
+  ipAddress: string;
+  gbCode: string;
+}

src/apis/model/biz/entity/upper-ndm/sync-camera-result.ts

@@ -0,0 +1,10 @@
+import type { SyncCameraResultDetail } from './sync-camera-result-detail';
+
+export interface SyncCameraResult {
+  stationCode: string;
+  startTime: string;
+  endTime: string;
+  insertList: SyncCameraResultDetail[];
+  updateList: SyncCameraResultDetail[];
+  deleteList: SyncCameraResultDetail[];
+}

src/apis/model/biz/entity/video/index.ts

@@ -1,4 +1,5 @@
 export * from './ndm-camera';
+export * from './ndm-camera-ignore';
 export * from './ndm-decoder';
 export * from './ndm-keyboard';
 export * from './ndm-media-server';

src/apis/model/biz/entity/video/ndm-camera-ignore.ts

@@ -0,0 +1,14 @@
+import type { BaseModel, ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '@/apis';
+
+export interface NdmCameraIgnore extends BaseModel {
+  deviceId: string;
+  ignoreType: string;
+}
+
+export type NdmCameraIgnoreResultVO = Partial<NdmCameraIgnore>;
+
+export type NdmCameraIgnoreSaveVO = Partial<Omit<NdmCameraIgnore, ReduceForSaveVO>>;
+
+export type NdmCameraIgnoreUpdateVO = Partial<Omit<NdmCameraIgnore, ReduceForUpdateVO>>;
+
+export type NdmCameraIgnorePageQuery = Partial<Omit<NdmCameraIgnore, ReduceForPageQuery>>;

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/index.ts

@@ -1,4 +1,5 @@
 export * from './ndm-camera';
+export * from './ndm-camera-ignore';
 export * from './ndm-decoder';
 export * from './ndm-keyboard';
 export * from './ndm-media-server';

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

@@ -0,0 +1,66 @@
+import { ndmClient, userClient, type NdmCameraIgnorePageQuery, type NdmCameraIgnoreResultVO, type NdmCameraIgnoreSaveVO, type NdmCameraIgnoreUpdateVO, type PageParams, type PageResult } from '@/apis';
+
+export const pageCameraIgnoreApi = async (pageQuery: PageParams<NdmCameraIgnorePageQuery>, options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmCameraIgnore/page`;
+  const resp = await client.post<PageResult<NdmCameraIgnoreResultVO>>(endpoint, pageQuery, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};
+
+export const detailCameraIgnoreApi = async (id: string, options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmCameraIgnore/detail`;
+  const resp = await client.get<NdmCameraIgnoreResultVO>(endpoint, { params: { id }, signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};
+
+export const saveCameraIgnoreApi = async (saveVO: NdmCameraIgnoreSaveVO, options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmCameraIgnore`;
+  const resp = await client.post<NdmCameraIgnoreResultVO>(endpoint, saveVO, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};
+
+export const updateCameraIgnoreApi = async (updateVO: NdmCameraIgnoreUpdateVO, options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmCameraIgnore`;
+  const resp = await client.put<NdmCameraIgnoreResultVO>(endpoint, updateVO, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};
+
+export const removeCameraIgnoreApi = async (ids: string[], options?: { stationCode?: string; signal?: AbortSignal }) => {
+  const { stationCode, signal } = options ?? {};
+  const client = stationCode ? ndmClient : userClient;
+  const prefix = stationCode ? `/${stationCode}` : '';
+  const endpoint = `${prefix}/api/ndm/ndmCameraIgnore`;
+  const resp = await client.delete<boolean>(endpoint, ids, { signal });
+  const [err, data] = resp;
+  if (err || data === null) {
+    throw err;
+  }
+  return data;
+};

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

@@ -49,3 +49,16 @@ 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<boolean>(endpoint, { signal });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};

src/components/dashboard-page/device-statistic-card.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import type { LineDevices, Station } from '@/apis';
-import { DeviceType } from '@/enums';
-import { NCard, NGrid, NGi, NStatistic, NSpace, NButton } from 'naive-ui';
-import { computed, toRefs } from 'vue';
-
-const props = defineProps<{
-  stationList: Station[];
-  lineDevices: LineDevices;
-  buttonLoading: boolean;
-}>();
-
-const emit = defineEmits<{
-  'export-online': [];
-  'export-offline': [];
-  'export-all': [];
-}>();
-
-const { stationList, lineDevices, buttonLoading } = toRefs(props);
-
-const onlineDeviceCount = computed(() => {
-  let count = 0;
-  for (const station of stationList.value) {
-    if (station.online) {
-      const stationDevices = lineDevices.value[station.code];
-      Object.values(DeviceType).forEach((deviceType) => {
-        const onlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '10') ?? [];
-        count += onlineDeviceList.length;
-      });
-    }
-  }
-  return count;
-});
-
-const offlineDeviceCount = computed(() => {
-  let count = 0;
-  for (const station of stationList.value) {
-    if (station.online) {
-      const stationDevices = lineDevices.value[station.code];
-      Object.values(DeviceType).forEach((deviceType) => {
-        const offlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '20') ?? [];
-        count += offlineDeviceList.length;
-      });
-    }
-  }
-  return count;
-});
-
-const deviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.value);
-
-const onExportOnline = () => emit('export-online');
-const onExportOffline = () => emit('export-offline');
-const onExportAll = () => emit('export-all');
-</script>
-
-<template>
-  <NCard bordered hoverable size="small" class="device-statistic-card" title="设备统计">
-    <template #header-extra>
-      <NSpace align="center">
-        <NButton size="small" type="default" tertiary :disabled="buttonLoading" @click="onExportAll">导出全部</NButton>
-        <NButton size="small" type="success" tertiary :disabled="buttonLoading" @click="onExportOnline">导出在线</NButton>
-        <NButton size="small" type="error" tertiary :disabled="buttonLoading" @click="onExportOffline">导出离线</NButton>
-      </NSpace>
-    </template>
-
-    <NGrid :cols="3" :x-gap="24" :y-gap="8">
-      <NGi>
-        <NStatistic label="全部设备" :value="deviceCount" />
-      </NGi>
-      <NGi>
-        <NStatistic label="在线设备" :value="onlineDeviceCount" :value-style="{ color: '#18a058' }" />
-      </NGi>
-      <NGi>
-        <NStatistic label="离线设备" :value="offlineDeviceCount" :value-style="{ color: '#d03050' }" />
-      </NGi>
-    </NGrid>
-  </NCard>
-</template>
-
-<style scoped>
-.device-statistic-card {
-  margin: 8px;
-}
-</style>

src/components/dashboard-page/index.ts

@@ -1 +0,0 @@
-export { default as DeviceStatisticCard } from './device-statistic-card.vue';

src/components/device-page/device-card/alarm-host-card.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { NdmAlarmHostResultVO } from '@/apis';
+import { AlarmHostHistoryDiagCard, DeviceCommonCard, DeviceHeaderCard } from '@/components';
+import { useSettingStore } from '@/stores';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, ref, toRefs } from 'vue';
+import { destr } from 'destr';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmAlarmHost: NdmAlarmHostResultVO;
+}>();
+
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
+
+const { stationCode, ndmAlarmHost } = toRefs(props);
+
+const lastDiagInfo = computed(() => {
+  const result = destr<any>(ndmAlarmHost.value.lastDiagInfo);
+  if (!result) return null;
+  if (typeof result !== 'object') return null;
+  return result;
+});
+
+const commonInfo = computed(() => {
+  const { createdTime, updatedTime, manufacturer } = ndmAlarmHost.value;
+  return {
+    创建时间: createdTime ?? '',
+    更新时间: updatedTime ?? '',
+    制造商: manufacturer ?? '',
+  };
+});
+
+const selectedTab = ref('设备状态');
+</script>
+
+<template>
+  <NCard size="small">
+    <NTabs v-model:value="selectedTab" size="small">
+      <NTabPane name="设备状态" tab="设备状态">
+        <NFlex vertical>
+          <DeviceHeaderCard :station-code="stationCode" :device="ndmAlarmHost" />
+          <DeviceCommonCard :common-info="commonInfo" />
+        </NFlex>
+      </NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <AlarmHostHistoryDiagCard :station-code="stationCode" :ndm-alarm-host="ndmAlarmHost" :key="ndmAlarmHost.id" />
+      </NTabPane>
+      <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
+        <pre class="raw-data">{{ { ...ndmAlarmHost, lastDiagInfo } }}</pre>
+      </NTabPane>
+    </NTabs>
+  </NCard>
+</template>
+
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

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

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import type { NdmCameraDiagInfo, NdmCameraResultVO } from '@/apis';
-import { useDebugModeStore } from '@/stores';
+import { CameraHistoryDiagCard, DeviceCommonCard, DeviceHeaderCard } from '@/components';
-import destr from 'destr';
+import { useSettingStore } from '@/stores';
+import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
-import { DeviceCommonCard, DeviceHeaderCard } from './current-diag-card';
+import { storeToRefs } from 'pinia';
-import { CameraHistoryDiagCard } from './history-diag-card';
 
 const props = defineProps<{
   stationCode: string;
   ndmCamera: NdmCameraResultVO;
 }>();
 
-const debugModeStore = useDebugModeStore();
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
 
 const { stationCode, ndmCamera } = toRefs(props);
 
@@ -74,7 +75,7 @@ const selectedTab = ref('设备状态');
         <CameraHistoryDiagCard :station-code="stationCode" :ndm-camera="ndmCamera" :key="ndmCamera.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmCamera, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>

src/components/device-page/device-card/current-diag-card/device-header-card.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { detailDeviceApi, probeDeviceApi, type NdmDeviceResultVO } from '@/apis';
 import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
-import { useLineDevicesStore } from '@/stores';
+import { useDeviceStore } from '@/stores';
 import { useMutation } from '@tanstack/vue-query';
 import { ApiOutlined, ReloadOutlined } from '@vicons/antd';
 import { NButton, NCard, NFlex, NIcon, NTag, NTooltip } from 'naive-ui';
@@ -62,7 +62,7 @@ const { mutate: getDeviceDetail, isPending: loading } = useMutation({
   },
   onSuccess: (device) => {
     if (device) {
-      useLineDevicesStore().patch(stationCode.value, device);
+      useDeviceStore().patch(stationCode.value, device);
     }
   },
   onError: (error) => {

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/security-box-info-card.vue

@@ -17,22 +17,24 @@ const cardShow = computed(() => {
   return Object.values(props).some((value) => !!value);
 });
 
-// 门禁状态 (switches[0]: 0=关闭/失效, 1=打开/生效)
+// 门禁状态
 const accessControlStatus = computed(() => {
   if (!switches?.value || switches.value.length === 0) return null;
-  return switches.value[0] === 1 ? '打开' : '关闭';
+  const status = switches.value.at(0)!;
+  return status === 0 ? '开门' : status === 1 ? '关门' : '-';
 });
 
-// 防雷状态 (switches[1]: 0=关闭/失效, 1=打开/生效)
+// 防雷状态
 const lightningProtectionStatus = computed(() => {
   if (!switches?.value || switches.value.length < 2) return null;
-  return switches.value[1] === 1 ? '生效' : '失效';
+  const status = switches.value.at(1)!;
+  return status === 0 ? '正常' : status === 1 ? '失效' : '-';
 });
 
 // 获取状态标签类型
 const getStatusTagType = (status: string | null) => {
-  if (['打开', '生效'].includes(status ?? '')) return 'success';
+  if (['正常'].includes(status ?? '')) return 'success';
-  if (['关闭', '失效'].includes(status ?? '')) return 'error';
+  if (['失效'].includes(status ?? '')) return 'error';
   return 'default';
 };
 

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/decoder-card.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { NdmDecoderDiagInfo, NdmDecoderResultVO } from '@/apis';
 import { DecoderHistoryDiagCard, DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard } from '@/components';
-import { useDebugModeStore } from '@/stores';
+import { useSettingStore } from '@/stores';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
   ndmDecoder: NdmDecoderResultVO;
 }>();
 
-const debugModeStore = useDebugModeStore();
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
 
 const { stationCode, ndmDecoder } = toRefs(props);
 
@@ -53,7 +55,7 @@ const selectedTab = ref('设备状态');
         <DecoderHistoryDiagCard :station-code="stationCode" :ndm-decoder="ndmDecoder" :key="ndmDecoder.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { NdmAlarmHostResultVO } from '@/apis';
+import { DeviceAlarmHistoryDiagCard, DeviceStatusHistoryDiagCard } from '@/components';
+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';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmAlarmHost: NdmAlarmHostResultVO;
+}>();
+
+const { stationCode, ndmAlarmHost } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: undefined as DatePickerProps['value'],
+});
+const onDateChange = (value: [number, number] | null) => {
+  if (!value) {
+    return;
+  }
+  const [start, end] = value;
+  const diffDays = dayjs(end).diff(dayjs(start), 'day');
+  if (diffDays > 7) {
+    // 如果超过7天，自动调整结束时间
+    const adjustedEnd = dayjs(start).add(7, 'day').valueOf();
+    searchFields.dateTimeRange = [start, adjustedEnd];
+    window.$message.warning('时间范围不能超过7天，已自动调整');
+  } else {
+    searchFields.dateTimeRange = value;
+  }
+};
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const weekAgo = now.subtract(1, 'week').startOf('date');
+  searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+
+const diagCards = ref<SelectOption[]>([
+  { label: '设备状态', value: 'status' },
+  { label: '设备告警', value: 'alarm' },
+]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" @update:value="onDateChange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmAlarmHost"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+      <DeviceAlarmHistoryDiagCard
+        v-if="selectedCards.includes('alarm')"
+        :ref="'deviceAlarmHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmAlarmHost"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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';
@@ -78,6 +78,7 @@ const { mutate: getDeviceAlarmLogList, isPending } = useMutation({
     if (!dateTimeRange.value) throw new Error('请选择时间范围');
     const range = dateTimeRange.value as [number, number];
     const deviceId = ndmDevice.value.deviceId;
+    if (!deviceId) throw new Error('该设备未配置设备ID');
     const alarmDate_ge = range[0];
     const alarmDate_le = range[1];
     const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {

src/components/device-page/device-card/history-diag-card/index.ts

@@ -1,3 +1,4 @@
+export { default as AlarmHostHistoryDiagCard } from './alarm-host-history-diag-card.vue';
 export { default as CameraHistoryDiagCard } from './camera-history-diag-card.vue';
 export { default as DecoderHistoryDiagCard } from './decoder-history-diag-card.vue';
 export { default as DeviceAlarmHistoryDiagCard } from './device-alarm-history-diag-card.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/index.ts

@@ -1,3 +1,4 @@
+export { default as AlarmHostCard } from './alarm-host-card.vue';
 export { default as CameraCard } from './camera-card.vue';
 export { default as DecoderCard } from './decoder-card.vue';
 export { default as KeyboardCard } from './keyboard-card.vue';

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { NdmKeyboardResultVO } from '@/apis';
 import { DeviceHeaderCard, KeyboardHistoryDiagCard } from '@/components';
-import { useDebugModeStore } from '@/stores';
+import { useSettingStore } from '@/stores';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { ref, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -10,7 +11,8 @@ const props = defineProps<{
   ndmKeyboard: NdmKeyboardResultVO;
 }>();
 
-const debugModeStore = useDebugModeStore();
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
 
 const { stationCode, ndmKeyboard } = toRefs(props);
 
@@ -30,7 +32,7 @@ const selectedTab = ref('设备状态');
         <KeyboardHistoryDiagCard :station-code="stationCode" :ndm-keyboard="ndmKeyboard" :key="ndmKeyboard.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmKeyboard } }}</pre>
       </NTabPane>
     </NTabs>

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

@@ -1,9 +1,11 @@
 <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 { useDebugModeStore } from '@/stores';
+import { isNvrCluster } from '@/helper';
+import { useSettingStore } from '@/stores';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -11,7 +13,8 @@ const props = defineProps<{
   ndmNvr: NdmNvrResultVO;
 }>();
 
-const debugModeStore = useDebugModeStore();
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
 
 const { stationCode, ndmNvr } = toRefs(props);
 
@@ -63,7 +66,7 @@ const selectedTab = ref('设备状态');
         <NvrHistoryDiagCard :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmNvr, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>

src/components/device-page/device-card/security-box-card.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { NdmSecurityBoxDiagInfo, NdmSecurityBoxResultVO } from '@/apis';
 import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxHistoryDiagCard, SecurityBoxInfoCard } from '@/components';
-import { useDebugModeStore } from '@/stores';
+import { useSettingStore } from '@/stores';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
   ndmSecurityBox: NdmSecurityBoxResultVO;
 }>();
 
-const debugModeStore = useDebugModeStore();
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
 
 const { stationCode, ndmSecurityBox } = toRefs(props);
 
@@ -62,7 +64,7 @@ const selectedTab = ref('设备状态');
         <SecurityBoxHistoryDiagCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :key="ndmSecurityBox.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { NdmServerDiagInfo, NdmServerResultVO } from '@/apis';
 import { DeviceHardwareCard, DeviceHeaderCard, ServerHistoryDiagCard } from '@/components';
-import { useDebugModeStore } from '@/stores';
+import { useSettingStore } from '@/stores';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
   ndmServer: NdmServerResultVO;
 }>();
 
-const debugModeStore = useDebugModeStore();
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
 
 const { stationCode, ndmServer } = toRefs(props);
 
@@ -44,7 +46,7 @@ const selectedTab = ref('设备状态');
         <ServerHistoryDiagCard :station-code="stationCode" :ndm-server="ndmServer" :key="ndmServer.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmServer, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { NdmSwitchDiagInfo, NdmSwitchResultVO } from '@/apis';
 import { DeviceHardwareCard, DeviceHeaderCard, SwitchHistoryDiagCard, SwitchPortCard } from '@/components';
-import { useDebugModeStore } from '@/stores';
+import { useSettingStore } from '@/stores';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, ref, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
   ndmSwitch: NdmSwitchResultVO;
 }>();
 
-const debugModeStore = useDebugModeStore();
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
 
 const { stationCode, ndmSwitch } = toRefs(props);
 
@@ -45,7 +47,7 @@ const selectedTab = ref('设备状态');
         <SwitchHistoryDiagCard :station-code="stationCode" :ndm-switch="ndmSwitch" :key="ndmSwitch.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NdmDeviceResultVO } from '@/apis';
-import { CameraCard, DecoderCard, KeyboardCard, NvrCard, SecurityBoxCard, ServerCard, SwitchCard } from '@/components';
+import { AlarmHostCard, CameraCard, DecoderCard, KeyboardCard, NvrCard, SecurityBoxCard, ServerCard, SwitchCard } from '@/components';
 import { DeviceType, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
 import { computed, toRefs } from 'vue';
 
@@ -15,6 +15,9 @@ const deviceTypeVal = computed(() => tryGetDeviceTypeVal(device.value.deviceType
 </script>
 
 <template>
+  <template v-if="deviceTypeVal === DeviceType.AlarmHost">
+    <AlarmHostCard :station-code="stationCode" :ndm-alarm-host="device" />
+  </template>
   <template v-if="deviceTypeVal === DeviceType.Camera">
     <CameraCard :station-code="stationCode" :ndm-camera="device" />
   </template>

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 {
@@ -262,7 +262,7 @@ const scrollDeviceTreeToSelectedDevice = () => {
 
 <template>
   <div style="height: 100%; display: flex; flex-direction: column">
-    <div style="flex-shrink: 0; padding: 12px">
+    <div style="padding: 12px; flex-shrink: 0">
       <NInput v-model:value="searchInput" placeholder="搜索设备名称、设备ID或IP地址" clearable />
       <NFlex justify="space-between" align="center">
         <NRadioGroup v-model:value="statusInput">
@@ -277,13 +277,13 @@ const scrollDeviceTreeToSelectedDevice = () => {
       </NFlex>
     </div>
 
-    <div style="flex: 1; min-height: 0; display: flex; overflow: hidden">
+    <div style="min-height: 0; overflow: hidden; flex: 1; display: flex">
-      <div style="flex: 0 0 auto; height: 100%">
+      <div style="height: 100%; flex: 0 0 auto">
         <NTabs v-model:value="activeTab" animated type="line" placement="left" style="height: 100%">
           <NTab v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab"></NTab>
         </NTabs>
       </div>
-      <div style="flex: 1 1 auto; min-width: 0">
+      <div style="min-width: 0; flex: 1 1 auto">
         <NTree
           :ref="'deviceTreeInst'"
           v-model:expanded-keys="expandedKeys"

src/components/global/settings-drawer.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { VersionInfo } from '@/apis';
 import { ThemeSwitch } from '@/components';
-import { STATION_LIST_QUERY_KEY } from '@/constants';
+import { LINE_STATIONS_QUERY_KEY } from '@/constants';
-import { useDebugModeStore, useLayoutStore, useQueryControlStore } from '@/stores';
+import { useSettingStore, usePollingStore } from '@/stores';
 import { getAppEnvConfig } from '@/utils';
 import { useQueryClient } from '@tanstack/vue-query';
 import { useEventListener } from '@vueuse/core';
 import axios from 'axios';
-import { NButton, NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInput, NInputNumber, NModal, NRadio, NRadioGroup, NText } from 'naive-ui';
+import { NButton, NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInput, NInputNumber, NModal, NRadio, NRadioGroup, NSwitch, NText } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
@@ -16,16 +16,16 @@ const route = useRoute();
 
 const show = defineModel<boolean>('show');
 
-const layoutStore = useLayoutStore();
+const settingStore = useSettingStore();
-const { stationGridColumns } = storeToRefs(layoutStore);
+const { stationGridColumns, debugModeEnabled, menuCollpased } = storeToRefs(settingStore);
-const queryControlStore = useQueryControlStore();
+const pollingStore = usePollingStore();
-const { stationVerifyMode } = storeToRefs(queryControlStore);
+const { stationVerifyMode } = storeToRefs(pollingStore);
 
 const queryClient = useQueryClient();
 watch(stationVerifyMode, () => {
-  queryClient.cancelQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
+  queryClient.cancelQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
-  queryClient.invalidateQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
+  queryClient.invalidateQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
-  queryClient.refetchQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
+  queryClient.refetchQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
 });
 
 const versionInfo = ref<VersionInfo>({ version: '', buildTime: '' });
@@ -35,8 +35,6 @@ onMounted(async () => {
   versionInfo.value = data;
 });
 
-const debugModeStore = useDebugModeStore();
-const { debugEnabled } = storeToRefs(debugModeStore);
 const debugCodeModalShow = ref(false);
 const debugCode = ref('');
 const enableDebug = () => {
@@ -47,11 +45,11 @@ const enableDebug = () => {
   }
   debugCodeModalShow.value = false;
   debugCode.value = '';
-  debugModeStore.enableDebug();
+  settingStore.enableDebugMode();
 };
 const disableDebug = () => {
   debugCodeModalShow.value = false;
-  debugModeStore.disableDebug();
+  settingStore.disableDebugMode();
 };
 
 useEventListener('keydown', (event) => {
@@ -70,13 +68,16 @@ useEventListener('keydown', (event) => {
         <NFormItem label="深色模式" label-placement="left">
           <ThemeSwitch />
         </NFormItem>
+        <NDivider>布局</NDivider>
+        <NFormItem label="折叠菜单" label-placement="left">
+          <NSwitch v-model:value="menuCollpased" />
+        </NFormItem>
         <template v-if="route.path === '/station'">
-          <NDivider>布局</NDivider>
           <NFormItem label="车站列数" label-placement="left">
             <NInputNumber v-model:value="stationGridColumns" :min="1" :max="10" />
           </NFormItem>
         </template>
-        <template v-if="debugEnabled">
+        <template v-if="debugModeEnabled">
           <NDivider>调试</NDivider>
           <NFormItem label="车站Ping模式" label-placement="left">
             <NRadioGroup v-model:value="stationVerifyMode">
@@ -96,13 +97,13 @@ useEventListener('keydown', (event) => {
 
   <NModal v-model:show="debugCodeModalShow" preset="dialog" type="info">
     <template #header>
-      <NText v-if="!debugEnabled">请输入调试授权码</NText>
+      <NText v-if="!debugModeEnabled">请输入调试授权码</NText>
       <NText v-else>确认关闭调试模式</NText>
     </template>
-    <NInput v-if="!debugEnabled" v-model:value="debugCode" placeholder="输入授权码" />
+    <NInput v-if="!debugModeEnabled" v-model:value="debugCode" placeholder="输入授权码" />
     <template #action>
       <NButton @click="debugCodeModalShow = false">取消</NButton>
-      <NButton v-if="!debugEnabled" type="primary" @click="enableDebug">启用</NButton>
+      <NButton v-if="!debugModeEnabled" type="primary" @click="enableDebug">启用</NButton>
       <NButton v-else type="primary" @click="disableDebug">确认</NButton>
     </template>
   </NModal>

src/components/global/theme-switch.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useThemeStore } from '@/stores';
+import { useSettingStore } from '@/stores';
 import { MoonOutline, SunnyOutline } from '@vicons/ionicons5';
 import { NIcon, NSwitch } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import type { ComponentInstance } from 'vue';
 
-const themeStore = useThemeStore();
+const settingStore = useSettingStore();
-const { darkThemeEnabled } = storeToRefs(themeStore);
+const { darkThemeEnabled } = storeToRefs(settingStore);
 
 defineExpose({} as ComponentInstance<typeof NSwitch>);
 </script>

src/components/helper/switch-port.ts

@@ -1,53 +0,0 @@
-import type { NdmSwitchPortInfo } from '@/apis';
-import { JAVA_UNSIGNED_INTEGER_MAX_VALUE, NDM_SWITCH_PROBE_INTERVAL } from '@/constants';
-
-export const getPortStatusVal = (portInfo: NdmSwitchPortInfo): string => {
-  const { upDown } = portInfo;
-  return upDown === 1 ? '启用' : upDown === 2 ? '禁用' : '未知';
-};
-
-export const transformPortSpeed = (portInfo: NdmSwitchPortInfo, type: 'in' | 'out' | 'total'): string => {
-  const units = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
-  const { inBytes, lastInBytes, outBytes, lastOutBytes, inFlow, outFlow, flow } = portInfo;
-  let result: number = 0;
-  if (inFlow && outFlow && flow) {
-    if (type === 'in') {
-      result = inFlow;
-    }
-    if (type === 'out') {
-      result = outFlow;
-    }
-    if (type === 'total') {
-      result = flow;
-    }
-  } else {
-    let dInBytes = 0;
-    let dOutBytes = 0;
-    if (inBytes < lastInBytes) {
-      dInBytes = inBytes + JAVA_UNSIGNED_INTEGER_MAX_VALUE - lastInBytes;
-    } else {
-      dInBytes = inBytes - lastInBytes;
-    }
-    if (outBytes < lastOutBytes) {
-      dOutBytes = outBytes + JAVA_UNSIGNED_INTEGER_MAX_VALUE - lastOutBytes;
-    } else {
-      dOutBytes = outBytes - lastOutBytes;
-    }
-    if (type === 'in') {
-      result = dInBytes;
-    }
-    if (type === 'out') {
-      result = dOutBytes;
-    }
-    if (type === 'total') {
-      result = dInBytes + dOutBytes;
-    }
-    result /= NDM_SWITCH_PROBE_INTERVAL;
-  }
-  let index = 0;
-  while (result >= 1024 && index < units.length - 1) {
-    result /= 1024;
-    index++;
-  }
-  return `${result.toFixed(3)} ${units[index]}`;
-};

src/components/index.ts

@@ -1,5 +1,3 @@
-export * from './dashboard-page';
 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 { NButton, NDataTable, NGrid, NGridItem, NModal, 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;
@@ -125,7 +125,7 @@ const resetFilterFields = () => {
   filterFields.faultLevel_in = [];
 };
 
-const tablePagination = reactive<PaginationProps>({
+const pagination = reactive<PaginationProps>({
   size: 'small',
   showSizePicker: true,
   page: 1,
@@ -135,27 +135,27 @@ const tablePagination = reactive<PaginationProps>({
     return h('div', {}, { default: () => `共${itemCount}条` });
   },
   onUpdatePage: (page: number) => {
-    tablePagination.page = page;
+    pagination.page = page;
-    getStaionAlarmList();
+    getTableData();
   },
   onUpdatePageSize: (pageSize: number) => {
-    tablePagination.pageSize = pageSize;
+    pagination.pageSize = pageSize;
-    tablePagination.page = 1;
+    pagination.page = 1;
-    getStaionAlarmList();
+    getTableData();
   },
 });
 
 const tableData = ref<DataTableRowData[]>([]);
 
 const onAfterModalEnter = () => {
-  getStaionAlarmList();
+  getTableData();
 };
 
 const onAfterModalLeave = () => {
   resetFilterFields();
-  tablePagination.page = 1;
+  pagination.page = 1;
-  tablePagination.pageSize = 10;
+  pagination.pageSize = 10;
-  tablePagination.itemCount = 0;
+  pagination.itemCount = 0;
   tableData.value = [];
 };
 
@@ -168,10 +168,10 @@ const onUpdateFilters: DataTableProps['onUpdateFilters'] = (filterState) => {
   filterFields.alarmType_in = alarmTypeKeys;
   const faultLevelVals = filterState['faultLevel'];
   filterFields.faultLevel_in = faultLevelVals;
-  getStaionAlarmList();
+  getTableData();
 };
 
-const { mutate: getStaionAlarmList, isPending: tableLoading } = useMutation({
+const { mutate: getTableData, isPending: loading } = useMutation({
   mutationFn: async () => {
     const now = dayjs();
     const res = await pageDeviceAlarmLogApi(
@@ -188,8 +188,8 @@ const { mutate: getStaionAlarmList, isPending: tableLoading } = useMutation({
           createdTime_precisest: now.startOf('date').format('YYYY-MM-DD HH:mm:ss'),
           createdTime_preciseed: now.endOf('date').format('YYYY-MM-DD HH:mm:ss'),
         },
-        current: tablePagination.page ?? 1,
+        current: pagination.page ?? 1,
-        size: tablePagination.pageSize ?? 10,
+        size: pagination.pageSize ?? 10,
         order: 'descending',
         sort: 'id',
       },
@@ -201,8 +201,8 @@ const { mutate: getStaionAlarmList, isPending: tableLoading } = useMutation({
   },
   onSuccess: (res) => {
     const { records, size, total } = res;
-    tablePagination.pageSize = parseInt(size);
+    pagination.pageSize = parseInt(size);
-    tablePagination.itemCount = parseInt(total);
+    pagination.itemCount = parseInt(total);
     tableData.value = records;
   },
   onError: (error) => {
@@ -226,8 +226,8 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
           createdTime_precisest: now.startOf('date').format('YYYY-MM-DD HH:mm:ss'),
           createdTime_preciseed: now.endOf('date').format('YYYY-MM-DD HH:mm:ss'),
         },
-        current: tablePagination.page ?? 1,
+        current: pagination.page ?? 1,
-        size: tablePagination.pageSize ?? 10,
+        size: pagination.pageSize ?? 10,
         order: 'descending',
         sort: 'id',
       },
@@ -264,11 +264,11 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
     </div>
     <div v-else style="height: 100%; display: flex; flex-direction: column">
       <div style="flex: 0 0 auto; margin-bottom: 16px">
-        <NRow>
+        <NGrid cols="9">
-          <NCol :span="3" v-for="item in classifiedAlarmCounts" :key="item.label">
+          <NGridItem v-for="item in classifiedAlarmCounts" :key="item.label" span="1">
             <NStatistic :label="item.label + '告警'" :value="item.count" />
-          </NCol>
+          </NGridItem>
-        </NRow>
+        </NGrid>
       </div>
       <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px 0">
         <div style="font-size: medium">今日设备告警列表</div>
@@ -278,10 +278,10 @@ const { mutate: exportTableData, isPending: exporting } = useMutation({
       </div>
       <div style="flex: 1 1 auto; min-height: 0">
         <NDataTable
-          :loading="tableLoading"
+          :loading="loading"
           :columns="tableColumns"
           :data="tableData"
-          :pagination="tablePagination"
+          :pagination="pagination"
           :single-line="false"
           remote
           flex-height

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { exportIcmpApi, type Station } from '@/apis';
+import { DeviceType } from '@/enums';
+import { useDeviceStore } from '@/stores';
+import { downloadByData } from '@/utils';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import { NButton, NFlex, NGrid, NGridItem, NModal, NRadio, NRadioGroup, NStatistic } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  stationList: Station[];
+}>();
+
+const show = defineModel<boolean>('show', { default: false });
+
+const emit = defineEmits<{
+  'after-leave': [];
+}>();
+
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
+
+const { stationList } = toRefs(props);
+
+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);
+    return data;
+  },
+  onSuccess: (data, variables) => {
+    const { status } = variables;
+    let fileName = '全部设备列表';
+    if (status === '10') {
+      fileName = '在线设备列表';
+    } else if (status === '20') {
+      fileName = '离线设备列表';
+    }
+    const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+    downloadByData(data, `${fileName}_${time}.xlsx`);
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
+const onlineDeviceCount = computed(() => {
+  let count = 0;
+  for (const station of stationList.value) {
+    if (station.online) {
+      const stationDevices = lineDevices.value[station.code];
+      Object.values(DeviceType).forEach((deviceType) => {
+        const onlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '10') ?? [];
+        count += onlineDeviceList.length;
+      });
+    }
+  }
+  return count;
+});
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  for (const station of stationList.value) {
+    if (station.online) {
+      const stationDevices = lineDevices.value[station.code];
+      Object.values(DeviceType).forEach((deviceType) => {
+        const onlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '20') ?? [];
+        count += onlineDeviceList.length;
+      });
+    }
+  }
+  return count;
+});
+const deviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.value);
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" title="导出设备列表" @after-leave="onAfterLeave" style="width: 800px; height: 300px">
+    <template #default>
+      <NGrid :cols="3" :x-gap="24" :y-gap="8">
+        <NGridItem>
+          <NStatistic label="全部设备" :value="deviceCount" />
+        </NGridItem>
+        <NGridItem>
+          <NStatistic label="在线设备" :value="onlineDeviceCount" :value-style="{ color: '#18a058' }" />
+        </NGridItem>
+        <NGridItem>
+          <NStatistic label="离线设备" :value="offlineDeviceCount" :value-style="{ color: '#d03050' }" />
+        </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>
+
+<style scoped lang="scss"></style>

src/components/station-page/device-params-config-modal.vue

@@ -68,7 +68,7 @@ const getItemSuffix = (name: string) => {
 </script>
 
 <script setup lang="ts">
-import { pageDefParameterApi, updateDefParameterApi, type Station } from '@/apis';
+import { pageDefParameterApi, resetMonitorScheduleApi, updateDefParameterApi, type Station } from '@/apis';
 import { useMutation } from '@tanstack/vue-query';
 import { NForm, NFormItemGi, NGrid, NInputNumber, NModal, NTabPane, NTabs, NTimePicker, NSpin, NFlex } from 'naive-ui';
 import { ref, toRefs } from 'vue';
@@ -201,6 +201,7 @@ const { mutate: saveDeviceParams } = useMutation({
         );
       }
     }
+    await resetMonitorScheduleApi({ stationCode: station.value.code });
   },
   onError: (error) => {
     console.error(error);

src/components/station-page/index.ts

@@ -1,4 +1,7 @@
 export { default as DeviceAlarmDetailModal } from './device-alarm-detail-modal.vue';
+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';
+export { default as SyncCameraResultModal } from './sync-camera-result-modal.vue';

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmDeviceVO, Station, StationDevices } from '@/apis';
 import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal } from '@/enums';
-import { NButton, NCol, NInput, NModal, NRow, NStatistic, NTree, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
+import { NButton, NCol, NGrid, NGridItem, NInput, NModal, NRow, NStatistic, NTree, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
 import { computed, h, ref, toRefs } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -51,7 +51,7 @@ const treeData = computed<TreeOption[]>(() => {
       key: deviceType,
       children: offlineDeviceList.map<TreeOption>((device) => ({
         label: `${device.name}`,
-        key: device.id,
+        key: device.id ?? `${device.name}`,
         suffix: () => `${device.ipAddress ?? '未知IP地址'}`,
         prefix: () => {
           return h(
@@ -114,22 +114,22 @@ const onModalClose = () => {
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" style="width: 800px; height: 600px" :title="`${station?.name} - 离线设备详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
+  <NModal v-model:show="show" preset="card" style="width: 1000px; height: 600px" :title="`${station?.name} - 离线设备详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
     <div v-if="offlineDeviceCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
       <span>当前没有离线设备</span>
     </div>
     <template v-else>
       <div style="height: 100%; display: flex; flex-direction: column">
         <div style="flex: 0 0 auto; margin-bottom: 16px">
-          <NRow>
+          <NGrid :cols="classifiedCounts.length">
-            <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
+            <NGridItem v-for="item in classifiedCounts" :key="item.label">
               <NStatistic :label="item.label">
                 <template #default>
                   <span style="font-size: smaller">{{ `${item.offlineCount}/${item.total}` }}</span>
                 </template>
               </NStatistic>
-            </NCol>
+            </NGridItem>
-          </NRow>
+          </NGrid>
         </div>
         <div style="flex: 1 1 auto; min-height: 0">
           <NInput v-model:value="searchPattern" placeholder="搜索设备名称、设备ID或IP地址" clearable />

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];
@@ -110,18 +113,23 @@ const theme = useThemeVars();
 </script>
 
 <template>
-  <NCard bordered hoverable size="medium" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
+  <NCard bordered hoverable size="medium" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
     <template #header>
-      <NTooltip v-if="station.ip" trigger="click">
+      <template v-if="station.ip">
-        <template #trigger>
+        <NTooltip trigger="click">
-          <span class="font-medium">{{ station.name }}</span>
+          <template #trigger>
-        </template>
+            <span style="font-size: smaller">{{ station.name }}</span>
-        <span>{{ station.ip }}</span>
+          </template>
-      </NTooltip>
+          <span>{{ station.ip }}</span>
-      <span v-else class="font-medium">{{ station.name }}</span>
+        </NTooltip>
+      </template>
+      <template v-else>
+        <span style="font-size: smaller">{{ station.name }}</span>
+      </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>
@@ -134,18 +142,18 @@ const theme = useThemeVars();
     </template>
 
     <template #default>
-      <NFlex vertical :size="6" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
+      <NFlex vertical :size="6" :style="{ opacity: station.online ? '1' : '0.5' }">
-        <NFlex vertical :size="4" class="metric-item">
+        <NFlex vertical :size="4">
-          <NFlex justify="end" align="center" class="metric-line">
+          <NFlex justify="end" align="center">
-            <span class="font-small">{{ deviceCount }} 台设备</span>
+            <span>{{ deviceCount }} 台设备</span>
             <NButton quaternary size="tiny" :focusable="false" @click="openOfflineDeviceTreeModal">
               <NIcon :component="EllipsisOutlined" />
             </NButton>
           </NFlex>
-          <NFlex justify="end" align="center" class="metric-line">
+          <NFlex justify="end" align="center">
-            <span class="font-small">
+            <span>
               <span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">在线 {{ onlineDeviceCount }} 台</span>
-              <NText depth="3" class="sep">·</NText>
+              <span> · </span>
               <span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">离线 {{ offlineDeviceCount }} 台</span>
             </span>
             <NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
@@ -154,9 +162,9 @@ const theme = useThemeVars();
           </NFlex>
         </NFlex>
 
-        <NFlex justify="end" align="center" class="metric-item">
+        <NFlex justify="end" align="center">
           <NFlex align="center" :size="8">
-            <span class="font-small" :style="{ color: alarmCount > 0 ? theme.warningColor : '' }">今日 {{ alarmCount }} 条告警</span>
+            <span :style="{ color: alarmCount > 0 ? theme.warningColor : '' }">今日 {{ alarmCount }} 条告警</span>
             <NButton quaternary size="tiny" :focusable="false" @click="openDeviceAlarmTreeModal">
               <NIcon :component="EllipsisOutlined" />
             </NButton>
@@ -167,26 +175,4 @@ const theme = useThemeVars();
   </NCard>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.font-medium {
-  font-size: medium;
-}
-
-.font-small {
-  font-size: small;
-}
-
-.metrics {
-  padding-top: 4px;
-}
-
-.sep {
-  margin: 0 6px;
-  font-size: xx-small;
-  color: v-bind('theme.textColor3');
-}
-
-.metric-line .font-small {
-  white-space: nowrap;
-}
-</style>

src/components/station-page/sync-camera-result-modal.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { watchDebounced } from '@vueuse/core';
+import { NFlex, NIcon, NList, NListItem, NModal, NScrollbar, NStatistic, NText, NThing } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+import { useStationStore } from '@/stores';
+import { storeToRefs } from 'pinia';
+import type { Station, SyncCameraResult } from '@/apis';
+import { DeleteFilled, EditFilled, PlusCircleFilled } from '@vicons/antd';
+
+const props = defineProps<{
+  syncCameraResult: Record<Station['code'], SyncCameraResult>;
+}>();
+
+const emit = defineEmits<{
+  'after-leave': [];
+}>();
+
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+
+const { syncCameraResult } = toRefs(props);
+
+const show = ref(false);
+
+watchDebounced(
+  [syncCameraResult],
+  ([result]) => {
+    show.value = Object.keys(result).length > 0;
+  },
+  {
+    debounce: 500,
+    deep: true,
+  },
+);
+
+const onAfterLeave = () => {
+  emit('after-leave');
+};
+
+const syncList = computed(() => {
+  return Object.values(syncCameraResult.value).map((sync) => {
+    const { stationCode, startTime, endTime, insertList, updateList, deleteList } = sync;
+    const stationName = stationList.value.find((station) => station.code === stationCode)?.name;
+    return { stationName, startTime, endTime, insertList, updateList, deleteList };
+  });
+});
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" title="摄像机同步结果" style="width: 600px" @after-leave="onAfterLeave">
+    <NScrollbar style="max-height: 400px">
+      <NList hoverable clickable>
+        <NListItem v-for="{ stationName, endTime, insertList, updateList, deleteList } in syncList" :key="stationName">
+          <NThing title-independent>
+            <template #header>
+              <NText strong>{{ stationName }}</NText>
+            </template>
+            <template #header-extra>
+              <NText depth="3"> {{ endTime }} 完成 </NText>
+            </template>
+            <NFlex justify="space-around" :size="24" style="margin-top: 8px">
+              <NStatistic label="新增">
+                <template #prefix>
+                  <NIcon :component="PlusCircleFilled" />
+                </template>
+                {{ insertList.length }}
+              </NStatistic>
+              <NStatistic label="更新">
+                <template #prefix>
+                  <NIcon :component="EditFilled" />
+                </template>
+                {{ updateList.length }}
+              </NStatistic>
+              <NStatistic label="删除">
+                <template #prefix>
+                  <NIcon :component="DeleteFilled" />
+                </template>
+                {{ deleteList.length }}
+              </NStatistic>
+            </NFlex>
+          </NThing>
+        </NListItem>
+      </NList>
+    </NScrollbar>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>

src/composables/query/alarm/index.ts

@@ -1 +0,0 @@
-export * from './use-line-alarms-query';

src/composables/query/device/index.ts

@@ -1 +0,0 @@
-export * from './use-line-devices-query';

src/composables/query/index.ts

@@ -1,4 +1,4 @@
-export * from './alarm';
+export * from './use-line-alarms-query';
-export * from './device';
+export * from './use-line-devices-query';
-export * from './station';
+export * from './use-station-list-query';
-export * from './system';
+export * from './use-version-check-query';

src/composables/query/station/index.ts

@@ -1 +0,0 @@
-export * from './use-station-list-query';

src/composables/query/system/index.ts

@@ -1 +0,0 @@
-export * from './use-version-check-query';

src/composables/query/use-line-alarms-query.ts

@@ -1,7 +1,7 @@
 import { pageDeviceAlarmLogApi, type Station, type StationAlarmCounts } from '@/apis';
 import { LINE_ALARMS_QUERY_KEY } from '@/constants';
 import { DeviceType, tryGetDeviceTypeVal } from '@/enums';
-import { useLineAlarmsStore, useQueryControlStore, useStationStore } from '@/stores';
+import { useAlarmStore, usePollingStore, useStationStore } from '@/stores';
 import { runTask } from '@/utils';
 import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
@@ -10,6 +10,7 @@ import { computed } from 'vue';
 
 const createEmptyStationAlarmCounts = () => {
   return {
+    [DeviceType.AlarmHost]: 0,
     [DeviceType.Camera]: 0,
     [DeviceType.Decoder]: 0,
     [DeviceType.Keyboard]: 0,
@@ -25,8 +26,8 @@ const createEmptyStationAlarmCounts = () => {
 export function useLineAlarmsQuery() {
   const stationStore = useStationStore();
   const { stationList } = storeToRefs(stationStore);
-  const queryControlStore = useQueryControlStore();
+  const pollingStore = usePollingStore();
-  const { alarmQueryStamp } = storeToRefs(queryControlStore);
+  const { alarmQueryStamp } = storeToRefs(pollingStore);
   const { mutateAsync: getStationAlarmCounts } = useStationAlarmCountsMutation();
 
   return useQuery({
@@ -39,10 +40,10 @@ export function useLineAlarmsQuery() {
     queryFn: async ({ signal }) => {
       console.time('useLineALarmCountsQuery');
       for (const station of stationList.value) {
-        await getStationAlarmCounts({ station, signal });
+        await getStationAlarmCounts({ station, signal }).catch(() => {});
       }
       console.timeEnd('useLineALarmCountsQuery');
-      // queryControlStore.updateAlarmQueryUpdatedAt();
+      // pollingStore.updateAlarmQueryUpdatedAt();
       return null;
     },
   });
@@ -54,7 +55,7 @@ interface StationAlarmCountsMutationParams {
 }
 
 function useStationAlarmCountsMutation() {
-  const lineAlarmsStore = useLineAlarmsStore();
+  const lineAlarmsStore = useAlarmStore();
   const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);
 
   return useMutation<StationAlarmCounts, Error, StationAlarmCountsMutationParams>({
@@ -77,7 +78,7 @@ function useStationAlarmCountsMutation() {
           },
           size: 50000,
           current: 1,
-          sort: 'id',
+          sort: 'alarmDate',
           order: 'descending',
         },
         {

src/composables/query/use-line-devices-query.ts

@@ -1,7 +1,7 @@
 import { ndmClient, type Station, type StationDevices } from '@/apis';
 import { LINE_DEVICES_QUERY_KEY } from '@/constants';
 import { DeviceType } from '@/enums';
-import { useLineDevicesStore, useQueryControlStore, useStationStore } from '@/stores';
+import { useDeviceStore, usePollingStore, useStationStore } from '@/stores';
 import { runTask } from '@/utils';
 import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
@@ -9,6 +9,7 @@ import { computed } from 'vue';
 
 const createEmptyStationDevices = (): StationDevices => {
   return {
+    [DeviceType.AlarmHost]: [],
     [DeviceType.Camera]: [],
     [DeviceType.Decoder]: [],
     [DeviceType.Keyboard]: [],
@@ -32,8 +33,8 @@ const getNdmDevicesAll = async (stationCode: string, signal?: AbortSignal) => {
 export function useLineDevicesQuery() {
   const stationStore = useStationStore();
   const { stationList } = storeToRefs(stationStore);
-  const queryControlStore = useQueryControlStore();
+  const pollingStore = usePollingStore();
-  const { deviceQueryStamp } = storeToRefs(queryControlStore);
+  const { deviceQueryStamp } = storeToRefs(pollingStore);
   const { mutateAsync: getStationDevices } = useStationDevicesMutation();
 
   return useQuery({
@@ -46,10 +47,10 @@ export function useLineDevicesQuery() {
     queryFn: async ({ signal }) => {
       console.time('useLineDevicesQuery');
       for (const station of stationList.value) {
-        await getStationDevices({ station, signal });
+        await getStationDevices({ station, signal }).catch(() => {});
       }
       console.timeEnd('useLineDevicesQuery');
-      // queryControlStore.updateDeviceQueryUpdatedAt();
+      // pollingStore.updateDeviceQueryUpdatedAt();
       return null;
     },
   });
@@ -61,7 +62,7 @@ interface StationDevicesMutationParams {
 }
 
 function useStationDevicesMutation() {
-  const lineDevicesStore = useLineDevicesStore();
+  const lineDevicesStore = useDeviceStore();
   const { lineDevices } = storeToRefs(lineDevicesStore);
 
   return useMutation<StationDevices, Error, StationDevicesMutationParams>({

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

@@ -1,6 +1,6 @@
 import { batchVerifyApi, verifyApi, type Station } from '@/apis';
-import { STATION_LIST_QUERY_KEY } from '@/constants';
+import { LINE_STATIONS_QUERY_KEY } from '@/constants';
-import { useQueryControlStore, useStationStore } from '@/stores';
+import { usePollingStore, useStationStore } from '@/stores';
 import { getAppEnvConfig } from '@/utils';
 import { isCancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import axios from 'axios';
@@ -8,22 +8,22 @@ import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 
-export function useStationListQuery() {
+export function useLineStationsQuery() {
-  const queryControlStore = useQueryControlStore();
+  const pollingStore = usePollingStore();
-  const { pollingEnabled } = storeToRefs(queryControlStore);
+  const { pollingEnabled } = storeToRefs(pollingStore);
-  const { mutateAsync: getStationList } = useStationListMutation();
+  const { mutateAsync: getStationList } = useLineStationsMutation();
 
   return useQuery({
-    queryKey: computed(() => [STATION_LIST_QUERY_KEY]),
+    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 });
+      await getStationList({ signal }).catch(() => {});
       console.timeEnd('useStationListQuery');
-      queryControlStore.updateDeviceQueryStamp();
+      pollingStore.updateDeviceQueryStamp();
-      queryControlStore.updateAlarmQueryStamp();
+      pollingStore.updateAlarmQueryStamp();
       return null;
     },
   });
@@ -33,11 +33,11 @@ interface StationListMutationParams {
   signal?: AbortSignal;
 }
 
-function useStationListMutation() {
+function useLineStationsMutation() {
   const stationStore = useStationStore();
   const { stationList } = storeToRefs(stationStore);
-  const queryControlStore = useQueryControlStore();
+  const pollingStore = usePollingStore();
-  const { stationVerifyMode } = storeToRefs(queryControlStore);
+  const { stationVerifyMode } = storeToRefs(pollingStore);
   return useMutation<Station[], Error, StationListMutationParams>({
     mutationFn: async ({ signal }) => {
       const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal });
@@ -45,6 +45,7 @@ function useStationListMutation() {
         code: station.code ?? '',
         name: station.name ?? '',
         online: false,
+        ip: '',
       }));
       if (stationVerifyMode.value === 'concurrent') {
         // 方案一：并发ping所有station
@@ -60,7 +61,7 @@ function useStationListMutation() {
           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/composables/query/use-version-check-query.ts

@@ -1,19 +1,26 @@
-import { type VersionInfo } from '@/apis';
+import { verifyApi, type VersionInfo } from '@/apis';
+import { useUserStore } from '@/stores';
 import { useQuery } from '@tanstack/vue-query';
 import axios from 'axios';
 import { useThemeVars } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { h, ref, watch } from 'vue';
 
 export function useVersionCheckQuery() {
   const localVersionInfo = ref<VersionInfo>();
   const dialogShow = ref<boolean>(false);
   const themeVars = useThemeVars();
+  const userStore = useUserStore();
+  const { userLoginResult } = storeToRefs(userStore);
 
   const { data: remoteVersionInfo, dataUpdatedAt } = useQuery({
     queryKey: ['version-check'],
     refetchInterval: 10 * 1000,
-    queryFn: async () => {
+    queryFn: async ({ signal }) => {
-      const { data } = await axios.get<VersionInfo>(`/manifest.json?t=${Date.now()}`);
+      if (!!userLoginResult.value?.token) {
+        await verifyApi({ signal });
+      }
+      const { data } = await axios.get<VersionInfo>(`/manifest.json?t=${Date.now()}`, { signal });
       return data;
     },
   });

src/composables/stomp/index.ts

@@ -1,6 +1,6 @@
-import type { NdmDeviceAlarmLogResultVO } from '@/apis';
+import type { NdmDeviceAlarmLogResultVO, Station, SyncCameraResult } from '@/apis';
-import { TOPIC_DEVICE_ALARM } from '@/constants';
+import { TOPIC_DEVICE_ALARM, SYNC_CAMERA_STATUS_TOPIC } from '@/constants';
-import { useCurrentAlarmsStore } from '@/stores';
+import { useAlarmStore } from '@/stores';
 import { Client } from '@stomp/stompjs';
 import { destr } from 'destr';
 import { storeToRefs } from 'pinia';
@@ -15,10 +15,12 @@ const getBrokerUrl = () => {
 };
 
 export const useStompClient = () => {
-  const currentAlarmsStore = useCurrentAlarmsStore();
+  const alarmStore = useAlarmStore();
-  const { currentAlarmCount } = storeToRefs(currentAlarmsStore);
+  const { unreadAlarmCount } = storeToRefs(alarmStore);
   const stompClient = ref<Client | null>(null);
 
+  const syncCameraResult = ref<Record<Station['code'], SyncCameraResult>>({});
+
   onMounted(() => {
     stompClient.value = new Client({
       brokerURL: getBrokerUrl(),
@@ -30,13 +32,18 @@ export const useStompClient = () => {
         stompClient.value?.subscribe(TOPIC_DEVICE_ALARM, (message) => {
           const alarm = destr<NdmDeviceAlarmLogResultVO>(message.body);
           if (alarm.alarmCategory === '1') {
-            currentAlarmCount.value++;
+            unreadAlarmCount.value++;
           }
         });
+        stompClient.value?.subscribe(SYNC_CAMERA_STATUS_TOPIC, (message) => {
+          const { stationCode, startTime, endTime, insertList, updateList, deleteList } = destr<SyncCameraResult>(message.body);
+          syncCameraResult.value[stationCode] = { stationCode, startTime, endTime, insertList, updateList, deleteList };
+        });
       },
       onDisconnect: () => {
         console.log('Stomp连接断开');
         stompClient.value?.unsubscribe(TOPIC_DEVICE_ALARM);
+        stompClient.value?.unsubscribe(SYNC_CAMERA_STATUS_TOPIC);
       },
       onStompError: (frame) => {
         console.log('Stomp错误', frame);
@@ -57,5 +64,10 @@ export const useStompClient = () => {
 
   return {
     stompClient,
+
+    syncCameraResult,
+    afterCheckSyncCamera: () => {
+      syncCameraResult.value = {};
+    },
   };
 };

src/constants/device.ts

@@ -1 +0,0 @@
-export const NDM_SWITCH_PROBE_INTERVAL = 5;

src/constants/index.ts

@@ -1,4 +1,2 @@
-export * from './device';
-export * from './java';
 export * from './query';
 export * from './stomp';

src/constants/java.ts

@@ -1,2 +0,0 @@
-export const JAVA_INTEGER_MAX_VALUE = 2147483647;
-export const JAVA_UNSIGNED_INTEGER_MAX_VALUE = 4294967295;

src/constants/query.ts

@@ -1,4 +1,3 @@
-export const STATION_LIST_QUERY_KEY = 'station-list';
+export const LINE_STATIONS_QUERY_KEY = 'line-stations';
 export const LINE_DEVICES_QUERY_KEY = 'line-devices';
 export const LINE_ALARMS_QUERY_KEY = 'line-alarms';
-export const DEVICE_SNMP_LOGS_QUERY_KEY = 'device-snmp-logs';

src/constants/stomp.ts

@@ -1 +1,3 @@
 export const TOPIC_DEVICE_ALARM = '/topic/deviceAlarm';
+
+export const SYNC_CAMERA_STATUS_TOPIC = '/topic/syncCameraStatus';

src/enums/device-type.ts

@@ -7,6 +7,7 @@ export const DeviceType = {
   MediaServer: 'ndmMediaServer',
   VideoServer: 'ndmVideoServer',
   Keyboard: 'ndmKeyboard',
+  AlarmHost: 'ndmAlarmHost',
 } as const;
 
 export type DeviceTypeKey = keyof typeof DeviceType;
@@ -21,6 +22,7 @@ export const DeviceTypeCode: Record<DeviceTypeVal, string[]> = {
   [DeviceType.MediaServer]: ['403'],
   [DeviceType.VideoServer]: ['401'],
   [DeviceType.Keyboard]: ['141'],
+  [DeviceType.AlarmHost]: ['117'],
 };
 
 export const DeviceTypeName: Record<DeviceTypeVal, string> = {
@@ -32,6 +34,7 @@ export const DeviceTypeName: Record<DeviceTypeVal, string> = {
   [DeviceType.MediaServer]: '媒体服务器',
   [DeviceType.VideoServer]: '视频服务器',
   [DeviceType.Keyboard]: '网络键盘',
+  [DeviceType.AlarmHost]: '报警主机',
 };
 
 /**

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/helper/switch-port.ts

@@ -0,0 +1,26 @@
+import type { NdmSwitchPortInfo } from '@/apis';
+
+export const getPortStatusVal = (portInfo: NdmSwitchPortInfo): string => {
+  const { upDown } = portInfo;
+  return upDown === 1 ? '启用' : upDown === 2 ? '禁用' : '未知';
+};
+
+export const transformPortSpeed = (portInfo: NdmSwitchPortInfo, type: 'in' | 'out' | 'total'): string => {
+  const units = ['b/s', 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s'];
+  const { inFlow, outFlow, flow } = portInfo;
+  let result: number = 0;
+  if (type === 'in') {
+    result = inFlow;
+  } else if (type === 'out') {
+    result = outFlow;
+  } else if (type === 'total') {
+    result = flow;
+  }
+  let index = 0;
+  while (result >= 1024 && index < units.length - 1) {
+    result /= 1024;
+    index++;
+  }
+  result *= 8;
+  return `${result.toFixed(3)} ${units[index]}`;
+};

src/layouts/app-layout.vue

@@ -5,28 +5,46 @@ function renderIcon(icon: Component): () => VNode {
 </script>
 
 <script setup lang="ts">
-import { SettingsDrawer } from '@/components';
+import { SettingsDrawer, SyncCameraResultModal } from '@/components';
 import { useStompClient } from '@/composables';
-import { useStationListQuery } from '@/composables';
+import { useLineStationsQuery } from '@/composables';
-import { STATION_LIST_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
+import { LINE_STATIONS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
-import { useCurrentAlarmsStore, useUserStore } from '@/stores';
+import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
 import { useIsFetching } from '@tanstack/vue-query';
-import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, FundFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
+import {
+  AlertFilled,
+  BugFilled,
+  CaretDownFilled,
+  DoubleLeftOutlined,
+  DoubleRightOutlined,
+  EnvironmentFilled,
+  /* AreaChartOutlined, */ FileTextFilled,
+  HddFilled,
+  LogoutOutlined,
+  SettingOutlined,
+} from '@vicons/antd';
 import type { AxiosError } from 'axios';
 import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { computed, h, onBeforeMount, ref, watch, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 
-useStompClient();
+const { syncCameraResult, afterCheckSyncCamera } = useStompClient();
 
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
 
-const currentAlarmsStore = useCurrentAlarmsStore();
+const alarmStore = useAlarmStore();
-const { currentAlarmCount, needReload } = storeToRefs(currentAlarmsStore);
+const { unreadAlarmCount } = storeToRefs(alarmStore);
 
-const { error: stationListQueryError } = useStationListQuery();
+const settingStore = useSettingStore();
+const { menuCollpased } = storeToRefs(settingStore);
+
+const onToggleMenuCollapsed = () => {
+  menuCollpased.value = !menuCollpased.value;
+};
+
+const { error: stationListQueryError } = useLineStationsQuery();
 
 watch(stationListQueryError, (newStationListQueryError) => {
   if (newStationListQueryError) {
@@ -34,11 +52,11 @@ watch(stationListQueryError, (newStationListQueryError) => {
   }
 });
 
-const stationListFetchingCount = useIsFetching({ queryKey: [STATION_LIST_QUERY_KEY] });
+const lineStationsFetchingCount = useIsFetching({ queryKey: [LINE_STATIONS_QUERY_KEY] });
 const lineDevicesFetchingCount = useIsFetching({ queryKey: [LINE_DEVICES_QUERY_KEY] });
 const lineAlarmsFetchingCount = useIsFetching({ queryKey: [LINE_ALARMS_QUERY_KEY] });
 const fetchingCount = computed(() => {
-  return stationListFetchingCount.value + lineDevicesFetchingCount.value + lineAlarmsFetchingCount.value;
+  return lineStationsFetchingCount.value + lineDevicesFetchingCount.value + lineAlarmsFetchingCount.value;
 });
 
 onBeforeMount(() => {
@@ -49,11 +67,6 @@ const route = useRoute();
 const router = useRouter();
 
 const menuOptions = ref<MenuOption[]>([
-  {
-    label: () => h(RouterLink, { to: '/dashboard' }, { default: () => '全线总概览' }),
-    key: '/dashboard',
-    icon: renderIcon(FundFilled),
-  },
   {
     label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
     key: '/station',
@@ -119,12 +132,13 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
   }
 };
 
-const toDashboardPage = () => router.push('/');
+const routeToRoot = () => {
-const toAlarmPage = () => {
+  router.push('/');
-  currentAlarmCount.value = 0;
+};
-  if (route.path === '/alarm') {
+
-    needReload.value = true;
+const routeToAlarmPage = () => {
-  } else {
+  unreadAlarmCount.value = 0;
+  if (route.path !== '/alarm') {
     router.push('/alarm');
   }
 };
@@ -138,18 +152,24 @@ const openSettingsDrawer = () => {
 <template>
   <NScrollbar x-scrollable style="width: 100vw; height: 100vh">
     <NLayout has-sider :content-style="{ 'min-width': '1400px' }">
-      <NLayoutSider bordered collapsed :collapse-mode="'width'" :collapsed-width="60">
+      <NLayoutSider bordered :collapsed="menuCollpased" collapse-mode="width" :collapsed-width="64" @update:collapsed="onToggleMenuCollapsed">
-        <NMenu collapsed :collapsed-width="60" :collapsed-icon-size="18" :value="route.path" :options="menuOptions" />
+        <NFlex vertical justify="space-between" :size="0" style="height: 100%">
+          <NMenu :collapsed="menuCollpased" :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
+          <NButton block quaternary :focusable="false" @click="onToggleMenuCollapsed">
+            <template #icon>
+              <NIcon :component="menuCollpased ? DoubleRightOutlined : DoubleLeftOutlined" />
+            </template>
+          </NButton>
+        </NFlex>
       </NLayoutSider>
       <NLayout :native-scrollbar="false">
         <NLayoutHeader bordered class="app-layout-header">
           <NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
             <NFlex>
-              <div style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="toDashboardPage">网络设备管理平台</div>
+              <div style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="routeToRoot">网络设备管理平台</div>
               <NButton text size="tiny" :loading="fetchingCount > 0" />
             </NFlex>
             <NFlex align="center" :size="0" style="height: 100%">
-              <!-- <ThemeSwitch /> -->
               <NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
                 <NButton :focusable="false" quaternary icon-placement="right" style="height: 100%">
                   <template #default>
@@ -173,8 +193,8 @@ const openSettingsDrawer = () => {
         </NLayoutContent>
         <NLayoutFooter bordered class="app-layout-footer">
           <NFlex :align="'center'" style="height: 100%; margin: 0 16px">
-            <NBadge :value="currentAlarmCount">
+            <NBadge :value="unreadAlarmCount">
-              <NButton secondary strong @click="toAlarmPage">
+              <NButton secondary strong @click="routeToAlarmPage">
                 <template #icon>
                   <NIcon :component="AlertFilled" />
                 </template>
@@ -185,7 +205,10 @@ const openSettingsDrawer = () => {
       </NLayout>
     </NLayout>
   </NScrollbar>
+
   <SettingsDrawer v-model:show="settingsDrawerShow" />
+
+  <SyncCameraResultModal :sync-camera-result="syncCameraResult" @after-leave="afterCheckSyncCamera" />
 </template>
 
 <style scoped lang="scss">

src/pages/alarm-page.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
-import { getCameraSnapApi, exportDeviceAlarmLogApi, pageDeviceAlarmLogApi, updateDeviceAlarmLogApi, type NdmDeviceAlarmLogResultVO } from '@/apis';
+import {
-import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components';
+  getCameraSnapApi,
+  exportDeviceAlarmLogApi,
+  pageDeviceAlarmLogApi,
+  updateDeviceAlarmLogApi,
+  pageCameraIgnoreApi,
+  saveCameraIgnoreApi,
+  removeCameraIgnoreApi,
+  type NdmDeviceAlarmLogResultVO,
+} from '@/apis';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/helper';
 import { AlarmType, DeviceType, DeviceTypeCode, DeviceTypeName, FaultLevel, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
-import { useCurrentAlarmsStore, useStationStore } from '@/stores';
+import { useAlarmStore, useStationStore } from '@/stores';
 import { downloadByData } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
+import { CheckOutlined, EyeInvisibleOutlined, EyeOutlined } from '@vicons/antd';
+import { watchDebounced } from '@vueuse/core';
 import dayjs from 'dayjs';
 import {
   NForm,
@@ -17,7 +28,6 @@ import {
   NSelect,
   NGridItem,
   NDatePicker,
-  NTag,
   NPopconfirm,
   NModal,
   NImage,
@@ -25,19 +35,38 @@ import {
   type DataTableColumns,
   type DataTableRowData,
   type PaginationProps,
+  NFlex,
+  NSwitch,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, reactive, onBeforeMount, h, computed, watch } from 'vue';
 
-const currentAlarmsStore = useCurrentAlarmsStore();
+const alarmStore = useAlarmStore();
-const { needReload } = storeToRefs(currentAlarmsStore);
+const { unreadAlarmCount } = storeToRefs(alarmStore);
-watch(needReload, async (newVal) => {
+
-  if (newVal) {
+const unreadCountCleared = computed(() => unreadAlarmCount.value === 0);
-    needReload.value = false;
+
+// 未读告警数量被清零时，代表需要刷新告警表格数据
+watch(unreadCountCleared, (newValue, oldValue) => {
+  if (!oldValue && newValue) {
     onClickReset();
   }
 });
 
+const realtimeRefresh = ref(false);
+
+watchDebounced(
+  [unreadAlarmCount, realtimeRefresh],
+  ([unreadCount, refresh]) => {
+    if (unreadCount > 0 && refresh) {
+      getTableData();
+    }
+  },
+  {
+    debounce: 500,
+  },
+);
+
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 
@@ -116,6 +145,9 @@ const snapPreviewShow = ref(false);
 const snapPreviewUrl = ref('');
 
 const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO & { snapUrl: string }> = [
+  // { title: '设备ID', key: 'deviceId' },
+  // { title: '故障编码', key: 'faultCode', align: 'center' },
+  // { title: '故障位置', key: 'faultLocation' },
   { title: '告警流水号', key: 'alarmNo' },
   {
     title: '告警时间',
@@ -148,8 +180,6 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO & { snapUrl: stri
     align: 'center',
     render: renderFaultLevelCell,
   },
-  // { title: '故障编码', key: 'faultCode', align: 'center' },
-  // { title: '故障位置', key: 'faultLocation' },
   { title: '故障描述', key: 'faultDescription' },
   { title: '修复建议', key: 'alarmRepairSuggestion' },
   {
@@ -198,30 +228,59 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO & { snapUrl: stri
     },
   },
   {
-    title: '告警确认',
+    title: '操作',
-    key: 'alarmConfirm',
+    key: 'action',
     align: 'center',
     render: (rowData) => {
-      if (rowData.alarmConfirm === '1') {
-        return h(NTag, { type: 'default' }, { default: () => '已确认' });
-      }
       const { id } = rowData;
       return h(
-        NPopconfirm,
+        NFlex,
         {
-          onPositiveClick: () => {
+          size: 'small',
-            rowData.alarmConfirm = '1';
+          justify: 'center',
-            confirmAlarm({ id });
+          align: 'center',
-          },
         },
         {
-          trigger: () => h(NButton, { type: 'info', size: 'small' }, { default: () => '确认' }),
+          default: () => [
-          default: () => '确认告警？',
+            rowData.alarmConfirm === '1'
+              ? h(NButton, { disabled: true, text: true, type: 'info', size: 'small' }, { icon: () => h(CheckOutlined) })
+              : h(
+                  NPopconfirm,
+                  {
+                    onPositiveClick: () => confirmAlarm({ id }),
+                  },
+                  {
+                    trigger: () => h(NButton, { text: true, type: 'info', size: 'small' }, { icon: () => h(CheckOutlined) }),
+                    default: () => '确认告警？',
+                  },
+                ),
+            tryGetDeviceTypeVal(rowData.deviceType) === DeviceType.Camera && [
+              h(
+                NPopconfirm,
+                {
+                  onPositiveClick: () => ignoreCamera({ id }),
+                },
+                {
+                  trigger: () => h(NButton, { text: true, type: 'info', size: 'small' }, { icon: () => h(EyeInvisibleOutlined) }),
+                  default: () => '忽略设备？',
+                },
+              ),
+              h(
+                NPopconfirm,
+                {
+                  onPositiveClick: () => noticeCamera({ id }),
+                },
+                {
+                  trigger: () => h(NButton, { text: true, type: 'info', size: 'small' }, { icon: () => h(EyeOutlined) }),
+                  default: () => '取消忽略设备？',
+                },
+              ),
+            ],
+          ],
         },
       );
     },
   },
-  // { title: '设备ID', key: 'deviceId' },
 ];
 
 const tableData = ref<DataTableRowData[]>([]);
@@ -283,6 +342,7 @@ const onClickQuery = () => {
     tablePagination.pageSize = 10;
     searchFieldsChanged.value = false;
   }
+  realtimeRefresh.value = false;
   getTableData();
 };
 
@@ -302,8 +362,15 @@ const { mutateAsync: getSnapByDeviceId } = useMutation({
 
 const { mutate: confirmAlarm } = useMutation({
   mutationFn: async (params: { id?: string }) => {
+    const { id } = params;
+    if (id) {
+      const alarmLog = tableData.value.find((item) => item.id === id);
+      if (alarmLog) {
+        alarmLog['alarmConfirm'] = '1';
+      }
+    }
     await updateDeviceAlarmLogApi({
-      id: params.id,
+      id,
       alarmConfirm: '1',
     });
   },
@@ -320,6 +387,61 @@ const { mutate: confirmAlarm } = useMutation({
   },
 });
 
+const { mutate: ignoreCamera } = useMutation({
+  mutationFn: async (params: { id?: string }) => {
+    const { id } = params;
+    if (!id) return;
+    const alarmLog = tableData.value.find((item) => item.id === id);
+    if (!alarmLog) return;
+    const { records } = await pageCameraIgnoreApi({
+      model: { deviceId: alarmLog.deviceId },
+      extra: {},
+      current: 1,
+      size: 10,
+      sort: 'id',
+      order: 'descending',
+    });
+    const ignoredCamera = records.at(0);
+    if (ignoredCamera) {
+      window.$message.info('设备已被忽略');
+      return;
+    }
+    await saveCameraIgnoreApi({ deviceId: alarmLog.deviceId });
+    window.$message.success('忽略设备成功');
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
+const { mutate: noticeCamera } = useMutation({
+  mutationFn: async (params: { id?: string }) => {
+    const { id } = params;
+    if (!id) return;
+    const alarmLog = tableData.value.find((item) => item.id === id);
+    if (!alarmLog) return;
+    const { records } = await pageCameraIgnoreApi({
+      model: { deviceId: alarmLog.deviceId },
+      extra: {},
+      current: 1,
+      size: 10,
+      sort: 'id',
+      order: 'descending',
+    });
+    if (records.length === 0) {
+      window.$message.info('设备未被忽略');
+      return;
+    }
+    await removeCameraIgnoreApi([...records.map((record) => record.id ?? '')]);
+    window.$message.success('取消忽略设备成功');
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
 const { mutate: exportTableData, isPending: exporting } = useMutation({
   mutationFn: async () => {
     const data = await exportDeviceAlarmLogApi({
@@ -425,9 +547,11 @@ onBeforeMount(() => getTableData());
     <!-- 工具栏：横向、右对齐按钮） -->
     <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px">
       <div style="font-size: medium">设备告警列表</div>
-      <NSpace style="margin-left: auto">
+      <NFlex align="center" style="margin-left: auto">
+        <div>实时刷新</div>
+        <NSwitch size="small" v-model:value="realtimeRefresh" />
         <NButton type="primary" :loading="exporting" @click="() => exportTableData()">导出</NButton>
-      </NSpace>
+      </NFlex>
     </div>
 
     <!-- 表格区域：填满剩余空间 -->

src/pages/dashboard-page.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { exportIcmpApi } from '@/apis';
-import { DeviceStatisticCard } from '@/components';
-import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
-import { useLineDevicesStore, useStationStore } from '@/stores';
-import { downloadByData } from '@/utils';
-import { useMutation } from '@tanstack/vue-query';
-import dayjs from 'dayjs';
-import { storeToRefs } from 'pinia';
-import { watch } from 'vue';
-
-const stationStore = useStationStore();
-const { stationList } = storeToRefs(stationStore);
-const lineDevicesStore = useLineDevicesStore();
-const { lineDevices } = storeToRefs(lineDevicesStore);
-
-const { error: lineDevicesQueryError } = useLineDevicesQuery();
-const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
-
-watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
-  if (newLineDevicesQueryError) {
-    window.$message.error(newLineDevicesQueryError.message);
-  }
-  if (newLineAlarmsQueryError) {
-    window.$message.error(newLineAlarmsQueryError.message);
-  }
-});
-
-const { mutate: exportDevices, isPending: exporting } = useMutation({
-  mutationFn: async (params: { status: string }) => {
-    const data = await exportIcmpApi(params.status);
-    return data;
-  },
-  onSuccess: (data, variables) => {
-    const { status } = variables;
-    let fileName = '全部设备列表';
-    if (status === '10') {
-      fileName = '在线设备列表';
-    } else if (status === '20') {
-      fileName = '离线设备列表';
-    }
-    const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
-    downloadByData(data, `${fileName}_${time}.xlsx`);
-  },
-  onError: (error) => {
-    console.error(error);
-    window.$message.error(error.message);
-  },
-});
-</script>
-
-<template>
-  <DeviceStatisticCard
-    :station-list="stationList"
-    :line-devices="lineDevices"
-    :button-loading="exporting"
-    @export-all="() => exportDevices({ status: '' })"
-    @export-online="() => exportDevices({ status: '10' })"
-    @export-offline="() => exportDevices({ status: '20' })"
-  />
-</template>
-
-<style scoped lang="scss"></style>

src/pages/debug-page.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useQueryControlStore } from '@/stores';
+import { usePollingStore } from '@/stores';
 import { NLayout, NLayoutContent } from 'naive-ui';
 import { onBeforeUnmount } from 'vue';
 
-const queryControlStore = useQueryControlStore();
+const pollingStore = usePollingStore();
-queryControlStore.disablePolling();
+pollingStore.disablePolling();
 onBeforeUnmount(() => {
-  queryControlStore.enablePolling();
+  pollingStore.enablePolling();
 });
 </script>
 

src/pages/device-page.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { DeviceRenderer, DeviceTree } from '@/components';
 import { useDeviceSelection, useLineDevicesQuery } from '@/composables';
-import { useLineDevicesStore, useStationStore } from '@/stores';
+import { useDeviceStore, useStationStore } from '@/stores';
 import { ChevronBack } from '@vicons/ionicons5';
 import { watchDebounced } from '@vueuse/core';
 import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar } from 'naive-ui';
@@ -13,7 +13,7 @@ import { useRoute, useRouter } from 'vue-router';
 const { error: lineDevicesQueryError } = useLineDevicesQuery();
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
-const lineDevicesStore = useLineDevicesStore();
+const lineDevicesStore = useDeviceStore();
 const { lineDevices } = storeToRefs(lineDevicesStore);
 
 const route = useRoute();

src/pages/station-page.vue

@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import type { Station } from '@/apis';
+import { syncCameraApi, syncNvrChannelsApi, type Station } from '@/apis';
-import { DeviceAlarmDetailModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
+import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, RecordCheckExportModal, StationCard } from '@/components';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
-import { useLayoutStore, useLineAlarmsStore, useLineDevicesStore, useStationStore } from '@/stores';
+import { useAlarmStore, useDeviceStore, usePollingStore, useSettingStore, useStationStore } from '@/stores';
-import { NGrid, NGi } 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);
-const lineDevicesStore = useLineDevicesStore();
+const deviceStore = useDeviceStore();
-const { lineDevices } = storeToRefs(lineDevicesStore);
+const { lineDevices } = storeToRefs(deviceStore);
-const lineAlarmsStore = useLineAlarmsStore();
+const alarmStore = useAlarmStore();
-const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);
+const { lineAlarmCounts } = storeToRefs(alarmStore);
+const settingStore = useSettingStore();
+const { stationGridColumns } = storeToRefs(settingStore);
+const pollingStore = usePollingStore();
 
 const { error: lineDevicesQueryError } = useLineDevicesQuery();
 const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
-const layoutStore = useLayoutStore();
-const { stationGridColumns } = storeToRefs(layoutStore);
 
 watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
   if (newLineDevicesQueryError) {
@@ -28,44 +30,205 @@ 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 stationSelection = ref<Record<Station['code'], boolean>>({});
+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 === null) return;
+  showOperation.value = true;
+  stationSelectable.value = true;
+};
+
+const onCancel = () => {
+  selectedAction.value = null;
+  showOperation.value = false;
+  stationSelectable.value = false;
+  stationSelection.value = {};
+};
+
+const onFinish = onCancel;
+
+const { mutate: syncCamera, isPending: cameraSyncing } = useMutation({
+  mutationFn: async () => {
+    const stationCodes = Object.entries(stationSelection.value)
+      .filter(([, selected]) => selected)
+      .map(([code]) => code);
+    const results = await Promise.allSettled(stationCodes.map((stationCode) => syncCameraApi({ stationCode })));
+    return results.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
+  },
+  onSuccess: (results) => {
+    const successCount = results.filter((result) => result.status === 'fulfilled').length;
+    const failures = results.filter((result) => result.status === 'rejected');
+    const failureCount = failures.length;
+    if (failureCount > 0) {
+      const failedStations = failures.map((f) => stationList.value.find((s) => s.code === f.stationCode)?.name).join('、');
+      if (successCount === 0) {
+        window.$message.error('摄像机同步全部失败');
+        window.$message.error(`${failedStations}`);
+      } else {
+        window.$message.warning(`摄像机同步完成：成功${successCount}个车站，失败${failureCount}个车站`);
+        window.$message.warning(`${failedStations}`);
+      }
+    } else {
+      window.$message.success('摄像机同步成功');
+    }
+    if (successCount > 0) {
+      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);
+    const results = await Promise.allSettled(stationCodes.map((stationCode) => syncNvrChannelsApi({ stationCode })));
+    return results.map((result, index) => ({ ...result, stationCode: stationCodes[index] }));
+  },
+  onSuccess: (results) => {
+    const successCount = results.filter((result) => result.status === 'fulfilled').length;
+    const failures = results.filter((result) => result.status === 'rejected');
+    const failureCount = failures.length;
+    if (failureCount > 0) {
+      const failedStations = failures.map((f) => stationList.value.find((s) => s.code === f.stationCode)?.name).join('、');
+      if (successCount === 0) {
+        window.$message.error('录像机通道同步全部失败');
+        window.$message.error(`${failedStations}`);
+      } else {
+        window.$message.warning(`录像机通道同步完成：成功${successCount}个车站，失败${failureCount}个车站`);
+        window.$message.warning(`${failedStations}`);
+      }
+    } else {
+      window.$message.success('录像机通道同步成功');
+    }
+    onFinish();
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+    onCancel();
+  },
+});
+
+const confirming = computed(() => cameraSyncing.value || nvrChannelsSyncing.value);
+
+const onConfirm = async () => {
+  const noStationSelected = !Object.values(stationSelection.value).some((selected) => selected);
+  if (selectedAction.value === 'export-icmp') {
+    if (noStationSelected) {
+      window.$message.warning('请选择要导出设备状态的车站');
+      return;
+    }
+    showIcmpExportModal.value = true;
+  } else if (selectedAction.value === 'export-record') {
+    if (noStationSelected) {
+      window.$message.warning('请选择要导出录像诊断的车站');
+      return;
+    }
+    showRecordCheckExportModal.value = true;
+  } else if (selectedAction.value === 'sync-camera') {
+    if (noStationSelected) {
+      window.$message.warning('请选择要同步摄像机的车站');
+      return;
+    }
+    syncCamera();
+  } else if (selectedAction.value === 'sync-nvr') {
+    if (noStationSelected) {
+      window.$message.warning('请选择要同步录像机通道的车站');
+      return;
+    }
+    syncNvrChannels();
+  } else {
+    return;
+  }
+};
+
+// 车站卡片的事件
 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>
-  <NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
+  <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
-    <NGi v-for="station in stationList" :key="station.code">
+    <!-- 工具栏 -->
-      <StationCard
+    <NFlex align="center" style="padding: 8px 8px 0 8px">
-        :station="station"
+      <NButtonGroup>
-        :station-devices="lineDevices[station.code]"
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-icmp'" @click="() => onAction('export-icmp')">导出设备状态</NButton>
-        :station-alarm-counts="lineAlarmCounts[station.code]"
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'export-record'" @click="() => onAction('export-record')">导出录像诊断</NButton>
-        @open-offline-device-detail-modal="openOfflineDeviceDetailModal"
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-camera'" @click="() => onAction('sync-camera')">同步摄像机</NButton>
-        @open-device-alarm-detail-modal="openDeviceAlarmDetailModal"
+        <NButton secondary :focusable="false" :disabled="!!selectedAction && selectedAction !== 'sync-nvr'" @click="() => onAction('sync-nvr')">同步录像机通道</NButton>
-        @open-device-params-config-modal="openDeviceParamsConfigModal"
+      </NButtonGroup>
-      />
+      <template v-if="showOperation">
-    </NGi>
+        <NCheckbox label="全选" @update:checked="onToggleSelectAll" />
-  </NGrid>
+        <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"
+        />
+      </NGi>
+    </NGrid>
+  </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="showIcmpExportModal" :station-list="stationList.filter((station) => stationSelection[station.code])" @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/router/index.ts

@@ -11,11 +11,11 @@ const router = createRouter({
     {
       path: '/',
       component: () => import('@/layouts/app-layout.vue'),
-      redirect: '/dashboard',
+      redirect: '/station',
       children: [
         {
           path: 'dashboard',
-          component: () => import('@/pages/dashboard-page.vue'),
+          redirect: 'station',
         },
         {
           path: 'station',

src/stores/alarm.ts

@@ -2,10 +2,13 @@ import type { LineAlarmCounts } from '@/apis';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
-export const useLineAlarmsStore = defineStore('ndm-line-alarms-store', () => {
+export const useAlarmStore = defineStore('ndm-alarm-store', () => {
   const lineAlarmCounts = ref<LineAlarmCounts>({});
 
+  const unreadAlarmCount = ref(0);
+
   return {
     lineAlarmCounts,
+    unreadAlarmCount,
   };
 });

src/stores/current-alarms.ts

@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-export const useCurrentAlarmsStore = defineStore('ndm-current-alarms-store', () => {
-  const currentAlarmCount = ref(0);
-  const needReload = ref(false);
-
-  return {
-    currentAlarmCount,
-    needReload,
-  };
-});

src/stores/debug-mode.ts

@@ -1,24 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-export const useDebugModeStore = defineStore(
-  'ndm-debug-mode-store',
-  () => {
-    const debugEnabled = ref(false);
-
-    const enableDebug = () => (debugEnabled.value = true);
-    const disableDebug = () => (debugEnabled.value = false);
-
-    return {
-      debugEnabled,
-      enableDebug,
-      disableDebug,
-    };
-  },
-  {
-    persist: {
-      pick: ['debugEnabled'],
-      storage: window.sessionStorage,
-    },
-  },
-);

src/stores/device.ts

@@ -3,14 +3,14 @@ import { tryGetDeviceTypeVal } from '@/enums';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
-export const useLineDevicesStore = defineStore('ndm-line-devices-store', () => {
+export const useDeviceStore = defineStore('ndm-device-store', () => {
   const lineDevices = ref<LineDevices>({});
 
   const patch = (stationCode: string, device: NdmDeviceResultVO) => {
     const deviceTypeVal = tryGetDeviceTypeVal(device.deviceType);
     if (!!deviceTypeVal) {
       if (lineDevices.value[stationCode]) {
-        const index = lineDevices.value[stationCode][deviceTypeVal].findIndex((d) => d.id === device.id);
+        const index = lineDevices.value[stationCode][deviceTypeVal].findIndex((dev) => dev.id === device.id);
         if (index > -1) {
           lineDevices.value[stationCode][deviceTypeVal][index] = device;
         }

src/stores/index.ts

@@ -1,9 +1,6 @@
-export * from './current-alarms';
+export * from './alarm';
-export * from './debug-mode';
+export * from './device';
-export * from './layout';
+export * from './polling';
-export * from './line-alarms';
-export * from './line-devices';
-export * from './query-control';
 export * from './station';
-export * from './theme';
+export * from './setting';
 export * from './user';

src/stores/layout.ts

@@ -1,16 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-export const useLayoutStore = defineStore(
-  'ndm-layout-store',
-  () => {
-    const stationGridColumns = ref(6);
-
-    return {
-      stationGridColumns,
-    };
-  },
-  {
-    persist: true,
-  },
-);

src/stores/polling.ts

@@ -1,13 +1,25 @@
+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';
 
-export const useQueryControlStore = defineStore(
+export const usePollingStore = defineStore(
-  'ndm-query-control-store',
+  '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);

src/stores/setting.ts

@@ -0,0 +1,50 @@
+import { darkTheme, lightTheme } from 'naive-ui';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useSettingStore = defineStore(
+  'ndm-setting-store',
+  () => {
+    const darkThemeEnabled = ref(true);
+    const themeMode = computed(() => {
+      return darkThemeEnabled.value ? darkTheme : lightTheme;
+    });
+
+    const menuCollpased = ref(false);
+
+    const stationGridColumns = ref(6);
+
+    const debugModeEnabled = ref(false);
+    const enableDebugMode = () => {
+      debugModeEnabled.value = true;
+    };
+    const disableDebugMode = () => {
+      debugModeEnabled.value = false;
+    };
+
+    return {
+      darkThemeEnabled,
+      themeMode,
+
+      menuCollpased,
+
+      stationGridColumns,
+
+      debugModeEnabled,
+      enableDebugMode,
+      disableDebugMode,
+    };
+  },
+  {
+    persist: [
+      {
+        omit: ['debugModeEnabled'],
+        storage: window.localStorage,
+      },
+      {
+        pick: ['debugModeEnabled'],
+        storage: window.sessionStorage,
+      },
+    ],
+  },
+);

src/stores/theme.ts

@@ -1,21 +0,0 @@
-import { ref, computed } from 'vue';
-import { defineStore } from 'pinia';
-import { darkTheme, lightTheme } from 'naive-ui';
-
-export const useThemeStore = defineStore(
-  'ndm-theme-store',
-  () => {
-    const darkThemeEnabled = ref(true);
-    const themeMode = computed(() => {
-      return darkThemeEnabled.value ? darkTheme : lightTheme;
-    });
-
-    return {
-      darkThemeEnabled,
-      themeMode,
-    };
-  },
-  {
-    persist: true,
-  },
-);

src/stores/user.ts

@@ -6,7 +6,7 @@ import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import dayjs from 'dayjs';
 import { useStationStore } from './station';
-import { useQueryControlStore } from './query-control';
+import { usePollingStore } from './polling';
 
 const getHeaders = () => {
   const { lampAuthorization, lampClientId, lampClientSecret } = getAppEnvConfig();
@@ -131,8 +131,8 @@ export const useUserStore = defineStore(
             window.location.reload();
           },
         });
-        const queryControlStore = useQueryControlStore();
+        const pollingStore = usePollingStore();
-        queryControlStore.disablePolling();
+        pollingStore.disablePolling();
         throw new AxiosError(respData.msg, `${respData.code}`);
       } else {
         if (lampLoginResultRecord.value === null) {

src/utils/request-client.ts

@@ -106,7 +106,7 @@ export class RequestClient {
     const reqConfig = option ?? {};
     return new Promise((resolve) => {
       this.instance
-        .delete<Result<T>>(url, { ...reqConfig, data: { ids: idList } })
+        .delete<Result<T>>(url, { ...reqConfig, data: idList })
         .then((res) => {
           resolve([null, res.data.data, res.data]);
         })

vite.config.ts

@@ -11,6 +11,36 @@ type ProxyItem = {
   rewrite?: [string, string];
 };
 
+const line04ApiProxyList: ProxyItem[] = [
+  { key: '/minio', target: 'http://10.15.128.10:9000', rewrite: ['/minio', ''] },
+
+  { key: '/api', target: 'http://10.15.128.10:18760' },
+
+  { key: '/0475/api', target: 'http://10.15.128.10:18760', rewrite: ['/0475/api', '/api'] },
+
+  { key: '/0401/api', target: 'http://10.15.129.10:18760', rewrite: ['/0401/api', '/api'] },
+  { key: '/0402/api', target: 'http://10.15.131.10:18760', rewrite: ['/0402/api', '/api'] },
+  { key: '/0403/api', target: 'http://10.15.133.10:18760', rewrite: ['/0403/api', '/api'] },
+  { key: '/0404/api', target: 'http://10.15.135.10:18760', rewrite: ['/0404/api', '/api'] },
+  { key: '/0405/api', target: 'http://10.15.137.10:18760', rewrite: ['/0405/api', '/api'] },
+  { key: '/0406/api', target: 'http://10.15.139.10:18760', rewrite: ['/0406/api', '/api'] },
+  { key: '/0407/api', target: 'http://10.15.141.10:18760', rewrite: ['/0407/api', '/api'] },
+  { key: '/0408/api', target: 'http://10.15.143.10:18760', rewrite: ['/0408/api', '/api'] },
+  { key: '/0409/api', target: 'http://10.15.145.10:18760', rewrite: ['/0409/api', '/api'] },
+  { key: '/0410/api', target: 'http://10.15.147.10:18760', rewrite: ['/0410/api', '/api'] },
+
+  { key: '/0411/api', target: 'http://10.15.149.10:18760', rewrite: ['/0411/api', '/api'] },
+  { key: '/0412/api', target: 'http://10.15.151.10:18760', rewrite: ['/0412/api', '/api'] },
+  { key: '/0413/api', target: 'http://10.15.153.10:18760', rewrite: ['/0413/api', '/api'] },
+  { key: '/0414/api', target: 'http://10.15.155.10:18760', rewrite: ['/0414/api', '/api'] },
+  { key: '/0415/api', target: 'http://10.15.157.10:18760', rewrite: ['/0415/api', '/api'] },
+  { key: '/0416/api', target: 'http://10.15.159.10:18760', rewrite: ['/0416/api', '/api'] },
+  { key: '/0417/api', target: 'http://10.15.161.10:18760', rewrite: ['/0417/api', '/api'] },
+  { key: '/0418/api', target: 'http://10.15.163.10:18760', rewrite: ['/0418/api', '/api'] },
+  { key: '/0419/api', target: 'http://10.15.165.10:18760', rewrite: ['/0419/api', '/api'] },
+  { key: '/0420/api', target: 'http://10.15.167.10:18760', rewrite: ['/0420/api', '/api'] },
+];
+
 const line10ApiProxyList: ProxyItem[] = [
   { key: '/minio', target: 'http://10.18.128.10:9000', rewrite: ['/minio', ''] },
 
@@ -52,13 +82,16 @@ const line10ApiProxyList: ProxyItem[] = [
   { key: '/1030/api', target: 'http://10.18.187.10:18760', rewrite: ['/1030/api', '/api'] },
 
   { key: '/1031/api', target: 'http://10.18.189.10:18760', rewrite: ['/1031/api', '/api'] },
+  { key: '/1032/api', target: 'http://10.18.244.10:18760', rewrite: ['/1032/api', '/api'] },
 ];
+
 const apiProxyList: ProxyItem[] = [
-  //
+  // ...line04ApiProxyList,
   ...line10ApiProxyList,
 ];
 const wsProxyList: ProxyItem[] = [
   //
+  // { key: '/ws', target: 'ws://10.15.128.10:18103' },
   { key: '/ws', target: 'ws://10.18.128.10:18103' },
 ];