diff --git a/src/main/java/com/sipai/controller/pipeline/PipelineDataController.java b/src/main/java/com/sipai/controller/pipeline/PipelineDataController.java
index f93d7457..981b7d7f 100644
--- a/src/main/java/com/sipai/controller/pipeline/PipelineDataController.java
+++ b/src/main/java/com/sipai/controller/pipeline/PipelineDataController.java
@@ -74,7 +74,7 @@ public class PipelineDataController {
 
     @RequestMapping("/delete.do")
     public String dodelete(HttpServletRequest request, Model model,
-            @RequestParam(value = "id") String id) {
+            @RequestParam(value = "id") Long id) {
         int result = this.pipelineDataService.deleteById(id);
         model.addAttribute("result", result);
         return "result";
@@ -83,15 +83,14 @@ public class PipelineDataController {
     @RequestMapping("/deletes.do")
     public String dodeletes(HttpServletRequest request, Model model,
             @RequestParam(value = "ids") String ids) {
-        ids = ids.replace(",", "','");
-        int result = this.pipelineDataService.deleteByWhere("where id in ('" + ids + "')");
+        int result = this.pipelineDataService.deleteByWhere("where id in (" + ids + ")");
         model.addAttribute("result", result);
         return "result";
     }
 
     @RequestMapping("/edit.do")
     public String doedit(HttpServletRequest request, Model model,
-            @RequestParam(value = "id") String id) {
+            @RequestParam(value = "id") Long id) {
         PipelineData pipelineData = this.pipelineDataService.selectById(id);
         model.addAttribute("pipelineData", pipelineData);
         return "/pipeline/pipelineDataEdit";
@@ -109,7 +108,7 @@ public class PipelineDataController {
 
     @RequestMapping("/view.do")
     public String doview(HttpServletRequest request, Model model,
-            @RequestParam(value = "id") String id) {
+            @RequestParam(value = "id") Long id) {
         PipelineData pipelineData = this.pipelineDataService.selectById(id);
         model.addAttribute("pipelineData", pipelineData);
         return "/pipeline/pipelineDataView";
diff --git a/src/main/java/com/sipai/dao/base/CommDaoImpl.java b/src/main/java/com/sipai/dao/base/CommDaoImpl.java
index 4516daef..e917f198 100644
--- a/src/main/java/com/sipai/dao/base/CommDaoImpl.java
+++ b/src/main/java/com/sipai/dao/base/CommDaoImpl.java
@@ -49,6 +49,14 @@ public class CommDaoImpl<T> implements CommDao<T> {
 		T o = getSqlSession().selectOne(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
 		return o;
 	}
+
+	/**
+	 * 根据ID查询（Long类型）
+	 */
+	public T selectByPrimaryKey(Long t){
+		T o = getSqlSession().selectOne(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
+		return o;
+	}
 	/**
 	 * wxp为activiti测试修改
 	 * @param t
@@ -62,6 +70,13 @@ public class CommDaoImpl<T> implements CommDao<T> {
 		return getSqlSession().delete(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
 	}
 
+	/**
+	 * 根据ID删除（Long类型）
+	 */
+	public int deleteByPrimaryKey(Long t) {
+		return getSqlSession().delete(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
+	}
+
 	public int insert(T t){
 		return getSqlSession().insert(mappernamespace+"."+Thread.currentThread().getStackTrace()[1].getMethodName(), t);
 	}
diff --git a/src/main/java/com/sipai/mapper/pipeline/PipelineDataMapper.xml b/src/main/java/com/sipai/mapper/pipeline/PipelineDataMapper.xml
index ccaf5688..d4aa72fd 100644
--- a/src/main/java/com/sipai/mapper/pipeline/PipelineDataMapper.xml
+++ b/src/main/java/com/sipai/mapper/pipeline/PipelineDataMapper.xml
@@ -16,32 +16,30 @@
     id, pipeline_name, diameter_mm, length_m, start_burial_depth_m, end_burial_depth_m, 
     start_ground_elevation_m, end_ground_elevation_m, pipeline_invert_elevation_m
   </sql>
-  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" >
+  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >
     select 
     <include refid="Base_Column_List" />
-    from pipeline_data
-    where id = #{id,jdbcType=VARCHAR}
+    from tb_pipeline_data
+    where id = #{id,jdbcType=BIGINT}
   </select>
-  <delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
-    delete from pipeline_data
-    where id = #{id,jdbcType=VARCHAR}
+  <delete id="deleteByPrimaryKey" parameterType="java.lang.Long" >
+    delete from tb_pipeline_data
+    where id = #{id,jdbcType=BIGINT}
   </delete>
-  <insert id="insert" parameterType="com.sipai.entity.pipeline.PipelineData" >
-    insert into pipeline_data (id, pipeline_name, diameter_mm, 
+  <insert id="insert" parameterType="com.sipai.entity.pipeline.PipelineData" useGeneratedKeys="true" keyProperty="id" >
+    insert into tb_pipeline_data (pipeline_name, diameter_mm, 
       length_m, start_burial_depth_m, end_burial_depth_m, 
       start_ground_elevation_m, end_ground_elevation_m, 
       pipeline_invert_elevation_m)
-    values (#{id,jdbcType=VARCHAR}, #{pipelineName,jdbcType=VARCHAR}, #{diameterMm,jdbcType=DECIMAL}, 
+    values (#{pipelineName,jdbcType=VARCHAR}, #{diameterMm,jdbcType=DECIMAL}, 
       #{lengthM,jdbcType=DECIMAL}, #{startBurialDepthM,jdbcType=DECIMAL}, #{endBurialDepthM,jdbcType=DECIMAL}, 
       #{startGroundElevationM,jdbcType=DECIMAL}, #{endGroundElevationM,jdbcType=DECIMAL}, 
       #{pipelineInvertElevationM,jdbcType=DECIMAL})
   </insert>
-  <insert id="insertSelective" parameterType="com.sipai.entity.pipeline.PipelineData" >
-    insert into pipeline_data
+  <insert id="insertSelective" parameterType="com.sipai.entity.pipeline.PipelineData" useGeneratedKeys="true" keyProperty="id" >
+    insert into tb_pipeline_data
     <trim prefix="(" suffix=")" suffixOverrides="," >
-      <if test="id != null" >
-        id,
-      </if>
+  
       <if test="pipelineName != null" >
         pipeline_name,
       </if>
@@ -68,9 +66,7 @@
       </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides="," >
-      <if test="id != null" >
-        #{id,jdbcType=VARCHAR},
-      </if>
+
       <if test="pipelineName != null" >
         #{pipelineName,jdbcType=VARCHAR},
       </if>
@@ -98,7 +94,7 @@
     </trim>
   </insert>
   <update id="updateByPrimaryKeySelective" parameterType="com.sipai.entity.pipeline.PipelineData" >
-    update pipeline_data
+    update tb_pipeline_data
     <set >
       <if test="pipelineName != null" >
         pipeline_name = #{pipelineName,jdbcType=VARCHAR},
@@ -125,10 +121,10 @@
         pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL},
       </if>
     </set>
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=BIGINT}
   </update>
   <update id="updateByPrimaryKey" parameterType="com.sipai.entity.pipeline.PipelineData" >
-    update pipeline_data
+    update tb_pipeline_data
     set pipeline_name = #{pipelineName,jdbcType=VARCHAR},
       diameter_mm = #{diameterMm,jdbcType=DECIMAL},
       length_m = #{lengthM,jdbcType=DECIMAL},
@@ -137,17 +133,17 @@
       start_ground_elevation_m = #{startGroundElevationM,jdbcType=DECIMAL},
       end_ground_elevation_m = #{endGroundElevationM,jdbcType=DECIMAL},
       pipeline_invert_elevation_m = #{pipelineInvertElevationM,jdbcType=DECIMAL}
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=BIGINT}
   </update>
   <select id="selectListByWhere" parameterType="java.lang.String" resultMap="BaseResultMap">
     select
     <include refid="Base_Column_List" />
-    from pipeline_data
+    from tb_pipeline_data
     ${where}
   </select>
   <delete id="deleteByWhere" parameterType="java.lang.String">
     delete from
-    pipeline_data
+    tb_pipeline_data
     ${where}
   </delete>
 </mapper>
diff --git a/src/main/java/com/sipai/service/pipeline/PipelineDataService.java b/src/main/java/com/sipai/service/pipeline/PipelineDataService.java
index af267eaf..7e05d3c3 100644
--- a/src/main/java/com/sipai/service/pipeline/PipelineDataService.java
+++ b/src/main/java/com/sipai/service/pipeline/PipelineDataService.java
@@ -19,11 +19,25 @@ public class PipelineDataService implements CommService<PipelineData> {
         return pipelineData;
     }
 
+    /**
+     * 根据ID查询（Long类型）
+     */
+    public PipelineData selectById(Long id) {
+        return pipelineDataDao.selectByPrimaryKey(id);
+    }
+
     @Override
     public int deleteById(String id) {
         return pipelineDataDao.deleteByPrimaryKey(id);
     }
 
+    /**
+     * 根据ID删除（Long类型）
+     */
+    public int deleteById(Long id) {
+        return pipelineDataDao.deleteByPrimaryKey(id);
+    }
+
     @Override
     public int save(PipelineData pipelineData) {
         return pipelineDataDao.insert(pipelineData);
diff --git a/src/main/resources/redis.properties b/src/main/resources/redis.properties
index da61caaf..d86b5c6b 100644
--- a/src/main/resources/redis.properties
+++ b/src/main/resources/redis.properties
@@ -1,10 +1,10 @@
 #redis����
-#redis.host=122.51.194.184
- redis.host=127.0.0.1
+redis.host=122.51.194.184
+# redis.host=127.0.0.1
 #����single  ��Ⱥcluster
 redis.mode=single
-#redis.port=26739
- redis.port=6379
+redis.port=26739
+# redis.port=6379
 redis.password=Aa112211
 redis.maxIdle=100
 redis.maxActive=300
diff --git a/src/main/webapp/JS/comm.js b/src/main/webapp/JS/comm.js
index 63447865..c8ce9394 100644
--- a/src/main/webapp/JS/comm.js
+++ b/src/main/webapp/JS/comm.js
@@ -532,9 +532,9 @@ function initMenu() {
             // 注意：新菜单项可能直接是文本，也可能包含 i 标签
             var exists = false;
             $treeviewMenu.find('li').each(function() {
-                if ($(this).text().indexOf('新源头GIS管理') > -1) {
-                    exists = true;
-                }
+                // if ($(this).text().indexOf('管道管理') > -1) {
+                //     exists = true;
+                // }
             });
             
             if (!exists) {
@@ -545,9 +545,6 @@ function initMenu() {
                 var newMenuHtml = '';
                 if (typeof addTab === 'function') {
                      // 假设 addTab(id, name, url)
-                    //  /jsp/pipeline/pipelineDataList.jsp
-                    //  newMenuHtml = '<li><a href="javascript:void(0);" onclick="addTab(\'newSourceGIS\', \'新源头GIS管理\', \'/jsp/visual/newSourceGISPage.jsp\')"><i class="fa fa-map-marker"></i> 新源头GIS管理</a></li>';
-                     newMenuHtml = '<li><a href="javascript:void(0);" onclick="addTab(\'pipelineDataList\', \'管道管理\', \'/jsp/pipeline/pipelineDataList.jsp\')"><i class="fa fa-map-marker"></i> 管道管理</a></li>';
                 } else {
                      // 如果没有 addTab，尝试使用 iframe 加载或者直接跳转（但在框架内）
                      // refreshPage 通常是 location.replace，这会刷新整个页面。
@@ -565,8 +562,6 @@ function initMenu() {
                      // 所以我们应该优先使用 addTab。
                      // 如果 addTab 未定义（可能在 index.jsp 中定义），我们尝试模拟它。
                      // 由于 comm.js 被 index.jsp 引用，addTab 应该可用。
-                    //  newMenuHtml = '<li><a href="javascript:void(0);" onclick="if(typeof addTab === \'function\'){addTab(\'newSourceGIS\', \'新源头GIS管理\', \'/jsp/visual/newSourceGISPage.jsp\');}else{refreshPage(\'' + ext.contextPath + '/jsp/visual/newSourceGISPage.jsp\');}"><i class="fa fa-map-marker"></i> 新源头GIS管理</a></li>';
-                     newMenuHtml = '<li><a href="javascript:void(0);" onclick="if(typeof addTab === \'function\'){addTab(\'pipelineDataList\', \'管道管理\', \'/jsp/pipeline/pipelineDataList.jsp\');}else{refreshPage(\'' + ext.contextPath + '/jsp/pipeline/pipelineDataList.jsp\');}"><i class="fa fa-map-marker"></i> 管道管理</a></li>';
                 }
                 $treeviewMenu.append(newMenuHtml);
                 
diff --git a/src/main/webapp/WEB-INF/lib/sqljdbc4-4.0.jar b/src/main/webapp/WEB-INF/lib/sqljdbc4-4.0.jar
new file mode 100644
index 00000000..d6b7f6da
Binary files /dev/null and b/src/main/webapp/WEB-INF/lib/sqljdbc4-4.0.jar differ
diff --git a/src/main/webapp/jsp/bigScreen.jsp b/src/main/webapp/jsp/bigScreen.jsp
index 8ddb0cfc..94df6e72 100644
--- a/src/main/webapp/jsp/bigScreen.jsp
+++ b/src/main/webapp/jsp/bigScreen.jsp
@@ -1,70 +1,619 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>水厂大屏展示</title>
+    <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
+    <!-- <script
+      type="text/javascript"
+      src="../../node_modules/jquery/dist/jquery.min.js"
+    ></script>
+    <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
     <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto; /* Allow scrolling if window is smaller */
-            background-color: #030829;
-        }
-        .screen-container {
-            width: 6500px;
-            height: 1800px;
-            background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
-            /* background-image: url('../../IMG/screen1-1.png'); */
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            position: relative;
-        }
-        /* Specific Position for Data 6040 */
-        .val-6040 { 
-           position: absolute;
-           top: 335px; 
-           left: 209px; 
-           width: 121px; 
-           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;
-         }
-         .val-4197 {
-            top: 335px;
-            left: 592px;
-            width: fit-content;
-            height: fit-content;
-            display: inline-flex;
-            place-content: flex-start;
-            place-items: flex-end;
-            gap: 8px;
-        }
-        .val-12356 {
-            top: 335px;
-            left: 975px;
-            width: fit-content;
-            height: fit-content;
-            display: inline-flex;
-            place-content: flex-start;
-            place-items: flex-end;
-            gap: 8px;
-        }
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto; /* Allow scrolling if window is smaller */
+        background-color: #030829;
+      }
+      .screen-container {
+        width: 6500px;
+        height: 1800px;
+        background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png');
+        /* background-image: url("../../IMG/screen1.png"); */
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: relative;
+      }
+      /* Specific Position for Data 6040 */
+      .slqs {
+        position: absolute;
+        width: 121px;
+        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;
+      }
+      .slqs-jinri {
+        top: 335px;
+        left: 209px;
+      }
+      .slqs-zuori {
+        top: 335px;
+        left: 592px;
+      }
+      .slqs-benyue {
+        top: 335px;
+        left: 975px;
+      }
 
+      .ncl-val {
+        position: absolute;
+        width: 76px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        text-align: right;
+        color: rgba(255, 255, 255, 1);
+        font-family: Gilroy;
+        font-weight: 500;
+        font-size: 36px;
+        line-height: 36px;
+      }
+      .ncl-val1 {
+        top: 1168px;
+        left: 318px;
+      }
+      .ncl-val2 {
+        top: 1168px;
+        left: 653px;
+      }
+      .ncl-val3 {
+        top: 1168px;
+        left: 1023px;
+      }
+      .ncl2 {
+        position: absolute;
+        top: 1310px;
+        left: 66px;
+        width: 1077px;
+        height: 440px;
+      }
+      #ncl-chart {
+        width: 100%;
+        height: 100%;
+      }
+      .seven-days-sl {
+        position: absolute;
+        top: 591px;
+        left: 66px;
+        width: 1077px;
+        height: 400px;
+      }
+      #seven-days-chart {
+        width: 100%;
+        height: 100%;
+      }
+      .quality-table {
+        position: absolute;
+        top: 630px;
+        left: 1183px;
+        width: 975px;
+      }
+      .quality-table table {
+        width: 100%;
+        border-collapse: collapse;
+        color: #7ef3ff;
+        font-size: 27px;
+        text-align: center;
+        background: transparent;
+      }
+      .quality-table th,
+      .quality-table td {
+        border: 1px solid rgba(0, 163, 255, 0.4);
+        padding: 16px 23px;
+      }
+      .quality-table th {
+        color: #ffffff;
+        font-size: 27px;
+        font-weight: 600;
+      }
+      .quality-table td:first-child {
+        color: #ffffff;
+        text-align: left;
+        padding-left: 12px;
+      }
+      .quality-table td:last-child {
+        color: rgba(255, 255, 255, 0.6);
+      }
+      .quality-chart {
+        position: absolute;
+        top: 1380px;
+        left: 1183px;
+        width: 975px;
+        height: 370px;
+      }
+      #quality-chart {
+        width: 100%;
+        height: 100%;
+      }
+
+      /* 药耗 */
+      .yaohao {
+        position: absolute;
+        top: 343px;
+        width: 94px;
+        height: 56px;
+        display: flex;
+        align-items: center;
+        text-align: right;
+        color: rgba(255, 255, 255, 1);
+        font-family: Gilroy;
+        font-weight: 700;
+        font-size: 40px;
+        line-height: 56px;
+      }
+      .yaohao1 {
+        left: 1317px;
+      }
+      .yaohao2 {
+        left: 1652px;
+      }
+      .yaohao3 {
+        left: 2056px;
+      }
+
+      .Middle3 {
+        width: 2100px;
+        position: absolute;
+        top: 300px;
+        left: 2700px;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="screen-container">
-        <!-- <div class="val-6040">6040</div>
-        <div class="val-4197">4197</div>
-        <div class="val-12356">12356</div> -->
+      <div class="left">
+        <div>
+          <div class="slqs slqs-jinri">6040</div>
+          <div class="slqs slqs-zuori">4197</div>
+          <div class="slqs slqs-benyue">12356</div>
+        </div>
+
+        <!-- 七日水量 -->
+        <div class="seven-days-sl">
+          <div id="seven-days-chart"></div>
+        </div>
+
+        <!-- 泥处理指标 -->
+        <div class="ncl">
+          <div class="ncl1">
+            <div class="ncl-val ncl-val1">0</div>
+            <div class="ncl-val ncl-val2">200</div>
+            <div class="ncl-val ncl-val3">4.89</div>
+          </div>
+          <div class="ncl2">
+            <div id="ncl-chart"></div>
+          </div>
+        </div>
+      </div>
+      <div class="Middle">
+        <div class="Middle1">
+          <!-- 药耗 -->
+          <div>
+            <div class="yaohao yaohao1">300</div>
+            <div class="yaohao yaohao2">200</div>
+            <div class="yaohao yaohao3">1</div>
+          </div>
+
+          <!-- 质量指标 表格 -->
+          <div class="quality-table">
+            <table>
+              <thead>
+                <tr>
+                  <th>参数</th>
+                  <th>当前值</th>
+                  <th>平均值</th>
+                  <th>最高</th>
+                  <th>最低</th>
+                  <th>指标</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>COD (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>TP (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>NH3–N (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>TN (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>PH (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>SS</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>温度(℃)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="quality-chart">
+            <div id="quality-chart"></div>
+          </div>
+        </div>
+
+        <div class="Middle2">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+
+        <!-- 中间图表 -->
+        <div class="Middle3">
+          <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" />
+        </div>
+
+        <div class="Middle4">
+          <!-- 进水 -->
+          <div></div>
+
+          <!-- 出水 -->
+          <div></div>
+
+          <div></div>
+
+          <div></div>
+        </div>
+      </div>
+
+      <!-- 视频 -->
+      <div class="right"></div>
     </div>
-</body>
+    <script>
+      $(function () {
+        var chartDom = document.getElementById("seven-days-chart");
+        if (!chartDom) return;
+        var myChart = echarts.init(chartDom);
+        var dataAxis = [
+          "11-10",
+          "11-11",
+          "11-12",
+          "11-13",
+          "11-14",
+          "11-15",
+          "11-16",
+          "11-17",
+        ];
+        var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
+        var option = {
+          backgroundColor: "transparent",
+          grid: {
+            left: 60,
+            right: 40,
+            top: 40,
+            bottom: 40,
+          },
+          legend: {
+            data: ["处理水量"],
+            right: 10,
+            top: 0,
+            textStyle: {
+              color: "#9BE8FF",
+              fontSize: 25,
+            },
+          },
+          xAxis: {
+            type: "category",
+            data: dataAxis,
+            axisLine: {
+              lineStyle: { color: "#2C3E50" },
+            },
+            axisTick: { show: false },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 25,
+            },
+          },
+          yAxis: {
+            type: "value",
+            max: 10000,
+            splitNumber: 5,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 18,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.15)",
+                type: "dashed",
+              },
+            },
+          },
+          dataZoom: [{ type: "inside" }],
+          series: [
+            {
+              name: "处理水量",
+              type: "bar",
+              barWidth: 20,
+              data: data,
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#46F2FF" },
+                    { offset: 1, color: "#0B4DB5" },
+                  ]),
+                  shadowColor: "rgba(0, 0, 0, 0.3)",
+                  shadowBlur: 10,
+                },
+              },
+              emphasis: {
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#6af8ff" },
+                    { offset: 1, color: "#1560d6" },
+                  ]),
+                },
+              },
+            },
+            {
+              type: "bar",
+              barGap: "-100%",
+              data: (function () {
+                var yMax = 10000;
+                var shadow = [];
+                for (var i = 0; i < data.length; i++) {
+                  shadow.push(yMax);
+                }
+                return shadow;
+              })(),
+              itemStyle: { normal: { color: "rgba(0,0,0,0.05)" } },
+              silent: true,
+            },
+          ],
+        };
+        myChart.setOption(option);
+        var zoomSize = 6;
+        myChart.on("click", function (params) {
+          var startIndex = Math.max(
+            params.dataIndex - Math.floor(zoomSize / 2),
+            0,
+          );
+          var endIndex = Math.min(
+            params.dataIndex + Math.floor(zoomSize / 2),
+            data.length - 1,
+          );
+          myChart.dispatchAction({
+            type: "dataZoom",
+            startValue: dataAxis[startIndex],
+            endValue: dataAxis[endIndex],
+          });
+        });
+        var nclDom = document.getElementById("ncl-chart");
+        if (nclDom) {
+          var nclChart = echarts.init(nclDom, "dark");
+          var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
+          var nclOption = {
+            backgroundColor: "transparent",
+            grid: {
+              left: 60,
+              right: 40,
+              top: 40,
+              bottom: 40,
+            },
+            legend: {
+              data: ["实际小时排泥量"],
+              right: 10,
+              top: 0,
+              textStyle: {
+                color: "#9BE8FF",
+                fontSize: 25,
+              },
+            },
+            xAxis: {
+              type: "category",
+              data: [
+                "2:00",
+                "4:00",
+                "6:00",
+                "8:00",
+                "10:00",
+                "12:00",
+                "14:00",
+                "16:00",
+                "18:00",
+                "20:00",
+              ],
+              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,
+              },
+            ],
+          };
+          nclChart.setOption(nclOption);
+          window.addEventListener("resize", function () {
+            nclChart.resize();
+          });
+        }
+        window.addEventListener("resize", function () {
+          myChart.resize();
+        });
+        var qualityDom = document.getElementById("quality-chart");
+        if (qualityDom) {
+          var qualityChart = echarts.init(qualityDom);
+          var qualityData = [8, 13, 9, 14, 21, 14, 18];
+          var qualityOption = {
+            backgroundColor: "transparent",
+            grid: {
+              left: 60,
+              right: 40,
+              top: 40,
+              bottom: 40,
+            },
+            legend: {
+              data: ["水质量"],
+              right: 10,
+              top: 0,
+              textStyle: {
+                color: "#9BE8FF",
+                fontSize: 25,
+              },
+            },
+            xAxis: {
+              type: "category",
+              data: ["11", "12", "13", "14", "15", "16", "17"],
+              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,
+              },
+            ],
+          };
+          qualityChart.setOption(qualityOption);
+          window.addEventListener("resize", function () {
+            qualityChart.resize();
+          });
+        }
+      });
+    </script>
+  </body>
 </html>
diff --git a/src/main/webapp/jsp/bigScreen2.jsp b/src/main/webapp/jsp/bigScreen2.jsp
index 943a1ecc..612bc938 100644
--- a/src/main/webapp/jsp/bigScreen2.jsp
+++ b/src/main/webapp/jsp/bigScreen2.jsp
@@ -1,462 +1,574 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<!DOCTYPE html>
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+pageEncoding="UTF-8"%>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>区域管线大屏展示</title>
     <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
-    <!-- <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> -->
+    <!-- <script
+      type="text/javascript"
+      src="../../node_modules/jquery/dist/jquery.min.js"
+    ></script> -->
     <!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
     <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto; /* Allow scrolling if window is smaller */
-            background-color: #030829;
-        }
-        .screen-container {
-            width: 6500px;
-            height: 1800px;
-            /* background-image: url('../../IMG/screen2.png'); */
-            background-image: url('<%=request.getContextPath()%>/IMG/screen2.png');
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            position: relative;
-        }
-        .stat-card {
-            position: absolute;
-            top: 257px;
-            /* left: 1910px; */
-            width: 200px;
-            height: 71px;
-            color: rgba(255, 255, 255, 1);
-            font-family: Gilroy;
-            font-weight: 500;
-            font-size: 60px;
-        }
-        
-        .card-1 { left: 1910px; }
-        .card-2 { left: 2832px; }
-        .card-3 { left: 3754px; }
-        
-        .ring-chart-wrapper {
-            position: absolute;
-            top: 563px;
-            left: 1880px;
-            width: 662px;
-            height: 455px;
-        }
-        .pie-chart-wrapper-2 {
-            position: absolute;
-            top: 563px;
-            left: 2572px;
-            width: 662px;
-            height: 455px;
-        }
-        .gauge-chart-wrapper-3 {
-            position: absolute;
-            top: 563px;
-            left: 3264px;
-            width: 662px;
-            height: 455px;
-        }
-        .gauge-chart-wrapper-4 {
-            position: absolute;
-            top: 563px;
-            left: 3956px;
-            width: 662px;
-            height: 455px;
-        }
-        .bar-chart-wrapper-5 {
-            position: absolute;
-            top: 1158px;
-            left: 1881px;
-            width: 1353px;
-            height: 592px;
-        }
-        .bar-chart-wrapper-6 {
-            position: absolute;
-            top: 1158px;
-            left: 3265px;
-            width: 1353px;
-            height: 592px;
-        }
-        .ring-chart-bg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0.4;
-            mix-blend-mode: normal;
-            /* border: 1px solid rgba(27, 126, 242, 1); */
-            box-sizing: border-box;
-            /* background: rgba(27, 126, 242, 0.6); */
-        }
-        #ring-chart-content, #pie-chart-content-2, #gauge-chart-content-3, #gauge-chart-content-4, #bar-chart-content-5, #bar-chart-content-6 {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto; /* Allow scrolling if window is smaller */
+        background-color: #030829;
+      }
+      .screen-container {
+        width: 6500px;
+        height: 1800px;
+        /* background-image: url("../../IMG/screen2.png"); */
+        background-image: url('<%=request.getContextPath()%>/IMG/screen2.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: relative;
+      }
+      .stat-card {
+        position: absolute;
+        top: 257px;
+        /* left: 1910px; */
+        width: 200px;
+        height: 71px;
+        color: rgba(255, 255, 255, 1);
+        font-family: Gilroy;
+        font-weight: 500;
+        font-size: 60px;
+      }
+
+      .card-1 {
+        left: 1910px;
+      }
+      .card-2 {
+        left: 2832px;
+      }
+      .card-3 {
+        left: 3754px;
+      }
+
+      .ring-chart-wrapper {
+        position: absolute;
+        top: 563px;
+        left: 1880px;
+        width: 662px;
+        height: 455px;
+      }
+      .pie-chart-wrapper-2 {
+        position: absolute;
+        top: 563px;
+        left: 2572px;
+        width: 662px;
+        height: 455px;
+      }
+      .gauge-chart-wrapper-3 {
+        position: absolute;
+        top: 563px;
+        left: 3264px;
+        width: 662px;
+        height: 455px;
+      }
+      .gauge-chart-wrapper-4 {
+        position: absolute;
+        top: 563px;
+        left: 3956px;
+        width: 662px;
+        height: 455px;
+      }
+      .bar-chart-wrapper-5 {
+        position: absolute;
+        top: 1158px;
+        left: 1881px;
+        width: 1353px;
+        height: 592px;
+      }
+      .bar-chart-wrapper-6 {
+        position: absolute;
+        top: 1158px;
+        left: 3265px;
+        width: 1353px;
+        height: 592px;
+      }
+      .ring-chart-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.4;
+        mix-blend-mode: normal;
+        /* border: 1px solid rgba(27, 126, 242, 1); */
+        box-sizing: border-box;
+        /* background: rgba(27, 126, 242, 0.6); */
+      }
+      #ring-chart-content,
+      #pie-chart-content-2,
+      #gauge-chart-content-3,
+      #gauge-chart-content-4,
+      #bar-chart-content-5,
+      #bar-chart-content-6 {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="screen-container">
-        <div class="stat-card card-1">53829.5</div>
-        <div class="stat-card card-2">2495</div>
-        <div class="stat-card card-3">2460</div>
-        
-        <div class="ring-chart-wrapper">
-            <div class="ring-chart-bg"></div>
-            <div id="ring-chart-content"></div>
-        </div>
-        
-        <div class="pie-chart-wrapper-2">
-            <div class="ring-chart-bg"></div>
-            <div id="pie-chart-content-2"></div>
-        </div>
-        
-        <div class="gauge-chart-wrapper-3">
-            <div class="ring-chart-bg"></div>
-            <div id="gauge-chart-content-3"></div>
-        </div>
-        
-        <div class="gauge-chart-wrapper-4">
-            <div class="ring-chart-bg"></div>
-            <div id="gauge-chart-content-4"></div>
-        </div>
-        
-        <div class="bar-chart-wrapper-5">
-            <div class="ring-chart-bg"></div>
-            <div id="bar-chart-content-5"></div>
-        </div>
-        
-        <div class="bar-chart-wrapper-6">
-            <div class="ring-chart-bg"></div>
-            <div id="bar-chart-content-6"></div>
-        </div>
+      <div class="stat-card card-1">53829.5</div>
+      <div class="stat-card card-2">2495</div>
+      <div class="stat-card card-3">2460</div>
+
+      <div class="ring-chart-wrapper">
+        <div class="ring-chart-bg"></div>
+        <div id="ring-chart-content"></div>
+      </div>
+
+      <div class="pie-chart-wrapper-2">
+        <div class="ring-chart-bg"></div>
+        <div id="pie-chart-content-2"></div>
+      </div>
+
+      <div class="gauge-chart-wrapper-3">
+        <div class="ring-chart-bg"></div>
+        <div id="gauge-chart-content-3"></div>
+      </div>
+
+      <div class="gauge-chart-wrapper-4">
+        <div class="ring-chart-bg"></div>
+        <div id="gauge-chart-content-4"></div>
+      </div>
+
+      <div class="bar-chart-wrapper-5">
+        <div class="ring-chart-bg"></div>
+        <div id="bar-chart-content-5"></div>
+      </div>
+
+      <div class="bar-chart-wrapper-6">
+        <div class="ring-chart-bg"></div>
+        <div id="bar-chart-content-6"></div>
+      </div>
     </div>
 
     <script>
