|
|
|
|
@ -83,7 +83,7 @@ |
|
|
|
|
<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_7.png" alt=""> |
|
|
|
|
月人均在线学习时长情况 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart3" class="chart t_btn9"></div> |
|
|
|
|
@ -206,7 +206,11 @@ |
|
|
|
|
本月综合学习积极性最高的实验课程 |
|
|
|
|
</div> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li v-for="(item, i) in courses" :key="i">{{ item.curriculumName }}</li> |
|
|
|
|
<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"> |
|
|
|
|
@ -234,9 +238,14 @@ |
|
|
|
|
<img src="@/assets/img/screen/t_5.png" alt=""> |
|
|
|
|
热门理论课程排行榜 |
|
|
|
|
</div> |
|
|
|
|
<ul class="list" style="margin-top: 45px;"> |
|
|
|
|
<li v-for="(item, i) in popularCourses" :key="i">{{ item }}</li> |
|
|
|
|
</ul> |
|
|
|
|
<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"> |
|
|
|
|
@ -267,12 +276,12 @@ |
|
|
|
|
<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="tableWrap" style="margin-top: 0;overflow: auto"> |
|
|
|
|
<div class="main_table" style="margin-top: 0;overflow: auto"> |
|
|
|
|
<table> |
|
|
|
|
<tbody> |
|
|
|
|
<tr v-for="(item, i) in achs" :key="i"> |
|
|
|
|
@ -314,7 +323,8 @@ export default { |
|
|
|
|
cryptoList: [], |
|
|
|
|
courses: [], |
|
|
|
|
popularCourses: [], |
|
|
|
|
achs: [] |
|
|
|
|
achs: [], |
|
|
|
|
examChart: null |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
@ -370,6 +380,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
this.achs = data |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
this.scrollTable() |
|
|
|
|
}, |
|
|
|
|
// 切换时间单位 |
|
|
|
|
switchTime(id) { |
|
|
|
|
@ -434,7 +445,8 @@ export default { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
echarts.init(document.querySelector(`#chart1`)).setOption(option) |
|
|
|
|
this.examChart = echarts.init(document.querySelector(`#chart1`)) |
|
|
|
|
this.examChart.setOption(option) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
// 获取图标数据并渲染 |
|
|
|
|
@ -508,7 +520,7 @@ export default { |
|
|
|
|
endValue: 5 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
color:['#56f3f7', '#b76fff', '#5492ff', '#e51579'], |
|
|
|
|
color:['#4388ff', '#44cfff', '#8c2bff', '#2defe2'], |
|
|
|
|
xAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'category', |
|
|
|
|
@ -517,7 +529,14 @@ export default { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
}, |
|
|
|
|
rotate: 60 |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
yAxis: [ |
|
|
|
|
@ -540,7 +559,7 @@ export default { |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '不及格', |
|
|
|
|
name: '60以下', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
@ -549,7 +568,7 @@ export default { |
|
|
|
|
data: data1 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '及格', |
|
|
|
|
name: '60-69', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
@ -558,7 +577,7 @@ export default { |
|
|
|
|
data: data2 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '良', |
|
|
|
|
name: '70-89', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
@ -601,152 +620,185 @@ export default { |
|
|
|
|
{ |
|
|
|
|
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.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
|
|
|
|
const times = [] |
|
|
|
|
const courses = [] |
|
|
|
|
const series = [] |
|
|
|
|
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 = {} |
|
|
|
|
data.map(e => { |
|
|
|
|
times.push(e.time) |
|
|
|
|
e.assesScoreRespList.map(n => { |
|
|
|
|
const name = n.curriculumName |
|
|
|
|
courses.push(n.curriculumName) |
|
|
|
|
if (courseData[name]) { |
|
|
|
|
courseData[name].push(+n.avgScore) |
|
|
|
|
} else { |
|
|
|
|
courseData[name] = [+n.avgScore] |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
courseList.map(e => { |
|
|
|
|
e.curriculumName = e.curriculumName.substring(0, 10) |
|
|
|
|
courseData[e.curriculumName] = [] |
|
|
|
|
}) |
|
|
|
|
let index = 0 |
|
|
|
|
// 生成series |
|
|
|
|
for (const i in courseData) { |
|
|
|
|
series.push({ |
|
|
|
|
name: i, |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 5, |
|
|
|
|
showSymbol: false, |
|
|
|
|
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 |
|
|
|
|
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
|
|
|
|
const times = [] |
|
|
|
|
const series = [] |
|
|
|
|
data.map(e => { |
|
|
|
|
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].push(+n.avgScore) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: courseData[i] |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
++index |
|
|
|
|
if (index > 3) index = 0 |
|
|
|
|
} |
|
|
|
|
const option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
let index = 0 |
|
|
|
|
// 生成series |
|
|
|
|
for (const i in courseData) { |
|
|
|
|
series.push({ |
|
|
|
|
name: i, |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
symbol: 'circle', |
|
|
|
|
symbolSize: 5, |
|
|
|
|
showSymbol: false, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#dddc6b' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
top:'8%', |
|
|
|
|
data: courses, |
|
|
|
|
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: '27%', |
|
|
|
|
right: '10', |
|
|
|
|
bottom: '5%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: [{ |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle: { |
|
|
|
|
color: "rgba(255,255,255,.9)", |
|
|
|
|
fontSize:12, |
|
|
|
|
normal: { |
|
|
|
|
color: colors[index].color1, |
|
|
|
|
width: 2 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.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' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: times |
|
|
|
|
}, { |
|
|
|
|
axisPointer: {show: false}, |
|
|
|
|
axisLine: {show: false}, |
|
|
|
|
position: 'bottom', |
|
|
|
|
offset: 20, |
|
|
|
|
}], |
|
|
|
|
yAxis: [{ |
|
|
|
|
type: 'value', |
|
|
|
|
name: '平均分', |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
legend: { |
|
|
|
|
top:'8%', |
|
|
|
|
data: courseList.map(e => e.curriculumName), |
|
|
|
|
textStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.5)', |
|
|
|
|
fontSize:'12', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: {show: false}, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.1)' |
|
|
|
|
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 |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle: { |
|
|
|
|
color: "rgba(255,255,255,.9)", |
|
|
|
|
fontSize:12, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle: { |
|
|
|
|
color: "rgba(255,255,255,.9)", |
|
|
|
|
fontSize:12, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.2)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data: times |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(255,255,255,.1)' |
|
|
|
|
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 => {}) |
|
|
|
|
|
|
|
|
|
}], |
|
|
|
|
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) |
|
|
|
|
@ -949,28 +1001,27 @@ export default { |
|
|
|
|
animateChart(chart[3], option, data, 3) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
|
|
|
|
|
// this.scrollTable() |
|
|
|
|
|
|
|
|
|
// 监听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.tableWrap |
|
|
|
|
// const dom1 = this.$refs.gdpList |
|
|
|
|
// setInterval(() => { |
|
|
|
|
// dom.scrollTop += 1 |
|
|
|
|
// if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0 |
|
|
|
|
scrollTable() { |
|
|
|
|
const dom = this.$refs.popularCourses |
|
|
|
|
// const dom1 = this.$refs.gdpList |
|
|
|
|
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) |
|
|
|
|
// } |
|
|
|
|
// dom1.scrollTop += 1 |
|
|
|
|
// if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0 |
|
|
|
|
}, 30) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
