统计导出pdf

package.json

@@ -16,14 +16,16 @@
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.4.8",
     "file-saver": "^2.0.0-rc.3",
+    "html2canvas": "^1.0.0-rc.7",
+    "jspdf": "^2.3.1",
     "moment": "^2.22.2",
     "ol": "^5.2.0",
     "ol-ext": "^3.0.2",
     "qrcode.vue": "^1.6.1",
     "qs": "^6.5.2",
     "qs-stringify": "^1.1.0",
-    "video.js": "^7.11.4",
     "swiper": "^5.4.5",
+    "video.js": "^7.11.4",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^4.1.1",
     "vue-qr": "^1.5.2",

src/components/end/login.vue

 <template>
   <div id="backlogin">
     <div class="content">
-      <div class="page-title">
-        <p>中国国家博物馆建党百年展</p>
-        <p>点播院线服务平台</p>
+      <div class="page-content">
+        <div class="page-title">
+          <p>中国国家博物馆建党百年展</p>
+          <p>点播院线服务平台</p>
+        </div>
+        <el-form id="form" :model="form" :rules="rules" ref="loginForm">
+          <el-form-item prop="username">
+            <el-input
+              v-model="form.username"
+              type="text"
+              placeholder="请输入用户名"
+              autofocus
+              clearable
+            >
+              <i class="icon-username icon-prefix" slot="prefix"> </i>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="form.password"
+              type="password"
+              placeholder="请输入密码"
+              autofocus
+              clearable
+            >
+              <i class="icon-pwd icon-prefix" slot="prefix"> </i>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              class="login"
+              :disabled="flag"
+              type="submit"
+              @click="submitForm"
+            >
+              登录
+            </el-button>
+          </el-form-item>
+        </el-form>
       </div>
-      <el-form id="form" :model="form" :rules="rules" ref="loginForm">
-        <el-form-item prop="username">
-          <el-input
-            v-model="form.username"
-            type="text"
-            placeholder="请输入用户名"
-            autofocus
-            clearable
-          >
-            <i class="icon-username icon-prefix" slot="prefix"> </i>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            v-model="form.password"
-            type="password"
-            placeholder="请输入密码"
-            autofocus
-            clearable
-          >
-            <i class="icon-pwd icon-prefix" slot="prefix"> </i>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            class="login"
-            :disabled="flag"
-            type="submit"
-            @click="submitForm"
-          >
-            登录
-          </el-button>
-        </el-form-item>
-      </el-form>
     </div>
   </div>
 </template>
@@ -155,8 +157,17 @@ export default {
       background: url("~@/assets/login/login_bt01.png") no-repeat center/ 100%
         100%;
     }