-        $(document).ready(function() {
-            launchIntoFullscreen(document.documentElement);
-            initPieChart();
-            initPieChart2();
-            initGaugeChart('gauge-chart-content-3', 53829.5);
-            initGaugeChart('gauge-chart-content-4', 12345.6);
-            initBarChart('bar-chart-content-5', [3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000, 1000, 500, 2563, 4000]);
-            initBarChart('bar-chart-content-6', [2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500, 800, 400, 2000, 3000]);
-            
-            // Double click to toggle fullscreen
-            $('body').on('dblclick', function() {
-                launchIntoFullscreen(document.documentElement);
-            });
+      $(document).ready(function () {
+        launchIntoFullscreen(document.documentElement);
+        initPieChart();
+        initPieChart2();
+        initGaugeChart("gauge-chart-content-3", 53829.5);
+        initGaugeChart("gauge-chart-content-4", 12345.6);
+        initBarChart(
+          "bar-chart-content-5",
+          [
+            3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
+            1000, 500, 2563, 4000,
+          ],
+        );
+        initBarChart(
+          "bar-chart-content-6",
+          [
+            2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
+            800, 400, 2000, 3000,
+          ],
+        );
+
+        // Double click to toggle fullscreen
+        $("body").on("dblclick", function () {
+          launchIntoFullscreen(document.documentElement);
         });
+      });
 
-        function initPieChart() {
-            var chartDom = document.getElementById('ring-chart-content');
-            var myChart = echarts.init(chartDom);
-            var option = {
-                color: [
-                    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
-                    '#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00'
-                ],
-                series: [
-                    {
-                        name: '管线类型统计',
-                        type: 'pie',
-                        radius: '55%',
-                        center: ['50%', '50%'],
-                        avoidLabelOverlap: true,
-                        label: {
-                            show: true,
-                            position: 'outside',
-                            formatter: '{b}',
-                            fontSize: 14,
-                            lineHeight: 20,
-                            align: 'left'
-                        },
-                        labelLine: {
-                            show: true,
-                            length: 20,
-                            length2: 30,
-                            lineStyle: {
-                                type: 'solid'
-                            }
-                        },
-                        data: [
-                            { value: 335, name: 'II级钢筋混凝土管 承插接口' },
-                            { value: 310, name: '焊接钢管 焊接接口' },
-                            { value: 274, name: '高密度聚乙烯双壁波纹管' },
-                            { value: 235, name: '聚乙烯PE管' },
-                            { value: 200, name: 'II级钢筋混凝土管' },
-                            { value: 180, name: '高密度聚乙烯缠绕管' },
-                            { value: 150, name: '焊接钢管 焊接连接' },
-                            { value: 140, name: '高密度聚乙烯中空壁缠绕管' },
-                            { value: 130, name: '钢筋混凝土管' },
-                            { value: 110, name: '球墨铸铁管' },
-                            { value: 100, name: '预应力钢筒混凝土管' }
-                        ]
-                    }
-                ]
-            };
-            myChart.setOption(option);
+      function initPieChart() {
+        var chartDom = document.getElementById("ring-chart-content");
+        var myChart = echarts.init(chartDom);
+        var option = {
+          color: [
+            "#5470c6",
+            "#91cc75",
+            "#fac858",
+            "#ee6666",
+            "#73c0de",
+            "#3ba272",
+            "#fc8452",
+            "#9a60b4",
+            "#ea7ccc",
+            "#00d4ff",
+            "#ffb700",
+            "#2bff89",
+            "#915eff",
+            "#ff7f00",
+          ],
+          series: [
+            {
+              name: "管线类型统计",
+              type: "pie",
+              radius: "55%",
+              center: ["50%", "50%"],
+              avoidLabelOverlap: true,
+              label: {
+                show: true,
+                position: "outside",
+                formatter: "{b}",
+                fontSize: 14,
+                lineHeight: 20,
+                align: "left",
+              },
+              labelLine: {
+                show: true,
+                length: 20,
+                length2: 30,
+                lineStyle: {
+                  type: "solid",
+                },
+              },
+              data: [
+                { value: 335, name: "II级钢筋混凝土管 承插接口" },
+                { value: 310, name: "焊接钢管 焊接接口" },
+                { value: 274, name: "高密度聚乙烯双壁波纹管" },
+                { value: 235, name: "聚乙烯PE管" },
+                { value: 200, name: "II级钢筋混凝土管" },
+                { value: 180, name: "高密度聚乙烯缠绕管" },
+                { value: 150, name: "焊接钢管 焊接连接" },
+                { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
+                { value: 130, name: "钢筋混凝土管" },
+                { value: 110, name: "球墨铸铁管" },
+                { value: 100, name: "预应力钢筒混凝土管" },
+              ],
+            },
+          ],
+        };
+        myChart.setOption(option);
+      }
+
+      function initPieChart2() {
+        var chartDom = document.getElementById("pie-chart-content-2");
+        var myChart = echarts.init(chartDom);
+        var option = {
+          color: [
+            "#5470c6",
+            "#91cc75",
+            "#fac858",
+            "#ee6666",
+            "#73c0de",
+            "#3ba272",
+            "#fc8452",
+            "#9a60b4",
+            "#ea7ccc",
+            "#00d4ff",
+            "#ffb700",
+            "#2bff89",
+            "#915eff",
+            "#ff7f00",
+          ],
+          series: [
+            {
+              name: "管线类型统计2",
+              type: "pie",
+              radius: "55%",
+              center: ["50%", "50%"],
+              avoidLabelOverlap: true,
+              label: {
+                show: true,
+                position: "outside",
+                formatter: "{b}",
+                fontSize: 14,
+                lineHeight: 20,
+                align: "left",
+              },
+              labelLine: {
+                show: true,
+                length: 20,
+                length2: 30,
+                lineStyle: {
+                  type: "solid",
+                },
+              },
+              data: [
+                { value: 335, name: "II级钢筋混凝土管 承插接口" },
+                { value: 310, name: "焊接钢管 焊接接口" },
+                { value: 274, name: "高密度聚乙烯双壁波纹管" },
+                { value: 235, name: "聚乙烯PE管" },
+                { value: 200, name: "II级钢筋混凝土管" },
+                { value: 180, name: "高密度聚乙烯缠绕管" },
+                { value: 150, name: "焊接钢管 焊接连接" },
+                { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
+                { value: 130, name: "钢筋混凝土管" },
+                { value: 110, name: "球墨铸铁管" },
+                { value: 100, name: "预应力钢筒混凝土管" },
+              ],
+            },
+          ],
+        };
+        myChart.setOption(option);
+      }
+
+      function initGaugeChart(domId, value) {
+        var chartDom = document.getElementById(domId);
+        var myChart = echarts.init(chartDom);
+        var option = {
+          series: [
+            {
+              type: "gauge",
+              startAngle: 180,
+              endAngle: 0,
+              min: 0,
+              max: 300,
+              splitNumber: 6,
+              radius: "90%",
+              center: ["50%", "70%"],
+              axisLine: {
+                lineStyle: {
+                  width: 40,
+                  color: [
+                    [
+                      1,
+                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: "rgba(65, 108, 243, 1)" },
+                        { offset: 1, color: "rgba(0, 68, 160, 1)" },
+                      ]),
+                    ],
+                  ],
+                },
+              },
+              pointer: {
+                show: true,
+                length: "60%",
+                width: 6,
+                itemStyle: {
+                  color: "#00d4ff",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#00d4ff",
+                fontSize: 14,
+                distance: -60,
+                formatter: function (value) {
+                  return value;
+                },
+              },
+              detail: {
+                show: true,
+                offsetCenter: [0, "40%"],
+                fontSize: 30,
+                color: "#fff",
+                formatter: "{value} m",
+              },
+              data: [
+                {
+                  value: value,
+                  name: "",
+                },
+              ],
+            },
+          ],
+        };
+
+        // Adjust value if it exceeds max for visual representation (optional)
+        // For now, we just set the data value as is, but if it's large like 53829.5,
+        // the pointer will be pegged at max.
+        // If the gauge is just a visual indicator and the number is what matters:
+        // Let's set the gauge pointer to max if value > 300
+        if (value > 300) {
+          option.series[0].data[0].value = 300; // Pointer at max
+          option.series[0].detail.formatter = value + " m"; // Show real value
         }
 
-        function initPieChart2() {
-            var chartDom = document.getElementById('pie-chart-content-2');
-            var myChart = echarts.init(chartDom);
-            var option = {
-                color: [
-                    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
-                    '#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00'
-                ],
-                series: [
-                    {
-                        name: '管线类型统计2',
-                        type: 'pie',
-                        radius: '55%',
-                        center: ['50%', '50%'],
-                        avoidLabelOverlap: true,
-                        label: {
-                            show: true,
-                            position: 'outside',
-                            formatter: '{b}',
-                            fontSize: 14,
-                            lineHeight: 20,
-                            align: 'left'
-                        },
-                        labelLine: {
-                            show: true,
-                            length: 20,
-                            length2: 30,
-                            lineStyle: {
-                                type: 'solid'
-                            }
-                        },
-                        data: [
-                            { value: 335, name: 'II级钢筋混凝土管 承插接口' },
-                            { value: 310, name: '焊接钢管 焊接接口' },
-                            { value: 274, name: '高密度聚乙烯双壁波纹管' },
-                            { value: 235, name: '聚乙烯PE管' },
-                            { value: 200, name: 'II级钢筋混凝土管' },
-                            { value: 180, name: '高密度聚乙烯缠绕管' },
-                            { value: 150, name: '焊接钢管 焊接连接' },
-                            { value: 140, name: '高密度聚乙烯中空壁缠绕管' },
-                            { value: 130, name: '钢筋混凝土管' },
-                            { value: 110, name: '球墨铸铁管' },
-                            { value: 100, name: '预应力钢筒混凝土管' }
-                        ]
-                    }
-                ]
-            };
-            myChart.setOption(option);
+        myChart.setOption(option);
+      }
+
+      function initBarChart(domId, data) {
+        var chartDom = document.getElementById(domId);
+        var myChart = echarts.init(chartDom);
+
+        // Find max value for markPoint (example logic)
+        var maxVal = Math.max(...data);
+        var minVal = Math.min(...data);
+
+        var option = {
+          grid: {
+            top: "20%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          xAxis: {
+            type: "category",
+            data: [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+            ],
+            axisLine: {
+              lineStyle: { color: "#2C3E50" },
+              show: true,
+              //  lineStyle: {
+              //      color: 'rgba(255, 255, 255, 0.3)'
+              //  }
+            },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 25,
+            },
+            //  axisTick: {
+            //      show: false
+            //  }
+          },
+          yAxis: {
+            type: "value",
+            name: "长度(m)",
+            //  nameTextStyle: {
+            //      color: '#fff',
+            //      padding: [0, 0, 0, 20]
+            //  },
+            //  axisLabel: {
+            //      color: '#fff',
+            //      fontSize: 14
+            //  },
+            //  splitLine: {
+            //      show: true,
+            //      lineStyle: {
+            //          color: 'rgba(255, 255, 255, 0.1)'
+            //      }
+            //  },
+            splitNumber: 5,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 18,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.15)",
+                type: "dashed",
+              },
+            },
+          },
+          dataZoom: [{ type: "inside" }],
+          series: [
+            {
+              data: data,
+              type: "bar",
+              barWidth: "40%",
+              //  itemStyle: {
+              //     color: '#FF9900',
+              //     borderColor: '#FF9900',
+              //     borderWidth: 1
+              // },
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#46F2FF" },
+                    { offset: 1, color: "#0B4DB5" },
+                  ]),
+                  shadowColor: "rgba(0, 0, 0, 0.3)",
+                  shadowBlur: 10,
+                },
+              },
+              emphasis: {
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#6af8ff" },
+                    { offset: 1, color: "#1560d6" },
+                  ]),
+                },
+              },
+              //      markPoint: {
+              //          symbol: 'pin',
+              //          symbolSize: 50,
+              //          label: {
+              //              show: true,
+              //              color: '#fff',
+              //              fontSize: 12
+              //          },
+              //          itemStyle: {
+              //              color: '#FF9900'
+              //          },
+              //          data: [
+              //              { type: 'max', name: 'Max' },
+              //              { type: 'min', name: 'Min' }
+              //          ]
+              //      },
+              //      markLine: {
+              //          symbol: 'none',
+              //          data: [
+              //              { yAxis: 2563.31, name: 'Average' }
+              //          ],
+              //          label: {
+              //              show: true,
+              //              position: 'end',
+              //              formatter: '{c}',
+              //              color: '#FF9900'
+              //          },
+              //          lineStyle: {
+              //              type: 'dotted',
+              //              color: '#FF9900'
+              //          }
+              //      }
+            },
+            //                      {
+            //     type: 'bar',
+            //     barGap: '-100%',
+            //     data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
+            //     itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
+            //     silent: true
+            // }
+          ],
+        };
+        myChart.setOption(option);
+      }
+
+      function launchIntoFullscreen(element) {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
         }
+      }
 
