From cd15aa75c31fc77696e026bffd9948780c7ee9a1 Mon Sep 17 00:00:00 2001 From: Rue Ji Date: Sat, 7 Mar 2026 22:50:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E6=B1=A1=E6=88=B7=E5=A4=A7=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/jsp/bigScreen3.jsp | 368 +++++++++++++++++++++++------ 1 file changed, 290 insertions(+), 78 deletions(-) diff --git a/src/main/webapp/jsp/bigScreen3.jsp b/src/main/webapp/jsp/bigScreen3.jsp index 1ea105df..922a480a 100644 --- a/src/main/webapp/jsp/bigScreen3.jsp +++ b/src/main/webapp/jsp/bigScreen3.jsp @@ -360,7 +360,7 @@ pageEncoding="UTF-8"%> 污水特性: --
- 当前排污量: -- + 日排量: --
接入状态: -- @@ -405,6 +405,9 @@ pageEncoding="UTF-8"%> var allEnterprises = []; // All data for map var currentFocusIndex = 0; var rotationTimer = null; + + // 获取上下文路径 + var contextPath = "<%=request.getContextPath()%>"; // 进入全屏函数 function enterFullscreen() { @@ -464,20 +467,191 @@ pageEncoding="UTF-8"%> } } + // API请求函数 + function apiRequest(url, params) { + console.log("API Request:", contextPath + url, params); + return new Promise(function (resolve, reject) { + $.ajax({ + url: contextPath + url, + type: "POST", + data: params || {}, + success: function (data) { + console.log("API Response:", url, data); + resolve(data); + }, + error: function (xhr, status, error) { + console.error("API Request Error:", url, error); + reject(error); + }, + }); + }); + } + + // 加载企业数据（排污源） + function loadEnterpriseData() { + console.log("=== loadEnterpriseData 函数开始执行 ==="); + return apiRequest("/sparepart/sewage/getList.do", { + page: 1, + rows: 10, + sort: "displacement", + order: "asc", + unitId: '0533JS', + }) + .then(function (data) { + console.log("=== loadEnterpriseData 接口返回数据:", data); + + var dataList = data; + if (typeof data === "string") { + try { + dataList = JSON.parse(data); + } catch (e) { + console.error("解析企业数据失败:", e); + dataList = {}; + } + } + + var list = dataList.rows || []; + console.log("企业接口返回数据条数:", list.length); + + if (!list || list.length === 0) { + console.error("!!! 企业接口返回数据为空!"); + return []; + } + + // 统计接入状态 + var total = dataList.total; + var connected = 0; + var connecting = 0; + + var enterprises = list.map(function (item, idx) { + // 解析经纬度 + var lng = null, lat = null; + if (item.longitudeLatitude) { + var coords = String(item.longitudeLatitude).split(","); + if (coords.length >= 2) { + lng = parseFloat(coords[0]); + lat = parseFloat(coords[1]); + } else if (coords.length === 1) { + lng = parseFloat(coords[0]); + } + } + // 从 company 对象获取经纬度 + if ((!lng || !lat) && item.company) { + lng = lng || item.company.longitude; + lat = lat || item.company.latitude; + } + // 默认位置 + if (!lng || !lat) { + lng = 121.3 + idx * 0.01; + lat = 30.7 + idx * 0.005; + } + + // 解析日排量数值 + var dischargeValue = 0; + if (item.displacement) { + dischargeValue = parseFloat(item.displacement) || 0; + } + + // 接入状态判断（根据已关联点位和已录入数据） + var hasPoint = item._point ? true : false; + var hasInput = item._input ? true : false; + var connectionStatus = "接入中"; + if (hasPoint || hasInput) { + connectionStatus = "已接入"; + connected++; + } else { + connecting++; + } + + // 所属行业作为污水特性 + var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"]; + var sewageType = item.trade || sewageTypes[idx % sewageTypes.length]; + + return { + id: item.id, + contractNumber: item.contractNumber || "", + name: item.name || "企业-" + (idx + 1), + value: dischargeValue, + sewageType: sewageType, + connectionStatus: connectionStatus, + address: item.address || "", + areaName: item.company ? item.company.name || "" : "", + processSectionName: item.processSection ? item.processSection.name || "" : "", + permitNum: item.permitNum || "", + trade: item.trade || "", + displacement: item.displacement ? item.displacement + "吨/天" : "-", + indicator: dischargeValue > 8000 ? "超级" : "普通", + photo: contextPath + "/IMG/login/company.png", + x: Math.random() * 90 + 5, + y: Math.random() * 80 + 10, + lng: lng, + lat: lat, + instantHistory: generateHistoryData(72), + cumulativeHistory: generateHistoryData(14), + }; + }); + + console.log("企业数据处理后条数:", enterprises.length, "已接入:", connected, "接入中:", connecting); + + // 更新统计数字 + $("#totalCount").html(total + '家'); + $("#connectedCount").html(connected + '家'); + $("#connectingCount").html(connecting + '家'); + + return enterprises; + }) + .catch(function (err) { + console.error("加载企业数据失败:", err); + return []; + }); + } + function initData() { - // Stats + // Init Charts first + myChartInstant = echarts.init(document.getElementById("chartInstant")); + myChartCumulative = echarts.init( + document.getElementById("chartCumulative"), + ); + myChartRanking = echarts.init(document.getElementById("chartRanking")); + + // 并行加载企业数据（用于统计和地图）和排行数据 + Promise.all([ + loadEnterpriseData(), + loadRankingData() + ]) + .then(function (results) { + var enterprises = results[0]; + var rankingData = results[1]; + + if (!enterprises || enterprises.length === 0) { + console.warn("企业数据为空，使用默认模拟数据"); + // enterprises = generateMockData(); + enterprises = [] + } + + allEnterprises = enterprises; + + // 渲染地图点位 + renderMapPoints(); + + // Start Loops - 每10秒刷新排行数据 + startDataSimulation(); + startRotation(); + }) + .catch(function (err) { + console.error("初始化数据失败:", err); + }); + } + + // 生成模拟数据（作为备用） + function generateMockData() { var total = 158; var connected = 124; var connecting = 34; $("#totalCount").html(total + '家'); - $("#connectedCount").html( - connected + '家', - ); - $("#connectingCount").html( - connecting + '家', - ); + $("#connectedCount").html(connected + '家'); + $("#connectingCount").html(connecting + '家'); - // Generate Enterprises with Details var enterprises = []; var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"]; var connectionStatuses = ["已接入", "接入中"]; @@ -488,47 +662,17 @@ pageEncoding="UTF-8"%> id: i, name: "企业-" + i, value: val, - // Details - sewageType: - sewageTypes[Math.floor(Math.random() * sewageTypes.length)], - connectionStatus: - connectionStatuses[ - Math.floor(Math.random() * connectionStatuses.length) - ], + sewageType: sewageTypes[Math.floor(Math.random() * sewageTypes.length)], + connectionStatus: connectionStatuses[Math.floor(Math.random() * connectionStatuses.length)], indicator: val > 8000 ? "超级" : "普通", - photo: "<%=request.getContextPath()%>/IMG/login/company.png", // Placeholder - // Map Coordinates (Relative % in map container) - x: Math.random() * 90 + 5, // 5% to 95% - y: Math.random() * 80 + 10, // 10% to 90% - // History Data - instantHistory: generateHistoryData(72), // 3 days * 24 hours - cumulativeHistory: generateHistoryData(14), // 14 days + photo: contextPath + "/IMG/login/company.png", + x: Math.random() * 90 + 5, + y: Math.random() * 80 + 10, + instantHistory: generateHistoryData(72), + cumulativeHistory: generateHistoryData(14), }); } - allEnterprises = enterprises; - - // Init Charts - myChartInstant = echarts.init(document.getElementById("chartInstant")); - myChartCumulative = echarts.init( - document.getElementById("chartCumulative"), - ); - myChartRanking = echarts.init(document.getElementById("chartRanking")); - // myNewBarChart = echarts.init(document.getElementById('newBarChart')); - - // renderNewBarChart(); - - // Initial Sort - updateSortedData(enterprises); - - // Render Lists & Map - renderRankingChart(); - renderMapPoints(); - - updateDetailView(); - - // Start Loops - startDataSimulation(enterprises); - startRotation(); + return enterprises; } function generateHistoryData(count) { @@ -872,37 +1016,103 @@ pageEncoding="UTF-8"%> } } - function startDataSimulation(enterprises) { - setInterval(function () { - // Randomize values - enterprises.forEach((item) => { - item.value += Math.floor(Math.random() * 200) - 100; - if (item.value < 0) item.value = 0; - item.indicator = item.value > 8000 ? "超级" : "普通"; - - // Update Map Point Style - var el = $("#point-" + item.id); - if (item.value > 8000) { - el.addClass("super"); - } else { - el.removeClass("super"); + // 加载排行数据（最大和最小分别调用接口） + function loadRankingData() { + console.log("=== loadRankingData 开始加载排行数据 ==="); + + // 并行请求最大和最小排行数据 + var maxPromise = apiRequest("/sparepart/sewage/getList.do", { + page: 1, + rows: 10, + sort: "displacement", + order: "desc", + unitId: '0533JS', + }); + + var minPromise = apiRequest("/sparepart/sewage/getList.do", { + page: 1, + rows: 10, + sort: "displacement", + order: "asc", + unitId: '0533JS', + }); + + return Promise.all([maxPromise, minPromise]) + .then(function (results) { + console.log("=== loadRankingData 接口返回 ==="); + console.log("[最大排行数据]:", results[0]); + console.log("[最小排行数据]:", results[1]); + + var maxData = results[0]; + var minData = results[1]; + + // 解析最大排行数据 + if (typeof maxData === "string") { + try { maxData = JSON.parse(maxData); } catch (e) { maxData = {}; } } - el.find(".map-tooltip").html( - item.name + "
排污量: " + item.value, - ); + var maxList = maxData.rows || []; + + // 解析最小排行数据 + if (typeof minData === "string") { + try { minData = JSON.parse(minData); } catch (e) { minData = {}; } + } + var minList = minData.rows || []; + + console.log("最大排行条数:", maxList.length, "最小排行条数:", minList.length); + + // 转换最大排行数据 + currentMaxData = maxList.map(function (item, idx) { + var dischargeValue = parseFloat(item.displacement) || 0; + return { + id: item.id, + name: item.name || "企业-" + (idx + 1), + value: dischargeValue, + sewageType: item.trade || "-", + connectionStatus: item._point || item._input ? "已接入" : "接入中", + displacement: item.displacement ? item.displacement + "吨/天" : "-", + instantHistory: generateHistoryData(72), + cumulativeHistory: generateHistoryData(14), + }; + }); + + // 转换最小排行数据 + currentMinData = minList.map(function (item, idx) { + var dischargeValue = parseFloat(item.displacement) || 0; + return { + id: item.id, + name: item.name || "企业-" + (idx + 1), + value: dischargeValue, + sewageType: item.trade || "-", + connectionStatus: item._point || item._input ? "已接入" : "接入中", + displacement: item.displacement ? item.displacement + "吨/天" : "-", + instantHistory: generateHistoryData(72), + cumulativeHistory: generateHistoryData(14), + }; + }); + + console.log("[loadRankingData] 最大排行处理完成:", currentMaxData.length, "条"); + console.log("[loadRankingData] 最小排行处理完成:", currentMinData.length, "条"); + + // 更新排行图表 + renderRankingChart(); + + // 更新详情视图 + if (currentMaxData.length > 0) { + updateDetailView(); + } + + return { max: currentMaxData, min: currentMinData }; + }) + .catch(function (err) { + console.error("加载排行数据失败:", err); }); + } - updateSortedData(enterprises); - renderRankingChart(); - // Update map tooltips if needed? Or just let them be static until hover re-render? - // Re-rendering map points entirely is heavy if DOM is large, but 50 is fine. - // However, re-rendering loses hover state. Better to update text. - // For demo simplicity, we skip real-time map value update or do it simply: - /* - enterprises.forEach(item => { - $('#point-' + item.id + ' .map-tooltip').html(item.name + '
排污量: ' + item.value); - }); - */ + function startDataSimulation() { + // 每10秒调用接口更新排行数据 + setInterval(function () { + console.log("[定时刷新] 开始刷新排行数据..."); + loadRankingData(); }, 10000); } @@ -934,11 +1144,13 @@ pageEncoding="UTF-8"%> } function renderDetailContent(enterprise) { + console.log("[renderDetailContent] 渲染企业详情:", enterprise.name, enterprise); // Update DOM $("#detailTitle").text(enterprise.name); - $("#sewageType").text(enterprise.sewageType); - $("#dischargeVolume").text(enterprise.value + " m³"); - $("#connectionStatus").text(enterprise.connectionStatus); + $("#sewageType").text(enterprise.sewageType || "-"); + // 使用日排量字段，如果有 displacement 显示 displacement，否则显示 value + $("#dischargeVolume").text(enterprise.displacement || (enterprise.value + " 吨/天")); + $("#connectionStatus").text(enterprise.connectionStatus || "-"); renderDetailCharts(enterprise); }