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