新增导出功能

src/views/perfManage/goldTarget/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Form } from 'ant-design-vue/lib';
+import { message, Form, Modal } from 'ant-design-vue/lib';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import ChartLine from '@/components/ChartLine/index.vue';
@@ -12,6 +12,8 @@ import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { getGoldTitleByNE, goldData } from '@/api/perfManage/goldTarget';
 import { parseDateToStr } from '@/utils/date-utils';
+import { writeSheet } from '@/utils/execl-utils';
+import saveAs from 'file-saver';
 const neInfoStore = useNeInfoStore();
 const { t, currentLocale } = useI18n();
 
@@ -47,34 +49,6 @@ let tableState: TabeStateType = reactive({
   data: [],
 });
 
-/**表格分页器参数 */
-let tablePagination = reactive({
-  /**当前页数 */
-  current: 1,
-  /**每页条数 */
-  pageSize: 20,
-  /**默认的每页条数 */
-  defaultPageSize: 20,
-  /**指定每页可以显示多少条 */
-  pageSizeOptions: ['10', '20', '50', '100'],
-  /**只有一页时是否隐藏分页器 */
-  hideOnSinglePage: false,
-  /**是否可以快速跳转至某页 */
-  showQuickJumper: true,
-  /**是否可以改变 pageSize */
-  showSizeChanger: true,
-  /**数据总数 */
-  total: 0,
-  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
-  onChange: (page: number, pageSize: number) => {
-    tablePagination.current = page;
-    tablePagination.pageSize = pageSize;
-    queryParams.pageNum = page;
-    queryParams.pageSize = pageSize;
-    fnGetList();
-  },
-});
-
 /**表格紧凑型变更操作 */
 function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
@@ -95,17 +69,18 @@ let queryParams: any = reactive({
   /**排序字段 */
   sortField: 'timeGroup',
   /**排序方式 */
-  sortOrder: 'asc',
+  sortOrder: 'desc',
 });
 
 /**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
 function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  console.log(sorter)
   const { columnKey, order } = sorter;
   if (order) {
     queryParams.sortField = columnKey;
     queryParams.sortOrder = order.replace('end', '');
   } else {
-    queryParams.sortOrder = 'asc';
+    queryParams.sortOrder = 'desc';
   }
   fnMakeTable(1);
 }
@@ -182,7 +157,7 @@ function fnGetList() {
 /**根据 key 查找对应的 title */
 function findTitleByKey(key: string): string | undefined {
   const item = state.designTreeData.find(item => item.key === key);
-  return item ? item.title : undefined;
+  return item ? item.title : key;
 }
 
 /**筛选条件进行制图 */
@@ -220,15 +195,14 @@ function fnDesign() {
   }
   queryParams.beginTime = queryRangePicker.value[0];
   queryParams.endTime = queryRangePicker.value[1];
-  const neType = queryParams.neType[0];
   let goldXDate: any = [];
   let goldYData: any = [];
   let hideAll: any = {};
   goldData(queryParams).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
       if (res.data.length > 0) {
+        console.log(res.data)
         tableState.data = res.data;
-        tablePagination.total = res.data.length;
         goldXDate = res.data.map((item: any) => item.timeGroup);
         goldYData = Object.keys(res.data[0])
           .filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key))
@@ -242,7 +216,6 @@ function fnDesign() {
           });
       } else {
         tableState.data = [];
-        tablePagination.total = 0;
         state.designTreeData.forEach((item: any) => {
           goldYData.push({ name: item.title, data: [] });
         });
@@ -299,6 +272,75 @@ function fnDesign() {
   });
 }
 
+/**
+ * 导出全部
+ */
+function fnExportAll() {
+  Modal.confirm({
+    title: 'Tip',
+    content: t('views.perfManage.goldTarget.exportSure'),
+    onOk() {
+      const key = 'exportAlarm';
+      message.loading({ content: t('common.loading'), key });
+      let sortArr: any = [];
+      tableColumnsDnd.value.forEach((item: any) => {
+        if (item.dataIndex) sortArr.push(item.title);
+      });
+
+      // 排序字段
+      const sortData = {
+        header: sortArr,
+      };
+      if (!queryRangePicker.value) {
+        queryRangePicker.value = ['', ''];
+      }
+      queryParams.beginTime = queryRangePicker.value[0];
+      queryParams.endTime = queryRangePicker.value[1];
+      goldData(queryParams).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('common.msgSuccess', { msg: t('common.export') }),
+            key,
+            duration: 3,
+          });
+          let realArr: any = [];
+          res.data.map((item: any) => {
+            const chineseData: any = {};
+            for (const key in item) {
+              const title: any = findTitleByKey(key);
+              if (['timeGroup', 'neName', 'startIndex'].includes(title)) {
+                switch (title) {
+                  case 'timeGroup':
+                    chineseData[t('views.perfManage.goldTarget.time')] =
+                      item[key];
+                    break;
+                  case 'neName':
+                    chineseData[t('views.perfManage.perfData.neName')] =
+                      item[key];
+                    break;
+                  case 'startIndex':
+                    break;
+                }
+              } else chineseData[title] = item[key];
+            }
+            realArr.push(chineseData);
+          });
+
+          writeSheet(realArr, 'gold', sortData).then(fileBlob =>
+            saveAs(fileBlob, `gold_${Date.now()}.xlsx`)
+          );
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key,
+            duration: 3,
+          });
+        }
+      });
+    },
+  });
+}
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -421,10 +463,16 @@ onMounted(() => {
       <a-card :bordered="false" :body-style="{ padding: '0px' }">
         <!-- 插槽-卡片左侧侧 -->
         <template #title>
-          <a-button type="primary" @click.prevent="fnMakeTable(0)">
-            <template #icon> <area-chart-outlined /> </template>
-            {{ t('views.perfManage.goldTarget.kpiTitle') }}
-          </a-button>
+          <a-space :size="8" align="center">
+            <a-button type="primary" @click.prevent="fnMakeTable(0)">
+              <template #icon> <area-chart-outlined /> </template>
+              {{ t('views.perfManage.goldTarget.kpiTitle') }}
+            </a-button>
+            <a-button type="primary" @click.prevent="fnExportAll()">
+              <template #icon> <export-outlined /> </template>
+              {{ t('views.faultManage.activeAlarm.exportAll') }}
+            </a-button>
+          </a-space>
         </template>
 
         <!-- 插槽-卡片右侧 -->
@@ -484,7 +532,7 @@ onMounted(() => {
           :loading="tableState.loading"
           :data-source="tableState.data"
           :size="tableState.size"
-          :pagination="tablePagination"
+          :pagination="false"
           :scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
           @resizeColumn="(w:number, col:any) => (col.width = w)"
           :show-expand-column="false"