change - 设备曲线
parent
1934c78dd2
commit
ef06745bd7
@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('传感器数据趋势')"/>
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<form id="formId">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="hidden" id="sensorId" name="sensorId"/>
|
||||
</li>
|
||||
<li class="select-time">
|
||||
<label>采集时间：</label>
|
||||
<input type="text" class="time-input" id="startTime" placeholder="开始时间"
|
||||
name="beginCollectTime"/>
|
||||
<span>-</span>
|
||||
<input type="text" class="time-input" id="endTime" placeholder="结束时间"
|
||||
name="endCollectTime"/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<label>显示内容：</label>
|
||||
<select id="optionStatus">
|
||||
<!--<option value="0">所有</option>-->
|
||||
<option value="temperatureTrend">趋势分析</option>
|
||||
<option value="historyTable">历史数据</option>
|
||||
</select>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="searchOnclick()"><i
|
||||
class="fa fa-search"></i> 搜索</a>
|
||||
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
|
||||
class="fa fa-refresh"></i> 重置</a>
|
||||
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="exportData()">
|
||||
<i class="fa fa-download"></i> 导出
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 select-table" style="height:400px" id="temperatureTrend">
|
||||
<div style="width: 100%;height: 100%;" id="trendEcharts"></div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 select-table table-striped" id="historyTable">
|
||||
<table id="bootstrap-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer"/>
|
||||
<th:block th:include="include :: datetimepicker-js"/>
|
||||
<!--表格导出-->
|
||||
<th:block th:include="include :: bootstrap-table-export-js" />
|
||||
<th:block th:include="include :: FileSaver-xlsx-Base64-js" />
|
||||
|
||||
<th:block th:include="include :: echarts-js" />
|
||||
|
||||
<script th:inline="javascript">
|
||||
|
||||
var prefix = ctx + "record/recordSensorData";
|
||||
|
||||
$(() => {
|
||||
$("#historyTable").hide();
|
||||
window.onload = function () {
|
||||
document.getElementById('optionStatus').addEventListener('change',function(){
|
||||
$("#temperatureTrend").hide();
|
||||
$("#historyTable").hide();
|
||||
$("#"+this.value).show();
|
||||
},false);
|
||||
}
|
||||
|
||||
tableRefresh();
|
||||
temperatureTrend();
|
||||
})
|
||||
|
||||
const searchOnclick = function(){
|
||||
tableRefresh();
|
||||
temperatureTrend();
|
||||
}
|
||||
|
||||
/*曲线趋势*/
|
||||
const temperatureTrend = function (){
|
||||
let sensorId = [[${sensorId}]].split(",");
|
||||
let formData = new FormData();
|
||||
formData.append("sensorId", sensorId[0]);
|
||||
formData.append("sensorType", sensorId[1]);
|
||||
formData.append("beginCollectTime", $("#startTime").val());
|
||||
formData.append("endCollectTime", $("#endTime").val());
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/record/recordSensorData/getTemperatureTrendJson",
|
||||
contentType: "application/json;charset=utf-8",
|
||||
dataType: "json",
|
||||
data: formData,
|
||||
json: 'callback',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function (json) {
|
||||
lineCharts(json,document.getElementById("trendEcharts"));
|
||||
},
|
||||
error: function () {
|
||||
alert("错误");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const tableRefresh = function () {
|
||||
let sensorId = [[${sensorId}]].split(",");
|
||||
let formData = new FormData();
|
||||
formData.append("sensorId", sensorId[0]);
|
||||
formData.append("sensorType", sensorId[1]);
|
||||
formData.append("beginCollectTime", $("#startTime").val());
|
||||
formData.append("endCollectTime", $("#endTime").val());
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/record/recordSensorData/list",
|
||||
contentType: "application/json;charset=utf-8",
|
||||
dataType: "json",
|
||||
data: formData,
|
||||
json: 'callback',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function (json) {
|
||||
|
||||
const sensorTypeArray = getparamsFunction(sensorId[1]);
|
||||
|
||||
const columnsArray = [];
|
||||
|
||||
if (sensorTypeArray.length > 0) {
|
||||
columnsArray.push({
|
||||
field: "uid",
|
||||
title: "设备UID",
|
||||
width: 160,
|
||||
height: 60,
|
||||
colspan: 1,
|
||||
rowspan: 1,
|
||||
align: "center"
|
||||
});
|
||||
|
||||
columnsArray.push({
|
||||
field: "sensorId",
|
||||
title: "传感器编号",
|
||||
width: 160,
|
||||
height: 60,
|
||||
colspan: 1,
|
||||
rowspan: 1,
|
||||
align: "center"
|
||||
});
|
||||
|
||||
columnsArray.push({
|
||||
field: "datatype",
|
||||
title: "类型",
|
||||
width: 160,
|
||||
height: 60,
|
||||
colspan: 1,
|
||||
rowspan: 1,
|
||||
align: "center"
|
||||
});
|
||||
|
||||
if (json.length > 0) {
|
||||
|
||||
const jsonObj = Object.keys(json[0]);
|
||||
for (let i = 0; i < jsonObj.length; i++) {//Object.keys(obj) 获取key名称
|
||||
let property = jsonObj[i];
|
||||
if (property != "uid" && property != "sensorId" && property != "collectTime" && property != "datatype") {
|
||||
columnsArray.push({
|
||||
field: property,
|
||||
title: typeof (sensorTypeArray.find(x => x.paramTitle.includes(property))) == "undefined" ? property : sensorTypeArray.find(x => x.paramTitle.includes(property)).paramText,
|
||||
width: 140,
|
||||
align: "center"
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
columnsArray.push({
|
||||
field: "collectTime",
|
||||
title: "采集时间",
|
||||
width: 160,
|
||||
height: 60,
|
||||
colspan: 1,
|
||||
rowspan: 1,
|
||||
align: "center",
|
||||
formatter: function(value, row, index) {
|
||||
return value.replace("T"," ");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$('#bootstrap-table').bootstrapTable('destroy');
|
||||
$('#bootstrap-table').bootstrapTable({
|
||||
data: json,
|
||||
striped: true,
|
||||
cache: false,
|
||||
pageNumber: 1,
|
||||
pagination: true,
|
||||
showColumns: true,
|
||||
sidePagination: 'client',
|
||||
pageSize: 10,
|
||||
pageList: [5, 10, 15, 20, 25, 50],
|
||||
showRefresh: true,
|
||||
columns: columnsArray
|
||||
});
|
||||
|
||||
columnsArray.push();
|
||||
},
|
||||
error: function () {
|
||||
alert("错误");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getparamsFunction = function (sensorTypeId) {
|
||||
var returnData;
|
||||
let formData = new FormData();
|
||||
formData.append("sensorTypeId", sensorTypeId);
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/base/sysParamConfig/getParameterNotVisibleFlag",
|
||||
data: formData,
|
||||
contentType: "application/json;charset=utf-8",
|
||||
dataType: "json",
|
||||
json: 'callback',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
async: false,
|
||||
success: function (json) {
|
||||
returnData = json;
|
||||
},
|
||||
error: function () {
|
||||
alert("错误");
|
||||
}
|
||||
});
|
||||
return returnData;
|
||||
}
|
||||
|
||||
//echarts折线图
|
||||
const lineCharts =function (res, id) {
|
||||
let charts = echarts.init(id);
|
||||
let options = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:res.legend
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data:res.xAxis
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: res.series
|
||||
};
|
||||
|
||||
charts.setOption(options);
|
||||
$(window).resize(charts.resize);
|
||||
}
|
||||
|
||||
// 自定义按钮导出数据
|
||||
function exportData(){
|
||||
$('#bootstrap-table').tableExport({
|
||||
type: 'excel',
|
||||
exportDataType: "basic",
|
||||
fileName: '历史数据报表',//下载文件名称
|
||||
});
|
||||
}
|
||||
|
||||
<!-- laydate示例 -->
|
||||
layui.use('laydate', function () {
|
||||
var laydate = layui.laydate;
|
||||
|
||||
laydate.render({
|
||||
elem: '#startTime',
|
||||
type: 'datetime',
|
||||
trigger: 'click'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#endTime',
|
||||
type: 'datetime',
|
||||
trigger: 'click'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue