<!DOCTYPE html>
|
<html>
|
<head>
|
<title>温度折线图</title>
|
|
<meta name="keywords" content="keyword1,keyword2,keyword3">
|
<meta name="description" content="this is my page">
|
<meta name="content-type" content="text/html; charset=UTF-8">
|
<link rel="stylesheet" type="text/css" href="../pages/css/base.css">
|
<link rel="stylesheet" type="text/css" href="../jqueryui/jquery-ui.css">
|
<link rel="stylesheet" type="text/css" href="../src/css/layui.css">
|
<link rel="stylesheet" type="text/css" href="../pages/css/mylayui.css">
|
|
</head>
|
|
<body>
|
<div class="graph" style="height: 470px">
|
<div class="graph-tools">
|
<div class="graph-tools-inner">
|
<button type="button" id="refreshBtn" class="layui-btn layui-btn-normal layui-btn-sm" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></button>
|
<button type="button" id="exportBtn" class="layui-btn layui-btn-normal layui-btn-sm" title="导出"><i class="layui-icon layui-icon-file"></i></button>
|
</div>
|
</div>
|
<div class="graph-content" id="tmpLine"></div>
|
</div>
|
<form action="../ExportTable.servlet" method="post" id="all_picture" enctype="multipart/form-data">
|
<input type="hidden" name="PageName" value="autoPageName" />
|
<input type="hidden" name="exp_picture_str" id="tmpLineGraph" />
|
<input type="hidden" name="excelTitle" id="tblTitle" value="设备温度">
|
<input type="hidden" name="table_th_arr" id="tblTh">
|
<input type="hidden" name="table_td_arr" id="tblTd">
|
</form>
|
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
|
<script type="text/javascript" src="../js/base.js"></script>
|
<script type="text/javascript" src="../js/echarts.js"></script>
|
<script type="text/javascript" src="../src/layui.js"></script>
|
<script type="text/javascript" src="../pages/js/mylayui.js"></script>
|
<script type="text/javascript">
|
layui.use(['form', 'table', 'layer', 'laydate','element'], function() {
|
var table = layui.table; // 获取表格模块
|
var form = layui.form; // 获取表单模块
|
var layer = layui.layer; // 获取弹出框模块
|
var laydate = layui.laydate; // 获取日期模块
|
var element = layui.element; // 获取元素操作模块
|
var tmpLineGraph = echarts.init($('#tmpLine').get(0));
|
createPageLine([], []);
|
$(window).resize(function() {
|
tmpLineGraph.resize();
|
});
|
|
var table_th = ['记录时间', '设备温度'];
|
var table_td = [];
|
|
var lineGraphParams = parent.$('#lineGraphData').data('data');
|
if(lineGraphParams) {
|
searchTmpData(lineGraphParams);
|
}
|
|
// graph tools btn的事件
|
$("#refreshBtn").click(function() {
|
if(lineGraphParams) {
|
searchTmpData(lineGraphParams);
|
}
|
});
|
|
$("#exportBtn").click(function() {
|
if(lineGraphParams) {
|
exportData(lineGraphParams);
|
};
|
});
|
// 查询温度统计
|
function searchTmpData(params) {
|
var searchParams = {
|
dev_id: params.dev_id,
|
recordtime: params.startTime,
|
recordtime1: params.endTime,
|
};
|
//console.log(searchParams);
|
var loading = layer.load(1);
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'Devtmp_recordAction!serchByCondition',
|
data: 'json='+JSON.stringify(searchParams),
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
//console.log(rs);
|
// 判断是否查询成功
|
table_td = [];
|
var xdata = [];
|
var sdata = [];
|
if(rs.code == 1) {
|
var data = rs.data;
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
xdata.push(_data.recordtime);
|
sdata.push(_data.dev_tmp);
|
table_td.push(_data.recordtime);
|
table_td.push(_data.dev_tmp);
|
}
|
}
|
createPageLine(xdata, sdata);
|
},
|
complete: function() {
|
layer.close(loading);
|
}
|
});
|
}
|
|
// 生成折线图
|
function createPageLine(xdata, sdata) {
|
var min,max;
|
if(xdata.length == 0) {
|
min = 0;
|
max = 1;
|
}else {
|
min = Math.floor(getMinFromArr(sdata)*0.9);
|
max = Math.ceil(getMaxFromArr(sdata)*1.1);
|
}
|
|
var option = {
|
title: {
|
text: '',
|
subtext: ''
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {},
|
grid: {
|
top:'7%',
|
left: '5%',
|
right: '5%',
|
bottom: '7%'
|
},
|
toolbox: {
|
show: false,
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: xdata
|
},
|
yAxis: {
|
min: min,
|
max: max,
|
type: 'value',
|
axisLabel: {
|
formatter: '{value} °C'
|
}
|
},
|
series: [
|
{
|
name:'设备温度',
|
type:'line',
|
data: sdata,
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
]
|
},
|
}
|
]
|
};
|
tmpLineGraph.resize();
|
tmpLineGraph.setOption(option);
|
}
|
|
// 导出报表
|
function exportData(data) {
|
var lineGraph = tmpLineGraph.getDataURL({
|
pixelRatio: 1,
|
backgroundColor: '#fff'
|
});
|
$('#tblTitle').val(data.stationname+'-设备温度');
|
|
$('#tmpLineGraph').val(lineGraph);
|
|
var tblThStr = table_th.join(',');
|
var tblTdStr = table_td.join('&');
|
$('#tblTh').val(tblThStr);
|
$('#tblTd').val(tblTdStr);
|
// console.log(lineGraph);
|
$('#all_picture').submit();
|
}
|
});
|
</script>
|
</body>
|
</html>
|
