feat: ui

src/components/device-alarm-stat-modal.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

src/components/offline-device-tree-modal.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { NInput, NModal, NTree } from 'naive-ui';
+import { computed, ref, toRefs, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { TreeOption, TreeOverrideNodeClickBehavior } from 'naive-ui';
+import type {
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmDeviceVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis/models/device';
+import { useQueryControlStore } from '@/stores/query-control';
+import { DeviceType, DeviceTypeName } from '@/enums/device-type';
+import type { Station } from '@/apis/domains';
+
+interface Props {
+  station: Station;
+  ndmDeviceList: {
+    [DeviceType.Camera]: NdmCameraResultVO[];
+    [DeviceType.Decoder]: NdmDecoderResultVO[];
+    [DeviceType.Keyboard]: NdmKeyboardResultVO[];
+    [DeviceType.MediaServer]: NdmMediaServerResultVO[];
+    [DeviceType.Nvr]: NdmNvrResultVO[];
+    [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
+    [DeviceType.Switch]: NdmSwitchResultVO[];
+    [DeviceType.VideoServer]: NdmVideoServerResultVO[];
+  };
+}
+
+const props = defineProps<Props>();
+const { station, ndmDeviceList } = toRefs(props);
+const show = defineModel<boolean>('show', { required: true });
+const route = useRoute();
+const router = useRouter();
+
+watch(show, (newValue) => {
+  const queryControlStore = useQueryControlStore();
+  if (newValue) {
+    console.log('对话框打开，停止轮询');
+    queryControlStore.disablePolling();
+  } else {
+    console.log('对话框关闭，开启轮询');
+    queryControlStore.enablePolling();
+  }
+});
+
+const searchPattern = ref('');
+const searchFilter: (pattern: string, node: TreeOption) => boolean = (pattern, node) => {
+  if (node.children) {
+    return node.children.some((child) => searchFilter(pattern, child));
+  }
+  const device = node['device'] as NdmDeviceVO;
+  const { name, ipAddress } = device;
+  return name?.includes(pattern) || ipAddress?.includes(pattern);
+};
+
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((type) => {
+    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+    count += offlineDeviceList.length;
+  });
+  return count;
+});
+
+const treeData = computed<TreeOption[]>(() => {
+  return Object.values(DeviceType).map<TreeOption>((type) => {
+    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+    return {
+      label: `${DeviceTypeName[type]} (${offlineDeviceList.length}台)`,
+      key: type,
+      children: offlineDeviceList.map<TreeOption>((device) => ({
+        label: `${device.name}`,
+        key: device.deviceId,
+        suffix: () => `${device.ipAddress ?? '未知IP地址'}`,
+        isLeaf: true,
+        device,
+      })),
+    };
+  });
+});
+
+const nodeProps = ({ option }: { option: TreeOption }) => {
+  return {
+    ondblclick: () => {
+      if (option.isLeaf) {
+        const device = option['device'] as NdmDeviceVO;
+        router.push({
+          path: '/device',
+          query: {
+            stationCode: station.value.code,
+            deviceType: device.deviceType,
+            deviceId: device.deviceId,
+            from: route.path,
+          },
+        });
+      }
+    },
+  };
+};
+
+const override: TreeOverrideNodeClickBehavior = ({ option }) => {
+  if (option.children) {
+    return 'toggleExpand';
+  }
+  return 'default';
+};
+
+const onModalClose = () => {
+  searchPattern.value = '';
+};
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" style="width: 600px; height: 500px" :title="`${station.name} - 离线设备详情`" @close="onModalClose">
+    <div v-if="offlineDeviceCount === 0" class="no-offline-devices">
+      <span>当前没有离线设备</span>
+    </div>
+    <template v-else>
+      <NInput v-model:value="searchPattern" placeholder="搜索设备名称或IP地址" clearable />
+      <NTree
+        :data="treeData"
+        :node-props="nodeProps"
+        :override-default-node-click-behavior="override"
+        :pattern="searchPattern"
+        :filter="searchFilter"
+        :show-irrelevant-nodes="false"
+        block-line
+        show-line
+        virtual-scroll
+        style="height: 380px"
+      />
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss">
+.no-offline-devices {
+  text-align: center;
+  padding: 20px;
+  color: #6c757d;
+}
+</style>

src/components/station-card.vue

@@ -1,54 +1,147 @@
 <script setup lang="ts">
-import { NCard, NStatistic, NTag, NIcon, NGrid, NGi } from 'naive-ui';
+import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon } from 'naive-ui';
-import { Wifi } from '@vicons/ionicons5';
+import { Video } from '@vicons/carbon';
-import { toRefs } from 'vue';
+import { toRefs, computed, ref } from 'vue';
+import axios from 'axios';
+import OfflineDeviceTreeModal from './offline-device-tree-modal.vue';
+import type {
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmDeviceAlarmLogResultVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis/models/device';
+import { DeviceType } from '@/enums/device-type';
+import type { Station } from '@/apis/domains';
 
-// 定义组件props
 interface Props {
-  name: string;
+  station: Station;
-  online: boolean;
-  offlineDeviceCount: number;
   alarmCount: number;
+  ndmDeviceList: {
+    [DeviceType.Camera]: NdmCameraResultVO[];
+    [DeviceType.Decoder]: NdmDecoderResultVO[];
+    [DeviceType.Keyboard]: NdmKeyboardResultVO[];
+    [DeviceType.MediaServer]: NdmMediaServerResultVO[];
+    [DeviceType.Nvr]: NdmNvrResultVO[];
+    [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
+    [DeviceType.Switch]: NdmSwitchResultVO[];
+    [DeviceType.VideoServer]: NdmVideoServerResultVO[];
+  };
+  ndmDeviceAlarmLogList: NdmDeviceAlarmLogResultVO[];
 }
 
 const props = defineProps<Props>();
 
-const { name, online, offlineDeviceCount, alarmCount } = toRefs(props);
+const { alarmCount, ndmDeviceList, station } = toRefs(props);
+const { code, name, online } = toRefs(station.value);
+
+// 计算总离线设备数量
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((type) => {
+    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+    count += offlineDeviceList.length;
+  });
+  return count;
+});
+
+const offlineDeviceTreeModalShow = ref(false);
+
+// 打开离线设备详情对话框
+const openOfflineDeviceTreeModal = () => {
+  if (online.value) {
+    offlineDeviceTreeModalShow.value = true;
+  }
+};
+
+// 打开视频平台
+const openVideoPlatform = async () => {
+  try {
+    const response = await axios.get<Record<string, string>>('/minio/ndm/ndm-vimps.json');
+    const vimpUrl = response.data[code.value];
+    if (vimpUrl) {
+      window.open(vimpUrl, '_blank');
+    } else {
+      window.$message.warning(`未找到车站编码 ${code.value} 对应的视频平台URL`);
+      return;
+    }
+  } catch (error) {
+    console.error('获取视频平台URL失败:', error);
+    window.$message.error('获取视频平台URL失败');
+  }
+};
 </script>
 
 <template>