-        function initGaugeChart(domId, value) {
-            var chartDom = document.getElementById(domId);
-            var myChart = echarts.init(chartDom);
-            var option = {
-                series: [
-                    {
-                        type: 'gauge',
-                        startAngle: 180,
-                        endAngle: 0,
-                        min: 0,
-                        max: 300,
-                        splitNumber: 6,
-                        radius: '90%',
-                        center: ['50%', '70%'],
-                        axisLine: {
-                            lineStyle: {
-                                width: 40,
-                                color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                                    { offset: 0, color: 'rgba(65, 108, 243, 1)' },
-                                    { offset: 1, color: 'rgba(0, 68, 160, 1)' }
-                                ])]]
-                            }
-                        },
-                        pointer: {
-                            show: true,
-                            length: '60%',
-                            width: 6,
-                            itemStyle: {
-                                color: '#00d4ff'
-                            }
-                        },
-                        axisTick: {
-                            show: false
-                        },
-                        splitLine: {
-                            show: false
-                        },
-                        axisLabel: {
-                            color: '#00d4ff',
-                            fontSize: 14,
-                            distance: -60,
-                            formatter: function (value) {
-                                return value;
-                            }
-                        },
-                        detail: {
-                            show: true,
-                            offsetCenter: [0, '40%'],
-                            fontSize: 30,
-                            color: '#fff',
-                            formatter: '{value} m'
-                        },
-                        data: [{
-                            value: value,
-                            name: ''
-                        }]
-                    }
-                ]
-            };
-            
-            // Adjust value if it exceeds max for visual representation (optional)
-            // For now, we just set the data value as is, but if it's large like 53829.5, 
-            // the pointer will be pegged at max. 
-            // If the gauge is just a visual indicator and the number is what matters:
-            // Let's set the gauge pointer to max if value > 300
-            if (value > 300) {
-                 option.series[0].data[0].value = 300; // Pointer at max
-                 option.series[0].detail.formatter = value + ' m'; // Show real value
-            }
-
-            myChart.setOption(option);
-         }
-
-         function initBarChart(domId, data) {
-             var chartDom = document.getElementById(domId);
-             var myChart = echarts.init(chartDom);
-             
-             // Find max value for markPoint (example logic)
-             var maxVal = Math.max(...data);
-             var minVal = Math.min(...data);
-             
-             var option = {
-                 grid: {
-                     top: '20%',
-                     left: '3%',
-                     right: '4%',
-                     bottom: '3%',
-                     containLabel: true
-                 },
-                 tooltip: {
-                     trigger: 'axis'
-                 },
-                 xAxis: {
-                     type: 'category',
-                     data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'],
-                     axisLine: {
-                         show: true,
-                         lineStyle: {
-                             color: 'rgba(255, 255, 255, 0.3)'
-                         }
-                     },
-                     axisLabel: {
-                         color: '#fff',
-                         fontSize: 14
-                     },
-                     axisTick: {
-                         show: false
-                     }
-                 },
-                 yAxis: {
-                     type: 'value',
-                     name: '长度(m)',
-                     nameTextStyle: {
-                         color: '#fff',
-                         padding: [0, 0, 0, 20]
-                     },
-                     axisLine: {
-                         show: false
-                     },
-                     axisLabel: {
-                         color: '#fff',
-                         fontSize: 14
-                     },
-                     splitLine: {
-                         show: true,
-                         lineStyle: {
-                             color: 'rgba(255, 255, 255, 0.1)'
-                         }
-                     }
-                 },
-                 series: [
-                     {
-                         data: data,
-                         type: 'bar',
-                         barWidth: '40%',
-                         itemStyle: {
-                             color: '#FF9900',
-                             borderColor: '#FF9900',
-                             borderWidth: 1
-                         },
-                         markPoint: {
-                             symbol: 'pin',
-                             symbolSize: 50,
-                             label: {
-                                 show: true,
-                                 color: '#fff',
-                                 fontSize: 12
-                             },
-                             itemStyle: {
-                                 color: '#FF9900'
-                             },
-                             data: [
-                                 { type: 'max', name: 'Max' },
-                                 { type: 'min', name: 'Min' }
-                             ]
-                         },
-                         markLine: {
-                             symbol: 'none',
-                             data: [
-                                 { yAxis: 2563.31, name: 'Average' }
-                             ],
-                             label: {
-                                 show: true,
-                                 position: 'end',
-                                 formatter: '{c}',
-                                 color: '#FF9900'
-                             },
-                             lineStyle: {
-                                 type: 'dotted',
-                                 color: '#FF9900'
-                             }
-                         }
-                     }
-                 ]
-             };
-             myChart.setOption(option);
-         }
- 
-          function launchIntoFullscreen(element) {
-            if(element.requestFullscreen) {
-                element.requestFullscreen();
-            } else if(element.mozRequestFullScreen) {
-                element.mozRequestFullScreen();
-            } else if(element.webkitRequestFullscreen) {
-                element.webkitRequestFullscreen();
-            } else if(element.msRequestFullscreen) {
-                element.msRequestFullscreen();
-            }
-        }
-
-        function exitFullscreen() {
-            if(document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if(document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if(document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
+      function exitFullscreen() {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
         }
+      }
     </script>
-</body>
+  </body>
 </html>
diff --git a/src/main/webapp/jsp/bigScreen3.jsp b/src/main/webapp/jsp/bigScreen3.jsp
index 22dcb9ae..fd32e68b 100644
--- a/src/main/webapp/jsp/bigScreen3.jsp
+++ b/src/main/webapp/jsp/bigScreen3.jsp
@@ -1,825 +1,970 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<!DOCTYPE html>
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+pageEncoding="UTF-8"%>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>排污户大屏展示</title>
-    <!-- <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script> -->
-    <!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
+    <!-- <script
+      type="text/javascript"
+      src="../../node_modules/jquery/dist/jquery.min.js"
+    ></script>
+    <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
     <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
     <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: #030829;
-            font-family: "Microsoft YaHei", sans-serif;
-        }
-        .screen-container {
-            width: 6500px;
-            height: 1800px;
-            background-image: url('<%=request.getContextPath()%>/IMG/screen3.png');
-            /* background-image: url('../../IMG/screen3.png'); */
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            position: relative;
-        }
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: #030829;
+        font-family: "Microsoft YaHei", sans-serif;
+      }
+      .screen-container {
+        width: 6500px;
+        height: 1800px;
+        background-image: url('<%=request.getContextPath()%>/IMG/screen3.png');
+        /* background-image: url("../../IMG/screen3.png"); */
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: relative;
+      }
 
-        /* Area 1: Left Stats + Ranking */
-        .rank-module-container {
-            position: absolute;
-            top: 275px;
-            left: 66px;
-            width: 1926px;
-            height: 1500px;
-            display: flex;
-            flex-direction: column;
-            /* padding: 20px; */
-            box-sizing: border-box;
-            z-index: 10;
-        }
+      /* Area 1: Left Stats + Ranking */
+      .rank-module-container {
+        position: absolute;
+        top: 275px;
+        left: 66px;
+        width: 1926px;
+        height: 1500px;
+        display: flex;
+        flex-direction: column;
+        /* padding: 20px; */
+        box-sizing: border-box;
+        z-index: 10;
+      }
 
-        .stats-header {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 30px;
-            background: rgba(0, 0, 0, 0.3);
-            padding: 20px;
-            border-radius: 10px;
-            border: 1px solid rgba(0, 234, 255, 0.2);
-        }
+      .stats-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        background: rgba(0, 0, 0, 0.3);
+        padding: 20px;
+        border-radius: 10px;
+        border: 1px solid rgba(0, 234, 255, 0.2);
+      }
 
-        .stat-item {
-            text-align: center;
-        }
+      .stat-item {
+        text-align: center;
+      }
 
-        .stat-label {
-            font-size: 24px;
-            color: #ccc;
-            margin-bottom: 10px;
-        }
+      .stat-label {
+        font-size: 24px;
+        color: #ccc;
+        margin-bottom: 10px;
+      }
 
-        .stat-value {
-            font-size: 48px;
-            font-weight: bold;
-            color: #00eaff;
-            font-family: 'DIN Alternate', sans-serif;
-        }
+      .stat-value {
+        font-size: 48px;
+        font-weight: bold;
+        color: #00eaff;
+        font-family: "DIN Alternate", sans-serif;
+      }
 
-        .stat-unit {
-            font-size: 20px;
-            margin-left: 5px;
-            color: #aaa;
-        }
+      .stat-unit {
+        font-size: 20px;
+        margin-left: 5px;
+        color: #aaa;
+      }
 
-        .ranking-title {
-            font-size: 28px;
-            font-weight: bold;
-            padding-left: 10px;
-            border-left: 4px solid;
-            margin-bottom: 15px;
-            letter-spacing: 1px;
-        }
+      .ranking-title {
+        font-size: 28px;
+        font-weight: bold;
+        padding-left: 10px;
+        border-left: 4px solid;
+        margin-bottom: 15px;
+        letter-spacing: 1px;
+      }
 
-        /* Area 3: Right Details */
-        .detail-module-container {
-            position: absolute;
-            top: 275px;
-            right: 66px;
-            width: 1926px;
-            height: 1500px;
-            border: 1px solid rgba(0, 234, 255, 0.3);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            /* padding: 30px; */
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            color: #fff;
-            /* background: rgba(0, 20, 50, 0.6) url('<%=request.getContextPath()%>/IMG/bim/渐变背景.png') no-repeat center center; */
-            background-size: cover;
-            z-index: 10;
-        }
+      /* Area 3: Right Details */
+      .detail-module-container {
+        position: absolute;
+        top: 275px;
+        right: 66px;
+        width: 1926px;
+        height: 1500px;
+        border: 1px solid rgba(0, 234, 255, 0.3);
+        backdrop-filter: blur(10px);
+        border-radius: 12px;
+        /* padding: 30px; */
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        color: #fff;
+        /* background: rgba(0, 20, 50, 0.6) url('<%=request.getContextPath()%>/IMG/bim/渐变背景.png') no-repeat center center; */
+        background-size: cover;
+        z-index: 10;
+      }
 
-        /* Area 2: Center Map */
-        .map-module-container {
-            position: absolute;
-            top: 180px;
-            left: 2000px; /* Positioned between Left (1900+66) and Right */
-            width: 2400px; /* Approximate remaining space: 6500 - 1900 - 1926 - margins */
-            height: 1500px;
-            /* background: rgba(0, 255, 0, 0.1); Debug */
-            position: relative;
-            z-index: 5;
-        }
+      /* Area 2: Center Map */
+      .map-module-container {
+        position: absolute;
+        top: 180px;
+        left: 2000px; /* Positioned between Left (1900+66) and Right */
+        width: 2400px; /* Approximate remaining space: 6500 - 1900 - 1926 - margins */
+        height: 1500px;
+        /* background: rgba(0, 255, 0, 0.1); Debug */
+        position: relative;
+        z-index: 5;
+      }
 
-        .map-point {
-            position: absolute;
-            width: 30px;
-            height: 30px;
-            background: rgba(0, 234, 255, 0.8);
-            border: 2px solid #fff;
-            border-radius: 50%;
-            cursor: pointer;
-            box-shadow: 0 0 15px #00eaff;
-            transition: all 0.3s ease;
-            transform: translate(-50%, -50%);
-        }
+      .map-point {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        background: rgba(0, 234, 255, 0.8);
+        border: 2px solid #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 0 15px #00eaff;
+        transition: all 0.3s ease;
+        transform: translate(-50%, -50%);
+      }
 
-        .map-point.active {
-            background: #ffaa00;
-            box-shadow: 0 0 25px #ffaa00;
-            transform: translate(-50%, -50%) scale(1.5);
-            z-index: 20;
-        }
+      .map-point.active {
+        background: #ffaa00;
+        box-shadow: 0 0 25px #ffaa00;
+        transform: translate(-50%, -50%) scale(1.5);
+        z-index: 20;
+      }
 
-        .map-point:hover {
-            transform: translate(-50%, -50%) scale(1.2);
-        }
-        
-        .map-tooltip {
-            position: absolute;
-            bottom: 40px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.8);
-            color: #fff;
-            padding: 5px 10px;
-            border-radius: 4px;
-            white-space: nowrap;
-            font-size: 20px;
-            pointer-events: none;
-            display: none;
-            border: 1px solid #00eaff;
-        }
+      .map-point:hover {
+        transform: translate(-50%, -50%) scale(1.2);
+      }
 
-        .map-point:hover .map-tooltip {
-            display: block;
-        }
+      .map-tooltip {
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.8);
+        color: #fff;
+        padding: 5px 10px;
+        border-radius: 4px;
+        white-space: nowrap;
+        font-size: 20px;
+        pointer-events: none;
+        display: none;
+        border: 1px solid #00eaff;
+      }
 
-        .enterprise-detail-header {
-            font-size: 56px;
-            font-weight: bold;
-            color: #00eaff;
-            text-align: center;
-            margin-bottom: 40px;
-            text-shadow: 0 0 20px rgba(0, 234, 255, 0.8);
-            border-bottom: 2px solid rgba(0, 234, 255, 0.2);
-            padding-bottom: 20px;
-            letter-spacing: 2px;
-        }
+      .map-point:hover .map-tooltip {
+        display: block;
+      }
 
-        .detail-content {
-            display: flex;
-            height: 450px;
-            margin-bottom: 40px;
-            gap: 30px;
-        }
+      .enterprise-detail-header {
+        font-size: 56px;
+        font-weight: bold;
+        color: #00eaff;
+        text-align: center;
+        margin-bottom: 40px;
+        text-shadow: 0 0 20px rgba(0, 234, 255, 0.8);
+        border-bottom: 2px solid rgba(0, 234, 255, 0.2);
+        padding-bottom: 20px;
+        letter-spacing: 2px;
+      }
 
-        .info-section {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            font-size: 36px;
-            line-height: 2.2;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-        }
+      .detail-content {
+        display: flex;
+        height: 450px;
+        margin-bottom: 40px;
+        gap: 30px;
+      }
 
-        .info-item {
-            border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
-        }
+      .info-section {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 36px;
+        line-height: 2.2;
+        padding: 20px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 10px;
+      }
 
-        .info-item span {
-            color: #ffaa00;
-            font-weight: bold;
-            margin-left: 15px;
-            font-family: 'DIN Alternate', sans-serif;
-        }
+      .info-item {
+        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
+      }
 
-        .photo-section {
-            flex: 1;
-            border: 2px solid rgba(0, 234, 255, 0.3);
-            border-radius: 10px;
-            overflow: hidden;
-            background: #000;
-            position: relative;
-        }
+      .info-item span {
+        color: #ffaa00;
+        font-weight: bold;
+        margin-left: 15px;
+        font-family: "DIN Alternate", sans-serif;
+      }
 
-        .photo-label {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            background: rgba(0, 0, 0, 0.6);
-            color: #fff;
-            text-align: center;
-            padding: 10px 0;
-            font-size: 24px;
-        }
+      .photo-section {
+        flex: 1;
+        border: 2px solid rgba(0, 234, 255, 0.3);
+        border-radius: 10px;
+        overflow: hidden;
+        background: #000;
+        position: relative;
+      }
 
-        .detail-charts {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 30px;
-        }
+      .photo-label {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        color: #fff;
+        text-align: center;
+        padding: 10px 0;
+        font-size: 24px;
+      }
 
-        .detail-chart-box {
-            flex: 1;
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(0, 234, 255, 0.1);
-            border-radius: 12px;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-        }
+      .detail-charts {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+      }
 
-        .chart-subtitle {
-            font-size: 32px;
-            color: #ffffff;
-            margin-bottom: 15px;
-            padding-left: 15px;
-            border-left: 6px solid #00eaff;
-            font-weight: bold;
-        }
+      .detail-chart-box {
+        flex: 1;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 234, 255, 0.1);
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+      }
 
-        .chart-content {
-            flex: 1;
-            width: 100%;
-            min-height: 0; /* Important for flex child scroll/resize */
-        }
-        
-        .new-bar-chart-container {
-            position: absolute;
-            top: 400px;
-            left: 66px;
-            width: 1920px;
-            height: 1400px;
-            z-index: 100;
-            display: none;
-        }
+      .chart-subtitle {
+        font-size: 32px;
+        color: #ffffff;
+        margin-bottom: 15px;
+        padding-left: 15px;
+        border-left: 6px solid #00eaff;
+        font-weight: bold;
+      }
+
+      .chart-content {
+        flex: 1;
+        width: 100%;
+        min-height: 0; /* Important for flex child scroll/resize */
+      }
+
+      .new-bar-chart-container {
+        position: absolute;
+        top: 400px;
+        left: 66px;
+        width: 1920px;
+        height: 1400px;
+        z-index: 100;
+        display: none;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="screen-container">
-        <div class="rank-module-container">
-            <!-- Statistics -->
-            <div class="stats-header">
-                <div class="stat-item">
-                    <div class="stat-label">辖区排污企业总数</div>
-                    <div class="stat-value" id="totalCount">0<span class="stat-unit">家</span></div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">已接入监控</div>
-                    <div class="stat-value" style="color: #00ff00;" id="connectedCount">0<span class="stat-unit">家</span></div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">正在接入中</div>
-                    <div class="stat-value" style="color: #ffaa00;" id="connectingCount">0<span class="stat-unit">家</span></div>
-                </div>
+      <div class="rank-module-container">
+        <!-- Statistics -->
+        <div class="stats-header">
+          <div class="stat-item">
+            <div class="stat-label">辖区排污企业总数</div>
+            <div class="stat-value" id="totalCount">
+              0<span class="stat-unit">家</span>
             </div>
-
-            <!-- Ranking List -->
-            <div class="ranking-list-wrapper" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
-                <div id="chartRanking" style="flex: 1; width: 100%;"></div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">已接入监控</div>
+            <div class="stat-value" style="color: #00ff00" id="connectedCount">
+              0<span class="stat-unit">家</span>
             </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">正在接入中</div>
+            <div class="stat-value" style="color: #ffaa00" id="connectingCount">
+              0<span class="stat-unit">家</span>
+            </div>
+          </div>
         </div>
 
-        <!-- Left Side Detail Module -->
-        <div class="detail-module-container">
-            <div class="enterprise-detail-header" id="detailTitle">企业名称加载中...</div>
-            <div class="detail-content">
-                <div class="info-section">
-                    <div class="info-item">污水特性: <span id="sewageType">--</span></div>
-                    <div class="info-item">当前排污量: <span id="dischargeVolume">--</span></div>
-                    <div class="info-item">接入状态: <span id="connectionStatus">--</span></div>
-                </div>
-                <div class="photo-section">
-                    <img id="sitePhoto" src="<%=request.getContextPath()%>/IMG/login/company.png" alt="现场照片" style="width:100%; height:100%; object-fit: cover;">
-                    <div class="photo-label">现场监控画面</div>
-                </div>
-            </div>
-            <div class="detail-charts">
-                <div class="detail-chart-box">
-                    <div class="chart-subtitle">瞬时排污量历史曲线 (近3天)</div>
-                    <div id="chartInstant" class="chart-content"></div>
-                </div>
-                <div class="detail-chart-box">
-                    <div class="chart-subtitle">累计流量历史曲线 (日差值 - 近14天)</div>
-                    <div id="chartCumulative" class="chart-content"></div>
-                </div>
-            </div>
+        <!-- Ranking List -->
+        <div
+          class="ranking-list-wrapper"
+          style="
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+          "
+        >
+          <div id="chartRanking" style="flex: 1; width: 100%"></div>
         </div>
-        
-        <!-- New Bar Chart Area -->
-        <div class="new-bar-chart-container">
-            <div id="newBarChart" style="width: 100%; height: 100%;"></div>
+      </div>
+
+      <!-- Left Side Detail Module -->
+      <div class="detail-module-container">
+        <div class="enterprise-detail-header" id="detailTitle">
+          企业名称加载中...
         </div>
+        <div class="detail-content">
+          <div class="info-section">
+            <div class="info-item">
+              污水特性: <span id="sewageType">--</span>
+            </div>
+            <div class="info-item">
+              当前排污量: <span id="dischargeVolume">--</span>
+            </div>
+            <div class="info-item">
+              接入状态: <span id="connectionStatus">--</span>
+            </div>
+          </div>
+          <div class="photo-section">
+            <img
+              id="sitePhoto"
+              src="<%=request.getContextPath()%>/IMG/login/company.png"
+              alt="现场照片"
+              style="width: 100%; height: 100%; object-fit: cover"
+            />
+            <div class="photo-label">现场监控画面</div>
+          </div>
+        </div>
+        <div class="detail-charts">
+          <div class="detail-chart-box">
+            <div class="chart-subtitle">瞬时排污量历史曲线 (近3天)</div>
+            <div id="chartInstant" class="chart-content"></div>
+          </div>
+          <div class="detail-chart-box">
+            <div class="chart-subtitle">累计流量历史曲线 (日差值 - 近14天)</div>
+            <div id="chartCumulative" class="chart-content"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- New Bar Chart Area -->
+      <div class="new-bar-chart-container">
+        <div id="newBarChart" style="width: 100%; height: 100%"></div>
+      </div>
     </div>
 
     <script>
-        var myChartInstant = null;
-        var myChartCumulative = null;
-        var myChartRanking = null;
-        var myNewBarChart = null;
-        
-        var currentMaxData = []; // Top 10 Max
-        var currentMinData = []; // Top 10 Min
-        var allEnterprises = []; // All data for map
-        var currentFocusIndex = 0;
-        var rotationTimer = null;
+      var myChartInstant = null;
+      var myChartCumulative = null;
+      var myChartRanking = null;
+      var myNewBarChart = null;
 
-        $(document).ready(function() {
-            launchIntoFullscreen(document.documentElement);
-            initData();
-            
-            // Double click to toggle fullscreen
-            $('body').on('dblclick', function() {
-                launchIntoFullscreen(document.documentElement);
-            });
+      var currentMaxData = []; // Top 10 Max
+      var currentMinData = []; // Top 10 Min
+      var allEnterprises = []; // All data for map
+      var currentFocusIndex = 0;
+      var rotationTimer = null;
+
+      $(document).ready(function () {
+        launchIntoFullscreen(document.documentElement);
+        initData();
+
+        // Double click to toggle fullscreen
+        $("body").on("dblclick", function () {
+          launchIntoFullscreen(document.documentElement);
+        });
+      });
+
+      function launchIntoFullscreen(element) {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
+        }
+      }
+
+      function exitFullscreen() {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+      }
+
+      function initData() {
+        // Stats
+        var total = 158;
+        var connected = 124;
+        var connecting = 34;
+        $("#totalCount").html(total + '<span class="stat-unit">家</span>');
+        $("#connectedCount").html(
+          connected + '<span class="stat-unit">家</span>',
+        );
+        $("#connectingCount").html(
+          connecting + '<span class="stat-unit">家</span>',
+        );
+
+        // Generate Enterprises with Details
+        var enterprises = [];
+        var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"];
+        var connectionStatuses = ["已接入", "接入中"];
+
+        for (var i = 1; i <= 50; i++) {
+          var val = Math.floor(Math.random() * 10000) + 500;
+          enterprises.push({
+            id: i,
+            name: "企业-" + i,
+            value: val,
+            // Details
+            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
+          });
+        }
+        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();
+      }
+
+      function generateHistoryData(count) {
+        var data = [];
+        for (var k = 0; k < count; k++) {
+          data.push(Math.floor(Math.random() * 500) + 50);
+        }
+        return data;
+      }
+
+      function updateSortedData(enterprises) {
+        // Sort Descending for Max
+        currentMaxData = [...enterprises]
+          .sort((a, b) => b.value - a.value)
+          .slice(0, 10);
+
+        // Sort Ascending for Min
+        currentMinData = [...enterprises]
+          .sort((a, b) => a.value - b.value)
+          .slice(0, 10);
+      }
+
+      function renderRankingChart() {
+        var maxNames = [];
+        var maxValues = [];
+        var minNames = [];
+        var minValues = [];
+
+        // Process Max Data (Top 10 High)
+        currentMaxData.forEach((item, index) => {
+          maxNames.push(item.name);
+
+          maxValues.push({
+            value: item.value,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "#ff5500",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffb700",
+                  },
+                ]),
+              },
+            },
+          });
         });
 
