refactor: extract station card modals to DashboardPage

src/components/station-card.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import DeviceAlarmDetailModal from './device-alarm-detail-modal.vue';
-import DeviceParamsConfigModal from './device-params-config-modal.vue';
-import OfflineDeviceDetailModal from './offline-device-detail-modal.vue';
 import type { Station } from '@/apis/domains';
 import { DeviceType } from '@/enums/device-type';
 import { type StationAlarms, type StationDevices } from '@/composables/query';
@@ -9,7 +6,7 @@ import { ControlOutlined } from '@vicons/antd';
 import { Video as VideoIcon } from '@vicons/carbon';
 import axios from 'axios';
 import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars, NSpace, NTooltip } from 'naive-ui';
-import { toRefs, computed, ref } from 'vue';
+import { toRefs, computed } from 'vue';
 
 interface Props {
   station: Station;
@@ -19,6 +16,12 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const emit = defineEmits<{
+  'open-offline-device-detail-modal': [station: Station];
+  'open-device-alarm-detail-modal': [station: Station];
+  'open-device-params-config-modal': [station: Station];
+}>();
+
 const { station, stationDevices, stationAlarms } = toRefs(props);
 const { code, name, online } = toRefs(station.value);
 
@@ -47,26 +50,23 @@ const devicAlarmCount = computed(() => {
 });
 
 // 打开对话框
-const offlineDeviceTreeModalShow = ref(false);
-const deviceAlarmTreeModalShow = ref(false);
-const deviceParamsConfigModalShow = ref(false);
 const openOfflineDeviceTreeModal = () => {
   if (online.value) {
-    offlineDeviceTreeModalShow.value = true;
+    emit('open-offline-device-detail-modal', station.value);
   } else {
     window.$message.error('当前车站离线，无法查看');
   }
 };
 const openDeviceAlarmTreeModal = () => {
   if (online.value) {
-    deviceAlarmTreeModalShow.value = true;
+    emit('open-device-alarm-detail-modal', station.value);
   } else {
     window.$message.error('当前车站离线，无法查看');
   }
 };
 const openDeviceConfigModal = () => {
   if (online.value) {
-    deviceParamsConfigModalShow.value = true;
+    emit('open-device-params-config-modal', station.value);
   } else {
     window.$message.error('当前车站离线，无法查看');
   }
@@ -159,13 +159,6 @@ const theme = useThemeVars();
       </NGrid>
     </template>
   </NCard>
-
-  <!-- 离线设备详情对话框 -->
-  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="station" :station-devices="stationDevices" />
-  <!-- 设备告警详情对话框 -->
-  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="station" :station-alarms="stationAlarms" />
-  <!-- 设备配置面板对话框 -->
-  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="station" />
 </template>
 
 <style scoped lang="scss">

src/pages/dashboard-page.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import DeviceAlarmDetailModal from '@/components/device-alarm-detail-modal.vue';
+import DeviceParamsConfigModal from '@/components/device-params-config-modal.vue';
+import OfflineDeviceDetailModal from '@/components/offline-device-detail-modal.vue';
 import StationCard from '@/components/station-card.vue';
-import { NGrid, NGi } from 'naive-ui';
+import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
 import { useStationStore } from '@/stores/station';
-import { storeToRefs } from 'pinia';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useLineAlarmsStore } from '@/stores/line-alarms';
-import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
-import { watch } from 'vue';
+import { NGrid, NGi } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { ref, watch } from 'vue';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
@@ -32,14 +36,47 @@ watch(
     immediate: true,
   },
 );
+
+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="8" :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-alarms="lineAlarms[station.code]" />
+      <StationCard
+        :station="station"
+        :station-devices="lineDevices[station.code]"
+        :station-alarms="lineAlarms[station.code]"
+        @open-offline-device-detail-modal="openOfflineDeviceDetailModal"
+        @open-device-alarm-detail-modal="openDeviceAlarmDetailModal"
+        @open-device-params-config-modal="openDeviceParamsConfigModal"
+      />
     </NGi>
   </NGrid>
+
+  <template v-if="selectedStation">
+    <!-- 离线设备详情对话框 -->
+    <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="lineDevices[selectedStation.code]" />
+    <!-- 设备告警详情对话框 -->
+    <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarms="lineAlarms[selectedStation.code]" />
+    <!-- 设备配置面板对话框 -->
+    <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
+  </template>
 </template>
 
 <style scoped></style>