feat(dashboard): export devices

src/apis/requests/device/export/ndm-icmp-export.ts

@@ -0,0 +1,17 @@
+import { ndmClient } from '@/apis/client';
+
+export const ndmExportDevices = async (status?: string) => {
+  const endpoint = '/api/ndm/ndmIcmpExport/exportByTemplate';
+  const body = new URLSearchParams();
+  body.append('status', status ?? '');
+  const resp = await ndmClient.post<Blob>(endpoint, body, {
+    responseType: 'blob',
+    retRaw: true,
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};

src/components/dashboard-page/device-statistic.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import type { LineDevices } from '@/composables/query';
+import { DeviceType } from '@/enums/device-type';
+import { computed, toRefs } from 'vue';
+import { NCard, NGrid, NGi, NStatistic, NSpace, NButton } from 'naive-ui';
+
+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="primary" 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>

src/pages/dashboard-page.vue

@@ -9,9 +9,15 @@ import { useStationStore } from '@/stores/station';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { NGrid, NGi } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
 import { useLayoutStore } from '@/stores/layout';
+import { DeviceType } from '@/enums/device-type';
+import DeviceStatistic from '@/components/dashboard-page/device-statistic.vue';
+import { useMutation } from '@tanstack/vue-query';
+import { ndmExportDevices } from '@/apis/requests';
+import { downloadByData } from '@/utils/download';
+import dayjs from 'dayjs';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
@@ -49,6 +55,28 @@ watch([lineDevicesQueryError, lineAlarmCountsQueryError], ([newLineDevicesQueryE
   }
 });
 
+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);
@@ -68,6 +96,15 @@ const openDeviceParamsConfigModal = (station: Station) => {
 </script>
 
 <template>
+  <DeviceStatistic
+    :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