-        function launchIntoFullscreen(element) {
-            if(element.requestFullscreen) {
-                element.requestFullscreen();
-            } else if(element.mozRequestFullScreen) {
-                element.mozRequestFullScreen();
-            } else if(element.webkitRequestFullscreen) {
-                element.webkitRequestFullscreen();
-            } else if(element.msRequestFullscreen) {
-                element.msRequestFullscreen();
-            }
-        }
+        // Process Min Data (Top 10 Low)
+        currentMinData.forEach((item) => {
+          minNames.push(item.name);
+          minValues.push({
+            value: item.value,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "#00aa00",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00ff00",
+                  },
+                ]),
+              },
+            },
+          });
+        });
 
-        function exitFullscreen() {
-            if(document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if(document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if(document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
-        }
-
-        function initData() {
-            // Stats
-            var total = 158;
-            var connected = 124;
-            var connecting = 34;
-            $('#totalCount').html(total + '<span class="stat-unit">家</span>');
-            $('#connectedCount').html(connected + '<span class="stat-unit">家</span>');
-            $('#connectingCount').html(connecting + '<span class="stat-unit">家</span>');
-
-            // Generate Enterprises with Details
-            var enterprises = [];
-            var sewageTypes = ['化学需氧量', '氨氮', '总磷', '重金属', '酸碱废水'];
-            var connectionStatuses = ['已接入', '接入中'];
-            
-            for (var i = 1; i <= 50; i++) {
-                var val = Math.floor(Math.random() * 10000) + 500;
-                enterprises.push({
-                    id: i,
-                    name: '企业-' + i,
-                    value: val,
-                    // Details
-                    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
-                });
-            }
-            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();
-        }
-
-        function generateHistoryData(count) {
-            var data = [];
-            for(var k=0; k<count; k++) {
-                data.push(Math.floor(Math.random() * 500) + 50);
-            }
-            return data;
-        }
-
-        function updateSortedData(enterprises) {
-            // Sort Descending for Max
-            currentMaxData = [...enterprises].sort((a, b) => b.value - a.value).slice(0, 10);
-            
-            // Sort Ascending for Min
-            currentMinData = [...enterprises].sort((a, b) => a.value - b.value).slice(0, 10);
-        }
-
-        function renderRankingChart() {
-            var maxNames = [];
-            var maxValues = [];
-            var minNames = [];
-            var minValues = [];
-            
-            // Process Max Data (Top 10 High)
-            currentMaxData.forEach((item, index) => {
-                maxNames.push(item.name);
-                
-                maxValues.push({
-                    value: item.value,
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                offset: 0, color: '#ff5500' 
-                            }, {
-                                offset: 1, color: '#ffb700' 
-                            }])
-                        }
-                    }
-                });
-            });
-
-            // Process Min Data (Top 10 Low)
-            currentMinData.forEach((item) => {
-                minNames.push(item.name);
-                minValues.push({
-                    value: item.value,
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                offset: 0, color: '#00aa00'
-                            }, {
-                                offset: 1, color: '#00ff00'
-                            }])
-                        }
-                    }
-                });
-            });
-
-            var option = {
-                title: [{
-                    text: '近30日排污量 TOP 10 (最大)',
-                    left: '25%',
-                    top: '2%',
-                    textAlign: 'center',
-                    textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
-                }, {
-                    text: '近30日排污量 TOP 10 (最小)',
-                    left: '75%',
-                    top: '2%',
-                    textAlign: 'center',
-                    textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
-                }],
-                grid: [{
-                    top: '12%',
-                    left: '2%',
-                    right: '52%',
-                    bottom: '5%',
-                    containLabel: true
-                }, {
-                    top: '12%',
-                    left: '52%',
-                    right: '2%',
-                    bottom: '5%',
-                    containLabel: true
-                }],
-                xAxis: [{
-                    type: 'value',
-                    show: false,
-                    gridIndex: 0
-                }, {
-                    type: 'value',
-                    show: false,
-                    gridIndex: 1
-                }],
-                yAxis: [{
-                    type: 'category',
-                    data: maxNames,
-                    inverse: true,
-                    axisLabel: { color: '#fff', fontSize: 20 },
-                    axisLine: { show: false },
-                    axisTick: { show: false },
-                    gridIndex: 0
-                }, {
-                    type: 'category',
-                    data: minNames,
-                    inverse: true,
-                    axisLabel: { color: '#fff', fontSize: 20 },
-                    axisLine: { show: false },
-                    axisTick: { show: false },
-                    gridIndex: 1
-                }],
-                series: [{
-                    name: 'Max',
-                    type: 'bar',
-                    xAxisIndex: 0,
-                    yAxisIndex: 0,
-                    data: maxValues,
-                    barWidth: 45,
-                    showBackground: true,
-                    backgroundStyle: {
-                        color: 'rgba(255, 255, 255, 0.1)',
-                        barBorderRadius: [0, 22, 22, 0]
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            position: 'right',
-                            textStyle: { color: '#ffffff', fontSize: 20 },
-                            formatter: '{c}'
-                        }
-                    },
-                    itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
-                }, {
-                    name: 'Min',
-                    type: 'bar',
-                    xAxisIndex: 1,
-                    yAxisIndex: 1,
-                    data: minValues,
-                    barWidth: 45,
-                    showBackground: true,
-                    backgroundStyle: {
-                        color: 'rgba(255, 255, 255, 0.1)',
-                        barBorderRadius: [0, 22, 22, 0]
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            position: 'right',
-                            textStyle: { color: '#ffffff', fontSize: 20 },
-                            formatter: '{c}'
-                        }
-                    },
-                    itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
-                }]
-            };
-            
-            myChartRanking.setOption(option);
-        }
-
-        function renderMapPoints() {
-            var html = '';
-            allEnterprises.forEach((item) => {
-                html += '<div class="map-point ' + (item.value > 8000 ? 'super' : '') + '" id="point-' + item.id + '" style="left:' + item.x + '%; top:' + item.y + '%;" onclick="handleMapClick(' + item.id + ')">';
-                html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click
-                html += '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' + item.id + ')">' + item.name + '</div>';
-                html += '<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' + item.id + ')">' + item.value + ' m³/h</span></div>';
-                html += '<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' + item.id + ')">' + (item.value * 24) + ' m³</span></div>';
-                html += '</div>';
-                html += '</div>';
-            });
-            $('#mapContainer').html(html);
-        }
-
-        function closeModal() {
-            $('#historyModal').fadeOut();
-        }
-
-        var modalChartInstance = null;
-
-        function showHistoryModal(type, id) {
-            var ent = allEnterprises.find(e => e.id === id);
-            if(!ent) return;
-            
-            $('#historyModal').css('display', 'flex').hide().fadeIn();
-            
-            if(modalChartInstance) {
-                modalChartInstance.dispose();
-            }
-            modalChartInstance = echarts.init(document.getElementById('modalChart'));
-            
-            var title = (type === 'instant' ? '瞬时排污量' : '累计流量') + '历史曲线 - ' + ent.name;
-            $('#modalTitle').text(title);
-            
-            var xData, yData, color;
-            if(type === 'instant') {
-                xData = [];
-                for(var i=0; i<72; i++) xData.push(i + 'h');
-                yData = ent.instantHistory;
-                color = '#ffaa00';
-            } else {
-                xData = [];
-                for(var j=0; j<14; j++) xData.push('D' + (j+1));
-                yData = ent.cumulativeHistory;
-                color = '#00eaff';
-            }
-            
-            var option = {
-                tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.8)', textStyle: {color: '#fff'} },
-                grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
-                xAxis: { 
-                    type: 'category', 
-                    boundaryGap: false,
-                    data: xData,
-                    axisLabel: { color: '#fff', fontSize: 16 },
-                    axisLine: { lineStyle: { color: '#00eaff' } }
+        var option = {
+          title: [
+            {
+              text: "近30日排污量 TOP 10 (最大)",
+              left: "25%",
+              top: "2%",
+              textAlign: "center",
+              textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
+            },
+            {
+              text: "近30日排污量 TOP 10 (最小)",
+              left: "75%",
+              top: "2%",
+              textAlign: "center",
+              textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
+            },
+          ],
+          grid: [
+            {
+              top: "12%",
+              left: "2%",
+              right: "52%",
+              bottom: "5%",
+              containLabel: true,
+            },
+            {
+              top: "12%",
+              left: "52%",
+              right: "2%",
+              bottom: "5%",
+              containLabel: true,
+            },
+          ],
+          xAxis: [
+            {
+              type: "value",
+              show: false,
+              gridIndex: 0,
+            },
+            {
+              type: "value",
+              show: false,
+              gridIndex: 1,
+            },
+          ],
+          yAxis: [
+            {
+              type: "category",
+              data: maxNames,
+              inverse: true,
+              axisLabel: { color: "#fff", fontSize: 20 },
+              axisLine: { show: false },
+              axisTick: { show: false },
+              gridIndex: 0,
+            },
+            {
+              type: "category",
+              data: minNames,
+              inverse: true,
+              axisLabel: { color: "#fff", fontSize: 20 },
+              axisLine: { show: false },
+              axisTick: { show: false },
+              gridIndex: 1,
+            },
+          ],
+          series: [
+            {
+              name: "Max",
+              type: "bar",
+              xAxisIndex: 0,
+              yAxisIndex: 0,
+              data: maxValues,
+              barWidth: 45,
+              showBackground: true,
+              backgroundStyle: {
+                color: "rgba(255, 255, 255, 0.1)",
+                barBorderRadius: [0, 22, 22, 0],
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: "right",
+                  textStyle: { color: "#ffffff", fontSize: 20 },
+                  formatter: "{c}",
                 },
-                yAxis: { 
-                    type: 'value', 
-                    axisLabel: { color: '#fff', fontSize: 16 },
-                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
+              },
+              itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
+            },
+            {
+              name: "Min",
+              type: "bar",
+              xAxisIndex: 1,
+              yAxisIndex: 1,
+              data: minValues,
+              barWidth: 45,
+              showBackground: true,
+              backgroundStyle: {
+                color: "rgba(255, 255, 255, 0.1)",
+                barBorderRadius: [0, 22, 22, 0],
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: "right",
+                  textStyle: { color: "#ffffff", fontSize: 20 },
+                  formatter: "{c}",
                 },
-                series: [{
-                    name: type === 'instant' ? '瞬时流量' : '累计流量',
-                    type: 'line',
-                    smooth: true,
-                    data: yData,
-                    lineStyle: { width: 3, color: color },
-                    areaStyle: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0, color: color
-                        }, {
-                            offset: 1, color: 'rgba(0,0,0,0)'
-                        }])
-                    },
-                    itemStyle: { color: color }
-                }]
-            };
-            
-            modalChartInstance.setOption(option);
+              },
+              itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
+            },
+          ],
+        };
+
+        myChartRanking.setOption(option);
+      }
+
+      function renderMapPoints() {
+        var html = "";
+        allEnterprises.forEach((item) => {
+          html +=
+            '<div class="map-point ' +
+            (item.value > 8000 ? "super" : "") +
+            '" id="point-' +
+            item.id +
+            '" style="left:' +
+            item.x +
+            "%; top:" +
+            item.y +
+            '%;" onclick="handleMapClick(' +
+            item.id +
+            ')">';
+          html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click
+          html +=
+            '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' +
+            item.id +
+            ')">' +
+            item.name +
+            "</div>";
+          html +=
+            '<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' +
+            item.id +
+            ')">' +
+            item.value +
+            " m³/h</span></div>";
+          html +=
+            '<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' +
+            item.id +
+            ')">' +
+            item.value * 24 +
+            " m³</span></div>";
+          html += "</div>";
+          html += "</div>";
+        });
+        $("#mapContainer").html(html);
+      }
+
+      function closeModal() {
+        $("#historyModal").fadeOut();
+      }
+
+      var modalChartInstance = null;
+
+      function showHistoryModal(type, id) {
+        var ent = allEnterprises.find((e) => e.id === id);
+        if (!ent) return;
+
+        $("#historyModal").css("display", "flex").hide().fadeIn();
+
+        if (modalChartInstance) {
+          modalChartInstance.dispose();
+        }
+        modalChartInstance = echarts.init(
+          document.getElementById("modalChart"),
+        );
+
+        var title =
+          (type === "instant" ? "瞬时排污量" : "累计流量") +
+          "历史曲线 - " +
+          ent.name;
+        $("#modalTitle").text(title);
+
+        var xData, yData, color;
+        if (type === "instant") {
+          xData = [];
+          for (var i = 0; i < 72; i++) xData.push(i + "h");
+          yData = ent.instantHistory;
+          color = "#ffaa00";
+        } else {
+          xData = [];
+          for (var j = 0; j < 14; j++) xData.push("D" + (j + 1));
+          yData = ent.cumulativeHistory;
+          color = "#00eaff";
         }
 
-        function handleMapClick(id) {
-            // Find if this enterprise is in currentMaxData
-            var index = currentMaxData.findIndex(e => e.id === id);
-            if (index !== -1) {
-                currentFocusIndex = index;
-                updateDetailView();
-                // Reset rotation timer to pause briefly or restart? 
-                // For simplicity, just let it continue or reset interval
-                clearInterval(rotationTimer);
-                startRotation();
+        var option = {
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(0,0,0,0.8)",
+            textStyle: { color: "#fff" },
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            top: "10%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisLabel: { color: "#fff", fontSize: 16 },
+            axisLine: { lineStyle: { color: "#00eaff" } },
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: { color: "#fff", fontSize: 16 },
+            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
+          },
+          series: [
+            {
+              name: type === "instant" ? "瞬时流量" : "累计流量",
+              type: "line",
+              smooth: true,
+              data: yData,
+              lineStyle: { width: 3, color: color },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: color,
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0,0,0,0)",
+                  },
+                ]),
+              },
+              itemStyle: { color: color },
+            },
+          ],
+        };
+
+        modalChartInstance.setOption(option);
+      }
+
+      function handleMapClick(id) {
+        // Find if this enterprise is in currentMaxData
+        var index = currentMaxData.findIndex((e) => e.id === id);
+        if (index !== -1) {
+          currentFocusIndex = index;
+          updateDetailView();
+          // Reset rotation timer to pause briefly or restart?
+          // For simplicity, just let it continue or reset interval
+          clearInterval(rotationTimer);
+          startRotation();
+        } else {
+          // If clicked item is not in Top 10, we can still show it in Detail View
+          // But rotation logic might overwrite it next tick.
+          // Let's just show it temporarily.
+          var enterprise = allEnterprises.find((e) => e.id === id);
+          if (enterprise) {
+            renderDetailContent(enterprise);
+            highlightMapPoint(enterprise.id);
+            // Clear ranking highlight since it's not in the list (visually)
+            $(".ranking-row").removeClass("active");
+          }
+        }
+      }
+
+      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 {
-                // If clicked item is not in Top 10, we can still show it in Detail View
-                // But rotation logic might overwrite it next tick.
-                // Let's just show it temporarily.
-                var enterprise = allEnterprises.find(e => e.id === id);
-                if(enterprise) {
-                    renderDetailContent(enterprise);
-                    highlightMapPoint(enterprise.id);
-                    // Clear ranking highlight since it's not in the list (visually)
-                    $('.ranking-row').removeClass('active');
-                }
+              el.removeClass("super");
             }
-        }
+            el.find(".map-tooltip").html(
+              item.name + "<br>排污量: " + item.value,
+            );
+          });
 
-        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');
-                    }
-                    el.find('.map-tooltip').html(item.name + '<br>排污量: ' + item.value);
-                });
-                
-                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:
-                /*
+          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 + '<br>排污量: ' + item.value);
                 });
                 */
-            }, 10000);
-        }
+        }, 10000);
+      }
 
-        function startRotation() {
-            rotationTimer = setInterval(function() {
-                currentFocusIndex = (currentFocusIndex + 1) % 10;
-                updateDetailView();
-            }, 10000); // Rotate every 5 seconds
-        }
+      function startRotation() {
+        rotationTimer = setInterval(function () {
+          currentFocusIndex = (currentFocusIndex + 1) % 10;
+          updateDetailView();
+        }, 10000); // Rotate every 5 seconds
+      }
 
-        function updateDetailView() {
-            if(!currentMaxData || currentMaxData.length === 0) return;
-            if(currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0;
-            
-            var enterprise = currentMaxData[currentFocusIndex];
-            
-            renderDetailContent(enterprise);
+      function updateDetailView() {
+        if (!currentMaxData || currentMaxData.length === 0) return;
+        if (currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0;
 
-            // Highlight Ranking Chart
-            renderRankingChart();
+        var enterprise = currentMaxData[currentFocusIndex];
 
-            // Highlight Map Point
-            highlightMapPoint(enterprise.id);
-        }
+        renderDetailContent(enterprise);
 
-        function highlightMapPoint(id) {
-            $('.map-point').removeClass('active');
-            $('#point-' + id).addClass('active');
-        }
-        
-        function renderDetailContent(enterprise) {
-            // Update DOM
-            $('#detailTitle').text(enterprise.name);
-            $('#sewageType').text(enterprise.sewageType);
-            $('#dischargeVolume').text(enterprise.value + ' m³');
-            $('#connectionStatus').text(enterprise.connectionStatus);
-            
-            renderDetailCharts(enterprise);
-        }
-        
-        function renderDetailCharts(enterprise) {
-             // Generate X labels
-             var hours = [];
-             for(var i=0; i<72; i++) hours.push(i+'h');
-             
-             var days = [];
-             for(var j=0; j<14; j++) days.push('D'+(j+1));
+        // Highlight Ranking Chart
+        renderRankingChart();
 
-             // Instant Chart (Line)
-             var optionInstant = {
-                tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
-                xAxis: { 
-                    type: 'category', 
-                    boundaryGap: false,
-                    data: hours,
-                    axisLabel: { color: '#ccc' },
-                    axisLine: { lineStyle: { color: '#00eaff' } }
+        // Highlight Map Point
+        highlightMapPoint(enterprise.id);
+      }
+
+      function highlightMapPoint(id) {
+        $(".map-point").removeClass("active");
+        $("#point-" + id).addClass("active");
+      }
+
+      function renderDetailContent(enterprise) {
+        // Update DOM
+        $("#detailTitle").text(enterprise.name);
+        $("#sewageType").text(enterprise.sewageType);
+        $("#dischargeVolume").text(enterprise.value + " m³");
+        $("#connectionStatus").text(enterprise.connectionStatus);
+
+        renderDetailCharts(enterprise);
+      }
+
+      function renderDetailCharts(enterprise) {
+        // Generate X labels
+        var hours = [];
+        for (var i = 0; i < 72; i++) hours.push(i + "h");
+
+        var days = [];
+        for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
+
+        // Instant Chart (Line)
+        var optionInstant = {
+          tooltip: { trigger: "axis" },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: hours,
+            axisLabel: { color: "#ccc" },
+            axisLine: { lineStyle: { color: "#00eaff" } },
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: { color: "#ccc" },
+            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
+          },
+          series: [
+            {
+              name: "瞬时量",
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "average",
+              itemStyle: { color: "#00eaff" },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "rgba(0, 234, 255, 0.5)" },
+                    { offset: 1, color: "rgba(0, 234, 255, 0)" },
+                  ]),
                 },
-                yAxis: { 
-                    type: 'value', 
-                    axisLabel: { color: '#ccc' },
-                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
-                },
-                series: [{
-                    name: '瞬时量',
-                    type: 'line',
-                    smooth: true,
-                    symbol: 'none',
-                    sampling: 'average',
-                    itemStyle: { color: '#00eaff' },
-                    areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 234, 255, 0.5)' }, { offset: 1, color: 'rgba(0, 234, 255, 0)' }]) } },
-                    data: enterprise.instantHistory
-                }]
-             };
-             
-             // Cumulative Chart (Bar)
-             var optionCumulative = {
-                tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
-                xAxis: { 
-                    type: 'category', 
-                    data: days,
-                    axisLabel: { color: '#ccc' },
-                    axisLine: { lineStyle: { color: '#ffaa00' } }
-                },
-                yAxis: { 
-                    type: 'value', 
-                    axisLabel: { color: '#ccc' },
-                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
-                },
-                series: [{
-                    name: '累计流量',
-                    type: 'bar',
-                    itemStyle: { normal: { color: '#ffaa00', barBorderRadius: [5, 5, 0, 0] } },
-                    data: enterprise.cumulativeHistory
-                }]
-             };
-             
-             myChartInstant.setOption(optionInstant);
-             myChartCumulative.setOption(optionCumulative);
-        }
+              },
+              data: enterprise.instantHistory,
+            },
+          ],
+        };
 
+        // Cumulative Chart (Bar)
+        var optionCumulative = {
+          tooltip: { trigger: "axis" },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: days,
+            axisLabel: { color: "#ccc" },
+            axisLine: { lineStyle: { color: "#ffaa00" } },
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: { color: "#ccc" },
+            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
+          },
+          series: [
+            {
+              name: "累计流量",
+              type: "bar",
+              itemStyle: {
+                normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
+              },
+              data: enterprise.cumulativeHistory,
+            },
+          ],
+        };
+
+        myChartInstant.setOption(optionInstant);
+        myChartCumulative.setOption(optionCumulative);
+      }
     </script>
