var laypage;
|
var layer;
|
var laydate;
|
var page = 1; //页面，默认第1页
|
var LIST_DEVICE;
|
var recordData;
|
var dataMap = [];
|
|
$(function(){
|
layui.use(['laypage', 'layer', 'laydate'], function () {
|
laypage = layui.laypage;
|
layer = layui.layer;
|
laydate = layui.laydate;
|
//开始时间
|
laydate.render({
|
elem: '#start'
|
, type: 'date'
|
, trigger: 'click'
|
, theme: 'custom'
|
});
|
//截止时间
|
laydate.render({
|
elem: '#end'
|
, type: 'date'
|
, trigger: 'click'
|
, theme: 'custom'
|
});
|
|
if(TEST_TAG){
|
initData();
|
|
}else{
|
//请求设备列表
|
queryDevice();
|
|
//提示用户选择设备进行查询
|
layer.msg("请先选择设备再进行查询！");
|
|
//获取历史数据并渲染
|
//queryRecord(page);
|
}
|
|
//提示用户选择设备进行查询
|
layer.msg("请先选择设备再进行查询！");
|
//请求设备列表
|
// queryDevice();
|
});
|
});
|
|
function initData() {
|
var record = {};
|
var data = new Array();
|
|
var maxI = 7;
|
var maxJ = 4;
|
|
for(var i=1;i<=maxI;i++){
|
var param = {};
|
param.id = "设备id"+i;
|
param.name = "设备名称";
|
param.time = "20220217101523";
|
var value = "";
|
value += "[";
|
if(i == 1){
|
for(var j=1;j<=3;j++){
|
value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
if(j < 3){
|
value += ",";
|
}
|
}
|
}else if(i == 2){
|
for(var j=1;j<=4;j++){
|
value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
if(j < 4){
|
value += ",";
|
}
|
}
|
}else if(i == 3){
|
for(var j=1;j<=1;j++){
|
value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
if(j < 1){
|
value += ",";
|
}
|
}
|
}else{
|
for(var j=1;j<=maxJ;j++){
|
value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
if(j < maxJ){
|
value += ",";
|
}
|
}
|
}
|
|
value += "]";
|
param.value = value;
|
data.push(param);
|
}
|
|
record.total = 10;
|
record.data = data;
|
|
renderRecordInfo(record.data);
|
}
|
|
//请求获取设备列表
|
function queryDevice() {
|
$.get("./cgi-bin/device/query-all", function (data, status) {
|
if ("success" == status) {
|
LIST_DEVICE = data;
|
renderDeviceInfo();
|
}
|
}, "json");
|
}
|
|
//渲染设备下拉框
|
function renderDeviceInfo() {
|
var html = '';
|
html += '<option value="" selected>所有设备</option>';
|
if (LIST_DEVICE != null && LIST_DEVICE.length > 0) {
|
$.each(LIST_DEVICE, function (index, item) {
|
html += '<option value="' + item.id + '">' + item.name + '</option>';
|
});
|
}
|
$("#deviceId").html(html);
|
}
|
|
//请求获取历史数据
|
function queryRecord(page) {
|
var request = {};
|
request.id = $("#deviceId").val();
|
if(!request.id)
|
{
|
request.id = '0';
|
layer.msg("请选择设备进行查询！");
|
return ;
|
}
|
|
request.beginTime = $("#start").val().replace('-', '').replace('-', '');
|
if (request.beginTime) {
|
request.beginTime += '000000';
|
}
|
|
request.endTime = $("#end").val().replace('-', '').replace('-', '');
|
if (request.endTime) {
|
request.endTime += '235959';
|
}
|
|
request.page = page;
|
console.log(request);
|
$.post("./cgi-bin/record-his/query", JSON.stringify(request), function (data, status) {
|
if ("success" == status) {
|
recordData = data;
|
//渲染历史数据列表
|
renderRecordInfo(recordData.data);
|
//渲染页码
|
renderPageInfo(page,recordData.total);
|
}else {
|
window.parent.notify("数据查询出错，请重新操作！");
|
}
|
}, "json");
|
}
|
|
//渲染历史数据列表
|
function renderRecordInfo(data) {
|
|
var div_body_x = false;
|
var thead = "";
|
thead += "<tr><th style='width: 100px'>ID</th>";
|
thead += "<th style='width: 180px'>设备名称</th>";
|
thead += "<th style='width: 180px'>时间</th>";
|
var tbody = '';
|
var theadData = [];
|
|
if (data != null && data.length > 0) {
|
// $.each(data, function (index, item) {
|
// html += "<tr><td>" + item.id + "</td>";
|
// html += "<td>" + item.name + "</td>";
|
// html += "<td>" + timeStr(item.time) + "</td>";
|
// var tempData = eval(item.value);
|
// var temp = '';
|
// for (var i = 0; i < tempData.length; i++) {
|
// if (i != 0) {
|
// temp += "，";
|
// }
|
// temp += tempData[i].name + "=" + tempData[i].value;
|
// }
|
// html += "</tr>";
|
// });
|
|
|
//获取表头
|
$.each(data, function (index, item) {
|
var tempData = eval(item.value);
|
if(theadData.length < tempData.length){
|
theadData = tempData;
|
}
|
});
|
// console.log(theadData);
|
for(var i=0;i<theadData.length;i++){
|
if(i >= 5){
|
break;
|
}
|
thead += "<th style='width: 150px'>"+ theadData[i].name +"</th>";
|
}
|
thead += "<th style='width: 150px'>详情</th>";
|
thead += "</tr>";
|
|
$.each(data, function (index, item) {
|
tbody += "<tr><td>" + item.id + "</td>";
|
tbody += "<td>" + item.name + "</td>";
|
tbody += "<td>" + timeStr(item.time) + "</td>";
|
var tempData = eval(item.value);
|
for (var i = 0; i < theadData.length; i++) {
|
if(i >= 5){
|
break;
|
}
|
if(i < tempData.length){
|
tbody += "<td>"+ tempData[i].value +"</td>";
|
}else {
|
tbody += "<td></td>";
|
}
|
}
|
var key = item.id + item.time;
|
tbody += "<td><button class='layui-btn layui-btn-normal' onclick='detail(\""+key+"\");'>详情</button></td>";
|
tbody += "</tr>";
|
dataMap[key] = tempData;
|
});
|
} else {
|
thead += "<th style='width: 150px'>数据</th></tr>";
|
tbody += '<tr><td colspan="4">暂未查到数据</td></tr>';
|
}
|
$("#div-body").attr("style","height: 615px;");
|
$("#thead").html(thead);
|
$("#recordList").html(tbody);
|
}
|
|
//页码渲染
|
function renderPageInfo(page, total) {
|
laypage.render({
|
elem: 'pdgxq-page',
|
count: total,
|
theme: '#e45163',
|
layout: ['prev', 'page', 'next', 'skip'],
|
curr: page,
|
limit: 10,
|
jump: function (obj, first) {
|
if (!first) {
|
page = obj.curr;
|
queryRecord(page);
|
}
|
}
|
});
|
}
|
|
//时间格式处理，20210226101010-----2021-02-26 10:10:10
|
function timeStr(time) {
|
return time.substring(0, 4) + "-" + time.substring(4, 6) + "-" + time.substring(6, 8) + " " + time.substring(8, 10) + ":" + time.substring(10, 12) + ":" + time.substring(12, 14)
|
}
|
|
/*------------------ tableToExcel导出模块-start ----------------- */
|
|
//导出Excel点击事件
|
function generateClick(){
|
// var tableId = "record-his-list";
|
var request = {};
|
request.id = $("#deviceId").val();
|
if(!request.id)
|
{
|
request.id = '0';
|
layer.msg("请选择设备进行查询！");
|
return ;
|
}
|
|
request.beginTime = $("#start").val().replace('-', '').replace('-', '');
|
if (request.beginTime) {
|
request.beginTime += '000000';
|
}
|
|
request.endTime = $("#end").val().replace('-', '').replace('-', '');
|
if (request.endTime) {
|
request.endTime += '235959';
|
}
|
|
request.page = page;
|
console.log(request);
|
|
var html = queryAllRecord(request);
|
|
// var record = {};
|
// var data = new Array();
|
//
|
// var maxI = 5;
|
// var maxJ = 9;
|
//
|
// for(var i=1;i<=maxI;i++){
|
// var param = {};
|
// param.id = "设备id";
|
// param.name = "设备名称";
|
// param.time = "20220217101523";
|
// var value = "";
|
// value += "[";
|
// if(i == 1){
|
// for(var j=1;j<=4;j++){
|
// value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
// if(j < 4){
|
// value += ",";
|
// }
|
// }
|
// }else if(i == 3){
|
// for(var j=1;j<=15;j++){
|
// value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
// if(j < 15){
|
// value += ",";
|
// }
|
// }
|
// }else if(i == 2){
|
// for(var j=1;j<=18;j++){
|
// value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
// if(j < 18){
|
// value += ",";
|
// }
|
// }
|
// }else if(i == 4){
|
// for(var j=1;j<=7;j++){
|
// value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
// if(j < 7){
|
// value += ",";
|
// }
|
// }
|
// }else{
|
// for(var j=1;j<=maxJ;j++){
|
// value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
|
// if(j < maxJ){
|
// value += ",";
|
// }
|
// }
|
// }
|
//
|
// value += "]";
|
// param.value = value;
|
// data.push(param);
|
// }
|
//
|
// record.total = 10;
|
// record.data = data;
|
// // console.log(record);
|
// var html = getTable(record.data);
|
// tableToExcel(html);
|
}
|
|
function queryAllRecord(request){
|
var html = "";
|
$.ajaxSettings.async = false;
|
$.post("./cgi-bin/record-his/excel-his", JSON.stringify(request), function (data, status) {
|
if ("success" == status) {
|
console.log(data.data);
|
//渲染历史数据列表
|
var html = getTable(data.data);
|
tableToExcel(html);
|
}else {
|
window.parent.notify("数据查询出错，请重新操作！");
|
}
|
}, "json");
|
return html;
|
}
|
|
function getTable(data) {
|
var thead = "";
|
thead += "<tr><th style='width: 100px'>ID</th>";
|
thead += "<th style='width: 180px'>设备名称</th>";
|
thead += "<th style='width: 180px'>时间</th>";
|
var tbody = '';
|
var theadData = [];
|
|
if (data != null && data.length > 0) {
|
//获取表头
|
$.each(data, function (index, item) {
|
var tempData = eval(item.value);
|
if(theadData.length < tempData.length){
|
theadData = tempData;
|
}
|
});
|
console.log(theadData);
|
for(var i=0;i<theadData.length;i++){
|
thead += "<th style='width: 150px'>"+ theadData[i].name +"</th>";
|
}
|
thead += "</tr>";
|
|
$.each(data, function (index, item) {
|
|
tbody += "<tr><td>" + item.id + "</td>";
|
tbody += "<td>" + item.name + "</td>";
|
tbody += "<td>" + timeStr(item.time) + "</td>";
|
var tempData = eval(item.value);
|
|
for (var i = 0; i < theadData.length; i++) {
|
if(i < tempData.length){
|
tbody += "<td>"+ tempData[i].value +"</td>";
|
}else {
|
tbody += "<td></td>";
|
}
|
// tbody += "<td>"+ tempData[i].value +"</td>";
|
}
|
tbody += "</tr>";
|
});
|
} else {
|
thead += "<th style='width: 150px'>数据</th></tr>";
|
tbody += '<tr><td colspan="4">暂未查到数据</td></tr>';
|
}
|
|
var html = thead + tbody;
|
// console.log(html);
|
return html;
|
}
|
|
function tableToExcel(html) {
|
var name = "历史记录";
|
var uri = 'data:application/vnd.ms-excel;base64,';
|
var template = '<html><head><meta charset="UTF-8"></head><body><table border="1">{table}</table></body></html>';
|
|
if(!html){
|
layer.msg("没有获取到要导出的内容！");
|
}
|
|
var ctx = {worksheet: name || 'Worksheet', table: html};
|
window.location.href = uri + base64(format(template, ctx))
|
}
|
|
function format(s, c) {
|
return s.replace(/{(\w+)}/g,function(m, p) { return c[p]; });
|
}
|
|
function base64(s) {
|
return window.btoa(unescape(encodeURIComponent(s)))
|
};
|
|
/*------------------ tableToExcel导出模块-end ----------------- */
|
|
function detail(key) {
|
var items = dataMap[key];
|
var html = "";
|
|
$.each(items, function (index, item) {
|
html +="<tr><td>"+item.name+"</td><td>"+item.value+"</td></tr>";
|
});
|
|
$("#tbody").html(html);
|
layer.open({
|
skin: 'mypop',
|
type: 1,
|
title: false,
|
area: ['40%', '65%'],
|
closeBtn: 0,
|
shade: 0,
|
scrollbar: false,
|
content: $('#editWarnDom')
|
});
|
}
|
|
function closepopBtn(){
|
layer.closeAll();
|
$("#tbody").html("");
|
}
|
|
|
|