+    .page-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -50%;
+      margin-left: -50%;
+      width:100%;
+    }
     .page-title {
-      margin-top: 20px;
+      width: 100%;
+      margin-bottom: 60px;
       p {
         text-align: center;
         font-weight: bold;
@@ -181,13 +192,8 @@ export default {
       background: url("~@/assets/login/pwd.png") no-repeat center/ 100%;
     }
     /deep/.el-form {
-      // margin-top: 120px;
+      width: 100%;
       text-align: center;
-      z-index: 99;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: 150px;
       .el-form-item {
         margin-bottom: 60px;
       }
@@ -228,7 +234,7 @@ export default {
 @media (min-width: 1301px) and (max-width: 1600px) {
   #backlogin .content {
     .page-title {
-      margin-top: 50px;
+      margin-bottom: 50px;
       p {
         font-size: 30px;
       }
@@ -238,7 +244,7 @@ export default {
 @media screen and (max-width: 1300px) {
   #backlogin .content {
     .page-title {
-      margin-top: 20px;
+      margin-bottom: 30px;
       p {
         font-size: 24px;
       }

src/components/topbar.vue

 <template>
   <div class="top-bar">
     <div class="top-bar-left">
-      <div class="logo"></div>
+      <div class="logo" @click="$router.push('/index')"></div>
       <span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span>
     </div>
     <div class="top-bar-right">
@@ -77,6 +77,7 @@ export default {
       display: inline-block;
       vertical-align: middle;
       background: url("~@/assets/login/logo.png") no-repeat center/100% 100%;
+      cursor: pointer;
     }
     .title {
       color: @party-white;

src/main.js

@@ -29,6 +29,10 @@ import '../static/ueditor/ueditor.all.js'
 import '../static/ueditor/themes/default/css/ueditor.min.css'
 import '../static/ueditor/lang/zh-cn/zh-cn.js'
 
+// 引入JsPdf
+import exportToPdf　from "@/utils/exportToPdf"
+Vue.use(exportToPdf)
+
 Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
   return moment(dataStr).format(pattern)
 })

src/page/check/learn/details.vue

@@ -3,73 +3,81 @@
     <div class="info-header">学习内容详情</div>
     <div class="info-container">
       <div class="info-wrapper">
-         <el-form
-              class="demo-form-inline"
-              :inline="true"
-              :model="formInline"
-              label-position="top"
-            >
-             <el-form-item label="学习内容名称" class="w50">
-                xxxxxxx
-                <!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
-              </el-form-item>
-              <el-form-item label="学习内容宣传图" class="w50">
-                <img class="imgSize" src alt />
-              </el-form-item>
-            
-            </el-form>
+        <el-form
+          class="demo-form-inline"
+          :inline="true"
+          :model="formInline"
+          label-position="top"
+        >
+          <el-form-item label="学习内容名称" class="w50">
+            <span>{{ formInline.name }}</span>
+          </el-form-item>
+          <el-form-item label="学习内容宣传图" class="w50">
+            <img class="imgSize" :src="formInline.cover" alt />
+          </el-form-item>
+        </el-form>
         <el-collapse v-model="activeNames" @change="handleChange">
-          <el-collapse-item title="建党伟业" name="1">
+          <el-collapse-item
+            v-for="(item, index) in formInline.exhibitionBoardList"
+            :key="index"
+            :title="item.name"
+          >
             <el-form
               class="demo-form-inline"
               :inline="true"
               :model="formInline"
               label-position="top"
             >
-              <el-form-item label="学习内容宣传图" class="w50">
-                <img class="imgSize" src alt />
-              </el-form-item>
               <el-form-item label="展板宣传图">
-                <img class="imgSize" src alt />
-              </el-form-item>
-              <el-form-item label="展板名称" class="w50">
-                xxxxxxx
-                <!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
+                <img class="imgSize" :src="item.cover" alt />
               </el-form-item>
               <el-form-item label="展板版权方">
-                xxxxxxx
-                <!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
+                <span>{{ item.boardCopyrightOwnerName }}</span>
+              </el-form-item>
+              <el-form-item label="展板名称" class="w50">
+                <span>{{ item.name }}</span>
               </el-form-item>
               <el-form-item label="展板简介">
-                各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给
-                <!-- <el-input type="textarea" v-model="formInline.remarks"></el-input> -->
+                <span>{{ item.remarks }}</span>
               </el-form-item>
               <el-form-item label="展板视频" class="w100">
-                <div>
-                  <img class="iconImg" src alt />
-                  <span>xxx.mp4</span>
+                <div class="video-box">
+                  <div
+                    class="video-item"
+                    v-for="(vi, index) in item.videoList"
+                    :key="index"
+                  >
+                    <video :src="vi.fileUrl" controls />
+                    <span>{{ vi.fileName }}</span>
+                  </div>
                 </div>
               </el-form-item>
               <el-form-item label="展板音频">
-                <div>
-                  <img class="iconImg" src alt />
-                  <span>xxx.mp3</span>
+                <div class="audio-box">
+                  <div
+                    class="audio-item"
+                    v-for="(au, index) in item.audioList"
+                    :key="index"
+                  >
+                    <audio :src="au.fileUrl" controls />
+                    <span>{{ au.fileName }}</span>
+                  </div>
                 </div>
               </el-form-item>
             </el-form>
           </el-collapse-item>
-          <el-collapse-item title="改革之路" name="2">
-            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
-            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
-          </el-collapse-item>
-          <el-collapse-item title="伟大复兴" name="3"></el-collapse-item>
-          <el-collapse-item title="辉煌成就" name="4"></el-collapse-item>
         </el-collapse>
       </div>
     </div>
     <div class="info-footer">
       <div class="btn-group">
-        <el-button size="mini" type="primary" class="btn_form_search" @click="close">关闭</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          class="btn_form_search"
+          @click="close"
+          >关闭</el-button
+        >
       </div>
     </div>
   </div>
@@ -79,50 +87,34 @@
 export default {
   data() {
     return {
-      activeNames: ["1"],
-      formInline: {
-        user: "",
-        region: ""
-      }
+      activeNames: [1],
+      formInline: {},
     };
   },
-  mounted(){
-    this.init()
+  mounted() {
+    this.init();
   },
   methods: {
-        init() {
-        this.getInfo(this.$route.query.id);
+    init() {
+      this.getInfo(this.$route.query.id);
     },
-      //  获取版权方详情
+    //  获取版权方详情
     getInfo(id) {
       let vm = this;
       vm.$https(
         {
           url: "learningContent/get/" + id,
           method: "get",
-          authType: this.backToken
+          authType: this.backToken,
         }
         // param
       )
-        .then(res => {
+        .then((res) => {
           let data = res.data.data;
-          this.ruleForm = data;
-          console.log(this.ruleForm)
-          // this.ruleForm = {
-          //   name :data.name,
-          //   applicableScope:data.applicableScope,
-          //   copyrightOwnerIdList:data.copyrightOwnerIdList,
-          //   cover:data.cover,
-          //   learningProjectId:data.learningProjectId,
-          //   exhibitionBoardCatIdList:data.exhibitionBoardCatIdList,
-          //   id:data.id,
-          //   exhibitionBoardIdList:data.exhibitionBoardIdList,
-          // }
-          this.tableData = data.exhibitionBoardList
-          // this.multipleSelection = data.exhibitionBoardList
-          
+          vm.formInline = data;
+          console.log(this.ruleForm); 
         })
-        .catch(function(err) {
+        .catch(function (err) {
           console.log(err);
         });
     },
@@ -131,11 +123,30 @@ export default {
     },
     handleChange(val) {
       console.log(val);
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style lang="less">
-
+.video-box {
+  width: 100%;
+  .video-item {
+    width: 100%;
+  }
+  video {
+    width: 100%;
+    height: 200px;
+  }
+}
+audio:focus {
+  outline: none;
+}
+.audio-item{
+  display: flex;
+  align-items: center;
+  span{
+    margin-left: 30px;
+  }
+}
 </style>
\ No newline at end of file

src/page/check/learn/index.vue

@@ -87,7 +87,6 @@
       </div>
        <div class="partyt-pagination">
         <el-pagination
-          small
           background
           @current-change="handleCurrentChange"
           :current-page="page.currentPage"

src/page/index/index.vue

 <template>
-<div class="index-container">
-   <div class="panel-box" v-for="(item,index) in menuList" :key="index">
-       <div class="panel-box-title">
-            <span class="panel-box-title-wrapper">
-                <i :class="item.icon" class="panel-box-title-icon"></i>
-                <span>{{item.name}}</span>
-            </span>
-            <div class="panel-box-title-img">
-                <img :src="requireImg(item.avatar)" alt="">
-            </div>
-       </div>
-       <div class="panel-box-content">
-           <div class="panel-sub-box" v-for="(subItem,subIndex) in item.children" :key="subIndex">
-             <div class="panel-box-sub-title">
-                 <span class="line"></span>
-                 <span class="panel-box-sub-title_name">{{subItem.name}}</span>
-             </div>
-             <ul >
-                 <li v-for="(menu,mIndex) in subItem.children" :key="mIndex" @click="goPage(menu.url)" >
-                    <div :class="menu.color" class="icon-div">
-                         <i :class="menu.icon" class="icon-memu"></i>
-                    </div>
-                    <span class="menu-label">{{menu.name}}</span>
-                 </li>
-             </ul>
-           </div>
-       </div>
-   </div>
-</div>
+  <div class="index-container">
+    <div class="panel-box" v-for="(item, index) in menuList" :key="index">
+      <div class="panel-box-title">
+        <span class="panel-box-title-wrapper">
+          <i :class="item.icon" class="panel-box-title-icon"></i>
+          <span>{{ item.name }}</span>
+        </span>
+        <div class="panel-box-title-img">
+          <img :src="requireImg(item.avatar)" alt="" />
+        </div>
+      </div>
+      <div class="panel-box-content">
+        <div
+          class="panel-sub-box"
+          v-for="(subItem, subIndex) in item.children"
+          :key="subIndex"
+        >
+          <div class="panel-box-sub-title">
+            <span class="line"></span>
+            <span class="panel-box-sub-title_name">{{ subItem.name }}</span>
+          </div>
+          <ul>
+            <li
+              v-for="(menu, mIndex) in subItem.children"
+              :key="mIndex"
+              @click="goPage(menu.url)"
+            >
+              <div :class="menu.color" class="icon-div">
+                <i :class="menu.icon" class="icon-memu"></i>
+              </div>
+              <span class="menu-label">{{ menu.name }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 // import { menuList } from '@/config/menu'
-export default{
-    data() {
-        return{
-           menuList:[]
-        }
+export default {
+  data() {
+    return {
+      menuList: [],
+    };
+  },
+  mounted() {
+    let menuList = localStorage.getItem("menuList");
+    if (menuList) {
+      this.menuList = JSON.parse(menuList);
+    } else {
+      this.menuList = [];
+    }
+  },
+  methods: {
+    goPage(path) {
+      if (path) {
+        this.$router.push(path);
+      }
     },
-    mounted(){
-        this.menuList = JSON.parse(localStorage.getItem('menuList') || [])
+    requireImg(imgSrc) {
+      return require(`@/assets/menu/${imgSrc}`);
     },
-    methods:{
-        goPage(path){
-            if(path){
-                this.$router.push(path)
-            }
-        },
-        requireImg(imgSrc){
-            return require(`@/assets/menu/${imgSrc}`)
-        }
-    }
-}
+  },
+};
 </script>
 <style lang="less" scoped>
-@import '~@/style/menu.less';
+@import "~@/style/menu.less";
 @media screen and (max-width: 1440px) {
-    .index-container{  width: 100%; }
+  .index-container {
+    width: 100%;
+  }
 }
-@media  (min-width:1441px) and (max-width:1680px)  {
-    .index-container{ width: 96%;  }
+@media (min-width: 1441px) and (max-width: 1680px) {
+  .index-container {
+    width: 96%;
+  }
 }
-@media  (min-width:1681px){
-   .index-container{ width: 92%; }
+@media (min-width: 1681px) {
+  .index-container {
+    width: 92%;
+  }
 }
-.index-container{
-    margin: 0 auto;
-    height: 100%;
-    overflow-y: auto;
-    .panel-box{
-        background: @party-white;
-        border: 1px solid @party-white;
-        box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
-        border-radius: 8px;
-        border-radius: 8px;
-        margin-bottom: 24px;
+.index-container {
+  margin: 0 auto;
+  height: 100%;
+  overflow-y: auto;
+  .panel-box {
+    background: @party-white;
+    border: 1px solid @party-white;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    display: flex;
+    padding: 40px 20px 20px 20px;
+    .panel-box-title {
+      padding-right: 3.125vw;
+    }
+    .panel-box-title-wrapper {
+      .panel-box-title-icon {
+        display: inline-block;
+        width: 28px;
+        height: 28px;
+        vertical-align: middle;
+        margin-right: 18px;
+      }
+      span {
+        font-size: 20px;
+        line-height: 20px;
+        font-weight: bold;
+        color: @font-color;
+        vertical-align: middle;
+      }
+    }
+    .panel-box-title-img {
+      width: 10.4vw;
+      height: 10.4vw;
+      max-width: 200px;
+      max-height: 200px;
+      margin-top: 20px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .panel-box-content {
+      padding-left: 20px;
+      display: flex;
+    }
+    .panel-box-sub-title {
+      border-bottom: 1px solid @party-border-color;
+      line-height: 24px;
+      padding-bottom: 20px;
+      box-sizing: content-box;
+      .line {
+        display: inline-block;
+        width: 4px;
+        height: 18px;
+        background-color: @party-black;
+        vertical-align: middle;
+      }
+      .panel-box-sub-title_name {
+        font-size: 18px;
+        line-height: 18px;
+        font-weight: bold;
+        color: @font-color;
+        vertical-align: middle;
+        margin-left: 12px;
+      }
+    }
+    .panel-sub-box {
+      &:not(:first-child) {
+        margin-left: 3.125vw;
+      }
+      ul {
         display: flex;
-        padding: 40px 20px 20px 20px;
-        .panel-box-title{
-            padding-right: 3.125vw;
-        }
-        .panel-box-title-wrapper{          
-            .panel-box-title-icon{
-                display: inline-block;
-                width: 28px;
-                height: 28px;
-                vertical-align: middle;
-                margin-right: 18px;
-            }
-            span{
-                font-size: 20px;
-                line-height: 20px;
-                font-weight: bold;
-                color: @font-color;
-                vertical-align: middle;
-            }
-        }
-        .panel-box-title-img{
-            width: 10.4vw;
-            height: 10.4vw;
-            max-width: 200px;
-            max-height: 200px;
-            margin-top: 20px;
-            img{
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-        }
-        .panel-box-content{
-            padding-left: 20px;
-            display: flex
-        }
-        .panel-box-sub-title{
-            border-bottom:1px solid @party-border-color;
+        padding-top: 20px;
+        margin-left: -20px;
+        li {
+          width: 6.67vw;
+          height: 8.33vw;
+          max-width: 128px;
+          max-height: 160px;
+          text-align: center;
+          border-radius: 8px;
+          color: @font-color;
+          cursor: pointer;
+          &:not(:first-child) {
+            margin-left: 20px;
+          }
+          .icon-div {
+            padding-top: 0.94vw;
+            height: 4.79vw;
+            width: 4.79vw;
+            border-radius: 16px;
+            margin: 0 auto 0.8vw;
+          }
+          .icon-memu {
+            display: block;
+            margin: 0 auto;
+            width: 2.91vw;
+            height: 2.91vw;
+          }
+          .menu-label {
             line-height: 24px;
-            padding-bottom: 20px;
-            box-sizing: content-box;
-            .line{
-                display: inline-block;
-                width: 4px;
-                height: 18px;
-                background-color:@party-black;    
-                vertical-align: middle;
-            }
-            .panel-box-sub-title_name{
-                font-size: 18px;
-                line-height: 18px;
-                font-weight: bold;
-                color: @font-color;
-                vertical-align: middle;
-                margin-left: 12px;
-            }
-
-        }
-        .panel-sub-box{
-             &:not(:first-child){
-                margin-left: 3.125vw;
-             }
-            ul{
-                display: flex;
-                padding-top: 20px;
-                margin-left: -20px;
-                li{
-                    width: 6.67vw;
-                    height:8.33vw ;
-                    max-width: 128px;
-                    max-height: 160px;
-                    text-align: center;
-                    border-radius: 8px;
-                    color: @font-color;
-                    cursor: pointer;
-                    &:not(:first-child){
-                        margin-left: 20px;
-                    }
-                    .icon-div{
-                        padding-top: 0.94vw;
-                        height: 4.79vw;
-                        width: 4.79vw;
-                        border-radius: 16px;
-                        margin: 0 auto 0.8vw ;
-                    }
-                    .icon-memu{
-                        display: block;
-                        margin: 0 auto;
-                        width: 2.91vw;
-                        height: 2.91vw;
-                    }
-                    .menu-label{                
-                        line-height: 24px;
-                        text-shadow: 0 2px 4px rgba(0,0,0,0.20);
-                    }
-                }
-            }
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+          }
         }
+      }
     }
+  }
 }
 </style>

src/page/statistics/components/echarts/line.vue

 <template>
-    <div id="dialogTends" style="width:100%;height:100%"></div>
+  <div id="dialogTends" style="width: 100%; height: 100%"></div>
 </template>
 
 <script>
-
 export default {
-  name: 'interaction',
+  name: "interaction",
   data() {
     return {
-      title:'展板点播趋势图'
-    }
+      title: "展板点播趋势图",
+    };
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
   mounted() {
-    setTimeout(()=>{
-      this.init()
-    },100)
+    // setTimeout(()=>{
+    //   this.init()
+    // },100)
   },
   methods: {
-    init(){
+    init() {
       let option = {
         tooltip: {
-          trigger: 'axis'
+          trigger: "axis",
         },
         grid: {
-          top:20,
-          left: '2%',
-          right: 40,
+          top: 20,
+          left: 50,
+          right: 50,
           bottom: 30,
-          containLabel: true
+          containLabel: true,
         },
         // dataZoom: [{
         //   type: "slider",
@@ -46,101 +53,103 @@ export default {
         // }
         // ],
         xAxis: {
-          type: 'category',
-          boundaryGap: false,//坐标轴两边留白
-           data: [
-             '2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08','2021/01/09', '2021/01/10',
-             '2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15', '2021/01/16', '2021/01/17', '2021/01/18','2021/01/19', '2021/01/20',
-             '2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
-            axisLabel: { //坐标轴刻度标签的相关设置。
+          type: "category",
+          boundaryGap: false, //坐标轴两边留白
+          data: this.data.xAxisData,
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
             textStyle: {
-              color: '#333333',
-              fontStyle: 'normal',
-              fontFamily: '微软雅黑',
+              color: "#333333",
+              fontStyle: "normal",
+              fontFamily: "微软雅黑",
               fontSize: 14,
             },
           },
-          axisTick:{//坐标轴刻度相关设置。
+          axisTick: {
+            //坐标轴刻度相关设置。
             show: false,
           },
-          axisLine:{//坐标轴轴线相关设置
-            lineStyle:{
-              color:'#eeeeee',
-              type:'solid'
-            }
+          axisLine: {
+            //坐标轴轴线相关设置
+            lineStyle: {
+              color: "#eeeeee",
+              type: "solid",
+            },
           },
-          splitLine: { //坐标轴在 grid 区域中的分隔线。
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
             show: false,
-          }
+          },
         },
         yAxis: [
           {
-            type: 'value',
+            type: "value",
             splitNumber: 5,
-            max:100,
+            max: 100,
             axisLabel: {
               textStyle: {
-                color: '#333333',
-                fontStyle: 'normal',
-                fontFamily: '微软雅黑',
+                color: "#333333",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
                 fontSize: 12,
               },
-              interval:'auto'
+              interval: "auto",
             },
-            axisLine:{
-              show: false
+            axisLine: {
+              show: false,
             },
-            axisTick:{
-              show: false
+            axisTick: {
+              show: false,
             },
             splitLine: {
               show: true,
               lineStyle: {
-                color:'#eeeeee',
-                type:'dashed'
-              }
-            }
-
-          }
+                color: "#eeeeee",
+                type: "dashed",
+              },
+            },
+          },
         ],
         series: [
           {
-            type: 'line',
-            smooth:true,
+            type: "line",
+            smooth: true,
             itemStyle: {
               normal: {
-                color:'#AC9374',
+                color: "#AC9374",
                 lineStyle: {
                   color: "#9B1E23",
-                  width:1
+                  width: 1,
                 },
                 areaStyle: {
-                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                    offset: 0,
-                    color: 'rgba(172,141,116,0.4)'
-                  }, {
-                    offset: 1,
-                    color: 'rgba(155,30,35,0.4)'
-                  }]),
-                }
-              }
+                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 0,
+                      color: "rgba(172,141,116,0.4)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(155,30,35,0.4)",
+                    },
+                  ]),
+                },
+              },
             },
-            data: [ 18, 19, 22, 23, 25, 26, 28, 30, 36, 38,
-                    40, 42, 45, 44, 46, 47, 49,  52, 56, 59,
-                    63, 66, 68, 69, 73, 75, 78,  80,  83, 85,90
-            ]
-          }
-        ]
+            data: this.data.yAxisData,
+          },
+        ],
       };
-      let echartsDiv = this.$echarts.init(document.getElementById('dialogTends'))
-      echartsDiv.setOption(option)
+      let echartsDiv = this.$echarts.init(
+        document.getElementById("dialogTends")
+      );
+      echartsDiv.setOption(option);
     },
-  }
-}
+  },
+};
 </script>
 
 <style  lang="less">
-#dialogTends{
+#dialogTends {
   width: 100%;
   height: 100%;
 }

src/page/statistics/tend.vue

 /* 点播趋势图 */
 <template>
   <div class="trend-wrapper height100 overview-detail">
-    <div class="ecahrts-panel-box">
-      <div class="panel-box-header">
-        <span class="title">趋势图</span>
-        <el-select v-model="playDate">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
-        <div class="tip">
-          <span class="tip-title">页面说明:</span>
-          <span
-            >默认展示当月点播总量趋势图及详情表格，可按照时间段进行检索，图表可以联动变化。</span
-          >
-        </div>
-      </div>
-      <div class="panel-box-content">
-        <trend-line />
-      </div>
+    <div class="btn-group">
+      <el-button
+        class="export"
+        type="primary"
+        icon="el-icon-download"
+        @click="handleExport"
+        >导出文件</el-button
+      >
     </div>
-    <div class="rank-panel-box">
-      <div class="panel-box-header">
-        <span class="title">点播趋势排行</span>
+    <div id="bodyCanvas">
+      <div class="ecahrts-panel-box">
+        <div class="panel-box-header">
+          <span class="title">趋势图</span>
+          <el-select v-model="playDate" @change="handleChange">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <div class="tip">
+            <span class="tip-title">页面说明:</span>
+            <span
+              >默认展示当月点播总量趋势图及详情表格，可按照时间段进行检索，图表可以联动变化。</span
+            >
+          </div>
+        </div>
+        <div class="panel-box-content">
+          <trend-line ref="echarts" :data="echartsData" />
+        </div>
       </div>
-      <div class="panel-box-content">
-        <rank-table :tList="tList" :data="data" />
+      <div class="rank-panel-box">
+        <div class="panel-box-header">
+          <span class="title">点播趋势排行</span>
+        </div>
+        <div class="panel-box-content">
+          <rank-table :tList="tList" :data="data" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import { trendLine, rankTable } from "./components";
+import { getCurDate } from "@/utils/util.time";
+import htmlCanvas from "@/utils/htmlCanvas";
+import JsPDF from "jspdf";
 export default {
   data() {
     return {
       value1: "",
       tList: ["排名", "统计时间", "点播总量"],
-      playDate:'',
+      playDate: "1",
       data: [],
+      echartsData: {},
       options: [
         { label: "年", value: "1" },
         { label: "月", value: "2" },
         { label: "日", value: "3" },
       ],
+      timer: null,
     };
   },
   components: { trendLine, rankTable },
+  mounted() {
+    this.handleChange("1");
+  },
   methods: {
-    getList() {
-      let curTime = getCurDate();
-      let frequencyDate = curTime.year + curTime.month;
+    getList(frequencyDate) {
       let _this = this;
       _this
         .$https({
@@ -89,12 +106,85 @@ export default {
           _this.data = [];
         });
     },
+    handleChange(val) {
+      let frequencyDate = this.getCurTime(val);
+      this.getList(frequencyDate);
+    },
+    getCurTime(type) {
+      let curTime = getCurDate();
+      let frequencyDate = curTime.year + curTime.month;
+      switch (type) {
+        case "1":
+          frequencyDate = curTime.year;
+          return frequencyDate;
+          break;
+        case "2":
+          frequencyDate = curTime.year + curTime.month;
+          return frequencyDate;
+          break;
+        case "3":
+          frequencyDate = curTime.year + curTime.month + curTime.date;
+          return frequencyDate;
+          break;
+        default:
+          return "";
+          break;
+      }
+    },
     init() {
       this.$refs.echarts.init();
     },
+    handleExport() {
+      let _this = this;
+      if (this.timer) {
+        return false;
+      }
+      this.timer = setTimeout(() => {
+        clearTimeout(_this.timer);
+        _this.timer = null;
+      }, 30000);
+      _this.getPdf("#bodyCanvas", "趋势分析");
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      setTimeout(() => {
+        loading.close();
+      }, 2000);
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
+.trend-wrapper {
+  .btn-group {
+    margin-bottom: 20px;
+    height: 36px;
+  }
+  /deep/ .el-button.export {
+    width: 128px;
+    float: right;
+    .el-icon-download {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  .el-select {
+    margin-left: 40px;
+    /deep/.el-input__inner {
+      border-radius: 22px;
+      background-color: @party-bg-gray;
+      border-color: @party-border-color;
+    }
+  }
+  #bodyCanvas {
+    height: calc(100% - 56px);
+  }
+  .ul-wrapper {
+    background-color: @party-white;
+  }
+}
 </style>
\ No newline at end of file

src/utils/exportToPdf.js

+
+import html2Canvas from "html2canvas"
+import JsPDF from "jspdf"
+export default {
+    install(Vue, options) {
+        Vue.prototype.getPdf = function (id, title) {
+            var title = title
+            html2Canvas(document.querySelector(id), {
+                allowTaint: true
+            }).then(function (canvas) {
+                let contentWidth = canvas.width
+                let contentHeight = canvas.height
+                let pageHeight = contentWidth / 592.28 * 841.89
+                let leftHeight = contentHeight
+                let position = 0
+                let imgWidth = 595.28
+                let imgHeight = 592.28 / contentWidth * contentHeight
+                let pageData = canvas.toDataURL("image / jpeg", 1.0)
+                let PDF = new JsPDF("", "pt", "a4")
+                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()
+                        }
+                    }
+                }
+                PDF.save(title + ".pdf")
+        }
+)
+    }
+}
+}

src/utils/htmlCanvas.js

@@ -9,17 +9,13 @@ const htmlCanvas = function (callback) {
     width: document.querySelector('#bodyCanvas').clientWidth,
     height: document.querySelector('#bodyCanvas').clientHeight,
     scale: true
-    // windowWidth: 200,
-    // windowHeight: 126
-    // x: 250
   }).then((canvas) => {
     if (!canvas) {
       callback(null)
       return
     }
-    // canvas.width = 200
-    // callback(canvas.toDataURL('image/png'))
-    callback(canvas.toDataURL('image/jpeg', 0.5))
+    callback(canvas)
+    // callback(canvas.toDataURL('image/jpeg', 0.5))
   })
 }
 export default htmlCanvas