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">