From 05297b22cb78f816fb949329ec1874370daddaa4 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Wed, 26 Nov 2025 15:52:42 +0800
Subject: [PATCH] refactor: remove /dashboard, migrate icmp-export

---
 .../dashboard-page/device-statistic-card.vue  | 84 ----------------
 src/components/dashboard-page/index.ts        |  1 -
 src/components/index.ts                       |  1 -
 .../station-page/device-export-modal.vue      | 98 +++++++++++++++++++
 src/components/station-page/index.ts          |  1 +
 src/layouts/app-layout.vue                    | 17 ++--
 src/pages/dashboard-page.vue                  | 63 ------------
 src/pages/station-page.vue                    | 51 +++++++---
 src/router/index.ts                           |  4 +-
 9 files changed, 144 insertions(+), 176 deletions(-)
 delete mode 100644 src/components/dashboard-page/device-statistic-card.vue
 delete mode 100644 src/components/dashboard-page/index.ts
 create mode 100644 src/components/station-page/device-export-modal.vue
 delete mode 100644 src/pages/dashboard-page.vue

diff --git a/src/components/dashboard-page/device-statistic-card.vue b/src/components/dashboard-page/device-statistic-card.vue
deleted file mode 100644
index eb7b13f..0000000
--- a/src/components/dashboard-page/device-statistic-card.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import type { LineDevices, Station } from '@/apis';
-import { DeviceType } from '@/enums';
-import { NCard, NGrid, NGi, NStatistic, NSpace, NButton } from 'naive-ui';
-import { computed, toRefs } from 'vue';
-
-const props = defineProps<{
-  stationList: Station[];
-  lineDevices: LineDevices;
-  buttonLoading: boolean;
-}>();
-
-const emit = defineEmits<{
-  'export-online': [];
-  'export-offline': [];
-  'export-all': [];
-}>();
-
-const { stationList, lineDevices, buttonLoading } = toRefs(props);
-
-const onlineDeviceCount = computed(() => {
-  let count = 0;
-  for (const station of stationList.value) {
-    if (station.online) {
-      const stationDevices = lineDevices.value[station.code];
-      Object.values(DeviceType).forEach((deviceType) => {
-        const onlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '10') ?? [];
-        count += onlineDeviceList.length;
-      });
-    }
-  }
-  return count;
-});
-
-const offlineDeviceCount = computed(() => {
-  let count = 0;
-  for (const station of stationList.value) {
-    if (station.online) {
-      const stationDevices = lineDevices.value[station.code];
-      Object.values(DeviceType).forEach((deviceType) => {
-        const offlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '20') ?? [];
-        count += offlineDeviceList.length;
-      });
-    }
-  }
-  return count;
-});
-
-const deviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.value);
-
-const onExportOnline = () => emit('export-online');
-const onExportOffline = () => emit('export-offline');
-const onExportAll = () => emit('export-all');
-</script>
-
-<template>
-  <NCard bordered hoverable size="small" class="device-statistic-card" title="设备统计">
-    <template #header-extra>
-      <NSpace align="center">
-        <NButton size="small" type="default" tertiary :disabled="buttonLoading" @click="onExportAll">导出全部</NButton>
-        <NButton size="small" type="success" tertiary :disabled="buttonLoading" @click="onExportOnline">导出在线</NButton>
-        <NButton size="small" type="error" tertiary :disabled="buttonLoading" @click="onExportOffline">导出离线</NButton>
-      </NSpace>
-    </template>
-
-    <NGrid :cols="3" :x-gap="24" :y-gap="8">
-      <NGi>
-        <NStatistic label="全部设备" :value="deviceCount" />
-      </NGi>
-      <NGi>
-        <NStatistic label="在线设备" :value="onlineDeviceCount" :value-style="{ color: '#18a058' }" />
-      </NGi>
-      <NGi>
-        <NStatistic label="离线设备" :value="offlineDeviceCount" :value-style="{ color: '#d03050' }" />
-      </NGi>
-    </NGrid>
-  </NCard>
-</template>
-
-<style scoped>
-.device-statistic-card {
-  margin: 8px;
-}
-</style>
diff --git a/src/components/dashboard-page/index.ts b/src/components/dashboard-page/index.ts
deleted file mode 100644
index 5922374..0000000
--- a/src/components/dashboard-page/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DeviceStatisticCard } from './device-statistic-card.vue';
diff --git a/src/components/index.ts b/src/components/index.ts
index b1d25ac..2d78d7b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,3 @@
-export * from './dashboard-page';
 export * from './device-page';
 export * from './global';
 export * from './helper';