-  <NCard bordered hoverable size="small" :title="name" class="station-card">
+  <NCard bordered hoverable size="small" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
+    <template #header>
+      <span class="font-smaller">{{ name }}</span>
+    </template>
     <template #header-extra>
       <NTag :type="online ? 'success' : 'error'" size="small">
-        <template #icon>
-          <NIcon><Wifi /></NIcon>
-        </template>
         {{ online ? '在线' : '离线' }}
       </NTag>
     </template>
     <template #default>
-      <NGrid :cols="2">
+      <NButton text @click="openVideoPlatform">
+        <NIcon>
+          <Video />
+        </NIcon>
+      </NButton>
+      <NGrid :cols="2" :style="{ opacity: online ? '1' : '0.3' }">
         <NGi>
-          <NStatistic label="离线设备" :value="offlineDeviceCount" :tabular-nums="true">
+          <NStatistic tabular-nums>
+            <template #label>
+              <span class="font-xx-small" :class="[online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
+            </template>
+            <template #default>
+              <span class="font-medium">{{ offlineDeviceCount }}</span>
+            </template>
             <template #suffix>
-              <span class="stat-suffix">台</span>
+              <span class="font-xx-small">台</span>
             </template>
           </NStatistic>
         </NGi>
         <NGi>
-          <NStatistic label="告警记录" :value="alarmCount" :tabular-nums="true">
+          <NStatistic tabular-nums>
+            <template #label>
+              <span class="font-xx-small">告警记录</span>
+            </template>
+            <template #default>
+              <span class="font-medium">{{ alarmCount }}</span>
+            </template>
             <template #suffix>
