优化压力表

lpro/src/main/webapp/page/visual/index.html

@@ -999,35 +999,34 @@
 															@change="changePiRect"
 													>
 													</el-slider>
-
 													<div>
 														<span class="tool-title ">开始角度:</span>
-														<input class="el-input__inner" :value="piRect[0]" type="number"  min=-360 max=360 style="width:75%;"  @onblur="changeStartAngle"/>
+														<input class="el-input__inner" :value="piRect[0]" type="number"  min=-360 max=360 style="width:75%;"  @change="changeStartAngle"/>
 														<br>
 														<span class="tool-title ">结束角度:</span>
-														<input class="el-input__inner" :value="piRect[1]"  type="number"  min=-360 max=360 style="width:75%;" @onblur="changeEndAngle"/>
+														<input class="el-input__inner" :value="piRect[1]"  type="number"  min=-360 max=360 style="width:75%;" @change="changeEndAngle"/>
+													</div>
 												</div>
-
 											</div>
 											<!-- 仪表盘刻度最大值 -->
 											<div v-show="editType == 5 && (cid == 5||cid==6) ">
 												<div class="tool-title " style="padding: 10px;">仪表盘刻度最大值</div>
 												<div style="padding-left: 10px;">
-													<input class="el-input__inner" v-model="pimax" placeholder="刻度最大值" style="width:75%;"  @blur="changePiMax">
+													<input class="el-input__inner" type="number" v-model="pimax" placeholder="刻度最大值" style="width:75%;"  @change="changePiMax">
 												</div>
 											</div>
 											<!-- 仪表盘刻度最大值 -->
 											<div v-show="editType == 5 && (cid == 5||cid==6) ">
 												<div class="tool-title " style="padding: 10px;">仪表盘刻度最小值</div>
 												<div style="padding-left: 10px;">
-													<input class="el-input__inner" v-model="pimin" placeholder="刻度最小值" style="width:75%;"  @blur="changePiMin">
+													<input class="el-input__inner" type="number" :value="pimin" placeholder="刻度最小值" style="width:75%;"  @change="changePiMin">
 												</div>
 											</div>
 											<!-- 仪表盘刻度分段 -->
 											<div v-show="editType == 5 && (cid == 5||cid==6) ">
 												<div class="tool-title " style="padding: 10px;">仪表盘刻度分段数</div>
 												<div style="padding-left: 10px;">
-													<input class="el-input__inner" v-model="splitNumber" placeholder="刻度最大值" style="width:75%;"  @blur="changeSplitNumber">
+													<input class="el-input__inner" v-model="splitNumber" placeholder="刻度最大值" style="width:75%;"  @change="changeSplitNumber">
 												</div>
 											</div>
 											<!-- 仪表盘刻度单位 -->
@@ -1987,11 +1986,23 @@
 					// 更新echart数据
 					setChartOption( getEchartObj() ,optnj) ;
 				},
-				// 修改仪表盘开始和结束角度
+				// 修改仪表盘开始和结束角度,使最大值和最小值只合保持在360之间
 				changePiRect(value){
-					updateChartsOptions(new Map([["startAngle",value[0]],["endAngle",value[1]]]));
 					var cl = cfg.current_edit_obj ;
+					const maxM= Math.max(...value);
+					const minM=Math.min(...value);
+					const radian=Math.abs(maxM)+Math.abs(minM);
+					if(radian>360){
+						const rect=JSON.parse(cl.attr("pi-rect"));
+						if(value[0]==rect[0]){
+							value[0]=-(360-Math.abs(value[1]));
+						}else if(value[1]==rect[1]){
+							value[1]=360-Math.abs(value[0]);
+						}
+						this.piRect=value;
+					}
 					cl.attr("pi-rect",JSON.stringify( this.piRect));
+					updateChartsOptions(new Map([["startAngle",value[0]],["endAngle",value[1]]]));
 				},
 				changeAngleStyle(){
 					var cl = cfg.current_edit_obj ;
@@ -2009,28 +2020,29 @@
 					cl.attr("angle-style",this.angleStyle);
 				},
 				changeStartAngle(e){
-					this.piRect[0]=e.target.value;
+					this.piRect=[Number(e.target.value),this.piRect[1]];
 					this.changePiRect(this.piRect);
 				},
 				changeEndAngle(e){
-					this.piRect[1]=e.target.value;
+					this.piRect=[this.piRect[0],Number(e.target.value)];
 					this.changePiRect(this.piRect);
 				},
 				// 修改仪表盘刻度最大值
 				changePiMax(){
 					updateChartsOptions(new Map([["max",this.pimax]]));
 					var cl = cfg.current_edit_obj ;
-					cl.attr("max",this.pimax);
+					cl.attr("pimax",this.pimax);
 				},
 				// 修改仪表盘刻度最小值
