115 lines
4.6 KiB
Vue
115 lines
4.6 KiB
Vue
<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 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) {
|
|
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 ndmExportDevices(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 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>
|
|
<DeviceStatisticCard
|
|
:station-list="stationList"
|
|
:line-devices="lineDevices"
|
|
:button-loading="exporting"
|
|
@export-all="() => exportDevices({ status: '' })"
|
|
@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>
|