修改液位图功能，添加两个新的属性

lpro/src/main/webapp/page/visual/index.html

@@ -866,6 +866,31 @@
 													<input class="slide_size" v-model="rotate_speed" @input="rotateSpeedChange" >
 												</div>	 
 											</div>
+											<!--@新增 isDisableAnimation属性对应元素-->
+											<div v-show="editType == 5 && cid == 4 ">
+												<div  style="padding: 10px;">
+													<input  v-model="isDisableAnimation"  type="checkbox" @change="setLiquidFillAnimation">
+													<span style="padding-left: 10px;" class="tool-title ">
+													禁用动画
+												</span>
+												</div>
+											</div>
+											<!--@新增 shape属性对应元素-->
+											<div v-show="editType == 5 && cid == 4 ">
+												<div class="tool-title " style="padding: 10px;">容器形状</div>
+												<div style="padding-left: 10px;">
+													<select class="el-input__inner" v-model="shape"  style="width:75%;"  @change="changeShape">
+														<option value="container">默认</option>
+														<option value="rect">矩形</option>
+														<option value="roundRect">圆角矩形</option>
+														<option value="circle">圆</option>
+														<option value="triangle">三角形</option>
+														<option value="diamond">菱形</option>
+														<option value="pin">固定标记</option>
+														<option value="arrow">箭头</option>
+													</select>
+												</div>
+											</div>
 											<div v-show="editType == 5 && cid == 4 ">
 												<div class="tool-title " style="padding: 10px;">液位最大值</div>
 												<div style="padding-left: 10px;"> 
@@ -1219,6 +1244,15 @@
 		</div>
 	</body>
     <script type="text/javascript">
+		// @Revised renc
+		// 液位图
+		// 	@修改
+		// 		液位最大值 新增空值判断 修改初始值为1000
+		//      边框大小初始值修改为3，新增修改echarts属性后格式化显示lable,新增border元素属性，判断是否有边框
+		// 	@新增
+		// 		shape 容器形状 changeShape 改变选择容器事件
+		//      isDisableAnimation 是否禁用动画   setLiquidFillAnimation 改变禁用动画相应的事件
+
 		// 默认加载
     	layer.load();
     	var id = getQueryString('mainid') ;
@@ -1284,12 +1318,14 @@
 					tableIndex: '' , 		// 属性设置页面
 					visualPartList: '' ,    // 虚拟组件
 					imgObjList:'' ,        // 组件图片列表
-					chartMax: '' ,         // 图标最大值
+					chartMax: 1000 ,         // 图标最大值
 					columnVal: '0' ,	   // 栏目值
 					pimax: '' ,			   // 仪表盘最大值
 					visual_name : '' ,     // 组态名称
 					addColumn: false ,
 					visual_select_code: '' , // 组态内跳转
+					isDisableAnimation:false, // 是否禁用动画 @新增属性
+					shape:"container", // 形状 @新增属性
 				};
 			},
 			methods:{
@@ -1778,22 +1814,63 @@
        				$(".edit-container").css("background","") ;
 //        				$(".edit-container").parent().css("background-position","") ;
 				},
