|
|
|
|
@ -1,7 +1,10 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<!-- 全屏 --> |
|
|
|
|
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen"> |
|
|
|
|
<img class="full" |
|
|
|
|
src="@/assets/img/screen/full.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="fullScreen"> |
|
|
|
|
<!--header--> |
|
|
|
|
<div class="header"> |
|
|
|
|
<div class="bg_header"> |
|
|
|
|
@ -34,13 +37,18 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_1.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_1.png" |
|
|
|
|
alt=""> |
|
|
|
|
平台考试数据统计 |
|
|
|
|
</div> |
|
|
|
|
<ul class="time-switch"> |
|
|
|
|
<li v-for="(item, i) in times" :key="i" :class="{active: item.id === time}" @click="switchTime(item.id)">{{ item.name }}</li> |
|
|
|
|
<li v-for="(item, i) in times" |
|
|
|
|
:key="i" |
|
|
|
|
:class="{active: item.id === time}" |
|
|
|
|
@click="switchTime(item.id)">{{ item.name }}</li> |
|
|
|
|
</ul> |
|
|
|
|
<div id="chart1" class="chart"></div> |
|
|
|
|
<div id="chart1" |
|
|
|
|
class="chart"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -60,10 +68,12 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_2.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_2.png" |
|
|
|
|
alt=""> |
|
|
|
|
学生成绩分布分析 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart2" class="chart t_btn9"></div> |
|
|
|
|
<div id="chart2" |
|
|
|
|
class="chart t_btn9"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -83,10 +93,12 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
alt=""> |
|
|
|
|
月人均在线学习时长情况 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart3" class="chart t_btn9"></div> |
|
|
|
|
<div id="chart3" |
|
|
|
|
class="chart t_btn9"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -106,14 +118,17 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
alt=""> |
|
|
|
|
平台登录人数 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart4" class="chart t_btn9"></div> |
|
|
|
|
<div id="chart4" |
|
|
|
|
class="chart t_btn9"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="middle"> |
|
|
|
|
<div class="item" style="height: 620px"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 620px"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
@ -134,8 +149,15 @@ |
|
|
|
|
<i class="r_b_line"></i> |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<video class="video" ref="video" width="100%" height="100%" autoplay muted loop> |
|
|
|
|
<source src="@/assets/videos/screen.mp4" type="video/mp4"> |
|
|
|
|
<video class="video" |
|
|
|
|
ref="video" |
|
|
|
|
width="100%" |
|
|
|
|
height="100%" |
|
|
|
|
autoplay |
|
|
|
|
muted |
|
|
|
|
loop> |
|
|
|
|
<source src="@/assets/videos/screen.mp4" |
|
|
|
|
type="video/mp4"> |
|
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
|
</video> |
|
|
|
|
<div class="stat-mask"></div> |
|
|
|
|
@ -151,7 +173,8 @@ |
|
|
|
|
<p class="name">当前活跃人数</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item" style="height: 440px;"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 440px;"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
@ -173,14 +196,18 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" |
|
|
|
|
alt=""> |
|
|
|
|
学生实验课程考核成绩趋势图 |
|
|
|
|
</div> |
|
|
|
|
<div class="chart" id="chart5" style="height: 420px"></div> |
|
|
|
|
<div class="chart" |
|
|
|
|
id="chart5" |
|
|
|
|
style="height: 420px"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<div class="item" style="height: 160px"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 160px"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
@ -202,18 +229,23 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_4.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_4.png" |
|
|
|
|
alt=""> |
|
|
|
|
本月综合学习积极性最高的实验课程 |
|
|
|
|
</div> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li v-for="(item, i) in courses" :key="i"> |
|
|
|
|
<li v-for="(item, i) in courses" |
|
|
|
|
:key="i"> |
|
|
|
|
<span class="index">{{ i + 1 }}</span> |
|
|
|
|
<p class="text">{{ item.curriculumName }}</p> |
|
|
|
|
<img class="icon" src="@/assets/img/screen/medal.png" alt=""> |
|
|
|
|
<p class="text">{{ item.goodsName }}</p> |
|
|
|
|
<img class="icon" |
|
|
|
|
src="@/assets/img/screen/medal.png" |
|
|
|
|
alt=""> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="item" style="height: 240px"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 240px"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
@ -235,19 +267,23 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_5.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_5.png" |
|
|
|
|
alt=""> |
|
|
|
|
热门理论课程排行榜 |
|
|
|
|
</div> |
|
|
|
|
<div class="popular-wrap" ref="popularCourses"> |
|
|
|
|
<div class="popular-wrap" |
|
|
|
|
ref="popularCourses"> |
|
|
|
|
<ul class="list popular"> |
|
|
|
|
<li v-for="(item, i) in popularCourses" :key="i"> |
|
|
|
|
<li v-for="(item, i) in popularCourses" |
|
|
|
|
:key="i"> |
|
|
|
|
<span class="index">{{ i + 1 }}</span> |
|
|
|
|
<p class="text">{{ item }}</p> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item" style="height: 300px"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 300px"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
<i class="l_t_line"></i> |
|
|
|
|
@ -265,7 +301,8 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
alt=""> |
|
|
|
|
学霸排行榜 |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table"> |
|
|
|
|
@ -281,10 +318,13 @@ |
|
|
|
|
</thead> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table" ref="ach" style="max-height: 220px;margin-top: 0;overflow: hidden"> |
|
|
|
|
<div class="main_table" |
|
|
|
|
ref="ach" |
|
|
|
|
style="max-height: 222px;margin-top: 0;overflow: hidden"> |
|
|
|
|
<table> |
|
|
|
|
<tbody> |
|
|
|
|
<tr v-for="(item, i) in achs" :key="i"> |
|
|
|
|
<tr v-for="(item, i) in achs" |
|
|
|
|
:key="i"> |
|
|
|
|
<td width="20%">{{ i + 1 }}</td> |
|
|
|
|
<td width="20%">{{ item.userName }}</td> |
|
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
|
|
|
@ -295,7 +335,8 @@ |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item" style="height: 300px"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 300px"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
<i class="l_t_line"></i> |
|
|
|
|
@ -313,7 +354,8 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
alt=""> |
|
|
|
|
活跃度排行榜 |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table"> |
|
|
|
|
@ -327,10 +369,13 @@ |
|
|
|
|
</thead> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table" ref="active" style="max-height: 230px;margin-top: 0;overflow: hidden"> |
|
|
|
|
<div class="main_table" |
|
|
|
|
ref="active" |
|
|
|
|
style="max-height: 230px;margin-top: 0;overflow: hidden"> |
|
|
|
|
<table> |
|
|
|
|
<tbody> |
|
|
|
|
<tr v-for="(item, i) in actives" :key="i"> |
|
|
|
|
<tr v-for="(item, i) in actives" |
|
|
|
|
:key="i"> |
|
|
|
|
<td width="20%">{{ i + 1 }}</td> |
|
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
|
|
|
<td width="20%">{{ item.activityIndex }}</td> |
|
|
|
|
@ -349,7 +394,7 @@ import Util from '@/libs/util' |
|
|
|
|
import * as echarts from 'echarts' |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
token: Util.local.get(Setting.tokenKey), |
|
|
|
|
time: 0, |
|
|
|
|
@ -373,14 +418,14 @@ export default { |
|
|
|
|
examChart: null |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.renderExam() |
|
|
|
|
this.getList() |
|
|
|
|
this.renderChart() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 全屏 |
|
|
|
|
fullScreen() { |
|
|
|
|
fullScreen () { |
|
|
|
|
// 检测是否全屏 |
|
|
|
|
if (document.fullscreenElement || |
|
|
|
|
document.mozFullScreenElement || |
|
|
|
|
@ -401,21 +446,21 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取文本表格数据 |
|
|
|
|
getList() { |
|
|
|
|
getList () { |
|
|
|
|
// 本院数据概览 |
|
|
|
|
this.$post(this.api.overviewOfOurSchoolData).then(({ data }) => { |
|
|
|
|
this.overview = data |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 本月综合学习积极性最高的实验课程 |
|
|
|
|
this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => { |
|
|
|
|
this.courses = data |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 热门理论课程排行榜 |
|
|
|
|
this.$post(this.api.courseRankings).then(({ data }) => { |
|
|
|
|
this.popularCourses = data |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 学霸排行榜 |
|
|
|
|
this.$post(`${this.api.academicLeadersRanking}?pageNum=1&pageSize=20`).then(({ data }) => { |
|
|
|
|
@ -426,24 +471,24 @@ export default { |
|
|
|
|
return b.avgScore - a.avgScore |
|
|
|
|
}) |
|
|
|
|
this.achs = list |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 活跃度排行榜 |
|
|
|
|
this.$post(this.api.activityRanking).then(({ list }) => { |
|
|
|
|
this.actives = list |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
this.scrollTable() |
|
|
|
|
}, |
|
|
|
|
// 切换时间单位 |
|
|
|
|
switchTime(id) { |
|
|
|
|
switchTime (id) { |
|
|
|
|
this.time = id |
|
|
|
|
this.renderExam() |
|
|
|
|
}, |
|
|
|
|
// 平台考试数据考试统计 |
|
|
|
|
renderExam() { |
|
|
|
|
renderExam () { |
|
|
|
|
this.$post(`${this.api.examStatistics}?choose=${this.time}`).then(({ data }) => { |
|
|
|
|
const option = { |
|
|
|
|
title : { |
|
|
|
|
title: { |
|
|
|
|
text: '考试通过率', |
|
|
|
|
subtext: data.examPassRate, |
|
|
|
|
textStyle: { |
|
|
|
|
@ -457,33 +502,33 @@ export default { |
|
|
|
|
x: 'center', |
|
|
|
|
y: '41%', |
|
|
|
|
}, |
|
|
|
|
tooltip : { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
formatter: "{b} : {c} ({d}%)" |
|
|
|
|
// formatter: '{total|' + 100 +'}'+ '\n\r' + '{active|共发布活动}' |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
show:false, |
|
|
|
|
x : 'center', |
|
|
|
|
y : 'bottom', |
|
|
|
|
data:['考试总场次', '考试人数'] |
|
|
|
|
show: false, |
|
|
|
|
x: 'center', |
|
|
|
|
y: 'bottom', |
|
|
|
|
data: ['考试总场次', '考试人数'] |
|
|
|
|
}, |
|
|
|
|
toolbox: { |
|
|
|
|
}, |
|
|
|
|
label:{ |
|
|
|
|
normal:{ |
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
show: true, |
|
|
|
|
formatter: "{b} \n{d}%" |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
calculable : true, |
|
|
|
|
color:['#44cfff', '#4388ff'], |
|
|
|
|
series : [ |
|
|
|
|
calculable: true, |
|
|
|
|
color: ['#44cfff', '#4388ff'], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name:'', |
|
|
|
|
type:'pie', |
|
|
|
|
radius : [60, 80], |
|
|
|
|
center : ['50%', '50%'], |
|
|
|
|
name: '', |
|
|
|
|
type: 'pie', |
|
|
|
|
radius: [60, 80], |
|
|
|
|
center: ['50%', '50%'], |
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
show: true, |
|
|
|
|
@ -492,22 +537,22 @@ export default { |
|
|
|
|
formatter: '{b} {c}' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data:[ |
|
|
|
|
{value: data.totalNumberOfExams, name:'考试\n总场次'}, |
|
|
|
|
{value: data.referenceNumber, name:'考试\n人数'}, |
|
|
|
|
data: [ |
|
|
|
|
{ value: data.totalNumberOfExams, name: '考试\n总场次' }, |
|
|
|
|
{ value: data.referenceNumber, name: '考试\n人数' }, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
this.examChart = echarts.init(document.querySelector(`#chart1`)) |
|
|
|
|
this.examChart.setOption(option) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 获取图标数据并渲染 |
|
|
|
|
async renderChart() { |
|
|
|
|
async renderChart () { |
|
|
|
|
const animateChart = (chart, option, data, num = 6) => { |
|
|
|
|
// 每次向后滚动一个，最后一个从头开始。 |
|
|
|
|
if (option.dataZoom[0].endValue == data.length ) { |
|
|
|
|
if (option.dataZoom[0].endValue == data.length) { |
|
|
|
|
option.dataZoom[0].endValue = num |
|
|
|
|
option.dataZoom[0].startValue = 0 |
|
|
|
|
} |
|
|
|
|
@ -555,7 +600,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
top: '10%', |
|
|
|
|
textStyle:{ |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
@ -575,7 +620,7 @@ export default { |
|
|
|
|
endValue: 5 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
color:['#4388ff', '#44cfff', '#8c2bff', '#2defe2'], |
|
|
|
|
color: ['#4388ff', '#44cfff', '#8c2bff', '#2defe2'], |
|
|
|
|
xAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'category', |
|
|
|
|
@ -656,7 +701,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[0], option, data, 5) |
|
|
|
|
}, 3000) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 学生实验课程考核成绩趋势图 |
|
|
|
|
const colors = [ |
|
|
|
|
@ -702,30 +747,24 @@ export default { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
// 登录前登录后调的课程接口不一样 |
|
|
|
|
const cousrseRes = this.token ? |
|
|
|
|
await this.$get(this.api.schoolCourse) : |
|
|
|
|
await this.$post(this.api.curriculumListForBeforeLogin, { |
|
|
|
|
const cousrseRes = await this.$post(this.api.listOfGoods, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 100, |
|
|
|
|
supplierId: '1,2,3,4', |
|
|
|
|
curriculumName: '', |
|
|
|
|
categoryId: '', |
|
|
|
|
curriculumType: '', |
|
|
|
|
professionalCategoryId: '', |
|
|
|
|
professionalId: '', |
|
|
|
|
pageSize: 1000, |
|
|
|
|
sort: 0, |
|
|
|
|
isShelves: 0, |
|
|
|
|
hotTag: 1, |
|
|
|
|
}) |
|
|
|
|
if (cousrseRes) { |
|
|
|
|
const courseList = this.token ? |
|
|
|
|
cousrseRes.data : |
|
|
|
|
const courseList = |
|
|
|
|
cousrseRes.page.records |
|
|
|
|
const ids = courseList.map(e => e.cid) |
|
|
|
|
const ids = courseList.map(e => e.mallId) |
|
|
|
|
times.map(e => { |
|
|
|
|
e.cid = ids |
|
|
|
|
e.mallId = ids |
|
|
|
|
}) |
|
|
|
|
const courseData = {} |
|
|
|
|
courseList.map(e => { |
|
|
|
|
// e.curriculumName = e.curriculumName.substring(0, 10) |
|
|
|
|
courseData[e.curriculumName] = [] |
|
|
|
|
// e.productName = e.productName.substring(0, 10) |
|
|
|
|
courseData[e.productName] = [] |
|
|
|
|
}) |
|
|
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
|
|
|
|
const times = [] |
|
|
|
|
@ -733,9 +772,9 @@ export default { |
|
|
|
|
data.map((e, i) => { |
|
|
|
|
times.push(e.time) |
|
|
|
|
e.assesScoreRespList.map(n => { |
|
|
|
|
const item = courseList.find(j => j.cid == n.curriculumId) |
|
|
|
|
const item = courseList.find(j => j.mallId == n.mallId) |
|
|
|
|
if (item) { |
|
|
|
|
const name = item.curriculumName |
|
|
|
|
const name = item.productName |
|
|
|
|
if (courseData[name]) { |
|
|
|
|
courseData[name][i] = +n.avgScore |
|
|
|
|
} |
|
|
|
|
@ -791,11 +830,11 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
top:'8%', |
|
|
|
|
data: courseList.map(e => e.curriculumName), |
|
|
|
|
top: '8%', |
|
|
|
|
data: courseList.map(e => e.productName), |
|
|
|
|
textStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.5)', |
|
|
|
|
fontSize:'12', |
|
|
|
|
fontSize: '12', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
@ -821,7 +860,7 @@ export default { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: "rgba(255,255,255,.9)", |
|
|
|
|
fontSize:12, |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
@ -841,7 +880,7 @@ export default { |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
axisTick: {show: false}, |
|
|
|
|
axisTick: { show: false }, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.1)' |
|
|
|
|
@ -850,7 +889,7 @@ export default { |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle: { |
|
|
|
|
color: "rgba(255,255,255,.9)", |
|
|
|
|
fontSize:12, |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
@ -866,7 +905,7 @@ export default { |
|
|
|
|
// setInterval(function () { |
|
|
|
|
// animateChart(chart[1], option, times) |
|
|
|
|
// }, 5000) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 月人均在线学习时长情况 |
|
|
|
|
@ -879,7 +918,7 @@ export default { |
|
|
|
|
const pre = date.getFullYear() + '-' + Util.formateTime(date.getMonth() + 1) + '-' |
|
|
|
|
months.push({ |
|
|
|
|
startTime: pre + '01', |
|
|
|
|
endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000*60*60*24).getDate() |
|
|
|
|
endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000 * 60 * 60 * 24).getDate() |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => { |
|
|
|
|
@ -931,10 +970,10 @@ export default { |
|
|
|
|
formatter: '{value}' |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], |
|
|
|
|
color: ['#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'], |
|
|
|
|
legend: { |
|
|
|
|
data: ['月人均在线学习时长情况'], |
|
|
|
|
textStyle:{ |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
top: '8%' |
|
|
|
|
@ -976,7 +1015,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[2], option, data) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 平台登录人数 |
|
|
|
|
this.$get(this.api.platformLoginStatistics, { |
|
|
|
|
@ -1070,7 +1109,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[3], option, data, 3) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 监听resize事件，动态改变chart大小 |
|
|
|
|
window.addEventListener('resize', () => { |
|
|
|
|
@ -1081,7 +1120,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 表格滚动效果 |
|
|
|
|
scrollTable() { |
|
|
|
|
scrollTable () { |
|
|
|
|
const dom = this.$refs.popularCourses |
|
|
|
|
const dom1 = this.$refs.ach |
|
|
|
|
const dom2 = this.$refs.active |
|
|
|
|
@ -1101,5 +1140,5 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import "../../styles/page/screen.scss"; |
|
|
|
|
@import '../../styles/page/screen.scss'; |
|
|
|
|
</style> |
