skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract station card modals to DashboardPage

Browse Source
This commit is contained in:
yangsy
2025-08-27 10:13:41 +08:00
parent f5c676ea0b
commit a4392da641
2 changed files with 52 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/dashboard-page.vue
View File

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