feat(dashboard): export devices

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