refactor: remove /dashboard, migrate icmp-export
This commit is contained in:
yangsy
@@ -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>
|
||||
@@ -1 +0,0 @@
|
||||
export { default as DeviceStatisticCard } from './device-statistic-card.vue';
|
||||
@@ -1,4 +1,3 @@
|
||||
export * from './dashboard-page';
|
||||
export * from './device-page';
|
||||
export * from './global';
|
||||
export * from './helper';
|
||||
|
||||
98
src/components/station-page/device-export-modal.vue
Normal file
98
src/components/station-page/device-export-modal.vue
Normal file
@@ -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>
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user