/* 点播趋势图 */ <template> <div class="trend-wrapper height100 overview-detail"> <div class="btn-group" v-if="isExport"> <el-button class="export" type="primary" icon="el-icon-download" @click="handleExport" >导出文件</el-button > </div> <div id="bodyCanvas" :class="isExport?'':'export'"> <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="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"; export default { data() { return { value1: "", tList: ["排名", "统计时间", "点播总量"], playDate: "1", data: [], echartsData: {}, options: [ { label: "年", value: "1" }, { label: "月", value: "2" }, // { label: "日", value: "3" }, ], timer: null, isExport: false, }; }, components: { trendLine, rankTable }, mounted() { let roleList = localStorage.getItem("roleList"); if (roleList) { this.isExport = localStorage.getItem("roleList").includes("1"); } this.handleChange("1"); }, methods: { getList(frequencyDate) { let _this = this; _this .$https({ method: "post", url: "tBoardStatistic/getBoardTrendPageList?playDate=" + frequencyDate, authType: this.backToken, }) .then((res) => { if (res.status == 200) { if (res.data.resultCode == 200) { _this.echartsData = {}; _this.echartsData.xAxisData = res.data.data.dateList; _this.echartsData.yAxisData = res.data.data.cntList; _this.data = res.data.data.page.records; } else { _this.echartsData = {}; _this.data = []; } } else { _this.echartsData = {}; _this.data = []; } setTimeout(() => { _this.init(); }, 100); }) .catch((err) => { _this.$message.error(err.message); _this.echartsData = {}; _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); &.export { height: 100%; } } .ul-wrapper { background-color: @party-white; } } </style>