-</body>
-
+  </body>
+</html>
diff --git a/src/main/webapp/jsp/main_JS_Company.jsp b/src/main/webapp/jsp/main_JS_Company.jsp
index 8c9e4e92..099eaeb3 100644
--- a/src/main/webapp/jsp/main_JS_Company.jsp
+++ b/src/main/webapp/jsp/main_JS_Company.jsp
@@ -179,7 +179,7 @@
         <div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
             <div style="height:100%;width:100%;background-color:#ffffff;">
                 <div class="section-header">
-                    上海金山卫污水公司
+                    上海金山卫污水公司11
                 </div>
                 <div style="width:20%;height:95%;float:left;">
                     <div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
diff --git a/src/main/webapp/jsp/z_bigScreen/bigScreen1.html b/src/main/webapp/jsp/z_bigScreen/bigScreen1.html
index a470a568..6147efe1 100644
--- a/src/main/webapp/jsp/z_bigScreen/bigScreen1.html
+++ b/src/main/webapp/jsp/z_bigScreen/bigScreen1.html
@@ -1,581 +1,617 @@
 <!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> -->
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>水厂大屏展示</title>
-    <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
+    <script
+      type="text/javascript"
+      src="../../node_modules/jquery/dist/jquery.min.js"
+    ></script>
     <script type="text/javascript" src="../../JS/echarts3.0.js"></script>
     <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto; /* Allow scrolling if window is smaller */
-            background-color: #030829;
-        }
-        .screen-container {
-            width: 6500px;
-            height: 1800px;
-            /* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */
-            background-image: url('../../IMG/screen1.png');
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            position: relative;
-        }
-        /* Specific Position for Data 6040 */
-        .slqs {
-            position: absolute;
-           width: 121px; 
-           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;
-        }
-        .slqs-jinri { 
-           top: 335px; 
-           left: 209px; 
-         }
-         .slqs-zuori {
-            top: 335px;
-            left: 592px;
-        }
-        .slqs-benyue {
-            top: 335px;
-            left: 975px;
-        }
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto; /* Allow scrolling if window is smaller */
+        background-color: #030829;
+      }
+      .screen-container {
+        width: 6500px;
+        height: 1800px;
+        /* background-image: url('<%=request.getContextPath()%>/IMG/screen1-1.png'); */
+        background-image: url("../../IMG/screen1.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: relative;
+      }
+      /* Specific Position for Data 6040 */
+      .slqs {
+        position: absolute;
+        width: 121px;
+        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;
+      }
+      .slqs-jinri {
+        top: 335px;
+        left: 209px;
+      }
+      .slqs-zuori {
+        top: 335px;
+        left: 592px;
+      }
+      .slqs-benyue {
+        top: 335px;
+        left: 975px;
+      }
 
-        .ncl-val {
-            position: absolute;
-            width: 76px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-            text-align: right;
-            color: rgba(255, 255, 255, 1);
-            font-family: Gilroy;
-            font-weight: 500;
-            font-size: 36px;
-            line-height: 36px;
-        }
-        .ncl-val1 {
-            top: 1168px;
-            left: 318px;
-        }
-        .ncl-val2 {
-            top: 1168px;
-            left: 653px;
-        }
-        .ncl-val3 {
-            top: 1168px;
-            left: 1023px;
-        }
-        .ncl2 {
-            position: absolute;
-            top: 1310px;
-            left: 66px;
-            width: 1077px;
-            height: 440px;
-        }
-        #ncl-chart {
-            width: 100%;
-            height: 100%;
-        }
-        .seven-days-sl {
-            position: absolute;
-            top: 591px;
-            left: 66px;
-            width: 1077px;
-            height: 400px;
-        }
-        #seven-days-chart {
-            width: 100%;
-            height: 100%;
-        }
-        .quality-table {
-            position: absolute;
-            top: 630px;
-            left: 1183px;
-            width: 975px;
-        }
-        .quality-table table {
-            width: 100%;
-            border-collapse: collapse;
-            color: #7ef3ff;
-            font-size: 27px;
-            text-align: center;
-            background: transparent;
-        }
-        .quality-table th,
-        .quality-table td {
-            border: 1px solid rgba(0, 163, 255, 0.4);
-            padding: 16px 23px;
-        }
-        .quality-table th {
-            color: #ffffff;
-            font-size: 27px;
-            font-weight: 600;
-        }
-        .quality-table td:first-child {
-            color: #ffffff;
-            text-align: left;
-            padding-left: 12px;
-        }
-        .quality-table td:last-child {
-            color: rgba(255, 255, 255, 0.6);
-        }
-        .quality-chart {
-            position: absolute;
-            top: 1380px;
-            left: 1183px;
-            width: 975px;
-            height: 370px;
-        }
-        #quality-chart {
-            width: 100%;
-            height: 100%;
-        }
+      .ncl-val {
+        position: absolute;
+        width: 76px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        text-align: right;
+        color: rgba(255, 255, 255, 1);
+        font-family: Gilroy;
+        font-weight: 500;
+        font-size: 36px;
+        line-height: 36px;
+      }
+      .ncl-val1 {
+        top: 1168px;
+        left: 318px;
+      }
+      .ncl-val2 {
+        top: 1168px;
+        left: 653px;
+      }
+      .ncl-val3 {
+        top: 1168px;
+        left: 1023px;
+      }
+      .ncl2 {
+        position: absolute;
+        top: 1310px;
+        left: 66px;
+        width: 1077px;
+        height: 440px;
+      }
+      #ncl-chart {
+        width: 100%;
+        height: 100%;
+      }
+      .seven-days-sl {
+        position: absolute;
+        top: 591px;
+        left: 66px;
+        width: 1077px;
+        height: 400px;
+      }
+      #seven-days-chart {
+        width: 100%;
+        height: 100%;
+      }
+      .quality-table {
+        position: absolute;
+        top: 630px;
+        left: 1183px;
+        width: 975px;
+      }
+      .quality-table table {
+        width: 100%;
+        border-collapse: collapse;
+        color: #7ef3ff;
+        font-size: 27px;
+        text-align: center;
+        background: transparent;
+      }
+      .quality-table th,
+      .quality-table td {
+        border: 1px solid rgba(0, 163, 255, 0.4);
+        padding: 16px 23px;
+      }
+      .quality-table th {
+        color: #ffffff;
+        font-size: 27px;
+        font-weight: 600;
+      }
+      .quality-table td:first-child {
+        color: #ffffff;
+        text-align: left;
+        padding-left: 12px;
+      }
+      .quality-table td:last-child {
+        color: rgba(255, 255, 255, 0.6);
+      }
+      .quality-chart {
+        position: absolute;
+        top: 1380px;
+        left: 1183px;
+        width: 975px;
+        height: 370px;
+      }
+      #quality-chart {
+        width: 100%;
+        height: 100%;
+      }
 
-        /* 药耗 */
-        .yaohao{
-            position: absolute;
-            top: 343px;
-            width: 94px;
-            height: 56px;
-            display: flex;
-            align-items: center;
-            text-align: right;
-            color: rgba(255, 255, 255, 1);
-            font-family: Gilroy;
-            font-weight: 700;
-            font-size: 40px;
-            line-height: 56px;
-        }
-        .yaohao1 {
-            left: 1317px;
-        }
-        .yaohao2 {
-            left: 1652px;
-        }
-        .yaohao3 {
-            left: 2056px;
-        }
-
-        .Middle3 {
-            width: 2100px;
-            position: absolute;
-            top: 300px;
-            left: 2700px;
-        }
+      /* 药耗 */
+      .yaohao {
+        position: absolute;
+        top: 343px;
+        width: 94px;
+        height: 56px;
+        display: flex;
+        align-items: center;
+        text-align: right;
+        color: rgba(255, 255, 255, 1);
+        font-family: Gilroy;
+        font-weight: 700;
+        font-size: 40px;
+        line-height: 56px;
+      }
+      .yaohao1 {
+        left: 1317px;
+      }
+      .yaohao2 {
+        left: 1652px;
+      }
+      .yaohao3 {
+        left: 2056px;
+      }
 
+      .Middle3 {
+        width: 2100px;
+        position: absolute;
+        top: 300px;
+        left: 2700px;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="screen-container">
-        <div class="left">
-            <div>
-                <div class="slqs slqs-jinri">6040</div>
-                <div class="slqs slqs-zuori">4197</div>
-                <div class="slqs slqs-benyue">12356</div>
-            </div>
-
-            <!-- 七日水量 -->
-            <div class="seven-days-sl">
-                <div id="seven-days-chart"></div>
-            </div>
-
-            <!-- 泥处理指标 -->
-             <div class="ncl">
-                <div class="ncl1">
-                    <div class="ncl-val ncl-val1">0</div>
-                    <div class="ncl-val ncl-val2">200</div>
-                    <div class="ncl-val ncl-val3">4.89</div>
-                </div>
-                <div class="ncl2">
-                    <div id="ncl-chart"></div>
-                </div>
-             </div>
-        </div>
-        <div class="Middle">
-            <div class="Middle1">
-                <!-- 药耗 -->
-                <div>
-                    <div class="yaohao yaohao1">300</div>
-                    <div class="yaohao yaohao2">200</div>
-                    <div class="yaohao yaohao3">1</div>
-                </div>
-
-                <!-- 质量指标 表格 -->
-                <div class="quality-table">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>参数</th>
-                                <th>当前值</th>
-                                <th>平均值</th>
-                                <th>最高</th>
-                                <th>最低</th>
-                                <th>指标</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>COD (mg/L)</td>
-                                <td>13.186</td>
-                                <td>12.996</td>
-                                <td>14.666</td>
-                                <td>11.92</td>
-                                <td>0.000–20.000</td>
-                            </tr>
-                            <tr>
-                                <td>TP (mg/L)</td>
-                                <td>13.186</td>
-                                <td>12.996</td>
-                                <td>14.666</td>
-                                <td>11.92</td>
-                                <td>0.000–20.000</td>
-                            </tr>
-                            <tr>
-                                <td>NH3–N (mg/L)</td>
-                                <td>13.186</td>
-                                <td>12.996</td>
-                                <td>14.666</td>
-                                <td>11.92</td>
-                                <td>0.000–20.000</td>
-                            </tr>
-                            <tr>
-                                <td>TN (mg/L)</td>
-                                <td>13.186</td>
-                                <td>12.996</td>
-                                <td>14.666</td>
-                                <td>11.92</td>
-                                <td>0.000–20.000</td>
-                            </tr>
-                            <tr>
-                                <td>PH (mg/L)</td>
-                                <td>13.186</td>
-                                <td>12.996</td>
-                                <td>14.666</td>
-                                <td>11.92</td>
-                                <td>0.000–20.000</td>
-                            </tr>
-                            <tr>
-                                <td>SS</td>
-                                <td>13.186</td>
-                                <td>12.996</td>
-                                <td>14.666</td>
-                                <td>11.92</td>
-                                <td>0.000–20.000</td>
-                            </tr>
-                            <tr>
-                                <td>温度(℃)</td>
-                                <td>13.186</td>
-                                <td>12.996</td>
-                                <td>14.666</td>
-                                <td>11.92</td>
-                                <td>0.000–20.000</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <div class="quality-chart">
-                    <div id="quality-chart"></div>
-                </div>
-            </div>
-
-            <div class="Middle2">
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
-            </div>
-
-            <!-- 中间图表 -->
-            <div class="Middle3">
-                <img src="../../IMG/monitor.png" style="width:100%;height:100%;" />
-            </div>
-
-            <div class="Middle4">
-                <!-- 进水 -->
-                <div></div>
-
-                <!-- 出水 -->
-                 <div></div>
-
-                 <div></div>
-
-                 <div></div>
-            </div>
+      <div class="left">
+        <div>
+          <div class="slqs slqs-jinri">6040</div>
+          <div class="slqs slqs-zuori">4197</div>
+          <div class="slqs slqs-benyue">12356</div>
         </div>
 
-        <!-- 视频 -->
-        <div class="right">
-
+        <!-- 七日水量 -->
+        <div class="seven-days-sl">
+          <div id="seven-days-chart"></div>
         </div>
+
+        <!-- 泥处理指标 -->
+        <div class="ncl">
+          <div class="ncl1">
+            <div class="ncl-val ncl-val1">0</div>
+            <div class="ncl-val ncl-val2">200</div>
+            <div class="ncl-val ncl-val3">4.89</div>
+          </div>
+          <div class="ncl2">
+            <div id="ncl-chart"></div>
+          </div>
+        </div>
+      </div>
+      <div class="Middle">
+        <div class="Middle1">
+          <!-- 药耗 -->
+          <div>
+            <div class="yaohao yaohao1">300</div>
+            <div class="yaohao yaohao2">200</div>
+            <div class="yaohao yaohao3">1</div>
+          </div>
+
+          <!-- 质量指标 表格 -->
+          <div class="quality-table">
+            <table>
+              <thead>
+                <tr>
+                  <th>参数</th>
+                  <th>当前值</th>
+                  <th>平均值</th>
+                  <th>最高</th>
+                  <th>最低</th>
+                  <th>指标</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>COD (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>TP (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>NH3–N (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>TN (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>PH (mg/L)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>SS</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+                <tr>
+                  <td>温度(℃)</td>
+                  <td>13.186</td>
+                  <td>12.996</td>
+                  <td>14.666</td>
+                  <td>11.92</td>
+                  <td>0.000–20.000</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="quality-chart">
+            <div id="quality-chart"></div>
+          </div>
+        </div>
+
+        <div class="Middle2">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+
+        <!-- 中间图表 -->
+        <div class="Middle3">
+          <img src="../../IMG/monitor.png" style="width: 100%; height: 100%" />
+        </div>
+
+        <div class="Middle4">
+          <!-- 进水 -->
+          <div></div>
+
+          <!-- 出水 -->
+          <div></div>
+
+          <div></div>
+
+          <div></div>
+        </div>
+      </div>
+
+      <!-- 视频 -->
+      <div class="right"></div>
     </div>
     <script>
-        $(function() {
-            var chartDom = document.getElementById('seven-days-chart');
-            if (!chartDom) return;
-            var myChart = echarts.init(chartDom);
-            var dataAxis = ['11-10', '11-11', '11-12', '11-13', '11-14', '11-15', '11-16', '11-17'];
-            var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
-            var option = {
-                backgroundColor: 'transparent',
-                grid: {
-                    left: 60,
-                    right: 40,
-                    top: 40,
-                    bottom: 40
+      $(function () {
+        var chartDom = document.getElementById("seven-days-chart");
+        if (!chartDom) return;
+        var myChart = echarts.init(chartDom);
+        var dataAxis = [
+          "11-10",
+          "11-11",
+          "11-12",
+          "11-13",
+          "11-14",
+          "11-15",
+          "11-16",
+          "11-17",
+        ];
+        var data = [5200, 4300, 4200, 4300, 6800, 5200, 7400, 5600];
+        var option = {
+          backgroundColor: "transparent",
+          grid: {
+            left: 60,
+            right: 40,
+            top: 40,
+            bottom: 40,
+          },
+          legend: {
+            data: ["处理水量"],
+            right: 10,
+            top: 0,
+            textStyle: {
+              color: "#9BE8FF",
+              fontSize: 25,
+            },
+          },
+          xAxis: {
+            type: "category",
+            data: dataAxis,
+            axisLine: {
+              lineStyle: { color: "#2C3E50" },
+            },
+            axisTick: { show: false },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 25,
+            },
+          },
+          yAxis: {
+            type: "value",
+            max: 10000,
+            splitNumber: 5,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 18,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.15)",
+                type: "dashed",
+              },
+            },
+          },
+          dataZoom: [{ type: "inside" }],
+          series: [
+            {
+              name: "处理水量",
+              type: "bar",
+              barWidth: 20,
+              data: data,
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#46F2FF" },
+                    { offset: 1, color: "#0B4DB5" },
+                  ]),
+                  shadowColor: "rgba(0, 0, 0, 0.3)",
+                  shadowBlur: 10,
                 },
-                legend: {
-                    data: ['处理水量'],
-                    right: 10,
-                    top: 0,
-                    textStyle: {
-                        color: '#9BE8FF',
-                        fontSize: 25
-                    }
+              },
+              emphasis: {
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#6af8ff" },
+                    { offset: 1, color: "#1560d6" },
+                  ]),
                 },
-                xAxis: {
-                    type: 'category',
-                    data: dataAxis,
-                    axisLine: {
-                        lineStyle: { color: '#2C3E50' }
-                    },
-                    axisTick: { show: false },
-                    axisLabel: {
-                        color: '#B7C9E2',
-                        fontSize: 25
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    max: 10000,
-                    splitNumber: 5,
-                    axisLine: { show: false },
-                    axisTick: { show: false },
-                    axisLabel: {
-                        color: '#B7C9E2',
-                        fontSize: 18
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,0.15)',
-                            type: 'dashed'
-                        }
-                    }
-                },
-                dataZoom: [
-                    { type: 'inside' }
-                ],
-                series: [
-                    {
-                        name: '处理水量',
-                        type: 'bar',
-                        barWidth: 20,
-                        data: data,
-                        itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                    { offset: 0, color: '#46F2FF' },
-                                    { offset: 1, color: '#0B4DB5' }
-                                ]),
-                                shadowColor: 'rgba(0, 0, 0, 0.3)',
-                                shadowBlur: 10
-                            }
-                        },
-                        emphasis: {
-                            itemStyle: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                    { offset: 0, color: '#6af8ff' },
-                                    { offset: 1, color: '#1560d6' }
-                                ])
-                            }
-                        }
-                    },
-                    {
-                        type: 'bar',
-                        barGap: '-100%',
-                        data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
-                        itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
-                        silent: true
-                    }
-                ]
-            };
-            myChart.setOption(option);
-            var zoomSize = 6;
-            myChart.on('click', function(params) {
-                var startIndex = Math.max(params.dataIndex - Math.floor(zoomSize / 2), 0);
-                var endIndex = Math.min(params.dataIndex + Math.floor(zoomSize / 2), data.length - 1);
-                myChart.dispatchAction({
-                    type: 'dataZoom',
-                    startValue: dataAxis[startIndex],
-                    endValue: dataAxis[endIndex]
-                });
-            });
-            var nclDom = document.getElementById('ncl-chart');
-            if (nclDom) {
-                var nclChart = echarts.init(nclDom, 'dark');
-                var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
-                var nclOption = {
-                    backgroundColor: 'transparent',
-                    grid: {
-                        left: 60,
-                        right: 40,
-                        top: 40,
-                        bottom: 40
-                    },
-                    legend: {
-                        data: ['实际小时排泥量'],
-                        right: 10,
-                        top: 0,
-                        textStyle: {
-                            color: '#9BE8FF',
-                            fontSize: 25
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
-                        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
-                        }
-                    ]
-                };
-                nclChart.setOption(nclOption);
-                window.addEventListener('resize', function() {
-                    nclChart.resize();
-                });
-            }
-            window.addEventListener('resize', function() {
-                myChart.resize();
-            });
-            var qualityDom = document.getElementById('quality-chart');
-            if (qualityDom) {
-                var qualityChart = echarts.init(qualityDom);
-                var qualityData = [8, 13, 9, 14, 21, 14, 18];
-                var qualityOption = {
-                    backgroundColor: 'transparent',
-                    grid: {
-                        left: 60,
-                        right: 40,
-                        top: 40,
-                        bottom: 40
-                    },
-                    legend: {
-                        data: ['水质量'],
-                        right: 10,
-                        top: 0,
-                        textStyle: {
-                            color: '#9BE8FF',
-                            fontSize: 25
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: ['11', '12', '13', '14', '15', '16', '17'],
-                        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
-                        }
-                    ]
-                };
-                qualityChart.setOption(qualityOption);
-                window.addEventListener('resize', function() {
-                    qualityChart.resize();
-                });
-            }
+              },
+            },
+            {
+              type: "bar",
+              barGap: "-100%",
+              data: (function () {
+                var yMax = 10000;
+                var shadow = [];
+                for (var i = 0; i < data.length; i++) {
+                  shadow.push(yMax);
+                }
+                return shadow;
+              })(),
+              itemStyle: { normal: { color: "rgba(0,0,0,0.05)" } },
+              silent: true,
+            },
+          ],
+        };
+        myChart.setOption(option);
+        var zoomSize = 6;
+        myChart.on("click", function (params) {
+          var startIndex = Math.max(
+            params.dataIndex - Math.floor(zoomSize / 2),
+            0,
+          );
+          var endIndex = Math.min(
+            params.dataIndex + Math.floor(zoomSize / 2),
+            data.length - 1,
+          );
+          myChart.dispatchAction({
+            type: "dataZoom",
+            startValue: dataAxis[startIndex],
+            endValue: dataAxis[endIndex],
+          });
         });
+        var nclDom = document.getElementById("ncl-chart");
+        if (nclDom) {
+          var nclChart = echarts.init(nclDom, "dark");
+          var nclData = [120, 160, 90, 250, 170, 340, 280, 330, 80, 260];
+          var nclOption = {
+            backgroundColor: "transparent",
+            grid: {
+              left: 60,
+              right: 40,
+              top: 40,
+              bottom: 40,
+            },
+            legend: {
+              data: ["实际小时排泥量"],
+              right: 10,
+              top: 0,
+              textStyle: {
+                color: "#9BE8FF",
+                fontSize: 25,
+              },
+            },
+            xAxis: {
+              type: "category",
+              data: [
+                "2:00",
+                "4:00",
+                "6:00",
+                "8:00",
+                "10:00",
+                "12:00",
+                "14:00",
+                "16:00",
+                "18:00",
+                "20:00",
+              ],
+              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,
+              },
+            ],
+          };
+          nclChart.setOption(nclOption);
+          window.addEventListener("resize", function () {
+            nclChart.resize();
+          });
+        }
+        window.addEventListener("resize", function () {
+          myChart.resize();
+        });
+        var qualityDom = document.getElementById("quality-chart");
+        if (qualityDom) {
+          var qualityChart = echarts.init(qualityDom);
+          var qualityData = [8, 13, 9, 14, 21, 14, 18];
+          var qualityOption = {
+            backgroundColor: "transparent",
+            grid: {
+              left: 60,
+              right: 40,
+              top: 40,
+              bottom: 40,
+            },
+            legend: {
+              data: ["水质量"],
+              right: 10,
+              top: 0,
+              textStyle: {
+                color: "#9BE8FF",
+                fontSize: 25,
+              },
+            },
+            xAxis: {
+              type: "category",
+              data: ["11", "12", "13", "14", "15", "16", "17"],
+              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,
+              },
+            ],
+          };
+          qualityChart.setOption(qualityOption);
+          window.addEventListener("resize", function () {
+            qualityChart.resize();
+          });
+        }
+      });
     </script>
-</body>
+  </body>
 </html>
diff --git a/src/main/webapp/jsp/z_bigScreen/bigScreen2.html b/src/main/webapp/jsp/z_bigScreen/bigScreen2.html
index 300a19af..0de6b864 100644
--- a/src/main/webapp/jsp/z_bigScreen/bigScreen2.html
+++ b/src/main/webapp/jsp/z_bigScreen/bigScreen2.html
@@ -1,462 +1,574 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<!DOCTYPE html>
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+pageEncoding="UTF-8"%>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>区域管线大屏展示</title>
     <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> -->
     <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> -->
-    <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
+    <script
+      type="text/javascript"
+      src="../../node_modules/jquery/dist/jquery.min.js"
+    ></script>
     <script type="text/javascript" src="../../JS/echarts3.0.js"></script>
     <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto; /* Allow scrolling if window is smaller */
-            background-color: #030829;
-        }
-        .screen-container {
-            width: 6500px;
-            height: 1800px;
-            background-image: url('../../IMG/screen2.png');
-            /* background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); */
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            position: relative;
-        }
-        .stat-card {
-            position: absolute;
-            top: 257px;
-            /* left: 1910px; */
-            width: 200px;
-            height: 71px;
-            color: rgba(255, 255, 255, 1);
-            font-family: Gilroy;
-            font-weight: 500;
-            font-size: 60px;
-        }
-        
-        .card-1 { left: 1910px; }
-        .card-2 { left: 2832px; }
-        .card-3 { left: 3754px; }
-        
-        .ring-chart-wrapper {
-            position: absolute;
-            top: 563px;
-            left: 1880px;
-            width: 662px;
-            height: 455px;
-        }
-        .pie-chart-wrapper-2 {
-            position: absolute;
-            top: 563px;
-            left: 2572px;
-            width: 662px;
-            height: 455px;
-        }
-        .gauge-chart-wrapper-3 {
-            position: absolute;
-            top: 563px;
-            left: 3264px;
-            width: 662px;
-            height: 455px;
-        }
-        .gauge-chart-wrapper-4 {
-            position: absolute;
-            top: 563px;
-            left: 3956px;
-            width: 662px;
-            height: 455px;
-        }
-        .bar-chart-wrapper-5 {
-            position: absolute;
-            top: 1158px;
-            left: 1881px;
-            width: 1353px;
-            height: 592px;
-        }
-        .bar-chart-wrapper-6 {
-            position: absolute;
-            top: 1158px;
-            left: 3265px;
-            width: 1353px;
-            height: 592px;
-        }
-        .ring-chart-bg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0.4;
-            mix-blend-mode: normal;
-            /* border: 1px solid rgba(27, 126, 242, 1); */
-            box-sizing: border-box;
-            /* background: rgba(27, 126, 242, 0.6); */
-        }
-        #ring-chart-content, #pie-chart-content-2, #gauge-chart-content-3, #gauge-chart-content-4, #bar-chart-content-5, #bar-chart-content-6 {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto; /* Allow scrolling if window is smaller */
+        background-color: #030829;
+      }
+      .screen-container {
+        width: 6500px;
+        height: 1800px;
+        background-image: url("../../IMG/screen2.png");
+        /* background-image: url('<%=request.getContextPath()%>/IMG/screen2.png'); */
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: relative;
+      }
+      .stat-card {
+        position: absolute;
+        top: 257px;
+        /* left: 1910px; */
+        width: 200px;
+        height: 71px;
+        color: rgba(255, 255, 255, 1);
+        font-family: Gilroy;
+        font-weight: 500;
+        font-size: 60px;
+      }
+
+      .card-1 {
+        left: 1910px;
+      }
+      .card-2 {
+        left: 2832px;
+      }
+      .card-3 {
+        left: 3754px;
+      }
+
+      .ring-chart-wrapper {
+        position: absolute;
+        top: 563px;
+        left: 1880px;
+        width: 662px;
+        height: 455px;
+      }
+      .pie-chart-wrapper-2 {
+        position: absolute;
+        top: 563px;
+        left: 2572px;
+        width: 662px;
+        height: 455px;
+      }
+      .gauge-chart-wrapper-3 {
+        position: absolute;
+        top: 563px;
+        left: 3264px;
+        width: 662px;
+        height: 455px;
+      }
+      .gauge-chart-wrapper-4 {
+        position: absolute;
+        top: 563px;
+        left: 3956px;
+        width: 662px;
+        height: 455px;
+      }
+      .bar-chart-wrapper-5 {
+        position: absolute;
+        top: 1158px;
+        left: 1881px;
+        width: 1353px;
+        height: 592px;
+      }
+      .bar-chart-wrapper-6 {
+        position: absolute;
+        top: 1158px;
+        left: 3265px;
+        width: 1353px;
+        height: 592px;
+      }
+      .ring-chart-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.4;
+        mix-blend-mode: normal;
+        /* border: 1px solid rgba(27, 126, 242, 1); */
+        box-sizing: border-box;
+        /* background: rgba(27, 126, 242, 0.6); */
+      }
+      #ring-chart-content,
+      #pie-chart-content-2,
+      #gauge-chart-content-3,
+      #gauge-chart-content-4,
+      #bar-chart-content-5,
+      #bar-chart-content-6 {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="screen-container">
-        <div class="stat-card card-1">53829.5</div>
-        <div class="stat-card card-2">2495</div>
-        <div class="stat-card card-3">2460</div>
-        
-        <div class="ring-chart-wrapper">
-            <div class="ring-chart-bg"></div>
-            <div id="ring-chart-content"></div>
-        </div>
-        
-        <div class="pie-chart-wrapper-2">
-            <div class="ring-chart-bg"></div>
-            <div id="pie-chart-content-2"></div>
-        </div>
-        
-        <div class="gauge-chart-wrapper-3">
-            <div class="ring-chart-bg"></div>
-            <div id="gauge-chart-content-3"></div>
-        </div>
-        
-        <div class="gauge-chart-wrapper-4">
-            <div class="ring-chart-bg"></div>
-            <div id="gauge-chart-content-4"></div>
-        </div>
-        
-        <div class="bar-chart-wrapper-5">
-            <div class="ring-chart-bg"></div>
-            <div id="bar-chart-content-5"></div>
-        </div>
-        
-        <div class="bar-chart-wrapper-6">
-            <div class="ring-chart-bg"></div>
-            <div id="bar-chart-content-6"></div>
-        </div>
+      <div class="stat-card card-1">53829.5</div>
+      <div class="stat-card card-2">2495</div>
+      <div class="stat-card card-3">2460</div>
+
+      <div class="ring-chart-wrapper">
+        <div class="ring-chart-bg"></div>
+        <div id="ring-chart-content"></div>
+      </div>
+
+      <div class="pie-chart-wrapper-2">
+        <div class="ring-chart-bg"></div>
+        <div id="pie-chart-content-2"></div>
+      </div>
+
+      <div class="gauge-chart-wrapper-3">
+        <div class="ring-chart-bg"></div>
+        <div id="gauge-chart-content-3"></div>
+      </div>
+
+      <div class="gauge-chart-wrapper-4">
+        <div class="ring-chart-bg"></div>
+        <div id="gauge-chart-content-4"></div>
+      </div>
+
+      <div class="bar-chart-wrapper-5">
+        <div class="ring-chart-bg"></div>
+        <div id="bar-chart-content-5"></div>
+      </div>
+
+      <div class="bar-chart-wrapper-6">
+        <div class="ring-chart-bg"></div>
+        <div id="bar-chart-content-6"></div>
+      </div>
     </div>
 
     <script>
-        $(document).ready(function() {
-            launchIntoFullscreen(document.documentElement);
-            initPieChart();
-            initPieChart2();
-            initGaugeChart('gauge-chart-content-3', 53829.5);
-            initGaugeChart('gauge-chart-content-4', 12345.6);
-            initBarChart('bar-chart-content-5', [3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000, 1000, 500, 2563, 4000]);
-            initBarChart('bar-chart-content-6', [2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500, 800, 400, 2000, 3000]);
-            
-            // Double click to toggle fullscreen
-            $('body').on('dblclick', function() {
-                launchIntoFullscreen(document.documentElement);
-            });
+      $(document).ready(function () {
+        launchIntoFullscreen(document.documentElement);
+        initPieChart();
+        initPieChart2();
+        initGaugeChart("gauge-chart-content-3", 53829.5);
+        initGaugeChart("gauge-chart-content-4", 12345.6);
+        initBarChart(
+          "bar-chart-content-5",
+          [
+            3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
+            1000, 500, 2563, 4000,
+          ],
+        );
+        initBarChart(
+          "bar-chart-content-6",
+          [
+            2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
+            800, 400, 2000, 3000,
+          ],
+        );
+
+        // Double click to toggle fullscreen
+        $("body").on("dblclick", function () {
+          launchIntoFullscreen(document.documentElement);
         });
+      });
 
-        function initPieChart() {
-            var chartDom = document.getElementById('ring-chart-content');
-            var myChart = echarts.init(chartDom);
-            var option = {
-                color: [
-                    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
-                    '#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00'
-                ],
-                series: [
-                    {
-                        name: '管线类型统计',
-                        type: 'pie',
-                        radius: '55%',
-                        center: ['50%', '50%'],
-                        avoidLabelOverlap: true,
-                        label: {
-                            show: true,
-                            position: 'outside',
-                            formatter: '{b}',
-                            fontSize: 14,
-                            lineHeight: 20,
-                            align: 'left'
-                        },
-                        labelLine: {
-                            show: true,
-                            length: 20,
-                            length2: 30,
-                            lineStyle: {
-                                type: 'solid'
-                            }
-                        },
-                        data: [
-                            { value: 335, name: 'II级钢筋混凝土管 承插接口' },
-                            { value: 310, name: '焊接钢管 焊接接口' },
-                            { value: 274, name: '高密度聚乙烯双壁波纹管' },
-                            { value: 235, name: '聚乙烯PE管' },
-                            { value: 200, name: 'II级钢筋混凝土管' },
-                            { value: 180, name: '高密度聚乙烯缠绕管' },
-                            { value: 150, name: '焊接钢管 焊接连接' },
-                            { value: 140, name: '高密度聚乙烯中空壁缠绕管' },
-                            { value: 130, name: '钢筋混凝土管' },
-                            { value: 110, name: '球墨铸铁管' },
-                            { value: 100, name: '预应力钢筒混凝土管' }
-                        ]
-                    }
-                ]
-            };
-            myChart.setOption(option);
+      function initPieChart() {
+        var chartDom = document.getElementById("ring-chart-content");
+        var myChart = echarts.init(chartDom);
+        var option = {
+          color: [
+            "#5470c6",
+            "#91cc75",
+            "#fac858",
+            "#ee6666",
+            "#73c0de",
+            "#3ba272",
+            "#fc8452",
+            "#9a60b4",
+            "#ea7ccc",
+            "#00d4ff",
+            "#ffb700",
+            "#2bff89",
+            "#915eff",
+            "#ff7f00",
+          ],
+          series: [
+            {
+              name: "管线类型统计",
+              type: "pie",
+              radius: "55%",
+              center: ["50%", "50%"],
+              avoidLabelOverlap: true,
+              label: {
+                show: true,
+                position: "outside",
+                formatter: "{b}",
+                fontSize: 14,
+                lineHeight: 20,
+                align: "left",
+              },
+              labelLine: {
+                show: true,
+                length: 20,
+                length2: 30,
+                lineStyle: {
+                  type: "solid",
+                },
+              },
+              data: [
+                { value: 335, name: "II级钢筋混凝土管 承插接口" },
+                { value: 310, name: "焊接钢管 焊接接口" },
+                { value: 274, name: "高密度聚乙烯双壁波纹管" },
+                { value: 235, name: "聚乙烯PE管" },
+                { value: 200, name: "II级钢筋混凝土管" },
+                { value: 180, name: "高密度聚乙烯缠绕管" },
+                { value: 150, name: "焊接钢管 焊接连接" },
+                { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
+                { value: 130, name: "钢筋混凝土管" },
+                { value: 110, name: "球墨铸铁管" },
+                { value: 100, name: "预应力钢筒混凝土管" },
+              ],
+            },
+          ],
+        };
+        myChart.setOption(option);
+      }
+
+      function initPieChart2() {
+        var chartDom = document.getElementById("pie-chart-content-2");
+        var myChart = echarts.init(chartDom);
+        var option = {
+          color: [
+            "#5470c6",
+            "#91cc75",
+            "#fac858",
+            "#ee6666",
+            "#73c0de",
+            "#3ba272",
+            "#fc8452",
+            "#9a60b4",
+            "#ea7ccc",
+            "#00d4ff",
+            "#ffb700",
+            "#2bff89",
+            "#915eff",
+            "#ff7f00",
+          ],
+          series: [
+            {
+              name: "管线类型统计2",
+              type: "pie",
+              radius: "55%",
+              center: ["50%", "50%"],
+              avoidLabelOverlap: true,
+              label: {
+                show: true,
+                position: "outside",
+                formatter: "{b}",
+                fontSize: 14,
+                lineHeight: 20,
+                align: "left",
+              },
+              labelLine: {
+                show: true,
+                length: 20,
+                length2: 30,
+                lineStyle: {
+                  type: "solid",
+                },
+              },
+              data: [
+                { value: 335, name: "II级钢筋混凝土管 承插接口" },
+                { value: 310, name: "焊接钢管 焊接接口" },
+                { value: 274, name: "高密度聚乙烯双壁波纹管" },
+                { value: 235, name: "聚乙烯PE管" },
+                { value: 200, name: "II级钢筋混凝土管" },
+                { value: 180, name: "高密度聚乙烯缠绕管" },
+                { value: 150, name: "焊接钢管 焊接连接" },
+                { value: 140, name: "高密度聚乙烯中空壁缠绕管" },
+                { value: 130, name: "钢筋混凝土管" },
+                { value: 110, name: "球墨铸铁管" },
+                { value: 100, name: "预应力钢筒混凝土管" },
+              ],
+            },
+          ],
+        };
+        myChart.setOption(option);
+      }
+
+      function initGaugeChart(domId, value) {
+        var chartDom = document.getElementById(domId);
+        var myChart = echarts.init(chartDom);
+        var option = {
+          series: [
+            {
+              type: "gauge",
+              startAngle: 180,
+              endAngle: 0,
+              min: 0,
+              max: 300,
+              splitNumber: 6,
+              radius: "90%",
+              center: ["50%", "70%"],
+              axisLine: {
+                lineStyle: {
+                  width: 40,
+                  color: [
+                    [
+                      1,
+                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: "rgba(65, 108, 243, 1)" },
+                        { offset: 1, color: "rgba(0, 68, 160, 1)" },
+                      ]),
+                    ],
+                  ],
+                },
+              },
+              pointer: {
+                show: true,
+                length: "60%",
+                width: 6,
+                itemStyle: {
+                  color: "#00d4ff",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#00d4ff",
+                fontSize: 14,
+                distance: -60,
+                formatter: function (value) {
+                  return value;
+                },
+              },
+              detail: {
+                show: true,
+                offsetCenter: [0, "40%"],
+                fontSize: 30,
+                color: "#fff",
+                formatter: "{value} m",
+              },
+              data: [
+                {
+                  value: value,
+                  name: "",
+                },
+              ],
+            },
+          ],
+        };
+
+        // Adjust value if it exceeds max for visual representation (optional)
+        // For now, we just set the data value as is, but if it's large like 53829.5,
+        // the pointer will be pegged at max.
+        // If the gauge is just a visual indicator and the number is what matters:
+        // Let's set the gauge pointer to max if value > 300
+        if (value > 300) {
+          option.series[0].data[0].value = 300; // Pointer at max
+          option.series[0].detail.formatter = value + " m"; // Show real value
         }
 
-        function initPieChart2() {
-            var chartDom = document.getElementById('pie-chart-content-2');
-            var myChart = echarts.init(chartDom);
-            var option = {
-                color: [
-                    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
-                    '#00d4ff', '#ffb700', '#2bff89', '#915eff', '#ff7f00'
-                ],
-                series: [
-                    {
-                        name: '管线类型统计2',
-                        type: 'pie',
-                        radius: '55%',
-                        center: ['50%', '50%'],
-                        avoidLabelOverlap: true,
-                        label: {
-                            show: true,
-                            position: 'outside',
-                            formatter: '{b}',
-                            fontSize: 14,
-                            lineHeight: 20,
-                            align: 'left'
-                        },
-                        labelLine: {
-                            show: true,
-                            length: 20,
-                            length2: 30,
-                            lineStyle: {
-                                type: 'solid'
-                            }
-                        },
-                        data: [
-                            { value: 335, name: 'II级钢筋混凝土管 承插接口' },
-                            { value: 310, name: '焊接钢管 焊接接口' },
-                            { value: 274, name: '高密度聚乙烯双壁波纹管' },
-                            { value: 235, name: '聚乙烯PE管' },
-                            { value: 200, name: 'II级钢筋混凝土管' },
-                            { value: 180, name: '高密度聚乙烯缠绕管' },
-                            { value: 150, name: '焊接钢管 焊接连接' },
-                            { value: 140, name: '高密度聚乙烯中空壁缠绕管' },
-                            { value: 130, name: '钢筋混凝土管' },
-                            { value: 110, name: '球墨铸铁管' },
-                            { value: 100, name: '预应力钢筒混凝土管' }
-                        ]
-                    }
-                ]
-            };
-            myChart.setOption(option);
+        myChart.setOption(option);
+      }
+
+      function initBarChart(domId, data) {
+        var chartDom = document.getElementById(domId);
+        var myChart = echarts.init(chartDom);
+
+        // Find max value for markPoint (example logic)
+        var maxVal = Math.max(...data);
+        var minVal = Math.min(...data);
+
+        var option = {
+          grid: {
+            top: "20%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: "axis",
+          },
+          xAxis: {
+            type: "category",
+            data: [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+            ],
+            axisLine: {
+              lineStyle: { color: "#2C3E50" },
+              show: true,
+              //  lineStyle: {
+              //      color: 'rgba(255, 255, 255, 0.3)'
+              //  }
+            },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 25,
+            },
+            //  axisTick: {
+            //      show: false
+            //  }
+          },
+          yAxis: {
+            type: "value",
+            name: "长度(m)",
+            //  nameTextStyle: {
+            //      color: '#fff',
+            //      padding: [0, 0, 0, 20]
+            //  },
+            //  axisLabel: {
+            //      color: '#fff',
+            //      fontSize: 14
+            //  },
+            //  splitLine: {
+            //      show: true,
+            //      lineStyle: {
+            //          color: 'rgba(255, 255, 255, 0.1)'
+            //      }
+            //  },
+            splitNumber: 5,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+              color: "#B7C9E2",
+              fontSize: 18,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.15)",
+                type: "dashed",
+              },
+            },
+          },
+          dataZoom: [{ type: "inside" }],
+          series: [
+            {
+              data: data,
+              type: "bar",
+              barWidth: "40%",
+              //  itemStyle: {
+              //     color: '#FF9900',
+              //     borderColor: '#FF9900',
+              //     borderWidth: 1
+              // },
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#46F2FF" },
+                    { offset: 1, color: "#0B4DB5" },
+                  ]),
+                  shadowColor: "rgba(0, 0, 0, 0.3)",
+                  shadowBlur: 10,
+                },
+              },
+              emphasis: {
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#6af8ff" },
+                    { offset: 1, color: "#1560d6" },
+                  ]),
+                },
+              },
+              //      markPoint: {
+              //          symbol: 'pin',
+              //          symbolSize: 50,
+              //          label: {
+              //              show: true,
+              //              color: '#fff',
+              //              fontSize: 12
+              //          },
+              //          itemStyle: {
+              //              color: '#FF9900'
+              //          },
+              //          data: [
+              //              { type: 'max', name: 'Max' },
+              //              { type: 'min', name: 'Min' }
+              //          ]
+              //      },
+              //      markLine: {
+              //          symbol: 'none',
+              //          data: [
+              //              { yAxis: 2563.31, name: 'Average' }
+              //          ],
+              //          label: {
+              //              show: true,
+              //              position: 'end',
+              //              formatter: '{c}',
+              //              color: '#FF9900'
+              //          },
+              //          lineStyle: {
+              //              type: 'dotted',
+              //              color: '#FF9900'
+              //          }
+              //      }
+            },
+            //                      {
+            //     type: 'bar',
+            //     barGap: '-100%',
+            //     data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
+            //     itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
+            //     silent: true
+            // }
+          ],
+        };
+        myChart.setOption(option);
+      }
+
+      function launchIntoFullscreen(element) {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
         }
+      }
 
