update

src/api/setup.ts

@@ -40,9 +40,9 @@ export const axiosFactory = () => {
     set: (val: AxiosConfig[K]) => void
   } & (AxiosConfig[K] extends Array<any>
     ? {
-        add: (...val: AxiosConfig[K]) => void
-        del: (...val: AxiosConfig[K]) => void
-      }
+      add: (...val: AxiosConfig[K]) => void
+      del: (...val: AxiosConfig[K]) => void
+    }
     : { del: () => void })
 
   const getExponseApi = <K extends keyof AxiosConfig>(
@@ -126,7 +126,7 @@ export const axiosFactory = () => {
   const callErrorHandler = (key: 'req' | 'res', ...args: any[]) => {
     Promise.resolve().then(() => {
       const api = `${key}ErrorHandler`
-      ;(axiosConfig as any)[api].forEach((handler: any) => handler(...args))
+        ; (axiosConfig as any)[api].forEach((handler: any) => handler(...args))
     })
   }
 
@@ -161,7 +161,9 @@ export const axiosFactory = () => {
       if (matchURL(axiosConfig.unResErrorSet, response.config)) {
         return response
       }
-
+      if (response.config.responseType === 'blob') {
+        return response
+      }
       if (response.status !== 200) {
         callErrorHandler('res', response)
         throw new Error(response.statusText)

src/api/statistic.ts

@@ -1,3 +1,5 @@
+import { useI18n } from '@/hook/useI18n'
+import { AxiosResponse } from 'axios'
 import axios from './instance'
 import { SRoom } from './room'
 
@@ -65,7 +67,7 @@ export const getTop5 = async (): Promise<Top5DataType> => {
 
 export const getRoomMsgList = async (params: RoomMsgParams): Promise<RoomMsgListData> => {
     const res = await axios.get<RoomMsgListData>('takelook/roomMsgList', {
-        params: params
+        params: params,
     })
     return res
 }
@@ -76,17 +78,43 @@ export const getAllRoomStatistic = async (params: RoomMsgParams): Promise<AllRoo
     })
     return res
 }
-export const exportAllRoomStatistic = async (params: RoomMsgParams): Promise<AllRoomMsgListData> => {
-    const res = await axios.get<AllRoomMsgListData>('takelook/exportRoomData', {
-        params: params
+export const exportAllRoomStatistic = async (params: RoomMsgParams): Promise<void> => {
+    const { t } = useI18n()
+    const res = await axios.get<AxiosResponse>('takelook/exportRoomData', {
+        params: params,
+        responseType: 'blob', // Important
+        headers: {
+            'Content-Type': 'application/vnd.ms-excel'
+        }
     })
-    return res
+    var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
+    var downloadElement = document.createElement('a');
+    var href = window.URL.createObjectURL(blob); //创建下载的链接
+    downloadElement.href = href;
+    downloadElement.download = `${t('statistic.roomData')}.xlsx`; //下载后文件名
+    document.body.appendChild(downloadElement);
+    downloadElement.click(); //点击下载
+    document.body.removeChild(downloadElement); //下载完成移除元素
+    window.URL.revokeObjectURL(href); //释放掉blob对象 
 }
-export const exportRoomMsgStatistic = async (params: RoomMsgParams): Promise<AllRoomMsgListData> => {
-    const res = await axios.get<AllRoomMsgListData>('takelook/exportRoomMsg', {
-        params: params
+export const exportRoomMsgStatistic = async (params: RoomMsgParams): Promise<void> => {
+    const { t } = useI18n()
+    const res = await axios.get<AxiosResponse>('takelook/exportRoomMsg', {
+        params: params,
+        responseType: 'blob', // Important
+        headers: {
+            'Content-Type': 'application/vnd.ms-excel'
+        }
     })
-    return res
+    var blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
+    var downloadElement = document.createElement('a');
+    var href = window.URL.createObjectURL(blob); //创建下载的链接
+    downloadElement.href = href;
+    downloadElement.download = `${t('statistic.roomMssage')}.xlsx`; //下载后文件名
+    document.body.appendChild(downloadElement);
+    downloadElement.click(); //点击下载
+    document.body.removeChild(downloadElement); //下载完成移除元素
+    window.URL.revokeObjectURL(href); //释放掉blob对象 
 }
 
 export const getOnlineTimeCount = async (): Promise<DataLabelType[]> => {
@@ -95,4 +123,4 @@ export const getOnlineTimeCount = async (): Promise<DataLabelType[]> => {
 }
 export const getRoomVisitData = async (param: RoomMsgParams): Promise<RoomUseType> => {
     return await axios.get<RoomUseType>('takelook/roomVisitData', { params: param })
-}
+}

src/store/modules/statistic.ts

@@ -6,7 +6,8 @@ import {
     getAllRoomStatistic,
     exportAllRoomStatistic,
     getOnlineTimeCount,
-    getRoomVisitData
+    getRoomVisitData,
+    exportRoomMsgStatistic
 } from '@/api'
 
 import type {
@@ -70,7 +71,7 @@ export const useStatisticStore = defineStore('statistic', {
             this.roomMsg = await getRoomMsgList(params)
         },
         async exportRoomMsgList(params: RoomMsgParams) {
-            await exportAllRoomStatistic(params)
+            await exportRoomMsgStatistic(params)
         },
         async fetchRoomVisitChart(params: RoomMsgParams) {
             this.roomUseChart = await getRoomVisitData(params)

src/views/statistic/tab/tab1.vue

@@ -484,9 +484,9 @@ onMounted(async () => {
 
   window.onresize = function () {
     //自适应大小
-    onlineTimeChart.resize()
-    roomUseVisitChart.resize()
-    roomMsgChart.resize()
+    onlineTimeChart && onlineTimeChart.resize()
+    roomUseVisitChart && roomUseVisitChart.resize()
+    roomMsgChart && roomMsgChart.resize()
   }
 })
 
@@ -527,7 +527,7 @@ const handleFinish = async () => {
   padding: 25px;
   width: 100%;
   margin-bottom: 25px;
-  min-width:875px;
+  min-width: 875px;
 }
 .chart {
   width: 100%;

src/views/statistic/tab/tab3.vue

@@ -178,7 +178,7 @@ const fetchList = () => {
 }
 const exportList = () => {
   try {
-    statisticStore.exportRoomMsgStatistic({
+    statisticStore.exportRoomMsgList({
       pageNum: pagination.value.current,
       pageSize: pagination.value.pageSize,
       startTime: formState.userTime?.length ? formState.userTime[0] : '',