更新2.3二期需求

package.json

@@ -22,10 +22,12 @@
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.10.0",
     "fastclick": "^1.0.6",
+    "html2canvas": "^1.0.0-rc.5",
     "iscroll": "^5.2.0",
     "js-cookie": "^2.2.0",
     "js-md5": "^0.7.3",
     "jsencrypt": "^3.0.0-rc.1",
+    "jspdf": "^1.5.3",
     "node-sass": "^4.9.2",
     "qrcode": "^1.3.3",
     "showdown": "^1.6.4",

src/views/education/create-component.vue

@@ -32,7 +32,7 @@
                         <el-input type="textarea" rows="4" cols="10" v-model="portalComponent.introduce" size="small" placeholder="请输入组件简介" style="width:37%;"></el-input>
                         <span class="word-num">{{(portalComponent.introduce).replace(/\s+/g,"").length}}/150</span>
                     </el-form-item>
-                    <div class="basic-item-icon">
+                    <!-- <div class="basic-item-icon">
                         <span class="require">*</span>
                         <el-form-item label="组件图片" prop="imageUrl">
                             <el-upload
@@ -52,7 +52,7 @@
                             </el-upload>
                         </el-form-item>
                         <p class="upload-message" v-if="uploadImgMessage">请上传组件图片</p>
-                    </div>
+                    </div> -->
                     <el-row>
                         <el-col :span="6">
                             <div class="basic-item-icon">
@@ -565,7 +565,7 @@ export default {
                 }
                 if(!vm.portalComponent.imageUrl) {
                     vm.uploadImgMessage = true
-                    return
+                    // return
                 } else {
                     vm.uploadImgMessage = false
                 }

src/views/education/item-manager.vue

@@ -78,6 +78,7 @@
         <el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
         <el-table-column prop="projectName" label="项目名称" min-width="100" align="center"></el-table-column>
         <el-table-column prop="createdName" label="创建人" align="center"></el-table-column>
+        <el-table-column prop="createdTime" label="创建时间" width="100" align="center"></el-table-column>
         <el-table-column
           prop="projectIntro"
           label="项目简介"

src/views/learning/item-data-all.vue

@@ -180,7 +180,7 @@ export default {
         vm.setDurationChart();
         vm.setCertificateChart();
       // });
-      }, 20);
+      }, 500);
     } else {
       vm.setTable();
     }
@@ -236,14 +236,14 @@ export default {
       }
     },
     updateResize() {
-      this.$nextTick(function() {
+      setTimeout(function() {
         window.onresize = function() {
           vm.echartsData.chart0.resize();
           vm.echartsData.chart1.resize();
           vm.echartsData.chart2.resize();
           vm.echartsData.chart3.resize();
         };
-      });
+      },100);
     },
     setDistributeChart() {
       vm.distributeList = [
@@ -917,6 +917,7 @@ export default {
     position: relative;
     margin: 20px auto 0 auto;
     width: 100%;
+    // min-width: 600px;
     height: 350px;
   }
   .chart-distributeChart {

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

 <template>
   <div class="learning-effect">
+    <el-button type="default" size="small" @click="exportPDF">导出明细</el-button>
     <div class="education" ref="education"></div>
     <div class="learning" ref="learning"></div>
   </div>
@@ -9,6 +10,8 @@
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
 import echarts from "echarts";
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
 let vm = null;
 export default {
   data() {
@@ -30,6 +33,52 @@ export default {
     commonUtil.resizeHeight();
   },
   methods: {
+    exportPDF() {
+      let element = '';
+      element = document.querySelector('.data-all-wrap');
+      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', 'a4');
+
+          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+          //当内容未超过pdf一页显示的范围，无需分页
+          if (leftHeight < pageHeight) {
+            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+          } else {
+            while (leftHeight > 0) {
+              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+              leftHeight -= pageHeight;
+              position -= 841.89;
+              //避免添加空白页
+              if (leftHeight > 0) {
+                pdf.addPage();
+              }
+            }
+          }
+          let title = "导出学情报告";
+          pdf.save(title + '.pdf');
+        });
+      }, 0);
+    },
     updateResize() {
       this.$nextTick(function() {
         window.onresize = function() {

src/views/learning/item-list.vue

@@ -97,7 +97,7 @@
             :organizationList="organizationList"
           ></examination-analysisfrom>
         </el-tab-pane>
-        <!-- <el-tab-pane label="数据总览" name="zero" :lazy=true>
+        <!-- <el-tab-pane label="数据总览" name="zero" >
           <data-all
             ref="childDataAll"
             :formInline="formInline"

src/views/system/role.vue

@@ -45,6 +45,7 @@
         <el-table-column prop="id" label="ID编号" min-width="100" align="center"></el-table-column>
         <el-table-column prop="projectName" label="项目名称" min-width="100" align="center"></el-table-column>
         <el-table-column prop="createdName" label="创建人" align="center"></el-table-column>
+        <el-table-column prop="createdTime" label="创建时间" width="100" align="center"></el-table-column>
         <el-table-column prop="projectIntro" label="项目简介" align="center" min-width="100" show-overflow-tooltip></el-table-column>
         <el-table-column prop="projectBegintime" label="项目开始时间" align="center"></el-table-column>
         <el-table-column prop="projectEndtime" label="项目结束时间" align="center"></el-table-column>