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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ 预设角度
+
+
+
-
+
-
+
+
+
+
+
+
+
+
@@ -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