1750 lines
53 KiB
JavaScript
1750 lines
53 KiB
JavaScript
|
window.series = [];
|
|||
|
|
window.flag = true;
|
|||
|
|
// var xyFontColor = "#999"; //曲线XY轴默认字体颜色
|
|||
|
|
// var boderColor = "#D2D5D9"; //曲线边框默认颜色
|
|||
|
|
// if (userInfo != "") {
|
|||
|
|
//根据外层框架信息切换主题色
|
|||
|
|
var theme = localStorage.getItem('configTheme');
|
|||
|
|
xyFontColor = theme == 'dark' ? '#fff' : '#000';
|
|||
|
|
boderColor = theme == 'dark' ? '#3a548a' : '#dcdfe6';
|
|||
|
|
// }
|
|||
|
|
function getCollect() {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/report/monitorBusiness/selectTrendCollection',
|
|||
|
|
dataType: 'json',
|
|||
|
|
type: 'get',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.operateFlag) {
|
|||
|
|
for (var i = 0, str = ''; i < res.rows.length; i++) {
|
|||
|
|
var d = res.rows[i];
|
|||
|
|
var v = JSON.parse(d.SNAME);
|
|||
|
|
for (
|
|||
|
|
var j = 0, treeCode = '', sname = '';
|
|||
|
|
j < v.length;
|
|||
|
|
j++
|
|||
|
|
) {
|
|||
|
|
var temp = v[j];
|
|||
|
|
treeCode =
|
|||
|
|
treeCode + (!treeCode ? '' : ';') + temp.treeCode;
|
|||
|
|
sname = sname + (!sname ? '' : ';') + temp.sanme;
|
|||
|
|
}
|
|||
|
|
str +=
|
|||
|
|
'<li class="" data-id="' +
|
|||
|
|
d.ID +
|
|||
|
|
'" data-treeCode="' +
|
|||
|
|
treeCode +
|
|||
|
|
'" data-sanme="' +
|
|||
|
|
sname +
|
|||
|
|
'"><span >' +
|
|||
|
|
d.NAME +
|
|||
|
|
'</span><em class="collectdelete">×</em></li>';
|
|||
|
|
}
|
|||
|
|
$('#collectlist').html(str);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
getCollect();
|
|||
|
|
var propertyNode, allNodes;
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/report/emsBusiness/findStationLocationMS',
|
|||
|
|
type: 'get',
|
|||
|
|
data: {
|
|||
|
|
type: 2
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.operateFlag) {
|
|||
|
|
var obj = dataOp(res.mapData.stationLocationMS, []);
|
|||
|
|
initTree(obj.all);
|
|||
|
|
propertyNode = obj.obj;
|
|||
|
|
allNodes = res.mapData.stationLocationMS.reduce(function(o, v, i) {
|
|||
|
|
o[v.treeCode] = v;
|
|||
|
|
return o;
|
|||
|
|
}, {});
|
|||
|
|
initEcharts('chart');
|
|||
|
|
// getDevice(obj.ids.join(';'), obj.all, function (param, treeData) {
|
|||
|
|
// // initTree(obj.all);
|
|||
|
|
// getProperty(param.join(';'), treeData, function (p, t) {
|
|||
|
|
// // var z=initTree(t);
|
|||
|
|
// });
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function getDevice(param, treeData, fn) {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/report/emsBusiness/findDeviceMSByLocationCode',
|
|||
|
|
type: 'get',
|
|||
|
|
data: {
|
|||
|
|
locations: param
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.operateFlag) {
|
|||
|
|
var obj = dataOp(res.mapData.deviceMS);
|
|||
|
|
Array.prototype.push.apply(treeData, obj.all);
|
|||
|
|
fn(obj.ids, treeData);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getProperty(param, treeData, fn) {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/report/emsBusiness/findDevicePropertyMS',
|
|||
|
|
type: 'post',
|
|||
|
|
data: {
|
|||
|
|
devices: param
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.operateFlag) {
|
|||
|
|
var obj = dataOp(res.mapData.devicePropertyMS);
|
|||
|
|
Array.prototype.push.apply(treeData, obj.all);
|
|||
|
|
fn(obj.ids, treeData);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dataOp(arr) {
|
|||
|
|
var result = [],
|
|||
|
|
ids = [],
|
|||
|
|
obj = {};
|
|||
|
|
// var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
for (var i = 0; i < arr.length; i++) {
|
|||
|
|
var d = arr[i];
|
|||
|
|
ids.push(d.type == 1 ? d.id : d.code);
|
|||
|
|
if (d.type == 1) {
|
|||
|
|
d.treePCode = 'root';
|
|||
|
|
}
|
|||
|
|
var _flag = isNaN(d.type) || d.type > 3;
|
|||
|
|
var _data = {
|
|||
|
|
treeCode: d.treeCode,
|
|||
|
|
treePCode: d.treePCode,
|
|||
|
|
code: d.sname || d.code,
|
|||
|
|
sname: d.sname || d.code,
|
|||
|
|
unitCode: d.unitCode,
|
|||
|
|
unitName: d.unitName,
|
|||
|
|
oid: d.id,
|
|||
|
|
name: d.name,
|
|||
|
|
type: !d.type ? 3 : d.type,
|
|||
|
|
nocheck: !_flag,
|
|||
|
|
isParent: !_flag,
|
|||
|
|
isHidden: false
|
|||
|
|
};
|
|||
|
|
if (!_flag) {
|
|||
|
|
result.push(_data);
|
|||
|
|
}
|
|||
|
|
if (obj[d.treePCode] === undefined) {
|
|||
|
|
obj[d.treePCode] = {
|
|||
|
|
node: {},
|
|||
|
|
child: []
|
|||
|
|
};
|
|||
|
|
// obj[d.treePCode].node = tree.getNodeByParam('treeCode', d.treePCode);
|
|||
|
|
}
|
|||
|
|
// tree.addNodes(obj[d.treePCode].node,-1,_data,true);
|
|||
|
|
obj[d.treePCode].child.push(_data);
|
|||
|
|
}
|
|||
|
|
// for (var k in obj) {
|
|||
|
|
// tree.addNodes(obj[k].node, -1, obj[k].child, true);
|
|||
|
|
// }
|
|||
|
|
return {
|
|||
|
|
ids: ids,
|
|||
|
|
all: result,
|
|||
|
|
obj: obj
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var Timer;
|
|||
|
|
|
|||
|
|
function gethis() {
|
|||
|
|
if (Timer) {
|
|||
|
|
clearTimeout(Timer);
|
|||
|
|
}
|
|||
|
|
Timer = setTimeout(function() {
|
|||
|
|
getData('treeCode');
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getrtdata(node) {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
var nodes = tree.getCheckedNodes();
|
|||
|
|
var checkednodes = {};
|
|||
|
|
var code = nodes.reduce(function(o, v, i) {
|
|||
|
|
// if (v.code !== node.code||(v.code == node.code&&node.check)) {
|
|||
|
|
if (o) {
|
|||
|
|
o = o + ';';
|
|||
|
|
}
|
|||
|
|
checkednodes[v.sname] = v;
|
|||
|
|
checkednodes[v.code] = v;
|
|||
|
|
o = o + v.code;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
return o;
|
|||
|
|
}, '');
|
|||
|
|
$.fn.checkednodes = checkednodes;
|
|||
|
|
if (wsb) {
|
|||
|
|
wsb.send({
|
|||
|
|
code: code
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// var param = {};
|
|||
|
|
// param[node.type] = node.treeCode;
|
|||
|
|
// getHistoryData(param);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initTree(data) {
|
|||
|
|
var setting = {
|
|||
|
|
data: {
|
|||
|
|
simpleData: {
|
|||
|
|
enable: true,
|
|||
|
|
idKey: 'treeCode',
|
|||
|
|
pIdKey: 'treePCode',
|
|||
|
|
rootPId: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
view: {
|
|||
|
|
showLine: false,
|
|||
|
|
expandSpeed: 'fast',
|
|||
|
|
showIcon: false
|
|||
|
|
},
|
|||
|
|
check: {
|
|||
|
|
enable: true,
|
|||
|
|
chkStyle: 'checkbox'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
callback: {
|
|||
|
|
onCheck: function(event, id, node) {
|
|||
|
|
$('#linedb').removeClass('cur'); //取消对比效果
|
|||
|
|
var el = $('#collectlist').find('.cur'); //查询收藏中选中的项
|
|||
|
|
if (el[0]) {
|
|||
|
|
//如果有就清空
|
|||
|
|
el.removeClass('cur');
|
|||
|
|
Commdata = {};
|
|||
|
|
}
|
|||
|
|
var len = Object.keys(Commdata);
|
|||
|
|
if (node.checked && len.length >= 10) {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
layer.msg(langJson.itemTooMuch);
|
|||
|
|
tree.checkNode(node, false, true);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
//处理数据
|
|||
|
|
if (!node.checked) {
|
|||
|
|
//如果是取消就设置选中
|
|||
|
|
var ec = echarts.getInstanceByDom(
|
|||
|
|
document.getElementById('chart')
|
|||
|
|
);
|
|||
|
|
var name = node.name + '[' + node.treeCode + ']';
|
|||
|
|
setTimeout(function() {
|
|||
|
|
ec.dispatchAction({
|
|||
|
|
type: 'legendSelect',
|
|||
|
|
name: name
|
|||
|
|
});
|
|||
|
|
}, 16);
|
|||
|
|
delete Commdata[node.code];
|
|||
|
|
} else {
|
|||
|
|
Commdata[node.code] = [];
|
|||
|
|
}
|
|||
|
|
codeData(node);
|
|||
|
|
tabelDom(node);
|
|||
|
|
},
|
|||
|
|
onClick: function(event, id, node) {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
if (node.isParent) {
|
|||
|
|
// 有可能第一次展开时可能children还没渲染，用expandNode无法展开，需要手动点+号展开。
|
|||
|
|
if (node.children === undefined) {
|
|||
|
|
$(event.target)
|
|||
|
|
.closest('li')
|
|||
|
|
.children('span:first-child')
|
|||
|
|
.trigger('click');
|
|||
|
|
} else {
|
|||
|
|
tree.expandNode(node, true);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
tree.checkNode(node, undefined, false, true);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeExpand: function(id, node) {
|
|||
|
|
// getProperty(node.treeCode+';', [], function (p, t,obj) {
|
|||
|
|
// console.log(obj)
|
|||
|
|
// });
|
|||
|
|
if (
|
|||
|
|
node.isParent &&
|
|||
|
|
node.children &&
|
|||
|
|
node.children.length > 0
|
|||
|
|
) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
var pnode = propertyNode[node.treeCode];
|
|||
|
|
if (pnode === undefined) {
|
|||
|
|
pnode = {};
|
|||
|
|
}
|
|||
|
|
tree.addNodes(node, 0, pnode.child, true);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var zTreeObj = $.fn.zTree.init($('#device_list'), setting, data);
|
|||
|
|
//删除在顶层显示,而不是顶层的数据
|
|||
|
|
// zTreeObj.getNodes().map(function(v, i, a) {
|
|||
|
|
// if (v.type != 1) {
|
|||
|
|
// (function(v) {
|
|||
|
|
// setTimeout(function() {
|
|||
|
|
// zTreeObj.removeNode(v);
|
|||
|
|
// }, 20);
|
|||
|
|
// })(v);
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// //删除没有子级的父级节点
|
|||
|
|
// zTreeObj.getNodesByParam("isParent", true).map(function(v, i, a) {
|
|||
|
|
// if (zTreeObj.getNodesByParam("treePCode", v.treeCode).length == 0) {
|
|||
|
|
// (function(v) {
|
|||
|
|
// setTimeout(function() {
|
|||
|
|
// zTreeObj.removeNode(v);
|
|||
|
|
// }, 20);
|
|||
|
|
// })(v);
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
return zTreeObj;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function codeData(node) {
|
|||
|
|
if ($('.small.cur').attr('data-date') !== 'time') {
|
|||
|
|
gethis();
|
|||
|
|
} else {
|
|||
|
|
//处理实时数据
|
|||
|
|
|
|||
|
|
if (!node.checked) {
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
var option = ec.getOption();
|
|||
|
|
//去除echart线
|
|||
|
|
var name = node.name + '[' + node.treeCode + ']';
|
|||
|
|
var temp = [];
|
|||
|
|
option.series.map(function(v, i, a) {
|
|||
|
|
if (v.name != name) {
|
|||
|
|
temp.push(v);
|
|||
|
|
} else {
|
|||
|
|
a.splice(i, 1);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
ec.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getrtdata(node);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getXAxis(timestrap) {
|
|||
|
|
var date = !timestrap ? dayjs() : dayjs(timestrap);
|
|||
|
|
var xAxis = {
|
|||
|
|
color: xyFontColor,
|
|||
|
|
type: 'time',
|
|||
|
|
splitNumber: 10,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: boderColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: xyFontColor
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var cur = $('.small.cur').attr('data-date');
|
|||
|
|
if (cur == 'time') {
|
|||
|
|
xAxis.max = date.endOf('minutes').valueOf();
|
|||
|
|
xAxis.min = date
|
|||
|
|
.endOf('minutes')
|
|||
|
|
.subtract(10, 'minutes')
|
|||
|
|
.valueOf();
|
|||
|
|
xAxis.axisLabel.formatter = function(time, index) {
|
|||
|
|
var t = dayjs(time).format('HH:mm:ss');
|
|||
|
|
if (time === '') {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
return t;
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
var param = getSelectedDate();
|
|||
|
|
xAxis.min = param.start.valueOf();
|
|||
|
|
xAxis.max = param.end.valueOf();
|
|||
|
|
}
|
|||
|
|
return xAxis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getDefaultOption() {
|
|||
|
|
var xAxis = getXAxis();
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
title: {
|
|||
|
|
textAlign: 'left',
|
|||
|
|
textStyle: {
|
|||
|
|
color: xyFontColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
appendToBody: true,
|
|||
|
|
confine: true
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: 60,
|
|||
|
|
right: 30,
|
|||
|
|
top: 10,
|
|||
|
|
bottom: 34,
|
|||
|
|
show: true,
|
|||
|
|
containLabel: false, //是否包含坐标轴的刻度标签
|
|||
|
|
/*backgroundColor:'#ccc',*/
|
|||
|
|
borderColor: boderColor,
|
|||
|
|
borderWidth: 1
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
dataZoom: {
|
|||
|
|
type: 'inside',
|
|||
|
|
filterModel: 'none',
|
|||
|
|
start: 0,
|
|||
|
|
end: 100,
|
|||
|
|
minSpan: 10
|
|||
|
|
},
|
|||
|
|
xAxis: xAxis,
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
// min: function(value) {
|
|||
|
|
// return value.min > 0 ? 0 : value.min;
|
|||
|
|
// },
|
|||
|
|
boundaryGap: ['20%', '20%'],
|
|||
|
|
scale: true,
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: boderColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: boderColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: xyFontColor,
|
|||
|
|
formatter: '{value}'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initEcharts(id, flag) {
|
|||
|
|
var dom = document.getElementById(id);
|
|||
|
|
if (!dom) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (window.ec) {
|
|||
|
|
echarts.dispose(dom);
|
|||
|
|
}
|
|||
|
|
if (flag) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var mec = echarts.init(dom, 'halloween' /*,ops*/);
|
|||
|
|
// var op = ;
|
|||
|
|
|
|||
|
|
//点击弹出事件弹框
|
|||
|
|
// mec.on('click', function (param) {
|
|||
|
|
// var bt = dayjs(param.data[0]),
|
|||
|
|
// fm = 'YYYY-MM-DD HH:mm:ss';
|
|||
|
|
// var obj = {
|
|||
|
|
// startTime: bt.format(fm),
|
|||
|
|
// snames: param.seriesId,
|
|||
|
|
// endTime: ''
|
|||
|
|
// }
|
|||
|
|
// switch ($('.small.cur').attr('data-date')) {
|
|||
|
|
// case 'day':
|
|||
|
|
// obj.endTime = bt.add(5, 'minute').format(fm);
|
|||
|
|
// break;
|
|||
|
|
// case 'week':
|
|||
|
|
// obj.endTime = bt.add(30, 'minute').format(fm);
|
|||
|
|
// break;
|
|||
|
|
// case 'month':
|
|||
|
|
// obj.endTime = bt.add(2, 'hour').format(fm);
|
|||
|
|
// break;
|
|||
|
|
// case 'season':
|
|||
|
|
// obj.endTime = bt.add(6, 'hour').format(fm);
|
|||
|
|
// break;
|
|||
|
|
// case 'year':
|
|||
|
|
// obj.endTime = bt.add(1, 'day').format(fm);
|
|||
|
|
// break;
|
|||
|
|
// }
|
|||
|
|
// getEvent(obj);
|
|||
|
|
// $('#dialog').show();
|
|||
|
|
// });
|
|||
|
|
// var timer;
|
|||
|
|
//缩放事件
|
|||
|
|
// mec.on('datazoom', function (event) {
|
|||
|
|
// if (timer) {
|
|||
|
|
// clearTimeout(timer);
|
|||
|
|
// }
|
|||
|
|
// var start = +new Date(2019, 0, 1, 0, 0, 0, 0);
|
|||
|
|
// timer = setTimeout(function () {
|
|||
|
|
// var end = dayjs(Math.round(start + (event.batch[0].end * 1000 * 3600 * 24 * 365 / 100))).format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
// var sta = dayjs(Math.round(start + (event.batch[0].start * 1000 * 3600 * 24 * 365 / 100))).format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
// }, 300)
|
|||
|
|
// })
|
|||
|
|
mec.setOption(getDefaultOption(), true);
|
|||
|
|
window.ec = mec;
|
|||
|
|
window.onresize = function() {
|
|||
|
|
//ecahrts窗口自适应
|
|||
|
|
window.ec.resize();
|
|||
|
|
};
|
|||
|
|
// window.series = mec.getOption().series;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hisEchartSetOption(data, param) {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
if (tree) {
|
|||
|
|
var nodelist = tree.getCheckedNodes(true);
|
|||
|
|
for (var i = 0, obj = {}, nodearr = []; i < nodelist.length; i++) {
|
|||
|
|
var d = nodelist[i];
|
|||
|
|
if (d.isParent) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
obj[d.treeCode] = d;
|
|||
|
|
nodearr.push({
|
|||
|
|
code: d.treeCode,
|
|||
|
|
name: d.name
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var defaultOption=getDefaultOption();
|
|||
|
|
var series = [],
|
|||
|
|
yAxis = [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
show: true,
|
|||
|
|
position: 'left',
|
|||
|
|
scale: true,
|
|||
|
|
offset: 0,
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: boderColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: boderColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: xyFontColor,
|
|||
|
|
formatter: '{value}'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
xAxis = Object.assign({}, defaultOption.xAxis,{
|
|||
|
|
type: 'time',
|
|||
|
|
splitNumber: 10,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: boderColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: xyFontColor
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
for (var i = 0; i < nodearr.length; i++) {
|
|||
|
|
var k = nodearr[i].code;
|
|||
|
|
series.push({
|
|||
|
|
name: nodearr[i].name + '[' + k + ']',
|
|||
|
|
id: k,
|
|||
|
|
yAxisIndex: 0,
|
|||
|
|
type: 'line',
|
|||
|
|
sampling: 'average',
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 1
|
|||
|
|
},
|
|||
|
|
width: 1
|
|||
|
|
},
|
|||
|
|
symbol: 'roundRect',
|
|||
|
|
symbolSize: 1,
|
|||
|
|
showAllSymbol: false,
|
|||
|
|
data: data[k] === undefined ? [] : data[k].arr
|
|||
|
|
});
|
|||
|
|
yAxis.push({
|
|||
|
|
type: 'value',
|
|||
|
|
show: false,
|
|||
|
|
position: 'left',
|
|||
|
|
scale: true,
|
|||
|
|
offset: 0,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value}'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
var option = ec.getOption();
|
|||
|
|
ec.clear();
|
|||
|
|
var sj = '';
|
|||
|
|
option.xAxis = xAxis;
|
|||
|
|
option.yAxis = yAxis;
|
|||
|
|
option.series = series;
|
|||
|
|
// sj='事件：' + data[p.seriesName].obj[p.value[0]].eventNum;
|
|||
|
|
option.tooltip = {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
formatter: function(param) {
|
|||
|
|
for (var i = 0, str = ''; i < param.length; i++) {
|
|||
|
|
var p = param[i];
|
|||
|
|
str +=
|
|||
|
|
'<tr style="color:' +
|
|||
|
|
p.color +
|
|||
|
|
'"><td rowspan="2">' +
|
|||
|
|
p.marker +
|
|||
|
|
'</td><td colspan="2">' +
|
|||
|
|
obj[p.seriesId].name +
|
|||
|
|
'</td></tr>' +
|
|||
|
|
'<tr style="color:' +
|
|||
|
|
p.color +
|
|||
|
|
'"><td>' +
|
|||
|
|
langJson.value +
|
|||
|
|
'：' +
|
|||
|
|
p.value[1] +
|
|||
|
|
'</td><td>' +
|
|||
|
|
sj +
|
|||
|
|
'</td></tr>';
|
|||
|
|
}
|
|||
|
|
str = '<p>' + param[0].value[0] + '</p><table>' + str + '</table>';
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
ec.setOption(option, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setDefaultX(param) {
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
ec.setOption({
|
|||
|
|
xAxis: {
|
|||
|
|
max: param.startTime,
|
|||
|
|
min: param.endTime
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getData() {
|
|||
|
|
var codes = getNode('treeCode');
|
|||
|
|
if (!codes) {
|
|||
|
|
//清除ec数据
|
|||
|
|
hisEchartSetOption();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var param = getSelectedDate();
|
|||
|
|
if(isNaN(param.interval)){
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if (Object.keys(codes).length == 0) {
|
|||
|
|
param.snames = '';
|
|||
|
|
} else {
|
|||
|
|
param.snames = JSON.stringify(codes);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//设置默认X轴
|
|||
|
|
// setDefaultX(param)
|
|||
|
|
layer.load(1, {
|
|||
|
|
shade: [0.1, '#000']
|
|||
|
|
});
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/report/monitorBusiness/queryTrendDataFromInfuxdb',
|
|||
|
|
type: 'post',
|
|||
|
|
data: {
|
|||
|
|
startTime: param.startTime,
|
|||
|
|
endTime: param.endTime,
|
|||
|
|
interval: param.interval,
|
|||
|
|
snames: param.snames
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
curData = res.rows || [];
|
|||
|
|
layer.closeAll();
|
|||
|
|
if (res.operateFlag == false) {
|
|||
|
|
layer.msg(langJson.err);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
// var _temp_ = [1, 10, 100];
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
for (var i = 0, obj = {}, _obj = {}; i < res.rows.length; i++) {
|
|||
|
|
var d = res.rows[i];
|
|||
|
|
var node = tree.getNodeByParam('treeCode', d.sname);
|
|||
|
|
d.dateTime = d.dateTime.replace(/[\-]/g, '/');
|
|||
|
|
if (obj[d.sname] === undefined) {
|
|||
|
|
obj[d.sname] = {
|
|||
|
|
arr: [],
|
|||
|
|
obj: {}
|
|||
|
|
// _random_: _temp_[Math.round(Math.random() * 10) % 3]
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
if (_obj[node.sname] === undefined) {
|
|||
|
|
_obj[node.sname] = {
|
|||
|
|
arr: [],
|
|||
|
|
obj: {}
|
|||
|
|
// _random_: _temp_[Math.round(Math.random() * 10) % 3]
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
if (isNaN(d.data) || d.data === '' || d.data === null) {
|
|||
|
|
//实际取值
|
|||
|
|
d.data = '';
|
|||
|
|
//模拟数据
|
|||
|
|
// var numb = obj[d.sname]._random_;
|
|||
|
|
// d.data = Math.round(Math.random() * (numb * 100 - numb * 10) + (numb * 10));
|
|||
|
|
} else {
|
|||
|
|
d.data = Number(d.data).toFixed(2);
|
|||
|
|
}
|
|||
|
|
obj[d.sname].arr.push([d.dateTime, d.data]);
|
|||
|
|
obj[d.sname].obj[d.dateTime] = d;
|
|||
|
|
_obj[node.sname].arr.push([d.dateTime, d.data]);
|
|||
|
|
_obj[node.sname].obj[d.dateTime] = d;
|
|||
|
|
}
|
|||
|
|
//设置曲线
|
|||
|
|
try {
|
|||
|
|
hisEchartSetOption(obj, param);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//设置表格的值
|
|||
|
|
try {
|
|||
|
|
initTable(_obj);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置
|
|||
|
|
try {
|
|||
|
|
$('#tbody')
|
|||
|
|
.find('tbody')
|
|||
|
|
.html(makeTbody(['dateTime', 'sname', 'data']));
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
complete: function() {
|
|||
|
|
layer.closeAll();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function tabelDom(node) {
|
|||
|
|
var color = [
|
|||
|
|
'#ff7200',
|
|||
|
|
'#fff600',
|
|||
|
|
'#46d500',
|
|||
|
|
'#00ffba',
|
|||
|
|
'#00adf6',
|
|||
|
|
'#00f6ff',
|
|||
|
|
'#cc00ff',
|
|||
|
|
'#ffa200',
|
|||
|
|
'#35dc8b',
|
|||
|
|
'#006cff',
|
|||
|
|
'#c23531',
|
|||
|
|
'#2f4554',
|
|||
|
|
'#61a0a8',
|
|||
|
|
'#d48265',
|
|||
|
|
'#91c7ae',
|
|||
|
|
'#749f83',
|
|||
|
|
'#ca8822',
|
|||
|
|
'#bda29a',
|
|||
|
|
'#c4ccd3'
|
|||
|
|
];
|
|||
|
|
// if ($('.table').find('table')[0] && node && node.checked) {
|
|||
|
|
// var c = $('.table').find('tr').length - 1;
|
|||
|
|
// $('.table').find('table').append('<tr><td><label><input type="checkbox" name="t_row" value="' + node.treeCode + '" checked>' + node.name + '</label></td><td><i class="show-color" style="background-color:' + color[c % color.length] + '"></i></td>' +
|
|||
|
|
// '<td></td><td></td><td></td><td>' + node.unitName + '</td></tr>');
|
|||
|
|
// return false;
|
|||
|
|
// }
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
if (tree) {
|
|||
|
|
var nodelist = tree.getCheckedNodes(true);
|
|||
|
|
for (var i = 0, o = {}, nodearr = []; i < nodelist.length; i++) {
|
|||
|
|
var d = nodelist[i];
|
|||
|
|
if (d.isParent) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
o[d.code] = d;
|
|||
|
|
nodearr.push(d.code);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var tdlist = [
|
|||
|
|
'<tr><th>' +
|
|||
|
|
langJson.name +
|
|||
|
|
'</th><th>' +
|
|||
|
|
langJson.color +
|
|||
|
|
'</th><th>' +
|
|||
|
|
langJson.max +
|
|||
|
|
'</th><th>' +
|
|||
|
|
langJson.min +
|
|||
|
|
'</th><th>' +
|
|||
|
|
langJson.average +
|
|||
|
|
'</th><th>' +
|
|||
|
|
langJson.unit +
|
|||
|
|
'</th></tr>'
|
|||
|
|
];
|
|||
|
|
for (var l = 0; l < nodearr.length; l++) {
|
|||
|
|
var k = nodearr[l];
|
|||
|
|
str =
|
|||
|
|
'<tr><td><label><input type="checkbox" name="t_row" value="' +
|
|||
|
|
k +
|
|||
|
|
'" checked>' +
|
|||
|
|
o[k].name +
|
|||
|
|
'</label></td><td><i class="show-color" style="background-color:' +
|
|||
|
|
color[l % color.length] +
|
|||
|
|
'"></i></td>' +
|
|||
|
|
'<td></td><td></td><td></td><td>' +
|
|||
|
|
o[k].unitName +
|
|||
|
|
'</td></tr>';
|
|||
|
|
tdlist.push(str);
|
|||
|
|
}
|
|||
|
|
$('.table').html('<table>' + tdlist.join('') + '</table>');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initTable(obj) {
|
|||
|
|
var tdlist = {};
|
|||
|
|
for (var l in obj) {
|
|||
|
|
var k = obj[l];
|
|||
|
|
for (
|
|||
|
|
var i = 0, max = '', min = '', sum = 0;
|
|||
|
|
i < obj[l].arr.length;
|
|||
|
|
i++
|
|||
|
|
) {
|
|||
|
|
var _d = obj[l].arr[i];
|
|||
|
|
if (_d instanceof Array) {
|
|||
|
|
_d = _d[1];
|
|||
|
|
} else {
|
|||
|
|
_d = _d.value[1];
|
|||
|
|
}
|
|||
|
|
if (isNaN(_d) || _d === '' || _d === null) {
|
|||
|
|
continue;
|
|||
|
|
} else {
|
|||
|
|
_d = Number(_d);
|
|||
|
|
}
|
|||
|
|
if (max === '' || _d > max) {
|
|||
|
|
max = _d;
|
|||
|
|
}
|
|||
|
|
if (min === '' || _d < min) {
|
|||
|
|
min = _d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
sum = sum + _d;
|
|||
|
|
}
|
|||
|
|
max = isNaN(max) || max === null ? '' : max;
|
|||
|
|
min = isNaN(min) || min === null ? '' : min;
|
|||
|
|
tdlist[l] = {
|
|||
|
|
k: l,
|
|||
|
|
max: max,
|
|||
|
|
min: min,
|
|||
|
|
avg: Number((sum / obj[l].arr.length).toFixed(2))
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
var key;
|
|||
|
|
$('.table td').each(function(i, e) {
|
|||
|
|
// var pindex=$(e).parent().index();
|
|||
|
|
var sindex = $(e).index();
|
|||
|
|
if (sindex === 0) {
|
|||
|
|
key = $(e)
|
|||
|
|
.find('input')
|
|||
|
|
.val();
|
|||
|
|
} else if (sindex === 2) {
|
|||
|
|
$(e).html(tdlist[key] ? tdlist[key].max : '');
|
|||
|
|
} else if (sindex === 3) {
|
|||
|
|
$(e).html(tdlist[key] ? tdlist[key].min : '');
|
|||
|
|
} else if (sindex === 4) {
|
|||
|
|
$(e).html(tdlist[key] ? tdlist[key].avg : '');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getSelectedDate() {
|
|||
|
|
var seasonList = [
|
|||
|
|
{
|
|||
|
|
name: '第一季度',
|
|||
|
|
start: '01-01',
|
|||
|
|
end: '03-31'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '第二季度',
|
|||
|
|
start: '04-01',
|
|||
|
|
end: '06-30'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '第三季度',
|
|||
|
|
start: '07-01',
|
|||
|
|
end: '09-30'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '第四季度',
|
|||
|
|
start: '10-01',
|
|||
|
|
end: '12-31'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
var param = {
|
|||
|
|
curtime: $('#datetime').val(),
|
|||
|
|
interval: 5 // / 60
|
|||
|
|
};
|
|||
|
|
if (!param.curtime) {
|
|||
|
|
param.curtime = dayjs().format('YYYY-MM-DD');
|
|||
|
|
}
|
|||
|
|
//interval=5/60,30/60,2,6,24
|
|||
|
|
var cls = $('.small.cur').attr('data-date');
|
|||
|
|
var _str = ' 00:00:00';
|
|||
|
|
if (cls == 'week') {
|
|||
|
|
param.interval = 30 // 60;
|
|||
|
|
param.startTime = dayjs(param.curtime + _str)
|
|||
|
|
.startOf('week')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.endTime = dayjs(param.curtime + _str)
|
|||
|
|
.endOf('week')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.start = dayjs(param.curtime + _str).startOf('week');
|
|||
|
|
param.end = param.start.add(1, 'week');
|
|||
|
|
} else if (cls == 'month') {
|
|||
|
|
param.interval = 2*60;
|
|||
|
|
param.startTime = dayjs(param.curtime + _str)
|
|||
|
|
.startOf('month')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.endTime = dayjs(param.curtime + _str)
|
|||
|
|
.endOf('month')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.start = dayjs(param.curtime + _str).startOf('month');
|
|||
|
|
param.end = param.start.add(1, 'month');
|
|||
|
|
} else if (cls == 'season') {
|
|||
|
|
param.interval = 6*60;
|
|||
|
|
var seaYear = dayjs(param.curtime + _str).year();
|
|||
|
|
for (var i = 0; i < seasonList.length; i++) {
|
|||
|
|
var v = seasonList[i];
|
|||
|
|
if (
|
|||
|
|
!dayjs(param.curtime + _str).isAfter(
|
|||
|
|
dayjs(seaYear + '-' + v.end + _str)
|
|||
|
|
)
|
|||
|
|
) {
|
|||
|
|
param.startTime = dayjs(seaYear + '-' + v.start + _str)
|
|||
|
|
.startOf('month')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.endTime = dayjs(seaYear + '-' + v.end + _str)
|
|||
|
|
.endOf('month')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.start = dayjs(seaYear + '-' + v.start + _str).startOf(
|
|||
|
|
'month'
|
|||
|
|
);
|
|||
|
|
param.end = param.start.add(3, 'month');
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else if (cls == 'year') {
|
|||
|
|
param.interval = 24*60;
|
|||
|
|
param.startTime = dayjs(param.curtime + _str)
|
|||
|
|
.startOf('year')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.endTime = dayjs(param.curtime + _str)
|
|||
|
|
.endOf('year')
|
|||
|
|
.format('YYYY-MM-DD');
|
|||
|
|
param.start = dayjs(param.curtime + _str).startOf('year');
|
|||
|
|
param.end = param.start.add(1, 'year');
|
|||
|
|
} else if (cls == 'day') {
|
|||
|
|
param.interval = 5 // 60;
|
|||
|
|
param.startTime = dayjs(param.curtime + _str).format('YYYY-MM-DD');
|
|||
|
|
param.endTime = dayjs(param.curtime + _str).format('YYYY-MM-DD');
|
|||
|
|
param.start = dayjs(param.curtime + _str);
|
|||
|
|
param.end = dayjs(param.curtime + _str).add(1, 'day');
|
|||
|
|
} else if (cls == 'defined') {
|
|||
|
|
var start = $('#startDate').val();
|
|||
|
|
var end = $('#endDate').val();
|
|||
|
|
param.interval = $('#definedInterval').val();
|
|||
|
|
param.startTime = dayjs(start + _str).format('YYYY-MM-DD');
|
|||
|
|
param.endTime = dayjs(end + _str).format('YYYY-MM-DD');
|
|||
|
|
param.start = dayjs(start + _str);
|
|||
|
|
param.end = dayjs(end + _str).add(1, 'day');
|
|||
|
|
}
|
|||
|
|
return param;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getNode(key) {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
var codes = {};
|
|||
|
|
if (tree) {
|
|||
|
|
var nodelist = tree.getCheckedNodes(true);
|
|||
|
|
nodelist.length == 0 && (codes = false);
|
|||
|
|
for (var i = 0; i < nodelist.length; i++) {
|
|||
|
|
var d = nodelist[i];
|
|||
|
|
if (d.isParent) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
if (!codes[d.type]) {
|
|||
|
|
codes[d.type] = [];
|
|||
|
|
}
|
|||
|
|
codes[d.type].push(d[key]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return codes;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getEvent(obj) {
|
|||
|
|
// obj.snames='qy1.dlq_a04;qy1.glkg_a04_1;qy1.jgxh_a01';
|
|||
|
|
// obj.startTime='2019-01-01 01:40:00';
|
|||
|
|
// obj.endTime='2019-01-19 01:40:00';
|
|||
|
|
$('#page').initPage({
|
|||
|
|
ajax: {
|
|||
|
|
url: '/report/monitorBusiness/queryEventMsFromInfuxdb',
|
|||
|
|
type: 'post',
|
|||
|
|
data: obj,
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
var head = [
|
|||
|
|
{
|
|||
|
|
name: langJson.time,
|
|||
|
|
key: 'TIME_STAMP'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: langJson.priority,
|
|||
|
|
key: 'PRIORITY_NAME'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: langJson.location,
|
|||
|
|
key: 'LOCATION_ID_NAME'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: langJson.almStatus,
|
|||
|
|
key: 'ALM_STATUS_NAME'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: langJson.devType,
|
|||
|
|
key: 'DEV_TYPE_NAME'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: langJson.content,
|
|||
|
|
key: 'CONTENT'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
createTable(head, res.rows);
|
|||
|
|
$('#dialog').show();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
resKey: {
|
|||
|
|
pageSize: 'rows',
|
|||
|
|
curPage: 'page',
|
|||
|
|
sumPage: 'records'
|
|||
|
|
},
|
|||
|
|
pageSize: 1000,
|
|||
|
|
curPage: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createTable(head, rows) {
|
|||
|
|
for (var i = 0, hstr = '<th></th>', barr = []; i < head.length; i++) {
|
|||
|
|
var _h = head[i];
|
|||
|
|
hstr += '<th>' + _h.name + '</th>';
|
|||
|
|
for (var r = 0; r < rows.length; r++) {
|
|||
|
|
var _d = rows[r];
|
|||
|
|
if (i === 0) {
|
|||
|
|
barr[r] = '<td></td>';
|
|||
|
|
}
|
|||
|
|
barr[r] += '<td>' + _d[_h.key] + '</td>';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var table = $('#table');
|
|||
|
|
table.find('thead').html('<tr>' + hstr + '</tr>');
|
|||
|
|
table.find('tbody').html('<tr>' + barr.join('</tr><tr>') + '</tr>');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function makeTbody(keys) {
|
|||
|
|
var exception = [];
|
|||
|
|
$('.table')
|
|||
|
|
.find('input[type=checkbox]:not(:checked)')
|
|||
|
|
.each(function(i, e) {
|
|||
|
|
exception.push($(e).val());
|
|||
|
|
});
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list').getCheckedNodes(true);
|
|||
|
|
var names = tree.reduce(function(o, v, i) {
|
|||
|
|
o[v.sname] = v.name;
|
|||
|
|
return o;
|
|||
|
|
}, {});
|
|||
|
|
return curData.reduce(function(o, v, i) {
|
|||
|
|
if (!(exception.length > 0 && exception.indexOf(v.sname) !== -1)) {
|
|||
|
|
o +=
|
|||
|
|
'<tr>' +
|
|||
|
|
keys.reduce(function(r, c) {
|
|||
|
|
if (c == 'sname') {
|
|||
|
|
r += '<td>' + names[v[c]] + '</td>';
|
|||
|
|
} else {
|
|||
|
|
r += '<td>' + v[c] + '</td>';
|
|||
|
|
}
|
|||
|
|
return r;
|
|||
|
|
}, '') +
|
|||
|
|
'</tr>';
|
|||
|
|
}
|
|||
|
|
return o;
|
|||
|
|
}, '');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function definedQuery(){
|
|||
|
|
$('.small.cur').trigger('click');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(function() {
|
|||
|
|
$('#datetime').val(dayjs().format('YYYY-MM-DD'));
|
|||
|
|
$('#endDate').val(dayjs().format('YYYY-MM-DD'));
|
|||
|
|
$('#startDate').val(
|
|||
|
|
dayjs()
|
|||
|
|
.subtract(1, 'day')
|
|||
|
|
.format('YYYY-MM-DD')
|
|||
|
|
);
|
|||
|
|
function initInterval(){
|
|||
|
|
var options={
|
|||
|
|
5:{
|
|||
|
|
interval:5,
|
|||
|
|
label:'五分钟',
|
|||
|
|
diffDays:1,// 间隔对应的最大相差天数
|
|||
|
|
},
|
|||
|
|
10:{
|
|||
|
|
interval:10,
|
|||
|
|
label:'十分钟',
|
|||
|
|
diffDays:3,
|
|||
|
|
},
|
|||
|
|
30:{
|
|||
|
|
interval:30,
|
|||
|
|
label:'三十分钟',
|
|||
|
|
diffDays:7,
|
|||
|
|
},
|
|||
|
|
60:{
|
|||
|
|
interval:60,
|
|||
|
|
label:'一小时',
|
|||
|
|
diffDays:15,
|
|||
|
|
},
|
|||
|
|
120:{
|
|||
|
|
interval:120,
|
|||
|
|
label:'两小时',
|
|||
|
|
diffDays:31,
|
|||
|
|
},
|
|||
|
|
360:{
|
|||
|
|
interval:360,
|
|||
|
|
label:'六小时',
|
|||
|
|
diffDays:92,
|
|||
|
|
},
|
|||
|
|
480:{
|
|||
|
|
interval:480,
|
|||
|
|
label:'八小时',
|
|||
|
|
diffDays:122,
|
|||
|
|
},
|
|||
|
|
720:{
|
|||
|
|
interval:720,
|
|||
|
|
label:'十二小时',
|
|||
|
|
diffDays:185,
|
|||
|
|
},
|
|||
|
|
1440:{
|
|||
|
|
interval:1440,
|
|||
|
|
label:'一天',
|
|||
|
|
diffDays:366,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
var intervalList=Object.keys(options).sort(function(a,b){return b-a});
|
|||
|
|
|
|||
|
|
var start = $('#startDate').val();
|
|||
|
|
var end = $('#endDate').val();
|
|||
|
|
var diffDays=Math.abs(dayjs(end).diff(dayjs(start),'day'));
|
|||
|
|
// 开始时间大于结束时间
|
|||
|
|
if (dayjs(start).isAfter(dayjs(end))) {
|
|||
|
|
layer.msg('开始时间大于结束时间');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
// 开始时间和结束时间相差1年以上
|
|||
|
|
if(diffDays>options[intervalList[0]].diffDays){
|
|||
|
|
layer.msg('开始时间和结束时间相差1年以上');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var optionsStr='';
|
|||
|
|
for (var i = 0; i < intervalList.length; i++) {
|
|||
|
|
var intv = options[intervalList[i]];
|
|||
|
|
if(diffDays<=intv.diffDays){
|
|||
|
|
var optiv=options[intervalList[i+1]]
|
|||
|
|
var selected=optiv&&diffDays>optiv.diffDays;
|
|||
|
|
optionsStr='<option value="'+intv.interval+'" data-diff="'+intv.diffDays+'" '+(selected?"selected":"")+'>'+intv.label+'</option>'+optionsStr
|
|||
|
|
}else{
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$('.defined-interval').html(optionsStr);
|
|||
|
|
}
|
|||
|
|
$('.Wdate').on('click', function() {
|
|||
|
|
var option = {
|
|||
|
|
el: this,
|
|||
|
|
isShowClear: false,
|
|||
|
|
firstDayOfWeek: 1,
|
|||
|
|
dateFmt: 'yyyy-MM-dd',
|
|||
|
|
onpicked: function(date) {
|
|||
|
|
initInterval();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
WdatePicker(option);
|
|||
|
|
});
|
|||
|
|
initInterval();
|
|||
|
|
$('.show-chart').on('click', function() {
|
|||
|
|
$(this).hide(200);
|
|||
|
|
$('#chart_table').hide(200);
|
|||
|
|
$('.show-table').show(200);
|
|||
|
|
$('#chart').show(200);
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
$('.show-table').on('click', function() {
|
|||
|
|
$(this).hide(200);
|
|||
|
|
$('#chart').hide(200);
|
|||
|
|
$('.show-chart').show(200);
|
|||
|
|
$('#chart_table').show(200);
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
$('#collectlist').on('click', 'em.collectdelete', function() {
|
|||
|
|
var el = $(this);
|
|||
|
|
var id = el.parent().attr('data-id');
|
|||
|
|
layer.confirm(
|
|||
|
|
langJson.deleteFavorite,
|
|||
|
|
{
|
|||
|
|
title: langJson.delete,
|
|||
|
|
skin: 'colldialog',
|
|||
|
|
btn: [langJson.confirm, langJson.cancel]
|
|||
|
|
},
|
|||
|
|
function() {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/report/monitorBusiness/deleteTrendCollectionList',
|
|||
|
|
data: {
|
|||
|
|
ids: id
|
|||
|
|
},
|
|||
|
|
type: 'get',
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.operateFlag) {
|
|||
|
|
layer.closeAll();
|
|||
|
|
layer.msg(langJson.delSuccess);
|
|||
|
|
el.parent().remove();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function addNodeFromParent(treeCode) {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
var node = null,
|
|||
|
|
code = [treeCode];
|
|||
|
|
while (node === null) {
|
|||
|
|
var last = code[code.length - 1];
|
|||
|
|
node = tree.getNodeByParam('treeCode', last);
|
|||
|
|
if (node === null) {
|
|||
|
|
code.push(allNodes[last].treePCode);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (var i = code.length - 1; i > 0; i--) {
|
|||
|
|
tree.addNodes(node, 0, propertyNode[code[i]].child, true);
|
|||
|
|
node = tree.getNodeByParam('treeCode', code[i]);
|
|||
|
|
}
|
|||
|
|
if (treeCode === node.treeCode) {
|
|||
|
|
return node;
|
|||
|
|
} else {
|
|||
|
|
return tree.getNodeByParam('treeCode', treeCode);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$('#collectlist').on('dblclick', 'li', function() {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
tree.checkAllNodes(false);
|
|||
|
|
$('.table table').remove();
|
|||
|
|
// initEcharts("chart");
|
|||
|
|
Commdata = {};
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
var option = ec.getOption();
|
|||
|
|
option.series = [];
|
|||
|
|
ec.setOption(option, true);
|
|||
|
|
var treeCode = $(this)
|
|||
|
|
.attr('data-treeCode')
|
|||
|
|
.split(';');
|
|||
|
|
for (var i = 0; i < treeCode.length; i++) {
|
|||
|
|
var node = tree.getNodeByParam('treeCode', treeCode[i]);
|
|||
|
|
if (node === null) {
|
|||
|
|
node = addNodeFromParent(treeCode[i]);
|
|||
|
|
}
|
|||
|
|
tree.checkNode(node, true, true, true);
|
|||
|
|
var _p = node.getParentNode();
|
|||
|
|
while (_p) {
|
|||
|
|
tree.expandNode(_p, true);
|
|||
|
|
_p = _p.getParentNode();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$(this)
|
|||
|
|
.parent()
|
|||
|
|
.find('.cur')
|
|||
|
|
.removeClass('cur');
|
|||
|
|
$(this).addClass('cur');
|
|||
|
|
});
|
|||
|
|
$('#collect').on('click', function() {
|
|||
|
|
var checked = [];
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
$('input[name=t_row]:checked').each(function(i, e) {
|
|||
|
|
var v = $(e).val();
|
|||
|
|
|
|||
|
|
var node = tree.getNodeByParam('code', v);
|
|||
|
|
checked.push({
|
|||
|
|
treeCode: node.treeCode,
|
|||
|
|
sname: node.sname
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
$('input[name=collectname]').val('');
|
|||
|
|
if (checked.length == 0) {
|
|||
|
|
layer.msg(langJson.noSelect);
|
|||
|
|
} else {
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: langJson.collection,
|
|||
|
|
skin: 'colldialog',
|
|||
|
|
area: ['326px', '230px'],
|
|||
|
|
btn: [langJson.submit, langJson.cancel],
|
|||
|
|
content: $('#collectdialog'),
|
|||
|
|
yes: function() {
|
|||
|
|
var name = $('input[name=collectname]').val();
|
|||
|
|
if (!name) {
|
|||
|
|
layer.msg(langJson.collectName);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!name.match(/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/)) {
|
|||
|
|
layer.msg(langJson.hasSpecial);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var flag = true;
|
|||
|
|
$('#collectlist li').each(function(i, e) {
|
|||
|
|
var str = $(e)
|
|||
|
|
.find('span')
|
|||
|
|
.html();
|
|||
|
|
if (str == name) {
|
|||
|
|
flag = false;
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (!flag) {
|
|||
|
|
layer.msg(langJson.hasRepeat);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/report/monitorBusiness/inserTrendCollection',
|
|||
|
|
data: {
|
|||
|
|
name: name,
|
|||
|
|
snames: JSON.stringify(checked)
|
|||
|
|
},
|
|||
|
|
type: 'post',
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.operateFlag) {
|
|||
|
|
layer.closeAll();
|
|||
|
|
layer.msg(langJson.collectSuc);
|
|||
|
|
getCollect();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('#changecollect').on('click', 'a.btn', function() {
|
|||
|
|
if ($(this).hasClass('collectlist')) {
|
|||
|
|
$('#device_list').hide();
|
|||
|
|
$('#device_list')
|
|||
|
|
.prev()
|
|||
|
|
.hide();
|
|||
|
|
$('#collectlist').show();
|
|||
|
|
} else {
|
|||
|
|
$('#collectlist').hide();
|
|||
|
|
$('#device_list').show();
|
|||
|
|
$('#device_list')
|
|||
|
|
.prev()
|
|||
|
|
.show();
|
|||
|
|
}
|
|||
|
|
$(this)
|
|||
|
|
.parent()
|
|||
|
|
.find('.cur')
|
|||
|
|
.removeClass('cur');
|
|||
|
|
$(this).addClass('cur');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#treeFilter').on('click', function() {
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
var metaChar = '[\\[\\]\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]';
|
|||
|
|
var rexMeta = new RegExp(metaChar, 'gi');
|
|||
|
|
var nodelist = tree.getNodes();
|
|||
|
|
var txt = $('#filterText').val() || '';
|
|||
|
|
if (txt === '') {
|
|||
|
|
var nodes = tree.getNodesByParam('isHidden', true);
|
|||
|
|
tree.showNodes(nodes);
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
var nodes = tree.getNodesByParam('isHidden', false);
|
|||
|
|
tree.hideNodes(nodes);
|
|||
|
|
}
|
|||
|
|
txt = txt.replace(rexMeta, function(matchStr) {
|
|||
|
|
return '\\' + matchStr;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var data = {
|
|||
|
|
nodelist: nodelist,
|
|||
|
|
result: []
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function fliterNodes(nodes, str) {
|
|||
|
|
var nodelist = nodes.nodelist;
|
|||
|
|
var result = [];
|
|||
|
|
var list = [];
|
|||
|
|
if (nodelist instanceof Array && nodelist.length) {
|
|||
|
|
for (var i = 0; i < nodelist.length; i++) {
|
|||
|
|
var node = nodelist[i];
|
|||
|
|
if (node.name.indexOf(str) !== -1) {
|
|||
|
|
result.push(node);
|
|||
|
|
} else if (node.children && node.children.length) {
|
|||
|
|
list = list.concat(node.children);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return fliterNodes(
|
|||
|
|
{
|
|||
|
|
nodelist: list,
|
|||
|
|
result: result.concat(nodes.result)
|
|||
|
|
},
|
|||
|
|
str
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return nodes;
|
|||
|
|
}
|
|||
|
|
var showPids = {}; //记录处理过的treeCode,减少消耗
|
|||
|
|
function getPNode(node) {
|
|||
|
|
var result = [];
|
|||
|
|
while (node !== null && node.treeCode) {
|
|||
|
|
if (showPids[node.treeCode] === undefined) {
|
|||
|
|
result.push(node);
|
|||
|
|
showPids[node.treeCode] = 1;
|
|||
|
|
node = node.getParentNode();
|
|||
|
|
} else {
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// if(result.length>0&&showPids[node.treeCode]===undefined){result.push(node)}
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
var result = fliterNodes(data, txt);
|
|||
|
|
var needShowNodes = [];
|
|||
|
|
for (var i = 0; i < result.result.length; i++) {
|
|||
|
|
var node = result.result[i];
|
|||
|
|
// 获取父节点
|
|||
|
|
var pnode = getPNode(node);
|
|||
|
|
//获取子节点
|
|||
|
|
var child = tree.getNodesByFilter(
|
|||
|
|
function(n) {
|
|||
|
|
return true;
|
|||
|
|
},
|
|||
|
|
false,
|
|||
|
|
node
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
needShowNodes = needShowNodes.concat(pnode, child);
|
|||
|
|
}
|
|||
|
|
tree.showNodes(needShowNodes);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.table').on('click', 'input[type=checkbox]', function() {
|
|||
|
|
var flag = $(this).is(':checked');
|
|||
|
|
var val = $(this).val();
|
|||
|
|
var text = $(this)
|
|||
|
|
.parent()
|
|||
|
|
.text();
|
|||
|
|
// var name = text + "[" + val + "]";
|
|||
|
|
var name = text;
|
|||
|
|
//判断是不是实时
|
|||
|
|
if ($('button.small.cur').attr('data-date') !== 'time') {
|
|||
|
|
//截掉前面三个.的编码
|
|||
|
|
val = val
|
|||
|
|
.split('.')
|
|||
|
|
.splice(3)
|
|||
|
|
.join('.')
|
|||
|
|
.replace('.value', '');
|
|||
|
|
}
|
|||
|
|
name += '[' + val + ']';
|
|||
|
|
//$("#tbody")
|
|||
|
|
// .find("tbody")
|
|||
|
|
// .html(makeTbody(["dateTime", "sname", "data"]));
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
if (flag) {
|
|||
|
|
ec.dispatchAction({
|
|||
|
|
type: 'legendSelect',
|
|||
|
|
name: name
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
ec.dispatchAction({
|
|||
|
|
type: 'legendUnSelect',
|
|||
|
|
name: name
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('#btn_option').on('click', 'button', function() {
|
|||
|
|
var keys = Object.keys(Commdata);
|
|||
|
|
if (keys.length == 0) {
|
|||
|
|
layer.msg(langJson.nullItem);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var cls = $(this).hasClass('prev-item');
|
|||
|
|
var val = $('#datetime').val();
|
|||
|
|
var format = $('.small.cur').attr('data-date');
|
|||
|
|
if (format === 'time') {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var m = dayjs(val).month();
|
|||
|
|
if (m <= 2) {
|
|||
|
|
m = 2;
|
|||
|
|
} else if (m <= 5) {
|
|||
|
|
m = 5;
|
|||
|
|
} else if (m <= 8) {
|
|||
|
|
m = 8;
|
|||
|
|
} else if (m <= 11) {
|
|||
|
|
m = 11;
|
|||
|
|
}
|
|||
|
|
if (cls) {
|
|||
|
|
if (format === 'season') {
|
|||
|
|
$('#datetime').val(
|
|||
|
|
dayjs(val)
|
|||
|
|
.month(m)
|
|||
|
|
.subtract(3, 'month')
|
|||
|
|
.format('YYYY-MM-DD')
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
$('#datetime').val(
|
|||
|
|
dayjs(val)
|
|||
|
|
.subtract(1, format)
|
|||
|
|
.format('YYYY-MM-DD')
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (format === 'season') {
|
|||
|
|
$('#datetime').val(
|
|||
|
|
dayjs(val)
|
|||
|
|
.month(m)
|
|||
|
|
.add(3, 'month')
|
|||
|
|
.format('YYYY-MM-DD')
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
$('#datetime').val(
|
|||
|
|
dayjs(val)
|
|||
|
|
.add(1, format)
|
|||
|
|
.format('YYYY-MM-DD')
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setTimeout(function() {
|
|||
|
|
getData();
|
|||
|
|
}, 60);
|
|||
|
|
});
|
|||
|
|
$('.small').on('click', function() {
|
|||
|
|
// echarts.dispose(document.getElementById('chart'));
|
|||
|
|
|
|||
|
|
$('.show-chart').trigger('click');
|
|||
|
|
$('#datetime').val(dayjs().format('YYYY-MM-DD'));
|
|||
|
|
|
|||
|
|
|
|||
|
|
var el = $('.small.cur');
|
|||
|
|
var ele = $(this);
|
|||
|
|
var _name = $(this).attr('data-date');
|
|||
|
|
el.removeClass('cur');
|
|||
|
|
ele.addClass('cur');
|
|||
|
|
initEcharts('chart');
|
|||
|
|
|
|||
|
|
if (_name === 'time') {
|
|||
|
|
$('#btn_option').hide();
|
|||
|
|
$('#linedb').hide();
|
|||
|
|
rtsetEchartOption();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
switch (_name) {
|
|||
|
|
case 'day':
|
|||
|
|
$('#btn_option .prev-item').html(langJson.preDay);
|
|||
|
|
$('#btn_option .next-item').html(langJson.nextDay);
|
|||
|
|
break;
|
|||
|
|
case 'week':
|
|||
|
|
$('#btn_option .prev-item').html(langJson.preWeek);
|
|||
|
|
$('#btn_option .next-item').html(langJson.nextWeek);
|
|||
|
|
break;
|
|||
|
|
case 'month':
|
|||
|
|
$('#btn_option .prev-item').html(langJson.preMonth);
|
|||
|
|
$('#btn_option .next-item').html(langJson.nextMonth);
|
|||
|
|
break;
|
|||
|
|
case 'season':
|
|||
|
|
$('#btn_option .prev-item').html(langJson.preSeason);
|
|||
|
|
$('#btn_option .next-item').html(langJson.nextSeason);
|
|||
|
|
break;
|
|||
|
|
case 'year':
|
|||
|
|
$('#btn_option .prev-item').html(langJson.preYear);
|
|||
|
|
$('#btn_option .next-item').html(langJson.nextYear);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
$('#btn_option').show();
|
|||
|
|
$('#linedb').show();
|
|||
|
|
if (_name === 'defined') {
|
|||
|
|
$('#definedDate').show();
|
|||
|
|
$('#btn_option').hide();
|
|||
|
|
} else {
|
|||
|
|
$('#definedDate').hide();
|
|||
|
|
$('#btn_option').show();
|
|||
|
|
}
|
|||
|
|
getData();
|
|||
|
|
|
|||
|
|
//重置表格选中状态
|
|||
|
|
$('input[name=t_row]').each(function(i, e) {
|
|||
|
|
e.checked = true;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
$('#dialog').on('click', 'p.close em', function() {
|
|||
|
|
$('#dialog').hide();
|
|||
|
|
});
|
|||
|
|
$('#linedb').on('click', function() {
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
var option = ec.getOption();
|
|||
|
|
var series = [];
|
|||
|
|
for (var i = 0; i < option.series.length; i++) {
|
|||
|
|
var d = option.series[i];
|
|||
|
|
if ($(this).hasClass('cur')) {
|
|||
|
|
d.yAxisIndex = 0;
|
|||
|
|
} else {
|
|||
|
|
d.yAxisIndex = i + 1;
|
|||
|
|
}
|
|||
|
|
d.lineStyle.width = 1;
|
|||
|
|
d.lineStyle.normal.width = 1;
|
|||
|
|
series.push(Object.assign({}, d));
|
|||
|
|
}
|
|||
|
|
option.series = series;
|
|||
|
|
if ($(this).hasClass('cur')) {
|
|||
|
|
option.yAxis[0].max = null;
|
|||
|
|
option.yAxis[0].min = null;
|
|||
|
|
} else {
|
|||
|
|
option.yAxis[0].max = 100;
|
|||
|
|
option.yAxis[0].min = 0;
|
|||
|
|
}
|
|||
|
|
$(this).toggleClass('cur');
|
|||
|
|
ec.setOption(option, true);
|
|||
|
|
});
|
|||
|
|
initEcharts('chart');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function rtsetEchartOption(time) {
|
|||
|
|
if (!time) {
|
|||
|
|
time = window.restime;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (window.flag && document.visibilityState != 'hidden') {
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
//数据
|
|||
|
|
var obj = JSON.parse(JSON.stringify(Commdata));
|
|||
|
|
window.flag = false;
|
|||
|
|
var tabledata = {};
|
|||
|
|
//echarts
|
|||
|
|
var option = ec.getOption();
|
|||
|
|
var series = [];
|
|||
|
|
//zTree
|
|||
|
|
var tree = $.fn.zTree.getZTreeObj('device_list');
|
|||
|
|
var nodes = tree.getCheckedNodes();
|
|||
|
|
|
|||
|
|
nodes.map(function(v) {
|
|||
|
|
series.push({
|
|||
|
|
name: v.name + '[' + v.code + ']',
|
|||
|
|
id: v.code,
|
|||
|
|
yAxisIndex: 0,
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'roundRect',
|
|||
|
|
symbolSize: 1,
|
|||
|
|
showAllSymbol: false,
|
|||
|
|
sampling: 'average',
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 1,
|
|||
|
|
normal: {
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: obj[v.code]
|
|||
|
|
});
|
|||
|
|
tabledata[v.code] = {
|
|||
|
|
arr: obj[v.code]
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// for (var i = 0; i < series.length; i++) {
|
|||
|
|
// var d = series[i];
|
|||
|
|
// d.yAxisIndex = 0;
|
|||
|
|
// if (obj[d.id] !== undefined) {
|
|||
|
|
// d.data = obj[d.id];
|
|||
|
|
// delete obj[d.id];
|
|||
|
|
// }
|
|||
|
|
// tabledata[d.id] = {
|
|||
|
|
// arr: d.data
|
|||
|
|
// };
|
|||
|
|
// }
|
|||
|
|
// for (var k in obj) {
|
|||
|
|
// series.push({
|
|||
|
|
// name: $.fn.checkednodes[k].name + "[" + k + "]",
|
|||
|
|
// id: k,
|
|||
|
|
// yAxisIndex: 0,
|
|||
|
|
// type: "line",
|
|||
|
|
// symbol: "roundRect",
|
|||
|
|
// symbolSize: 1,
|
|||
|
|
// showAllSymbol: false,
|
|||
|
|
// sampling: "average",
|
|||
|
|
// lineStyle: {
|
|||
|
|
// width: 1
|
|||
|
|
// },
|
|||
|
|
// data: obj[k]
|
|||
|
|
// });
|
|||
|
|
// tabledata[k] = {
|
|||
|
|
// arr: obj[k]
|
|||
|
|
// };
|
|||
|
|
// }
|
|||
|
|
option.series = series;
|
|||
|
|
option.tooltip = {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
appendToBody: true,
|
|||
|
|
confine: true
|
|||
|
|
};
|
|||
|
|
// Object.assign({},option.tooltip,{
|
|||
|
|
// formatter: false
|
|||
|
|
// });
|
|||
|
|
option.xAxis = getXAxis(time);
|
|||
|
|
ec.setOption(option, true);
|
|||
|
|
initTable(tabledata);
|
|||
|
|
window.flag = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setOption(option) {
|
|||
|
|
var ec = echarts.getInstanceByDom(document.getElementById('chart'));
|
|||
|
|
// ec.setOption(
|
|||
|
|
// {
|
|||
|
|
// xAxis: {
|
|||
|
|
|
|||
|
|
// },
|
|||
|
|
// tooltip: {
|
|||
|
|
// formatter: false
|
|||
|
|
// },
|
|||
|
|
// series: series
|
|||
|
|
// },
|
|||
|
|
// false
|
|||
|
|
// );
|
|||
|
|
window.flag = true;
|
|||
|
|
}
|