|
|
|
@ -28,7 +28,17 @@ |
|
|
|
* cid = 10 |
|
|
|
* |
|
|
|
* 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,26 +882,82 @@ 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:[ |
|
|
|
{ |
|
|
|
data:[{name:'传感器',value:bai}] |
|
|
|
}] |
|
|
|
}); |
|
|
|
},2000) |
|
|
|
series:[ |
|
|
|
{ |
|
|
|
data:[{name:'传感器',value:bai}] |
|
|
|
}] |
|
|
|
}); |
|
|
|
},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实例
|
|
|
|
|
