排污户大屏

src/main/webapp/jsp/bigScreen3.jsp

@@ -360,7 +360,7 @@ pageEncoding="UTF-8"%>
               污水特性: <span id="sewageType">--</span>
             </div>
             <div class="info-item">
-              当前排污量: <span id="dischargeVolume">--</span>
+              日排量: <span id="dischargeVolume">--</span>
             </div>
             <div class="info-item">
               接入状态: <span id="connectionStatus">--</span>
@@ -406,6 +406,9 @@ pageEncoding="UTF-8"%>
       var currentFocusIndex = 0;
       var rotationTimer = null;
       
+      // 获取上下文路径
+      var contextPath = "<%=request.getContextPath()%>";
+
       // 进入全屏函数
       function enterFullscreen() {
         var elem = document.documentElement;
@@ -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 + '<span class="stat-unit">家</span>');
+            $("#connectedCount").html(connected + '<span class="stat-unit">家</span>');
+            $("#connectingCount").html(connecting + '<span class="stat-unit">家</span>');
+
+            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 + '<span class="stat-unit">家</span>');
-        $("#connectedCount").html(
+        $("#connectedCount").html(connected + '<span class="stat-unit">家</span>');
-          connected + '<span class="stat-unit">家</span>',
+        $("#connectingCount").html(connecting + '<span class="stat-unit">家</span>');
-        );
-        $("#connectingCount").html(
-          connecting + '<span class="stat-unit">家</span>',
-        );
 
-        // 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)],
-            sewageType:
+            connectionStatus: connectionStatuses[Math.floor(Math.random() * connectionStatuses.length)],
-              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
+            photo: contextPath + "/IMG/login/company.png",
-            // Map Coordinates (Relative % in map container)
+            x: Math.random() * 90 + 5,
-            x: Math.random() * 90 + 5, // 5% to 95%
+            y: Math.random() * 80 + 10,
-            y: Math.random() * 80 + 10, // 10% to 90%
+            instantHistory: generateHistoryData(72),
-            // History Data
+            cumulativeHistory: generateHistoryData(14),
-            instantHistory: generateHistoryData(72), // 3 days * 24 hours
-            cumulativeHistory: generateHistoryData(14), // 14 days
           });
         }
-        allEnterprises = enterprises;
+        return 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();
       }
 
       function generateHistoryData(count) {
@@ -872,37 +1016,103 @@ pageEncoding="UTF-8"%>
         }
       }
 
-      function startDataSimulation(enterprises) {
+      // 加载排行数据（最大和最小分别调用接口）
-        setInterval(function () {
+      function loadRankingData() {
-          // Randomize values
+        console.log("=== loadRankingData 开始加载排行数据 ===");
-          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);
+        var maxPromise = apiRequest("/sparepart/sewage/getList.do", {
-            if (item.value > 8000) {
+          page: 1,
-              el.addClass("super");
+          rows: 10,
-            } else {
+          sort: "displacement",
-              el.removeClass("super");
+          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(
+            var maxList = maxData.rows || [];
-              item.name + "<br>排污量: " + item.value,
-            );
-          });
             
-          updateSortedData(enterprises);
+            // 解析最小排行数据
-          renderRankingChart();
+            if (typeof minData === "string") {
-          // Update map tooltips if needed? Or just let them be static until hover re-render?
+              try { minData = JSON.parse(minData); } catch (e) { minData = {}; }
-          // 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.
+            var minList = minData.rows || [];
-          // For demo simplicity, we skip real-time map value update or do it simply:
+            
-          /*
+            console.log("最大排行条数:", maxList.length, "最小排行条数:", minList.length);
-                enterprises.forEach(item => {
+            
-                   $('#point-' + item.id + ' .map-tooltip').html(item.name + '<br>排污量: ' + item.value);
+            // 转换最大排行数据
-                });
+            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);
+          });
+      }
+
+      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);
+        $("#sewageType").text(enterprise.sewageType || "-");
-        $("#dischargeVolume").text(enterprise.value + " m³");
+        // 使用日排量字段，如果有 displacement 显示 displacement，否则显示 value
-        $("#connectionStatus").text(enterprise.connectionStatus);
+        $("#dischargeVolume").text(enterprise.displacement || (enterprise.value + " 吨/天"));
+        $("#connectionStatus").text(enterprise.connectionStatus || "-");
 
         renderDetailCharts(enterprise);
       }