feat: add alarm-host

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/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/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/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/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]: '交换机',