lxc
/
Iot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化压力表

master
谕仙 2 years ago
parent
f6c32934dc
commit
0c56b8125d
3 changed files with 347 additions and 272 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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;

Write Preview
Loading…
Cancel
Save