水厂大屏数据ES查询
This commit is contained in:
Rue Ji
@ -1,11 +1,23 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>水厂大屏展示</title>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/JS/echarts3.0.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/JS/main/main_js.js"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
<!-- <script
|
||||
type="text/javascript"
|
||||
src="../../node_modules/jquery/dist/jquery.min.js"
|
||||
@ -24,7 +36,7 @@
|
||||
.screen-container {
|
||||
width: 6500px;
|
||||
height: 1800px;
|
||||
background-image: url('<%=request.getContextPath()%>/IMG/screen1.png');
|
||||
background-image: url("<%=request.getContextPath()%>/IMG/screen1.png");
|
||||
/* background-image: url("../../IMG/screen1.png"); */
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
@ -196,7 +208,7 @@
|
||||
.fullscreen-overlay .tip-content h2 {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
color: #46F2FF;
|
||||
color: #46f2ff;
|
||||
}
|
||||
.fullscreen-overlay .tip-content p {
|
||||
font-size: 24px;
|
||||
@ -208,6 +220,7 @@
|
||||
}
|
||||
.Middle2-value {
|
||||
position: absolute;
|
||||
left: 2450px;
|
||||
width: 100px;
|
||||
height: 31px;
|
||||
color: rgba(41, 241, 250, 1);
|
||||
@ -220,6 +233,69 @@
|
||||
top: 190.5px;
|
||||
left: 2470px;
|
||||
}
|
||||
#D_QueYCRJY1 {
|
||||
top: 242.5px;
|
||||
}
|
||||
#D_HaoYCRJY {
|
||||
top: 294.5px;
|
||||
}
|
||||
#D_HaoYCRJY2 {
|
||||
top: 346.5px;
|
||||
}
|
||||
#D_HaoYCWNND {
|
||||
top: 398.5px;
|
||||
}
|
||||
#D_MoCWNND {
|
||||
top: 450.5px;
|
||||
}
|
||||
#D_BengZYW {
|
||||
top: 571px;
|
||||
left: 2470px;
|
||||
}
|
||||
#D_TiSB101DL {
|
||||
top: 622px;
|
||||
left: 2487px;
|
||||
}
|
||||
#D_TiSB102DL {
|
||||
top: 673px;
|
||||
left: 2487px;
|
||||
}
|
||||
#D_TiSB103DL {
|
||||
top: 724px;
|
||||
left: 2487px;
|
||||
}
|
||||
#D_NingMSJYLL {
|
||||
top: 846px;
|
||||
left: 2465px;
|
||||
}
|
||||
#D_YaLSQNLL {
|
||||
top: 898px;
|
||||
left: 2465px;
|
||||
}
|
||||
#D_NingMSCGYW {
|
||||
top: 1020px;
|
||||
left: 2481px;
|
||||
}
|
||||
#D_YaLSQNLL {
|
||||
top: 1071px;
|
||||
left: 2481px;
|
||||
}
|
||||
#D_CiLSNJYLL {
|
||||
top: 1190px;
|
||||
left: 2466px;
|
||||
}
|
||||
#D_PACJYLL {
|
||||
top: 1241px;
|
||||
left: 2466px;
|
||||
}
|
||||
#D_CiLSNCGYW {
|
||||
top: 1364px;
|
||||
left: 2481px;
|
||||
}
|
||||
#D_PACCGYW {
|
||||
top: 1417px;
|
||||
left: 2481px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -378,11 +454,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 中间图表 -->
|
||||
<div class="Middle3">
|
||||
<!-- <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" /> -->
|
||||
<img src='<%=request.getContextPath()%>/IMG/monitor.png' style="width: 100%; height: 100%" />
|
||||
<img
|
||||
src="<%=request.getContextPath()%>/IMG/monitor.png"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="Middle4">
|
||||
@ -408,14 +486,14 @@
|
||||
slqs: {
|
||||
todayTotal: 6040, // 今日水量
|
||||
yesterdayTotal: 4197, // 昨日水量
|
||||
monthTotal: 12356 // 本月水量
|
||||
monthTotal: 12356, // 本月水量
|
||||
},
|
||||
|
||||
// 泥处理指标 (ncl)
|
||||
ncl: {
|
||||
val1: 0, // 泥处理指标1
|
||||
val2: 200, // 泥处理指标2
|
||||
val3: 4.89 // 泥处理指标3
|
||||
val3: 4.89, // 泥处理指标3
|
||||
},
|
||||
|
||||
// 药耗数据 (yaohao)
|
||||
@ -427,32 +505,101 @@
|
||||
|
||||
// 质量指标表格数据
|
||||
qualityTable: [
|
||||
{ param: "COD (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "TP (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "NH3–N (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "TN (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "PH (mg/L)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "SS", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" },
|
||||
{ param: "温度(℃)", current: 13.186, avg: 12.996, max: 14.666, min: 11.92, standard: "0.000–20.000" }
|
||||
{
|
||||
param: "COD (mg/L)",
|
||||
current: 13.186,
|
||||
avg: 12.996,
|
||||
max: 14.666,
|
||||
min: 11.92,
|
||||
standard: "0.000–20.000",
|
||||
},
|
||||
{
|
||||
param: "TP (mg/L)",
|
||||
current: 13.186,
|
||||
avg: 12.996,
|
||||
max: 14.666,
|
||||
min: 11.92,
|
||||
standard: "0.000–20.000",
|
||||
},
|
||||
{
|
||||
param: "NH3–N (mg/L)",
|
||||
current: 13.186,
|
||||
avg: 12.996,
|
||||
max: 14.666,
|
||||
min: 11.92,
|
||||
standard: "0.000–20.000",
|
||||
},
|
||||
{
|
||||
param: "TN (mg/L)",
|
||||
current: 13.186,
|
||||
avg: 12.996,
|
||||
max: 14.666,
|
||||
min: 11.92,
|
||||
standard: "0.000–20.000",
|
||||
},
|
||||
{
|
||||
param: "PH (mg/L)",
|
||||
current: 13.186,
|
||||
avg: 12.996,
|
||||
max: 14.666,
|
||||
min: 11.92,
|
||||
standard: "0.000–20.000",
|
||||
},
|
||||
{
|
||||
param: "SS",
|
||||
current: 13.186,
|
||||
avg: 12.996,
|
||||
max: 14.666,
|
||||
min: 11.92,
|
||||
standard: "0.000–20.000",
|
||||
},
|
||||
{
|
||||
param: "温度(℃)",
|
||||
current: 13.186,
|
||||
avg: 12.996,
|
||||
max: 14.666,
|
||||
min: 11.92,
|
||||
standard: "0.000–20.000",
|
||||
},
|
||||
],
|
||||
|
||||
// 七日水量图表数据
|
||||
sevenDaysChart: {
|
||||
xAxis: ["11-10", "11-11", "11-12", "11-13", "11-14", "11-15", "11-16", "11-17"],
|
||||
data: [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600]
|
||||
xAxis: [
|
||||
"11-10",
|
||||
"11-11",
|
||||
"11-12",
|
||||
"11-13",
|
||||
"11-14",
|
||||
"11-15",
|
||||
"11-16",
|
||||
"11-17",
|
||||
],
|
||||
data: [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600],
|
||||
},
|
||||
|
||||
// 泥处理图表数据
|
||||
nclChart: {
|
||||
xAxis: ["2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00"],
|
||||
data: [120, 160, 90, 250, 170, 340, 280, 330, 80, 260]
|
||||
xAxis: [
|
||||
"2:00",
|
||||
"4:00",
|
||||
"6:00",
|
||||
"8:00",
|
||||
"10:00",
|
||||
"12:00",
|
||||
"14:00",
|
||||
"16:00",
|
||||
"18:00",
|
||||
"20:00",
|
||||
],
|
||||
data: [120, 160, 90, 250, 170, 340, 280, 330, 80, 260],
|
||||
},
|
||||
|
||||
// 质量图表数据
|
||||
qualityChart: {
|
||||
xAxis: ["11", "12", "13", "14", "15", "16", "17"],
|
||||
data: [8, 13, 9, 14, 21, 14, 18]
|
||||
}
|
||||
data: [8, 13, 9, 14, 21, 14, 18],
|
||||
},
|
||||
};
|
||||
|
||||
// 更新水量显示
|
||||
@ -480,14 +627,27 @@
|
||||
function updateQualityTable() {
|
||||
var tbody = $(".quality-table tbody");
|
||||
tbody.empty();
|
||||
pageData.qualityTable.forEach(function(item) {
|
||||
var row = "<tr>" +
|
||||
"<td>" + item.param + "</td>" +
|
||||
"<td>" + item.current + "</td>" +
|
||||
"<td>" + item.avg + "</td>" +
|
||||
"<td>" + item.max + "</td>" +
|
||||
"<td>" + item.min + "</td>" +
|
||||
"<td>" + item.standard + "</td>" +
|
||||
pageData.qualityTable.forEach(function (item) {
|
||||
var row =
|
||||
"<tr>" +
|
||||
"<td>" +
|
||||
item.param +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
item.current +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
item.avg +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
item.max +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
item.min +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
item.standard +
|
||||
"</td>" +
|
||||
"</tr>";
|
||||
tbody.append(row);
|
||||
});
|
||||
@ -499,7 +659,7 @@
|
||||
url: apiUrl,
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function(response) {
|
||||
success: function (response) {
|
||||
// 假设接口返回的数据格式如下：
|
||||
// {
|
||||
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
|
||||
@ -514,17 +674,20 @@
|
||||
if (response.slqs) pageData.slqs = response.slqs;
|
||||
if (response.ncl) pageData.ncl = response.ncl;
|
||||
if (response.yaohao) pageData.yaohao = response.yaohao;
|
||||
if (response.qualityTable) pageData.qualityTable = response.qualityTable;
|
||||
if (response.sevenDaysChart) pageData.sevenDaysChart = response.sevenDaysChart;
|
||||
if (response.qualityTable)
|
||||
pageData.qualityTable = response.qualityTable;
|
||||
if (response.sevenDaysChart)
|
||||
pageData.sevenDaysChart = response.sevenDaysChart;
|
||||
if (response.nclChart) pageData.nclChart = response.nclChart;
|
||||
if (response.qualityChart) pageData.qualityChart = response.qualityChart;
|
||||
if (response.qualityChart)
|
||||
pageData.qualityChart = response.qualityChart;
|
||||
|
||||
refreshPage();
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
error: function (xhr, status, error) {
|
||||
console.error("获取数据失败:", error);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -544,39 +707,41 @@
|
||||
var elem = document.documentElement;
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
} else if (elem.webkitRequestFullscreen) { /* Safari */
|
||||
} else if (elem.webkitRequestFullscreen) {
|
||||
/* Safari */
|
||||
elem.webkitRequestFullscreen();
|
||||
} else if (elem.msRequestFullscreen) { /* IE11 */
|
||||
} else if (elem.msRequestFullscreen) {
|
||||
/* IE11 */
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
// 隐藏提示遮罩
|
||||
document.getElementById('fullscreenOverlay').style.display = 'none';
|
||||
document.getElementById("fullscreenOverlay").style.display = "none";
|
||||
}
|
||||
|
||||
// 监听全屏状态变化
|
||||
document.addEventListener('fullscreenchange', function() {
|
||||
var overlay = document.getElementById('fullscreenOverlay');
|
||||
document.addEventListener("fullscreenchange", function () {
|
||||
var overlay = document.getElementById("fullscreenOverlay");
|
||||
if (!document.fullscreenElement) {
|
||||
// 退出全屏时显示提示
|
||||
overlay.style.display = 'flex';
|
||||
overlay.style.display = "flex";
|
||||
}
|
||||
});
|
||||
document.addEventListener('webkitfullscreenchange', function() {
|
||||
var overlay = document.getElementById('fullscreenOverlay');
|
||||
document.addEventListener("webkitfullscreenchange", function () {
|
||||
var overlay = document.getElementById("fullscreenOverlay");
|
||||
if (!document.webkitFullscreenElement) {
|
||||
overlay.style.display = 'flex';
|
||||
overlay.style.display = "flex";
|
||||
}
|
||||
});
|
||||
|
||||
// 获取水量统计数据
|
||||
function fetchSlqsData() {
|
||||
$.ajax({
|
||||
url: '<%=request.getContextPath()%>/watervolume/getStatistics.do',
|
||||
type: 'GET',
|
||||
data: { companyKey: 'DEV067' },
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
console.log('水量统计数据:', response);
|
||||
url: "<%=request.getContextPath()%>/watervolume/getStatistics.do",
|
||||
type: "GET",
|
||||
data: { companyKey: "DEV067" },
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
console.log("水量统计数据:", response);
|
||||
if (response) {
|
||||
// 兼容不同的返回字段名
|
||||
pageData.slqs.todayTotal = response.todayTotal || 0;
|
||||
@ -585,12 +750,15 @@
|
||||
updateSlqs();
|
||||
|
||||
// 解析七日水量数据 sevenDaysTotal
|
||||
if (response.sevenDaysTotal && Array.isArray(response.sevenDaysTotal)) {
|
||||
if (
|
||||
response.sevenDaysTotal &&
|
||||
Array.isArray(response.sevenDaysTotal)
|
||||
) {
|
||||
var xAxis = [];
|
||||
var data = [];
|
||||
response.sevenDaysTotal.forEach(function(item) {
|
||||
response.sevenDaysTotal.forEach(function (item) {
|
||||
// 日期格式: "2026-03-07" -> "03-07"
|
||||
var dateStr = item.date || '';
|
||||
var dateStr = item.date || "";
|
||||
if (dateStr.length >= 10) {
|
||||
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
|
||||
} else {
|
||||
@ -605,9 +773,9 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('获取水量统计数据失败:', error);
|
||||
}
|
||||
error: function (xhr, status, error) {
|
||||
console.error("获取水量统计数据失败:", error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@ -650,12 +818,49 @@
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取点位实时值
|
||||
* @param unitId
|
||||
* @param mpointCode
|
||||
* @param valueId
|
||||
* @param textId
|
||||
*/
|
||||
function getValue(unitId, mpointCode, valueId, textId) {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "<%=request.getContextPath()%>/work/mpoint/getValue4Es.do?unitId=" + unitId + "&mpointCode=" + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function (res) {
|
||||
console.log("获取数据失败:", res);
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
if (data != null && data != "") {
|
||||
var data = eval("(" + data + ")");
|
||||
//只限制上限为0.8 下限根据设定值自己设
|
||||
// var maxvalue = data.alarmmax/0.8;
|
||||
// var minvalue = data.alarmmin/maxvalue;
|
||||
// var acvalue = data.parmvalue/maxvalue*100;
|
||||
// var data = {"processsectioncode":"28","parmname":"电动碟阀11_关到位","id":"D_PACDSYH","numtail":"0","signaltype":"AI","active":"启用","sourceType":"auto","mpointcode":"D_PACDSYH","disname":"电动碟阀11_关到位","valuetype":"sql","directtype":"1","rate":1.0000000000,"subscriptionStatus":0,"mpointid":"D_PACDSYH","triggeralarm":"1","parmvalue":106,"measuredt":"2026-02-26T05:55:14Z","bizid":"0533JS"}
|
||||
console.log('===data', data)
|
||||
$("#" + valueId).html(data.parmvalue || 9999); //赋值
|
||||
if (data.unit == undefined) {
|
||||
$("#" + textId).html(data.parmname || 9999); //赋值名称
|
||||
} else {
|
||||
$("#" + textId).html(data.parmname + " (" + data.unit + ")" + 9999); //赋值名称+单位
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD 格式
|
||||
function formatDate(date) {
|
||||
var year = date.getFullYear();
|
||||
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
var day = date.getDate().toString().padStart(2, '0');
|
||||
return year + '-' + month + '-' + day;
|
||||
var month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
var day = date.getDate().toString().padStart(2, "0");
|
||||
return year + "-" + month + "-" + day;
|
||||
}
|
||||
|
||||
$(function () {
|
||||
@ -675,36 +880,40 @@
|
||||
|
||||
// 批量获取点位数据并更新显示
|
||||
var pointList = [
|
||||
'D_PACDSYH', 'D_YiSNDSYH', 'D_CiLSNDSYH',
|
||||
'D_YanYCORP',
|
||||
'D_QueYCRJY1',
|
||||
'D_HaoYCRJY',
|
||||
'D_HaoYCRJY2',
|
||||
'D_HaoYCWNND',
|
||||
'D_MoCWNND',
|
||||
'D_BengZYW',
|
||||
'D_TiSB101DL',
|
||||
'D_TiSB102DL',
|
||||
'D_TiSB103DL',
|
||||
'D_NingMSJYLL',
|
||||
'D_YaLSQNLL',
|
||||
'D_NingMSCGYW',
|
||||
'D_CiLSNJYLL',
|
||||
'D_PACJYLL',
|
||||
'D_CiLSNCGYW',
|
||||
'D_PACCGYW'
|
||||
"D_PACDSYH",
|
||||
"D_YiSNDSYH",
|
||||
"D_CiLSNDSYH",
|
||||
"D_YanYCORP",
|
||||
"D_QueYCRJY1",
|
||||
"D_HaoYCRJY",
|
||||
"D_HaoYCRJY2",
|
||||
"D_HaoYCWNND",
|
||||
"D_MoCWNND",
|
||||
"D_BengZYW",
|
||||
"D_TiSB101DL",
|
||||
"D_TiSB102DL",
|
||||
"D_TiSB103DL",
|
||||
"D_NingMSJYLL",
|
||||
"D_YaLSQNLL",
|
||||
"D_NingMSCGYW",
|
||||
"D_CiLSNJYLL",
|
||||
"D_PACJYLL",
|
||||
"D_CiLSNCGYW",
|
||||
"D_PACCGYW",
|
||||
];
|
||||
|
||||
pointList.forEach(function(mpcode) {
|
||||
fetchPointData(mpcode).then(function(res) {
|
||||
if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
||||
var lastData = res[0].data[res[0].data.length - 1];
|
||||
var value = lastData[1]; // 取最后一个数据点的值
|
||||
$('#' + mpcode).text(value || 0);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
console.error('点位数据获取失败:', mpcode, error);
|
||||
});
|
||||
pointList.forEach(function (mpcode) {
|
||||
// fetchPointData(mpcode).then(function(res) {
|
||||
// $('#' + mpcode).text(1000 || 0);
|
||||
// // if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
||||
// // var lastData = res[0].data[res[0].data.length - 1];
|
||||
// // var value = lastData[1]; // 取最后一个数据点的值
|
||||
// // $('#' + mpcode).text(1000 || 0);
|
||||
// // }
|
||||
// }).catch(function(error) {
|
||||
// console.error('点位数据获取失败:', mpcode, error);
|
||||
// });
|
||||
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`);
|
||||
});
|
||||
});
|
||||
|
||||
@ -721,7 +930,7 @@
|
||||
if (data && data.length > 0) {
|
||||
var dataMax = Math.max.apply(null, data);
|
||||
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
|
||||
yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000;
|
||||
yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000;
|
||||
if (yMax < 10000) yMax = 10000; // 最小值1万
|
||||
}
|
||||
|
||||
@ -734,12 +943,18 @@
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 18
|
||||
fontSize: 18,
|
||||
},
|
||||
formatter: function(params) {
|
||||
formatter: function (params) {
|
||||
var data = params[0];
|
||||
return data.name + '<br/>' + data.seriesName + ': ' + data.value.toLocaleString();
|
||||
}
|
||||
return (
|
||||
data.name +
|
||||
"<br/>" +
|
||||
data.seriesName +
|
||||
": " +
|
||||
data.value.toLocaleString()
|
||||
);
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// left: 60,
|
||||
|
||||
Reference in New Issue
Block a user