396 lines
16 KiB
HTML
396 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="cn">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|||
|
|
<title>历史趋势</title>
|
|||
|
|
<link rel="stylesheet" href="/css/common.css" />
|
|||
|
|
<link rel="stylesheet" href="/plugin/page/page.css" />
|
|||
|
|
<link rel="stylesheet" href="/plugin/lay/theme/default/layer.css" />
|
|||
|
|
<link
|
|||
|
|
rel="stylesheet"
|
|||
|
|
href="/plugin/ztree/css/zTreeStyle/zTreeStyle.css"
|
|||
|
|
/>
|
|||
|
|
<link rel="stylesheet" href="/plugin/datePicker/skin/WdatePicker.css" />
|
|||
|
|
<script src="../js/theme.js"></script>
|
|||
|
|
<script>
|
|||
|
|
setTheme(['../css/theme/${theme}/realtime.min.css']);
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body class="clearfix">
|
|||
|
|
<div class="top"></div>
|
|||
|
|
<div class="bg bd round clearfix">
|
|||
|
|
<em class="tleft"></em><em class="tright"></em
|
|||
|
|
><em class="bleft"></em><em class="bright"></em>
|
|||
|
|
<aside
|
|||
|
|
class="simscroll bdc1"
|
|||
|
|
style="width:200px;height:100%;border-right-width:1px; border-right-style:solid;overflow-y: auto;"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
id="changecollect"
|
|||
|
|
style="height:37px;line-height: 36px;font-size: 0px;"
|
|||
|
|
>
|
|||
|
|
<a
|
|||
|
|
class="btn cur device_list"
|
|||
|
|
href="javascript:;"
|
|||
|
|
data-i18n="trend.shebei"
|
|||
|
|
>设备</a
|
|||
|
|
>
|
|||
|
|
<a
|
|||
|
|
class="btn collectlist"
|
|||
|
|
href="javascript:;"
|
|||
|
|
data-i18n="trend.favorite"
|
|||
|
|
>收藏夹</a
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="simscroll"
|
|||
|
|
style="height:calc(100% - 37px);overflow-y: auto;"
|
|||
|
|
>
|
|||
|
|
<div class="tree-filter">
|
|||
|
|
<input id="filterText" type="text" />
|
|||
|
|
<button id="treeFilter" type="button">过滤</button>
|
|||
|
|
</div>
|
|||
|
|
<ul class="ztree" id="device_list"></ul>
|
|||
|
|
<ul id="collectlist" style="display: none;"></ul>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
<section
|
|||
|
|
style="position: absolute;top:0;bottom:0;left:200px;right:0;"
|
|||
|
|
>
|
|||
|
|
<h2
|
|||
|
|
class="ftc4"
|
|||
|
|
style="text-align:left;padding:10px;"
|
|||
|
|
data-i18n="trend.qushitu"
|
|||
|
|
>
|
|||
|
|
趋势图
|
|||
|
|
</h2>
|
|||
|
|
<div style="padding-left:40px;">
|
|||
|
|
<input type="hidden" id="datetime" />
|
|||
|
|
<button
|
|||
|
|
class="small cur"
|
|||
|
|
data-date="time"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.realTime"
|
|||
|
|
>
|
|||
|
|
实时
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="small"
|
|||
|
|
data-date="day"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.day"
|
|||
|
|
>
|
|||
|
|
日
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="small"
|
|||
|
|
data-date="week"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.week"
|
|||
|
|
>
|
|||
|
|
周
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="small"
|
|||
|
|
data-date="month"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.month"
|
|||
|
|
>
|
|||
|
|
月
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="small"
|
|||
|
|
data-date="season"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.season"
|
|||
|
|
>
|
|||
|
|
季
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="small"
|
|||
|
|
data-date="year"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.year"
|
|||
|
|
>
|
|||
|
|
年
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="small"
|
|||
|
|
data-date="defined"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.defined"
|
|||
|
|
>
|
|||
|
|
自定义
|
|||
|
|
</button>
|
|||
|
|
<span></span>
|
|||
|
|
</div>
|
|||
|
|
<div style="position: absolute; top:20px;right:30px;">
|
|||
|
|
<button
|
|||
|
|
id="collect"
|
|||
|
|
class="op-btn"
|
|||
|
|
type="button"
|
|||
|
|
style="border-top-left-radius: 15px;border-bottom-left-radius: 15px;"
|
|||
|
|
data-i18n="trend.collection"
|
|||
|
|
>
|
|||
|
|
收藏
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
id="linedb"
|
|||
|
|
class="op-btn"
|
|||
|
|
type="button"
|
|||
|
|
style="border-top-right-radius: 15px;border-bottom-right-radius: 15px;display: none;"
|
|||
|
|
data-i18n="trend.compare"
|
|||
|
|
>
|
|||
|
|
对比
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="charline" id="chart"></div>
|
|||
|
|
<div
|
|||
|
|
id="btn_option"
|
|||
|
|
style="text-align: center;padding:10px;display: none;"
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
class="prev-item"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.preDay"
|
|||
|
|
>
|
|||
|
|
上一日
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
class="next-item"
|
|||
|
|
type="button"
|
|||
|
|
data-i18n="trend.nextDay"
|
|||
|
|
>
|
|||
|
|
下一日
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="definedDate" style="display: none;font-size: 12px;text-align: center;padding-top:10px;">
|
|||
|
|
<label style="padding-right:20px"
|
|||
|
|
><span>开始日期:</span
|
|||
|
|
><input
|
|||
|
|
class="Wdate"
|
|||
|
|
readonly
|
|||
|
|
type="text"
|
|||
|
|
name="startTime"
|
|||
|
|
id="startDate"
|
|||
|
|
/></label>
|
|||
|
|
<label style="padding-right:20px"
|
|||
|
|
><span>结束日期:</span
|
|||
|
|
><input
|
|||
|
|
class="Wdate"
|
|||
|
|
type="text"
|
|||
|
|
readonly
|
|||
|
|
name="endTime"
|
|||
|
|
id="endDate"
|
|||
|
|
/></label>
|
|||
|
|
<label style="padding-right:20px">
|
|||
|
|
<span>查询间隔:</span>
|
|||
|
|
<select id="definedInterval" class="defined-interval" style="text-align:left;width:118px;">
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<button class="btnStyle" type="button" onclick="definedQuery()">查询</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="table simscroll" style="padding:0 20px"></div>
|
|||
|
|
</section>
|
|||
|
|
<div id="dialog">
|
|||
|
|
<p class="close">
|
|||
|
|
<span data-i18n="trend.event">事件</span>
|
|||
|
|
<em>×</em>
|
|||
|
|
</p>
|
|||
|
|
<div class="content simscroll">
|
|||
|
|
<table id="table" data-num="23">
|
|||
|
|
<colgroup>
|
|||
|
|
<col width="20px" />
|
|||
|
|
<col width="90px" />
|
|||
|
|
<col />
|
|||
|
|
<col />
|
|||
|
|
<col />
|
|||
|
|
<col />
|
|||
|
|
<col width="200px" />
|
|||
|
|
</colgroup>
|
|||
|
|
<thead></thead>
|
|||
|
|
<tbody></tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div id="page" class="sl-page" style="margin-top:8px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="collectdialog" style="display: none;padding:30px;">
|
|||
|
|
<label>
|
|||
|
|
<span data-i18n="trend.collectName">请输入收藏名称:</span>
|
|||
|
|
<input type="text" name="collectname" autocomplete="off" />
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<script src="../plugin/jquery-3.7.0.min.js"></script>
|
|||
|
|
<script src="../js/common.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var langJson = '';
|
|||
|
|
var languageObj = {
|
|||
|
|
finish: function(res) {
|
|||
|
|
langJson = res.trendJs;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
$.i18n(languageObj);
|
|||
|
|
</script>
|
|||
|
|
<script src="../plugin/day.min.js"></script>
|
|||
|
|
<script src="../plugin/page/page.js"></script>
|
|||
|
|
<script src="../plugin/lay/layer.js"></script>
|
|||
|
|
<script src="../plugin/ztree/js/jquery.ztree.all.min.js"></script>
|
|||
|
|
<script src="../plugin/ztree/js/jquery.ztree.exhide.min.js"></script>
|
|||
|
|
<script src="../plugin/datePicker/WdatePicker.js"></script>
|
|||
|
|
<script src="../plugin/echarts.min.js"></script>
|
|||
|
|
<script src="../plugin/halloween.js"></script>
|
|||
|
|
<script src="../js/qushi.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var Commdata = {},
|
|||
|
|
mindate = 0;
|
|||
|
|
window.restime = dayjs().valueOf();
|
|||
|
|
var wsb = initSocket({
|
|||
|
|
url: 'realTimeDataWebsocket',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.data) {
|
|||
|
|
var obj = {};
|
|||
|
|
res.time = Number(res.time);
|
|||
|
|
var date = dayjs(res.time).format(
|
|||
|
|
'YYYY/MM/DD HH:mm:ss:SSS'
|
|||
|
|
);
|
|||
|
|
// for(var k in res.data){
|
|||
|
|
// var d=res.data[k];
|
|||
|
|
// if(d instanceof Array){d=Number(d[0])}
|
|||
|
|
// var treeCode=$.fn.checkednodes[k].treeCode;
|
|||
|
|
// Commdata[treeCode].push({
|
|||
|
|
// name:date,
|
|||
|
|
// value:[res.time,Number(d).toFixed(2)]
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
for (var k in res.data) {
|
|||
|
|
var d = res.data[k];
|
|||
|
|
//没有时间不计入实时趋势
|
|||
|
|
|
|||
|
|
//if(!d.timestamp){
|
|||
|
|
// continue
|
|||
|
|
//}
|
|||
|
|
var treeCode = !$.fn.checkednodes[k]
|
|||
|
|
? k
|
|||
|
|
: $.fn.checkednodes[k].code;
|
|||
|
|
//不是选中的测点
|
|||
|
|
|
|||
|
|
if (!Commdata[treeCode]) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
//res.time = Number(d.timestamp) || +new Date();
|
|||
|
|
|
|||
|
|
//var date = dayjs(d.timestamp).format('YYYY/MM/DD HH:mm:ss:SSS');
|
|||
|
|
|
|||
|
|
var list = Commdata[treeCode];
|
|||
|
|
|
|||
|
|
//判断 可不可以添加进数组(不与最后一条时间一致)
|
|||
|
|
if (list && list.length > 0) {
|
|||
|
|
if (list[list.length - 1].name == date) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (mindate <= res.time) {
|
|||
|
|
mindate = res.time;
|
|||
|
|
//添加数据
|
|||
|
|
if (d instanceof Array) {
|
|||
|
|
d = Number(d[0]);
|
|||
|
|
Commdata[treeCode].push({
|
|||
|
|
name: date,
|
|||
|
|
value: [res.time, Number(d).toFixed(2)]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//去除过量数据
|
|||
|
|
|
|||
|
|
if (Commdata[treeCode].length > 600) {
|
|||
|
|
Commdata[treeCode].splice(
|
|||
|
|
0,
|
|||
|
|
Commdata[treeCode].length - 600
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
//排序
|
|||
|
|
Commdata[treeCode].sort(function(a, b) {
|
|||
|
|
return (
|
|||
|
|
dayjs(a.name).valueOf() -
|
|||
|
|
dayjs(b.name).valueOf()
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// for(var k in Commdata){
|
|||
|
|
// if(Commdata[k].length>=600||dayjs(date).diff(dayjs(Commdata[k][0]),'minute')>10){
|
|||
|
|
// Commdata[k].shift();
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
//删除过时的数据
|
|||
|
|
for (var k in Commdata) {
|
|||
|
|
if (mindate !== 0 && Commdata[k].length > 0) {
|
|||
|
|
while (
|
|||
|
|
mindate - Commdata[k][0].value[0] >
|
|||
|
|
10 * 60 * 1000
|
|||
|
|
) {
|
|||
|
|
Commdata[k].shift();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
window.restime = res.time;
|
|||
|
|
if ($('.small.cur').attr('data-date') === 'time') {
|
|||
|
|
rtsetEchartOption(res.time);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function getHistoryData(param) {
|
|||
|
|
obj = {
|
|||
|
|
startTime: dayjs()
|
|||
|
|
.subtract(10, 'minute')
|
|||
|
|
.format('YYYY-MM-DD HH:mm:ss'),
|
|||
|
|
endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|||
|
|
};
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/ems/monitorBusiness/queryBeforeHistoryByParams',
|
|||
|
|
data: {
|
|||
|
|
interval: 10,
|
|||
|
|
ym: param.ym || '',
|
|||
|
|
yc: param.yc || '',
|
|||
|
|
yx: param.yx || '',
|
|||
|
|
mix: param.mix || ''
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
type: 'post',
|
|||
|
|
success: function(res) {
|
|||
|
|
var obj = {};
|
|||
|
|
for (var i = 0, arr = []; i < res.rows.length; i++) {
|
|||
|
|
var d = res.rows[i];
|
|||
|
|
var t = d.time.replace(/[-]/g, '\/');
|
|||
|
|
if (Commdata[d.sname] === undefined) {
|
|||
|
|
Commdata[d.sname] = [];
|
|||
|
|
}
|
|||
|
|
Commdata[d.sname].push({
|
|||
|
|
name: t,
|
|||
|
|
value: [
|
|||
|
|
dayjs(t).valueOf(),
|
|||
|
|
Number(d.value).toFixed(2)
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
arr.push(d.sname);
|
|||
|
|
}
|
|||
|
|
for (var _i = 0; _i < arr.length; _i++) {
|
|||
|
|
Commdata[arr[_i]].sort(function(a, b) {
|
|||
|
|
return (
|
|||
|
|
dayjs(a.name).valueOf() -
|
|||
|
|
dayjs(b.name).valueOf()
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|