rt-sim-training-client/src/views/dashboard/echarts/permission.vue

<template>
  <div>
    <div :id="id" :style="{height: size.height+'px', width: size.width+'px'}" />
    <div class="lesson-select">
      <el-select v-model="mapName" placeholder="请选择地图线路" size="mini" style="width: 300px">
        <el-option v-for="name in mapNameList" :key="name" :label="name" :value="name" />
      </el-select>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { listUserPermision } from '@/api/management/author';

export default {
	props: {
		id: {
			type: String,
			default: 'chart'
		},
		size: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			option: {
				backgroundColor: '#F0F2F5',
				title: {
					text: '',
					subtext: '',
					subtextStyle: {
						color: '#909399'
					},
					y: 10,
					left: 'center',
					textAlign: 'center'
				},
				tooltip: {
				},
				grid: [{
					top: '12%',
					width: '45%',
					bottom: '70%',
					left: 10,
					containLabel: true
				},{
					top: '40%',
					width: '45%',
					bottom: '42%',
					left: 10,
					containLabel: true
				},{
					top: '65%',
					width: '45%',
					bottom: '10%',
					left: 10,
					containLabel: true
				}],
				xAxis: [{
					type: 'value',
					show: false,
					minInterval: 1
				}, {
					type: 'value',
					show: false,
					gridIndex: 1,
					minInterval: 1
				}, {
					type: 'value',
					show: false,
					gridIndex: 2,
					minInterval: 1
				}],
				yAxis: [{
					type: 'category',
					show: false,
					axisLabel: {
						interval: 0,
						rotate: 30
					},
					splitLine: {
						show: false
					},
					data: []
				}, {
					type: 'category',
					show: false,
					gridIndex: 1,
					axisLabel: {
						interval: 0,
						rotate: 30
					},
					splitLine: {
						show: false
					},
					data: []
				}, {
					type: 'category',
					show: false,
					gridIndex: 2,
					axisLabel: {
						interval: 0,
						rotate: 30
					},
					splitLine: {
						show: false
					},
					data: []
				}],
				series: [{
					type: 'bar',
					z: 3,
					barWidth: 10,
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
					},
					data: []
				}, {
					type: 'bar',
					z: 3,
					xAxisIndex: 1,
        			yAxisIndex: 1,
					barWidth: 10,
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
					},
					data: []
				}, {
					type: 'bar',
					z: 3,
					xAxisIndex: 2,
        			yAxisIndex: 2,
					barWidth: 10,
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
					},
					data: []
				}, {
					type: 'pie',
					radius: [0, '70%'],
					center: ['73%', '52%'],
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.percent}%`; }
					},
					data: []
				}]
			},
			mapName: null,
			mapNameList: [],
			permissionList: [],
			chart: null
		};
	},
	watch: {
		size() {
			return this.chart.resize({...this.size, silent: false});
		},
		async mapName(val) {
			await this.loadExamData(val);
		}
	},
	mounted() {
		this.initChart();
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			listUserPermision({pageSize: 9000, pageNum: 1}).then(resp => {
				this.permissionList = resp.data.list.filter(elem => { return parseInt(elem.status) > 0; });
				this.mapNameList = [...new Set(this.permissionList.map(elem => { return elem.mapName; }))];
				this.$nextTick(() => { this.mapName = this.mapNameList[0] || ''; });
			});
			this.chart = echarts.init(document.getElementById(this.id));
			this.chart.setOption(this.option);
		},
		async loadExamData(mapName) {
			if (mapName) {
				var permissionMap = {};
				var permissionList = await this.$Dictionary.permissionType();

				if (permissionList) {
					(permissionList ||[]).forEach(elem => {
						permissionMap[elem.code] = elem.name;
					});
				}

				var lessonMap = {
					'ATS现地工作站-课程权限': 0,
					'ATS行调工作站-课程权限': 0,
				};
				var examMap = {
					'ATS现地工作站-考试权限': 0,
					'ATS行调工作站-考试权限': 0,
				};
				var simulationMap = {
					'ATS现地工作站-仿真权限': 0,
					'ATS行调工作站-仿真权限': 0,
					'综合演练云平台-仿真权限': 0,
					'司机模拟驾驶系统-仿真权限': 0,
					'大屏系统权限': 0
				};
				(this.permissionList.filter(elem => { return elem.mapName == mapName; })|| []).forEach(elem => {
					switch (elem.type) {
						case '01': 
							lessonMap[`${elem.mapProductName}-${permissionMap[elem.type]}`] = elem.remains;						
							break;
						case '02':
							examMap[`${elem.mapProductName}-${permissionMap[elem.type]}`] = elem.remains;
							break;
						case '03':
							simulationMap[`${elem.mapProductName}-${permissionMap[elem.type]}`] = elem.remains;	
							break;
					}
				});

				const keys = [...Object.keys(lessonMap), ...Object.keys(examMap), ...Object.keys(simulationMap)];
				const values = [...Object.values(lessonMap), ...Object.values(examMap), ...Object.values(simulationMap)];
				const sum = values.reduce((total, num) => total + num);

				this.option.title.text = `剩余权限分布图（${mapName}）`;
				this.option.title.subtext = `权限总计${sum}个`;

				this.option.xAxis[0].show = this.option.xAxis[1].show = this.option.xAxis[2].show = true;
				this.option.yAxis[0].show = this.option.yAxis[1].show = this.option.yAxis[2].show = true;

				this.option.yAxis[0].data = Object.keys(lessonMap);
				this.option.series[0].data = Object.values(lessonMap);

				this.option.yAxis[1].data = Object.keys(examMap);
				this.option.series[1].data =  Object.values(examMap);
				
				this.option.yAxis[2].data = Object.keys(simulationMap);
				this.option.series[2].data = Object.values(simulationMap);

				this.option.series[3].data = keys.map((name,index) => { return {name, value: values[index]}; });
			} else {
				this.option.title.text = `剩余权限分布图（暂无地图线路数据）`;
				this.option.title.subtext = `权限总计0个`;
				this.option.xAxis[0].show = this.option.xAxis[1].show = this.option.xAxis[2].show = false;
				this.option.yAxis[0].show = this.option.yAxis[1].show = this.option.yAxis[2].show = false;
				this.option.yAxis[0].data = this.option.yAxis[1].data = this.option.yAxis[2].data = [];
				this.option.series[0].data = this.option.series[1].data = this.option.series[2].data = [];
			}

			this.chart.setOption(this.option);
		}
	}
};
</script>
<style scoped>
.lesson-select {
    position: absolute;
    display: flex;
    top: 30px;
	right: 30px;
}
</style>