feat: add alarm-host

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/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,6 +11,7 @@ export type NdmServerVO = NdmMediaServer | NdmVideoServer;
 
 export type NdmServerResultVO = Partial<NdmServerVO>;
 
+export * from './alarm';
 export * from './log';
 export * from './other';
 export * from './storage';

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

@@ -1,5 +1,4 @@
 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;
@@ -7,47 +6,21 @@ export const getPortStatusVal = (portInfo: NdmSwitchPortInfo): string => {
 };
 
 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;
+  const units = ['b/s', 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s'];
+  const { 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;
+  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/components/index.ts

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

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { exportIcmpApi } from '@/apis';
+import { DeviceType } from '@/enums';
+import { useDeviceStore, useStationStore } 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 } from 'vue';
+
+const show = defineModel<boolean>('show', { default: false });
+
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
+
+const status = ref('');
+
+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="() => (status = '')" style="width: 1000px">
+    <template #default>
+      <NFlex justify="flex-end" align="center">
+        <NRadioGroup v-model:value="status">
+          <NRadio value="">全部</NRadio>
+          <NRadio value="10">在线</NRadio>
+          <NRadio value="20">离线</NRadio>
+        </NRadioGroup>
+        <NButton secondary :loading="loading" @click="() => exportIcmp({ status })">导出</NButton>
+      </NFlex>
+      <NGrid :cols="3" :x-gap="24" :y-gap="8">
+        <NGridItem>
+          <NStatistic label="全部设备" :value="deviceCount" />
+        </NGridItem>
+        <NGridItem>
+          <NStatistic label="在线设备" :value="onlineDeviceCount" :value-style="{ color: '#18a058' }" />
+        </NGridItem>
+        <NGridItem>
+          <NStatistic label="离线设备" :value="offlineDeviceCount" :value-style="{ color: '#d03050' }" />
+        </NGridItem>
+      </NGrid>
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>

src/components/station-page/index.ts

@@ -1,4 +1,5 @@
 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 StationCard } from './station-card.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>
-            <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
+          <NGrid :cols="classifiedCounts.length">
+            <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>
-          </NRow>
+            </NGridItem>
+          </NGrid>
         </div>
         <div style="flex: 1 1 auto; min-height: 0">
           <NInput v-model:value="searchPattern" placeholder="搜索设备名称、设备ID或IP地址" clearable />

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

@@ -110,15 +110,19 @@ 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 #trigger>
-          <span class="font-medium">{{ station.name }}</span>
-        </template>
-        <span>{{ station.ip }}</span>
-      </NTooltip>
-      <span v-else class="font-medium">{{ station.name }}</span>
+      <template v-if="station.ip">
+        <NTooltip trigger="click">
+          <template #trigger>
+            <span style="font-size: smaller">{{ station.name }}</span>
+          </template>
+          <span>{{ station.ip }}</span>
+        </NTooltip>
+      </template>
+      <template v-else>
+        <span style="font-size: smaller">{{ station.name }}</span>
+      </template>
     </template>
     <template #header-extra>
       <NFlex :size="4">
@@ -134,18 +138,18 @@ const theme = useThemeVars();
     </template>
 
     <template #default>
-      <NFlex vertical :size="6" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
-        <NFlex vertical :size="4" class="metric-item">
-          <NFlex justify="end" align="center" class="metric-line">
-            <span class="font-small">{{ deviceCount }} 台设备</span>
+      <NFlex vertical :size="6" :style="{ opacity: station.online ? '1' : '0.5' }">
+        <NFlex vertical :size="4">
+          <NFlex justify="end" align="center">
+            <span>{{ deviceCount }} 台设备</span>
             <NButton quaternary size="tiny" :focusable="false" @click="openOfflineDeviceTreeModal">
               <NIcon :component="EllipsisOutlined" />
             </NButton>
           </NFlex>
-          <NFlex justify="end" align="center" class="metric-line">
-            <span class="font-small">
+          <NFlex justify="end" align="center">
+            <span>
               <span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">在线 {{ onlineDeviceCount }} 台</span>
-              <NText depth="3" class="sep">·</NText>
+              <NText depth="3"> · </NText>
               <span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">离线 {{ offlineDeviceCount }} 台</span>
             </span>
             <NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
@@ -154,9 +158,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 +171,4 @@ const theme = useThemeVars();
   </NCard>
 </template>
 
-<style scoped lang="scss">
-.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>
+<style scoped lang="scss"></style>

src/composables/device/use-device-selection.ts

