Skip to content

N
national_museum_vod
Commit 097174d2 authored by xulili's avatar xulili
Browse files
Options

统计导出pdf

parent b3b74477
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1231 additions and 1185 deletions
package-lock.json
View file @ 097174d2
This diff is collapsed.
package.json
View file @ 097174d2
...@@ -16,14 +16,16 @@ ...@@ -16,14 +16,16 @@
"echarts": "^4.2.0-rc.2", "echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.8", "element-ui": "^2.4.8",
"file-saver": "^2.0.0-rc.3", "file-saver": "^2.0.0-rc.3",
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1",
"moment": "^2.22.2", "moment": "^2.22.2",
"ol": "^5.2.0", "ol": "^5.2.0",
"ol-ext": "^3.0.2", "ol-ext": "^3.0.2",
"qrcode.vue": "^1.6.1", "qrcode.vue": "^1.6.1",
"qs": "^6.5.2", "qs": "^6.5.2",
"qs-stringify": "^1.1.0", "qs-stringify": "^1.1.0",
"video.js": "^7.11.4",
"swiper": "^5.4.5", "swiper": "^5.4.5",
"video.js": "^7.11.4",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-qr": "^1.5.2", "vue-qr": "^1.5.2",
......
src/components/end/login.vue
View file @ 097174d2
<template> <template>
<div id="backlogin"> <div id="backlogin">
<div class="content"> <div class="content">
<div class="page-content">
<div class="page-title"> <div class="page-title">
<p>中国国家博物馆建党百年展</p> <p>中国国家博物馆建党百年展</p>
<p>点播院线服务平台</p> <p>点播院线服务平台</p>
...@@ -41,6 +42,7 @@ ...@@ -41,6 +42,7 @@
</el-form> </el-form>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -155,8 +157,17 @@ export default { ...@@ -155,8 +157,17 @@ export default {
background: url("~@/assets/login/login_bt01.png") no-repeat center/ 100% background: url("~@/assets/login/login_bt01.png") no-repeat center/ 100%
100%; 100%;
} }
.page-content {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
width:100%;
}
.page-title { .page-title {
margin-top: 20px; width: 100%;
margin-bottom: 60px;
p { p {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
...@@ -181,13 +192,8 @@ export default { ...@@ -181,13 +192,8 @@ export default {
background: url("~@/assets/login/pwd.png") no-repeat center/ 100%; background: url("~@/assets/login/pwd.png") no-repeat center/ 100%;
} }
/deep/.el-form { /deep/.el-form {
// margin-top: 120px; width: 100%;
text-align: center; text-align: center;
z-index: 99;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 150px;
.el-form-item { .el-form-item {
margin-bottom: 60px; margin-bottom: 60px;
} }
...@@ -228,7 +234,7 @@ export default { ...@@ -228,7 +234,7 @@ export default {
@media (min-width: 1301px) and (max-width: 1600px) { @media (min-width: 1301px) and (max-width: 1600px) {
#backlogin .content { #backlogin .content {
.page-title { .page-title {
margin-top: 50px; margin-bottom: 50px;
p { p {
font-size: 30px; font-size: 30px;
} }
...@@ -238,7 +244,7 @@ export default { ...@@ -238,7 +244,7 @@ export default {
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
#backlogin .content { #backlogin .content {
.page-title { .page-title {
margin-top: 20px; margin-bottom: 30px;
p { p {
font-size: 24px; font-size: 24px;
} }
......
src/components/topbar.vue
View file @ 097174d2
<template> <template>
<div class="top-bar"> <div class="top-bar">
<div class="top-bar-left"> <div class="top-bar-left">
<div class="logo"></div> <div class="logo" @click="$router.push('/index')"></div>
<span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span> <span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span>
</div> </div>
<div class="top-bar-right"> <div class="top-bar-right">
...@@ -77,6 +77,7 @@ export default { ...@@ -77,6 +77,7 @@ export default {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background: url("~@/assets/login/logo.png") no-repeat center/100% 100%; background: url("~@/assets/login/logo.png") no-repeat center/100% 100%;
cursor: pointer;
} }
.title { .title {
color: @party-white; color: @party-white;
......
src/main.js
View file @ 097174d2
...@@ -29,6 +29,10 @@ import '../static/ueditor/ueditor.all.js' ...@@ -29,6 +29,10 @@ import '../static/ueditor/ueditor.all.js'
import '../static/ueditor/themes/default/css/ueditor.min.css' import '../static/ueditor/themes/default/css/ueditor.min.css'
import '../static/ueditor/lang/zh-cn/zh-cn.js' 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') { Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern) return moment(dataStr).format(pattern)
}) })
......
src/page/check/display/index.vue
View file @ 097174d2
This diff is collapsed.
src/page/check/learn/details.vue
View file @ 097174d2
...@@ -10,66 +10,74 @@ ...@@ -10,66 +10,74 @@
label-position="top" label-position="top"
> >
<el-form-item label="学习内容名称" class="w50"> <el-form-item label="学习内容名称" class="w50">
xxxxxxx <span>{{ formInline.name }}</span>
<!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
</el-form-item> </el-form-item>
<el-form-item label="学习内容宣传图" class="w50"> <el-form-item label="学习内容宣传图" class="w50">
<img class="imgSize" src alt /> <img class="imgSize" :src="formInline.cover" alt />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-collapse v-model="activeNames" @change="handleChange"> <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 <el-form
class="demo-form-inline" class="demo-form-inline"
:inline="true" :inline="true"
:model="formInline" :model="formInline"
label-position="top" label-position="top"
> >
<el-form-item label="学习内容宣传图" class="w50">
<img class="imgSize" src alt />
</el-form-item>
<el-form-item label="展板宣传图"> <el-form-item label="展板宣传图">
<img class="imgSize" src alt /> <img class="imgSize" :src="item.cover" alt />
</el-form-item>
<el-form-item label="展板名称" class="w50">
xxxxxxx
<!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
</el-form-item> </el-form-item>
<el-form-item label="展板版权方"> <el-form-item label="展板版权方">
xxxxxxx <span>{{ item.boardCopyrightOwnerName }}</span>
<!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> --> </el-form-item>
<el-form-item label="展板名称" class="w50">
<span>{{ item.name }}</span>
</el-form-item> </el-form-item>
<el-form-item label="展板简介"> <el-form-item label="展板简介">
各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给 <span>{{ item.remarks }}</span>
<!-- <el-input type="textarea" v-model="formInline.remarks"></el-input> -->
</el-form-item> </el-form-item>
<el-form-item label="展板视频" class="w100"> <el-form-item label="展板视频" class="w100">
<div> <div class="video-box">
<img class="iconImg" src alt /> <div
<span>xxx.mp4</span> class="video-item"
v-for="(vi, index) in item.videoList"
:key="index"
>
<video :src="vi.fileUrl" controls />
<span>{{ vi.fileName }}</span>
</div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="展板音频"> <el-form-item label="展板音频">
<div> <div class="audio-box">
<img class="iconImg" src alt /> <div
<span>xxx.mp3</span> class="audio-item"
v-for="(au, index) in item.audioList"
:key="index"
>
<audio :src="au.fileUrl" controls />
<span>{{ au.fileName }}</span>
</div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-collapse-item> </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> </el-collapse>
</div> </div>
</div> </div>
<div class="info-footer"> <div class="info-footer">
<div class="btn-group"> <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> </div>
</div> </div>
...@@ -79,15 +87,12 @@ ...@@ -79,15 +87,12 @@
export default { export default {
data() { data() {
return { return {
activeNames: ["1"], activeNames: [1],
formInline: { formInline: {},
user: "",
region: ""
}
}; };
}, },
mounted(){ mounted() {
this.init() this.init();
}, },
methods: { methods: {
init() { init() {
...@@ -100,29 +105,16 @@ export default { ...@@ -100,29 +105,16 @@ export default {
{ {
url: "learningContent/get/" + id, url: "learningContent/get/" + id,
method: "get", method: "get",
authType: this.backToken authType: this.backToken,
} }
// param // param
) )
.then(res => { .then((res) => {
let data = res.data.data; let data = res.data.data;
this.ruleForm = data; vm.formInline = data;
console.log(this.ruleForm) 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
}) })
.catch(function(err) { .catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
...@@ -131,11 +123,30 @@ export default { ...@@ -131,11 +123,30 @@ export default {
}, },
handleChange(val) { handleChange(val) {
console.log(val); console.log(val);
} },
} },
}; };
</script> </script>
<style lang="less"> <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> </style>
\ No newline at end of file
src/page/check/learn/index.vue
View file @ 097174d2
...@@ -87,7 +87,6 @@ ...@@ -87,7 +87,6 @@
</div> </div>
<div class="partyt-pagination"> <div class="partyt-pagination">
<el-pagination <el-pagination
small
background background
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="page.currentPage" :current-page="page.currentPage"
......
src/page/index/index.vue
View file @ 097174d2
<template> <template>
<div class="index-container"> <div class="index-container">
<div class="panel-box" v-for="(item,index) in menuList" :key="index"> <div class="panel-box" v-for="(item, index) in menuList" :key="index">
<div class="panel-box-title"> <div class="panel-box-title">
<span class="panel-box-title-wrapper"> <span class="panel-box-title-wrapper">
<i :class="item.icon" class="panel-box-title-icon"></i> <i :class="item.icon" class="panel-box-title-icon"></i>
<span>{{item.name}}</span> <span>{{ item.name }}</span>
</span> </span>
<div class="panel-box-title-img"> <div class="panel-box-title-img">
<img :src="requireImg(item.avatar)" alt=""> <img :src="requireImg(item.avatar)" alt="" />
</div> </div>
</div> </div>
<div class="panel-box-content"> <div class="panel-box-content">
<div class="panel-sub-box" v-for="(subItem,subIndex) in item.children" :key="subIndex"> <div
class="panel-sub-box"
v-for="(subItem, subIndex) in item.children"
:key="subIndex"
>
<div class="panel-box-sub-title"> <div class="panel-box-sub-title">
<span class="line"></span> <span class="line"></span>
<span class="panel-box-sub-title_name">{{subItem.name}}</span> <span class="panel-box-sub-title_name">{{ subItem.name }}</span>
</div> </div>
<ul > <ul>
<li v-for="(menu,mIndex) in subItem.children" :key="mIndex" @click="goPage(menu.url)" > <li
v-for="(menu, mIndex) in subItem.children"
:key="mIndex"
@click="goPage(menu.url)"
>
<div :class="menu.color" class="icon-div"> <div :class="menu.color" class="icon-div">
<i :class="menu.icon" class="icon-memu"></i> <i :class="menu.icon" class="icon-memu"></i>
</div> </div>
<span class="menu-label">{{menu.name}}</span> <span class="menu-label">{{ menu.name }}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import { menuList } from '@/config/menu' // import { menuList } from '@/config/menu'
export default{ export default {
data() { data() {
return{ return {
menuList:[] menuList: [],
} };
}, },
mounted(){ mounted() {
this.menuList = JSON.parse(localStorage.getItem('menuList') || []) let menuList = localStorage.getItem("menuList");
}, if (menuList) {
methods:{ this.menuList = JSON.parse(menuList);
goPage(path){ } else {
if(path){ this.menuList = [];
this.$router.push(path)
} }
}, },
requireImg(imgSrc){ methods: {
return require(`@/assets/menu/${imgSrc}`) goPage(path) {
} if (path) {
this.$router.push(path);
} }
} },
requireImg(imgSrc) {
return require(`@/assets/menu/${imgSrc}`);
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '~@/style/menu.less'; @import "~@/style/menu.less";
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
.index-container{ width: 100%; } .index-container {
width: 100%;
}
} }
@media (min-width:1441px) and (max-width:1680px) { @media (min-width: 1441px) and (max-width: 1680px) {
.index-container{ width: 96%; } .index-container {
width: 96%;
}
} }
@media (min-width:1681px){ @media (min-width: 1681px) {
.index-container{ width: 92%; } .index-container {
width: 92%;
}
} }
.index-container{ .index-container {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
.panel-box{ .panel-box {
background: @party-white; background: @party-white;
border: 1px solid @party-white; border: 1px solid @party-white;
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
border-radius: 8px; border-radius: 8px;
margin-bottom: 24px; margin-bottom: 24px;
display: flex; display: flex;
padding: 40px 20px 20px 20px; padding: 40px 20px 20px 20px;
.panel-box-title{ .panel-box-title {
padding-right: 3.125vw; padding-right: 3.125vw;
} }
.panel-box-title-wrapper{ .panel-box-title-wrapper {
.panel-box-title-icon{ .panel-box-title-icon {
display: inline-block; display: inline-block;
width: 28px; width: 28px;
height: 28px; height: 28px;
vertical-align: middle; vertical-align: middle;
margin-right: 18px; margin-right: 18px;
} }
span{ span {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
font-weight: bold; font-weight: bold;
...@@ -95,35 +114,35 @@ export default{ ...@@ -95,35 +114,35 @@ export default{
vertical-align: middle; vertical-align: middle;
} }
} }
.panel-box-title-img{ .panel-box-title-img {
width: 10.4vw; width: 10.4vw;
height: 10.4vw; height: 10.4vw;
max-width: 200px; max-width: 200px;
max-height: 200px; max-height: 200px;
margin-top: 20px; margin-top: 20px;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.panel-box-content{ .panel-box-content {
padding-left: 20px; padding-left: 20px;
display: flex display: flex;
} }
.panel-box-sub-title{ .panel-box-sub-title {
border-bottom:1px solid @party-border-color; border-bottom: 1px solid @party-border-color;
line-height: 24px; line-height: 24px;
padding-bottom: 20px; padding-bottom: 20px;
box-sizing: content-box; box-sizing: content-box;
.line{ .line {
display: inline-block; display: inline-block;
width: 4px; width: 4px;
height: 18px; height: 18px;
background-color:@party-black; background-color: @party-black;
vertical-align: middle; vertical-align: middle;
} }
.panel-box-sub-title_name{ .panel-box-sub-title_name {
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
font-weight: bold; font-weight: bold;
...@@ -131,44 +150,43 @@ export default{ ...@@ -131,44 +150,43 @@ export default{
vertical-align: middle; vertical-align: middle;
margin-left: 12px; margin-left: 12px;
} }
} }
.panel-sub-box{ .panel-sub-box {
&:not(:first-child){ &:not(:first-child) {
margin-left: 3.125vw; margin-left: 3.125vw;
} }
ul{ ul {
display: flex; display: flex;
padding-top: 20px; padding-top: 20px;
margin-left: -20px; margin-left: -20px;
li{ li {
width: 6.67vw; width: 6.67vw;
height:8.33vw ; height: 8.33vw;
max-width: 128px; max-width: 128px;
max-height: 160px; max-height: 160px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
color: @font-color; color: @font-color;
cursor: pointer; cursor: pointer;
&:not(:first-child){ &:not(:first-child) {
margin-left: 20px; margin-left: 20px;
} }
.icon-div{ .icon-div {
padding-top: 0.94vw; padding-top: 0.94vw;
height: 4.79vw; height: 4.79vw;
width: 4.79vw; width: 4.79vw;
border-radius: 16px; border-radius: 16px;
margin: 0 auto 0.8vw ; margin: 0 auto 0.8vw;
} }
.icon-memu{ .icon-memu {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: 2.91vw; width: 2.91vw;
height: 2.91vw; height: 2.91vw;
} }
.menu-label{ .menu-label {
line-height: 24px; 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);
} }
} }
} }
......
src/page/statistics/components/echarts/line.vue
View file @ 097174d2
<template> <template>
<div id="dialogTends" style="width:100%;height:100%"></div> <div id="dialogTends" style="width: 100%; height: 100%"></div>
</template> </template>
<script> <script>
export default { export default {
name: 'interaction', name: "interaction",
data() { data() {
return { return {
title:'展板点播趋势图' title: "展板点播趋势图",
} };
},
props: {
data: {
type: Object,
default: () => {
return {};
},
},
}, },
mounted() { mounted() {
setTimeout(()=>{ // setTimeout(()=>{
this.init() // this.init()
},100) // },100)
}, },
methods: { methods: {
init(){ init() {
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
top:20, top: 20,
left: '2%', left: 50,
right: 40, right: 50,
bottom: 30, bottom: 30,
containLabel: true containLabel: true,
}, },
// dataZoom: [{ // dataZoom: [{
// type: "slider", // type: "slider",
...@@ -46,101 +53,103 @@ export default { ...@@ -46,101 +53,103 @@ export default {
// } // }
// ], // ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false,//坐标轴两边留白 boundaryGap: false, //坐标轴两边留白
data: [ data: this.data.xAxisData,
'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', axisLabel: {
'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: { //坐标轴刻度标签的相关设置。
textStyle: { textStyle: {
color: '#333333', color: "#333333",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 14, fontSize: 14,
}, },
}, },
axisTick:{//坐标轴刻度相关设置。 axisTick: {
//坐标轴刻度相关设置。
show: false, show: false,
}, },
axisLine:{//坐标轴轴线相关设置 axisLine: {
lineStyle:{ //坐标轴轴线相关设置
color:'#eeeeee', lineStyle: {
type:'solid' color: "#eeeeee",
} type: "solid",
},
}, },
splitLine: { //坐标轴在 grid 区域中的分隔线。 splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false, show: false,
} },
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
splitNumber: 5, splitNumber: 5,
max:100, max: 100,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#333333', color: "#333333",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 12, fontSize: 12,
}, },
interval:'auto' interval: "auto",
}, },
axisLine:{ axisLine: {
show: false show: false,
}, },
axisTick:{ axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color:'#eeeeee', color: "#eeeeee",
type:'dashed' type: "dashed",
} },
} },
},
}
], ],
series: [ series: [
{ {
type: 'line', type: "line",
smooth:true, smooth: true,
itemStyle: { itemStyle: {
normal: { normal: {
color:'#AC9374', color: "#AC9374",
lineStyle: { lineStyle: {
color: "#9B1E23", color: "#9B1E23",
width:1 width: 1,
}, },
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0, offset: 0,
color: 'rgba(172,141,116,0.4)' color: "rgba(172,141,116,0.4)",
}, { },
{
offset: 1, offset: 1,
color: 'rgba(155,30,35,0.4)' 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, data: this.data.yAxisData,
63, 66, 68, 69, 73, 75, 78, 80, 83, 85,90 },
] ],
}
]
}; };
let echartsDiv = this.$echarts.init(document.getElementById('dialogTends')) let echartsDiv = this.$echarts.init(
echartsDiv.setOption(option) document.getElementById("dialogTends")
);
echartsDiv.setOption(option);
}, },
} },
} };
</script> </script>
<style lang="less"> <style lang="less">
#dialogTends{ #dialogTends {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
......
src/page/statistics/tend.vue
View file @ 097174d2
/* 点播趋势图 */ /* 点播趋势图 */
<template> <template>
<div class="trend-wrapper height100 overview-detail"> <div class="trend-wrapper height100 overview-detail">
<div class="btn-group">
<el-button
class="export"
type="primary"
icon="el-icon-download"
@click="handleExport"
>导出文件</el-button
>
</div>
<div id="bodyCanvas">
<div class="ecahrts-panel-box"> <div class="ecahrts-panel-box">
<div class="panel-box-header"> <div class="panel-box-header">
<span class="title">趋势图</span> <span class="title">趋势图</span>
<el-select v-model="playDate"> <el-select v-model="playDate" @change="handleChange">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
...@@ -21,7 +31,7 @@ ...@@ -21,7 +31,7 @@
</div> </div>
</div> </div>
<div class="panel-box-content"> <div class="panel-box-content">
<trend-line /> <trend-line ref="echarts" :data="echartsData" />
</div> </div>
</div> </div>
<div class="rank-panel-box"> <div class="rank-panel-box">
...@@ -33,28 +43,35 @@ ...@@ -33,28 +43,35 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { trendLine, rankTable } from "./components"; import { trendLine, rankTable } from "./components";
import { getCurDate } from "@/utils/util.time";
import htmlCanvas from "@/utils/htmlCanvas";
import JsPDF from "jspdf";
export default { export default {
data() { data() {
return { return {
value1: "", value1: "",
tList: ["排名", "统计时间", "点播总量"], tList: ["排名", "统计时间", "点播总量"],
playDate:'', playDate: "1",
data: [], data: [],
echartsData: {},
options: [ options: [
{ label: "年", value: "1" }, { label: "年", value: "1" },
{ label: "月", value: "2" }, { label: "月", value: "2" },
{ label: "日", value: "3" }, { label: "日", value: "3" },
], ],
timer: null,
}; };
}, },
components: { trendLine, rankTable }, components: { trendLine, rankTable },
mounted() {
this.handleChange("1");
},
methods: { methods: {
getList() { getList(frequencyDate) {
let curTime = getCurDate();
let frequencyDate = curTime.year + curTime.month;
let _this = this; let _this = this;
_this _this
.$https({ .$https({
...@@ -89,12 +106,85 @@ export default { ...@@ -89,12 +106,85 @@ export default {
_this.data = []; _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() { init() {
this.$refs.echarts.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> </script>
<style lang="less" scoped> <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> </style>
\ No newline at end of file
src/utils/exportToPdf.js 0 → 100644
View file @ 097174d2
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
View file @ 097174d2
...@@ -9,17 +9,13 @@ const htmlCanvas = function (callback) { ...@@ -9,17 +9,13 @@ const htmlCanvas = function (callback) {
width: document.querySelector('#bodyCanvas').clientWidth, width: document.querySelector('#bodyCanvas').clientWidth,
height: document.querySelector('#bodyCanvas').clientHeight, height: document.querySelector('#bodyCanvas').clientHeight,
scale: true scale: true
// windowWidth: 200,
// windowHeight: 126
// x: 250
}).then((canvas) => { }).then((canvas) => {
if (!canvas) { if (!canvas) {
callback(null) callback(null)
return return
} }
// canvas.width = 200 callback(canvas)
// callback(canvas.toDataURL('image/png')) // callback(canvas.toDataURL('image/jpeg', 0.5))
callback(canvas.toDataURL('image/jpeg', 0.5))
}) })
} }
export default htmlCanvas export default htmlCanvas
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment