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

液压表 添加角度属性

master
谕仙 2 years ago
parent
3c60259cfa
commit
f6c32934dc
3 changed files with 147 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 117
      lpro/src/main/webapp/page/visual/index.html
  2. 79
      lpro/src/main/webapp/page/visual/js/cfg.js
  3. 2
      lpro/src/main/webapp/page/visual/js/show.js

117
lpro/src/main/webapp/page/visual/index.html
View File

@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<html> <html>
<head> <head>
@ -978,21 +979,36 @@
</div> </div>
<!-- 仪表盘属性 --> <!-- 仪表盘属性 -->
<!-- 仪表盘结束与开始角度 --> <!-- 仪表盘结束与开始角度 -->
<!-- <div v-show="editType == 5 && cid == 5 ">--> <div v-show="editType == 5 && cid == 6 ">
<!-- <div class="tool-title " style="padding: 10px;">仪表盘形状</div>--> <div style="padding-left: 10px;">
<!-- <div style="padding-left: 10px;">--> <span class="tool-title ">预设角度</span>
<!-- <el-slider--> <select class="el-input__inner" v-model="angleStyle" @change="changeAngleStyle" style="width:75%;">
<!-- v-model="piRect"--> <option selected="selected" value="style1">预设角度1(360度)</option>
<!-- range--> <option value="style2">预设角度2(270度)</option>
<!-- show-stops--> <option value="other">自定义</option>
<!-- :max="360"--> </select>
<!-- :min="-360"--> </div>
<!-- style="width:75%;"--> <div style="padding-left: 10px;" v-show="angleStyle=='other'">
<!-- @change="changePiRect"--> <el-slider
<!-- >--> v-model="piRect"
<!-- </el-slider>--> range
<!-- </div>--> show-stops
<!-- </div>--> :max="360"
:min="-360"
style="width:75%;"
@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"/>
<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"/>
</div>
</div>
<!-- 仪表盘刻度最大值 --> <!-- 仪表盘刻度最大值 -->
<div v-show="editType == 5 && (cid == 5||cid==6) "> <div v-show="editType == 5 && (cid == 5||cid==6) ">
<div class="tool-title " style="padding: 10px;">仪表盘刻度最大值</div> <div class="tool-title " style="padding: 10px;">仪表盘刻度最大值</div>
@ -1000,20 +1016,27 @@
<input class="el-input__inner" v-model="pimax" placeholder="刻度最大值" style="width:75%;" @blur="changePiMax"> <input class="el-input__inner" v-model="pimax" placeholder="刻度最大值" style="width:75%;" @blur="changePiMax">
</div> </div>
</div> </div>
<!-- 仪表盘刻度分段 --> <!-- 仪表盘刻度最大值 -->
<div v-show="editType == 5 && (cid == 5||cid==6) "> <div v-show="editType == 5 && (cid == 5||cid==6) ">
<div class="tool-title " style="padding: 10px;">仪表盘刻度分段数</div> <div class="tool-title " style="padding: 10px;">仪表盘刻度最小值</div>
<div style="padding-left: 10px;"> <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="pimin" placeholder="刻度最小值" style="width:75%;" @blur="changePiMin">
</div> </div>
</div> </div>
<!-- 仪表盘刻度单位 --> <!-- 仪表盘刻度分段 -->
<div v-show="editType == 5 && (cid == 5||cid==6) "> <div v-show="editType == 5 && (cid == 5||cid==6) ">
<div class="tool-title " style="padding: 10px;">刻度单位</div> <div class="tool-title " style="padding: 10px;">仪表盘刻度分段数</div>
<div style="padding-left: 10px;"> <div style="padding-left: 10px;">
<input class="el-input__inner" v-model="piCompany" placeholder="刻度最大值" style="width:75%;" @blur="changePiCompany"> <input class="el-input__inner" v-model="splitNumber" placeholder="刻度最大值" style="width:75%;" @blur="changeSplitNumber">
</div> </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="piCompany" placeholder="刻度最大值" style="width:75%;" @blur="changePiCompany">-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
<!-- 折线图，柱状图，饼状图切换 --> <!-- 折线图，柱状图，饼状图切换 -->
@ -1412,9 +1435,11 @@
visual_select_code: '' , // 组态内跳转 visual_select_code: '' , // 组态内跳转
isDisableAnimation:false, // 是否禁用动画 @新增属性 isDisableAnimation:false, // 是否禁用动画 @新增属性
shape:"container", // 形状 @新增属性 shape:"container", // 形状 @新增属性
piRect:[225,-45],// 仪表盘区间 piRect:[90,-270],// 仪表盘区间
splitNumber:10, // 刻度分段数 splitNumber:10, // 刻度分段数
piCompany:'' //刻度单位 piCompany:'', //刻度单位
pimin:0, //刻度最小值
angleStyle:"style1", // 角度预设样式
}; };
}, },
methods:{ methods:{
@ -1921,7 +1946,7 @@
changeShape(){ changeShape(){
const val=this.shape; const val=this.shape;
// 更新echarts数据 // 更新echarts数据
updateChartsOption("shape",val); updateChartsOptions(new Map([["shape",val]]));
// 将数据写入 元素节点属性 // 将数据写入 元素节点属性
var cl = cfg.current_edit_obj ; var cl = cfg.current_edit_obj ;
cl.attr("shape" , this.shape ) ; cl.attr("shape" , this.shape ) ;
@ -1964,16 +1989,50 @@
}, },
// 修改仪表盘开始和结束角度 // 修改仪表盘开始和结束角度
changePiRect(value){ changePiRect(value){
var obj={startAngle:value[0],endAngle:value[1]}; updateChartsOptions(new Map([["startAngle",value[0]],["endAngle",value[1]]]));
changeChartOption(obj); var cl = cfg.current_edit_obj ;
cl.attr("pi-rect",JSON.stringify( this.piRect));
},
changeAngleStyle(){
var cl = cfg.current_edit_obj ;
if(this.angleStyle=="style1"){
this.piRect=[-90,270];
this.changePiRect(this.piRect);
}else if(this.angleStyle=="style2"){
this.piRect=[-45,225];
this.changePiRect(this.piRect);
}else{
var rect=cl.attr("pi-rect");
this.piRect=JSON.parse(rect);
}
cl.attr("angle-style",this.angleStyle);
},
changeStartAngle(e){
this.piRect[0]=e.target.value;
this.changePiRect(this.piRect);
},
changeEndAngle(e){
this.piRect[1]=e.target.value;
this.changePiRect(this.piRect);
}, },
// 修改仪表盘刻度最大值 // 修改仪表盘刻度最大值
changePiMax(){ changePiMax(){
updateChartsOption("max",this.pimax); updateChartsOptions(new Map([["max",this.pimax]]));
var cl = cfg.current_edit_obj ;
cl.attr("max",this.pimax);
},
// 修改仪表盘刻度最小值
changePiMin (){
updateChartsOptions(new Map([["mix",this.pimin]]));
var cl = cfg.current_edit_obj ;
cl.attr("mix",this.pimax);
}, },
// 修改仪表盘刻度分段 // 修改仪表盘刻度分段
changeSplitNumber(){ changeSplitNumber(){
updateChartsOption("splitnumber",this.splitNumber); updateChartsOptions(new Map(["splitNumber",this.splitNumber]));
var cl = cfg.current_edit_obj ;
cl.attr("splitnumber",this.splitNumber);
}, },
// 修改仪表盘刻度单位 // 修改仪表盘刻度单位
changePiCompany(){ changePiCompany(){
@ -1991,7 +2050,7 @@
return value + this.piCompany; return value + this.piCompany;
} }
} }
updateChartsOption("axisLabel.formatter",formatter); updateChartsOptions(new Map([["axisLabel.formatter",formatter]]));
cl.attr("picompany",this.piCompany); cl.attr("picompany",this.piCompany);
} }
},created(){ },created(){

79
lpro/src/main/webapp/page/visual/js/cfg.js
View File

@ -143,9 +143,9 @@ var cfg = {
break; break;
case "5"://图表 case "5"://图表
if(cid==6){ if(cid>=4){
w = "345px"; w = "260px";
h = "345px"; h = "260px";
}else{ }else{
w = "400px"; w = "400px";
h = "200px"; h = "200px";
@ -360,9 +360,15 @@ var cfg = {
}else if(app.cid=="5"||app.cid==6){ }else if(app.cid=="5"||app.cid==6){
app.propertyModuleName=app.cid==5?"仪表盘设置":"压力表设置"; app.propertyModuleName=app.cid==5?"仪表盘设置":"压力表设置";
app.pimax = obj.attr("pimax") ; app.pimax = obj.attr("pimax") ;
app.pimin= obj.attr("pimin");
// 增加切换复原属性 边框和形状 // 增加切换复原属性 边框和形状
app.piCompany = obj.attr("picompany") ; app.piCompany = obj.attr("picompany") ;
app.splitNumber = obj.attr('splitnumber'); app.splitNumber = obj.attr('splitnumber');
if(app.cid==6){
app.angleStyle = obj.attr('angle-style');
app.piRect= JSON.parse(obj.attr('pi-rect'));
app.changePiRect(app.piRect);
}
} }
break ; break ;
@ -879,6 +885,8 @@ function initSensorDashChart(){
app.pimax = current_edit_obj.attr("pimax",100) ; app.pimax = current_edit_obj.attr("pimax",100) ;
current_edit_obj.attr("picompany",'') ; current_edit_obj.attr("picompany",'') ;
current_edit_obj.attr('splitnumber',10) ; current_edit_obj.attr('splitnumber',10) ;
current_edit_obj.attr("pimin",0) ;
current_edit_obj.attr('splitnumber',10) ;
} }
//初始化压力表 //初始化压力表
function initSensorPiezometerchart(){ function initSensorPiezometerchart(){
@ -890,19 +898,14 @@ function initSensorPiezometerchart(){
name: 'hour', name: 'hour',
type: 'gauge', type: 'gauge',
radius : "100%", radius : "100%",
startAngle: 90, startAngle: -90,
endAngle: -270, endAngle: 270,
min: 0, min: 0,
max: 100, max: 100,
splitNumber: 10, splitNumber: 10,
clockwise: true, clockwise: true,
axisLine: { axisLine: {
lineStyle: { show:false
width: 15,
color: [[1, 'rgba(0,0,0,0.7)']],
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 3
}
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@ -914,13 +917,8 @@ function initSensorPiezometerchart(){
}, },
axisLabel: { axisLabel: {
fontSize: 24, fontSize: 24,
distance: 25, distance: 12,
formatter: function (value) { formatter: '{value}'
if (value === 0) {
return '';
}
return value + '';
}
}, },
pointer: { pointer: {
show:true, show:true,
@ -945,10 +943,35 @@ function initSensorPiezometerchart(){
}, },
data: [ data: [
{ {
name:"MPa",
value: 0 value: 0
} }
] ]
}, },
{
name: 'background',
type: 'gauge',
radius : "100%",
startAngle: 90,
endAngle: -270,
axisLine: {
lineStyle: {
width: 5,
color: [[1, 'rgba(0,0,0,0.7)']],
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 3
}
},
splitLine:{
show:false
},
axisTick:{
show:false
},
axisLabel:{
show:false
}
}
] ]
} ; } ;
chart.setOption(option,true); chart.setOption(option,true);
@ -956,6 +979,9 @@ function initSensorPiezometerchart(){
current_edit_obj.attr("pimax",100) ; current_edit_obj.attr("pimax",100) ;
current_edit_obj.attr("picompany",'') ; current_edit_obj.attr("picompany",'') ;
current_edit_obj.attr('splitnumber',10) ; current_edit_obj.attr('splitnumber',10) ;
current_edit_obj.attr("pimin",0) ;
current_edit_obj.attr("angle-style","style1") ;
current_edit_obj.attr("pi-rect",'[-90,270]');
} }
//初始化传感器液位图 //初始化传感器液位图
function initSensorLiquidChart(){ function initSensorLiquidChart(){
@ -978,6 +1004,7 @@ function initSensorLiquidChart(){
name:'传感器', name:'传感器',
value:bai value:bai
}], }],
radius: '98%',
direction:'right',//波浪方向或者静止 direction:'right',//波浪方向或者静止
shape:'container', shape:'container',
//color:['rgba(43, 110, 204, 0.7)'],//水球颜色 //color:['rgba(43, 110, 204, 0.7)'],//水球颜色
@ -1061,7 +1088,7 @@ function disableLiquidFillAnimation(nodeId){
} }
var optionByNid5cid=new Map(); var optionByNid5cid=new Map();
// 更新Charts属性 // 更新Charts属性
function updateChartsOption(propertyName,value,funcname,func){ function updateChartsOptions(modiflyMap){
// 当前地图容器 // 当前地图容器
var current_edit_obj = cfg.current_edit_obj; var current_edit_obj = cfg.current_edit_obj;
// let max=current_edit_obj.attr("max"); // let max=current_edit_obj.attr("max");
@ -1073,8 +1100,14 @@ function updateChartsOption(propertyName,value,funcname,func){
const option=JSON.parse(optionStr); const option=JSON.parse(optionStr);
// 获取地图 // 获取地图
var chart = getEchartObj(); var chart = getEchartObj();
if(propertyName){
analysisProp(option,propertyName,value); if(modiflyMap.size>0){
modiflyMap.forEach(
(value,key,map)=>{
analysisProp(option,key,value);
}
)
} }
// 写入属性 // 写入属性
@ -1088,6 +1121,10 @@ function analysisProp(option,propName,value){
const pLen=propertys.length; const pLen=propertys.length;
let data=option.series[0]; let data=option.series[0];
let finally_obj=null; let finally_obj=null;
if(propertys.length==1){
data[propName]=value;
return;
}
for (let i=0;i<pLen;i++){ for (let i=0;i<pLen;i++){
const propertyName=propertys[i]; const propertyName=propertys[i];
if(i==pLen-1){ if(i==pLen-1){

2
lpro/src/main/webapp/page/visual/js/show.js
View File

@ -387,7 +387,7 @@ function refleshSensorList(){
if( isOK(res) ){ if( isOK(res) ){
app.chartMap[id].setOption({ app.chartMap[id].setOption({
series: [{ series: [{
data: [{value:res.data.sdata , name:res.data.name }] data: [{value:cid==6?"MPa":res.data.sdata , name:res.data.name }]
}] }]
}); });
} }

Write Preview
Loading…
Cancel
Save