@@ -8,7 +8,7 @@ export function useDeviceSelection() {
   const router = useRouter();
 
   const selectedStationCode = ref<string>();
-  const selectedDeviceType = ref<DeviceTypeVal>(DeviceType.Camera);
+  const selectedDeviceType = ref<DeviceTypeVal>(DeviceType.AlarmHost);
   const selectedDevice = ref<NdmDeviceResultVO>();
 
   const initFromRoute = (lineDevices: LineDevices) => {

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

@@ -10,6 +10,7 @@ import { computed } from 'vue';
 
 const createEmptyStationAlarmCounts = () => {
   return {
+    [DeviceType.AlarmHost]: 0,
     [DeviceType.Camera]: 0,
     [DeviceType.Decoder]: 0,
     [DeviceType.Keyboard]: 0,

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

@@ -9,6 +9,7 @@ import { computed } from 'vue';
 
 const createEmptyStationDevices = (): StationDevices => {
   return {
+    [DeviceType.AlarmHost]: [],
     [DeviceType.Camera]: [],
     [DeviceType.Decoder]: [],
     [DeviceType.Keyboard]: [],

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/enums/device-type.ts

@@ -1,4 +1,5 @@
 export const DeviceType = {
+  AlarmHost: 'ndmAlarmHost',
   Camera: 'ndmCamera',
   Nvr: 'ndmNvr',
   Switch: 'ndmSwitch',
@@ -13,6 +14,7 @@ export type DeviceTypeKey = keyof typeof DeviceType;
 export type DeviceTypeVal = (typeof DeviceType)[DeviceTypeKey];
 
 export const DeviceTypeCode: Record<DeviceTypeVal, string[]> = {
+  [DeviceType.AlarmHost]: ['117'],
   [DeviceType.Camera]: ['131', '132'],
   [DeviceType.Nvr]: ['111', '118'],
   [DeviceType.Switch]: ['220'],
@@ -24,6 +26,7 @@ export const DeviceTypeCode: Record<DeviceTypeVal, string[]> = {
 };
 
 export const DeviceTypeName: Record<DeviceTypeVal, string> = {
+  [DeviceType.AlarmHost]: '报警主机',
   [DeviceType.Camera]: '摄像机',
   [DeviceType.Nvr]: '网络录像机',
   [DeviceType.Switch]: '交换机',

src/layouts/app-layout.vue

@@ -11,7 +11,7 @@ import { useLineStationsQuery } from '@/composables';
 import { LINE_STATIONS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
 import { useAlarmStore, 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, 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';
@@ -49,11 +49,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,8 +114,8 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
   }
 };
 
-const routeToDashboardPage = () => {
-  router.push('/dashboard');
+const routeToRoot = () => {
+  router.push('/');
 };
 
 const routeToAlarmPage = () => {
@@ -139,14 +134,14 @@ 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">
-        <NMenu collapsed :collapsed-width="60" :collapsed-icon-size="18" :value="route.path" :options="menuOptions" />
+      <NLayoutSider bordered collapsed collapse-mode="width" :collapsed-width="64">
+        <NMenu collapsed :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
       </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="routeToDashboardPage">网络设备管理平台</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%">

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 { useDeviceStore, 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 = useDeviceStore();
-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/station-page.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Station } from '@/apis';
-import { DeviceAlarmDetailModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
+import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
 import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
-import { NGrid, NGi } from 'naive-ui';
+import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
 
@@ -28,6 +28,14 @@ watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError,
   }
 });
 
+const stationSelectable = ref(false);
+const selectedStations = ref<Record<Station['code'], boolean>>({});
+const showActionConfirm = ref(false);
+const showDeviceExportModal = ref(false);
+const openDeviceExportModal = () => {
+  showDeviceExportModal.value = true;
+};
+
 const selectedStation = ref<Station>();
 const offlineDeviceTreeModalShow = ref(false);
 const deviceAlarmTreeModalShow = ref(false);
@@ -47,18 +55,31 @@ const openDeviceParamsConfigModal = (station: Station) => {
 </script>
 
 <template>
-  <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]"
-        @open-offline-device-detail-modal="openOfflineDeviceDetailModal"
-        @open-device-alarm-detail-modal="openDeviceAlarmDetailModal"
-        @open-device-params-config-modal="openDeviceParamsConfigModal"
-      />
-    </NGi>
-  </NGrid>
+  <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
+    <NFlex justify="space-between" align="center" style="padding: 8px 8px 0 8px">
+      <NButtonGroup>
+        <NButton secondary :focusable="false" @click="openDeviceExportModal">导出设备状态</NButton>
+        <NButton v-if="false">导出录像诊断</NButton>
+        <NButton v-if="false">同步摄像机</NButton>
+      </NButtonGroup>
+      <NFlex v-if="showActionConfirm" size="small">
+        <NButton quaternary size="small" type="primary" :focusable="false">确定</NButton>
+        <NButton quaternary size="small" type="tertiary" :focusable="false">取消</NButton>
+      </NFlex>
+    </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]"
+          @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" />
@@ -66,6 +87,8 @@ const openDeviceParamsConfigModal = (station: Station) => {
   <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
   <!-- 设备配置面板对话框 -->
   <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
+  <!-- 设备状态导出对话框 -->
+  <DeviceExportModal v-model:show="showDeviceExportModal" />
 </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',

vite.config.ts

@@ -52,6 +52,7 @@ 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[] = [
   //