<!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('折线图')" />
|
<th:block th:include="include :: bootstrap-select-css" />
|
<link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
|
<link href="/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.18.3" rel="stylesheet"/>
|
<link href="/css/animate.min.css?v=20210831" rel="stylesheet"/>
|
<link href="/css/style.min.css?v=20210831" rel="stylesheet"/>
|
<link href="/ruoyi/css/ry-ui.css?v=4.7.8" rel="stylesheet"/>
|
<style>
|
.layui-tab {
|
margin: 120px 0 !important;
|
text-align: left !important;
|
}
|
.layui-input-block {
|
margin-left: 90px!important;
|
min-height: 36px;
|
}
|
.layui-form-label {
|
position: relative;
|
float: left!important;
|
display: block;
|
padding: 1px 0px!important;
|
width: 80px !important;
|
font-weight: 400;
|
line-height: 20px;
|
text-align: right;
|
margin-left: -2px!important;
|
}
|
.active-border {
|
border-color: #16b777 !important; /* 覆盖layui的默认边框颜色 */
|
}
|
|
</style>
|
</head>
|
<body class="gray-bg">
|
<div class="container-div">
|
<div class="row">
|
<div class="col-sm-12 search-collapse">
|
<form id="devicedata-form" class="layui-form">
|
<div class="select-list">
|
<ul>
|
<li>
|
<label class="layui-form-label">选择生产线：</label>
|
<div class="layui-input-block">
|
<select id="lineId" lay-filter="lineConfigFilter" >
|
<option th:each="lineConfig : ${bizLineConfigList}" th:text="${lineConfig.lineName}" th:value="${lineConfig.lineId}"></option>
|
</select>
|
</div>
|
</li>
|
<li>
|
<label class="layui-form-label">选择类型：</label>
|
<div class="layui-input-block">
|
<select id="pointType" lay-filter="pointTypeFilter" >
|
<option th:each="pointType : ${bizPointDictList}" th:text="${pointType.name}" th:value="${pointType.code}"></option>
|
</select>
|
</div>
|
</li>
|
<li>
|
<label class="layui-form-label">选择点位：</label>
|
<div class="layui-input-block">
|
<select id="pointId" >
|
<option th:each="point : ${bizPointList}" th:text="${point.name}" th:value="${point.id}"></option>
|
</select>
|
</div>
|
</li>
|
|
<li class="select-time">
|
<label class="layui-form-label">选择时间： </label>
|
<div class="layui-input-block">
|
<input type="text" class="time-input " id="beginTime" placeholder="开始时间" name="params[beginTime]" style="width: 150px;height:31px"/>
|
<span>-</span>
|
<input type="text" class="time-input " id="finishTime" placeholder="结束时间" name="params[endTime]" style="width: 150px;height:31px"/>
|
</div>
|
</li>
|
<li >
|
<a class="btn btn-primary btn-rounded btn-sm" onclick="searchBtn()"><i class="fa fa-search"></i> 搜索</a>
|
</li>
|
</ul>
|
</div>
|
</form>
|
</div>
|
<div class="layui-tab layui-tab-brief">
|
<ul class="layui-tab-title">
|
<li class="layui-this">走势图</li>
|
<li>表格</li>
|
</ul>
|
<div class="layui-tab-content">
|
<div class="layui-tab-item layui-show">
|
<div class="layui-fluid ew-console-wrapper">
|
<!-- 统计图表 -->
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-md4 select-table layui-col-sm6" style="margin-top: 20px">
|
<div >
|
<div class="layui-card-header">走势图</div>
|
<div class="layui-card-body">
|
<div id="consoleChartsMonth" style="height: 450px;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-tab-item">
|
<div class="col-sm-12 select-table table-striped">
|
<div class="layui-fluid ew-console-wrapper">
|
<table id="bootstrap-table"></table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<th:block th:include="include :: footer" />
|
<th:block th:include="include :: bootstrap-table-export-js" />
|
<script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.18.3}"></script>
|
|
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
|
<script th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
|
<script th:src="@{/ajax/libs/echarts/china.js}"></script>
|
<script th:src="@{/ruoyi/js/common.js?v=4.7.8}"></script>
|
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.8}"></script>
|
<!-- bootstrap-table 表格插件 -->
|
<script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.18.3"></script>
|
<script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.18.3"></script>
|
<script th:inline="javascript">
|
var prefix = ctx+"baseDeviceData"
|
$(function() {
|
var now = new Date();
|
var prevDay = new Date(now);
|
prevDay.setDate(prevDay.getDate() - 1);
|
var startTime = formatDate(prevDay);
|
$("#beginTime").val(startTime)
|
var endTime =formatDate(now);
|
$("#finishTime").val(endTime)
|
if ($(".select-time").length > 0) {
|
layui.use(['laydate','form'], function () {
|
var laydate = layui.laydate;
|
var form = layui.form;
|
startLayDate = laydate.render({
|
elem: '#beginTime',
|
max: $('#finishTime').val(),
|
theme: 'molv',
|
type: 'datetime',
|
trigger: 'click',
|
done: function (value, date) {
|
$('#beginTime').removeClass('active-border');
|
// 结束时间大于开始时间
|
if (value !== '') {
|
endLayDate.config.min.year = date.year;
|
endLayDate.config.min.month = date.month - 1;
|
endLayDate.config.min.date = date.date;
|
} else {
|
endLayDate.config.min.year = '';
|
endLayDate.config.min.month = '';
|
endLayDate.config.min.date = '';
|
}
|
$('#finishTime').trigger('click');
|
}
|
});
|
endLayDate = laydate.render({
|
elem: '#finishTime',
|
// min: $('#beginTime').val(),
|
theme: 'molv',
|
type: 'datetime',
|
trigger: 'click',
|
done: function (value, date) {
|
$('#finishTime').removeClass('active-border');
|
// 开始时间小于结束时间
|
if (value !== '') {
|
startLayDate.config.max.year = date.year;
|
startLayDate.config.max.month = date.month - 1;
|
startLayDate.config.max.date = date.date;
|
} else {
|
startLayDate.config.max.year = '2099';
|
startLayDate.config.max.month = '12';
|
startLayDate.config.max.date = '31';
|
}
|
}
|
});
|
form.on('select(lineConfigFilter)', function(data){
|
var lineId = data.value;
|
var pointType=$("#pointType").val();
|
getPointData(lineId,pointType,form)
|
});
|
form.on('select(pointTypeFilter)', function(data){
|
var pointType = data.value;
|
var lineId=$("#lineId").val();
|
|
getPointData(lineId,pointType,form)
|
});
|
// 监听输入框的点击事件
|
$('#beginTime').on('click', function() {
|
$('#beginTime').addClass('active-border'); // 添加激活边框的类
|
});
|
$(document).on('click', function(e) {
|
if (!$(e.target).closest('#beginTime').length) {
|
$('#beginTime').removeClass('active-border');
|
}
|
});
|
|
$('#finishTime').on('click', function() {
|
$('#finishTime').addClass('active-border'); // 添加激活边框的类
|
});
|
$(document).on('click', function(e) {
|
if (!$(e.target).closest('#finishTime').length) {
|
$('#finishTime').removeClass('active-border');
|
}
|
});
|
});
|
}
|
var pointId=$("#pointId").val();
|
if(pointId==''||pointId==undefined||pointId==null){
|
$.modal.alertError("请填写点位");
|
}
|
getList();
|
getData();
|
});
|
function getList(){
|
var options = {
|
url: prefix + "/list",
|
queryParams: queryParams,
|
escape: true,
|
showPageGo: true,
|
rememberSelected: true,
|
showSearch: false,
|
showRefresh: true,
|
showToggle: true,
|
showColumns: true,
|
clickToSelect: true,
|
columns: [{
|
checkbox: true
|
},
|
{
|
title: "序号",
|
formatter: function (value, row, index) {
|
return $.table.serialNumber(index);
|
}
|
},
|
{
|
field: 'updateTime',
|
title: '上传时间',
|
align: 'center',
|
sortable: true
|
},
|
{
|
field: 'propValue',
|
title: '属性值'
|
},
|
{
|
field: 'statusStr',
|
title: '数据有效性'
|
},
|
{
|
field: 'source',
|
title: '数据来源'
|
}
|
]
|
};
|
$.table.init(options);
|
}
|
function searchBtn(){
|
var pointId=$("#pointId").val();
|
if(pointId==''||pointId==undefined||pointId==null){
|
$.modal.alertError("请填写点位");
|
return;
|
}
|
getData();
|
$.table.search('devicedata-form', 'bootstrap-table');
|
}
|
function getData(){
|
var beginTime = getbeginTime();
|
var finishTime = getFinishTime();
|
var pointId=$("#pointId").val();
|
$.ajax({
|
url: prefix+"/getBaseDeviceData",
|
dataType: 'json',
|
type: 'post',
|
data : {
|
"beginTime": beginTime,
|
"finishTime": finishTime,
|
"pointId":pointId,
|
},
|
async : false,
|
success: function (data) {
|
var lineData= [{data:data}]
|
showEchart(lineData);
|
}
|
|
});
|
|
}
|
function showEchart(lineData,beginTime,finishTime){
|
layui.use(['layer'], function () {
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
|
/** 渲染月统计图表 */
|
var myCharts = echarts.init(document.getElementById('consoleChartsMonth'));
|
var options = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {lineStyle: {color: '#E0E0E0'}},
|
formatter: function (params) {
|
let res = '<div>' +'<p style="text-align: center">'+ params[0].seriesName + '</p>'+'</div>'; // 使用HTML和CSS自定义样式
|
res += '<div>' +'<p>' +"时间: "+ echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', params[0].value[0]) +'</p>'+'<p>' + '数值: ' + params[0].value[1] + '</p>' +'</div>'; // 格式化时间并显示值
|
return res;
|
}
|
},
|
color: ['#10B4E8', '#FFA800'],
|
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
|
xAxis: {
|
name: '时间',
|
nameTextStyle: {color: '#595959'},
|
type: 'time',
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
min: beginTime,
|
max: finishTime,
|
axisTick: {alignWithLabel: true},
|
axisLabel: {
|
color: '#000000'
|
}
|
},
|
yAxis: {
|
name: '数值',
|
nameTextStyle: {color: '#595959'},
|
type: 'value',
|
boundaryGap: ['0', '20%'],
|
axisTick: {show: false},
|
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 1]},
|
axisLabel: {color: '#8c8c8c'},
|
splitLine: {show: false},
|
splitArea: {show: false},
|
minInterval: 1
|
},
|
// series: lineData,
|
series: [
|
{name: '点位数据', type: 'line', smooth: true},
|
],
|
dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
start: 0, // 左边在 0% 的位置。
|
end: 100 // 右边在 100% 的位置。
|
}]
|
};
|
myCharts.setOption(options);
|
// // 赋值
|
myCharts.setOption({
|
series: lineData
|
});
|
|
/** 窗口大小改变事件 */
|
window.onresize = function () {
|
myCharts.resize();
|
};
|
|
});
|
}
|
function formatDate(date) {
|
var year = date.getFullYear();
|
var month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
|
var day = String(date.getDate()).padStart(2, '0');
|
var hours = String(date.getHours()).padStart(2, '0');
|
var minutes = String(date.getMinutes()).padStart(2, '0');
|
var seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
}
|
function queryParams(params) {
|
var search = $.table.queryParams(params);
|
var beginTime = getbeginTime();
|
var finishTime = getFinishTime();
|
var pointId=$("#pointId").val();
|
search.pointId =pointId;
|
search.beginTime =beginTime;
|
search.finishTime =finishTime;
|
return search;
|
}
|
function getbeginTime(){
|
var beginTime =$("#beginTime").val();
|
if(beginTime==undefined||beginTime==''){
|
var now = new Date();
|
var prevDay = new Date(now);
|
prevDay.setDate(prevDay.getDate() - 1);
|
beginTime = formatDate(prevDay);
|
}
|
return beginTime;
|
|
}
|
function getFinishTime(){
|
var finishTime = $("#finishTime").val();
|
if (finishTime==undefined||finishTime==''){
|
var now = new Date();
|
finishTime =formatDate(now);
|
}
|
return finishTime;
|
}
|
|
function getPointData(lineId,pointType,form) {
|
$.ajax({
|
type: "post",
|
url: prefix + "/getPointData",
|
data: {
|
"lineId": lineId,
|
"pointType": pointType
|
},
|
dataType: "json",
|
success: function (data) {
|
var tmp = '';
|
for (var i in data) {
|
tmp += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
|
|
}
|
$("#pointId").html(tmp);
|
form.render();
|
}, error: function () {
|
layer.alert('请求失败');
|
}
|
});
|
}
|
</script>
|
</body>
|
</html>
|