-				changePiMin (){
+				changePiMin (e){
-					updateChartsOptions(new Map([["mix",this.pimin]]));
+					this.pimin=Number(e.target.value);
+					updateChartsOptions(new Map([["min",this.pimin]]));
 					var cl = cfg.current_edit_obj ;
-					cl.attr("mix",this.pimax);
+					cl.attr("pimin",this.pimin);
 				},
 				// 修改仪表盘刻度分段
-				changeSplitNumber(){
+				changeSplitNumber(e){
-					updateChartsOptions(new Map(["splitNumber",this.splitNumber]));
+					updateChartsOptions(new Map([["splitNumber",Number(this.splitNumber)]]));
 					var cl = cfg.current_edit_obj ;
 					cl.attr("splitnumber",this.splitNumber);
 				},
@@ -2053,9 +2065,11 @@
 					updateChartsOptions(new Map([["axisLabel.formatter",formatter]]));
 					cl.attr("picompany",this.piCompany);
 				}
-			},created(){
+			},
+			created(){
 
-			},mounted() {
+			},
+			mounted() {
 
 				$("#app").show();
 				setTimeout( function() {
@@ -2739,7 +2753,7 @@
 						canvas.css("right",'');
 					}
 				}
-			}
+			},
     	})
     </script>
 

lpro/src/main/webapp/page/visual/js/cfg.js

@@ -917,8 +917,13 @@ function initSensorPiezometerchart(){
 				},
 				axisLabel: {
 					fontSize: 24,
-					distance: 12,
+					distance: 24,
-					formatter: '{value}'
+					formatter: function (value){
+						if(value==0){
+							return ;
+						}
+						return value;
+					}
 				},
 				pointer: {
 					show:true,
@@ -1098,6 +1103,31 @@ function  updateChartsOptions(modiflyMap){
 	// 获取数据属性
 	const optionStr= optionNode.getAttribute("option");
 	const option=JSON.parse(optionStr);
+	const rect=JSON.parse(current_edit_obj.attr("pi-rect"));
+	const max_m= Math.max(...rect);
+	const min_m= Math.min(...rect);
+	let isCircle=null;
+	if(max_m<0){
+		isCircle=false;
+	}else if(min_m>0){
+		isCircle=false;
+	}else{
+		isCircle=Math.abs(rect[0])+Math.abs(rect[1])==360;
+	}
+	const pimin=Number(current_edit_obj.attr('pimin'));
+	if(isCircle){
+		option.series[0].axisLabel.formatter=function (value){
+			if(value==pimin){
+				return ;
+			}
+			return Number(value).toFixed(0);
+		};
+	}else {
+		option.series[0].axisLabel.formatter = function (value) {
+			return Number(value).toFixed(0);
+		};
+	}
+
 	// 获取地图
 	var chart = getEchartObj();
 
@@ -1559,14 +1589,29 @@ function reinitChartObj(){
 			var json = $(this).attr("option");
 			var option=JSON.parse(json);
 			if(nid=='5'&&cid=='6'){
-				var picompany=parentEl.attr('picompany');
+				const rect=JSON.parse(parentEl.attr("pi-rect"));
-				if(picompany){
+				const max_m= Math.max(...rect);
-					option.series[0].axisLabel.formatter=function (value){
+				const min_m= Math.min(...rect);
-						if (value === 0) {
+				let isCircle=null;
-							return '';
+				if(max_m<0){
+					isCircle=false;
+				}else if(min_m>0){
+					isCircle=false;
+				}else{
+					isCircle=Math.abs(rect[0])+Math.abs(rect[1])==360;
 				}
-						return value + picompany;
+				const pimin=Number(parentEl.attr('pimin'));
+				if(isCircle){
+					option.series[0].axisLabel.formatter=function (value){
+						if(value==pimin){
+							return ;
 						}
+						return Number(value).toFixed(0);
+					};
+				}else {
+					option.series[0].axisLabel.formatter = function (value) {
+						return Number(value).toFixed(0);
+					};
 				}
 			}
 			var myChart = echarts.init($(this)[0]);

lpro/src/main/webapp/page/visual/js/show.js

@@ -339,16 +339,32 @@ function reinitChartObj(){
 			
 		}else if(cid == '6'&& nid =='5'){ // 液压图
 			var json = $(this).attr("option");
-			var piCompany = $(this).parent().attr("picompany");
+			var parentEl = $(this).parent();
 			var myChart = echarts.init($(this)[0]);
 			var option = JSON.parse(json) ;
-			if(piCompany!=null){
+			const rect=JSON.parse(parentEl.attr("pi-rect"));
-				option.series[0].axisLabel.formatter=function (value){
+			const max_m= Math.max(...rect);
-					if (value === 0) {
+			const min_m= Math.min(...rect);
-						return '';
+			let isCircle=null;
+			if(max_m<0){
+				isCircle=false;
+			}else if(min_m>0){
+				isCircle=false;
+			}else{
+				isCircle=Math.abs(rect[0])+Math.abs(rect[1])==360;
 			}
-					return value + piCompany;
+			const pimin=Number(parentEl.attr('pimin'));
+			if(isCircle){
+				option.series[0].axisLabel.formatter=function (value){
+					if(value==pimin){
+						return ;
 					}
+					return Number(value).toFixed(0);
+				};
+			}else {
+				option.series[0].axisLabel.formatter = function (value) {
+					return Number(value).toFixed(0);
+				};
 			}
 			myChart.setOption(option);
 			app.chartMap[id] = myChart;