修改配置

src/jmap/shape/Signal/index.js

@@ -391,7 +391,7 @@ class Signal extends Group {
 	}
 
 	// 信号机进路自动触发模式状态类型
-	setAutoRouteOpen() {
+	setAutoTriggerOpen() {
 		this.sigAuto.setColor(this.style.Signal.auto.autoTrigger);
 		if (this.model.atsAutoTriggerShow) {
 			this.sigAuto.show();
@@ -462,7 +462,7 @@ class Signal extends Group {
 		case '01': this.setAutoClose(); break; 			// 隐藏 隐藏自动信号和自动进路
 		case '02': this.setAutoSignalOpen(); break; 	// 显示 设置自动信号模式状态类型
 		case '03': this.setAutoRouteOpen(); break; 		// 显示 设置自动进路模式状态类型
-		case '04': this.setAutoRouteOpen(); break; 	// 显示 信号机进路自动触发模式状态类型
+		case '04': this.setAutoTriggerOpen(); break; 	// 显示 信号机进路自动触发模式状态类型
 		}
 
 		/** 延时解锁*/

src/views/dashboard/echarts/demonstration.vue

@@ -0,0 +1,230 @@
+<template>
+  <div :id="id" :style="{height: height+'px',width: width+'px'}" />
+</template>
+
+<script>
+import echarts from 'echarts';
+
+export default {
+	props: {
+		id: {
+			type: String,
+			default: 'chart'
+		},
+		size: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			option: {
+				backgroundColor: '#394056',
+				title: {
+					top: 20,
+					text: 'Requests',
+					textStyle: {
+						fontWeight: 'normal',
+						fontSize: 16,
+						color: '#F1F1F3'
+					},
+					left: '1%'
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						lineStyle: {
+							color: '#57617B'
+						}
+					}
+				},
+				legend: {
+					top: 20,
+					icon: 'rect',
+					itemWidth: 14,
+					itemHeight: 5,
+					itemGap: 13,
+					data: ['CMCC', 'CTCC', 'CUCC'],
+					right: '4%',
+					textStyle: {
+						fontSize: 12,
+						color: '#F1F1F3'
+					}
+				},
+				grid: {
+					top: 100,
+					left: '2%',
+					right: '2%',
+					bottom: '2%',
+					containLabel: true
+				},
+				xAxis: [{
+					type: 'category',
+					boundaryGap: false,
+					axisLine: {
+						lineStyle: {
+							color: '#57617B'
+						}
+					},
+					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: [{
+					type: 'value',
+					name: '(%)',
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						lineStyle: {
+							color: '#57617B'
+						}
+					},
+					axisLabel: {
+						margin: 10,
+						textStyle: {
+							fontSize: 14
+						}
+					},
+					splitLine: {
+						lineStyle: {
+							color: '#57617B'
+						}
+					}
+				}],
+				series: [{
+					name: 'CMCC',
+					type: 'line',
+					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: 'line',
+					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: 'line',
+					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]
+				}]
+			},
+			chart: null
+		};
+	},
+	computed: {
+		width() {
+			return parseInt(this.size.width) * 2;
+		},
+		height() {
+			return this.size.height;
+		}
+	},
+	watch: {
+		size() {
+			return this.chart.resize({width: this.width, height: this.height, silent: false});
+		}
+	},
+	mounted() {
+		this.initChart();
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(document.getElementById(this.id));
+			this.chart.setOption(this.option);
+		}
+	}
+};
+</script>

src/views/dashboard/echarts/lesson.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" :class="className" :style="{height:height,width:width}" />
+  <div :id="id" :style="{height: height+'px', width: width+'px'}" />
 </template>
 
 <script>
@@ -7,21 +7,13 @@ import echarts from 'echarts';
 
 export default {
 	props: {
-		className: {
-			type: String,
-			default: 'chart'
-		},
 		id: {
 			type: String,
 			default: 'chart'
 		},
-		width: {
+		size: {
-			type: String,
+			type: Object,
-			default: '200px'
+			required: true
-		},
-		height: {
-			type: String,
-			default: '200px'
 		}
 	},
 	data() {
@@ -205,9 +197,15 @@ export default {
 			chart: null
 		};
 	},
-	computed: {
+	watch: {
 		size() {
-			return this.resize(this.width, this.height);
+			return this.chart.resize({...this.size, silent: false});
+		},
+		width() {
+			return this.size.width;
+		},
+		height() {
+			return this.size.height;
 		}
 	},
 	mounted() {
@@ -224,9 +222,6 @@ export default {
 		initChart() {
 			this.chart = echarts.init(document.getElementById(this.id));
 			this.chart.setOption(this.option);
-		},
-		resize(opt) {
-			this.myChart.resize({...opt, silent: false});
 		}
 	}
 };

src/views/dashboard/index.vue

@@ -1,50 +1,45 @@
 <template>
   <div class="dashboard-container">
-    <el-row type="flex" justify="center">
+	<div class="item-row" style="margin-top: 20px">
-      <el-col :span="12">
+		<div class="item-col">
-        <echarts-lesson id="lesson" ref="lesson" :width="width + 'px'" :height="height+ 'px'" />
+			<echarts-lesson id="lesson" ref="lesson" :size="size" />
-      </el-col>
+		</div>
-      <el-col :span="12">
+		<div class="item-col">
-        <echarts-lesson id="exam" ref="exam" :width="width + 'px'" :height="height+ 'px'" />
+			<echarts-lesson id="exam" ref="exam" :size="size" />
-      </el-col>
+		</div>
-    </el-row>
+	</div>
-    <el-row>
+	<div class="item-flex">
-      <el-col :span="12">
+		<echarts-demon id="demon" ref="demon" :size="size" />
-        <echarts-lesson id="deomon" ref="deomon" :width="width + 'px'" :height="height+ 'px'" />
+	</div>
-      </el-col>
-      <el-col :span="12">
-        <echarts-lesson id="test" ref="test" :width="width + 'px'" :height="height+ 'px'" />
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import EchartsLesson from './echarts/lesson';
 import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+import EchartsLesson from './echarts/lesson';
+import EchartsDemon from './echarts/demonstration';
 
 export default {
 	name: 'Dashboard',
 	components: {
-		EchartsLesson
+		EchartsLesson,
+		EchartsDemon
 	},
 	mixins: [WindowResizeHandler],
 	data() {
 		return {
-			width: 0,
+			size: {
-			height: 0
+				width: 0,
+				height: 0
+			}
 		};
 	},
-	computed: {
-		...mapGetters([
-			'name'
-		])
-	},
 	methods: {
 		resizeHandler() {
-			this.width = this._clientWidth / 2;
+			this.size = {
-			this.height = this._clientHeight - 80;
+				width: (this._clientWidth - 60) / 2,
+				height: (this._clientHeight - 100) / 2
+			};
 		}
 	}
 };
@@ -53,7 +48,7 @@ export default {
 <style lang="scss" scoped>
   .dashboard {
     &-container {
-      margin: 30px;
+      margin: 0px;
     }
 
     &-text {
@@ -61,4 +56,19 @@ export default {
       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>