xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏逻辑更新、首页更新、

Browse Source
This commit is contained in:
Rue Ji
2026-03-12 00:17:39 +08:00
parent 4ca5d82ac0
commit 0d641d8d4f
5 changed files with 658 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

543
src/main/webapp/jsp/bigScreen.jsp
View File

@ -191,10 +191,109 @@
}
.Middle3 {
width: 2100px;
width: 2800px;
height: 1600px;
position: absolute;
top: 300px;
left: 2700px;
top: 206px;
left: 2376px;
}
.Middle3 img,
.Middle3 .monitor-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* 绿色圆点样式 */
.green-dot {
position: absolute;
width: 40px;
height: 40px;
background: #00ff00;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00;
z-index: 10000;
transition: all 0.3s ease;
pointer-events: auto;
}
.green-dot:hover {
transform: scale(1.3);
box-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00;
}
/* 数据弹窗样式 */
.dot-popup {
position: absolute;
background: rgba(0, 30, 60, 0.98);
border: 3px solid #00ff00;
border-radius: 15px;
padding: 30px 40px;
z-index: 99999;
min-width: 400px;
max-width: 600px;
display: none;
box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
}
.dot-popup.show {
display: block;
}
.dot-popup-title {
color: #00ff00;
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
border-bottom: 2px solid rgba(0, 255, 0, 0.5);
padding-bottom: 15px;
}
.dot-popup-content {
color: #fff;
font-size: 24px;
}
.dot-popup-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dot-popup-item:last-child {
border-bottom: none;
}
.dot-popup-label {
color: #7ef3ff;
font-size: 24px;
}
.dot-popup-value {
color: #fff;
font-weight: bold;
font-size: 24px;
}
.dot-popup-close {
position: absolute;
top: 15px;
right: 20px;
color: #fff;
font-size: 36px;
cursor: pointer;
}
.dot-popup-close:hover {
color: #00ff00;
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(0, 0, 0, 0.5);*/
z-index: 99998;
display: none;
}
.popup-overlay.show {
display: block;
}
/* 全屏提示遮罩 */
.fullscreen-overlay {
@ -422,6 +521,7 @@
<div class="Middle">
<div class="Middle1">
<!-- 药耗 -->
<div>
<div class="yaohao D_PACDSYH"></div>
<div class="yaohao D_YiSNDSYH"></div>
@ -507,111 +607,68 @@
</div>
</div>
<div class="Middle2">
<div>
<span class="Middle2-value" id="D_YanYCORP"></span>
<span class="Middle2-value" id="D_QueYCRJY1"></span>
<span class="Middle2-value" id="D_HaoYCRJY"></span>
<span class="Middle2-value" id="D_HaoYCRJY2"></span>
<span class="Middle2-value" id="D_HaoYCWNND"></span>
<span class="Middle2-value" id="D_MoCWNND"></span>
</div>
<div>
<span class="Middle2-value" id="D_BengZYW"></span>
<span class="Middle2-value" id="D_TiSB101DL"></span>
<span class="Middle2-value" id="D_TiSB102DL"></span>
<span class="Middle2-value" id="D_TiSB103DL"></span>
</div>
<div>
<span class="Middle2-value" id="D_NingMSJYLL"></span>
<span class="Middle2-value" id="D_YaLSQNLL"></span>
</div>
<div>
<span class="Middle2-value" id="D_NingMSCGYW"></span>
<span class="Middle2-value" id="D_YaLSQNLL"></span>
</div>
<div>
<span class="Middle2-value" id="D_CiLSNJYLL"></span>
<span class="Middle2-value" id="D_PACJYLL"></span>
</div>
<div>
<span class="Middle2-value" id="D_CiLSNCGYW"></span>
<span class="Middle2-value" id="D_PACCGYW"></span>
</div>
</div>
<!-- 隐藏的数据容器，由JS动态生成 -->
<div id="hiddenDataContainer" style="display: none;"></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%"
/>
</div>
<div class="Middle4">
<!-- 进水 -->
<div>
<div class="Middle4_val" id="D_JSLL">100</div>
<div class="Middle4_val" id="D_JinSPH">100</div>
<div class="Middle4_val" id="D_JinSCOD">100</div>
<div class="Middle4_val" id="D_JinSAL">100</div>
<div class="Middle4_val" id="D_JinSWD">100</div>
<div class="Middle4_val" id="D_JinSLJLL">100</div>
</div>
<!-- 出水 -->
<div>
<div class="Middle4_val" id="D_ChuSLL">100</div>
<div class="Middle4_val" id="D_ChuSPH">100</div>
<div class="Middle4_val" id="D_ChuSCOD">100</div>
<div class="Middle4_val" id="D_ChuSAL">100</div>
<div class="Middle4_val" id="D_ChuSWD">100</div>
<div class="Middle4_val" id="D_ChuSZL">100</div>
<div class="Middle4_val" id="D_ChuSZLv">100</div>
<div class="Middle4_val" id="D_ChuSLJLL">100</div>
</div>
<div>
<div class="Middle4_val" id="D_FanXBCKLL">200</div>
<div class="Middle4_val" id="D_FanXBCKYL">200</div>
<div class="Middle4_val" id="D_ShengYWNCKLL">200</div>
</div>
<div>
<div class="Middle4_val" id="D_QingSCYW">200</div>
<div class="Middle4_val" id="D_FeiYCYW">200</div>
<img class="monitor-img" src="<%=request.getContextPath()%>/IMG/monitor.png" />
<!-- 10个绿色圆点 -->
<div class="green-dot" data-index="0" style="top: 431px; left: 200px;"></div>
<div class="green-dot" data-index="1" style="top: 150px; left: 600px;"></div>
<div class="green-dot" data-index="2" style="top: 174px; left: 1112px;"></div>
<div class="green-dot" data-index="3" style="top: 280px; left: 1800px;"></div>
<div class="green-dot" data-index="4" style="top: 150px; left: 2550px;"></div>
<div class="green-dot" data-index="5" style="top: 1130px; left: 200px;"></div>
<div class="green-dot" data-index="6" style="top: 800px; left: 600px;"></div>
<div class="green-dot" data-index="7" style="top: 900px; left: 1000px;"></div>
<div class="green-dot" data-index="8" style="top: 1000px; left: 2530px;"></div>
<div class="green-dot" data-index="9" style="top: 800px; left: 1800px;"></div>
<!-- 数据弹窗 -->
<div class="dot-popup" id="dotPopup">
<span class="dot-popup-close" onclick="closePopup()">×</span>
<div class="dot-popup-title" id="popupTitle">设备数据</div>
<div class="dot-popup-content" id="popupContent"></div>
</div>
</div>
</div>
<!-- 视频 -->
<div class="right"></div>
</div>
<!-- 弹窗遮罩 -->
<div class="popup-overlay" id="popupOverlay"></div>
<script>
// 定义 ext 变量供 main_js.js 使用
var ext = {
contextPath: '<%=request.getContextPath()%>'
};
// ==================== 数据统一管理 ====================
var pageData = {
// 水量数据 (slqs)
slqs: {
todayTotal: 6040, // 今日水量
yesterdayTotal: 4197, // 昨日水量
monthTotal: 12356, // 本月水量
todayTotal: 0, // 今日水量
yesterdayTotal: 0, // 昨日水量
monthTotal: 0, // 本月水量
},
// 泥处理指标 (ncl)
ncl: {
val1: 0, // 泥处理指标1
val2: 200, // 泥处理指标2
val3: 4.89, // 泥处理指标3
val2: 0, // 泥处理指标2
val3: 0, // 泥处理指标3
},
// 药耗数据 (yaohao)
yaohao: {
D_PACDSYH: 19800,
D_YiSNDSYH: 2090,
D_CiLSNDSYH: 1092,
D_PACDSYH: 0,
D_YiSNDSYH: 0,
D_CiLSNDSYH: 0,
},
// 质量指标表格数据
@ -676,43 +733,102 @@
// 七日水量图表数据
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: [],
data: [],
},
// 泥处理图表数据
nclChart: {
xAxis: [
"2:00",
"4:00",
"6:00",
"8:00",
"10:00",
"12:00",
"14:00",
"16:00",
"18:00",
"20:00",
],
xAxis: [],
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],
xAxis: [],
data: [],
},
};
// ==================== 统一点位配置管理 ====================
// 所有点位配置：ID + 名称 + 分组
var pointConfig = {
// 工艺参数 (middle2)
D_YanYCORP: { name: "厌氧池ORP", group: "middle2" },
D_QueYCRJY1: { name: "缺氧池入口溶解氧1", group: "middle2" },
D_HaoYCRJY: { name: "好氧池溶解氧", group: "middle2" },
D_HaoYCRJY2: { name: "好氧池溶解氧2", group: "middle2" },
D_HaoYCWNND: { name: "好氧池污泥浓度", group: "middle2" },
D_MoCWNND: { name: "膜池污泥浓度", group: "middle2" },
D_BengZYW: { name: "泵站液位", group: "middle2" },
D_TiSB101DL: { name: "提升泵101电流", group: "middle2" },
D_TiSB102DL: { name: "提升泵102电流", group: "middle2" },
D_TiSB103DL: { name: "提升泵103电流", group: "middle2" },
D_NingMSJYLL: { name: "混凝沉淀进水流量", group: "middle2" },
D_YaLSQNLL: { name: "压力气流量", group: "middle2" },
D_NingMSCGYW: { name: "混凝沉淀出水液位", group: "middle2" },
D_CiLSNJYLL: { name: "次氯酸钠加药流量", group: "middle2" },
D_PACJYLL: { name: "PAC加药流量", group: "middle2" },
D_CiLSNCGYW: { name: "次氯酸钠储罐液位", group: "middle2" },
D_PACCGYW: { name: "PAC储罐液位", group: "middle2" },
// 进出水指标 (middle4)
D_JSLL: { name: "进水流量", group: "middle4" },
D_JinSPH: { name: "进水PH", group: "middle4" },
D_JinSCOD: { name: "进水COD", group: "middle4" },
D_JinSAL: { name: "进水氨氮", group: "middle4" },
D_JinSWD: { name: "进水温度", group: "middle4" },
D_JinSLJLL: { name: "进水累计流量", group: "middle4" },
D_ChuSLL: { name: "出水流量", group: "middle4" },
D_ChuSPH: { name: "出水PH", group: "middle4" },
D_ChuSCOD: { name: "出水COD", group: "middle4" },
D_ChuSAL: { name: "出水氨氮", group: "middle4" },
D_ChuSWD: { name: "出水温度", group: "middle4" },
D_ChuSZL: { name: "出水浊度", group: "middle4" },
D_ChuSZLv: { name: "出水浊度值", group: "middle4" },
D_ChuSLJLL: { name: "出水累计流量", group: "middle4" },
D_FanXBCKLL: { name: "反洗泵出口流量", group: "middle4" },
D_FanXBCKYL: { name: "反洗泵出口压力", group: "middle4" },
D_ShengYWNCKLL: { name: "剩余污泥浓度流量", group: "middle4" },
D_QingSCYW: { name: "清水池液位", group: "middle4" },
D_FeiYCYW: { name: "废液池液位", group: "middle4" }
};
// 圆点数据配置：每个圆点对应的数据点ID
var dotDataConfig = [
{ name: "进水口", points: ["D_JSLL", "D_JinSPH", "D_JinSCOD", "D_JinSAL", "D_JinSWD", "D_JinSLJLL"] },
{ name: "泵房", points: ["D_BengZYW", "D_TiSB101DL", "D_TiSB102DL", "D_TiSB103DL"] },
{ name: "厌氧池", points: ["D_YanYCORP"] },
{ name: "缺氧池", points: ["D_QueYCRJY1", "D_HaoYCRJY"] },
{ name: "好氧池", points: ["D_HaoYCRJY2", "D_HaoYCWNND", "D_MoCWNND"] },
{ name: "污泥处理", points: ["D_QingSCYW", "D_FeiYCYW"] },
{ name: "混凝沉淀", points: ["D_NingMSJYLL", "D_YaLSQNLL", "D_NingMSCGYW"] },
{ name: "加药间", points: ["D_CiLSNJYLL", "D_PACJYLL", "D_CiLSNCGYW", "D_PACCGYW"] },
{ name: "出水口", points: ["D_ChuSLL", "D_ChuSPH", "D_ChuSCOD", "D_ChuSAL", "D_ChuSWD", "D_ChuSZL", "D_ChuSZLv", "D_ChuSLJLL"] },
{ name: "反洗泵房", points: ["D_FanXBCKLL", "D_FanXBCKYL", "D_ShengYWNCKLL"] }
];
// 获取所有点位ID列表
function getAllPointIds() {
return Object.keys(pointConfig);
}
// 根据分组获取点位ID列表
function getPointIdsByGroup(group) {
return Object.keys(pointConfig).filter(function(id) {
return pointConfig[id].group === group;
});
}
// 动态生成隐藏的数据容器元素
function initHiddenDataContainer() {
var container = document.getElementById('hiddenDataContainer');
var html = '';
Object.keys(pointConfig).forEach(function(pointId) {
html += '<span id="' + pointId + '"></span>';
});
container.innerHTML = html;
}
// 更新水量显示
function updateSlqs() {
$(".slqs-todayTotal").text(pageData.slqs.todayTotal);
@ -825,23 +941,31 @@
/* IE11 */
elem.msRequestFullscreen();
}
// 隐藏提示遮罩
document.getElementById("fullscreenOverlay").style.display = "none";
}
// 监听全屏状态变化
document.addEventListener("fullscreenchange", function () {
var overlay = document.getElementById("fullscreenOverlay");
if (!document.fullscreenElement) {
// 退出全屏时显示提示
overlay.style.display = "flex";
// 退出全屏函数
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
});
document.addEventListener("webkitfullscreenchange", function () {
var overlay = document.getElementById("fullscreenOverlay");
if (!document.webkitFullscreenElement) {
overlay.style.display = "flex";
}
// 切换全屏状态
function toggleFullscreen() {
if (document.fullscreenElement || document.webkitFullscreenElement) {
exitFullscreen();
} else {
enterFullscreen();
}
}
// 双击全屏功能（只进入全屏，不退出）
document.addEventListener('dblclick', function(e) {
enterFullscreen();
});
// 获取水量统计数据
@ -1001,6 +1125,9 @@
}
$(function () {
// 初始化隐藏数据容器
initHiddenDataContainer();
// 初始化数据显示
updateSlqs();
updateNcl();
@ -1018,73 +1145,117 @@
// 获取质量指标表格数据
fetchQualityTableData();
<%--// 定时刷新所有数据（每分钟刷新一次）--%>
<%--setInterval(function() {--%>
<%-- console.log('定时刷新数据...');--%>
<%-- fetchSlqsData();--%>
<%-- fetchQualityTableData();--%>
<%-- // 批量刷新点位数据--%>
<%-- pointList.forEach(function (mpcode) {--%>
<%-- getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');--%>
<%-- });--%>
<%--}, 60000); // 60000毫秒 = 1分钟--%>
<%--// 批量获取点位数据并更新显示--%>
var pointList = [
"D_PACDSYH", // PAC吨水药耗
"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_JSLL",
"D_JinSPH",
"D_JinSCOD",
"D_JinSAL",
"D_JinSWD",
"D_JinSLJLL",
"D_ChuSLL",
"D_ChuSPH",
"D_ChuSCOD",
"D_ChuSAL",
"D_ChuSWD",
"D_ChuSZL",
"D_ChuSZLv",
"D_ChuSLJLL",
"D_FanXBCKLL",
"D_FanXBCKYL",
"D_ShengYWNCKLL",
"D_QingSCYW",
"D_FeiYCYW",
];
// 批量获取点位数据并更新显示
var pointList = getAllPointIds();
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`, '<%=request.getContextPath()%>');
});
// 定时刷新所有数据（每分钟刷新一次）
setInterval(function() {
console.log('定时刷新数据...');
fetchSlqsData();
fetchQualityTableData();
// 批量刷新点位数据
pointList.forEach(function (mpcode) {
getValue('0533JS', mpcode, mpcode, `${mpcode}_name`, '<%=request.getContextPath()%>');
});
}, 60000); // 60000毫秒 = 1分钟
// 初始化绿色圆点点击事件
initGreenDots();
});
// 初始化绿色圆点点击事件
function initGreenDots() {
var dots = document.querySelectorAll('.green-dot');
console.log('初始化绿色圆点，数量:', dots.length);
dots.forEach(function(dot) {
dot.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
var index = parseInt(this.getAttribute('data-index'));
console.log('点击圆点，索引:', index);
showDotPopup(index, this);
});
});
}
// 显示弹窗
function showDotPopup(index, dotElement) {
var config = dotDataConfig[index];
if (!config) return;
var title = document.getElementById('popupTitle');
var content = document.getElementById('popupContent');
var overlay = document.getElementById('popupOverlay');
var popup = document.getElementById('dotPopup');
title.textContent = config.name;
var html = '';
// 遍历所有点位
config.points.forEach(function(pointId) {
var pointInfo = pointConfig[pointId];
var value = document.getElementById(pointId);
var val = value ? value.textContent : '--';
var pointName = pointInfo ? pointInfo.name : pointId;
html += '<div class="dot-popup-item">';
html += '<span class="dot-popup-label">' + pointName + '</span>';
html += '<span class="dot-popup-value">' + val + '</span>';
html += '</div>';
});
content.innerHTML = html;
// 计算弹窗位置，显示在绿点右侧
var dotRect = dotElement.getBoundingClientRect();
var container = document.querySelector('.screen-container');
var containerRect = container.getBoundingClientRect();
// 获取绿点相对于容器的位置
var dotTop = parseInt(dotElement.style.top) || 0;
var dotLeft = parseInt(dotElement.style.left) || 0;
// 弹窗定位在绿点右侧，稍微偏上
var popupLeft = dotLeft + 60; // 绿点右侧60px
var popupTop = dotTop - 50; // 绿点上方50px
// 确保弹窗不超出容器右边界
if (popupLeft + 450 > 2800) {
popupLeft = dotLeft - 470; // 显示在左侧
}
// 确保弹窗不超出容器上边界
if (popupTop < 20) {
popupTop = 20;
}
// 确保弹窗不超出容器下边界
if (popupTop + 400 > 1600) {
popupTop = 1600 - 400;
}
popup.style.left = popupLeft + 'px';
popup.style.top = popupTop + 'px';
overlay.classList.add('show');
popup.classList.add('show');
}
// 关闭弹窗
function closePopup() {
document.getElementById('popupOverlay').classList.remove('show');
document.getElementById('dotPopup').classList.remove('show');
}
// 点击遮罩关闭弹窗
document.addEventListener('click', function(e) {
if (e.target.id === 'popupOverlay') {
closePopup();
}
});
// 七日水量图表