feat(pages): separate station-page from dashboard-page

2025-11-19 11:55:13 +08:00
parent 0c3e9c24f9
commit 91a665695e
5 changed files with 100 additions and 67 deletions
--- a/src/pages/dashboard-page.vue
+++ b/src/pages/dashboard-page.vue
@@ -1,35 +1,23 @@
 <script setup lang="ts">
-import type { Station } from '@/apis/domains';
 import { ndmExportDevices } from '@/apis/requests';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
-import { useLayoutStore } from '@/stores/layout';
-import { useLineAlarmsStore } from '@/stores/line-alarms';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
-import { NGrid, NGi } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { watch } from 'vue';
 import dayjs from 'dayjs';

-import DeviceAlarmDetailModal from '@/components/dashboard-page/device-alarm-detail-modal.vue';
-import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
 import DeviceStatisticCard from '@/components/dashboard-page/device-statistic-card.vue';
-import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
-import StationCard from '@/components/dashboard-page/station-card.vue';

 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
 const { lineDevices } = storeToRefs(lineDevicesStore);
-const lineAlarmsStore = useLineAlarmsStore();
-const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);

 const { error: lineDevicesQueryError } = useLineDevicesQuery();
 const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
-const layoutStore = useLayoutStore();
-const { stationLayoutGridCols } = storeToRefs(layoutStore);

 watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
  if (newLineDevicesQueryError) {
@@ -61,23 +49,6 @@ const { mutate: exportDevices, isPending: exporting } = useMutation({
    window.$message.error(error.message);
  },
 });
-
-const selectedStation = ref<Station>();
-const offlineDeviceTreeModalShow = ref(false);
-const deviceAlarmTreeModalShow = ref(false);
-const deviceParamsConfigModalShow = ref(false);
-const openOfflineDeviceDetailModal = (station: Station) => {
-  selectedStation.value = station;
-  offlineDeviceTreeModalShow.value = true;
-};
-const openDeviceAlarmDetailModal = (station: Station) => {
-  selectedStation.value = station;
-  deviceAlarmTreeModalShow.value = true;
-};
-const openDeviceParamsConfigModal = (station: Station) => {
-  selectedStation.value = station;
-  deviceParamsConfigModalShow.value = true;
-};
 </script>

 <template>
@@ -89,26 +60,6 @@ const openDeviceParamsConfigModal = (station: Station) => {
    @export-online="() => exportDevices({ status: '10' })"
    @export-offline="() => exportDevices({ status: '20' })"
  />
-
-  <NGrid :cols="stationLayoutGridCols" :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>
-
-  <!-- 离线设备详情对话框 -->
-  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :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" />
-  <!-- 设备配置面板对话框 -->
-  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
 </template>

-<style scoped></style>
+<style scoped lang="scss"></style>
--- a/src/pages/station-page.vue
+++ b/src/pages/station-page.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
+import { useLayoutStore } from '@/stores/layout';
+import { useLineAlarmsStore } from '@/stores/line-alarms';
+import { useLineDevicesStore } from '@/stores/line-devices';
+import { useStationStore } from '@/stores/station';
+import { NGrid, NGi } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { ref, watch } from 'vue';
+
+import DeviceAlarmDetailModal from '@/components/dashboard-page/device-alarm-detail-modal.vue';
+import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
+import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
+import StationCard from '@/components/dashboard-page/station-card.vue';
+
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+const lineDevicesStore = useLineDevicesStore();
+const { lineDevices } = storeToRefs(lineDevicesStore);
+const lineAlarmsStore = useLineAlarmsStore();
+const { lineAlarmCounts } = storeToRefs(lineAlarmsStore);
+
+const { error: lineDevicesQueryError } = useLineDevicesQuery();
+const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
+const layoutStore = useLayoutStore();
+const { stationLayoutGridCols } = storeToRefs(layoutStore);
+
+watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
+  if (newLineDevicesQueryError) {
+    window.$message.error(newLineDevicesQueryError.message);
+  }
+  if (newLineAlarmsQueryError) {
+    window.$message.error(newLineAlarmsQueryError.message);
+  }
+});
+
+const selectedStation = ref<Station>();
+const offlineDeviceTreeModalShow = ref(false);
+const deviceAlarmTreeModalShow = ref(false);
+const deviceParamsConfigModalShow = ref(false);
+const openOfflineDeviceDetailModal = (station: Station) => {
+  selectedStation.value = station;
+  offlineDeviceTreeModalShow.value = true;
+};
+const openDeviceAlarmDetailModal = (station: Station) => {
+  selectedStation.value = station;
+  deviceAlarmTreeModalShow.value = true;
+};
+const openDeviceParamsConfigModal = (station: Station) => {
+  selectedStation.value = station;
+  deviceParamsConfigModalShow.value = true;
+};
+</script>
+
+<template>
+  <NGrid :cols="stationLayoutGridCols" :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>
+
+  <!-- 离线设备详情对话框 -->
+  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :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" />
+  <!-- 设备配置面板对话框 -->
+  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
+</template>
+
+<style scoped lang="scss"></style>