diff --git a/src/components/station-page/device-export-modal.vue b/src/components/station-page/device-export-modal.vue
new file mode 100644
index 0000000..86c1211
--- /dev/null
+++ b/src/components/station-page/device-export-modal.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { exportIcmpApi } from '@/apis';
+import { DeviceType } from '@/enums';
+import { useDeviceStore, useStationStore } from '@/stores';
+import { downloadByData } from '@/utils';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import { NButton, NFlex, NGrid, NGridItem, NModal, NRadio, NRadioGroup, NStatistic } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+
+const show = defineModel<boolean>('show', { default: false });
+
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
+
+const status = ref('');
+
+const { mutate: exportIcmp, isPending: loading } = useMutation({
+  mutationFn: async (params: { status: string }) => {
+    const data = await exportIcmpApi(params.status);
+    return data;
+  },
+  onSuccess: (data, variables) => {
+    const { status } = variables;
+    let fileName = '全部设备列表';
+    if (status === '10') {
+      fileName = '在线设备列表';
+    } else if (status === '20') {
+      fileName = '离线设备列表';
+    }
+    const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+    downloadByData(data, `${fileName}_${time}.xlsx`);
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
+const onlineDeviceCount = computed(() => {
+  let count = 0;
+  for (const station of stationList.value) {
+    if (station.online) {
+      const stationDevices = lineDevices.value[station.code];
+      Object.values(DeviceType).forEach((deviceType) => {
+        const onlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '10') ?? [];
+        count += onlineDeviceList.length;
+      });
+    }
+  }
+  return count;
+});
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  for (const station of stationList.value) {
+    if (station.online) {
+      const stationDevices = lineDevices.value[station.code];
+      Object.values(DeviceType).forEach((deviceType) => {
+        const onlineDeviceList = stationDevices?.[deviceType]?.filter((device) => device.deviceStatus === '20') ?? [];
+        count += onlineDeviceList.length;
+      });
+    }
+  }
+  return count;
+});
+const deviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.value);
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" title="导出设备列表" @after-leave="() => (status = '')" style="width: 1000px">
+    <template #default>
+      <NFlex justify="flex-end" align="center">
+        <NRadioGroup v-model:value="status">
+          <NRadio value="">全部</NRadio>
+          <NRadio value="10">在线</NRadio>
+          <NRadio value="20">离线</NRadio>
+        </NRadioGroup>
+        <NButton secondary :loading="loading" @click="() => exportIcmp({ status })">导出</NButton>
+      </NFlex>
+      <NGrid :cols="3" :x-gap="24" :y-gap="8">
+        <NGridItem>
+          <NStatistic label="全部设备" :value="deviceCount" />
+        </NGridItem>
+        <NGridItem>
+          <NStatistic label="在线设备" :value="onlineDeviceCount" :value-style="{ color: '#18a058' }" />
+        </NGridItem>
+        <NGridItem>
+          <NStatistic label="离线设备" :value="offlineDeviceCount" :value-style="{ color: '#d03050' }" />
+        </NGridItem>
+      </NGrid>
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/station-page/index.ts b/src/components/station-page/index.ts
index 09b1276..f70f4d7 100644
--- a/src/components/station-page/index.ts
+++ b/src/components/station-page/index.ts
@@ -1,4 +1,5 @@
 export { default as DeviceAlarmDetailModal } from './device-alarm-detail-modal.vue';
+export { default as DeviceExportModal } from './device-export-modal.vue';
 export { default as DeviceParamsConfigModal } from './device-params-config-modal.vue';
 export { default as OfflineDeviceDetailModal } from './offline-device-detail-modal.vue';
 export { default as StationCard } from './station-card.vue';
