From 3d881181b23c01f99c9ad544b362be4b197570a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=95=E4=BB=99?= <2248263994@qq.com> Date: Thu, 29 Sep 2022 09:48:58 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BB=AA=E8=A1=A8=E7=9B=98?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lpro/src/main/webapp/page/visual/index.html | 145 ++++++++++++++++---- lpro/src/main/webapp/page/visual/js/cfg.js | 53 ++++++- 2 files changed, 162 insertions(+), 36 deletions(-) diff --git a/lpro/src/main/webapp/page/visual/index.html b/lpro/src/main/webapp/page/visual/index.html index 561f555..4522233 100644 --- a/lpro/src/main/webapp/page/visual/index.html +++ b/lpro/src/main/webapp/page/visual/index.html @@ -371,6 +371,23 @@ +
+
+
+ + + +
+
+ 仪表盘 +
+
+
+
+
+
+
+
@@ -866,7 +883,43 @@
+ + + +
+
大小
+
+ 宽 + + 高 + +
+
+
+
位置
+
+ X  + + Y  + +
+
+ +
+
图片显示
+
+ + +
+
+
+
+ + {{propertyModuleName}} + +
+
@@ -893,46 +946,58 @@
液位最大值
-
+
-
+
边框
-
+
-
+
-
-
大小
-
- 宽 - - 高 - -
+ + +
+
仪表盘形状
+
+ + +
-
-
位置
-
- X  - - Y  - -
+ +
+
仪表盘刻度最大值
+
+ +
- -
-
图片显示
-
- - -
+ +
+
仪表盘刻度分段数
+
+ +
- + +
+
刻度单位
+
+ +
+
+
@@ -1320,12 +1385,16 @@ imgObjList:'' , // 组件图片列表 chartMax: 1000 , // 图标最大值 columnVal: '0' , // 栏目值 - pimax: '' , // 仪表盘最大值 visual_name : '' , // 组态名称 addColumn: false , + propertyModuleName:'',// 属性模块 分组名称 + pimax:100, // 仪表盘最大值 visual_select_code: '' , // 组态内跳转 isDisableAnimation:false, // 是否禁用动画 @新增属性 shape:"container", // 形状 @新增属性 + piRect:[225,-45],// 仪表盘区间 + splitNumber:10, // 刻度分段数 + piCompany:'' //刻度单位 }; }, methods:{ @@ -1872,6 +1941,24 @@ cl.attr('border',this.columnVal ); // 更新echart数据 setChartOption( getEchartObj() ,optnj) ; + }, + // 修改仪表盘开始和结束角度 + changePiRect(value){ + var obj={startAngle:value[0],endAngle:value[1]}; + changeChartOption(obj); + }, + // 修改仪表盘刻度最大值 + changePiMax(){ + changeChartOption1("max",this.pimax); + }, + // 修改仪表盘刻度分段 + changeSplitNumber(){ + changeChartOption1("splitNumber",this.splitNumber); + }, + // 修改仪表盘刻度单位 + changePiCompany(){ + var formatter={axisLabel:{formatter:"{value}"+this.piCompany}}; + changeChartOption(formatter); } },created(){ diff --git a/lpro/src/main/webapp/page/visual/js/cfg.js b/lpro/src/main/webapp/page/visual/js/cfg.js index 5e4b634..c16f498 100644 --- a/lpro/src/main/webapp/page/visual/js/cfg.js +++ b/lpro/src/main/webapp/page/visual/js/cfg.js @@ -39,6 +39,7 @@ * @修订方法 * initSensorLiquidChart 初始化传感器液位图 * updateEditDate 编辑元素回显 液位图新增回显属性 + * initTemplateCharts 增加仪表盘的创建代码 更改仪表盘样式 * */ var navPage = ".edit-container"; //画布 // 组态方法类 @@ -324,6 +325,7 @@ var cfg = { app.cid = obj.attr("cid"); // 子类型 var id = obj.attr("id"); app.nid = nid ; + app.propertyModuleName=""; // 类型 app.editType = nid ; switch (nid) { @@ -345,6 +347,12 @@ var cfg = { app.columnVal = obj.attr("border") ; app.shape = obj.attr("shape") ; app.isDisableAnimation = obj.attr("enableAnimation")==="true"?false:true; + if(app.cid=="4"){ + app.propertyModuleName="液位图设置"; + }else if(app.cid=="3"){ + app.propertyModuleName="仪表盘设置"; + } + break ; case '8': case '9': @@ -714,7 +722,11 @@ function initTemplateCharts(obj){ if(cid==4){ initSensorLiquidChart(); return; - } + } else if(cid==3){ + // 仪表盘 + initSensorDashChart(); + return; + } //默认折线图 var chart = obj.find(".chartStyle"); chart.attr("id",obj.attr("id")+"_chart") @@ -746,7 +758,6 @@ function initTemplateCharts(obj){ chart.attr("option",JSON.stringify(option)); app.chartMap[obj.attr("id")] = myChart; } - //初始化传感器折线图 function initSensorLineChart(){ var current_edit_obj = cfg.current_edit_obj; @@ -820,18 +831,30 @@ function initSensorDashChart(){ type: 'gauge', radius : "98%", axisLine : { - lineStyle : { - width : 20 - } + + lineStyle : { + width : 5, + color :[[1,'#5175B8']] + } }, - splitLine : { - length : 20 + splitLine : { + show:true, + length : 8 }, + axisTick:{ + show:false, + }, + roundCap:false, detail: {formatter: '{value}'}, data: [{ value: 20, name: '传感器'}] + ,progress: { + show: true, + width: 18 + }, } ] } ; + setChartOption(chart,option) ; } //初始化传感器液位图 @@ -963,6 +986,22 @@ function updateChartsOption(propertyName,value){ // 更新地图 chart.setOption(option); } +// 修改echart 第一个series属性；示例: +// args: property max +// value 1000 +function changeChartOption1(property,value){ + var chart = getEchartObj(); + option.series[0][property]=value; + chart.setOption(option); +} +// 修改echart 第一个series单个/多个属性；示例: +// args: {startAngle:-45,endAngle:225} +function changeChartOption(obj){ + var chart = getEchartObj(); + var op=option.series[0]; + option.series[0]={...op,...obj}; + chart.setOption(option); +} //管道图 function initSensorPipelineChart(type){ // 基于准备好的dom，初始化echarts实例