feat: ui

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'],
-//   queryFn: async () => {},
-// });
+// 获取所有在线车站的设备数据
+const { data: lineDevices } = useLineDevicesQuery();
 </script>
 
 <template>
-  <NGrid :cols="8" :x-gap="12" :y-gap="12">
-    <NGi v-for="station in stations" :key="station.name">
-      <StationCard :name="station.name" :online="station.online" :offline-device-count="station.offlineDeviceCount" :alarm-count="station.alarmCount" />
+  <NGrid :cols="8" :x-gap="6" :y-gap="6" style="padding: 8px">
+    <NGi v-for="(station, i) in stationList" :key="station.name">
+      <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>