diff --git a/src/layouts/app-layout.vue b/src/layouts/app-layout.vue
index 0171b0b..c04727f 100644
--- a/src/layouts/app-layout.vue
+++ b/src/layouts/app-layout.vue
@@ -11,7 +11,7 @@ import { useLineStationsQuery } from '@/composables';
 import { LINE_STATIONS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
 import { useAlarmStore, useUserStore } from '@/stores';
 import { useIsFetching } from '@tanstack/vue-query';
-import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, FundFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
+import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
 import type { AxiosError } from 'axios';
 import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
 import { storeToRefs } from 'pinia';
@@ -49,11 +49,6 @@ const route = useRoute();
 const router = useRouter();
 
 const menuOptions = ref<MenuOption[]>([
-  {
-    label: () => h(RouterLink, { to: '/dashboard' }, { default: () => '全线总概览' }),
-    key: '/dashboard',
-    icon: renderIcon(FundFilled),
-  },
   {
     label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
     key: '/station',
@@ -119,8 +114,8 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
   }
 };
 
-const routeToDashboardPage = () => {
-  router.push('/dashboard');
+const routeToRoot = () => {
+  router.push('/');
 };
 
 const routeToAlarmPage = () => {
@@ -139,14 +134,14 @@ const openSettingsDrawer = () => {
 <template>
   <NScrollbar x-scrollable style="width: 100vw; height: 100vh">
     <NLayout has-sider :content-style="{ 'min-width': '1400px' }">
-      <NLayoutSider bordered collapsed :collapse-mode="'width'" :collapsed-width="60">
-        <NMenu collapsed :collapsed-width="60" :collapsed-icon-size="18" :value="route.path" :options="menuOptions" />
+      <NLayoutSider bordered collapsed collapse-mode="width" :collapsed-width="64">
+        <NMenu collapsed :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
       </NLayoutSider>
       <NLayout :native-scrollbar="false">
         <NLayoutHeader bordered class="app-layout-header">
           <NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
             <NFlex>
-              <div style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="routeToDashboardPage">网络设备管理平台</div>
+              <div style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="routeToRoot">网络设备管理平台</div>
               <NButton text size="tiny" :loading="fetchingCount > 0" />
             </NFlex>
             <NFlex align="center" :size="0" style="height: 100%">
diff --git a/src/pages/dashboard-page.vue b/src/pages/dashboard-page.vue
deleted file mode 100644
index 5d8e285..0000000
--- a/src/pages/dashboard-page.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { exportIcmpApi } from '@/apis';
-import { DeviceStatisticCard } from '@/components';
-import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
-import { useDeviceStore, useStationStore } from '@/stores';
-import { downloadByData } from '@/utils';
-import { useMutation } from '@tanstack/vue-query';
-import dayjs from 'dayjs';
-import { storeToRefs } from 'pinia';
-import { watch } from 'vue';
-
-const stationStore = useStationStore();
-const { stationList } = storeToRefs(stationStore);
-const lineDevicesStore = useDeviceStore();
-const { lineDevices } = storeToRefs(lineDevicesStore);
-
-const { error: lineDevicesQueryError } = useLineDevicesQuery();
-const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
-
-watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError, newLineAlarmsQueryError]) => {
-  if (newLineDevicesQueryError) {
-    window.$message.error(newLineDevicesQueryError.message);
-  }
-  if (newLineAlarmsQueryError) {
-    window.$message.error(newLineAlarmsQueryError.message);
-  }
-});
-
-const { mutate: exportDevices, isPending: exporting } = useMutation({
-  mutationFn: async (params: { status: string }) => {
-    const data = await exportIcmpApi(params.status);
-    return data;
-  },
-  onSuccess: (data, variables) => {
-    const { status } = variables;
-    let fileName = '全部设备列表';
-    if (status === '10') {
-      fileName = '在线设备列表';
-    } else if (status === '20') {
-      fileName = '离线设备列表';
-    }
-    const time = dayjs().format('YYYY-MM-DD_HH-mm-ss');
-    downloadByData(data, `${fileName}_${time}.xlsx`);
-  },
-  onError: (error) => {
-    console.error(error);
-    window.$message.error(error.message);
-  },
-});
-</script>
-
-<template>
-  <DeviceStatisticCard
-    :station-list="stationList"
-    :line-devices="lineDevices"
-    :button-loading="exporting"
-    @export-all="() => exportDevices({ status: '' })"
-    @export-online="() => exportDevices({ status: '10' })"
-    @export-offline="() => exportDevices({ status: '20' })"
-  />
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/src/pages/station-page.vue b/src/pages/station-page.vue
index fe56bc6..a8d1dee 100644
--- a/src/pages/station-page.vue
+++ b/src/pages/station-page.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Station } from '@/apis';
-import { DeviceAlarmDetailModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
+import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
 import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
-import { NGrid, NGi } from 'naive-ui';
+import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
 
@@ -28,6 +28,14 @@ watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError,
   }
 });
 
+const stationSelectable = ref(false);
+const selectedStations = ref<Record<Station['code'], boolean>>({});
+const showActionConfirm = ref(false);
+const showDeviceExportModal = ref(false);
+const openDeviceExportModal = () => {
+  showDeviceExportModal.value = true;
+};
+
 const selectedStation = ref<Station>();
 const offlineDeviceTreeModalShow = ref(false);
 const deviceAlarmTreeModalShow = ref(false);
@@ -47,18 +55,31 @@ const openDeviceParamsConfigModal = (station: Station) => {
 </script>
 
 <template>
-  <NGrid :cols="stationGridColumns" :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>
+  <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
+    <NFlex justify="space-between" align="center" style="padding: 8px 8px 0 8px">
+      <NButtonGroup>
+        <NButton secondary :focusable="false" @click="openDeviceExportModal">导出设备状态</NButton>
+        <NButton v-if="false">导出录像诊断</NButton>
+        <NButton v-if="false">同步摄像机</NButton>
+      </NButtonGroup>
+      <NFlex v-if="showActionConfirm" size="small">
+        <NButton quaternary size="small" type="primary" :focusable="false">确定</NButton>
+        <NButton quaternary size="small" type="tertiary" :focusable="false">取消</NButton>
+      </NFlex>
+    </NFlex>
+    <NGrid :cols="stationGridColumns" :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>
+  </NScrollbar>
 
   <!-- 离线设备详情对话框 -->
   <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
@@ -66,6 +87,8 @@ const openDeviceParamsConfigModal = (station: Station) => {
   <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
   <!-- 设备配置面板对话框 -->
   <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
+  <!-- 设备状态导出对话框 -->
+  <DeviceExportModal v-model:show="showDeviceExportModal" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 8a9fde1..1aa3750 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,11 +11,11 @@ const router = createRouter({
     {
       path: '/',
       component: () => import('@/layouts/app-layout.vue'),
-      redirect: '/dashboard',
+      redirect: '/station',
       children: [
         {
           path: 'dashboard',
-          component: () => import('@/pages/dashboard-page.vue'),
+          redirect: 'station',
         },
         {
           path: 'station',