You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1116 lines
33 KiB
1116 lines
33 KiB
<template> |
|
<div class="wrap"> |
|
<!-- 全屏 --> |
|
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen"> |
|
<!--header--> |
|
<div class="header"> |
|
<div class="bg_header"> |
|
<div class="header_nav fl t_title">平台大数据可视化看板</div> |
|
</div> |
|
</div> |
|
|
|
<!--main--> |
|
<div class="content"> |
|
<div class="left"> |
|
<div class="item"> |
|
<!--左上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<!--右上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<!--左下边框--> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<!--右下边框--> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<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> |
|
</ul> |
|
<div id="chart1" class="chart"></div> |
|
</div> |
|
<div class="item"> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_2.png" alt=""> |
|
学生成绩分布分析 |
|
</div> |
|
<div id="chart2" class="chart t_btn9"></div> |
|
</div> |
|
<div class="item"> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
月人均在线学习时长情况 |
|
</div> |
|
<div id="chart3" class="chart t_btn9"></div> |
|
</div> |
|
<div class="item"> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
平台登录人数 |
|
</div> |
|
<div id="chart4" class="chart t_btn9"></div> |
|
</div> |
|
</div> |
|
<div class="middle"> |
|
<div class="item" style="height: 620px"> |
|
<!--左上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<!--右上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<!--左下边框--> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<!--右下边框--> |
|
<div class="t_line_box"> |
|
<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 标签。 |
|
</video> |
|
<div class="stat-mask"></div> |
|
<div class="stat-wrap"> |
|
<p class="num num1">{{ overview.numberOfPeopleStudy }}</p> |
|
<p class="num num2">{{ overview.courseStudyFrequency }}</p> |
|
<p class="num num3">{{ overview.courseStudyTime }}</p> |
|
<p class="num num4">{{ overview.numberOfExperiments }}</p> |
|
<p class="num num5">{{ overview.cumulativeExperimentTime }}</p> |
|
</div> |
|
<div class="active-number"> |
|
<p class="val">{{ overview.currentActivePeople }}</p> |
|
<p class="name">当前活跃人数</p> |
|
</div> |
|
</div> |
|
<div class="item" style="height: 440px;"> |
|
<!--左上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<!--右上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<!--左下边框--> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<!--右下边框--> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
|
学生实验课程考核成绩趋势图 |
|
</div> |
|
<div class="chart" id="chart5" style="height: 420px"></div> |
|
</div> |
|
</div> |
|
<div class="right"> |
|
<div class="item" style="height: 160px"> |
|
<!--左上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<!--右上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<!--左下边框--> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<!--右下边框--> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_4.png" alt=""> |
|
本月综合学习积极性最高的实验课程 |
|
</div> |
|
<ul class="list"> |
|
<li v-for="(item, i) in courses" :key="i"> |
|
<span class="index">{{ i + 1 }}</span> |
|
<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="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<!--右上边框--> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<!--左下边框--> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<!--右下边框--> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_5.png" alt=""> |
|
热门理论课程排行榜 |
|
</div> |
|
<div class="popular-wrap" ref="popularCourses"> |
|
<ul class="list popular"> |
|
<li v-for="(item, i) in popularCourses" :key="i"> |
|
<span class="index">{{ i + 1 }}</span> |
|
<p class="text">{{ item.courseName }}</p> |
|
<span class="num">{{ item.viewCount }}</span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="item" style="height: 300px"> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
学霸排行榜 |
|
</div> |
|
<div class="main_table"> |
|
<table> |
|
<thead> |
|
<tr> |
|
<th width="20%">名次</th> |
|
<th width="20%">姓名</th> |
|
<th width="20%">{{ token ? '班级' : '学校' }}</th> |
|
<th width="20%">练习次数</th> |
|
<th width="20%">平均分</th> |
|
</tr> |
|
</thead> |
|
</table> |
|
</div> |
|
<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"> |
|
<td width="20%">{{ i + 1 }}</td> |
|
<td width="20%">{{ item.userName }}</td> |
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
<td width="20%">{{ item.practiceNumber }}</td> |
|
<td width="20%">{{ item.avgScore }}</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="item" style="height: 300px"> |
|
<div class="t_line_box"> |
|
<i class="t_l_line"></i> |
|
<i class="l_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="t_r_line"></i> |
|
<i class="r_t_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="l_b_line"></i> |
|
<i class="b_l_line"></i> |
|
</div> |
|
<div class="t_line_box"> |
|
<i class="r_b_line"></i> |
|
<i class="b_r_line"></i> |
|
</div> |
|
<div class="main_title"> |
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
活跃度排行榜 |
|
</div> |
|
<div class="main_table"> |
|
<table> |
|
<thead> |
|
<tr> |
|
<th width="20%">名次</th> |
|
<th width="20%">{{ token ? '班级' : '学校' }}</th> |
|
<th width="20%">活跃指数</th> |
|
</tr> |
|
</thead> |
|
</table> |
|
</div> |
|
<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"> |
|
<td width="20%">{{ i + 1 }}</td> |
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
<td width="20%">{{ item.activityIndex }}</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Util from '@/libs/util' |
|
import * as echarts from 'echarts' |
|
import Setting from '@/setting' |
|
export default { |
|
data () { |
|
return { |
|
token: Util.local.get(Setting.tokenKey), |
|
time: 2, |
|
times: [ |
|
{ |
|
id: 2, |
|
name: '年' |
|
}, |
|
{ |
|
id: 0, |
|
name: '月' |
|
}, |
|
{ |
|
id: 1, |
|
name: '日' |
|
} |
|
], |
|
overview: {}, |
|
goodsSell: [], |
|
cryptoList: [], |
|
courses: [], |
|
popularCourses: [], |
|
achs: [], |
|
actives: [], |
|
examChart: null |
|
} |
|
}, |
|
mounted () { |
|
this.renderExam() |
|
this.getList() |
|
this.renderChart() |
|
}, |
|
methods: { |
|
// 全屏 |
|
fullScreen () { |
|
// 检测是否全屏 |
|
if (document.fullscreenElement || |
|
document.mozFullScreenElement || |
|
document.msFullScreenElement || |
|
document.webkitFullscreenElement) { |
|
const fn = document.exitFullScreen || |
|
document.mozCancelFullScreen || |
|
document.webkitExitFullscreen || |
|
document.msExitFullscreen |
|
fn.call(document) |
|
} else { |
|
const el = document.body |
|
const fn = el.requestFullscreen || |
|
el.mozRequestFullScreen || |
|
el.webkitRequestFullscreen || |
|
el.msRequestFullscreen |
|
fn.call(el) |
|
} |
|
}, |
|
// 获取文本表格数据 |
|
getList () { |
|
// 本院数据概览 |
|
this.$post(this.api.overviewOfOurSchoolData).then(({ data }) => { |
|
this.overview = data |
|
}).catch(res => { }) |
|
|
|
// 本月综合学习积极性最高的实验课程 |
|
this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => { |
|
this.courses = data |
|
}).catch(res => { }) |
|
|
|
// 热门理论课程排行榜 |
|
this.$post(this.api.courseRankings).then(({ list }) => { |
|
this.popularCourses = list |
|
}).catch(res => { }) |
|
|
|
// 学霸排行榜 |
|
this.$post(`${this.api.academicLeadersRanking}?pageNum=1&pageSize=20`).then(({ data }) => { |
|
const list = data.records |
|
// 优先排序平均分，然后再排序练习次数 |
|
list.sort((a, b) => { |
|
if (a.avgScore == b.avgScore) return b.practiceNumber - a.practiceNumber |
|
return b.avgScore - a.avgScore |
|
}) |
|
this.achs = list |
|
}).catch(res => { }) |
|
|
|
// 活跃度排行榜 |
|
this.$post(this.api.activityRanking).then(({ list }) => { |
|
list.sort((a, b) => { |
|
return +b.activityIndex - +a.activityIndex |
|
}) |
|
this.actives = list |
|
}).catch(res => { }) |
|
this.scrollTable() |
|
}, |
|
// 切换时间单位 |
|
switchTime (id) { |
|
this.time = id |
|
this.renderExam() |
|
}, |
|
// 平台考试数据考试统计 |
|
renderExam () { |
|
this.$post(`${this.api.examStatistics}?choose=${this.time}`).then(({ data }) => { |
|
const option = { |
|
title: { |
|
text: '考试通过率', |
|
subtext: data.examPassRate, |
|
textStyle: { |
|
fontSize: 16, |
|
color: '#3adce9', |
|
}, |
|
subtextStyle: { |
|
fontSize: 26, |
|
color: '#00d5ff', |
|
}, |
|
x: 'center', |
|
y: '41%', |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
formatter: "{b} : {c} ({d}%)" |
|
// formatter: '{total|' + 100 +'}'+ '\n\r' + '{active|共发布活动}' |
|
}, |
|
legend: { |
|
show: false, |
|
x: 'center', |
|
y: 'bottom', |
|
data: ['考试总场次', '考试人数'] |
|
}, |
|
toolbox: { |
|
}, |
|
label: { |
|
normal: { |
|
show: true, |
|
formatter: "{b} \n{d}%" |
|
} |
|
}, |
|
calculable: true, |
|
color: ['#44cfff', '#4388ff'], |
|
series: [ |
|
{ |
|
name: '', |
|
type: 'pie', |
|
radius: [60, 80], |
|
center: ['50%', '60%'], |
|
label: { |
|
normal: { |
|
show: true, |
|
alignTo: 'none', |
|
lineHeight: 18, |
|
formatter: '{b} {c}' |
|
} |
|
}, |
|
data: [ |
|
{ value: data.totalNumberOfExams, name: '考试\n总场次' }, |
|
{ value: data.referenceNumber, name: '考试\n人数' }, |
|
] |
|
} |
|
] |
|
} |
|
this.examChart = echarts.init(document.querySelector(`#chart1`)) |
|
this.examChart.setOption(option) |
|
}).catch(res => { }) |
|
}, |
|
// 获取图标数据并渲染 |
|
async renderChart () { |
|
const animateChart = (chart, option, data, num = 6) => { |
|
// 每次向后滚动一个，最后一个从头开始。 |
|
if (option.dataZoom[0].endValue == data.length) { |
|
option.dataZoom[0].endValue = num |
|
option.dataZoom[0].startValue = 0 |
|
} |
|
else { |
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 |
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 |
|
} |
|
chart.setOption(option) |
|
} |
|
let chart = {} |
|
|
|
// 学生成绩分布分析 |
|
const year = new Date().getFullYear() |
|
const times = [] |
|
// 获取过去五年的上下半年日期 |
|
for (let i = 0; i < 6; i++) { |
|
times.push({ |
|
startTime: (year - i) + '-02-01', |
|
endTime: (year - i) + '-08-31' |
|
}) |
|
times.push({ |
|
startTime: (year - i) + '-09-01', |
|
endTime: (year - i + 1) + '-01-31' |
|
}) |
|
} |
|
this.$post(this.api.studentGradeDistribution, times).then(({ data }) => { |
|
const times = [] |
|
const data1 = [] |
|
const data2 = [] |
|
const data3 = [] |
|
const data4 = [] |
|
data.map(e => { |
|
times.push(e.time) |
|
data1.push(e.yellow.replace('%', '')) |
|
data2.push(e.green.replace('%', '')) |
|
data3.push(e.blue.replace('%', '')) |
|
data4.push(e.pink.replace('%', '')) |
|
}) |
|
const option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow' |
|
} |
|
}, |
|
legend: { |
|
top: '10%', |
|
textStyle: { |
|
color: '#fff' |
|
}, |
|
}, |
|
grid: { |
|
left: '3%', |
|
right: '4%', |
|
top: '30%', |
|
bottom: '3%', |
|
containLabel: true |
|
}, |
|
dataZoom: [//滑动条 |
|
{ |
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
show: false,//是否显示滑动条，不影响使用 |
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
startValue: 0, // 从头开始。 |
|
endValue: 5 // 一次性展示6个。 |
|
} |
|
], |
|
color: ['#4388ff', '#44cfff', '#8c2bff', '#2defe2'], |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
data: times, |
|
axisLine: { |
|
lineStyle: { |
|
color: '#fff' |
|
} |
|
}, |
|
axisLabel: { |
|
interval: 0, |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
rotate: 60 |
|
}, |
|
} |
|
], |
|
yAxis: [ |
|
{ |
|
type: 'value', |
|
axisLine: { |
|
lineStyle: { |
|
color: '#fff' |
|
} |
|
}, |
|
axisLabel: { |
|
margin: 10, |
|
textStyle: { |
|
fontSize: 12, |
|
color: '#fff' |
|
}, |
|
formatter: '{value}%' |
|
}, |
|
} |
|
], |
|
series: [ |
|
{ |
|
name: '60以下', |
|
type: 'bar', |
|
stack: 'Ad', |
|
emphasis: { |
|
focus: 'series' |
|
}, |
|
data: data1 |
|
}, |
|
{ |
|
name: '60-69', |
|
type: 'bar', |
|
stack: 'Ad', |
|
emphasis: { |
|
focus: 'series' |
|
}, |
|
data: data2 |
|
}, |
|
{ |
|
name: '70-89', |
|
type: 'bar', |
|
stack: 'Ad', |
|
emphasis: { |
|
focus: 'series' |
|
}, |
|
data: data3 |
|
}, |
|
{ |
|
name: '90-100', |
|
type: 'bar', |
|
stack: 'Ad', |
|
emphasis: { |
|
focus: 'series' |
|
}, |
|
data: data4 |
|
}, |
|
] |
|
} |
|
chart[0] = echarts.init(document.querySelector(`#chart2`)) |
|
chart[0].setOption(option) |
|
setInterval(function () { |
|
animateChart(chart[0], option, data, 5) |
|
}, 3000) |
|
}).catch(res => { }) |
|
|
|
// 学生实验课程考核成绩趋势图 |
|
const colors = [ |
|
{ |
|
color1: '#0184d5', |
|
color2: 'rgba(1, 132, 213, 0.4)' |
|
}, |
|
{ |
|
color1: '#00d887', |
|
color2: 'rgba(0, 216, 135, 0.4)' |
|
}, |
|
{ |
|
color1: '#e71872', |
|
color2: 'rgba(40, 147, 189, 0.4)' |
|
}, |
|
{ |
|
color1: '#f9d437', |
|
color2: 'rgba(50, 234, 144, 0.4)' |
|
}, |
|
{ |
|
color1: '#912892', |
|
color2: 'rgba(31, 24, 153, 0.4)' |
|
}, |
|
{ |
|
color1: '#f21259', |
|
color2: 'rgba(40, 176, 97, 0.4)' |
|
}, |
|
{ |
|
color1: '#7343fe', |
|
color2: 'rgba(50, 240, 140, 0.4)' |
|
}, |
|
{ |
|
color1: '#ea7321', |
|
color2: 'rgba(65, 94, 123, 0.4)' |
|
}, |
|
{ |
|
color1: '#934ea2', |
|
color2: 'rgba(32, 123, 223, 0.4)' |
|
}, |
|
{ |
|
color1: '#672313', |
|
color2: 'rgba(156, 40, 100, 0.4)' |
|
}, |
|
{ |
|
color1: '#0184d5', |
|
color2: 'rgba(60, 132, 60, 0.4)' |
|
}, |
|
{ |
|
color1: '#00d887', |
|
color2: 'rgba(60, 42, 244, 0.4)' |
|
}, |
|
{ |
|
color1: '#e71872', |
|
color2: 'rgba(90, 147, 180, 0.4)' |
|
}, |
|
{ |
|
color1: '#f9d437', |
|
color2: 'rgba(150, 20, 144, 0.4)' |
|
}, |
|
] |
|
|
|
|
|
const cousrseRes = await this.$post(this.api.productsWithExperimentalResults, { |
|
pageNum: 1, |
|
pageSize: 1000, |
|
sort: 0, |
|
isShelves: 0, |
|
hotTag: 1, |
|
purchaseStatus: this.token ? 1 : '' |
|
}) |
|
if (cousrseRes) { |
|
const courseList = cousrseRes.list |
|
const ids = courseList.map(e => e.mallId) |
|
times.map(e => { |
|
e.mallId = ids |
|
}) |
|
const courseData = {} |
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
|
const xData = data.map(e => e.time) |
|
const len = xData.length |
|
courseList.map(e => { |
|
courseData[e.productName] = new Array(len).fill(0, 0) |
|
}) |
|
const series = [] |
|
data.map((e, i) => { |
|
e.assesScoreRespList.map(n => { |
|
const item = courseList.find(j => j.mallId == n.mallId) |
|
if (item) { |
|
const name = item.productName |
|
if (courseData[name]) { |
|
courseData[name][i] = +n.avgScore |
|
} |
|
} |
|
}) |
|
}) |
|
let index = 0 |
|
// 生成series |
|
for (const i in courseData) { |
|
series.push({ |
|
name: i, |
|
type: 'line', |
|
// smooth: true, |
|
symbol: 'circle', |
|
symbolSize: 5, |
|
lineStyle: { |
|
normal: { |
|
color: colors[index].color1, |
|
width: 2 |
|
} |
|
}, |
|
itemStyle: { |
|
normal: { |
|
color: colors[index].color1, |
|
borderWidth: 8 |
|
} |
|
}, |
|
data: courseData[i] |
|
}) |
|
++index |
|
if (index > 9) index = 0 |
|
} |
|
const option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
lineStyle: { |
|
color: '#dddc6b' |
|
} |
|
} |
|
}, |
|
legend: { |
|
top: '8%', |
|
data: courseList.map(e => e.productName), |
|
textStyle: { |
|
color: 'rgba(255,255,255,.5)', |
|
fontSize: '12', |
|
} |
|
}, |
|
dataZoom: [//滑动条 |
|
{ |
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
show: false,//是否显示滑动条，不影响使用 |
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
startValue: 0, // 从头开始。 |
|
endValue: 6 // 一次性展示6个。 |
|
} |
|
], |
|
grid: { |
|
left: '30', |
|
top: '45%', |
|
right: '10', |
|
bottom: '5%', |
|
containLabel: true |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
boundaryGap: false, |
|
axisLabel: { |
|
interval: 0, |
|
textStyle: { |
|
color: "rgba(255,255,255,.9)", |
|
fontSize: 12, |
|
}, |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: 'rgba(255,255,255,.2)' |
|
} |
|
}, |
|
data: xData |
|
}, |
|
yAxis: [{ |
|
type: 'value', |
|
name: '平均分', |
|
min: 0, |
|
max: 100, |
|
interval: 10, |
|
splitNumber: 10, |
|
nameTextStyle: { |
|
color: '#fff' |
|
}, |
|
axisTick: { show: false }, |
|
axisLine: { |
|
lineStyle: { |
|
color: 'rgba(255,255,255,.1)' |
|
} |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: "rgba(255,255,255,.9)", |
|
fontSize: 12, |
|
}, |
|
}, |
|
splitLine: { |
|
lineStyle: { |
|
color: 'rgba(255,255,255,.1)' |
|
} |
|
} |
|
}], |
|
series |
|
} |
|
chart[1] = echarts.init(document.querySelector(`#chart5`)) |
|
chart[1].setOption(option) |
|
setInterval(function () { |
|
animateChart(chart[1], option, times) |
|
}, 5000) |
|
}).catch(res => { }) |
|
} |
|
|
|
// 月人均在线学习时长情况 |
|
const date = new Date() |
|
date.setMonth(date.getMonth() + 1) |
|
const months = [] |
|
// 获取近12个月的日期 |
|
for (let i = 0; i < 12; i++) { |
|
date.setMonth(date.getMonth() - 1) |
|
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() |
|
}) |
|
} |
|
this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => { |
|
const option = { |
|
title: { |
|
text: '' |
|
}, |
|
tooltip: { |
|
trigger: 'axis' |
|
}, |
|
xAxis: { |
|
type: 'category', |
|
axisLine: { |
|
lineStyle: { |
|
color: '#fff' |
|
} |
|
}, |
|
axisLabel: { |
|
interval: 0, |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
rotate: 60 |
|
}, |
|
data: data.map(e => e.time) |
|
}, |
|
dataZoom: [//滑动条 |
|
{ |
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
show: false,//是否显示滑动条，不影响使用 |
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
startValue: 0, // 从头开始。 |
|
endValue: 7 // 一次性展示6个。 |
|
} |
|
], |
|
yAxis: { |
|
type: 'value', |
|
axisLine: { |
|
lineStyle: { |
|
color: '#fff' |
|
} |
|
}, |
|
axisLabel: { |
|
margin: 10, |
|
textStyle: { |
|
fontSize: 12, |
|
color: '#fff' |
|
}, |
|
formatter: '{value}' |
|
}, |
|
}, |
|
color: ['#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'], |
|
legend: { |
|
data: ['月人均在线学习时长情况'], |
|
textStyle: { |
|
color: '#fff' |
|
}, |
|
top: '8%' |
|
}, |
|
grid: { |
|
top: '20%', |
|
left: '3%', |
|
right: '4%', |
|
bottom: '3%', |
|
containLabel: true |
|
}, |
|
series: [ |
|
{ |
|
data: data.map(e => e.averageDuration), |
|
type: 'bar', |
|
barWidth: 11, |
|
itemStyle: { |
|
normal: { |
|
barBorderRadius: [10, 10, 0, 0], |
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
offset: 0, |
|
color: "#4033F9" |
|
}, { |
|
offset: 0.8, |
|
color: "#516fff" |
|
}], false), |
|
shadowColor: 'rgba(0, 0, 0, 0.1)', |
|
} |
|
}, |
|
showBackground: true, |
|
backgroundStyle: { |
|
color: 'rgba(180, 180, 180, 0.2)' |
|
} |
|
} |
|
] |
|
} |
|
chart[2] = echarts.init(document.querySelector(`#chart3`)) |
|
chart[2].setOption(option) |
|
setInterval(function () { |
|
animateChart(chart[2], option, data) |
|
}, 1500) |
|
}).catch(res => { }) |
|
|
|
// 平台登录人数 |
|
this.$get(this.api.platformLoginStatistics, { |
|
platform: Setting.platformId |
|
}).then(({ data }) => { |
|
const option = { |
|
tooltip: { |
|
trigger: 'axis', |
|
}, |
|
grid: { |
|
left: '12%', |
|
right: '5%', |
|
top: '15%', |
|
bottom: '30%' |
|
}, |
|
dataZoom: [//滑动条 |
|
{ |
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
show: false,//是否显示滑动条，不影响使用 |
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
startValue: 0, // 从头开始。 |
|
endValue: 3 // 一次性展示6个。 |
|
} |
|
], |
|
xAxis: [{ |
|
type: 'category', |
|
axisLine: { |
|
lineStyle: { |
|
color: '#57617B' |
|
} |
|
}, |
|
axisLabel: { |
|
interval: 0, |
|
textStyle: { |
|
color: '#fff', |
|
}, |
|
rotate: 60 |
|
}, |
|
data: data.map(e => e.today) |
|
}], |
|
yAxis: [{ |
|
type: 'value', |
|
minInterval: 1, |
|
min: 0, |
|
axisTick: { |
|
show: false |
|
}, |
|
axisLine: { |
|
lineStyle: { |
|
color: '#57617B' |
|
} |
|
}, |
|
axisLabel: { |
|
// interval: 5, |
|
margin: 10, |
|
textStyle: { |
|
fontSize: 12, |
|
color: '#fff' |
|
}, |
|
formatter: '{value}' |
|
}, |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
type: 'dashed', |
|
color: ['#25CEF3'] |
|
} |
|
} |
|
|
|
}], |
|
series: [{ |
|
name: '平台登录人数', |
|
type: 'bar', |
|
barWidth: 8, |
|
itemStyle: { |
|
normal: { |
|
barBorderRadius: [10, 10, 0, 0], |
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
offset: 0, |
|
color: "#009AFD" |
|
}, { |
|
offset: 0.8, |
|
color: "#33DAFF" |
|
}], false), |
|
shadowColor: 'rgba(0, 0, 0, 0.1)', |
|
} |
|
}, |
|
data: data.map(e => e.quantity) |
|
} |
|
] |
|
} |
|
chart[3] = echarts.init(document.querySelector(`#chart4`)) |
|
chart[3].setOption(option) |
|
setInterval(function () { |
|
animateChart(chart[3], option, data, 3) |
|
}, 1500) |
|
}).catch(res => { }) |
|
|
|
// 监听resize事件，动态改变chart大小 |
|
window.addEventListener('resize', () => { |
|
this.examChart && this.examChart.resize() |
|
for (let i = 0; i < 4; i++) { |
|
chart[i] && chart[i].resize() |
|
} |
|
}) |
|
}, |
|
// 表格滚动效果 |
|
scrollTable () { |
|
const dom = this.$refs.popularCourses |
|
const dom1 = this.$refs.ach |
|
const dom2 = this.$refs.active |
|
const unit = window.innerWidth > 1920 ? 2 : 1 |
|
setInterval(() => { |
|
dom.scrollTop += unit |
|
if (dom.clientHeight + dom.scrollTop >= dom.scrollHeight) dom.scrollTop = 0 |
|
|
|
dom1.scrollTop += unit |
|
if (dom1.clientHeight + dom1.scrollTop >= dom1.scrollHeight) dom1.scrollTop = 0 |
|
|
|
dom2.scrollTop += unit |
|
if (dom2.clientHeight + dom2.scrollTop >= dom2.scrollHeight) dom2.scrollTop = 0 |
|
}, 30) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import '../../styles/page/screen.scss'; |
|
</style> |