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: '#f0f0f0',
				title: {
					text: '',
					subtext: '',
					subtextStyle: {
						color: '#909399'
					},
					y: 10,
					left: 'center'
				},
				tooltip: {
				},
				grid: [{
					top: '17%',
					width: '45%',
					bottom: '5%',
					left: 30,
					containLabel: true
				}],
				xAxis: {
					type: 'category',
					show: false,
					axisLabel: {
						interval: 0,
						rotate: 60
					},
					splitLine: {
						show: false
					},
					data: []
				},
				yAxis: {
					type: 'value',
					show: false,
					minInterval: 1,
					name: '权限(个)'
				},
				series: [{
					type: 'bar',
					z: 3,
					barWidth: 25,
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: '#83bff6'},
									{offset: 0.5, color: '#188df0'},
									{offset: 1, color: '#188df0'}
								]
							)
						},
						emphasis: {
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[
									{offset: 0, color: '#2378f7'},
									{offset: 0.7, color: '#2378f7'},
									{offset: 1, color: '#83bff6'}
								]
							)
						}
					},
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
					},
					data: []
				}, {
					type: 'pie',
					radius: [0, '72%'],
					center: ['74%', '55%'],
					tooltip: {
						formatter: params => { return `${params.marker} ${params.name}: ${params.percent}% （${params.value}个）`; }
					},
					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 permissionDict = {};
				var permissionList = await this.$Dictionary.permissionType();
				(permissionList ||[]).forEach(elem => {
					permissionDict[elem.code] = elem.name;
				});

				var permissionMap = {
					'ATS现地工作站-课程权限': 0,
					'ATS行调工作站-课程权限': 0,
					'ATS现地工作站-考试权限': 0,
					'ATS行调工作站-考试权限': 0,
					'ATS现地工作站-仿真权限': 0,
					'ATS行调工作站-仿真权限': 0,
					'综合演练云平台-仿真权限': 0,
					'司机模拟驾驶系统-仿真权限': 0,
					'大屏系统权限': 0
				};

				(this.permissionList.filter(elem => { return elem.mapName == mapName; })|| []).forEach(elem => {
					if (elem.mapProductName == Object.keys(permissionMap)[Object.keys(permissionMap).length -1]) {
						permissionMap[`${elem.mapProductName}`] = elem.remains;
					} else {
						permissionMap[`${elem.mapProductName}-${permissionDict[elem.type]}`] = elem.remains;
					}
				});

				const keys = Object.keys(permissionMap);
				const values = Object.values(permissionMap);
				const sum = values.reduce((total, num) => total + num);

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

				this.option.xAxis.show = true;
				this.option.yAxis.show = true;

				this.option.xAxis.data = keys;

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

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