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

src/components/global/settings-drawer.vue

@@ -73,7 +73,7 @@ useEventListener('keydown', (event) => {
         <NFormItem label="深色模式" label-placement="left">
           <ThemeSwitch />
         </NFormItem>
-        <template v-if="route.path === '/dashboard'">
+        <template v-if="route.path === '/station'">
           <NDivider>布局</NDivider>
           <NFormItem label="车站列数" label-placement="left">
             <NInputNumber v-model:value="stationLayoutGridCols" :min="1" :max="10" />

src/layouts/app-layout.vue

@@ -15,8 +15,7 @@ import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useUserStore } from '@/stores/user';
 import { Client as StompClient } from '@stomp/stompjs';
 import { useIsFetching } from '@tanstack/vue-query';
-import { AlertFilled, /* AreaChartOutlined, */ FileTextFilled, HomeFilled, LogoutOutlined, SettingOutlined, VideoCameraFilled } from '@vicons/antd';
+import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, FundFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
-import { ChevronDown, Debug } from '@vicons/carbon';
 import type { AxiosError } from 'axios';
 import { destr } from 'destr';
 import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
@@ -98,17 +97,22 @@ const router = useRouter();
 
 const menuOptions = ref<MenuOption[]>([
   {
-    label: () => h(RouterLink, { to: '/dashboard' }, { default: () => '今日数据看板' }),
+    label: () => h(RouterLink, { to: '/dashboard' }, { default: () => '全线总概览' }),
     key: '/dashboard',
-    icon: renderIcon(HomeFilled),
+    icon: renderIcon(FundFilled),
   },
   {
-    label: () => h(RouterLink, { to: '/device' }, { default: () => '设备诊断数据' }),
+    label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
+    key: '/station',
+    icon: renderIcon(EnvironmentFilled),
+  },
+  {
+    label: () => h(RouterLink, { to: '/device' }, { default: () => '设备诊断' }),
     key: '/device',
-    icon: renderIcon(VideoCameraFilled),
+    icon: renderIcon(HddFilled),
   },
   {
-    label: () => h(RouterLink, { to: '/alarm' }, { default: () => '设备告警记录' }),
+    label: () => h(RouterLink, { to: '/alarm' }, { default: () => '设备告警' }),
     key: '/alarm',
     icon: renderIcon(AlertFilled),
   },
@@ -135,7 +139,7 @@ const menuOptions = ref<MenuOption[]>([
   {
     label: () => h(RouterLink, { to: '/debug' }, { default: () => '调试' }),
     key: '/debug',
-    icon: renderIcon(Debug),
+    icon: renderIcon(BugFilled),
     show: import.meta.env.DEV,
   },
 ]);
@@ -199,15 +203,13 @@ const openSettingsDrawer = () => {
                     <span>{{ userInfo?.nickName ?? '' }}</span>
                   </template>
                   <template #icon>
-                    <NIcon :component="ChevronDown" />
+                    <NIcon :component="CaretDownFilled" />
                   </template>
                 </NButton>
               </NDropdown>
               <NButton :focusable="false" quaternary @click="openSettingsDrawer" style="height: 100%">
                 <template #icon>
-                  <NIcon>
+                  <NIcon :component="SettingOutlined" />
-                    <SettingOutlined />
-                  </NIcon>
                 </template>
               </NButton>
             </NFlex>
@@ -221,9 +223,7 @@ const openSettingsDrawer = () => {
             <NBadge :value="currentAlarmCount">
               <NButton secondary strong @click="toAlarmPage">
                 <template #icon>
-                  <NIcon>
+                  <NIcon :component="AlertFilled" />
-                    <AlertFilled />
-                  </NIcon>
                 </template>
               </NButton>
             </NBadge>

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>

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>

src/router/index.ts

@@ -17,6 +17,10 @@ const router = createRouter({
           path: 'dashboard',
           component: () => import('@/pages/dashboard-page.vue'),
         },
+        {
+          path: 'station',
+          component: () => import('@/pages/station-page.vue'),
+        },
         {
           path: 'device',
           component: () => import('@/pages/device-page.vue'),