-        function initGaugeChart(domId, value) {
-            var chartDom = document.getElementById(domId);
-            var myChart = echarts.init(chartDom);
-            var option = {
-                series: [
-                    {
-                        type: 'gauge',
-                        startAngle: 180,
-                        endAngle: 0,
-                        min: 0,
-                        max: 300,
-                        splitNumber: 6,
-                        radius: '90%',
-                        center: ['50%', '70%'],
-                        axisLine: {
-                            lineStyle: {
-                                width: 40,
-                                color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                                    { offset: 0, color: 'rgba(65, 108, 243, 1)' },
-                                    { offset: 1, color: 'rgba(0, 68, 160, 1)' }
-                                ])]]
-                            }
-                        },
-                        pointer: {
-                            show: true,
-                            length: '60%',
-                            width: 6,
-                            itemStyle: {
-                                color: '#00d4ff'
-                            }
-                        },
-                        axisTick: {
-                            show: false
-                        },
-                        splitLine: {
-                            show: false
-                        },
-                        axisLabel: {
-                            color: '#00d4ff',
-                            fontSize: 14,
-                            distance: -60,
-                            formatter: function (value) {
-                                return value;
-                            }
-                        },
-                        detail: {
-                            show: true,
-                            offsetCenter: [0, '40%'],
-                            fontSize: 30,
-                            color: '#fff',
-                            formatter: '{value} m'
-                        },
-                        data: [{
-                            value: value,
-                            name: ''
-                        }]
-                    }
-                ]
-            };
-            
-            // Adjust value if it exceeds max for visual representation (optional)
-            // For now, we just set the data value as is, but if it's large like 53829.5, 
-            // the pointer will be pegged at max. 
-            // If the gauge is just a visual indicator and the number is what matters:
-            // Let's set the gauge pointer to max if value > 300
-            if (value > 300) {
-                 option.series[0].data[0].value = 300; // Pointer at max
-                 option.series[0].detail.formatter = value + ' m'; // Show real value
-            }
-
-            myChart.setOption(option);
-         }
-
-         function initBarChart(domId, data) {
-             var chartDom = document.getElementById(domId);
-             var myChart = echarts.init(chartDom);
-             
-             // Find max value for markPoint (example logic)
-             var maxVal = Math.max(...data);
-             var minVal = Math.min(...data);
-             
-             var option = {
-                 grid: {
-                     top: '20%',
-                     left: '3%',
-                     right: '4%',
-                     bottom: '3%',
-                     containLabel: true
-                 },
-                 tooltip: {
-                     trigger: 'axis'
-                 },
-                 xAxis: {
-                     type: 'category',
-                     data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'],
-                     axisLine: {
-                         show: true,
-                         lineStyle: {
-                             color: 'rgba(255, 255, 255, 0.3)'
-                         }
-                     },
-                     axisLabel: {
-                         color: '#fff',
-                         fontSize: 14
-                     },
-                     axisTick: {
-                         show: false
-                     }
-                 },
-                 yAxis: {
-                     type: 'value',
-                     name: '长度(m)',
-                     nameTextStyle: {
-                         color: '#fff',
-                         padding: [0, 0, 0, 20]
-                     },
-                     axisLine: {
-                         show: false
-                     },
-                     axisLabel: {
-                         color: '#fff',
-                         fontSize: 14
-                     },
-                     splitLine: {
-                         show: true,
-                         lineStyle: {
-                             color: 'rgba(255, 255, 255, 0.1)'
-                         }
-                     }
-                 },
-                 series: [
-                     {
-                         data: data,
-                         type: 'bar',
-                         barWidth: '40%',
-                         itemStyle: {
-                            color: '#FF9900',
-                            borderColor: '#FF9900',
-                            borderWidth: 1
-                        },
-                         markPoint: {
-                             symbol: 'pin',
-                             symbolSize: 50,
-                             label: {
-                                 show: true,
-                                 color: '#fff',
-                                 fontSize: 12
-                             },
-                             itemStyle: {
-                                 color: '#FF9900'
-                             },
-                             data: [
-                                 { type: 'max', name: 'Max' },
-                                 { type: 'min', name: 'Min' }
-                             ]
-                         },
-                         markLine: {
-                             symbol: 'none',
-                             data: [
-                                 { yAxis: 2563.31, name: 'Average' }
-                             ],
-                             label: {
-                                 show: true,
-                                 position: 'end',
-                                 formatter: '{c}',
-                                 color: '#FF9900'
-                             },
-                             lineStyle: {
-                                 type: 'dotted',
-                                 color: '#FF9900'
-                             }
-                         }
-                     }
-                 ]
-             };
-             myChart.setOption(option);
-         }
- 
-          function launchIntoFullscreen(element) {
-            if(element.requestFullscreen) {
-                element.requestFullscreen();
-            } else if(element.mozRequestFullScreen) {
-                element.mozRequestFullScreen();
-            } else if(element.webkitRequestFullscreen) {
-                element.webkitRequestFullscreen();
-            } else if(element.msRequestFullscreen) {
-                element.msRequestFullscreen();
-            }
-        }
-
-        function exitFullscreen() {
-            if(document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if(document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if(document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
+      function exitFullscreen() {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
         }
+      }
     </script>
-</body>
+  </body>
 </html>
diff --git a/src/main/webapp/jsp/z_bigScreen/bigScreen3.html b/src/main/webapp/jsp/z_bigScreen/bigScreen3.html
index 91d41ad8..91b27b01 100644
--- a/src/main/webapp/jsp/z_bigScreen/bigScreen3.html
+++ b/src/main/webapp/jsp/z_bigScreen/bigScreen3.html
@@ -1,825 +1,970 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-<!DOCTYPE html>
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+pageEncoding="UTF-8"%>
+<!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>排污户大屏展示</title>
-    <script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
+    <script
+      type="text/javascript"
+      src="../../node_modules/jquery/dist/jquery.min.js"
+    ></script>
     <script type="text/javascript" src="../../JS/echarts3.0.js"></script>
     <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script> -->
     <!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script> -->
     <style>
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: #030829;
-            font-family: "Microsoft YaHei", sans-serif;
-        }
-        .screen-container {
-            width: 6500px;
-            height: 1800px;
-            /* background-image: url('<%=request.getContextPath()%>/IMG/screen3.png'); */
-            background-image: url('../../IMG/screen3.png');
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            position: relative;
-        }
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: #030829;
+        font-family: "Microsoft YaHei", sans-serif;
+      }
+      .screen-container {
+        width: 6500px;
+        height: 1800px;
+        /* background-image: url('<%=request.getContextPath()%>/IMG/screen3.png'); */
+        background-image: url("../../IMG/screen3.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: relative;
+      }
 
-        /* Area 1: Left Stats + Ranking */
-        .rank-module-container {
-            position: absolute;
-            top: 275px;
-            left: 66px;
-            width: 1926px;
-            height: 1500px;
-            display: flex;
-            flex-direction: column;
-            /* padding: 20px; */
-            box-sizing: border-box;
-            z-index: 10;
-        }
+      /* Area 1: Left Stats + Ranking */
+      .rank-module-container {
+        position: absolute;
+        top: 275px;
+        left: 66px;
+        width: 1926px;
+        height: 1500px;
+        display: flex;
+        flex-direction: column;
+        /* padding: 20px; */
+        box-sizing: border-box;
+        z-index: 10;
+      }
 
-        .stats-header {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 30px;
-            background: rgba(0, 0, 0, 0.3);
-            padding: 20px;
-            border-radius: 10px;
-            border: 1px solid rgba(0, 234, 255, 0.2);
-        }
+      .stats-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 30px;
+        background: rgba(0, 0, 0, 0.3);
+        padding: 20px;
+        border-radius: 10px;
+        border: 1px solid rgba(0, 234, 255, 0.2);
+      }
 
-        .stat-item {
-            text-align: center;
-        }
+      .stat-item {
+        text-align: center;
+      }
 
-        .stat-label {
-            font-size: 24px;
-            color: #ccc;
-            margin-bottom: 10px;
-        }
+      .stat-label {
+        font-size: 24px;
+        color: #ccc;
+        margin-bottom: 10px;
+      }
 
-        .stat-value {
-            font-size: 48px;
-            font-weight: bold;
-            color: #00eaff;
-            font-family: 'DIN Alternate', sans-serif;
-        }
+      .stat-value {
+        font-size: 48px;
+        font-weight: bold;
+        color: #00eaff;
+        font-family: "DIN Alternate", sans-serif;
+      }
 
-        .stat-unit {
-            font-size: 20px;
-            margin-left: 5px;
-            color: #aaa;
-        }
+      .stat-unit {
+        font-size: 20px;
+        margin-left: 5px;
+        color: #aaa;
+      }
 
-        .ranking-title {
-            font-size: 28px;
-            font-weight: bold;
-            padding-left: 10px;
-            border-left: 4px solid;
-            margin-bottom: 15px;
-            letter-spacing: 1px;
-        }
+      .ranking-title {
+        font-size: 28px;
+        font-weight: bold;
+        padding-left: 10px;
+        border-left: 4px solid;
+        margin-bottom: 15px;
+        letter-spacing: 1px;
+      }
 
-        /* Area 3: Right Details */
-        .detail-module-container {
-            position: absolute;
-            top: 275px;
-            right: 66px;
-            width: 1926px;
-            height: 1500px;
-            border: 1px solid rgba(0, 234, 255, 0.3);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            /* padding: 30px; */
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            color: #fff;
-            /* background: rgba(0, 20, 50, 0.6) url('<%=request.getContextPath()%>/IMG/bim/渐变背景.png') no-repeat center center; */
-            background-size: cover;
-            z-index: 10;
-        }
+      /* Area 3: Right Details */
+      .detail-module-container {
+        position: absolute;
+        top: 275px;
+        right: 66px;
+        width: 1926px;
+        height: 1500px;
+        border: 1px solid rgba(0, 234, 255, 0.3);
+        backdrop-filter: blur(10px);
+        border-radius: 12px;
+        /* padding: 30px; */
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        color: #fff;
+        /* background: rgba(0, 20, 50, 0.6) url('<%=request.getContextPath()%>/IMG/bim/渐变背景.png') no-repeat center center; */
+        background-size: cover;
+        z-index: 10;
+      }
 
-        /* Area 2: Center Map */
-        .map-module-container {
-            position: absolute;
-            top: 180px;
-            left: 2000px; /* Positioned between Left (1900+66) and Right */
-            width: 2400px; /* Approximate remaining space: 6500 - 1900 - 1926 - margins */
-            height: 1500px;
-            /* background: rgba(0, 255, 0, 0.1); Debug */
-            position: relative;
-            z-index: 5;
-        }
+      /* Area 2: Center Map */
+      .map-module-container {
+        position: absolute;
+        top: 180px;
+        left: 2000px; /* Positioned between Left (1900+66) and Right */
+        width: 2400px; /* Approximate remaining space: 6500 - 1900 - 1926 - margins */
+        height: 1500px;
+        /* background: rgba(0, 255, 0, 0.1); Debug */
+        position: relative;
+        z-index: 5;
+      }
 
-        .map-point {
-            position: absolute;
-            width: 30px;
-            height: 30px;
-            background: rgba(0, 234, 255, 0.8);
-            border: 2px solid #fff;
-            border-radius: 50%;
-            cursor: pointer;
-            box-shadow: 0 0 15px #00eaff;
-            transition: all 0.3s ease;
-            transform: translate(-50%, -50%);
-        }
+      .map-point {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        background: rgba(0, 234, 255, 0.8);
+        border: 2px solid #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 0 15px #00eaff;
+        transition: all 0.3s ease;
+        transform: translate(-50%, -50%);
+      }
 
-        .map-point.active {
-            background: #ffaa00;
-            box-shadow: 0 0 25px #ffaa00;
-            transform: translate(-50%, -50%) scale(1.5);
-            z-index: 20;
-        }
+      .map-point.active {
+        background: #ffaa00;
+        box-shadow: 0 0 25px #ffaa00;
+        transform: translate(-50%, -50%) scale(1.5);
+        z-index: 20;
+      }
 
-        .map-point:hover {
-            transform: translate(-50%, -50%) scale(1.2);
-        }
-        
-        .map-tooltip {
-            position: absolute;
-            bottom: 40px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.8);
-            color: #fff;
-            padding: 5px 10px;
-            border-radius: 4px;
-            white-space: nowrap;
-            font-size: 20px;
-            pointer-events: none;
-            display: none;
-            border: 1px solid #00eaff;
-        }
+      .map-point:hover {
+        transform: translate(-50%, -50%) scale(1.2);
+      }
 
-        .map-point:hover .map-tooltip {
-            display: block;
-        }
+      .map-tooltip {
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.8);
+        color: #fff;
+        padding: 5px 10px;
+        border-radius: 4px;
+        white-space: nowrap;
+        font-size: 20px;
+        pointer-events: none;
+        display: none;
+        border: 1px solid #00eaff;
+      }
 
-        .enterprise-detail-header {
-            font-size: 56px;
-            font-weight: bold;
-            color: #00eaff;
-            text-align: center;
-            margin-bottom: 40px;
-            text-shadow: 0 0 20px rgba(0, 234, 255, 0.8);
-            border-bottom: 2px solid rgba(0, 234, 255, 0.2);
-            padding-bottom: 20px;
-            letter-spacing: 2px;
-        }
+      .map-point:hover .map-tooltip {
+        display: block;
+      }
 
-        .detail-content {
-            display: flex;
-            height: 450px;
-            margin-bottom: 40px;
-            gap: 30px;
-        }
+      .enterprise-detail-header {
+        font-size: 56px;
+        font-weight: bold;
+        color: #00eaff;
+        text-align: center;
+        margin-bottom: 40px;
+        text-shadow: 0 0 20px rgba(0, 234, 255, 0.8);
+        border-bottom: 2px solid rgba(0, 234, 255, 0.2);
+        padding-bottom: 20px;
+        letter-spacing: 2px;
+      }
 
-        .info-section {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            font-size: 36px;
-            line-height: 2.2;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-        }
+      .detail-content {
+        display: flex;
+        height: 450px;
+        margin-bottom: 40px;
+        gap: 30px;
+      }
 
-        .info-item {
-            border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
-        }
+      .info-section {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 36px;
+        line-height: 2.2;
+        padding: 20px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 10px;
+      }
 
-        .info-item span {
-            color: #ffaa00;
-            font-weight: bold;
-            margin-left: 15px;
-            font-family: 'DIN Alternate', sans-serif;
-        }
+      .info-item {
+        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
+      }
 
-        .photo-section {
-            flex: 1;
-            border: 2px solid rgba(0, 234, 255, 0.3);
-            border-radius: 10px;
-            overflow: hidden;
-            background: #000;
-            position: relative;
-        }
+      .info-item span {
+        color: #ffaa00;
+        font-weight: bold;
+        margin-left: 15px;
+        font-family: "DIN Alternate", sans-serif;
+      }
 
-        .photo-label {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            background: rgba(0, 0, 0, 0.6);
-            color: #fff;
-            text-align: center;
-            padding: 10px 0;
-            font-size: 24px;
-        }
+      .photo-section {
+        flex: 1;
+        border: 2px solid rgba(0, 234, 255, 0.3);
+        border-radius: 10px;
+        overflow: hidden;
+        background: #000;
+        position: relative;
+      }
 
-        .detail-charts {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 30px;
-        }
+      .photo-label {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        color: #fff;
+        text-align: center;
+        padding: 10px 0;
+        font-size: 24px;
+      }
 
-        .detail-chart-box {
-            flex: 1;
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(0, 234, 255, 0.1);
-            border-radius: 12px;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-        }
+      .detail-charts {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+      }
 
-        .chart-subtitle {
-            font-size: 32px;
-            color: #ffffff;
-            margin-bottom: 15px;
-            padding-left: 15px;
-            border-left: 6px solid #00eaff;
-            font-weight: bold;
-        }
+      .detail-chart-box {
+        flex: 1;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 234, 255, 0.1);
+        border-radius: 12px;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+      }
 
-        .chart-content {
-            flex: 1;
-            width: 100%;
-            min-height: 0; /* Important for flex child scroll/resize */
-        }
-        
-        .new-bar-chart-container {
-            position: absolute;
-            top: 400px;
-            left: 66px;
-            width: 1920px;
-            height: 1400px;
-            z-index: 100;
-            display: none;
-        }
+      .chart-subtitle {
+        font-size: 32px;
+        color: #ffffff;
+        margin-bottom: 15px;
+        padding-left: 15px;
+        border-left: 6px solid #00eaff;
+        font-weight: bold;
+      }
+
+      .chart-content {
+        flex: 1;
+        width: 100%;
+        min-height: 0; /* Important for flex child scroll/resize */
+      }
+
+      .new-bar-chart-container {
+        position: absolute;
+        top: 400px;
+        left: 66px;
+        width: 1920px;
+        height: 1400px;
+        z-index: 100;
+        display: none;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="screen-container">
-        <div class="rank-module-container">
-            <!-- Statistics -->
-            <div class="stats-header">
-                <div class="stat-item">
-                    <div class="stat-label">辖区排污企业总数</div>
-                    <div class="stat-value" id="totalCount">0<span class="stat-unit">家</span></div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">已接入监控</div>
-                    <div class="stat-value" style="color: #00ff00;" id="connectedCount">0<span class="stat-unit">家</span></div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-label">正在接入中</div>
-                    <div class="stat-value" style="color: #ffaa00;" id="connectingCount">0<span class="stat-unit">家</span></div>
-                </div>
+      <div class="rank-module-container">
+        <!-- Statistics -->
+        <div class="stats-header">
+          <div class="stat-item">
+            <div class="stat-label">辖区排污企业总数</div>
+            <div class="stat-value" id="totalCount">
+              0<span class="stat-unit">家</span>
             </div>
-
-            <!-- Ranking List -->
-            <div class="ranking-list-wrapper" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
-                <div id="chartRanking" style="flex: 1; width: 100%;"></div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">已接入监控</div>
+            <div class="stat-value" style="color: #00ff00" id="connectedCount">
+              0<span class="stat-unit">家</span>
             </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">正在接入中</div>
+            <div class="stat-value" style="color: #ffaa00" id="connectingCount">
+              0<span class="stat-unit">家</span>
+            </div>
+          </div>
         </div>
 
-        <!-- Left Side Detail Module -->
-        <div class="detail-module-container">
-            <div class="enterprise-detail-header" id="detailTitle">企业名称加载中...</div>
-            <div class="detail-content">
-                <div class="info-section">
-                    <div class="info-item">污水特性: <span id="sewageType">--</span></div>
-                    <div class="info-item">当前排污量: <span id="dischargeVolume">--</span></div>
-                    <div class="info-item">接入状态: <span id="connectionStatus">--</span></div>
-                </div>
-                <div class="photo-section">
-                    <img id="sitePhoto" src="<%=request.getContextPath()%>/IMG/login/company.png" alt="现场照片" style="width:100%; height:100%; object-fit: cover;">
-                    <div class="photo-label">现场监控画面</div>
-                </div>
-            </div>
-            <div class="detail-charts">
-                <div class="detail-chart-box">
-                    <div class="chart-subtitle">瞬时排污量历史曲线 (近3天)</div>
-                    <div id="chartInstant" class="chart-content"></div>
-                </div>
-                <div class="detail-chart-box">
-                    <div class="chart-subtitle">累计流量历史曲线 (日差值 - 近14天)</div>
-                    <div id="chartCumulative" class="chart-content"></div>
-                </div>
-            </div>
+        <!-- Ranking List -->
+        <div
+          class="ranking-list-wrapper"
+          style="
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+          "
+        >
+          <div id="chartRanking" style="flex: 1; width: 100%"></div>
         </div>
-        
-        <!-- New Bar Chart Area -->
-        <div class="new-bar-chart-container">
-            <div id="newBarChart" style="width: 100%; height: 100%;"></div>
+      </div>
+
+      <!-- Left Side Detail Module -->
+      <div class="detail-module-container">
+        <div class="enterprise-detail-header" id="detailTitle">
+          企业名称加载中...
         </div>
+        <div class="detail-content">
+          <div class="info-section">
+            <div class="info-item">
+              污水特性: <span id="sewageType">--</span>
+            </div>
+            <div class="info-item">
+              当前排污量: <span id="dischargeVolume">--</span>
+            </div>
+            <div class="info-item">
+              接入状态: <span id="connectionStatus">--</span>
+            </div>
+          </div>
+          <div class="photo-section">
+            <img
+              id="sitePhoto"
+              src="<%=request.getContextPath()%>/IMG/login/company.png"
+              alt="现场照片"
+              style="width: 100%; height: 100%; object-fit: cover"
+            />
+            <div class="photo-label">现场监控画面</div>
+          </div>
+        </div>
+        <div class="detail-charts">
+          <div class="detail-chart-box">
+            <div class="chart-subtitle">瞬时排污量历史曲线 (近3天)</div>
+            <div id="chartInstant" class="chart-content"></div>
+          </div>
+          <div class="detail-chart-box">
+            <div class="chart-subtitle">累计流量历史曲线 (日差值 - 近14天)</div>
+            <div id="chartCumulative" class="chart-content"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- New Bar Chart Area -->
+      <div class="new-bar-chart-container">
+        <div id="newBarChart" style="width: 100%; height: 100%"></div>
+      </div>
     </div>
 
     <script>
-        var myChartInstant = null;
-        var myChartCumulative = null;
-        var myChartRanking = null;
-        var myNewBarChart = null;
-        
-        var currentMaxData = []; // Top 10 Max
-        var currentMinData = []; // Top 10 Min
-        var allEnterprises = []; // All data for map
-        var currentFocusIndex = 0;
-        var rotationTimer = null;
+      var myChartInstant = null;
+      var myChartCumulative = null;
+      var myChartRanking = null;
+      var myNewBarChart = null;
 
-        $(document).ready(function() {
-            launchIntoFullscreen(document.documentElement);
-            initData();
-            
-            // Double click to toggle fullscreen
-            $('body').on('dblclick', function() {
-                launchIntoFullscreen(document.documentElement);
-            });
+      var currentMaxData = []; // Top 10 Max
+      var currentMinData = []; // Top 10 Min
+      var allEnterprises = []; // All data for map
+      var currentFocusIndex = 0;
+      var rotationTimer = null;
+
+      $(document).ready(function () {
+        launchIntoFullscreen(document.documentElement);
+        initData();
+
+        // Double click to toggle fullscreen
+        $("body").on("dblclick", function () {
+          launchIntoFullscreen(document.documentElement);
+        });
+      });
+
+      function launchIntoFullscreen(element) {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
+        }
+      }
+
+      function exitFullscreen() {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+      }
+
+      function initData() {
+        // Stats
+        var total = 158;
+        var connected = 124;
+        var connecting = 34;
+        $("#totalCount").html(total + '<span class="stat-unit">家</span>');
+        $("#connectedCount").html(
+          connected + '<span class="stat-unit">家</span>',
+        );
+        $("#connectingCount").html(
+          connecting + '<span class="stat-unit">家</span>',
+        );
+
+        // Generate Enterprises with Details
+        var enterprises = [];
+        var sewageTypes = ["化学需氧量", "氨氮", "总磷", "重金属", "酸碱废水"];
+        var connectionStatuses = ["已接入", "接入中"];
+
+        for (var i = 1; i <= 50; i++) {
+          var val = Math.floor(Math.random() * 10000) + 500;
+          enterprises.push({
+            id: i,
+            name: "企业-" + i,
+            value: val,
+            // Details
+            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
+          });
+        }
+        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();
+      }
+
+      function generateHistoryData(count) {
+        var data = [];
+        for (var k = 0; k < count; k++) {
+          data.push(Math.floor(Math.random() * 500) + 50);
+        }
+        return data;
+      }
+
+      function updateSortedData(enterprises) {
+        // Sort Descending for Max
+        currentMaxData = [...enterprises]
+          .sort((a, b) => b.value - a.value)
+          .slice(0, 10);
+
+        // Sort Ascending for Min
+        currentMinData = [...enterprises]
+          .sort((a, b) => a.value - b.value)
+          .slice(0, 10);
+      }
+
+      function renderRankingChart() {
+        var maxNames = [];
+        var maxValues = [];
+        var minNames = [];
+        var minValues = [];
+
+        // Process Max Data (Top 10 High)
+        currentMaxData.forEach((item, index) => {
+          maxNames.push(item.name);
+
+          maxValues.push({
+            value: item.value,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "#ff5500",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffb700",
+                  },
+                ]),
+              },
+            },
+          });
         });
 
