Browse Source

Merge remote-tracking branch 'origin/master'

master
lxc 2 years ago
parent
commit
c25579df3e
  1. 2
      lpro/src/main/webapp/lib/echarts/echarts.common.min.js
  2. 81
      lpro/src/main/webapp/page/visual/index.html
  3. 116
      lpro/src/main/webapp/page/visual/js/cfg.js

2
lpro/src/main/webapp/lib/echarts/echarts.common.min.js

File diff suppressed because one or more lines are too long

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

@ -866,6 +866,31 @@
<input class="slide_size" v-model="rotate_speed" @input="rotateSpeedChange" > <input class="slide_size" v-model="rotate_speed" @input="rotateSpeedChange" >
</div> </div>
</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 v-show="editType == 5 && cid == 4 ">
<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;">
@ -1219,6 +1244,15 @@
</div> </div>
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
// @Revised renc
// 液位图
// @修改
// 液位最大值 新增空值判断 修改初始值为1000
// 边框大小初始值修改为3,新增修改echarts属性后格式化显示lable,新增border元素属性,判断是否有边框
// @新增
// shape 容器形状 changeShape 改变选择容器事件
// isDisableAnimation 是否禁用动画 setLiquidFillAnimation 改变禁用动画相应的事件
// 默认加载 // 默认加载
layer.load(); layer.load();
var id = getQueryString('mainid') ; var id = getQueryString('mainid') ;
@ -1284,12 +1318,14 @@
tableIndex: '' , // 属性设置页面 tableIndex: '' , // 属性设置页面
visualPartList: '' , // 虚拟组件 visualPartList: '' , // 虚拟组件
imgObjList:'' , // 组件图片列表 imgObjList:'' , // 组件图片列表
chartMax: '' , // 图标最大值 chartMax: 1000 , // 图标最大值
columnVal: '0' , // 栏目值 columnVal: '0' , // 栏目值
pimax: '' , // 仪表盘最大值 pimax: '' , // 仪表盘最大值
visual_name : '' , // 组态名称 visual_name : '' , // 组态名称
addColumn: false , addColumn: false ,
visual_select_code: '' , // 组态内跳转 visual_select_code: '' , // 组态内跳转
isDisableAnimation:false, // 是否禁用动画 @新增属性
shape:"container", // 形状 @新增属性
}; };
}, },
methods:{ methods:{
@ -1778,22 +1814,63 @@
$(".edit-container").css("background","") ; $(".edit-container").css("background","") ;
// $(".edit-container").parent().css("background-position","") ; // $(".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 ; var cl = cfg.current_edit_obj ;
// 写入元素属性
cl.attr("max" , this.chartMax ) ; cl.attr("max" , this.chartMax ) ;
// @新增 更新label 显示设置
updateChartsOption();
}, },
changeChartColumn(){ changeChartColumn(){
// 增加边框 // 增加边框
var cl = cfg.current_edit_obj ; var cl = cfg.current_edit_obj ;
var max=cl.attr('max');
var nid = cl.attr("nid") ; var nid = cl.attr("nid") ;
var cid = cl.attr("cid") ; var cid = cl.attr("cid") ;
var optnj = eval("("+ cl.children(".chartStyle").attr("option") +")"); 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){ if(this.columnVal == 0){
optnj.series[0].outline.show = false ; optnj.series[0].outline.show = false ;
}else if(this.columnVal == 1){ }else if(this.columnVal == 1){
optnj.series[0].outline.show = true ; optnj.series[0].outline.show = true ;
} }
// 写入元素属性
cl.attr('border',this.columnVal );
// 更新echart数据
setChartOption( getEchartObj() ,optnj) ; setChartOption( getEchartObj() ,optnj) ;
} }
},created(){ },created(){

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

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

Loading…
Cancel
Save