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

refactor: remove /dashboard, migrate icmp-export

Browse Source
This commit is contained in:
yangsy
2025-11-26 15:52:42 +08:00
parent 41c9b4c5ed
commit 05297b22cb
9 changed files with 144 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/dashboard-page/device-statistic-card.vue
View File

@@ -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
src/components/dashboard-page/index.ts
View File

@@ -1 +0,0 @@
export { default as DeviceStatisticCard } from './device-statistic-card.vue';

1
src/components/index.ts
View File

@@ -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
View 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
src/components/station-page/index.ts
View File

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

17
src/layouts/app-layout.vue
View File

@@ -11,7 +11,7 @@ import { useLineStationsQuery } from '@/composables';
import { LINE_STATIONS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
import { useAlarmStore, useUserStore } from '@/stores';
import { useIsFetching } from '@tanstack/vue-query';
import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, FundFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
import type { AxiosError } from 'axios';
import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
import { storeToRefs } from 'pinia';
@@ -49,11 +49,6 @@ const route = useRoute();
const router = useRouter();
const menuOptions = ref<MenuOption[]>([
{
label: () => h(RouterLink, { to: '/dashboard' }, { default: () => '全线总概览' }),
key: '/dashboard',
icon: renderIcon(FundFilled),
},
{
label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
key: '/station',
@@ -119,8 +114,8 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
}
};
const routeToDashboardPage = () => {
router.push('/dashboard');
const routeToRoot = () => {
router.push('/');
};
const routeToAlarmPage = () => {
@@ -139,14 +134,14 @@ const openSettingsDrawer = () => {
<template>
<NScrollbar x-scrollable style="width: 100vw; height: 100vh">
<NLayout has-sider :content-style="{ 'min-width': '1400px' }">
<NLayoutSider bordered collapsed :collapse-mode="'width'" :collapsed-width="60">
<NMenu collapsed :collapsed-width="60" :collapsed-icon-size="18" :value="route.path" :options="menuOptions" />
<NLayoutSider bordered collapsed collapse-mode="width" :collapsed-width="64">
<NMenu collapsed :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
</NLayoutSider>
<NLayout :native-scrollbar="false">
<NLayoutHeader bordered class="app-layout-header">
<NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
<NFlex>
<div style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="routeToDashboardPage">网络设备管理平台</div>
<div style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="routeToRoot">网络设备管理平台</div>
<NButton text size="tiny" :loading="fetchingCount > 0" />
</NFlex>
<NFlex align="center" :size="0" style="height: 100%">

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

@@ -1,63 +0,0 @@
<script setup lang="ts">
import { exportIcmpApi } from '@/apis';
import { DeviceStatisticCard } from '@/components';
import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
import { useDeviceStore, useStationStore } from '@/stores';
import { downloadByData } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { watch } from 'vue';
const stationStore = useStationStore();
const { stationList } = storeToRefs(stationStore);
const lineDevicesStore = useDeviceStore();
const { lineDevices } = storeToRefs(lineDevicesStore);
const { error: lineDevicesQueryError } = useLineDevicesQuery();
const { error: lineAlarmsQueryError } = useLineAlarmsQuery();
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 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);
},
});
</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' })"
/>
</template>
<style scoped lang="scss"></style>

51
src/pages/station-page.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import type { Station } from '@/apis';
import { DeviceAlarmDetailModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
import { DeviceAlarmDetailModal, DeviceExportModal, DeviceParamsConfigModal, OfflineDeviceDetailModal, StationCard } from '@/components';
import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables';
import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
import { NGrid, NGi } from 'naive-ui';
import { NGrid, NGi, NScrollbar, NFlex, NButtonGroup, NButton } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';
@@ -28,6 +28,14 @@ watch([lineDevicesQueryError, lineAlarmsQueryError], ([newLineDevicesQueryError,
}
});
const stationSelectable = ref(false);
const selectedStations = ref<Record<Station['code'], boolean>>({});
const showActionConfirm = ref(false);
const showDeviceExportModal = ref(false);
const openDeviceExportModal = () => {
showDeviceExportModal.value = true;
};
const selectedStation = ref<Station>();
const offlineDeviceTreeModalShow = ref(false);
const deviceAlarmTreeModalShow = ref(false);
@@ -47,18 +55,31 @@ const openDeviceParamsConfigModal = (station: Station) => {
</script>
<template>
<NGrid :cols="stationGridColumns" :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>
<NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
<NFlex justify="space-between" align="center" style="padding: 8px 8px 0 8px">
<NButtonGroup>
<NButton secondary :focusable="false" @click="openDeviceExportModal">导出设备状态</NButton>
<NButton v-if="false">导出录像诊断</NButton>
<NButton v-if="false">同步摄像机</NButton>
</NButtonGroup>
<NFlex v-if="showActionConfirm" size="small">
<NButton quaternary size="small" type="primary" :focusable="false">确定</NButton>
<NButton quaternary size="small" type="tertiary" :focusable="false">取消</NButton>
</NFlex>
</NFlex>
<NGrid :cols="stationGridColumns" :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>
</NScrollbar>
<!-- 离线设备详情对话框 -->
<OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
@@ -66,6 +87,8 @@ const openDeviceParamsConfigModal = (station: Station) => {
<DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
<!-- 设备配置面板对话框 -->
<DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
<!-- 设备状态导出对话框 -->
<DeviceExportModal v-model:show="showDeviceExportModal" />
</template>
<style scoped lang="scss"></style>

4
src/router/index.ts
View File

@@ -11,11 +11,11 @@ const router = createRouter({
{
path: '/',
component: () => import('@/layouts/app-layout.vue'),
redirect: '/dashboard',
redirect: '/station',
children: [
{
path: 'dashboard',
component: () => import('@/pages/dashboard-page.vue'),
redirect: 'station',
},
{
path: 'station',