From f6c32934dc6d5f5368f65aa98737733bfc04d6f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=95=E4=BB=99?= <2248263994@qq.com> Date: Sat, 8 Oct 2022 18:10:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B6=B2=E5=8E=8B=E8=A1=A8=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E8=A7=92=E5=BA=A6=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lpro/src/main/webapp/page/visual/index.html | 117 +++++++++++++++----- lpro/src/main/webapp/page/visual/js/cfg.js | 79 +++++++++---- lpro/src/main/webapp/page/visual/js/show.js | 2 +- 3 files changed, 147 insertions(+), 51 deletions(-) diff --git a/lpro/src/main/webapp/page/visual/index.html b/lpro/src/main/webapp/page/visual/index.html index 74812bc..c143fb4 100644 --- a/lpro/src/main/webapp/page/visual/index.html +++ b/lpro/src/main/webapp/page/visual/index.html @@ -1,4 +1,5 @@ + @@ -978,21 +979,36 @@ - - - - - - - - - - - - - - - +
+
+ 预设角度 + +
+
+ + + +
+ 开始角度: + +
+ 结束角度: + +
+ +
仪表盘刻度最大值
@@ -1000,20 +1016,27 @@
- +
-
仪表盘刻度分段数
+
仪表盘刻度最小值
- +
- +
-
刻度单位
+
仪表盘刻度分段数
- +
+ + + + + + + @@ -1412,9 +1435,11 @@ visual_select_code: '' , // 组态内跳转 isDisableAnimation:false, // 是否禁用动画 @新增属性 shape:"container", // 形状 @新增属性 - piRect:[225,-45],// 仪表盘区间 + piRect:[90,-270],// 仪表盘区间 splitNumber:10, // 刻度分段数 - piCompany:'' //刻度单位 + piCompany:'', //刻度单位 + pimin:0, //刻度最小值 + angleStyle:"style1", // 角度预设样式 }; }, methods:{ @@ -1921,7 +1946,7 @@ changeShape(){ const val=this.shape; // 更新echarts数据 - updateChartsOption("shape",val); + updateChartsOptions(new Map([["shape",val]])); // 将数据写入 元素节点属性 var cl = cfg.current_edit_obj ; cl.attr("shape" , this.shape ) ; @@ -1964,16 +1989,50 @@ }, // 修改仪表盘开始和结束角度 changePiRect(value){ - var obj={startAngle:value[0],endAngle:value[1]}; - changeChartOption(obj); + updateChartsOptions(new Map([["startAngle",value[0]],["endAngle",value[1]]])); + 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(){ - 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(){ - updateChartsOption("splitnumber",this.splitNumber); + updateChartsOptions(new Map(["splitNumber",this.splitNumber])); + var cl = cfg.current_edit_obj ; + cl.attr("splitnumber",this.splitNumber); }, // 修改仪表盘刻度单位 changePiCompany(){ @@ -1991,7 +2050,7 @@ return value + this.piCompany; } } - updateChartsOption("axisLabel.formatter",formatter); + updateChartsOptions(new Map([["axisLabel.formatter",formatter]])); cl.attr("picompany",this.piCompany); } },created(){ diff --git a/lpro/src/main/webapp/page/visual/js/cfg.js b/lpro/src/main/webapp/page/visual/js/cfg.js index 4a23d91..0ef2304 100644 --- a/lpro/src/main/webapp/page/visual/js/cfg.js +++ b/lpro/src/main/webapp/page/visual/js/cfg.js @@ -143,9 +143,9 @@ var cfg = { break; case "5"://图表 - if(cid==6){ - w = "345px"; - h = "345px"; + if(cid>=4){ + w = "260px"; + h = "260px"; }else{ w = "400px"; h = "200px"; @@ -360,9 +360,15 @@ var cfg = { }else if(app.cid=="5"||app.cid==6){ app.propertyModuleName=app.cid==5?"仪表盘设置":"压力表设置"; app.pimax = obj.attr("pimax") ; + app.pimin= obj.attr("pimin"); // 增加切换复原属性 边框和形状 app.piCompany = obj.attr("picompany") ; 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 ; @@ -879,6 +885,8 @@ function initSensorDashChart(){ app.pimax = current_edit_obj.attr("pimax",100) ; current_edit_obj.attr("picompany",'') ; current_edit_obj.attr('splitnumber',10) ; + current_edit_obj.attr("pimin",0) ; + current_edit_obj.attr('splitnumber',10) ; } //初始化压力表 function initSensorPiezometerchart(){ @@ -890,19 +898,14 @@ function initSensorPiezometerchart(){ name: 'hour', type: 'gauge', radius : "100%", - startAngle: 90, - endAngle: -270, + startAngle: -90, + endAngle: 270, min: 0, max: 100, splitNumber: 10, clockwise: true, axisLine: { - lineStyle: { - width: 15, - color: [[1, 'rgba(0,0,0,0.7)']], - shadowColor: 'rgba(0, 0, 0, 0.5)', - shadowBlur: 3 - } + show:false }, splitLine: { lineStyle: { @@ -914,13 +917,8 @@ function initSensorPiezometerchart(){ }, axisLabel: { fontSize: 24, - distance: 25, - formatter: function (value) { - if (value === 0) { - return ''; - } - return value + ''; - } + distance: 12, + formatter: '{value}' }, pointer: { show:true, @@ -945,10 +943,35 @@ function initSensorPiezometerchart(){ }, data: [ { + name:"MPa", 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); @@ -956,6 +979,9 @@ function initSensorPiezometerchart(){ current_edit_obj.attr("pimax",100) ; current_edit_obj.attr("picompany",'') ; 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(){ @@ -978,6 +1004,7 @@ function initSensorLiquidChart(){ name:'传感器', value:bai }], + radius: '98%', direction:'right',//波浪方向或者静止 shape:'container', //color:['rgba(43, 110, 204, 0.7)'],//水球颜色 @@ -1061,7 +1088,7 @@ function disableLiquidFillAnimation(nodeId){ } var optionByNid5cid=new Map(); // 更新Charts属性 -function updateChartsOption(propertyName,value,funcname,func){ +function updateChartsOptions(modiflyMap){ // 当前地图容器 var current_edit_obj = cfg.current_edit_obj; // let max=current_edit_obj.attr("max"); @@ -1073,8 +1100,14 @@ function updateChartsOption(propertyName,value,funcname,func){ const option=JSON.parse(optionStr); // 获取地图 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; let data=option.series[0]; let finally_obj=null; + if(propertys.length==1){ + data[propName]=value; + return; + } for (let i=0;i