init

pc/src/views/site-detail.vue

@@ -457,98 +457,100 @@
 			}
 			function initGauge(){
 				nextTick(()=>{
-					state.myChart = echarts.init(chart.value);
-					let option = {
-						series: [
-							{
-								type: 'gauge',
-								progress: {
-									show: true,
-									width: 18,
+					setTimeout(()=>{
+						state.myChart = echarts.init(chart.value);
+						let option = {
+							series: [
+								{
+									type: 'gauge',
+									progress: {
+										show: true,
+										width: 18,
+										itemStyle:{
+											color:'#3396fb',
+										}
+									},
+									pointer: {
+										icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+										width: 4,
+										length: '60%',
+										offsetCenter: [0, '8%']
+									},
 									itemStyle:{
-										color:'#3396fb',
-									}
-								},
-								pointer: {
-									icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
-									width: 4,
-									length: '60%',
-									offsetCenter: [0, '8%']
-								},
-								itemStyle:{
-									color:'#3396fb'
-								},
-								axisLine: {
-									lineStyle: {
-										width: 18
-									}
-								},
-								axisTick: {
-									show: true,
-									distance: 0,
-								},
-								splitLine: {
-									distance: 5,
-									length: 8,
-									lineStyle: {
-										width: 1,
-										color: '#999'
-									}
-								},
-								axisLabel: {
-									distance: 22,
-									color: '#999',
-									fontSize: 12
-								},
-								anchor: {
-									show: true,
-									showAbove: true,
-									size: 20,
-									itemStyle: {
-										borderWidth: 4,
-										borderColor: '#3396fb',
-										color:'#fff',
-									}
-								},
-								title: {
-									show: false
-								},
-								detail: {
-									valueAnimation: true,
-									fontSize: 24,
-									offsetCenter: [0, '70%'],
-									formatter(p){
-										return `{a|${p}m}\n{b|液位}`
+										color:'#3396fb'
 									},
-
-									rich: {
-										a: {
-											color: '#333',
-											lineHeight: 20,
-											fontSize:18
+									axisLine: {
+										lineStyle: {
+											width: 18
+										}
+									},
+									axisTick: {
+										show: true,
+										distance: 0,
+									},
+									splitLine: {
+										distance: 5,
+										length: 8,
+										lineStyle: {
+											width: 1,
+											color: '#999'
+										}
+									},
+									axisLabel: {
+										distance: 22,
+										color: '#999',
+										fontSize: 12
+									},
+									anchor: {
+										show: true,
+										showAbove: true,
+										size: 20,
+										itemStyle: {
+											borderWidth: 4,
+											borderColor: '#3396fb',
+											color:'#fff',
+										}
+									},
+									title: {
+										show: false
+									},
+									detail: {
+										valueAnimation: true,
+										fontSize: 24,
+										offsetCenter: [0, '70%'],
+										formatter(p){
+											return `{a|${p}m}\n{b|液位}`
 										},
-										b: {
-											color: '#666',
-											lineHeight: 20,
-											fontSize:14
+
+										rich: {
+											a: {
+												color: '#333',
+												lineHeight: 20,
+												fontSize:18
+											},
+											b: {
+												color: '#666',
+												lineHeight: 20,
+												fontSize:14
+											}
 										}
-									}
-								},
-								data: [
-									{
-										value: state.detail.yewei
-									}
-								],
-								radius:"95%",
-								startAngle:210,
-								endAngle:-30,
-								max:1
-							}
-						]
-					};
-					state.myChart.clear();
-					state.myChart.setOption(option);
-					state.myChart.resize();
+									},
+									data: [
+										{
+											value: state.detail.yewei
+										}
+									],
+									radius:"95%",
+									startAngle:210,
+									endAngle:-30,
+									max:1
+								}
+							]
+						};
+						state.myChart.clear();
+						state.myChart.setOption(option);
+						state.myChart.resize();
+					},500)
 				})
 			}
 			function getList(){
@@ -559,7 +561,7 @@
 					page:page,
 					page_size:state.list.pageSize,
 				};
-				if(state.filter.time_order[0]&&state.filter.time_order[1]){
+				if(state.filter.time_order&&state.filter.time_order[0]&&state.filter.time_order[1]){
 					p.start_time = state.filter.time_order[0];
 					p.end_time = state.filter.time_order[1];
 				}
@@ -834,6 +836,7 @@
 						align-items: center;
 						margin-right: 55px;
 						.filter-name{
+							flex-shrink: 0;
 							color: #666;
 							margin-right: 20px;
 						}