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;
|
||
}
|