From 4b7e269c3a76a8ba38daa4da7a3602517596a34f Mon Sep 17 00:00:00 2001 From: Rue Ji Date: Sun, 8 Mar 2026 23:52:11 +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=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/jsp/bigScreen.jsp | 248 +++++++++++++++++++++++++---- src/main/webapp/jsp/bigScreen3.jsp | 248 +++++++++++++++++++++-------- 2 files changed, 398 insertions(+), 98 deletions(-) diff --git a/src/main/webapp/jsp/bigScreen.jsp b/src/main/webapp/jsp/bigScreen.jsp index 22cddf0f..81f2fb99 100644 --- a/src/main/webapp/jsp/bigScreen.jsp +++ b/src/main/webapp/jsp/bigScreen.jsp @@ -33,27 +33,25 @@ /* Specific Position for Data 6040 */ .slqs { position: absolute; - width: 121px; + width: 210px; height: 62px; color: rgba(255, 255, 255, 1); - font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif; font-weight: 900; font-size: 50px; - z-index: 10; - text-align: center; - line-height: 62px; + display: flex; + justify-content: flex-end; } - .slqs-jinri { + .slqs-todayTotal { top: 335px; left: 209px; } - .slqs-zuori { + .slqs-yesterdayTotal { top: 335px; left: 592px; } - .slqs-benyue { + .slqs-monthTotal { top: 335px; - left: 975px; + left: 947px; } .ncl-val { @@ -208,6 +206,20 @@ font-size: 80px; margin-bottom: 20px; } + .Middle2-value { + position: absolute; + width: 100px; + height: 31px; + color: rgba(41, 241, 250, 1); + font-weight: 500; + font-size: 26px; + display: flex; + justify-content: flex-end; + } + #D_YanYCORP { + top: 190.5px; + left: 2470px; + } @@ -222,9 +234,9 @@
-
6040
-
4197
-
12356
+
60400
+
4197
+
12356
@@ -333,12 +345,37 @@
-
-
-
-
-
-
+
+ + + + + + +
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
@@ -368,9 +405,9 @@ var pageData = { // 水量数据 (slqs) slqs: { - jinri: 6040, // 今日水量 - zuori: 4197, // 昨日水量 - benyue: 12356 // 本月水量 + todayTotal: 6040, // 今日水量 + yesterdayTotal: 4197, // 昨日水量 + monthTotal: 12356 // 本月水量 }, // 泥处理指标 (ncl) @@ -419,9 +456,9 @@ // 更新水量显示 function updateSlqs() { - $(".slqs-jinri").text(pageData.slqs.jinri); - $(".slqs-zuori").text(pageData.slqs.zuori); - $(".slqs-benyue").text(pageData.slqs.benyue); + $(".slqs-todayTotal").text(pageData.slqs.todayTotal); + $(".slqs-yesterdayTotal").text(pageData.slqs.yesterdayTotal); + $(".slqs-monthTotal").text(pageData.slqs.monthTotal); } // 更新泥处理指标显示 @@ -464,7 +501,7 @@ success: function(response) { // 假设接口返回的数据格式如下： // { - // slqs: { jinri: xxx, zuori: xxx, benyue: xxx }, + // slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx }, // ncl: { val1: xxx, val2: xxx, val3: xxx }, // yaohao: { val1: xxx, val2: xxx, val3: xxx }, // qualityTable: [...], @@ -530,6 +567,96 @@ } }); + // 获取水量统计数据 + function fetchSlqsData() { + $.ajax({ + 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)) { + var xAxis = []; + var data = []; + response.sevenDaysTotal.forEach(function(item) { + // 日期格式: "2026-03-07" -> "03-07" + var dateStr = item.date || ''; + if (dateStr.length >= 10) { + xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分 + } else { + xAxis.push(dateStr); + } + // total 可能是字符串，转为数字 + data.push(parseFloat(item.total) || 0); + }); + pageData.sevenDaysChart.xAxis = xAxis; + pageData.sevenDaysChart.data = data; + initSevenDaysChart(); // 重新渲染图表 + } + } + }, + error: function(xhr, status, error) { + console.error('获取水量统计数据失败:', error); + } + }); + } + + // 获取点位信息数据 + // mpcode: 点位编码 + // sdt: 开始时间 (可选，默认7天前) + // edt: 结束时间 (可选，默认当前时间) + // 返回: Promise对象 + function fetchPointData(mpcode, sdt, edt) { + // 默认时间范围：近7天 + if (!edt) { + var now = new Date(); + edt = formatDate(now); + } + if (!sdt) { + var sevenDaysAgo = new Date(); + sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); + sdt = formatDate(sevenDaysAgo); + } + + return new Promise(function(resolve, reject) { + $.ajax({ + url: '<%=request.getContextPath()%>/data/getDetailData.do', + type: 'GET', + data: { + mpcode: mpcode, + sdt: sdt, + edt: edt + }, + dataType: 'json', + success: function(response) { + console.log('点位数据[' + mpcode + ']:', response); + resolve(response); + }, + error: function(xhr, status, error) { + console.error('获取点位数据失败:', mpcode, error); + reject(error); + } + }); + }); + } + + // 格式化日期为 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; + } + $(function () { // 初始化数据显示 updateSlqs(); @@ -541,6 +668,43 @@ 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' + ]; + + 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); + }); + }); }); // 七日水量图表 @@ -550,10 +714,34 @@ var myChart = echarts.init(chartDom); var dataAxis = pageData.sevenDaysChart.xAxis; var data = pageData.sevenDaysChart.data; + + // 根据数据动态计算Y轴最大值 + 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万 + } + var option = { backgroundColor: "transparent", + tooltip: { + trigger: "axis", + backgroundColor: "rgba(0, 0, 0, 0.8)", + borderColor: "#46F2FF", + borderWidth: 1, + textStyle: { + color: "#fff", + fontSize: 18 + }, + formatter: function(params) { + var data = params[0]; + return data.name + '
' + data.seriesName + ': ' + data.value.toLocaleString(); + } + }, grid: { - left: 60, + // left: 60, right: 40, top: 40, bottom: 40, @@ -581,8 +769,8 @@ }, yAxis: { type: "value", - max: 10000, - splitNumber: 5, + max: yMax, + splitNumber: 7, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { @@ -601,7 +789,7 @@ { name: "处理水量", type: "bar", - barWidth: 20, + barMaxWidth: 60, data: data, itemStyle: { normal: { @@ -625,8 +813,8 @@ { type: "bar", barGap: "-100%", + barMaxWidth: 60, data: (function () { - var yMax = 10000; var shadow = []; for (var i = 0; i < data.length; i++) { shadow.push(yMax); diff --git a/src/main/webapp/jsp/bigScreen3.jsp b/src/main/webapp/jsp/bigScreen3.jsp index b97bbfd8..12299aad 100644 --- a/src/main/webapp/jsp/bigScreen3.jsp +++ b/src/main/webapp/jsp/bigScreen3.jsp @@ -575,7 +575,7 @@ pageEncoding="UTF-8"%> areaName: item.company ? item.company.name || "" : "", processSectionName: item.processSection ? item.processSection.name || "" : "", permitNum: item.permitNum || "", - ventNum: item.ventNum || "", // 排放编号，用于流量接口 + ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067" trade: item.trade || "", displacement: item.displacement ? item.displacement + "吨/天" : "-", indicator: dischargeValue > 8000 ? "超级" : "普通", @@ -619,7 +619,7 @@ pageEncoding="UTF-8"%> function loadFlowData(ventNum, type) { if (!ventNum) { console.warn("[loadFlowData] ventNum 为空，无法加载流量数据"); - return Promise.resolve([]); + return Promise.resolve({ times: [], values: [], name: '', unit: '' }); } var mpcode, days; @@ -653,30 +653,45 @@ pageEncoding="UTF-8"%> dataList = JSON.parse(data); } catch (e) { console.error("[loadFlowData] 解析数据失败:", e); - return []; + return { times: [], values: [], name: '', unit: '' }; } } - // 提取数值数组 + // 解析datalist数据用于图表展示 + // datalist格式: [{unit: "", data: [[时间, 值], ...], name: "xxx"}] + var times = []; var values = []; - if (Array.isArray(dataList)) { - dataList.forEach(function (item) { - // 假设返回数据格式为 [{time: xxx, value: xxx}, ...] - // 或者 [value1, value2, ...] - if (item.value !== undefined) { - values.push(parseFloat(item.value) || 0); - } else if (typeof item === 'number') { - values.push(item); - } - }); + var seriesName = ''; + var unit = ''; + + if (Array.isArray(datalist) && datalist.length > 0) { + var firstItem = datalist[0]; + seriesName = firstItem.name || '流量数据'; + unit = firstItem.unit || ''; + + if (Array.isArray(firstItem.data)) { + firstItem.data.forEach(function (item) { + if (Array.isArray(item) && item.length >= 2) { + times.push(item[0]); // 时间 + values.push(parseFloat(item[1]) || 0); // 数值 + } + }); + } } - console.log("[loadFlowData] 解析后数据条数:", values.length); - return values; + console.log("[loadFlowData] 解析后数据条数:", values.length, "时间点:", times.length); + + // 返回包含时间轴和数值的对象 + return { + times: times, + values: values, + name: seriesName, + unit: unit + }; }) .catch(function (err) { console.error("[loadFlowData] 请求失败:", mpcode, err); - return []; + return { times: [], values: [], name: '', unit: '' }; }); } @@ -696,10 +711,22 @@ pageEncoding="UTF-8"%> loadFlowData(enterprise.ventNum, 'cumulative') ]) .then(function (results) { - enterprise.instantHistory = results[0].length > 0 ? results[0] : generateHistoryData(72); // 近3天小时数据 - enterprise.cumulativeHistory = results[1].length > 0 ? results[1] : generateHistoryData(14); // 近14天数据 + // results[0] 和 results[1] 现在是 {times, values, name, unit} 对象 + var instantData = results[0]; + var cumulativeData = results[1]; + + // 瞬时流量数据 + enterprise.instantHistory = (instantData && instantData.values && instantData.values.length > 0) + ? instantData + : { times: [], values: [], name: '瞬时流量', unit: '' }; + + // 累计流量数据 + enterprise.cumulativeHistory = (cumulativeData && cumulativeData.values && cumulativeData.values.length > 0) + ? cumulativeData + : { times: [], values: [], name: '累计流量', unit: '' }; + console.log("[loadEnterpriseFlowData] 流量数据加载完成:", enterprise.name, - "瞬时:", enterprise.instantHistory.length, "累计:", enterprise.cumulativeHistory.length); + "瞬时:", enterprise.instantHistory.values.length, "累计:", enterprise.cumulativeHistory.values.length); return enterprise; }); } @@ -724,7 +751,7 @@ pageEncoding="UTF-8"%> if (!enterprises || enterprises.length === 0) { console.warn("企业数据为空，使用默认模拟数据"); // enterprises = generateMockData(); - enterprises = [] + enterprises = [{}] } allEnterprises = enterprises; @@ -774,12 +801,15 @@ pageEncoding="UTF-8"%> } function generateHistoryData(count) { - var data = []; - // for (var k = 0; k < count; k++) { - // data.push(Math.floor(Math.random() * 500) + 50); - // } - console.log('======data', data) - return data; + // 返回与新数据格式兼容的对象 + var times = []; + var values = []; + for (var k = 0; k < count; k++) { + times.push(k + "h"); + values.push(Math.floor(Math.random() * 500) + 50); + } + console.log('======generateHistoryData', count, '条'); + return { times: times, values: values, name: '模拟数据', unit: '' }; } function updateSortedData(enterprises) { @@ -1030,17 +1060,51 @@ pageEncoding="UTF-8"%> ent.name; $("#modalTitle").text(title); - var xData, yData, color; + var xData, yData, color, seriesName; if (type === "instant") { - xData = []; - for (var i = 0; i < 72; i++) xData.push(i + "h"); - yData = ent.instantHistory; + // 新数据格式: {times: [...], values: [...], name: "", unit: ""} + xData = ent.instantHistory?.times || []; + yData = ent.instantHistory?.values || []; + seriesName = ent.instantHistory?.name || "瞬时流量"; color = "#ffaa00"; + // 如果没有时间轴数据，使用默认小时标签 + if (xData.length === 0) { + for (var i = 0; i < 72; i++) xData.push(i + "h"); + } + // 如果没有数值数据，使用模拟数据 + if (yData.length === 0) { + yData = generateHistoryData(72); + } } else { - xData = []; - for (var j = 0; j < 14; j++) xData.push("D" + (j + 1)); - yData = ent.cumulativeHistory; + xData = ent.cumulativeHistory?.times || []; + yData = ent.cumulativeHistory?.values || []; + seriesName = ent.cumulativeHistory?.name || "累计流量"; color = "#00eaff"; + // 如果没有时间轴数据，使用默认天数标签 + if (xData.length === 0) { + for (var j = 0; j < 14; j++) xData.push("D" + (j + 1)); + } + // 如果没有数值数据，使用模拟数据 + if (yData.length === 0) { + yData = generateHistoryData(14); + } + } + + // 格式化时间，只显示日期部分 + function formatDateLabelModal(timeStr) { + if (timeStr && timeStr.length >= 10) { + return timeStr.substring(0, 10); // 只取 "YYYY-MM-DD" + } + return timeStr; + } + + // 计算x轴标签显示间隔 + function calculateIntervalModal(arr) { + var len = arr ? arr.length : 0; + if (len <= 10) return 0; + if (len <= 20) return 1; + if (len <= 50) return 4; + return Math.floor(len / 10) - 1; } var option = { @@ -1048,6 +1112,10 @@ pageEncoding="UTF-8"%> trigger: "axis", backgroundColor: "rgba(0,0,0,0.8)", textStyle: { color: "#fff" }, + formatter: function(params) { + var data = params[0]; + return data.name + '
' + data.seriesName + ': ' + data.value; + } }, grid: { left: "3%", @@ -1060,7 +1128,13 @@ pageEncoding="UTF-8"%> type: "category", boundaryGap: false, data: xData, - axisLabel: { color: "#fff", fontSize: 16 }, + axisLabel: { + color: "#fff", + fontSize: 12, + rotate: 45, + interval: calculateIntervalModal(xData), + formatter: formatDateLabelModal + }, axisLine: { lineStyle: { color: "#00eaff" } }, }, yAxis: { @@ -1070,7 +1144,7 @@ pageEncoding="UTF-8"%> }, series: [ { - name: type === "instant" ? "瞬时流量" : "累计流量", + name: seriesName, type: "line", smooth: true, data: yData, @@ -1171,7 +1245,7 @@ pageEncoding="UTF-8"%> id: item.id, name: item.name || "企业-" + (idx + 1), value: dischargeValue, - ventNum: item.ventNum || "", // 排放编号，用于流量接口 + ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067" sewageType: item.trade || "-", connectionStatus: item._point || item._input ? "已接入" : "接入中", displacement: item.displacement ? item.displacement + "吨/天" : "-", @@ -1187,7 +1261,7 @@ pageEncoding="UTF-8"%> id: item.id, name: item.name || "企业-" + (idx + 1), value: dischargeValue, - ventNum: item.ventNum || "", // 排放编号，用于流量接口 + ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067" sewageType: item.trade || "-", connectionStatus: item._point || item._input ? "已接入" : "接入中", displacement: item.displacement ? item.displacement + "吨/天" : "-", @@ -1265,35 +1339,55 @@ pageEncoding="UTF-8"%> } function renderDetailCharts(enterprise) { - console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.length, "累计数据:", enterprise.cumulativeHistory?.length); + console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.values?.length, "累计数据:", enterprise.cumulativeHistory?.values?.length); - // 根据实际数据长度动态生成 X 轴标签 - var instantData = enterprise.instantHistory || []; - var cumulativeData = enterprise.cumulativeHistory || []; + // 数据格式: {times: [...], values: [...], name: "", unit: ""} + var instantData = enterprise.instantHistory || { times: [], values: [], name: '瞬时流量', unit: '' }; + var cumulativeData = enterprise.cumulativeHistory || { times: [], values: [], name: '累计流量', unit: '' }; - // 瞬时流量 X 轴标签（按小时） - var hours = []; - for (var i = 0; i < instantData.length; i++) { - hours.push(i + "h"); - } - // 如果没有数据，默认显示 3 天（近3天小时数据） - if (hours.length === 0) { - for (var i = 0; i < 72; i++) hours.push(i + "h"); - } + // 瞬时流量 - 使用接口返回的时间轴或默认小时标签 + var instantTimes = instantData.times && instantData.times.length > 0 + ? instantData.times + : (function() { var arr = []; for (var i = 0; i < 72; i++) arr.push(i + "h"); return arr; })(); + var instantValues = instantData.values && instantData.values.length > 0 + ? instantData.values + : generateHistoryData(72); - // 累计流量 X 轴标签（按天） - var days = []; - for (var j = 0; j < cumulativeData.length; j++) { - days.push("D" + (j + 1)); + // 累计流量 - 使用接口返回的时间轴或默认天数标签 + var cumulativeTimes = cumulativeData.times && cumulativeData.times.length > 0 + ? cumulativeData.times + : (function() { var arr = []; for (var j = 0; j < 14; j++) arr.push("D" + (j + 1)); return arr; })(); + var cumulativeValues = cumulativeData.values && cumulativeData.values.length > 0 + ? cumulativeData.values + : generateHistoryData(14); + + // 格式化时间，只显示日期部分 + function formatDateLabel(timeStr) { + // 如果是 "YYYY-MM-DD HH:mm" 格式，只取日期部分 + if (timeStr && timeStr.length >= 10) { + return timeStr.substring(0, 10); // 只取 "YYYY-MM-DD" + } + return timeStr; } - // 如果没有数据，默认显示 14 天 - if (days.length === 0) { - for (var j = 0; j < 14; j++) days.push("D" + (j + 1)); + + // 计算x轴标签显示间隔，避免标签太密集 + function calculateInterval(arr) { + var len = arr ? arr.length : 0; + if (len <= 10) return 0; // 全部显示 + if (len <= 20) return 1; // 隔一个显示 + if (len <= 50) return 4; // 每5个显示一个 + return Math.floor(len / 10) - 1; // 大约显示10个标签 } // Instant Chart (Line) var optionInstant = { - tooltip: { trigger: "axis" }, + tooltip: { + trigger: "axis", + formatter: function(params) { + var data = params[0]; + return data.name + '
' + data.seriesName + ': ' + data.value; + } + }, grid: { left: "3%", right: "4%", @@ -1304,8 +1398,14 @@ pageEncoding="UTF-8"%> xAxis: { type: "category", boundaryGap: false, - data: hours, - axisLabel: { color: "#ccc" }, + data: instantTimes, + axisLabel: { + color: "#ccc", + fontSize: 10, + rotate: 45, + interval: calculateInterval(instantTimes), + formatter: formatDateLabel + }, axisLine: { lineStyle: { color: "#00eaff" } }, }, yAxis: { @@ -1315,7 +1415,7 @@ pageEncoding="UTF-8"%> }, series: [ { - name: "瞬时量", + name: instantData.name || "瞬时量", type: "line", smooth: true, symbol: "none", @@ -1329,14 +1429,20 @@ pageEncoding="UTF-8"%> ]), }, }, - data: instantData.length > 0 ? instantData : generateHistoryData(72), + data: instantValues, }, ], }; // Cumulative Chart (Bar) var optionCumulative = { - tooltip: { trigger: "axis" }, + tooltip: { + trigger: "axis", + formatter: function(params) { + var data = params[0]; + return data.name + '
' + data.seriesName + ': ' + data.value; + } + }, grid: { left: "3%", right: "4%", @@ -1346,8 +1452,14 @@ pageEncoding="UTF-8"%> }, xAxis: { type: "category", - data: days, - axisLabel: { color: "#ccc" }, + data: cumulativeTimes, + axisLabel: { + color: "#ccc", + fontSize: 10, + rotate: 45, + interval: calculateInterval(cumulativeTimes), + formatter: formatDateLabel + }, axisLine: { lineStyle: { color: "#ffaa00" } }, }, yAxis: { @@ -1357,12 +1469,12 @@ pageEncoding="UTF-8"%> }, series: [ { - name: "累计流量", + name: cumulativeData.name || "累计流量", type: "bar", itemStyle: { normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] }, }, - data: cumulativeData.length > 0 ? cumulativeData : generateHistoryData(14), + data: cumulativeValues, }, ], };