详情表格下载-动态数据配置-(差excel.js引入)

@@ -149,7 +149,7 @@ export  function  getDetailTableDataNoPage(params,urlObj){
 //下载表格
 //下载表格
 export  function  getBResourcePage(params,urlObj){
 export  function  getBResourcePage(params,urlObj){
   return request({
   return request({
-    url: 'api-web/detail/table/notpage?resId='+params.resId+'&access_token='+urlObj.token,
+    url: 'api-web/bResourcePage/findById?resId='+params.resId+'&access_token='+urlObj.token,
     method: 'get',
     method: 'get',
   })
   })
 }
 }

@@ -191,12 +191,11 @@
 <script>
 <script>
 import vue from "vue";
 import vue from "vue";
 import VueSuperSlide from "vue-superslide";
 import VueSuperSlide from "vue-superslide";
-import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} from "@/api/platform";
+import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl,saveClearAalarm,getBResourcePage} from "@/api/platform";
 import customDialog from "../../designerComponents/customDialog";
 import customDialog from "../../designerComponents/customDialog";
 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
 import textToImage from "../../designerComponents/textToImage";//文字转图片
 import textToImage from "../../designerComponents/textToImage";//文字转图片
 import textToBg from "../../designerComponents/textToBg";
 import textToBg from "../../designerComponents/textToBg";
-import {saveClearAalarm} from "../../../../../../api/platform";
 import {Message} from "element-ui";
 import {Message} from "element-ui";
 //文字转背景
 //文字转背景
 
 
