|
|
|
|
<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.curriculumName }}</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 }}</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item" style="height: 630px">
|
|
|
|
|
<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%">班级</th>
|
|
|
|
|
<th width="20%">练习次数</th>
|
|
|
|
|
<th width="20%">平均分</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_table" ref="ach" style="max-height: 520px;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%">{{ item.className }}</td>
|
|
|
|
|
<td width="20%">{{ item.practiceNumber }}</td>
|
|
|
|
|
<td width="20%">{{ item.avgScore }}</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 {
|
|
|
|
|
time: 0,
|
|
|
|
|
times: [
|
|
|
|
|
{
|
|
|
|
|
id: 0,
|
|
|
|
|
name: '月'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: '日'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
overview: {},
|
|
|
|
|
goodsSell: [],
|
|
|
|
|
cryptoList: [],
|
|
|
|
|
courses: [],
|
|
|
|
|
popularCourses: [],
|
|
|
|
|
achs: [],
|
|
|
|
|
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(({ data }) => {
|
|
|
|
|
this.popularCourses = data
|
|
|
|
|
}).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.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%', '50%'],
|
|
|
|
|
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 => {})
|
|
|
|
|
},
|
|
|
|
|
// 获取图标数据并渲染
|
|
|
|
|
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(243, 147, 189, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#f9d437',
|
|
|
|
|
color2: 'rgba(255, 234, 144, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#912892',
|
|
|
|
|
color2: 'rgba(31, 24, 153, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#f21259',
|
|
|
|
|
color2: 'rgba(213, 22, 11, 0.4)'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
color1: '#7343fe',
|
|
|
|
|
color2: 'rgba(243, 123, 2, 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, 163, 2, 0.4)'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
this.$get(this.api.schoolCourse).then(({ data }) => {
|
|
|
|
|
const courseList = data
|
|
|
|
|
const ids = data.map(e => e.cid)
|
|
|
|
|
times.map(e => {
|
|
|
|
|
e.cid = ids
|
|
|
|
|
})
|
|
|
|
|
const courseData = {}
|
|
|
|
|
courseList.map(e => {
|
|
|
|
|
e.curriculumName = e.curriculumName.substring(0, 10)
|
|
|
|
|
courseData[e.curriculumName] = []
|
|
|
|
|
})
|
|
|
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => {
|
|
|
|
|
const times = []
|
|
|
|
|
const series = []
|
|
|
|
|
data.map((e, i) => {
|
|
|
|
|
times.push(e.time)
|
|
|
|
|
e.assesScoreRespList.map(n => {
|
|
|
|
|
const item = courseList.find(j => j.cid == n.curriculumId)
|
|
|
|
|
if (item) {
|
|
|
|
|
const name = item.curriculumName
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: colors[index].color2
|
|
|
|
|
}, {
|
|
|
|
|
offset: 0.8,
|
|
|
|
|
color: colors[index].color2
|
|
|
|
|
}], false),
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: colors[index].color1,
|
|
|
|
|
borderColor: 'rgba(221, 220, 107, .1)',
|
|
|
|
|
borderWidth: 12
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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.curriculumName),
|
|
|
|
|
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: '32%',
|
|
|
|
|
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: times
|
|
|
|
|
},
|
|
|
|
|
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 => {})
|
|
|
|
|
}).catch(err => {})
|
|
|
|
|
|
|
|
|
|
// 月人均在线学习时长情况
|
|
|
|
|
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',
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#57617B'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
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
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
dom.scrollTop += 1
|
|
|
|
|
if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
|
|
|
|
|
|
|
|
|
|
dom1.scrollTop += 1
|
|
|
|
|
if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
|
|
|
|
|
}, 30)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "../../styles/page/screen.scss";
|
|
|
|
|
</style>
|
