多tabs的PDF导出问题

src/utils/operation.js

@@ -305,6 +305,19 @@ export function setRegionOption2(data) {
   }
   return option;
 }
+export function setRegionOptionNew(data) {
+  let option = [];
+  for (let i = 0; i < data.length; i++) {
+    let obj = data[i];
+    obj.label = data[i].label;
+    obj.value = data[i].id;
+    if(obj.degree == 4 || obj.degree == 0 || obj.label == "全部") {
+      obj.leaf = true;
+    }
+    option.push(obj);
+  }
+  return option;
+}
 export function setAdministrativeId(value) {
   let areaId = '000';
   for (let i = 0; i < value.length; i++) {

src/views/learning/item-crowd-analysis.vue

@@ -11,6 +11,8 @@
     <div class="chart" v-show="showData">
       <div class="item" id="education" ref="education"></div>
       <div class="item item-right" id="job" ref="job"></div>
+    </div>
+    <div class="chart" v-show="showData">
       <div class="item">
         <div class="title">用户性别分布</div>
         <div class="sex">
@@ -282,14 +284,16 @@ export default {
   .chart {
     position: relative;
     margin: 20px auto 0 auto;
-    width: 100%;
-    // overflow: auto;
+    width: 900px;
+    overflow-x: hidden;
     .item {
       position: relative;
       float: left;
       margin-top: 20px;
+      margin-right: 100px;
       padding: 0;
-      width: 48%;
+      // width: 48%;
+      width: 400px;
       // height: 20vw;
       height: 350px;
       border: 1px solid #dedede;
@@ -329,7 +333,7 @@ export default {
       }
     }
     .item-right {
-      float: right;
+      margin-right: 0;
     }
   }
 }

src/views/learning/item-learning-effect.vue

 <template>
   <div class="learning-effect">
-    <el-button type="default" size="small" @click="exportPDF">导出明细</el-button>
+    <!-- <el-button type="default" size="small" @click="exportPDF">导出明细</el-button> -->
     <div class="education" ref="education"></div>
     <div class="learning" ref="learning"></div>
   </div>
@@ -24,10 +24,7 @@ export default {
   },
   created() {
     vm = this;
-    vm.$nextTick(() => {
-      vm.setEducation();
-      vm.setLearning();
-    });
+    vm.setData();
   },
   mounted() {
     commonUtil.resizeHeight();
@@ -87,6 +84,12 @@ export default {
         };
       });
     },