-              <span class="stat-suffix">条</span>
+              <span class="font-xx-small">条</span>
             </template>
           </NStatistic>
         </NGi>
       </NGrid>
     </template>
   </NCard>
+
+  <!-- TODO: 离线设备详情对话框 -->
+  <OfflineDeviceTreeModal v-model:show="offlineDeviceTreeModalShow" :station="station" :ndm-device-list="ndmDeviceList" />
 </template>
 
 <style scoped lang="scss">
-.stat-suffix {
+.clickable {
-  font-size: 14px;
+  text-decoration: underline dashed;
+  cursor: pointer;
+}
+
+.font-xx-small {
+  font-size: xx-small;
+}
+
+.font-medium {
+  font-size: medium;
+}
+
+.font-smaller {
+  font-size: smaller;
 }
 </style>

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

@@ -0,0 +1,18 @@
+import { useStationStore } from '@/stores/station';
+import { useQuery } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+export function useLineDevicesQuery() {
+  const stationStore = useStationStore();
+  const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
+
+  return useQuery({
+    queryKey: ['line-devices', updatedTime],
+    enabled: computed(() => onlineStationList.value.length > 0),
+    queryFn: async () => {
+      if (!stationList?.value) {
+      }
+    },
+  });
+}

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

@@ -0,0 +1,150 @@
+import { useQuery } from '@tanstack/vue-query';
+import type { PageParams } from '@/apis/models/base/page';
+import {
+  postNdmCameraPage,
+  postNdmDecoderPage,
+  postNdmKeyboardPage,
+  postNdmMediaServerPage,
+  postNdmNvrPage,
+  postNdmSecurityBoxPage,
+  postNdmSwitchPage,
+  postNdmVideoServerPage,
+} from '@/apis/requests/device';
+import { useStationStore } from '@/stores/station';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { DeviceType } from '@/enums/device-type';
+import type {
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis/models/device';
+
+// 定义设备数据类型
+interface StationDevices {
+  // ndmCameraList: any[];
+  // ndmDecoderList: any[];
+  // ndmKeyboardList: any[];
+  // ndmMedisServerList: any[];
+  // ndmNvrList: any[];
+  // ndmSecurityBoxList: any[];
+  // ndmSwitchList: any[];
+  // ndmVideoServerList: any[];
+  [DeviceType.Camera]: NdmCameraResultVO[];
+  [DeviceType.Decoder]: NdmDecoderResultVO[];
+  [DeviceType.Keyboard]: NdmKeyboardResultVO[];
+  [DeviceType.MediaServer]: NdmMediaServerResultVO[];
+  [DeviceType.Nvr]: NdmNvrResultVO[];
+  [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
+  [DeviceType.Switch]: NdmSwitchResultVO[];
+  [DeviceType.VideoServer]: NdmVideoServerResultVO[];
+}
+
+export function useLineDevicesQuery() {
+  const stationStore = useStationStore();
+  const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
+
+  return useQuery({
+    queryKey: ['line-devices', updatedTime],
+    enabled: computed(() => onlineStationList.value.length > 0),
+    placeholderData: (prev) => prev,
+    queryFn: async (): Promise<Record<string, StationDevices>> => {
+      const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
+
+      const lineDevices: Record<string, StationDevices> = {};
+
+      // 如果没有车站列表，返回空对象
+      if (!stationList?.value) {
+        return lineDevices;
+      }
+
+      // 遍历所有车站
+      for (const station of stationList.value) {
+        // 如果车站离线，设置空数组
+        if (!station.online) {
+          lineDevices[station.code] = {
+            // ndmCameraList: [],
+            // ndmDecoderList: [],
+            // ndmKeyboardList: [],
+            // ndmMedisServerList: [],
+            // ndmNvrList: [],
+            // ndmSecurityBoxList: [],
+            // ndmSwitchList: [],
+            // ndmVideoServerList: [],
+            [DeviceType.Camera]: [],
+            [DeviceType.Decoder]: [],
+            [DeviceType.Keyboard]: [],
+            [DeviceType.MediaServer]: [],
+            [DeviceType.Nvr]: [],
+            [DeviceType.SecurityBox]: [],
+            [DeviceType.Switch]: [],
+            [DeviceType.VideoServer]: [],
+          };
+          continue;
+        }
+
+        try {
+          // 并行获取该车站的所有设备类型数据
+          const [cameraData, decoderData, keyboardData, mediaServerData, nvrData, securityBoxData, switchData, videoServerData] = await Promise.all([
+            postNdmCameraPage(station.code, pageQuery),
+            postNdmDecoderPage(station.code, pageQuery),
+            postNdmKeyboardPage(station.code, pageQuery),
+            postNdmMediaServerPage(station.code, pageQuery),
+            postNdmNvrPage(station.code, pageQuery),
+            postNdmSecurityBoxPage(station.code, pageQuery),
+            postNdmSwitchPage(station.code, pageQuery),
+            postNdmVideoServerPage(station.code, pageQuery),
+          ]);
+
+          // 存储该车站的设备数据
+          lineDevices[station.code] = {
+            // ndmCameraList: cameraData.records ?? [],
+            // ndmDecoderList: decoderData.records ?? [],
+            // ndmKeyboardList: keyboardData.records ?? [],
+            // ndmMedisServerList: mediaServerData.records ?? [],
+            // ndmNvrList: nvrData.records ?? [],
+            // ndmSecurityBoxList: securityBoxData.records ?? [],
+            // ndmSwitchList: switchData.records ?? [],
+            // ndmVideoServerList: videoServerData.records ?? [],
+            [DeviceType.Camera]: cameraData.records ?? [],
+            [DeviceType.Decoder]: decoderData.records ?? [],
+            [DeviceType.Keyboard]: keyboardData.records ?? [],
+            [DeviceType.MediaServer]: mediaServerData.records ?? [],
+            [DeviceType.Nvr]: nvrData.records ?? [],
+            [DeviceType.SecurityBox]: securityBoxData.records ?? [],
+            [DeviceType.Switch]: switchData.records ?? [],
+            [DeviceType.VideoServer]: videoServerData.records ?? [],
+          };
+        } catch (error) {
+          console.error(`获取车站 ${station.name} 设备数据失败:`, error);
+          // 如果获取失败，设置空数组
+          lineDevices[station.code] = {
+            // ndmCameraList: [],
+            // ndmDecoderList: [],
+            // ndmKeyboardList: [],
+            // ndmMedisServerList: [],
+            // ndmNvrList: [],
+            // ndmSecurityBoxList: [],
+            // ndmSwitchList: [],
+            // ndmVideoServerList: [],
+            [DeviceType.Camera]: [],
+            [DeviceType.Decoder]: [],
+            [DeviceType.Keyboard]: [],
+            [DeviceType.MediaServer]: [],
+            [DeviceType.Nvr]: [],
+            [DeviceType.SecurityBox]: [],
+            [DeviceType.Switch]: [],
+            [DeviceType.VideoServer]: [],
+          };
+        }
+      }
+
+      return lineDevices;
+    },
+  });
+}

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

@@ -5,29 +5,39 @@ import { useStationStore } from '@/stores/station';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
+import { getAppEnvConfig } from '@/utils/env';
+import { useQueryControlStore } from '@/stores/query-control';
+import { computed } from 'vue';
 
 export function useStationListQuery() {
   const stationStore = useStationStore();
-  const { stationList } = storeToRefs(stationStore);
+  const { updatedTime, stationList } = storeToRefs(stationStore);
-  useQuery({
+  const queryControlStore = useQueryControlStore();
+  const { pollingEnabled } = storeToRefs(queryControlStore);
+
+  return useQuery({
     queryKey: ['station-list'],
+    enabled: computed(() => pollingEnabled.value),
     queryFn: async () => {
       const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`);
 
-      stationList.value = ndmStationList.map<Station>((record) => ({
+      const stations = ndmStationList.map<Station>((record) => ({
         code: record.code ?? '',
         name: record.name ?? '',
         online: false,
       }));
 
-      const pingResultList = await Promise.allSettled(stationList.value.map((station) => ndmVerify(station.code)));
+      const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code)));
 
-      stationList.value = stationList.value.map((station, index) => ({
+      stationList.value = stations.map((station, index) => ({
         ...station,
         online: pingResultList[index].status === 'fulfilled',
       }));
 
+      updatedTime.value = dayjs().toJSON();
+
       return stationList.value;
     },
+    refetchInterval: getAppEnvConfig().requestInterval * 1000,
   });
 }

src/enums/device-type.ts

@@ -1,22 +1,23 @@
-export enum DeviceType {
+export const DeviceType = {
-  Switch = '220',
+  Camera: '132',
-  Server = '401+403',
+  Decoder: '114',
-  MediaServer = '403',
+  Keyboard: '141',
-  VideoServer = '401',
+  MediaServer: '403',
-  Decoder = '114',
+  Nvr: '118',
-  Camera = '132',
+  SecurityBox: '222',
-  Nvr = '118',
+  Switch: '220',
-  SecurityBox = '222',
+  VideoServer: '401',
-  Keyboard = '141',
+} as const;
-}
 
-export const deviceTypesMap = new Map<string, string>();
+export type DeviceTypeCode = keyof typeof DeviceType;
-deviceTypesMap.set(DeviceType.Switch, '交换机');
+
-deviceTypesMap.set(DeviceType.Server, '服务器');
+export const DeviceTypeName = {
-deviceTypesMap.set(DeviceType.MediaServer, '媒体服务器');
+  [DeviceType.Camera]: '摄像机',
-deviceTypesMap.set(DeviceType.VideoServer, '视频服务器');
+  [DeviceType.Decoder]: '解码器',
-deviceTypesMap.set(DeviceType.Decoder, '解码器');
+  [DeviceType.Keyboard]: '网络键盘',
-deviceTypesMap.set(DeviceType.Camera, '摄像机');
+  [DeviceType.MediaServer]: '媒体服务器',
-deviceTypesMap.set(DeviceType.Nvr, '网络录像机');
+  [DeviceType.Nvr]: '网络录像机',
-deviceTypesMap.set(DeviceType.SecurityBox, '智能安防箱');
+  [DeviceType.SecurityBox]: '智能安防箱',
-deviceTypesMap.set(DeviceType.Keyboard, '网络键盘');
+  [DeviceType.Switch]: '交换机',
+  [DeviceType.VideoServer]: '视频服务器',
+};

src/layouts/app-layout.vue

@@ -107,7 +107,7 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
             </NFlex>
           </NFlex>
         </NLayoutHeader>
-        <NLayoutContent class="app-layout-content" :content-style="{ padding: '8px' }">
+        <NLayoutContent class="app-layout-content">
           <RouterView />
         </NLayoutContent>
         <NLayoutFooter bordered class="app-layout-footer" />

src/pages/alarm-page.vue

@@ -1,7 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>
 
 <template>
   <div>alarm</div>
+  <pre>{{ route }}</pre>
 </template>
 
 <style scoped></style>

src/pages/dashboard-page.vue

@@ -2,28 +2,49 @@
 import { ref } from 'vue';
 import StationCard from '@/components/station-card.vue';
 import { NGrid, NGi } from 'naive-ui';
-import { useQuery } from '@tanstack/vue-query';
+import { useStationStore } from '@/stores/station';
+import { storeToRefs } from 'pinia';
+import { DeviceType } from '@/enums/device-type';
+import { useLineDevicesQuery } from '@/composables/query/use-line-devices-query';
+
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
 
 // 模拟数据
 const stations = ref(
   Array.from({ length: 32 }).map((_, i) => ({
-    name: `车站 ${i + 1}`,
+    code: `${i}`,
+    name: `浦东1号2号航站楼${i + 1}`,
     online: Math.random() > 0.5,
     offlineDeviceCount: Math.floor(Math.random() * 20),
     alarmCount: Math.floor(Math.random() * 10),
   })),
 );
 
-// const query = useQuery({
+// 获取所有在线车站的设备数据
-//   queryKey: ['line-devices'],
+const { data: lineDevices } = useLineDevicesQuery();
-//   queryFn: async () => {},
-// });
 </script>
 
 <template>
-  <NGrid :cols="8" :x-gap="12" :y-gap="12">
+  <NGrid :cols="8" :x-gap="6" :y-gap="6" style="padding: 8px">
-    <NGi v-for="station in stations" :key="station.name">
+    <NGi v-for="(station, i) in stationList" :key="station.name">
-      <StationCard :name="station.name" :online="station.online" :offline-device-count="station.offlineDeviceCount" :alarm-count="station.alarmCount" />
+      <StationCard
+        :station="station"
+        :alarm-count="stations[i].alarmCount"
+        :ndm-device-list="
+          lineDevices?.[station.code] ?? {
+            [DeviceType.Camera]: [],
+            [DeviceType.Decoder]: [],
+            [DeviceType.Keyboard]: [],
+            [DeviceType.MediaServer]: [],
+            [DeviceType.Nvr]: [],
+            [DeviceType.SecurityBox]: [],
+            [DeviceType.Switch]: [],
+            [DeviceType.VideoServer]: [],
+          }
+        "
+        :ndm-device-alarm-log-list="[]"
+      />
     </NGi>
   </NGrid>
 </template>

src/pages/device-page.vue

@@ -1,7 +1,145 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { NdmDeviceVO } from '@/apis/models/device';
+import { useLineDevicesQuery } from '@/composables/query/use-line-devices-query';
+import { DeviceType, DeviceTypeName, type DeviceTypeCode } from '@/enums/device-type';
+import { useStationStore } from '@/stores/station';
+import { ChevronBack } from '@vicons/ionicons5';
+import { NIcon, NInput, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NRadio, NRadioGroup, NTabPane, NTabs, NTag, NTree, type TreeOption, type TreeOverrideNodeClickBehavior } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { h } from 'vue';
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { destr } from 'destr';
+
+const route = useRoute();
+const router = useRouter();
+
+const onClickBack = () => router.push({ path: `${route.query['from']}` });
+
+const deviceTabPanes = Object.keys(DeviceType).map((key) => {
+  const name = DeviceType[key as DeviceTypeCode];
+  return {
+    name,
+    tab: DeviceTypeName[name],
+  };
+});
+
+const override: TreeOverrideNodeClickBehavior = ({ option }) => {
+  if (option.children) {
+    return 'toggleExpand';
+  }
+  return 'default';
+};
+
+// 获取车站和设备数据
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+const { data: lineDevices } = useLineDevicesQuery();
+
+const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
+  const treeData: Record<string, TreeOption[]> = {};
+  deviceTabPanes.forEach(({ name: paneName /* , tab: paneTab */ }) => {
+    treeData[paneName] = stationList.value.map<TreeOption>(({ name: stationName, code: stationCode }) => {
+      const devices = lineDevices.value?.[stationCode][paneName];
+      const onlineDevices = devices?.filter((device) => device.deviceStatus === '10');
+      const offlineDevices = devices?.filter((device) => device.deviceStatus === '20');
+      return {
+        label: stationName,
+        key: stationCode,
+        suffix: () => `(${onlineDevices?.length ?? 0}/${offlineDevices?.length ?? 0}/${devices?.length ?? 0})`,
+        children: lineDevices.value?.[stationCode][paneName].map<TreeOption>((device) => ({
+          label: `${device.name}`,
+          key: device.deviceId,
+          suffix: () => `${device.ipAddress}`,
+          prefix: () => {
+            return h(
+              NTag,
+              { type: device.deviceStatus === '10' ? 'success' : device.deviceStatus === '20' ? 'error' : 'warning', size: 'tiny' },
+              {
+                default: () => (device.deviceStatus === '10' ? '在线' : device.deviceStatus === '20' ? '离线' : '未知'),
+              },
+            );
+          },
+          isLeaf: true,
+          // TODO: 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+          device,
+          stationCode,
+        })),
+      };
+    });
+  });
+  return treeData;
+});
+
+const searchInput = ref('');
+const statusInput = ref('');
+
+// 设备树将搜索框和单选框的值都交给NTree的pattern属性
+// 但是如果一个车站下没有匹配的设备，那么这个车站节点也不会显示
+const searchPattern = computed(() => {
+  const search = searchInput.value;
+  const status = statusInput.value;
+  if (!search && !status) return ''; // 如果pattern非空会导致NTree组件认为筛选完成，UI上发生全量匹配
+  return JSON.stringify({ search: searchInput.value, status: statusInput.value, timestamp: stationStore.updatedTime });
+});
+const searchFilter = (pattern: string, node: TreeOption): boolean => {
+  const { search, status } = destr<{ search: string; status: string }>(pattern);
+  const device = node['device'] as NdmDeviceVO | undefined;
+  const { name, ipAddress, deviceStatus } = device ?? {};
+  const searchMatched = (name ?? '').includes(search) || (ipAddress ?? '').includes(search);
+  const statusMatched = status === '' || status === deviceStatus;
+  return searchMatched && statusMatched;
+};
+</script>
 
 <template>
-  <div>device</div>
+  <NLayout has-sider style="height: 100%">
+    <NLayoutSider bordered :width="540" :collapsed-width="0" show-trigger="arrow-circle">
+      <div style="height: 100%; display: flex; flex-direction: column">
+        <div style="flex-shrink: 0; padding: 12px">
+          <NInput v-model:value="searchInput" placeholder="搜索设备名称或IP地址" />
+          <NRadioGroup v-model:value="statusInput">
+            <NRadio value="">全部</NRadio>
+            <NRadio value="10">在线</NRadio>
+            <NRadio value="20">离线</NRadio>
+          </NRadioGroup>
+        </div>
+
+        <div style="flex: 1; min-height: 0">
+          <NTabs animated type="line" placement="left" style="height: 100%">
+            <NTabPane v-for="pane in deviceTabPanes" :key="pane.name" :name="pane.name" :tab="pane.tab">
+              <NTree
+                :data="lineDeviceTreeData[pane.name]"
+                :override-default-node-click-behavior="override"
+                :show-irrelevant-nodes="false"
+                :pattern="searchPattern"
+                :filter="searchFilter"
+                block-line
+                block-node
+                show-line
+                default-expand-all
+                virtual-scroll
+                style="height: 100%"
+              />
+            </NTabPane>
+          </NTabs>
+        </div>
+      </div>
+    </NLayoutSider>
+    <NLayoutContent>
+      <NPageHeader v-if="route.query['from']" title="" @back="onClickBack">
+        <template #back>
+          <NIcon>
+            <ChevronBack />
+          </NIcon>
+          <div style="font-size: 15px">返回</div>
+        </template>
+      </NPageHeader>
+      <!-- <pre>{{ route.query }}</pre> -->
+      <pre style="width: 500px; height: 600px; overflow: scroll">{{ lineDeviceTreeData }}</pre>
+      <!-- <pre style="width: 500px; height: 100%; overflow: scroll">{{ lineDevices }}</pre> -->
+    </NLayoutContent>
+  </NLayout>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss"></style>

src/pages/log-page.vue

@@ -1,7 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>
 
 <template>
-  <div>log</div>
+  <div>alarm</div>
+  <pre>{{ route }}</pre>
 </template>
 
 <style scoped></style>

src/pages/statistics-page.vue

@@ -1,7 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>
 
 <template>
   <div>statistics</div>
+  <pre>{{ route }}</pre>
 </template>
 
 <style scoped></style>