From 2a8318599a67f032738666c49a22f9ca090ee446 Mon Sep 17 00:00:00 2001 From: Rue Ji Date: Tue, 10 Mar 2026 00:49:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B0=B4=E5=8E=82=E5=A4=A7=E5=B1=8F=E6=95=B0?= =?UTF-8?q?=E6=8D=AEES=E6=9F=A5=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/jsp/bigScreen.jsp | 741 +++++++++++++++++++----------- 1 file changed, 478 insertions(+), 263 deletions(-) diff --git a/src/main/webapp/jsp/bigScreen.jsp b/src/main/webapp/jsp/bigScreen.jsp index d86baa47..aa72dec0 100644 --- a/src/main/webapp/jsp/bigScreen.jsp +++ b/src/main/webapp/jsp/bigScreen.jsp @@ -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"%> 水厂大屏展示 - - + + +
- +
@@ -406,100 +484,182 @@ var pageData = { // 水量数据 (slqs) slqs: { - todayTotal: 6040, // 今日水量 - yesterdayTotal: 4197, // 昨日水量 - monthTotal: 12356 // 本月水量 + todayTotal: 6040, // 今日水量 + yesterdayTotal: 4197, // 昨日水量 + monthTotal: 12356, // 本月水量 }, - + // 泥处理指标 (ncl) ncl: { - val1: 0, // 泥处理指标1 - val2: 200, // 泥处理指标2 - val3: 4.89 // 泥处理指标3 + val1: 0, // 泥处理指标1 + val2: 200, // 泥处理指标2 + val3: 4.89, // 泥处理指标3 }, - + // 药耗数据 (yaohao) yaohao: { D_PACDSYH: 19800, D_YiSNDSYH: 2090, D_CiLSNDSYH: 1092, }, - + // 质量指标表格数据 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], + }, }; - + // 更新水量显示 function updateSlqs() { $(".slqs-todayTotal").text(pageData.slqs.todayTotal); $(".slqs-yesterdayTotal").text(pageData.slqs.yesterdayTotal); $(".slqs-monthTotal").text(pageData.slqs.monthTotal); } - + // 更新泥处理指标显示 function updateNcl() { $(".ncl-val1").text(pageData.ncl.val1); $(".ncl-val2").text(pageData.ncl.val2); $(".ncl-val3").text(pageData.ncl.val3); } - + // 更新药耗显示 function updateYaohao() { $(".D_PACDSYH").text(pageData.yaohao.D_PACDSYH); $(".D_YiSNDSYH").text(pageData.yaohao.D_YiSNDSYH); $(".D_CiLSNDSYH").text(pageData.yaohao.D_CiLSNDSYH); } - + // 更新质量指标表格 function updateQualityTable() { var tbody = $(".quality-table tbody"); tbody.empty(); - pageData.qualityTable.forEach(function(item) { - var row = "" + - "" + item.param + "" + - "" + item.current + "" + - "" + item.avg + "" + - "" + item.max + "" + - "" + item.min + "" + - "" + item.standard + "" + + pageData.qualityTable.forEach(function (item) { + var row = + "" + + "" + + item.param + + "" + + "" + + item.current + + "" + + "" + + item.avg + + "" + + "" + + item.max + + "" + + "" + + item.min + + "" + + "" + + item.standard + + "" + ""; tbody.append(row); }); } - + // 从接口获取数据并更新页面（示例方法，供后期调用） function fetchDataFromApi(apiUrl) { $.ajax({ url: apiUrl, type: "GET", dataType: "json", - success: function(response) { + success: function (response) { // 假设接口返回的数据格式如下： // { // slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx }, @@ -514,20 +674,23 @@ 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); - } + }, }); } - + // 刷新页面所有数据 function refreshPage() { updateSlqs(); @@ -538,61 +701,66 @@ initNclChart(); initQualityChart(); } - + // 进入全屏函数 function enterFullscreen() { 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; pageData.slqs.yesterdayTotal = response.yesterdayTotal || 0; pageData.slqs.monthTotal = response.monthTotal || 0; 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" 部分 + xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分 } else { xAxis.push(dateStr); } @@ -601,22 +769,22 @@ }); pageData.sevenDaysChart.xAxis = xAxis; pageData.sevenDaysChart.data = data; - initSevenDaysChart(); // 重新渲染图表 + initSevenDaysChart(); // 重新渲染图表 } } }, - error: function(xhr, status, error) { - console.error('获取水量统计数据失败:', error); - } + error: function (xhr, status, error) { + console.error("获取水量统计数据失败:", error); + }, }); } - + // 获取点位信息数据 // mpcode: 点位编码 // sdt: 开始时间 (可选，默认7天前) // edt: 结束时间 (可选，默认当前时间) // 返回: Promise对象 - function fetchPointData(mpcode, sdt, edt) { + function fetchPointData(mpcode, sdt, edt) { // 默认时间范围：近7天 if (!edt) { var now = new Date(); @@ -649,65 +817,106 @@ }); }); } - + + /** + * 获取点位实时值 + * @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 () { // 初始化数据显示 updateSlqs(); updateNcl(); updateYaohao(); updateQualityTable(); - + // 初始化图表 initSevenDaysChart(); initNclChart(); initQualityChart(); - + // 页面加载后获取水量统计数据 fetchSlqsData(); - + // 批量获取点位数据并更新显示 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`); }); }); - + // 七日水量图表 function initSevenDaysChart() { var chartDom = document.getElementById("seven-days-chart"); @@ -715,16 +924,16 @@ var myChart = echarts.init(chartDom); var dataAxis = pageData.sevenDaysChart.xAxis; var data = pageData.sevenDaysChart.data; - + // 根据数据动态计算Y轴最大值 - var yMax = 10000; // 默认值 + var yMax = 10000; // 默认值 if (data && data.length > 0) { var dataMax = Math.max.apply(null, data); // 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万） - yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000; - if (yMax < 10000) yMax = 10000; // 最小值1万 + yMax = Math.ceil((dataMax * 1.2) / 10000) * 10000; + if (yMax < 10000) yMax = 10000; // 最小值1万 } - + var option = { backgroundColor: "transparent", tooltip: { @@ -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 + '
' + data.seriesName + ': ' + data.value.toLocaleString(); - } + return ( + data.name + + "
" + + data.seriesName + + ": " + + data.value.toLocaleString() + ); + }, }, grid: { // left: 60, @@ -848,165 +1063,165 @@ myChart.resize(); }); } - + // 泥处理图表 function initNclChart() { var nclDom = document.getElementById("ncl-chart"); if (!nclDom) return; var nclChart = echarts.init(nclDom, "dark"); var nclData = pageData.nclChart.data; - var nclOption = { - backgroundColor: "transparent", - grid: { - left: 60, - right: 40, - top: 40, - bottom: 40, + var nclOption = { + backgroundColor: "transparent", + grid: { + left: 60, + right: 40, + top: 40, + bottom: 40, + }, + legend: { + data: ["实际小时排泥量"], + right: 10, + top: 0, + textStyle: { + color: "#9BE8FF", + fontSize: 25, }, - legend: { - data: ["实际小时排泥量"], - right: 10, - top: 0, - textStyle: { - color: "#9BE8FF", - fontSize: 25, + }, + xAxis: { + type: "category", + data: pageData.nclChart.xAxis, + boundaryGap: false, + axisLine: { + lineStyle: { color: "#2C3E50" }, + }, + axisTick: { show: false }, + axisLabel: { + color: "#B7C9E2", + fontSize: 25, + }, + }, + yAxis: { + type: "value", + max: 500, + splitNumber: 5, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + color: "#B7C9E2", + fontSize: 25, + }, + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.15)", + type: "dashed", }, }, - xAxis: { - type: "category", - data: pageData.nclChart.xAxis, - boundaryGap: false, - axisLine: { - lineStyle: { color: "#2C3E50" }, - }, - axisTick: { show: false }, - axisLabel: { - color: "#B7C9E2", - fontSize: 25, - }, - }, - yAxis: { - type: "value", - max: 500, - splitNumber: 5, - axisLine: { show: false }, - axisTick: { show: false }, - axisLabel: { - color: "#B7C9E2", - fontSize: 25, - }, - splitLine: { - lineStyle: { - color: "rgba(255,255,255,0.15)", - type: "dashed", + }, + series: [ + { + name: "实际小时排泥量", + type: "line", + smooth: true, + symbol: "none", + lineStyle: { normal: { width: 2 } }, + itemStyle: { normal: { color: "#46F2FF" } }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "rgba(70, 242, 255, 0.45)" }, + { offset: 1, color: "rgba(11, 77, 181, 0.05)" }, + ]), + opacity: 1, }, }, + data: nclData, }, - series: [ - { - name: "实际小时排泥量", - type: "line", - smooth: true, - symbol: "none", - lineStyle: { normal: { width: 2 } }, - itemStyle: { normal: { color: "#46F2FF" } }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "rgba(70, 242, 255, 0.45)" }, - { offset: 1, color: "rgba(11, 77, 181, 0.05)" }, - ]), - opacity: 1, - }, - }, - data: nclData, - }, - ], - }; - nclChart.setOption(nclOption); - window.addEventListener("resize", function () { - nclChart.resize(); - }); + ], + }; + nclChart.setOption(nclOption); + window.addEventListener("resize", function () { + nclChart.resize(); + }); } - + // 质量图表 function initQualityChart() { var qualityDom = document.getElementById("quality-chart"); if (!qualityDom) return; var qualityChart = echarts.init(qualityDom); var qualityData = pageData.qualityChart.data; - var qualityOption = { - backgroundColor: "transparent", - grid: { - left: 60, - right: 40, - top: 40, - bottom: 40, + var qualityOption = { + backgroundColor: "transparent", + grid: { + left: 60, + right: 40, + top: 40, + bottom: 40, + }, + legend: { + data: ["水质量"], + right: 10, + top: 0, + textStyle: { + color: "#9BE8FF", + fontSize: 25, }, - legend: { - data: ["水质量"], - right: 10, - top: 0, - textStyle: { - color: "#9BE8FF", - fontSize: 25, + }, + xAxis: { + type: "category", + data: pageData.qualityChart.xAxis, + boundaryGap: false, + axisLine: { + lineStyle: { color: "#2C3E50" }, + }, + axisTick: { show: false }, + axisLabel: { + color: "#B7C9E2", + fontSize: 25, + }, + }, + yAxis: { + type: "value", + max: 25, + splitNumber: 5, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { + color: "#B7C9E2", + fontSize: 25, + }, + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.15)", + type: "dashed", }, }, - xAxis: { - type: "category", - data: pageData.qualityChart.xAxis, - boundaryGap: false, - axisLine: { - lineStyle: { color: "#2C3E50" }, - }, - axisTick: { show: false }, - axisLabel: { - color: "#B7C9E2", - fontSize: 25, - }, - }, - yAxis: { - type: "value", - max: 25, - splitNumber: 5, - axisLine: { show: false }, - axisTick: { show: false }, - axisLabel: { - color: "#B7C9E2", - fontSize: 25, - }, - splitLine: { - lineStyle: { - color: "rgba(255,255,255,0.15)", - type: "dashed", + }, + series: [ + { + name: "水质量", + type: "line", + smooth: true, + symbol: "none", + lineStyle: { normal: { width: 2 } }, + itemStyle: { normal: { color: "#46F2FF" } }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "rgba(70, 242, 255, 0.45)" }, + { offset: 1, color: "rgba(11, 77, 181, 0.05)" }, + ]), + opacity: 1, }, }, + data: qualityData, }, - series: [ - { - name: "水质量", - type: "line", - smooth: true, - symbol: "none", - lineStyle: { normal: { width: 2 } }, - itemStyle: { normal: { color: "#46F2FF" } }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "rgba(70, 242, 255, 0.45)" }, - { offset: 1, color: "rgba(11, 77, 181, 0.05)" }, - ]), - opacity: 1, - }, - }, - data: qualityData, - }, - ], - }; - qualityChart.setOption(qualityOption); - window.addEventListener("resize", function () { - qualityChart.resize(); - }); + ], + }; + qualityChart.setOption(qualityOption); + window.addEventListener("resize", function () { + qualityChart.resize(); + }); }