@@ -794,7 +793,7 @@ export default {
 
 
     // 计算 奇偶背景色
     // 计算 奇偶背景色
     bodyTable(index) {
     bodyTable(index) {
-      var styleJson = {};
+      let styleJson = {};
       if (index % 2) {
       if (index % 2) {
         styleJson["background-color"] = this.optionsSetUp.eventColor
         styleJson["background-color"] = this.optionsSetUp.eventColor
       } else {
       } else {
@@ -803,7 +802,7 @@ export default {
       return styleJson;
       return styleJson;
     },
     },
     tableRowHeight(){
     tableRowHeight(){
-      var styleJson = {};
+      let styleJson = {};
       if(this.optionsSetUp.rowHeight){
       if(this.optionsSetUp.rowHeight){
         styleJson['height'] = this.optionsSetUp.rowHeight+'px';
         styleJson['height'] = this.optionsSetUp.rowHeight+'px';
         styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
         styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
@@ -814,7 +813,7 @@ export default {
       return styleJson;
       return styleJson;
     },
     },
     tableFiledWidth(index){
     tableFiledWidth(index){
-      var styleJson = {};
+      let styleJson = {};
       if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].width ){
       if(this.optionsSetUp.dynamicAddTable[index] && this.optionsSetUp.dynamicAddTable[index].width ){
         styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
         styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
       }
       }
@@ -1000,17 +999,166 @@ export default {
       this.dialogName = dialogName;
       this.dialogName = dialogName;
       return dialogName;
       return dialogName;
     },
     },
+    formatFunction(date, fmt) {
+      if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+        );
+      }
+      const o = {
+        "M+": date.getMonth() + 1, // 月份
+        "d+": date.getDate(), // 日
+        "h+": date.getHours(), // 小时
+        "m+": date.getMinutes(), // 分
+        "s+": date.getSeconds(), // 秒
+        "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
+        S: date.getMilliseconds() // 毫秒
+      };
+      for (var k in o) {
+        if (new RegExp("(" + k + ")").test(fmt)) {
+          fmt = fmt.replace(
+            RegExp.$1,
+            RegExp.$1.length == 1
+              ? o[k]
+              : ("00" + o[k]).substr(("" + o[k]).length)
+          );
+        }
+      }
+      return fmt;
+    },
     //下载
     //下载
-    downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order){
-      let kpiIdArr=[];
-      let param={
-        sortBy:this.sortBy
+    async downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order){
+      let titleName=this.tableStyle.tableName;
+      if (!titleName) {
+        titleName = "下载";
+      }
+      let sheetName=titleName;
+      let params={
+        resId:this.getUrlToken.resId
       }
       }
-      this.header.map(item=>{
-        if(item.sort){
-          kpiIdArr.push(item.key)
+      const { success,data } = await getBResourcePage(params,this.getUrlToken);
+      console.log("success",success,data)
+      if(success){
+        let ResourceData=data[0];
+        let resTypeName=ResourceData.resTypeName;
+        let resName=ResourceData.resName;
+        // let timeName=new Date().format("yyyyMMddhhmmss",24);
+        let timeName=this.formatFunction(new Date(), 'yyyyMMddhhmmss')
+        let title =resTypeName+'-'+resName+'-'+titleName+'-'+timeName;
+console.log("title",title)
+        let kpiIdArr=[];
+        let kpiIds='';
+        this.header.map(item=>{
+          if(item.sort && item.key!='KPIF74D9D2B'){
+            kpiIdArr.push(item.key)
+          }
+        })
+        if(kpiIdArr && kpiIdArr.length>0){
+          kpiIds=kpiIdArr.join(',');
         }
         }
-      })
+        let param={
+          resId:this.getUrlToken.resId,
+          kpiId:kpiIds,
+          flagPrifix:this.getUrlToken.flag,
+        }
+        let sort=this.sortBy;
+        if(sort){
+          param.sortBy=sort;
+        }
+        if(this.order){
+          param.order=this.order;
+        }
+        this.getDetail(param,title)
+      }
+
+
+    },
+    async getDetail(param,title,sheetName){
+      const { success,data } = await getDetailTableDataNoPage(param,this.getUrlToken);
+      if(success){
+        let rowList = [];
+        let headList = [];
+        let resData = data[0];
+        let header = resData.header;
+        let content = resData.content;
+        //封装content数据
+        if (content && content.length > 0) {
+          $.each(content, function (indx, con) {
+            let values=[];
+            $.each(con, function (inx, item) {
+              values.push(item.kpiValue?item.kpiValue:'');
+            });
+            rowList.push(values);
+          });
+        }
+        $.each(header,function (i,v) {
+          headList.push(v.name);
+        });
+        //下载表格
+        this.exportDataExcel(title, headList, rowList,sheetName);
+      }
+    },
+    /**
+     * 导出数据至excel 可以修改sheet
+     *
+     * @return null
+     * @author lsq by 徐毫杰
+     * @date 2022-03-01
+     * @param title 导出excel文件名
+     * @param headList 导出excel列头
+     * @param rowList 导出excel数据
+     * @param sheet 导出excel sheet页
+     */
+    exportDataExcel(title, headList, rowList, sheetName) {
+      rowList.unshift(headList);
+      let sheet = XLSX.utils.aoa_to_sheet(rowList);
+      this.openDownloadDialog(sheet2blob(sheet,sheetName), title+'.xlsx');
+    },
+    // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
+    sheet2blob(sheet, sheetName) {
+      sheetName = sheetName || 'sheet1';
+      var workbook = {
+        SheetNames: [sheetName],
+        Sheets: {}
+      };
+      workbook.Sheets[sheetName] = sheet;
+      // 生成excel的配置项
+      var wopts = {
+        bookType: 'xlsx', // 要生成的文件类型
+        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+        type: 'binary'
+      };
+      var wbout = XLSX.write(workbook, wopts);
+      var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
+      // 字符串转ArrayBuffer
+      function s2ab(s) {
+        var buf = new ArrayBuffer(s.length);
+        var view = new Uint8Array(buf);
+        for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+        return buf;
+      }
+      return blob;
+    },
+    //通用的打开下载对话框方法，没有测试过具体兼容性
+    //url 下载地址，也可以是一个blob对象，必选
+    //saveName 保存文件名，可选
+    openDownloadDialog(url, saveName) {
+      if(typeof url == 'object' && url instanceof Blob)
+      {
+        url = URL.createObjectURL(url); // 创建blob地址
+      }
+      let aLink = document.createElement('a');
+      aLink.href = url;
+      aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
+      let event;
+      if(window.MouseEvent) event = new MouseEvent('click');
+      else
+      {
+        event = document.createEvent('MouseEvents');
+        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+      }
+      aLink.dispatchEvent(event);
     },
     },
     //获取资源类型
     //获取资源类型
     async getResTypeData(){
     async getResTypeData(){

@@ -401,7 +401,9 @@ export default {
       series[0].data = data
       series[0].data = data
       series[0].detail = detail
       series[0].detail = detail
       this.dataValue=(num?num:'0') +'%';
       this.dataValue=(num?num:'0') +'%';
-      this.tableDataValue=val[0];
+      if(val[0]){
+        this.tableDataValue=val[0];
+      }
       this.setTrend(val[0])
       this.setTrend(val[0])
     },
     },
     dynamicDataFn(val, refreshTime) {
     dynamicDataFn(val, refreshTime) {
@@ -418,7 +420,9 @@ export default {
     getEchartData(val) {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       const data = this.queryEchartsData(val);
       data.then(res => {
       data.then(res => {
-        this.tableDataValue=res.map;
+        if(res.map){
+          this.tableDataValue=res.map;
+        }
         this.setTrend(res[0].value)
         this.setTrend(res[0].value)
         this.renderingFn(res);
         this.renderingFn(res);
       });
       });

@@ -182,7 +182,6 @@ export default {
     },
     },
     async init(){
     async init(){
       const reportCode = this.$route.query.reportCode;
       const reportCode = this.$route.query.reportCode;
-      console.log("aaa",this.$route.query)
       let locationUrl=this.$route.query;
       let locationUrl=this.$route.query;
       let resId=locationUrl.resId;
       let resId=locationUrl.resId;
       let token=locationUrl.access_token;
       let token=locationUrl.access_token;
@@ -191,7 +190,6 @@ export default {
     },
     },
     handlerData() {
     handlerData() {
       const resData = this.optionsData;
       const resData = this.optionsData;
-      console.log("resdata",resData)
       resData.dataType == "staticData"
       resData.dataType == "staticData"
         ? this.handlerStaticData(resData.staticData)
         ? this.handlerStaticData(resData.staticData)
         : this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
         : this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
@@ -202,7 +200,6 @@ export default {
     },
     },
     handlerDynamicData(data, refreshTime) {
     handlerDynamicData(data, refreshTime) {
       if (!data) return;
       if (!data) return;
-      console.log("资源",data)
        if (this.ispreview) {
        if (this.ispreview) {
          this.getEchartData(data);
          this.getEchartData(data);
          this.flagInter = setInterval(() => {
          this.flagInter = setInterval(() => {
@@ -215,7 +212,6 @@ export default {
     getEchartData(val) {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       const data = this.queryEchartsData(val);
       data.then(res => {
       data.then(res => {
-        console.log("def",res)
         if(res && res[0].code==0){
         if(res && res[0].code==0){
           this.healthNumData = res[0].data;
           this.healthNumData = res[0].data;