修改主页
This commit is contained in:
ival
parent
0b3ad87bc3
commit
11658a283e
@ -33,9 +33,9 @@ service.interceptors.response.use(
|
||||
response => {
|
||||
/** code为非200是抛错 可结合自己业务进行修改*/
|
||||
const res = response.data;
|
||||
if (res.code !== 200) {
|
||||
if (res.code != 200) {
|
||||
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
|
||||
if (res.code === 40004 || res.code === 40005 || res.code === 40003) {
|
||||
if (res.code == 40004 || res.code == 40005 || res.code == 40003) {
|
||||
// eslint-disable-next-line no-undef
|
||||
EventBus.$emit('stop');
|
||||
// eslint-disable-next-line no-undef
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div :id="id" :style="{height: size.height+'px', width: size.width+'px'}" />
|
||||
<div>
|
||||
<div :id="id" :style="{height: size.height+'px', width: size.width+'px'}" />
|
||||
<div class="lesson-select">
|
||||
<el-select v-model="lessonId" placeholder="请选择课程">
|
||||
<el-option v-for="item in lessonList" :key="item.statsProjectId" :label="item.statsProjectName" :value="item.statsProjectName" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import { getExamTree, getstatsExamList, getExamChart } from '@/api/statistics';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -15,18 +23,20 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
info: {
|
||||
type: Object,
|
||||
wxcode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lessonId: '',
|
||||
lessonList: [],
|
||||
option: {
|
||||
backgroundColor: this.info.backgroundColor,
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: this.info.title.text,
|
||||
text: '考试统计',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
@ -44,11 +54,12 @@ export default {
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: this.info.legend.data,
|
||||
data: [],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
@ -70,7 +81,7 @@ export default {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: this.info.xAxis.data
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
@ -95,108 +106,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'CMCC',
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
||||
}, {
|
||||
name: 'CTCC',
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 136, 212, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(0, 136, 212, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(0,136,212)',
|
||||
borderColor: 'rgba(0,136,212,0.2)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
||||
}, {
|
||||
name: 'CUCC',
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(219, 50, 51, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(219, 50, 51, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(219,50,51)',
|
||||
borderColor: 'rgba(219,50,51,0.2)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
|
||||
}]
|
||||
series: []
|
||||
},
|
||||
chart: null
|
||||
};
|
||||
@ -204,6 +114,9 @@ export default {
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
},
|
||||
lessonId(val) {
|
||||
this.loadExamData(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -218,9 +131,59 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
getExamTree(this.wxcode).then(resp => {
|
||||
this.lessonList = resp.data || [];
|
||||
if (this.lessonList[0]) {
|
||||
this.lessonId = this.lessonList[0].statsProjectId;
|
||||
}
|
||||
});
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadExamData(lessonId) {
|
||||
this.option.series = [];
|
||||
this.option.legend.data = [];
|
||||
this.option.xAxis[0].data = [];
|
||||
if (lessonId) {
|
||||
const resp = await getstatsExamList({lessonId});
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
const exam = info[i];
|
||||
this.option.xAxis[0].data.push(exam.statsProjectName);
|
||||
this.option.legend.data.push(exam.statsProjectName);
|
||||
this.option.series.push({
|
||||
name: exam.statsProjectName,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0, 0]
|
||||
});
|
||||
const rest = getExamChart({examId: exam.statsProjectId, code: this.wxcode});
|
||||
if (rest) {
|
||||
console.log(rest);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.lesson-select {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 30px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts';
|
||||
import { getLessonList, getLessonTimeChart } from '@/api/statistics';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -15,8 +16,8 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
info: {
|
||||
type: Object,
|
||||
wxcode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
@ -26,7 +27,7 @@ export default {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
top: 20,
|
||||
text: '',
|
||||
text: '课程统计',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 18,
|
||||
@ -44,6 +45,7 @@ export default {
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
orient: 'vertical',
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
@ -103,16 +105,11 @@ export default {
|
||||
watch: {
|
||||
size() {
|
||||
return this.chart.resize({...this.size, silent: false});
|
||||
},
|
||||
info() {
|
||||
this.option.backgroundColor = this.info.backgroundColor;
|
||||
this.option.title.text = this.info.title.text;
|
||||
this.option.legend.data = this.info.legend.data;
|
||||
this.option.xAxis[0].data = this.info.xAxis.data;
|
||||
this.option.series = this.info.series;
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.loadLessonData();
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
@ -126,6 +123,53 @@ export default {
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
async loadLessonData() {
|
||||
const data = [];
|
||||
const resp = await getLessonList(this.wxcode);
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
const item = { ...info[i], data: []};
|
||||
const rest = await getLessonTimeChart({code: this.wxcode, id: info[i].statsProjectId});
|
||||
if (rest) {
|
||||
item.data = rest.data || [];
|
||||
}
|
||||
data.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
this.option.series = [];
|
||||
this.option.legend.data = [];
|
||||
this.option.xAxis[0].data = ['控制权实训', ' 信号机实训', ' 道岔实训', '区段实训', '站台实训'];
|
||||
data.forEach(elem => {
|
||||
this.option.legend.data.push(elem.statsProjectName);
|
||||
this.option.series.push({
|
||||
name: elem.statsProjectName,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0, 0]
|
||||
});
|
||||
});
|
||||
|
||||
data.forEach((elem, i) => {
|
||||
elem.data.forEach(item => {
|
||||
const index = this.option.xAxis[0].data.findIndex(name => { return name == item.statsProjectName; });
|
||||
if (index >= 0) {
|
||||
this.option.series[i].data[index] = item.duration;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<div class="dashboard-container">
|
||||
<div class="item-row" style="margin-top: 20px">
|
||||
<div class="item-col">
|
||||
<echarts-lesson id="lesson" ref="lesson" :size="size" :info="lessonOption" />
|
||||
<echarts-lesson id="lesson" ref="lesson" :size="size" :wxcode="wxcode" />
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<echarts-exam id="exam" ref="exam" :size="size" :info="examOption" />
|
||||
<echarts-exam id="exam" ref="exam" :size="size" :wxcode="wxcode" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-flex">
|
||||
@ -19,8 +19,6 @@ import WindowResizeHandler from '@/mixin/WindowResizeHandler';
|
||||
import EchartsExam from './echarts/exam';
|
||||
import EchartsLesson from './echarts/lesson';
|
||||
import EchartsDemon from './echarts/demonstration';
|
||||
import { getLessonList, getLessonTimeChart } from '@/api/statistics';
|
||||
import echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
@ -36,36 +34,6 @@ export default {
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
lessonOption: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
text: '课程统计'
|
||||
},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
xAxis: {
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
},
|
||||
series: []
|
||||
},
|
||||
examOption: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
text: '考试统计'
|
||||
},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
xAxis: {
|
||||
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
|
||||
},
|
||||
yAxis: {
|
||||
},
|
||||
series: []
|
||||
},
|
||||
demonOption: {
|
||||
backgroundColor: '#F0F2F5',
|
||||
title: {
|
||||
@ -85,80 +53,10 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
wxcode() {
|
||||
return this.$store.state.user.wxUnionId;
|
||||
return this.$store.state.user.wxUnionId || '';
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.loadLessonPage();
|
||||
},
|
||||
methods: {
|
||||
async loadLessonPage() {
|
||||
const data = [];
|
||||
const resp = await getLessonList(this.wxcode);
|
||||
if (resp) {
|
||||
const info = resp.data || [];
|
||||
for (var i = 0; i < info.length; i++) {
|
||||
const item = { ...info[i], data: []};
|
||||
const rest = await getLessonTimeChart({code: this.wxcode, id: info[i].statsProjectId});
|
||||
if (rest) {
|
||||
item.data = rest.data || [];
|
||||
}
|
||||
data.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
this.lessonOption.series = [];
|
||||
this.lessonOption.legend.data = [];
|
||||
this.lessonOption.xAxis.data = ['控制权实训', ' 信号机实训', ' 道岔实训', '区段实训', '站台实训'];
|
||||
this.lessonOption.xAxis.data.forEach(name => {
|
||||
this.lessonOption.series.push({
|
||||
name: name,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [0, 0, 0, 0, 0]
|
||||
});
|
||||
});
|
||||
|
||||
data.forEach(elem => {
|
||||
this.lessonOption.legend.data.push(elem.statsProjectName);
|
||||
elem.data.forEach(item => {
|
||||
const index = this.lessonOption.xAxis.data.findIndex(name => { return name == item.statsProjectName; });
|
||||
if (index >= 0) {
|
||||
this.lessonOption.series[this.lessonOption.legend.data.length].data[index] = item.duration;
|
||||
}
|
||||
});
|
||||
});
|
||||
this.lessonOption = { ...this.lessonOption };
|
||||
},
|
||||
resizeHandler() {
|
||||
this.size = {
|
||||
width: (this._clientWidth - 60) / 2,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user