Browse Source

优化压力表

master
谕仙 2 years ago
parent
commit
0c56b8125d
  1. 54
      lpro/src/main/webapp/page/visual/index.html
  2. 61
      lpro/src/main/webapp/page/visual/js/cfg.js
  3. 28
      lpro/src/main/webapp/page/visual/js/show.js

54
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 (){
updateChartsOptions(new Map([["mix",this.pimin]]));
changePiMin (e){
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(){
updateChartsOptions(new Map(["splitNumber",this.splitNumber]));
changeSplitNumber(e){
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>

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

@ -917,8 +917,13 @@ function initSensorPiezometerchart(){
},
axisLabel: {
fontSize: 24,
distance: 12,
formatter: '{value}'
distance: 24,
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');
if(picompany){
const rect=JSON.parse(parentEl.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(parentEl.attr('pimin'));
if(isCircle){
option.series[0].axisLabel.formatter=function (value){
if (value === 0) {
return '';
if(value==pimin){
return ;
}
return value + picompany;
}
return Number(value).toFixed(0);
};
}else {
option.series[0].axisLabel.formatter = function (value) {
return Number(value).toFixed(0);
};
}
}
var myChart = echarts.init($(this)[0]);

28
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"));
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(parentEl.attr('pimin'));
if(isCircle){
option.series[0].axisLabel.formatter=function (value){
if (value === 0) {
return '';
if(value==pimin){
return ;
}
return value + piCompany;
}
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;

Loading…
Cancel
Save