|
|
|
|
@ -109,7 +109,7 @@ |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
平台登录人数 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart3" class="chart t_btn9"></div> |
|
|
|
|
<div id="chart4" class="chart t_btn9"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="middle"> |
|
|
|
|
@ -234,9 +234,9 @@ |
|
|
|
|
<img src="@/assets/img/screen/t_5.png" alt=""> |
|
|
|
|
热门理论课程排行榜 |
|
|
|
|
</div> |
|
|
|
|
<!-- <ul class="list"> |
|
|
|
|
<li v-for="(item, i) in courses" :key="i">{{ item.curriculumName }}</li> |
|
|
|
|
</ul> --> |
|
|
|
|
<ul class="list" style="margin-top: 45px;"> |
|
|
|
|
<li v-for="(item, i) in popularCourses" :key="i">{{ item }}</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="item" style="height: 630px"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -272,7 +272,7 @@ |
|
|
|
|
</thead> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto"> |
|
|
|
|
<div class="main_table" ref="tableWrap" style="margin-top: 0;overflow: auto"> |
|
|
|
|
<table> |
|
|
|
|
<tbody> |
|
|
|
|
<tr v-for="(item, i) in achs" :key="i"> |
|
|
|
|
@ -292,8 +292,9 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import * as echarts from 'echarts' |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
@ -312,6 +313,7 @@ export default { |
|
|
|
|
goodsSell: [], |
|
|
|
|
cryptoList: [], |
|
|
|
|
courses: [], |
|
|
|
|
popularCourses: [], |
|
|
|
|
achs: [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -353,6 +355,11 @@ export default { |
|
|
|
|
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).then(({ data }) => { |
|
|
|
|
@ -446,7 +453,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
let chart = {} |
|
|
|
|
|
|
|
|
|
// 平台考试数据考试统计 |
|
|
|
|
// 学生成绩分布分析 |
|
|
|
|
const year = new Date().getFullYear() |
|
|
|
|
const times = [] |
|
|
|
|
// 获取过去五年的上下半年日期 |
|
|
|
|
@ -492,6 +499,15 @@ export default { |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: false,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 5 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
color:['#56f3f7', '#b76fff', '#5492ff', '#e51579'], |
|
|
|
|
xAxis: [ |
|
|
|
|
{ |
|
|
|
|
@ -563,10 +579,9 @@ export default { |
|
|
|
|
} |
|
|
|
|
chart[0] = echarts.init(document.querySelector(`#chart2`)) |
|
|
|
|
chart[0].setOption(option) |
|
|
|
|
|
|
|
|
|
// setInterval(function () { |
|
|
|
|
// animateChart(chart[0], option, series) |
|
|
|
|
// }, 1500) |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[0], option, data, 5) |
|
|
|
|
}, 3000) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
|
|
|
|
|
// 学生实验课程考核成绩趋势图 |
|
|
|
|
@ -662,6 +677,15 @@ export default { |
|
|
|
|
fontSize:'12', |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: false,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 6 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
grid: { |
|
|
|
|
left: '30', |
|
|
|
|
top: '27%', |
|
|
|
|
@ -718,20 +742,222 @@ export default { |
|
|
|
|
} |
|
|
|
|
chart[1] = echarts.init(document.querySelector(`#chart5`)) |
|
|
|
|
chart[1].setOption(option) |
|
|
|
|
|
|
|
|
|
// setInterval(function () { |
|
|
|
|
// animateChart(chart[0], option, series) |
|
|
|
|
// }, 1500) |
|
|
|
|
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', |
|
|
|
|
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 => {}) |
|
|
|
|
|
|
|
|
|
// this.scrollTable() |
|
|
|
|
|
|
|
|
|
// 监听resize事件，动态改变chart大小 |
|
|
|
|
// window.addEventListener('resize', () => { |
|
|
|
|
// for (let i = 0; i < 7; i++) { |
|
|
|
|
// chart[i] && chart[i].resize() |
|
|
|
|
// } |
|
|
|
|
// }) |
|
|
|
|
window.addEventListener('resize', () => { |
|
|
|
|
for (let i = 0; i < 4; i++) { |
|
|
|
|
chart[i] && chart[i].resize() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 表格滚动效果 |
|
|
|
|
// scrollTable() { |
|
|
|
|
|