-        function launchIntoFullscreen(element) {
-            if(element.requestFullscreen) {
-                element.requestFullscreen();
-            } else if(element.mozRequestFullScreen) {
-                element.mozRequestFullScreen();
-            } else if(element.webkitRequestFullscreen) {
-                element.webkitRequestFullscreen();
-            } else if(element.msRequestFullscreen) {
-                element.msRequestFullscreen();
-            }
-        }
+        // Process Min Data (Top 10 Low)
+        currentMinData.forEach((item) => {
+          minNames.push(item.name);
+          minValues.push({
+            value: item.value,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "#00aa00",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00ff00",
+                  },
+                ]),
+              },
+            },
+          });
+        });
 
-        function exitFullscreen() {
-            if(document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if(document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if(document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
-        }
-
-        function initData() {
-            // Stats
-            var total = 158;
-            var connected = 124;
-            var connecting = 34;
-            $('#totalCount').html(total + '<span class="stat-unit">家</span>');
-            $('#connectedCount').html(connected + '<span class="stat-unit">家</span>');
-            $('#connectingCount').html(connecting + '<span class="stat-unit">家</span>');
-
-            // Generate Enterprises with Details
-            var enterprises = [];
-            var sewageTypes = ['化学需氧量', '氨氮', '总磷', '重金属', '酸碱废水'];
-            var connectionStatuses = ['已接入', '接入中'];
-            
-            for (var i = 1; i <= 50; i++) {
-                var val = Math.floor(Math.random() * 10000) + 500;
-                enterprises.push({
-                    id: i,
-                    name: '企业-' + i,
-                    value: val,
-                    // Details
-                    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
-                });
-            }
-            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();
-        }
-
-        function generateHistoryData(count) {
-            var data = [];
-            for(var k=0; k<count; k++) {
-                data.push(Math.floor(Math.random() * 500) + 50);
-            }
-            return data;
-        }
-
-        function updateSortedData(enterprises) {
-            // Sort Descending for Max
-            currentMaxData = [...enterprises].sort((a, b) => b.value - a.value).slice(0, 10);
-            
-            // Sort Ascending for Min
-            currentMinData = [...enterprises].sort((a, b) => a.value - b.value).slice(0, 10);
-        }
-
-        function renderRankingChart() {
-            var maxNames = [];
-            var maxValues = [];
-            var minNames = [];
-            var minValues = [];
-            
-            // Process Max Data (Top 10 High)
-            currentMaxData.forEach((item, index) => {
-                maxNames.push(item.name);
-                
-                maxValues.push({
-                    value: item.value,
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                offset: 0, color: '#ff5500' 
-                            }, {
-                                offset: 1, color: '#ffb700' 
-                            }])
-                        }
-                    }
-                });
-            });
-
-            // Process Min Data (Top 10 Low)
-            currentMinData.forEach((item) => {
-                minNames.push(item.name);
-                minValues.push({
-                    value: item.value,
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                offset: 0, color: '#00aa00'
-                            }, {
-                                offset: 1, color: '#00ff00'
-                            }])
-                        }
-                    }
-                });
-            });
-
-            var option = {
-                title: [{
-                    text: '近30日排污量 TOP 10 (最大)',
-                    left: '25%',
-                    top: '2%',
-                    textAlign: 'center',
-                    textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
-                }, {
-                    text: '近30日排污量 TOP 10 (最小)',
-                    left: '75%',
-                    top: '2%',
-                    textAlign: 'center',
-                    textStyle: { color: '#ffffff', fontSize: 30, fontWeight: 'bold' }
-                }],
-                grid: [{
-                    top: '12%',
-                    left: '2%',
-                    right: '52%',
-                    bottom: '5%',
-                    containLabel: true
-                }, {
-                    top: '12%',
-                    left: '52%',
-                    right: '2%',
-                    bottom: '5%',
-                    containLabel: true
-                }],
-                xAxis: [{
-                    type: 'value',
-                    show: false,
-                    gridIndex: 0
-                }, {
-                    type: 'value',
-                    show: false,
-                    gridIndex: 1
-                }],
-                yAxis: [{
-                    type: 'category',
-                    data: maxNames,
-                    inverse: true,
-                    axisLabel: { color: '#fff', fontSize: 20 },
-                    axisLine: { show: false },
-                    axisTick: { show: false },
-                    gridIndex: 0
-                }, {
-                    type: 'category',
-                    data: minNames,
-                    inverse: true,
-                    axisLabel: { color: '#fff', fontSize: 20 },
-                    axisLine: { show: false },
-                    axisTick: { show: false },
-                    gridIndex: 1
-                }],
-                series: [{
-                    name: 'Max',
-                    type: 'bar',
-                    xAxisIndex: 0,
-                    yAxisIndex: 0,
-                    data: maxValues,
-                    barWidth: 45,
-                    showBackground: true,
-                    backgroundStyle: {
-                        color: 'rgba(255, 255, 255, 0.1)',
-                        barBorderRadius: [0, 22, 22, 0]
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            position: 'right',
-                            textStyle: { color: '#ffffff', fontSize: 20 },
-                            formatter: '{c}'
-                        }
-                    },
-                    itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
-                }, {
-                    name: 'Min',
-                    type: 'bar',
-                    xAxisIndex: 1,
-                    yAxisIndex: 1,
-                    data: minValues,
-                    barWidth: 45,
-                    showBackground: true,
-                    backgroundStyle: {
-                        color: 'rgba(255, 255, 255, 0.1)',
-                        barBorderRadius: [0, 22, 22, 0]
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            position: 'right',
-                            textStyle: { color: '#ffffff', fontSize: 20 },
-                            formatter: '{c}'
-                        }
-                    },
-                    itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
-                }]
-            };
-            
-            myChartRanking.setOption(option);
-        }
-
-        function renderMapPoints() {
-            var html = '';
-            allEnterprises.forEach((item) => {
-                html += '<div class="map-point ' + (item.value > 8000 ? 'super' : '') + '" id="point-' + item.id + '" style="left:' + item.x + '%; top:' + item.y + '%;" onclick="handleMapClick(' + item.id + ')">';
-                html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click
-                html += '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' + item.id + ')">' + item.name + '</div>';
-                html += '<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' + item.id + ')">' + item.value + ' m³/h</span></div>';
-                html += '<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' + item.id + ')">' + (item.value * 24) + ' m³</span></div>';
-                html += '</div>';
-                html += '</div>';
-            });
-            $('#mapContainer').html(html);
-        }
-
-        function closeModal() {
-            $('#historyModal').fadeOut();
-        }
-
-        var modalChartInstance = null;
-
-        function showHistoryModal(type, id) {
-            var ent = allEnterprises.find(e => e.id === id);
-            if(!ent) return;
-            
-            $('#historyModal').css('display', 'flex').hide().fadeIn();
-            
-            if(modalChartInstance) {
-                modalChartInstance.dispose();
-            }
-            modalChartInstance = echarts.init(document.getElementById('modalChart'));
-            
-            var title = (type === 'instant' ? '瞬时排污量' : '累计流量') + '历史曲线 - ' + ent.name;
-            $('#modalTitle').text(title);
-            
-            var xData, yData, color;
-            if(type === 'instant') {
-                xData = [];
-                for(var i=0; i<72; i++) xData.push(i + 'h');
-                yData = ent.instantHistory;
-                color = '#ffaa00';
-            } else {
-                xData = [];
-                for(var j=0; j<14; j++) xData.push('D' + (j+1));
-                yData = ent.cumulativeHistory;
-                color = '#00eaff';
-            }
-            
-            var option = {
-                tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.8)', textStyle: {color: '#fff'} },
-                grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
-                xAxis: { 
-                    type: 'category', 
-                    boundaryGap: false,
-                    data: xData,
-                    axisLabel: { color: '#fff', fontSize: 16 },
-                    axisLine: { lineStyle: { color: '#00eaff' } }
+        var option = {
+          title: [
+            {
+              text: "近30日排污量 TOP 10 (最大)",
+              left: "25%",
+              top: "2%",
+              textAlign: "center",
+              textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
+            },
+            {
+              text: "近30日排污量 TOP 10 (最小)",
+              left: "75%",
+              top: "2%",
+              textAlign: "center",
+              textStyle: { color: "#ffffff", fontSize: 30, fontWeight: "bold" },
+            },
+          ],
+          grid: [
+            {
+              top: "12%",
+              left: "2%",
+              right: "52%",
+              bottom: "5%",
+              containLabel: true,
+            },
+            {
+              top: "12%",
+              left: "52%",
+              right: "2%",
+              bottom: "5%",
+              containLabel: true,
+            },
+          ],
+          xAxis: [
+            {
+              type: "value",
+              show: false,
+              gridIndex: 0,
+            },
+            {
+              type: "value",
+              show: false,
+              gridIndex: 1,
+            },
+          ],
+          yAxis: [
+            {
+              type: "category",
+              data: maxNames,
+              inverse: true,
+              axisLabel: { color: "#fff", fontSize: 20 },
+              axisLine: { show: false },
+              axisTick: { show: false },
+              gridIndex: 0,
+            },
+            {
+              type: "category",
+              data: minNames,
+              inverse: true,
+              axisLabel: { color: "#fff", fontSize: 20 },
+              axisLine: { show: false },
+              axisTick: { show: false },
+              gridIndex: 1,
+            },
+          ],
+          series: [
+            {
+              name: "Max",
+              type: "bar",
+              xAxisIndex: 0,
+              yAxisIndex: 0,
+              data: maxValues,
+              barWidth: 45,
+              showBackground: true,
+              backgroundStyle: {
+                color: "rgba(255, 255, 255, 0.1)",
+                barBorderRadius: [0, 22, 22, 0],
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: "right",
+                  textStyle: { color: "#ffffff", fontSize: 20 },
+                  formatter: "{c}",
                 },
-                yAxis: { 
-                    type: 'value', 
-                    axisLabel: { color: '#fff', fontSize: 16 },
-                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
+              },
+              itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
+            },
+            {
+              name: "Min",
+              type: "bar",
+              xAxisIndex: 1,
+              yAxisIndex: 1,
+              data: minValues,
+              barWidth: 45,
+              showBackground: true,
+              backgroundStyle: {
+                color: "rgba(255, 255, 255, 0.1)",
+                barBorderRadius: [0, 22, 22, 0],
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: "right",
+                  textStyle: { color: "#ffffff", fontSize: 20 },
+                  formatter: "{c}",
                 },
-                series: [{
-                    name: type === 'instant' ? '瞬时流量' : '累计流量',
-                    type: 'line',
-                    smooth: true,
-                    data: yData,
-                    lineStyle: { width: 3, color: color },
-                    areaStyle: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                            offset: 0, color: color
-                        }, {
-                            offset: 1, color: 'rgba(0,0,0,0)'
-                        }])
-                    },
-                    itemStyle: { color: color }
-                }]
-            };
-            
-            modalChartInstance.setOption(option);
+              },
+              itemStyle: { normal: { barBorderRadius: [0, 22, 22, 0] } },
+            },
+          ],
+        };
+
+        myChartRanking.setOption(option);
+      }
+
+      function renderMapPoints() {
+        var html = "";
+        allEnterprises.forEach((item) => {
+          html +=
+            '<div class="map-point ' +
+            (item.value > 8000 ? "super" : "") +
+            '" id="point-' +
+            item.id +
+            '" style="left:' +
+            item.x +
+            "%; top:" +
+            item.y +
+            '%;" onclick="handleMapClick(' +
+            item.id +
+            ')">';
+          html += '<div class="map-tooltip" onclick="event.stopPropagation()">'; // Stop prop to prevent point click
+          html +=
+            '<div class="map-tooltip-row" style="font-weight:bold; color:#00eaff; font-size:22px; margin-bottom:10px; cursor:pointer;" onclick="handleMapClick(' +
+            item.id +
+            ')">' +
+            item.name +
+            "</div>";
+          html +=
+            '<div class="map-tooltip-row"><span class="map-tooltip-label">瞬时流量:</span><span class="clickable-val" onclick="showHistoryModal(\'instant\', ' +
+            item.id +
+            ')">' +
+            item.value +
+            " m³/h</span></div>";
+          html +=
+            '<div class="map-tooltip-row"><span class="map-tooltip-label">累计流量:</span><span class="clickable-val" onclick="showHistoryModal(\'cumulative\', ' +
+            item.id +
+            ')">' +
+            item.value * 24 +
+            " m³</span></div>";
+          html += "</div>";
+          html += "</div>";
+        });
+        $("#mapContainer").html(html);
+      }
+
+      function closeModal() {
+        $("#historyModal").fadeOut();
+      }
+
+      var modalChartInstance = null;
+
+      function showHistoryModal(type, id) {
+        var ent = allEnterprises.find((e) => e.id === id);
+        if (!ent) return;
+
+        $("#historyModal").css("display", "flex").hide().fadeIn();
+
+        if (modalChartInstance) {
+          modalChartInstance.dispose();
+        }
+        modalChartInstance = echarts.init(
+          document.getElementById("modalChart"),
+        );
+
+        var title =
+          (type === "instant" ? "瞬时排污量" : "累计流量") +
+          "历史曲线 - " +
+          ent.name;
+        $("#modalTitle").text(title);
+
+        var xData, yData, color;
+        if (type === "instant") {
+          xData = [];
+          for (var i = 0; i < 72; i++) xData.push(i + "h");
+          yData = ent.instantHistory;
+          color = "#ffaa00";
+        } else {
+          xData = [];
+          for (var j = 0; j < 14; j++) xData.push("D" + (j + 1));
+          yData = ent.cumulativeHistory;
+          color = "#00eaff";
         }
 
-        function handleMapClick(id) {
-            // Find if this enterprise is in currentMaxData
-            var index = currentMaxData.findIndex(e => e.id === id);
-            if (index !== -1) {
-                currentFocusIndex = index;
-                updateDetailView();
-                // Reset rotation timer to pause briefly or restart? 
-                // For simplicity, just let it continue or reset interval
-                clearInterval(rotationTimer);
-                startRotation();
+        var option = {
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(0,0,0,0.8)",
+            textStyle: { color: "#fff" },
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            top: "10%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisLabel: { color: "#fff", fontSize: 16 },
+            axisLine: { lineStyle: { color: "#00eaff" } },
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: { color: "#fff", fontSize: 16 },
+            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
+          },
+          series: [
+            {
+              name: type === "instant" ? "瞬时流量" : "累计流量",
+              type: "line",
+              smooth: true,
+              data: yData,
+              lineStyle: { width: 3, color: color },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: color,
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0,0,0,0)",
+                  },
+                ]),
+              },
+              itemStyle: { color: color },
+            },
+          ],
+        };
+
+        modalChartInstance.setOption(option);
+      }
+
+      function handleMapClick(id) {
+        // Find if this enterprise is in currentMaxData
+        var index = currentMaxData.findIndex((e) => e.id === id);
+        if (index !== -1) {
+          currentFocusIndex = index;
+          updateDetailView();
+          // Reset rotation timer to pause briefly or restart?
+          // For simplicity, just let it continue or reset interval
+          clearInterval(rotationTimer);
+          startRotation();
+        } else {
+          // If clicked item is not in Top 10, we can still show it in Detail View
+          // But rotation logic might overwrite it next tick.
+          // Let's just show it temporarily.
+          var enterprise = allEnterprises.find((e) => e.id === id);
+          if (enterprise) {
+            renderDetailContent(enterprise);
+            highlightMapPoint(enterprise.id);
+            // Clear ranking highlight since it's not in the list (visually)
+            $(".ranking-row").removeClass("active");
+          }
+        }
+      }
+
+      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 {
-                // If clicked item is not in Top 10, we can still show it in Detail View
-                // But rotation logic might overwrite it next tick.
-                // Let's just show it temporarily.
-                var enterprise = allEnterprises.find(e => e.id === id);
-                if(enterprise) {
-                    renderDetailContent(enterprise);
-                    highlightMapPoint(enterprise.id);
-                    // Clear ranking highlight since it's not in the list (visually)
-                    $('.ranking-row').removeClass('active');
-                }
+              el.removeClass("super");
             }
-        }
+            el.find(".map-tooltip").html(
+              item.name + "<br>排污量: " + item.value,
+            );
+          });
 
-        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');
-                    }
-                    el.find('.map-tooltip').html(item.name + '<br>排污量: ' + item.value);
-                });
-                
-                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:
-                /*
+          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 + '<br>排污量: ' + item.value);
                 });
                 */
-            }, 10000);
-        }
+        }, 10000);
+      }
 
-        function startRotation() {
-            rotationTimer = setInterval(function() {
-                currentFocusIndex = (currentFocusIndex + 1) % 10;
-                updateDetailView();
-            }, 10000); // Rotate every 5 seconds
-        }
+      function startRotation() {
+        rotationTimer = setInterval(function () {
+          currentFocusIndex = (currentFocusIndex + 1) % 10;
+          updateDetailView();
+        }, 10000); // Rotate every 5 seconds
+      }
 
-        function updateDetailView() {
-            if(!currentMaxData || currentMaxData.length === 0) return;
-            if(currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0;
-            
-            var enterprise = currentMaxData[currentFocusIndex];
-            
-            renderDetailContent(enterprise);
+      function updateDetailView() {
+        if (!currentMaxData || currentMaxData.length === 0) return;
+        if (currentFocusIndex >= currentMaxData.length) currentFocusIndex = 0;
 
-            // Highlight Ranking Chart
-            renderRankingChart();
+        var enterprise = currentMaxData[currentFocusIndex];
 
-            // Highlight Map Point
-            highlightMapPoint(enterprise.id);
-        }
+        renderDetailContent(enterprise);
 
-        function highlightMapPoint(id) {
-            $('.map-point').removeClass('active');
-            $('#point-' + id).addClass('active');
-        }
-        
-        function renderDetailContent(enterprise) {
-            // Update DOM
-            $('#detailTitle').text(enterprise.name);
-            $('#sewageType').text(enterprise.sewageType);
-            $('#dischargeVolume').text(enterprise.value + ' m³');
-            $('#connectionStatus').text(enterprise.connectionStatus);
-            
-            renderDetailCharts(enterprise);
-        }
-        
-        function renderDetailCharts(enterprise) {
-             // Generate X labels
-             var hours = [];
-             for(var i=0; i<72; i++) hours.push(i+'h');
-             
-             var days = [];
-             for(var j=0; j<14; j++) days.push('D'+(j+1));
+        // Highlight Ranking Chart
+        renderRankingChart();
 
-             // Instant Chart (Line)
-             var optionInstant = {
-                tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
-                xAxis: { 
-                    type: 'category', 
-                    boundaryGap: false,
-                    data: hours,
-                    axisLabel: { color: '#ccc' },
-                    axisLine: { lineStyle: { color: '#00eaff' } }
+        // Highlight Map Point
+        highlightMapPoint(enterprise.id);
+      }
+
+      function highlightMapPoint(id) {
+        $(".map-point").removeClass("active");
+        $("#point-" + id).addClass("active");
+      }
+
+      function renderDetailContent(enterprise) {
+        // Update DOM
+        $("#detailTitle").text(enterprise.name);
+        $("#sewageType").text(enterprise.sewageType);
+        $("#dischargeVolume").text(enterprise.value + " m³");
+        $("#connectionStatus").text(enterprise.connectionStatus);
+
+        renderDetailCharts(enterprise);
+      }
+
+      function renderDetailCharts(enterprise) {
+        // Generate X labels
+        var hours = [];
+        for (var i = 0; i < 72; i++) hours.push(i + "h");
+
+        var days = [];
+        for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
+
+        // Instant Chart (Line)
+        var optionInstant = {
+          tooltip: { trigger: "axis" },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: hours,
+            axisLabel: { color: "#ccc" },
+            axisLine: { lineStyle: { color: "#00eaff" } },
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: { color: "#ccc" },
+            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
+          },
+          series: [
+            {
+              name: "瞬时量",
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "average",
+              itemStyle: { color: "#00eaff" },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "rgba(0, 234, 255, 0.5)" },
+                    { offset: 1, color: "rgba(0, 234, 255, 0)" },
+                  ]),
                 },
-                yAxis: { 
-                    type: 'value', 
-                    axisLabel: { color: '#ccc' },
-                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
-                },
-                series: [{
-                    name: '瞬时量',
-                    type: 'line',
-                    smooth: true,
-                    symbol: 'none',
-                    sampling: 'average',
-                    itemStyle: { color: '#00eaff' },
-                    areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 234, 255, 0.5)' }, { offset: 1, color: 'rgba(0, 234, 255, 0)' }]) } },
-                    data: enterprise.instantHistory
-                }]
-             };
-             
-             // Cumulative Chart (Bar)
-             var optionCumulative = {
-                tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
-                xAxis: { 
-                    type: 'category', 
-                    data: days,
-                    axisLabel: { color: '#ccc' },
-                    axisLine: { lineStyle: { color: '#ffaa00' } }
-                },
-                yAxis: { 
-                    type: 'value', 
-                    axisLabel: { color: '#ccc' },
-                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
-                },
-                series: [{
-                    name: '累计流量',
-                    type: 'bar',
-                    itemStyle: { normal: { color: '#ffaa00', barBorderRadius: [5, 5, 0, 0] } },
-                    data: enterprise.cumulativeHistory
-                }]
-             };
-             
-             myChartInstant.setOption(optionInstant);
-             myChartCumulative.setOption(optionCumulative);
-        }
+              },
+              data: enterprise.instantHistory,
+            },
+          ],
+        };
 
+        // Cumulative Chart (Bar)
+        var optionCumulative = {
+          tooltip: { trigger: "axis" },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            top: "15%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: days,
+            axisLabel: { color: "#ccc" },
+            axisLine: { lineStyle: { color: "#ffaa00" } },
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: { color: "#ccc" },
+            splitLine: { lineStyle: { color: "rgba(255,255,255,0.1)" } },
+          },
+          series: [
+            {
+              name: "累计流量",
+              type: "bar",
+              itemStyle: {
+                normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
+              },
+              data: enterprise.cumulativeHistory,
+            },
+          ],
+        };
+
+        myChartInstant.setOption(optionInstant);
+        myChartCumulative.setOption(optionCumulative);
+      }
     </script>
-</body>
-
+  </body>
+</html>