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. 100
      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" >
</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(){

100
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,10 @@ var cfg = {
break;
case '5':
app.chartMax = obj.attr("max") ;
// 增加切换复原属性 边框和形状
app.columnVal = obj.attr("border") ;
app.shape = obj.attr("shape") ;
app.isDisableAnimation = obj.attr("enableAnimation")==="true"?false:true;
break ;
case '8':
case '9':
@ -457,6 +473,7 @@ var cfg = {
},
//菜单拖拽事件 给新元素添加事件
activeMenuNode(obj){
console.log('activeMenuNode');
obj.draggable({//拖动
//stop: initCharts,
//handles:" n, e, s, w, ne, se, sw, nw "
@ -823,6 +840,11 @@ 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);
current_edit_obj.attr("max",max);
var bai = 0.5;
var siz = 20;
option = {
@ -840,13 +862,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 +884,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 +925,44 @@ function initSensorLiquidChart(){
}]
});
},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){
// 基于准备好的dom,初始化echarts实例

Loading…
Cancel
Save