You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
443 lines
18 KiB
443 lines
18 KiB
<!DOCTYPE html>
|
|
<html class="x-admin-sm">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{$devName}设备ID：{$serial_num} </title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport"
|
|
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<script src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<script type="text/javascript" src="/js/echarts.min.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<style>
|
|
.layui-card-header{
|
|
border-bottom: 0px solid #f6f6f6;
|
|
}
|
|
.layui-table thead span {
|
|
/*background-color: #acd3ed;*/
|
|
font-size: 15px;
|
|
}
|
|
|
|
.layui-table tbody tr td div {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.layui-table tbody tr:hover {
|
|
background-color: #ffe6cc;
|
|
}
|
|
|
|
.layui-table tbody tr:hover td div {
|
|
font-size: 18px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="layui-anim layui-anim-scale flag" style="display: none"><br/>
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div style="background-image: linear-gradient(rgb(255,255,255),rgba(255,255,255,0));margin-bottom: 12px">
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend class="layui-icon">{$devName}设备ID：{$serial_num} </legend>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="layui-col-sm12 layui-col-md12" >
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="background-image: linear-gradient(to right , #94df9a , #abffb1);color: #070707">设置数据刷新频率（默认为3s）</div>
|
|
<div class="layui-card-body" style="background-image: linear-gradient(to right, #abffb1 , #4acc5c);">
|
|
<button id="up1" class="layui-btn layui-btn-radius"
|
|
style="width: 120px;height: 40px;font-size: 20px;margin-bottom: 7px;margin-left: 10px">1s
|
|
</button>
|
|
<button id="up2" class="layui-btn layui-btn-radius"
|
|
style="width: 120px;height: 40px;font-size: 20px;margin-bottom: 7px">3s
|
|
</button>
|
|
<button id="up3" class="layui-btn layui-btn-radius"
|
|
style="width: 120px;height: 40px;font-size: 20px;margin-bottom: 7px">7s
|
|
</button>
|
|
<button id="up4" class="layui-btn layui-btn-radius"
|
|
style="width: 120px;height: 40px;font-size: 20px;margin-bottom: 7px">60s
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm12 layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"style="background-image: linear-gradient(#c9bbdd , #ffffff);">实时数据</div>
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
<div id="main1" class="layui-col-sm12" style="height: 300px"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm12 layui-col-md8">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="background-image: linear-gradient(#7da9dd , #ffffff);">最近数据</div>
|
|
<div class="layui-card-body" style="min-height: 280px;">
|
|
<div id="main2" class="layui-col-sm12" style="height: 300px;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm12 layui-col-md12" style="min-height: 837px">
|
|
|
|
<div class="layui-card" >
|
|
<div class="layui-card-header" style="background-image: linear-gradient(#ffe6cc , #ffffff);">历史数据
|
|
<button class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:6px;float:right"
|
|
id="refresh" title="刷新">
|
|
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #ffe6cc);">
|
|
<form class="layui-form layui-col-space5" action="" id="myForm">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label" style="padding: 5px ;width: 90px">日期范围查询</label>
|
|
<div class="layui-input-inline">
|
|
<input style="width: 260px" type="text" id="selectDate" name="selectDate"
|
|
lay-verify="selectDate" placeholder="请选择要查询数据的日期范围" autocomplete="off"
|
|
class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline layui-show-xs-block">
|
|
|
|
<button class="layui-btn" lay-submit="" lay-filter="search">
|
|
<i class="layui-icon"></i>查找
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<table id="demo" lay-filter="demo"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/html" id="toolbarDemo">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-radius layui-btn-lg" lay-event="optimize_sql"
|
|
style="background-color: #57ddc2">
|
|
<i class="layui-icon layui-icon-senior"></i>优化数据库
|
|
</button>
|
|
|
|
</div>
|
|
</script>
|
|
<script type="text/javascript">
|
|
var deviceName = '{$devName}';
|
|
var serial_num = '{$serial_num}';
|
|
layui.use(['table', 'form', 'layer', 'jquery', 'laydate'], function () {
|
|
var table = layui.table;
|
|
var form = layui.form;
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
var laydate = layui.laydate
|
|
var updateTime = 3000;
|
|
|
|
//动态显示
|
|
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.info('序列号为：' + serial_num + '的' + deviceName + '实时动态界面界面', '已进入', parent.noticeOpt1);
|
|
// setTimeout(function () {
|
|
// $('.flag').show();
|
|
// myChart1.resize();
|
|
// myChart2.resize();
|
|
// }, 30);
|
|
$('.flag').show();
|
|
// myChart1.resize();
|
|
// myChart2.resize();
|
|
|
|
$("#refresh").click(function () {
|
|
$("#myForm")[0].reset();
|
|
layui.form.render();
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.success("历史数据列表已校准", "<div class = 'layui-icon layui-icon-heart-fill'> 同步成功</div>", parent.noticeOpt6);
|
|
table.render({
|
|
elem: '#demo'
|
|
// , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
|
|
, url: '/index/Tools/device_detailMsg?deviceName=' + deviceName + '&serial_num=' + serial_num //数据接口
|
|
, loading: true
|
|
, size: 'sm'
|
|
, page: {
|
|
curr: 1
|
|
, layout: ['limit', 'prev', 'page', 'next', 'skip']//自定义布局顺序
|
|
, limit: 20 //初始 每页几条数据
|
|
, groups: 5 //最多几个跳页按钮
|
|
, prev: '上一页'
|
|
, next: '下一页'
|
|
// , first: false //不显示首页
|
|
// , last: false //不显示尾页
|
|
}
|
|
, cols: [[ //表头
|
|
{field: 'time', title: '时间', align: 'center', minWidth: 120}
|
|
, {field: 'data', title: '数据', minWidth: 120, align: 'center'}
|
|
|
|
]]
|
|
});
|
|
});
|
|
|
|
|
|
|
|
//日期时间初始化
|
|
laydate.render({
|
|
elem: '#selectDate'
|
|
, trigger: 'click' //采用click弹出
|
|
, type: 'datetime'
|
|
, range: '~'
|
|
, format: 'yyyy-MM-dd HH:mm:ss'
|
|
, theme: 'grid'
|
|
|
|
});
|
|
// 自定义验证规则
|
|
form.verify({
|
|
selectDate: function (value) {
|
|
if (!value) {
|
|
// console.log(value);
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.error('请选择要查询数据的日期范围', '操作异常', parent.noticeOpt5);
|
|
return '请选择要查询数据的日期范围！';
|
|
}
|
|
if (value.length !== 41) {
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.error('格式错误，请在日期选择框中选择日期范围，不要手动输入！', '操作异常', parent.noticeOpt5);
|
|
return '格式错误，请在日期选择框中选择日期范围，不要手动输入！'
|
|
}
|
|
// console.log(value.length);
|
|
},
|
|
|
|
});
|
|
//搜索历史数据
|
|
form.on('submit(search)', function (data) {
|
|
// console.log(data.field.selectDate.split(' ~ '));
|
|
var selectDate = data.field.selectDate.split(' ~ ');
|
|
// console.log(selectDate[0]);
|
|
// console.log(selectDate[1]);
|
|
layer.msg('搜索中', {time: 500});
|
|
var load = layer.load();
|
|
tableIns.reload({
|
|
where: { //设定异步数据接口的额外参数，任意设
|
|
// deviceName: deviceName
|
|
// ,serial_num: serial_num
|
|
startDate: selectDate[0]
|
|
, endDate: selectDate[1]
|
|
}
|
|
, page: {
|
|
curr: 1 //重新从第 1 页开始
|
|
}
|
|
, done: function (res, curr, count) {
|
|
layer.close(load);
|
|
parent.layui.notice.remove();
|
|
if (count === 0) {
|
|
parent.layui.notice.success(res.msg, '搜索完成', parent.noticeOpt4);
|
|
layer.msg('搜索完成，' + res.msg, {time: 1500});
|
|
} else {
|
|
parent.layui.notice.success('找到' + count + '条数据', '搜索完成', parent.noticeOpt4);
|
|
layer.msg('搜索完成，找到' + count + '条数据', {time: 1500});
|
|
}
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
|
|
//设置刷新图标的时间间隔
|
|
$("#up1").click(function () {
|
|
updateTime = 1000;
|
|
clearInterval(interval1);
|
|
interval1 = setInterval(update, updateTime);
|
|
layer.msg('已重新设置间隔为1s', {icon: 6, time: 1000});
|
|
update();
|
|
});
|
|
$("#up2").click(function () {
|
|
updateTime = 3000;
|
|
clearInterval(interval1);
|
|
interval1 = setInterval(update, updateTime);
|
|
layer.msg('已重新设置间隔为3s', {icon: 6, time: 1000});
|
|
update();
|
|
});
|
|
$("#up3").click(function () {
|
|
updateTime = 7000;
|
|
clearInterval(interval1);
|
|
interval1 = setInterval(update, updateTime);
|
|
layer.msg('已重新设置间隔为7s', {icon: 6, time: 1000});
|
|
update();
|
|
});
|
|
$("#up4").click(function () {
|
|
updateTime = 60000;
|
|
clearInterval(interval1);
|
|
interval1 = setInterval(update, updateTime);
|
|
layer.msg('已重新设置间隔为60s', {icon: 6, time: 1000});
|
|
update();
|
|
});
|
|
//当前数据
|
|
var myChart1 = echarts.init(document.getElementById('main1'));
|
|
var option1 = {
|
|
tooltip: {
|
|
formatter: "{a} <br/>{b} : {c}{$unit}"
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '当前数据',
|
|
type: 'gauge',
|
|
detail: {formatter: '{value}{$unit}'},
|
|
data: [{value: 0}],
|
|
splitNumber: 10
|
|
}
|
|
]
|
|
};
|
|
//近期数据
|
|
var myChart2 = echarts.init(document.getElementById('main2'));
|
|
var option2 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: true,
|
|
formatter: "{a} <br/>{b} : {c}{$unit}"
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['loading...', 'loading...', 'loading...', 'loading...', 'loading...', 'loading...', 'loading...']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {show: true}
|
|
},
|
|
series: [
|
|
{
|
|
name: '近期数据',
|
|
data: [0, 0, 0, 0, 0, 0, 0],
|
|
type: 'line',
|
|
itemStyle: {normal: {label: {show: true}}},
|
|
areaStyle: {}
|
|
}
|
|
],
|
|
color: '#93ccff'
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart1.setOption(option1);
|
|
myChart2.setOption(option2);
|
|
update();
|
|
layer.msg('当前数据更新间隔为3s', {icon: 6, time: 2000});
|
|
var interval1 = setInterval(update, updateTime);
|
|
|
|
function update() {
|
|
// var timestamp = Date.parse(new Date());
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/index/Tools/echarts",
|
|
data: {
|
|
deviceName: deviceName,
|
|
serial_num: serial_num,
|
|
},
|
|
success: function (msg) {
|
|
// console.log(timestampToTime(msg[1].time));
|
|
option1.series[0].data[0].value = msg[0].data;
|
|
// console.log(msg);
|
|
for (var i = 0; i < 7; i++) {
|
|
msg[i].time = timestampToTime(msg[i].time);
|
|
}
|
|
option2.series[0].data[6] = msg[0].data;
|
|
option2.xAxis.data[6] = msg[0].time;
|
|
option2.series[0].data[5] = msg[1].data;
|
|
option2.xAxis.data[5] = msg[1].time;
|
|
option2.series[0].data[4] = msg[2].data;
|
|
option2.xAxis.data[4] = msg[2].time;
|
|
option2.series[0].data[3] = msg[3].data;
|
|
option2.xAxis.data[3] = msg[3].time;
|
|
option2.series[0].data[2] = msg[4].data;
|
|
option2.xAxis.data[2] = msg[4].time;
|
|
option2.series[0].data[1] = msg[5].data;
|
|
option2.xAxis.data[1] = msg[5].time;
|
|
option2.series[0].data[0] = msg[6].data;
|
|
option2.xAxis.data[0] = msg[6].time;
|
|
myChart1.setOption(option1);
|
|
myChart2.setOption(option2);
|
|
},
|
|
error: function () {
|
|
layer.alert('数据传输失败，请联系后台管理员！', {icon: 5})
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
//根据窗口的大小变动图表 --- 重点
|
|
window.onresize = function () {
|
|
myChart1.resize();
|
|
myChart2.resize();
|
|
|
|
};
|
|
|
|
//时间戳转换成时间
|
|
function timestampToTime(timestamp) {
|
|
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
|
var Y = date.getFullYear() + '-';
|
|
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
|
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
|
|
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
|
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
|
|
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
|
return h + m + s;
|
|
}
|
|
|
|
// 初始化历史数据表
|
|
var tableIns = table.render({
|
|
elem: '#demo'
|
|
// , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
|
|
, url: '/index/Tools/device_detailMsg?deviceName=' + deviceName + '&serial_num=' + serial_num //数据接口
|
|
, loading: true
|
|
, size: 'sm'
|
|
, page: {
|
|
curr: 1
|
|
, layout: ['limit', 'prev', 'page', 'next', 'skip']//自定义布局顺序
|
|
, limit: 20 //初始 每页几条数据
|
|
, groups: 5 //最多几个跳页按钮
|
|
, prev: '上一页'
|
|
, next: '下一页'
|
|
// , first: false //不显示首页
|
|
// , last: false //不显示尾页
|
|
}
|
|
, cols: [[ //表头
|
|
{field: 'time', title: '时间', align: 'center', minWidth: 120}
|
|
, {field: 'data', title: '数据', minWidth: 120, align: 'center'}
|
|
|
|
]]
|
|
// , done: function (res, curr, count) {
|
|
// //如果是异步请求数据方式，res即为你接口返回的信息。
|
|
// //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
|
|
// // console.log(res.data);
|
|
//
|
|
// //得到数据总量
|
|
// // console.log(count);
|
|
// }
|
|
});
|
|
|
|
table.on('toolbar(demo)', function (obj) {
|
|
if (obj.event === 'refresh') {
|
|
location.reload();
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|