变更数据中心导出功能添加

src/views/my/dataChangeCenter/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
-import { useAppStore } from '@/store/modules/app';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
@@ -8,14 +7,10 @@ import { getColorWithOpacity, formatTimestamp, getTimeRangeStamp } from "@/utils
 import ColumnChart from './modules/columnChart.vue';
 import RingChart from "./modules/ringChart.vue";
 import RingChart2 from "./modules/ringChart2.vue";
-import { changeDataCenterApi } from "@/service/api/statistics";
+import { changeDataCenterApi, exportChangeDataCenterApi } from "@/service/api/statistics";
 
-const appStore = useAppStore();
 const { routerPushByKey } = useRouterPush();
 const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const emit = defineEmits<{ go: [v: string, preset?: string]; openChange: [c: any] }>();
 
 const DATE_RANGE_OPTIONS = [
   { label: "近一年", value: 'year' },
@@ -25,6 +20,7 @@ const DATE_RANGE_OPTIONS = [
 ]
 
 const loading = ref<boolean>(false);
+const btnLoading = ref<boolean>(false);
 const homeData = ref<any>(null);
 // 日期范围
 const dateRange = ref<string>('year');
@@ -46,8 +42,35 @@ const timeChange = (val: string) => {
 }
 
 // 导出数据
-const exportData = () => {
-    window.$message?.info('还差接口');
+const exportData = async () => {
+    btnLoading.value = true;
+    const {data,error} = await exportChangeDataCenterApi({
+        from: formatTimestamp(from.value,'yyyy-MM-dd'),
+        to: formatTimestamp(to.value,'yyyy-MM-dd'),
+    });
+    if(!error){
+        if (!data) {
+            return;
+        }
+        // 确保 res 为 Blob 类型（若 API 返回 ArrayBuffer 或原始数据，需适配）
+        let blob;
+        if (data instanceof Blob) {
+            blob = data;
+        } else {
+            // 假设返回的是二进制数据（如 ArrayBuffer），指定 MIME 类型
+            blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        }
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = '变更数据中心.xlsx'; // 推荐使用 download 属性
+        document.body.appendChild(link);
+        link.click();
+        // 清理：移除链接并释放 URL 对象
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    btnLoading.value = false;
 }
 
 // 跳转页面
@@ -87,11 +110,11 @@ onMounted(() => {
                 <p class="text-sm font-bold text-slate-800">全厂变更数据中心</p>
                 <p class="text-[11px] text-slate-400 mt-[1px]">时间相关数据统一在此查询 · 统计时段</p>
                 <NSelect :value="dateRange" :options="DATE_RANGE_OPTIONS" size="tiny" class="w-28" :on-update:value="timeChange" />
-                <NButton ghost size="small" class="ml-auto text-xs" @click="exportData">导出</NButton>
+                <NButton ghost size="small" class="ml-auto text-xs" :disabled="btnLoading" @click="exportData">导出</NButton>
             </div>
         </NCard>
         <!-- 卡片数据 -->
-        <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="gap" :y-gap="16" 
+        <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16" 
             :style="{ 
                 '--theme-color': themeStore.themeColor,
                 '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.2),
@@ -193,7 +216,7 @@ onMounted(() => {
         </NGrid>
         
         <NGrid 
-          :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
+          :x-gap="16" :y-gap="16" responsive="screen" item-responsive
           :style="{
             '--theme-color':themeStore.themeColor
           }"
@@ -221,7 +244,7 @@ onMounted(() => {
         </NGrid>
     
         <NGrid 
-          :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
+          :x-gap="16" :y-gap="16" responsive="screen" item-responsive
           :style="{
             '--error-color':themeStore.otherColor.error,
             '--warning-color':themeStore.otherColor.warning,