|
|
|
@ -17,9 +17,9 @@ |
|
|
|
* cid: |
|
|
|
* 1 折线图 |
|
|
|
* 2 柱形图 |
|
|
|
* 3 仪表盘 |
|
|
|
* 3 饼状图 |
|
|
|
* 4 液位图 |
|
|
|
* 5 |
|
|
|
* 5 仪表盘 |
|
|
|
* nid=6 地图 |
|
|
|
* nid=7 临时组合框 |
|
|
|
* nid=8 状态 |
|
|
|
@ -94,7 +94,6 @@ var cfg = { |
|
|
|
return deg>=360?0:deg; |
|
|
|
|
|
|
|
}, |
|
|
|
//
|
|
|
|
elementDragCopyInfo :function(selector){ |
|
|
|
$(selector).droppable({ |
|
|
|
activeClass: "ui-state-default", |
|
|
|
@ -143,8 +142,14 @@ var cfg = { |
|
|
|
h = "180px"; |
|
|
|
break; |
|
|
|
case "5"://图表
|
|
|
|
w = "400px"; |
|
|
|
h = "200px"; |
|
|
|
|
|
|
|
if(cid==6){ |
|
|
|
w = "345px"; |
|
|
|
h = "345px"; |
|
|
|
}else{ |
|
|
|
w = "400px"; |
|
|
|
h = "200px"; |
|
|
|
} |
|
|
|
break; |
|
|
|
case "6"://地图
|
|
|
|
w = "320px"; |
|
|
|
@ -344,15 +349,20 @@ var cfg = { |
|
|
|
$(".text_toolbar_item[tag='"+id+"']").css("display","flex"); |
|
|
|
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; |
|
|
|
|
|
|
|
if(app.cid=="4"){ |
|
|
|
app.propertyModuleName="液位图设置"; |
|
|
|
}else if(app.cid=="3"){ |
|
|
|
app.propertyModuleName="仪表盘设置"; |
|
|
|
app.chartMax = obj.attr("max") ; |
|
|
|
// 增加切换复原属性 边框和形状
|
|
|
|
app.columnVal = obj.attr("border") ; |
|
|
|
app.shape = obj.attr("shape") ; |
|
|
|
app.isDisableAnimation = obj.attr("enableAnimation")==="true"?false:true; |
|
|
|
}else if(app.cid=="5"||app.cid==6){ |
|
|
|
app.propertyModuleName=app.cid==5?"仪表盘设置":"压力表设置"; |
|
|
|
app.pimax = obj.attr("pimax") ; |
|
|
|
// 增加切换复原属性 边框和形状
|
|
|
|
app.piCompany = obj.attr("picompany") ; |
|
|
|
app.splitNumber = obj.attr('splitnumber'); |
|
|
|
} |
|
|
|
|
|
|
|
break ; |
|
|
|
@ -724,10 +734,14 @@ function initTemplateCharts(obj){ |
|
|
|
if(cid==4){ |
|
|
|
initSensorLiquidChart(); |
|
|
|
return; |
|
|
|
} else if(cid==3){ |
|
|
|
} else if(cid==5){ |
|
|
|
// 仪表盘
|
|
|
|
initSensorDashChart(); |
|
|
|
return; |
|
|
|
}else if(cid==6){ |
|
|
|
// 压力表
|
|
|
|
initSensorPiezometerchart(); |
|
|
|
return; |
|
|
|
} |
|
|
|
//默认折线图
|
|
|
|
var chart = obj.find(".chartStyle"); |
|
|
|
@ -828,7 +842,8 @@ function initSensorDashChart(){ |
|
|
|
var current_edit_obj = cfg.current_edit_obj; |
|
|
|
var chart = getEchartObj(); |
|
|
|
option = { |
|
|
|
series:[{ |
|
|
|
series:[ |
|
|
|
{ |
|
|
|
name: "name", |
|
|
|
type: 'gauge', |
|
|
|
radius : "98%", |
|
|
|
@ -853,11 +868,94 @@ function initSensorDashChart(){ |
|
|
|
show: true, |
|
|
|
width: 18 |
|
|
|
}, |
|
|
|
} |
|
|
|
axisLabel:{ |
|
|
|
formatter:'{value}' |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
} ; |
|
|
|
|
|
|
|
setChartOption(chart,option) ; |
|
|
|
app.pimax = current_edit_obj.attr("pimax",100) ; |
|
|
|
current_edit_obj.attr("picompany",'') ; |
|
|
|
current_edit_obj.attr('splitnumber',10) ; |
|
|
|
} |
|
|
|
//初始化压力表
|
|
|
|
function initSensorPiezometerchart(){ |
|
|
|
var current_edit_obj = cfg.current_edit_obj; |
|
|
|
var chart = getEchartObj(); |
|
|
|
option = { |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'hour', |
|
|
|
type: 'gauge', |
|
|
|
radius : "100%", |
|
|
|
startAngle: 90, |
|
|
|
endAngle: -270, |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
splitNumber: 10, |
|
|
|
clockwise: true, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
width: 15, |
|
|
|
color: [[1, 'rgba(0,0,0,0.7)']], |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)', |
|
|
|
shadowBlur: 3 |
|
|
|
} |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)', |
|
|
|
shadowBlur: 3, |
|
|
|
shadowOffsetX: 1, |
|
|
|
shadowOffsetY: 2 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
fontSize: 24, |
|
|
|
distance: 25, |
|
|
|
formatter: function (value) { |
|
|
|
if (value === 0) { |
|
|
|
return ''; |
|
|
|
} |
|
|
|
return value + ''; |
|
|
|
} |
|
|
|
}, |
|
|
|
pointer: { |
|
|
|
show:true, |
|
|
|
icon: 'image://image/压力表3.png', |
|
|
|
width: 24, |
|
|
|
offsetCenter: [0, '8%'], |
|
|
|
length: '55%', |
|
|
|
itemStyle: { |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)', |
|
|
|
shadowBlur: 8, |
|
|
|
shadowOffsetX: 2, |
|
|
|
shadowOffsetY: 4 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
detail: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
title: { |
|
|
|
offsetCenter: [0, '30%'], |
|
|
|
backgroundColor: '#FFFFFF' |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 0 |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
] |
|
|
|
} ; |
|
|
|
chart.setOption(option,true); |
|
|
|
current_edit_obj.children(".chartStyle").attr("option",JSON.stringify(option)); |
|
|
|
current_edit_obj.attr("pimax",100) ; |
|
|
|
current_edit_obj.attr("picompany",'') ; |
|
|
|
current_edit_obj.attr('splitnumber',10) ; |
|
|
|
} |
|
|
|
//初始化传感器液位图
|
|
|
|
function initSensorLiquidChart(){ |
|
|
|
@ -931,6 +1029,7 @@ function initSensorLiquidChart(){ |
|
|
|
// });
|
|
|
|
// },2000)
|
|
|
|
ableLiquidFillAnimation(nodeId,chart); |
|
|
|
|
|
|
|
} |
|
|
|
// 跟具节点id存放定时id
|
|
|
|
var intervalIdBynodeId=new Map(); |
|
|
|
@ -960,8 +1059,9 @@ function disableLiquidFillAnimation(nodeId){ |
|
|
|
current_edit_obj.attr('enableAnimation',false); |
|
|
|
clearInterval(intervalId); |
|
|
|
} |
|
|
|
var optionByNid5cid=new Map(); |
|
|
|
// 更新Charts属性
|
|
|
|
function updateChartsOption(propertyName,value){ |
|
|
|
function updateChartsOption(propertyName,value,funcname,func){ |
|
|
|
// 当前地图容器
|
|
|
|
var current_edit_obj = cfg.current_edit_obj; |
|
|
|
// let max=current_edit_obj.attr("max");
|
|
|
|
@ -974,35 +1074,105 @@ function updateChartsOption(propertyName,value){ |
|
|
|
// 获取地图
|
|
|
|
var chart = getEchartObj(); |
|
|
|
if(propertyName){ |
|
|
|
// 更新属性
|
|
|
|
option.series[0][propertyName]=value |
|
|
|
analysisProp(option,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 analysisProp(option,propName,value){ |
|
|
|
if(propName){ |
|
|
|
const propertys=propName.split('.'); |
|
|
|
const pLen=propertys.length; |
|
|
|
let data=option.series[0]; |
|
|
|
let finally_obj=null; |
|
|
|
for (let i=0;i<pLen;i++){ |
|
|
|
const propertyName=propertys[i]; |
|
|
|
if(i==pLen-1){ |
|
|
|
finally_obj[propertyName]=value; |
|
|
|
break; |
|
|
|
} |
|
|
|
if(i==0){ |
|
|
|
finally_obj=data[propertyName]; |
|
|
|
}else{ |
|
|
|
finally_obj=finally_obj[propertyName]; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function objectToString(obj){ |
|
|
|
let typeStr=Object.prototype.toString.call(obj); |
|
|
|
if(typeStr!="[object Object]"&&typeStr!="[object Array]"){ |
|
|
|
if(typeStr=="[object String]"){ |
|
|
|
return "\""+obj.toString()+"\""; |
|
|
|
}else if(typeStr=="[object Function]"){ |
|
|
|
return obj.toString().replaceAll(/\n|\t/g,""); |
|
|
|
}else{ |
|
|
|
return obj.toString(); |
|
|
|
} |
|
|
|
}else if(typeStr=="[object Object]"){ |
|
|
|
let keys=Object.keys(obj); |
|
|
|
let keyLen=keys.length; |
|
|
|
let finallyStr="{"; |
|
|
|
for (let i=0;i<keyLen;i++){ |
|
|
|
let propertyName=keys[i]; |
|
|
|
let propertyValue=obj[propertyName]; |
|
|
|
typeStr=Object.prototype.toString.call(propertyValue); |
|
|
|
if(typeStr=="[object Object]"){ |
|
|
|
let objStr=objectToString(propertyValue); |
|
|
|
finallyStr+=(propertyName+":"+objStr); |
|
|
|
}else if(typeStr=="[object Array]"){ |
|
|
|
finallyStr+=propertyName+":"; |
|
|
|
finallyStr+=objectToString(propertyValue); |
|
|
|
}else{ |
|
|
|
finallyStr+=(propertyName+":"+objectToString(propertyValue)+""); |
|
|
|
} |
|
|
|
if(i!=keyLen-1){ |
|
|
|
finallyStr+=","; |
|
|
|
} |
|
|
|
} |
|
|
|
return finallyStr+="}"; |
|
|
|
}else if(typeStr=="[object Array]"){ |
|
|
|
let finallyStr="["; |
|
|
|
let c=0; |
|
|
|
let cMax=obj.length-1; |
|
|
|
for (const one of obj) { |
|
|
|
finallyStr+=objectToString(one); |
|
|
|
if(c!=cMax){ |
|
|
|
finallyStr+=","; |
|
|
|
} |
|
|
|
c++; |
|
|
|
} |
|
|
|
return finallyStr+="]"; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
function stringToObject(str){ |
|
|
|
if(str){ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// 修改echart 第一个series属性；示例:
|
|
|
|
// args: property max
|
|
|
|
// value 1000
|
|
|
|
function changeChartOption1(property,value){ |
|
|
|
var chart = getEchartObj(); |
|
|
|
option.series[0][property]=value; |
|
|
|
chart.setOption(option); |
|
|
|
var newOp={...option,series:[...option.series]}; |
|
|
|
newOp.series[0][property]=value; |
|
|
|
chart.setOption(newOp); |
|
|
|
} |
|
|
|
// 修改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); |
|
|
|
var newOp={...option,series:[...option.series]}; |
|
|
|
newOp.series[0]={...newOp.series[0],...obj}; |
|
|
|
chart.setOption(newOp); |
|
|
|
} |
|
|
|
//管道图
|
|
|
|
function initSensorPipelineChart(type){ |
|
|
|
@ -1302,7 +1472,7 @@ function resetNodeData(id,type){ |
|
|
|
initSensorLineChart(); |
|
|
|
} else if(cid == "2"){ //柱形图
|
|
|
|
initSensorBarChart(); |
|
|
|
} else if(cid == "3"){ //仪表盘
|
|
|
|
} else if(cid == "5"){ //仪表盘
|
|
|
|
initSensorDashChart(); |
|
|
|
} else if(cid == "4"){ //液位图
|
|
|
|
// 液位图绑定数据 不进行初始化数据
|
|
|
|
@ -1343,13 +1513,27 @@ function changeChartSize(obj){ |
|
|
|
} |
|
|
|
//第一次进入的时候重新初始化chart对象 取标签中的option属性重新初始化
|
|
|
|
function reinitChartObj(){ |
|
|
|
var chartMap = app.chartMap; |
|
|
|
$(".chartStyle").each(function(){ |
|
|
|
var id = $(this).parent().attr("id"); |
|
|
|
var parentEl= $(this).parent(); |
|
|
|
var id = parentEl.attr("id"); |
|
|
|
var nid = parentEl.attr("nid"); |
|
|
|
var cid = parentEl.attr("cid"); |
|
|
|
if(id!=null){ |
|
|
|
var json = $(this).attr("option"); |
|
|
|
var option=JSON.parse(json); |
|
|
|
if(nid=='5'&&cid=='6'){ |
|
|
|
var picompany=parentEl.attr('picompany'); |
|
|
|
if(picompany){ |
|
|
|
option.series[0].axisLabel.formatter=function (value){ |
|
|
|
if (value === 0) { |
|
|
|
return ''; |
|
|
|
} |
|
|
|
return value + picompany; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
var myChart = echarts.init($(this)[0]); |
|
|
|
myChart.setOption(JSON.parse(json),true); |
|
|
|
myChart.setOption(option,true); |
|
|
|
app.chartMap[id] = myChart; |
|
|
|
} |
|
|
|
}) |
|
|
|
|
