|
|
@ -1,7 +1,10 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="wrap"> |
|
|
|
<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--> |
|
|
|
<!--header--> |
|
|
|
<div class="header"> |
|
|
|
<div class="header"> |
|
|
|
<div class="bg_header"> |
|
|
|
<div class="bg_header"> |
|
|
@ -34,13 +37,18 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_1.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_1.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
平台考试数据统计 |
|
|
|
平台考试数据统计 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="time-switch"> |
|
|
|
<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> |
|
|
|
</ul> |
|
|
|
<div id="chart1" class="chart"></div> |
|
|
|
<div id="chart1" |
|
|
|
|
|
|
|
class="chart"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<div class="item"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
@ -60,10 +68,12 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_2.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_2.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
学生成绩分布分析 |
|
|
|
学生成绩分布分析 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="chart2" class="chart t_btn9"></div> |
|
|
|
<div id="chart2" |
|
|
|
|
|
|
|
class="chart t_btn9"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<div class="item"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
@ -83,10 +93,12 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
月人均在线学习时长情况 |
|
|
|
月人均在线学习时长情况 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="chart3" class="chart t_btn9"></div> |
|
|
|
<div id="chart3" |
|
|
|
|
|
|
|
class="chart t_btn9"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<div class="item"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
@ -106,14 +118,17 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
平台登录人数 |
|
|
|
平台登录人数 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="chart4" class="chart t_btn9"></div> |
|
|
|
<div id="chart4" |
|
|
|
|
|
|
|
class="chart t_btn9"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="middle"> |
|
|
|
<div class="middle"> |
|
|
|
<div class="item" style="height: 620px"> |
|
|
|
<div class="item" |
|
|
|
|
|
|
|
style="height: 620px"> |
|
|
|
<!--左上边框--> |
|
|
|
<!--左上边框--> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="t_l_line"></i> |
|
|
@ -134,8 +149,15 @@ |
|
|
|
<i class="r_b_line"></i> |
|
|
|
<i class="r_b_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<video class="video" ref="video" width="100%" height="100%" autoplay muted loop> |
|
|
|
<video class="video" |
|
|
|
<source src="@/assets/videos/screen.mp4" type="video/mp4"> |
|
|
|
ref="video" |
|
|
|
|
|
|
|
width="100%" |
|
|
|
|
|
|
|
height="100%" |
|
|
|
|
|
|
|
autoplay |
|
|
|
|
|
|
|
muted |
|
|
|
|
|
|
|
loop> |
|
|
|
|
|
|
|
<source src="@/assets/videos/screen.mp4" |
|
|
|
|
|
|
|
type="video/mp4"> |
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
</video> |
|
|
|
</video> |
|
|
|
<div class="stat-mask"></div> |
|
|
|
<div class="stat-mask"></div> |
|
|
@ -151,7 +173,8 @@ |
|
|
|
<p class="name">当前活跃人数</p> |
|
|
|
<p class="name">当前活跃人数</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item" style="height: 440px;"> |
|
|
|
<div class="item" |
|
|
|
|
|
|
|
style="height: 440px;"> |
|
|
|
<!--左上边框--> |
|
|
|
<!--左上边框--> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="t_l_line"></i> |
|
|
@ -173,14 +196,18 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_3.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
学生实验课程考核成绩趋势图 |
|
|
|
学生实验课程考核成绩趋势图 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="chart" id="chart5" style="height: 420px"></div> |
|
|
|
<div class="chart" |
|
|
|
|
|
|
|
id="chart5" |
|
|
|
|
|
|
|
style="height: 420px"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<div class="right"> |
|
|
|
<div class="item" style="height: 160px"> |
|
|
|
<div class="item" |
|
|
|
|
|
|
|
style="height: 160px"> |
|
|
|
<!--左上边框--> |
|
|
|
<!--左上边框--> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="t_l_line"></i> |
|
|
@ -202,18 +229,23 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_4.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_4.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
本月综合学习积极性最高的实验课程 |
|
|
|
本月综合学习积极性最高的实验课程 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="list"> |
|
|
|
<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> |
|
|
|
<span class="index">{{ i + 1 }}</span> |
|
|
|
<p class="text">{{ item.curriculumName }}</p> |
|
|
|
<p class="text">{{ item.goodsName }}</p> |
|
|
|
<img class="icon" src="@/assets/img/screen/medal.png" alt=""> |
|
|
|
<img class="icon" |
|
|
|
|
|
|
|
src="@/assets/img/screen/medal.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item" style="height: 240px"> |
|
|
|
<div class="item" |
|
|
|
|
|
|
|
style="height: 240px"> |
|
|
|
<!--左上边框--> |
|
|
|
<!--左上边框--> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="t_l_line"></i> |
|
|
@ -235,19 +267,23 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_5.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
热门理论课程排行榜 |
|
|
|
热门理论课程排行榜 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="popular-wrap" ref="popularCourses"> |
|
|
|
<div class="popular-wrap" |
|
|
|
|
|
|
|
ref="popularCourses"> |
|
|
|
<ul class="list popular"> |
|
|
|
<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> |
|
|
|
<span class="index">{{ i + 1 }}</span> |
|
|
|
<p class="text">{{ item }}</p> |
|
|
|
<p class="text">{{ item }}</p> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item" style="height: 300px"> |
|
|
|
<div class="item" |
|
|
|
|
|
|
|
style="height: 300px"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="l_t_line"></i> |
|
|
|
<i class="l_t_line"></i> |
|
|
@ -265,7 +301,8 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
学霸排行榜 |
|
|
|
学霸排行榜 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_table"> |
|
|
|
<div class="main_table"> |
|
|
@ -281,10 +318,13 @@ |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
</table> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
<table> |
|
|
|
<tbody> |
|
|
|
<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%">{{ i + 1 }}</td> |
|
|
|
<td width="20%">{{ item.userName }}</td> |
|
|
|
<td width="20%">{{ item.userName }}</td> |
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
|
@ -295,7 +335,8 @@ |
|
|
|
</table> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item" style="height: 300px"> |
|
|
|
<div class="item" |
|
|
|
|
|
|
|
style="height: 300px"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<div class="t_line_box"> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="t_l_line"></i> |
|
|
|
<i class="l_t_line"></i> |
|
|
|
<i class="l_t_line"></i> |
|
|
@ -313,7 +354,8 @@ |
|
|
|
<i class="b_r_line"></i> |
|
|
|
<i class="b_r_line"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_title"> |
|
|
|
<div class="main_title"> |
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
活跃度排行榜 |
|
|
|
活跃度排行榜 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main_table"> |
|
|
|
<div class="main_table"> |
|
|
@ -327,10 +369,13 @@ |
|
|
|
</thead> |
|
|
|
</thead> |
|
|
|
</table> |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
<table> |
|
|
|
<tbody> |
|
|
|
<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%">{{ i + 1 }}</td> |
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
|
|
<td width="20%">{{ token ? item.className : item.schoolName }}</td> |
|
|
|
<td width="20%">{{ item.activityIndex }}</td> |
|
|
|
<td width="20%">{{ item.activityIndex }}</td> |
|
|
@ -702,30 +747,24 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
// 登录前登录后调的课程接口不一样 |
|
|
|
// 登录前登录后调的课程接口不一样 |
|
|
|
const cousrseRes = this.token ? |
|
|
|
const cousrseRes = await this.$post(this.api.listOfGoods, { |
|
|
|
await this.$get(this.api.schoolCourse) : |
|
|
|
|
|
|
|
await this.$post(this.api.curriculumListForBeforeLogin, { |
|
|
|
|
|
|
|
pageNum: 1, |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 100, |
|
|
|
pageSize: 1000, |
|
|
|
supplierId: '1,2,3,4', |
|
|
|
sort: 0, |
|
|
|
curriculumName: '', |
|
|
|
isShelves: 0, |
|
|
|
categoryId: '', |
|
|
|
hotTag: 1, |
|
|
|
curriculumType: '', |
|
|
|
|
|
|
|
professionalCategoryId: '', |
|
|
|
|
|
|
|
professionalId: '', |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
if (cousrseRes) { |
|
|
|
if (cousrseRes) { |
|
|
|
const courseList = this.token ? |
|
|
|
const courseList = |
|
|
|
cousrseRes.data : |
|
|
|
|
|
|
|
cousrseRes.page.records |
|
|
|
cousrseRes.page.records |
|
|
|
const ids = courseList.map(e => e.cid) |
|
|
|
const ids = courseList.map(e => e.mallId) |
|
|
|
times.map(e => { |
|
|
|
times.map(e => { |
|
|
|
e.cid = ids |
|
|
|
e.mallId = ids |
|
|
|
}) |
|
|
|
}) |
|
|
|
const courseData = {} |
|
|
|
const courseData = {} |
|
|
|
courseList.map(e => { |
|
|
|
courseList.map(e => { |
|
|
|
// e.curriculumName = e.curriculumName.substring(0, 10) |
|
|
|
// e.productName = e.productName.substring(0, 10) |
|
|
|
courseData[e.curriculumName] = [] |
|
|
|
courseData[e.productName] = [] |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
|
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
|
|
|
const times = [] |
|
|
|
const times = [] |
|
|
@ -733,9 +772,9 @@ export default { |
|
|
|
data.map((e, i) => { |
|
|
|
data.map((e, i) => { |
|
|
|
times.push(e.time) |
|
|
|
times.push(e.time) |
|
|
|
e.assesScoreRespList.map(n => { |
|
|
|
e.assesScoreRespList.map(n => { |
|
|
|
const item = courseList.find(j => j.cid == n.curriculumId) |
|
|
|
const item = courseList.find(j => j.mallId == n.mallId) |
|
|
|
if (item) { |
|
|
|
if (item) { |
|
|
|
const name = item.curriculumName |
|
|
|
const name = item.productName |
|
|
|
if (courseData[name]) { |
|
|
|
if (courseData[name]) { |
|
|
|
courseData[name][i] = +n.avgScore |
|
|
|
courseData[name][i] = +n.avgScore |
|
|
|
} |
|
|
|
} |
|
|
@ -792,7 +831,7 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
legend: { |
|
|
|
top: '8%', |
|
|
|
top: '8%', |
|
|
|
data: courseList.map(e => e.curriculumName), |
|
|
|
data: courseList.map(e => e.productName), |
|
|
|
textStyle: { |
|
|
|
textStyle: { |
|
|
|
color: 'rgba(255,255,255,.5)', |
|
|
|
color: 'rgba(255,255,255,.5)', |
|
|
|
fontSize: '12', |
|
|
|
fontSize: '12', |
|
|
@ -1101,5 +1140,5 @@ export default { |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "../../styles/page/screen.scss"; |
|
|
|
@import '../../styles/page/screen.scss'; |
|
|
|
</style> |
|
|
|
</style> |