-				chartMaxInput(){
+				// @新增 禁用/开始水动画
+				setLiquidFillAnimation(){
+					const val=this.isDisableAnimation;
+					let cl = cfg.current_edit_obj ;
+					let nodeId=cl.attr("id");
+					if(val){
+						// 禁用动画
+						disableLiquidFillAnimation(nodeId);
+					}else{
+						// 开启动画
+						let chart = app.chartMap[nodeId];
+						ableLiquidFillAnimation(nodeId,chart);
+					}
+				},
+				// @新增 选择形状方法
+				changeShape(){
+					const val=this.shape;
+					// 更新echarts数据
+					updateChartsOption("shape",val);
+					// 将数据写入 元素节点属性
+					var cl = cfg.current_edit_obj ;
+					cl.attr("shape" , this.shape ) ;
+				},
+				chartMaxInput(e){
+					// @新增 空值判断
+					var val=e.target.value;
+					if(!val){
+						return;
+					}
 					// 输入最大值
 					var cl = cfg.current_edit_obj ;
+					// 写入元素属性
 					cl.attr("max" , this.chartMax ) ;
+					// @新增 更新label 显示设置
+					updateChartsOption();
 				},
 				changeChartColumn(){
 					// 增加边框
 					var cl = cfg.current_edit_obj ;
+					var max=cl.attr('max');
 					var nid = cl.attr("nid") ;
 					var cid = cl.attr("cid") ;
 					var optnj = eval("("+  cl.children(".chartStyle").attr("option")  +")");
+					// @新增 格式化lable 显示属性
+					optnj.series[0].label.formatter=function(param){
+						return param.seriesName + '\n'
+								+ param.name + '\n'
+								+ max +'单位/'+ param.value*max +'单位('+param.value*100+'%)';
+					};
 					if(this.columnVal == 0){
 						optnj.series[0].outline.show = false ;
 					}else if(this.columnVal == 1){
 						optnj.series[0].outline.show = true ;
 					}
+					// 写入元素属性
+					cl.attr('border',this.columnVal );
+					// 更新echart数据
 					setChartOption( getEchartObj() ,optnj) ;
 				}
 			},created(){

lpro/src/main/webapp/page/visual/js/cfg.js

@@ -29,6 +29,16 @@
  *  
  *  nid=11  设备在离线
  *
+ * @Revised renc
+ * @新增方法
+ * disableLiquidFillAnimation 禁止水变化
+ * ableLiquidFillAnimation   启用水数据变化
+ * updateChartsOption     更新ECharts属性
+ * @新增属性
+ * intervalIdBynodeId        跟具节点id存放定时id
+ * @修订方法
+ * initSensorLiquidChart      初始化传感器液位图
+ * updateEditDate			   编辑元素回显      液位图新增回显属性
  * */
 var navPage = ".edit-container";	//画布
 // 组态方法类
@@ -156,6 +166,7 @@ var cfg = {
 					h = cl.attr("h") ;					
 				}
 				//将元素放入编辑区 ,并进行初始化
+				debugger;
 				var add = cl.appendTo($(this));
 				cfg.generateNewNode(add,{"width":w,
 					"height":h,
@@ -201,6 +212,7 @@ var cfg = {
 		})
 	},
 	generateNewNode:function(obj,style){
+		console.log('generateNewNode');
 		//新节点 添加属性  更新全局变量 
 		obj.attr("id","node"+ this.zIndexT);	//用于标识唯一 
 		style['z-index'] = this.zIndexT;
@@ -329,6 +341,9 @@ var cfg = {
 				break;
 			case '5':
 				app.chartMax = obj.attr("max") ;
+				// 增加切换复原属性 边框和形状
+				app.columnVal = obj.attr("border") ;
+				app.shape = obj.attr("shape") ;
 				break ;
 			case '8':
 			case '9':
@@ -457,6 +472,7 @@ var cfg = {
 	},
 	//菜单拖拽事件 给新元素添加事件
 	activeMenuNode(obj){
+		console.log('activeMenuNode');
 		obj.draggable({//拖动
 			//stop: initCharts,
 			//handles:" n, e, s, w, ne, se, sw, nw "
@@ -823,6 +839,10 @@ function initSensorLiquidChart(){
 	var chart = getEchartObj();
 	var xn  = 500;
 	var max = 1000;
+	// @新增 添加节点属性
+	current_edit_obj.attr("enableAnimation",true);
+	current_edit_obj.attr("shape","container");
+	current_edit_obj.attr("border",0);
 	var bai = 0.5;
 	var siz = 20;
 	option = {
@@ -840,13 +860,18 @@ function initSensorLiquidChart(){
 			amplitude:8,//波浪幅度
 	        outline://外边
 	        {
-	        	show:false
+	        	show:false,
+				itemStyle: {
+					borderWidth: 3
+				}
 	        },
 	        label:{
 				formatter:function(param){
+					// @修订
+					// param.seriesName + '\n'+ param.name + '\n'+ max +'单位/'+ xn +'单位('+param.value*100+'%)';
 					return param.seriesName + '\n'
 						+ param.name + '\n'
-						+ max +'单位/'+ xn +'单位('+param.value*100+'%)';
+						+ max +'单位/'+ param.value*max +'单位('+param.value*100+'%)';
 				},
 				fontSize:siz,
 			},
@@ -857,16 +882,39 @@ function initSensorLiquidChart(){
 	        itemStyle: {
 		        opacity: 0.95,
 		        shadowBlur: 0,
-		        shadowColor: 'rgba(0, 0, 0, 0)'
+		        shadowColor: 'rgba(0, 0, 0, 0)',
 		    },
 	    }]
 	};
+
 	//使用刚指定的配置项和数据显示图表。
 	setChartOption(chart,option) ;
-	setInterval(function()
+	const nodeId=current_edit_obj.attr("id");
+	//@修订 定时任务抽象到方法中
+	// setInterval(function()
+	// {
+	// 	xn  = (Math.random().toFixed(1))*1000;
+	// 	bai = xn/max;
+	// 	chart.setOption(
+	// 		{
+	// 			series:[
+	// 				{
+	// 					data:[{name:'传感器',value:bai}]
+	// 				}]
+	// 		});
+	// },2000)
+	ableLiquidFillAnimation(nodeId,chart);
+}
+//  跟具节点id存放定时id
+var intervalIdBynodeId=new Map();
+//启用水数据变化
+function ableLiquidFillAnimation(nodeId,chart){
+	var current_edit_obj = cfg.current_edit_obj;
+	var max=current_edit_obj.attr('max');
+	let intervalId= setInterval(function()
 	{
-		xn  = (Math.random().toFixed(1))*1000;
-		bai = xn/max;
+		let xn  = (Math.random().toFixed(1))*1000;
+		let bai = xn/max;
 		chart.setOption(
 			{
 				series:[
@@ -875,8 +923,41 @@ function initSensorLiquidChart(){
 					}]
 			});
 	},2000)
+	intervalIdBynodeId.set(nodeId,intervalId);
+}
+// 禁止水变化
+function  disableLiquidFillAnimation(nodeId){
+	let intervalId=intervalIdBynodeId.get(nodeId);
+	clearInterval(intervalId);
+}
+// 更新Charts属性
+function  updateChartsOption(propertyName,value){
+	// 当前地图容器
+	var current_edit_obj = cfg.current_edit_obj;
+	let max=current_edit_obj.attr("max");
+	max=max?max:1000;
+	// 当前地图数据节点
+	const optionNode=current_edit_obj.children()[0];
+	// 获取数据属性
+	const optionStr= optionNode.getAttribute("option");
+	const option=JSON.parse(optionStr);
+	// 获取地图
+	var chart = getEchartObj();
+	if(propertyName){
+		// 更新属性
+		option.series[0][propertyName]=value
+	}
+	// 写入属性
+	optionNode.setAttribute("option",JSON.stringify(option));
+	// 设置lable显示格式
+	option.series[0].label.formatter=function(param){
+		return param.seriesName + '\n'
+			+ param.name + '\n'
+			+ max +'单位/'+ param.value*max +'单位('+param.value*100+'%)';
+	};
+	// 更新地图
+	chart.setOption(option);
 }
-
 //管道图
 function initSensorPipelineChart(type){
 	// 基于准备好的dom，初始化echarts实例