rt-sim-training-client/src/views/dashboard/index.vue

<template>
  <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" />
      </div>
      <div class="item-col">
        <echarts-exam id="exam" ref="exam" :size="size" :info="examOption" />
      </div>
    </div>
    <div class="item-flex">
      <echarts-demon id="demon" ref="demon" :size="size" :info="demonOption" />
    </div>
  </div>
</template>

<script>
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',
	components: {
		EchartsExam,
		EchartsLesson,
		EchartsDemon
	},
	mixins: [WindowResizeHandler],
	data() {
		return {
			size: {
				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: {
					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: []
			}
		};
	},
	computed: {
		wxcode() {
			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,
				height: (this._clientHeight - 100) / 2
			};
		}
	}
};
</script>

<style lang="scss" scoped>
  .dashboard {
	background: #F0F2F5;
    &-container {
      margin: 0px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

.item-col {
	display: inline-block;
}

.item-row {
	left: 50%;
	right: 50%;
	text-align: center;
}

.item-flex {
	display: flex;
	justify-content: center;
}
</style>