+    setData() {
+      setTimeout(function() {
+        vm.setEducation();
+        vm.setLearning();
+      },20);
+    },
     setEducation() {
       let myChart = echarts.init(this.$refs.education);
       let option = {

src/views/learning/item-list.vue

@@ -85,11 +85,21 @@
       <div class="button-group">
         <el-button v-if="roleType == 'L1' || roleType == 'L2'" type="default" size="small" @click="changeDate">数据修改</el-button>
         <!-- <el-button type="default" size="small" @click="update" v-else>修改范围</el-button> -->
+        <el-button type="default" size="small" :disabled="exportStatus" @click="exportPDF">导出PDF</el-button>
         <el-button type="default" size="small" :disabled="exportStatus" @click="exportExcel">导出明细</el-button>
       </div>
       <!-- <div class="item-tab"></div> -->
-      <el-tabs id="item-list-tabs" v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
-        <el-tab-pane label="参与情况" name="first">
+      <el-tabs class="item-list-tabs" ref="tabs" id="item-list-tabs" v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
+        <el-tab-pane label="数据总览" name="zero" >
+          <data-all
+            ref="childDataAll"
+            :formInline="formInline"
+            :activeName="activeName"
+            :organizationNum="organizationNum"
+            :organizationList="organizationList"
+          ></data-all>
+        </el-tab-pane>
+        <!-- <el-tab-pane label="参与情况" name="first">
           <part-in
             ref="childPart"
             :formInline="formInline"
@@ -97,7 +107,7 @@
             :organizationNum="organizationNum"
             :organizationList="organizationList"
           ></part-in>
-        </el-tab-pane>
+        </el-tab-pane> -->
         <el-tab-pane label="人群分析" name="second">
           <crowd-analysis
             ref="childCrowd"
@@ -124,7 +134,7 @@
             :organizationList="organizationList"
           ></examination-analysisfrom>
         </el-tab-pane>
-        <el-tab-pane label="数据总览" name="zero" >
+        <!-- <el-tab-pane label="数据总览" name="zero" >
           <data-all
             ref="childDataAll"
             :formInline="formInline"
@@ -132,9 +142,9 @@
             :organizationNum="organizationNum"
             :organizationList="organizationList"
           ></data-all>
-        </el-tab-pane>
-        <el-tab-pane label="学习效果分析" name="fifth" :lazy=true>
-          <learning-effect></learning-effect>
+        </el-tab-pane> -->
+        <el-tab-pane label="学习效果分析" name="fifth" >
+          <learning-effect ref="childEffect"></learning-effect>
         </el-tab-pane>
       </el-tabs>
       <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
@@ -173,6 +183,8 @@ import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
 import * as operationData from "../../utils/operation";
 import { log } from "util";
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
 
 let vm = null;
 export default {
@@ -201,31 +213,14 @@ export default {
         lazy: true,
         lazyLoad(node, resolve) {
           const { level } = node;
+          if (node.level >= 1) {
             console.log("node", node);
-          if (node.level == 1) {
             let req = {
-              provinceId: node.data.value
-            };
-            vm.GET("basic-data/position/cities", req).then(res => {
-              let newData = vm.setMoreOption(res.data.cityList, "cities");
-              console.log("newData", newData);
-              resolve(newData);
-            });
-          } else if (node.level == 2) {
-            let req = {
-              cityId: node.data.value
-            };
-            vm.GET("basic-data/position/counties", req).then(res => {
-              let newData = vm.setMoreOption(res.data.countyList, "counties");
-              console.log("newData", newData);
-              resolve(newData);
-            });
-          } else if (node.level == 3) {
-            let req = {
-              countyId: node.data.value
+              projectId: vm.projectId,
+              regionId: node.data.value
             };
-            vm.GET("basic-data/position/towns", req).then(res => {
-              let newData = vm.setMoreOption(res.data.townList, "towns");
+            vm.GET("stats/region", req).then(res => {
+              let newData = vm.setRegionOptionMore(res.data.list);
               console.log("newData", newData);
               resolve(newData);
             });
@@ -235,7 +230,7 @@ export default {
       showOriginal: 2,
       roleType: '',
       formInline: {
-        region: [0],
+        region: [],
         date: "",
         organization: [],
         checked: false,
@@ -285,8 +280,8 @@ export default {
     this.projectName = vm.getUrlSearch(window.location.href, "projectName");
     this.curmbThird = vm.getUrlSearch(window.location.href, "projectName");
     this.getDisplay();
-    this.search();
-    // this.getRegionOption();
+    // this.search();
+    this.getRegionOption();
   },
   mounted: function() {
     commonUtil.resizeHeight();
@@ -301,35 +296,30 @@ export default {
       vm.reportGET("report/portal/display", req).then(res => {
         closeLoading(vm);
         if (res.code == "000000") {
-          console.log('vm.showOriginal',res.data)
           vm.showOriginal = res.data.status;
           vm.roleType = res.data.roleType;
           vm.displayExam = res.data.existExam;
           vm.flag = res.data.flag;
         }
-        if(type !=2) {
-          vm.getRegionOption();
-        }
+        // if(type !=2) {
+        //   vm.getRegionOption();
+        // }
       });
     },
     beforeLeave(activeName, oldActiveName) {
-      console.log('action',activeName,'oldActive',oldActiveName)
+      // console.log('action',activeName,'oldActive',oldActiveName)
     },
     handleClick(tab, event) {
-      //console.log(tab, event);
-      // if(tab.name == this.activeName) {
-      //   return;
+      // console.log("activeName", this.activeName, tab.name);
+      // if (tab.name == "first") {
+      //   this.$refs.childPart.$emit("init");
+      // } else if (tab.name == "second") {
+      //   this.$refs.childCrowd.$emit("init");
+      // } else if (tab.name == "third") {
+      //   this.$refs.childCourse.$emit("init");
+      // } else if (tab.name == "fourth") {
+      //   this.$refs.childExam.$emit("init");
       // }
-      console.log("activeName", this.activeName, tab.name);
-      if (tab.name == "first") {
-        this.$refs.childPart.$emit("init");
-      } else if (tab.name == "second") {
-        this.$refs.childCrowd.$emit("init");
-      } else if (tab.name == "third") {
-        this.$refs.childCourse.$emit("init");
-      } else if (tab.name == "fourth") {
-        this.$refs.childExam.$emit("init");
-      }
     },
     handleChange(value) {
       this.formInline.organization = [];
@@ -348,20 +338,13 @@ export default {
         this.organizationNotice = "选择地区筛选到区才能选择机构";
       }
     },
-    setMoreOption(data, type) {
+    setRegionOptionMore(data) {
       let option = [];
       for (let i = 0; i < data.length; i++) {
         let obj = data[i];
-        if (type == "cities") {
-          obj.label = data[i].cityName;
-          obj.value = data[i].cityId;
-        } else if (type == "counties") {
-          obj.label = data[i].countyName;
-          obj.value = data[i].countyId;
-          // obj.leaf = true;
-        } else if (type == "towns") {
-          obj.label = data[i].townName;
-          obj.value = data[i].townId;
+        obj.label = data[i].label;
+        obj.value = data[i].id;
+        if(obj.degree == 4) {
           obj.leaf = true;
         }
         option.push(obj);
@@ -431,26 +414,20 @@ export default {
     },
     //获取地区
     getRegionOption() {
-      if(vm.flag == 2 && vm.roleType == "L2") {
-         this.optionsRegion = [{id: 11, provinceId: 330, provinceName: "浙江省",value: 330, label: "浙江省"}]
-      } else {
-        let req = {};
+      let req = {
+        projectId: vm.projectId,
+      };
       openLoading(vm);
-        vm.GET("basic-data/position/provinces", req).then(res => {
+      vm.GET("stats/region", req).then(res => {
         closeLoading(vm);
-          // let list = [];
-          // for(let i =0;i<res.data.provinceList.length;i++) {
-          //   list[i] = res.data.provinceList[i].provinceName;
-          // }
-          // console.log(list);
         if (res.code == "000000") {
-            this.optionsRegion = operationData.setRegionOption(
-              res.data.provinceList
+          vm.formInline.region[0] = res.data.list[0].id;
+          vm.optionsRegion = operationData.setRegionOptionNew(
+            res.data.list
           );
-            // console.log("this.optionsRegion", this.optionsRegion);
+          vm.search();
         }
       });
-      }
     },
     getOrganizationList() {
       this.organizationList = [];
@@ -494,21 +471,23 @@ export default {
       vm.search();
     },
     search() {
-      console.log(vm.formInline.during);
-      // console.log(this.formInline,this.activeName);
-      if (this.activeName == "first") {
-        this.organizationNum = this.getOrganizationNum();
-        // console.log('this.organizationNum',this.organizationNum)
-        this.$nextTick(function() {
-          this.$refs.childPart.$emit("search");
-        });
-      } else if (this.activeName == "second") {
+      // console.log(vm.formInline.during);
       this.$refs.childCrowd.$emit("search");
-      } else if (this.activeName == "third") {
       this.$refs.childCourse.$emit("search");
-      } else if (this.activeName == "fourth") {
-        this.$refs.childExam.$emit("search");
-      }
+
+      // if (this.activeName == "first") {
+      //   this.organizationNum = this.getOrganizationNum();
+      //   // console.log('this.organizationNum',this.organizationNum)
+      //   this.$nextTick(function() {
+      //     this.$refs.childPart.$emit("search");
+      //   });
+      // } else if (this.activeName == "second") {
+      //   this.$refs.childCrowd.$emit("search");
+      // } else if (this.activeName == "third") {
+      //   this.$refs.childCourse.$emit("search");
+      // } else if (this.activeName == "fourth") {
+      //   this.$refs.childExam.$emit("search");
+      // }
     },
     //重置
     resetForm() {
@@ -611,7 +590,54 @@ export default {
       this.$nextTick(function() {
         this.$refs.childAlignment.$emit("search");
       });
+    },
+    exportPDF() {
+      openLoading(vm);
+      let tabsList = vm.$refs.tabs.$children;
+      for(let i= 1;i<tabsList.length;i++) {
+        tabsList[i].$el.style.display = 'block';
+      }
+
+      let element = '';
+      element = document.querySelector('.item-list-tabs .el-tabs__content');
+      console.log(element);
+      if(element == null) {
+        return
+      }
+      setTimeout(() => {
+        html2Canvas(element).then(function(canvas) {
+          let contentWidth = canvas.width;
+          let contentHeight = canvas.height;
+
+          //一页pdf显示html页面生成的canvas高度;
+          let pageHeight = contentWidth / 592.28 * 841.89;
+          //未生成pdf的html页面高度
+          let leftHeight = contentHeight;
+          //页面偏移
+          let position = 0;
+          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          let imgWidth = 595.28;
+          let imgHeight = 592.28 / contentWidth * contentHeight;
+
+          let pageData = canvas.toDataURL('image/jpeg', 1.0);
+
+          let pdf = new JsPDF('', 'pt', [contentWidth*0.7,contentHeight*0.7]);
+          
+          pdf.addImage(pageData, 'JPEG', 0, position, contentWidth*0.7, contentHeight*0.7)
+          let title = "导出学情报告";
+          pdf.save(title + '.pdf');
+
+          for(let i= 1;i<tabsList.length;i++) {
+            let idStr = tabsList[i].$el.id;
+            console.log(idStr,vm.activeName);
+            if(idStr.indexOf(vm.activeName) == -1) {
+              tabsList[i].$el.style.display = 'none';
+            }
           }
+          closeLoading(vm);
+        });
+      }, 0);
+    },
   }
 };
 </script>