- 实验概览
- 
- 实验记录明细
- 
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 平台考试数据统计
-
-
- 平台考试数据统计
- -
-
- {{ item.name }} -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 平台考试数据统计
+
+
+ 平台考试数据统计
+ -
+
- {{ item.name }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 学生成绩分布分析
+
+
+
+ 学生成绩分布分析
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 月人均在线学习时长情况
+
+
+
+ 月人均在线学习时长情况
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 学生成绩分布分析
-
-
+
- 学生成绩分布分析
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 月人均在线学习时长情况
-
-
+
- 月人均在线学习时长情况
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 平台登录人数
-
-
+
- 平台登录人数
-
+
+ 平台登录人数
+
+
+ 平台登录人数
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ overview.numberOfPeopleStudy }}
-{{ overview.courseStudyFrequency }}
-{{ overview.courseStudyTime }}
-{{ overview.numberOfExperiments }}
-{{ overview.cumulativeExperimentTime }}
-
-
+ {{ overview.currentActivePeople }}
-当前活跃人数
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ overview.numberOfPeopleStudy }}
+{{ overview.courseStudyFrequency }}
+{{ overview.courseStudyTime }}
+{{ overview.numberOfExperiments }}
+{{ overview.cumulativeExperimentTime }}
+
+
+ {{ overview.currentActivePeople }}
+当前活跃人数
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 学生实验课程考核成绩趋势图
-
-
+
+
- 学生实验课程考核成绩趋势图
-
+
+
+
+
+ 学生实验课程考核成绩趋势图
+
+
+
+ 学生实验课程考核成绩趋势图
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 本月综合学习积极性最高的实验课程
-
-
- 本月综合学习积极性最高的实验课程
- -
-
-
- {{ i + 1 }}
-
{{ item.curriculumName }}
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 本月综合学习积极性最高的实验课程
+
+
+ 本月综合学习积极性最高的实验课程
+ -
+
-
+ {{ i + 1 }}
+
{{ item.goodsName }}
+
+
+
+
+
@@ -349,549 +394,237 @@ 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: 0,
- times: [
- {
- id: 0,
- name: '月'
- },
- {
- id: 1,
- name: '日'
- }
- ],
- overview: {},
- goodsSell: [],
- cryptoList: [],
- courses: [],
- popularCourses: [],
- achs: [],
- actives: [],
- examChart: null
+ data () {
+ return {
+ token: Util.local.get(Setting.tokenKey),
+ time: 0,
+ times: [
+ {
+ id: 0,
+ name: '月'
+ },
+ {
+ id: 1,
+ name: '日'
}
- },
- mounted() {
- this.renderExam()
- this.getList()
- this.renderChart()
- },
- methods: {
- // 全屏
- fullScreen() {
- // 检测是否全屏
- if (document.fullscreenElement ||
+ ],
+ 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 ||
+ const fn = document.exitFullScreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen
- fn.call(document)
- } else {
- const el = document.body
- const fn = el.requestFullscreen ||
+ 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 => {})
+ 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.getTheMostUsedCoursesInOurSchool).then(({ data }) => {
+ this.courses = 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.$post(this.api.activityRanking).then(({ list }) => {
- 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%', '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 => {})
- },
- // 获取图标数据并渲染
- 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'
- },
+ // 热门理论课程排行榜
+ 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.$post(this.api.activityRanking).then(({ list }) => {
+ 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',
},
- grid: {
- left: '3%',
- right: '4%',
- top: '30%',
- bottom: '3%',
- containLabel: true
+ subtextStyle: {
+ fontSize: 26,
+ color: '#00d5ff',
},
- 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)'
+ x: 'center',
+ y: '41%',
},
- {
- color1: '#912892',
- color2: 'rgba(31, 24, 153, 0.4)'
+ tooltip: {
+ trigger: 'item',
+ formatter: "{b} : {c} ({d}%)"
+ // formatter: '{total|' + 100 +'}'+ '\n\r' + '{active|共发布活动}'
},
- {
- color1: '#f21259',
- color2: 'rgba(213, 22, 11, 0.4)'
+ legend: {
+ show: false,
+ x: 'center',
+ y: 'bottom',
+ data: ['考试总场次', '考试人数']
},
- {
- color1: '#7343fe',
- color2: 'rgba(243, 123, 2, 0.4)'
+ toolbox: {
},
- {
- 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)'
- }
- ]
- // 登录前登录后调的课程接口不一样
- const cousrseRes = this.token ?
- await this.$get(this.api.schoolCourse) :
- await this.$post(this.api.curriculumListForBeforeLogin, {
- pageNum: 1,
- pageSize: 100,
- supplierId: '1,2,3,4',
- curriculumName: '',
- categoryId: '',
- curriculumType: '',
- professionalCategoryId: '',
- professionalId: '',
- })
- if (cousrseRes) {
- const courseList = this.token ?
- cousrseRes.data :
- cousrseRes.page.records
- const ids = courseList.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
+ label: {
+ normal: {
+ show: true,
+ formatter: "{b} \n{d}%"
}
- 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个。
+ },
+ 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}'
}
- ],
- 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: 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
+ data: [
+ { value: data.totalNumberOfExams, name: '考试\n总场次' },
+ { value: data.referenceNumber, name: '考试\n人数' },
+ ]
}
- 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.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
}
- this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => {
- const option = {
- title: {
- text: ''
- },
- tooltip: {
- trigger: 'axis'
+ 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'
},
- xAxis: {
+ },
+ 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'
@@ -904,18 +637,10 @@ export default {
},
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: {
+ }
+ ],
+ yAxis: [
+ {
type: 'value',
axisLine: {
lineStyle: {
@@ -928,69 +653,189 @@ export default {
fontSize: 12,
color: '#fff'
},
- formatter: '{value}'
+ formatter: '{value}%'
+ },
+ }
+ ],
+ series: [
+ {
+ name: '60以下',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
},
+ data: data1
},
- color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
- legend: {
- data: ['月人均在线学习时长情况'],
- textStyle:{
- color: '#fff'
+ {
+ name: '60-69',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
},
- top: '8%'
+ data: data2
},
- grid: {
- top: '20%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ {
+ name: '70-89',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series'
+ },
+ data: data3
},
- 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)'
+ {
+ 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)'
+ }
+ ]
+ // 登录前登录后调的课程接口不一样
+ const cousrseRes = await this.$post(this.api.listOfGoods, {
+ pageNum: 1,
+ pageSize: 1000,
+ sort: 0,
+ isShelves: 0,
+ hotTag: 1,
+ })
+ if (cousrseRes) {
+ const courseList =
+ cousrseRes.page.records
+ const ids = courseList.map(e => e.mallId)
+ times.map(e => {
+ e.mallId = ids
+ })
+ const courseData = {}
+ courseList.map(e => {
+ // e.productName = e.productName.substring(0, 10)
+ courseData[e.productName] = []
+ })
+ 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.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
+ }
+ },
+ 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
}
- 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',
+ axisPointer: {
+ lineStyle: {
+ color: '#dddc6b'
+ }
+ }
},
- grid: {
- left: '12%',
- right: '5%',
- top: '15%',
- bottom: '30%'
+ legend: {
+ top: '8%',
+ data: courseList.map(e => e.productName),
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
},
dataZoom: [//滑动条
{
@@ -998,108 +843,302 @@ export default {
show: false,//是否显示滑动条，不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
- endValue: 3 // 一次性展示6个。
+ endValue: 6 // 一次性展示6个。
}
],
- xAxis: [{
+ grid: {
+ left: '30',
+ top: '45%',
+ right: '10',
+ bottom: '5%',
+ containLabel: true
+ },
+ xAxis: {
type: 'category',
- axisLine: {
- lineStyle: {
- color: '#57617B'
- }
- },
+ boundaryGap: false,
axisLabel: {
interval: 0,
textStyle: {
- color: '#fff',
+ color: "rgba(255,255,255,.9)",
+ fontSize: 12,
},
- rotate: 60
},
- data: data.map(e => e.today)
- }],
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.2)'
+ }
+ },
+ data: times
+ },
yAxis: [{
type: 'value',
- axisTick: {
- show: false
+ name: '平均分',
+ min: 0,
+ max: 100,
+ interval: 10,
+ splitNumber: 10,
+ nameTextStyle: {
+ color: '#fff'
},
+ axisTick: { show: false },
axisLine: {
lineStyle: {
- color: '#57617B'
+ color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
- margin: 10,
textStyle: {
+ color: "rgba(255,255,255,.9)",
fontSize: 12,
- color: '#fff'
},
- formatter: '{value}'
},
splitLine: {
- show: true,
lineStyle: {
- type: 'dashed',
- color: ['#25CEF3']
+ color: 'rgba(255,255,255,.1)'
}
}
-
}],
- 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)
- }
- ]
+ series
}
- chart[3] = echarts.init(document.querySelector(`#chart4`))
- chart[3].setOption(option)
- setInterval(function () {
- animateChart(chart[3], option, data, 3)
- }, 1500)
- }).catch(res => {})
+ chart[1] = echarts.init(document.querySelector(`#chart5`))
+ chart[1].setOption(option)
+ // setInterval(function () {
+ // animateChart(chart[1], option, times)
+ // }, 5000)
+ }).catch(res => { })
+ }
- // 监听resize事件，动态改变chart大小
- window.addEventListener('resize', () => {
- this.examChart && this.examChart.resize()
- for (let i = 0; i < 4; i++) {
- chart[i] && chart[i].resize()
- }
+ // 月人均在线学习时长情况
+ 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()
})
- },
- // 表格滚动效果
- scrollTable() {
- const dom = this.$refs.popularCourses
- const dom1 = this.$refs.ach
- const dom2 = this.$refs.active
- setInterval(() => {
- dom.scrollTop += 1
- if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
+ }
+ 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 => { })
- dom1.scrollTop += 1
- if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
+ // 监听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
+ setInterval(() => {
+ dom.scrollTop += 1
+ if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
- dom2.scrollTop += 1
- if (dom2.clientHeight + dom2.scrollTop === dom2.scrollHeight) dom2.scrollTop = 0
- }, 30)
- }
+ dom1.scrollTop += 1
+ if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
+
+ dom2.scrollTop += 1
+ if (dom2.clientHeight + dom2.scrollTop === dom2.scrollHeight) dom2.scrollTop = 0
+ }, 30)
}
+ }
};
\ No newline at end of file
diff --git a/src/pages/station/preview/index.vue b/src/pages/station/preview/index.vue
index 940e50a..292db6a 100644
--- a/src/pages/station/preview/index.vue
+++ b/src/pages/station/preview/index.vue
@@ -594,7 +594,7 @@ export default {
},
// 获取学习进度
async getProgress () {
- let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.courseId}&systemId=${this.systemIds}`);
+ let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.courseId}&systemId=${this.systemIds}&mallId=${this.mallId}`);
this.progressList = res.list
if (res.list.length) this.archProject = res.list[0].projectId
this.maximumScores.length || this.getMaximumScore()
@@ -906,6 +906,7 @@ export default {
this.$get(this.api.getProjectBySystemId, {
systemId: this.systemIds,
cId: this.courseId, // 课程id
+ mallId: this.mallId,
permissions: 0 // 0: 练习,1: 考核
}).then(({ projects }) => {
this.loading = false
@@ -971,7 +972,7 @@ export default {
location.href = `${Setting.systemPath}/#/index/list?curriculumName=${this.curriculumName}&token=${token}&cid=${this.courseId}&mallId=${this.mallId}&systemId=${this.systemIds}&projectId=${this.curProject}&assessmentId=&classId=&stopTime=&test=true`
} else if (systemId == 12) {
// 众筹系统
- window.open(`http://120.78.139.126:8879?systemId=${systemId}&courseId=${this.courseId}&projectId=${this.curProject}&token=${token}&userId=${this.userId}&classId=1`);
+ window.open(`http://120.78.139.126:8879?systemId=${systemId}&courseId=${this.courseId}&projectId=${this.curProject}&token=${token}&userId=${this.userId}&classId=1&mallId=${this.mallId}`);
} else if (systemId == 21) {
window.open(`http://121.37.29.24:80/yyyflogin?userId=${this.userId}&userName=${userName}&userType=${roleId}&reqType=1&reqId=3989a0ad671849b99dcbdcc208782333&caseId=9681f86902314b10bc752909121f9ab9&authorization=87DIVy348Oxzj3ha&classId=1876&courserId=7ff5d4715b114b7398b6f26c20fac460`);
} else if (systemId == 22) {
diff --git a/src/store/modules/project.js b/src/store/modules/project.js
index 7fb12d9..f8051ab 100644
--- a/src/store/modules/project.js
+++ b/src/store/modules/project.js
@@ -5,7 +5,7 @@ export default {
namespaced: true,
state: {
currId: '',
- lastRecordType: "practice",
+ lastRecordType: 0,
courseId: ''
},
mutations: {
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 热门理论课程排行榜
-
-
- 热门理论课程排行榜
-
-
+
+ -
-
-
- {{ i + 1 }}
-
{{ item }}
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 学霸排行榜
-
-
- 学霸排行榜
-
-
-
-
-
-
+ | 名次 | -姓名 | -{{ token ? '班级' : '学校' }} | -练习次数 | -平均分 | -
|---|
+
+ 热门理论课程排行榜
-
+ 热门理论课程排行榜
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 活跃度排行榜
-
-
- 活跃度排行榜
-
-
-
-
-
-
+ | 名次 | -{{ token ? '班级' : '学校' }} | -活跃指数 | -
|---|
+
+ -
+
-
+ {{ i + 1 }}
+
{{ item }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 学霸排行榜
+
+
+ 学霸排行榜
+
+
+
+
+
+
+ | 名次 | +姓名 | +{{ token ? '班级' : '学校' }} | +练习次数 | +平均分 | +
|---|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 活跃度排行榜
+
+
+ 活跃度排行榜
+
+
+
+
+
+
+ | 名次 | +{{ token ? '班级' : '学校' }} | +活跃指数 | +
|---|