diff --git a/public/static/libs/mapbox/style/preventionCX.json b/public/static/libs/mapbox/style/preventionCX.json
index ce6ddba..f0a3b1e 100644
--- a/public/static/libs/mapbox/style/preventionCX.json
+++ b/public/static/libs/mapbox/style/preventionCX.json
@@ -2,14 +2,9 @@
   "params": {
     "basemap": "https://supermap2.wh-nf.cn:8090/bm",
     "mvt": "https://supermap0.wh-nf.cn:8090/vt",
-    "sprites": [
-      "/static/libs/mapbox/style/sprite/sprite5"
-    ],
+    "sprites": ["/static/libs/mapbox/style/sprite/sprite5"],
     "init": {
-      "center": [
-        114.312,
-        34.802
-      ],
+      "center": [114.312, 34.802],
       "zoom": 11,
       "style": "/static/libs/mapbox/style/customs/night-style.json"
     },
@@ -35,27 +30,19 @@
       "methods": [
         {
           "name": "shape",
-          "params": [
-            "circle"
-          ]
+          "params": ["circle"]
         },
         {
           "name": "color",
-          "params": [
-            "rgba(255,0,0,1.0)"
-          ]
+          "params": ["rgba(255,0,0,1.0)"]
         },
         {
           "name": "size",
-          "params": [
-            10
-          ]
+          "params": [10]
         },
         {
           "name": "animate",
-          "params": [
-            true
-          ]
+          "params": [true]
         },
         {
           "name": "style",
@@ -75,11 +62,7 @@
       "type": "symbol",
       "minzoom": 0,
       "maxzoom": 24,
-      "filter": [
-        "in",
-        "type",
-        ""
-      ],
+      "filter": ["in", "type", ""],
       "paint": {
         "text-color": "rgba(255, 255, 255, 1)",
         "text-halo-color": "rgba(14, 139, 90, 1)",
@@ -88,10 +71,7 @@
       "layout": {
         "icon-image": [
           "match",
-          [
-            "get",
-            "type"
-          ],
+          ["get", "type"],
           "YSBZ",
           "rainBengZhan_icon",
           "WSBZ",
@@ -119,142 +99,64 @@
         "icon-anchor": "center",
         "icon-size": 0.8,
         "text-field": "{name}",
-        "text-font": [
-          "KlokanTech Noto Sans Regular"
-        ],
+        "text-font": ["KlokanTech Noto Sans Regular"],
         "text-size": 16,
         "text-line-height": 3,
         "text-anchor": "bottom",
         "text-max-width": 50,
-        "text-offset": [
-          0,
-          -0.8
-        ]
+        "text-offset": [0, -0.8]
       },
       "mType": "geojson"
     }
   ],
-  "orders": [
-    [
-      "poi_label"
-    ],
-    [
-      "place_label_city"
-    ],
-    [
-      "road_major_label"
-    ],
-    [
-      "place_label_other"
-    ],
-    [
-      "point"
-    ]
-  ],
+  "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]],
   "filter": {
     "wsLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
+      "layerName": ["pipeline_info", "pipeline_point"],
       "filter": [
-        [
-          "WS",
-          "HS"
-        ],
-        [
-          "污水点",
-          "合流点"
-        ]
+        ["WS", "HS"],
+        ["污水点", "合流点"]
       ]
     },
     "ysLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
-      "filter": [
-        [
-          "YS"
-        ],
-        [
-          "雨水点"
-        ]
-      ]
+      "layerName": ["pipeline_info", "pipeline_point"],
+      "filter": [["YS"], ["雨水点"]]
     },
     "oldCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["老城区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.926
-        ],
+        "center": [113.933, 30.926],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "southCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "南城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["南城新区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.886
-        ],
+        "center": [113.933, 30.886],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "newCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区"]],
       "easeTo": {
-        "center": [
-          113.983,
-          30.896
-        ],
+        "center": [113.983, 30.896],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "allCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区",
-          "南城新区",
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区", "南城新区", "老城区"]],
       "easeTo": {
-        "center": [
-          113.953,
-          30.906
-        ],
+        "center": [113.953, 30.906],
         "zoom": 13.6,
         "pitch": 55
       }
     }
   }
-}
\ No newline at end of file
+}

diff --git a/public/static/libs/mapbox/style/preventionCX.json b/public/static/libs/mapbox/style/preventionCX.json
index ce6ddba..f0a3b1e 100644
--- a/public/static/libs/mapbox/style/preventionCX.json
+++ b/public/static/libs/mapbox/style/preventionCX.json
@@ -2,14 +2,9 @@
   "params": {
     "basemap": "https://supermap2.wh-nf.cn:8090/bm",
     "mvt": "https://supermap0.wh-nf.cn:8090/vt",
-    "sprites": [
-      "/static/libs/mapbox/style/sprite/sprite5"
-    ],
+    "sprites": ["/static/libs/mapbox/style/sprite/sprite5"],
     "init": {
-      "center": [
-        114.312,
-        34.802
-      ],
+      "center": [114.312, 34.802],
       "zoom": 11,
       "style": "/static/libs/mapbox/style/customs/night-style.json"
     },
@@ -35,27 +30,19 @@
       "methods": [
         {
           "name": "shape",
-          "params": [
-            "circle"
-          ]
+          "params": ["circle"]
         },
         {
           "name": "color",
-          "params": [
-            "rgba(255,0,0,1.0)"
-          ]
+          "params": ["rgba(255,0,0,1.0)"]
         },
         {
           "name": "size",
-          "params": [
-            10
-          ]
+          "params": [10]
         },
         {
           "name": "animate",
-          "params": [
-            true
-          ]
+          "params": [true]
         },
         {
           "name": "style",
@@ -75,11 +62,7 @@
       "type": "symbol",
       "minzoom": 0,
       "maxzoom": 24,
-      "filter": [
-        "in",
-        "type",
-        ""
-      ],
+      "filter": ["in", "type", ""],
       "paint": {
         "text-color": "rgba(255, 255, 255, 1)",
         "text-halo-color": "rgba(14, 139, 90, 1)",
@@ -88,10 +71,7 @@
       "layout": {
         "icon-image": [
           "match",
-          [
-            "get",
-            "type"
-          ],
+          ["get", "type"],
           "YSBZ",
           "rainBengZhan_icon",
           "WSBZ",
@@ -119,142 +99,64 @@
         "icon-anchor": "center",
         "icon-size": 0.8,
         "text-field": "{name}",
-        "text-font": [
-          "KlokanTech Noto Sans Regular"
-        ],
+        "text-font": ["KlokanTech Noto Sans Regular"],
         "text-size": 16,
         "text-line-height": 3,
         "text-anchor": "bottom",
         "text-max-width": 50,
-        "text-offset": [
-          0,
-          -0.8
-        ]
+        "text-offset": [0, -0.8]
       },
       "mType": "geojson"
     }
   ],
-  "orders": [
-    [
-      "poi_label"
-    ],
-    [
-      "place_label_city"
-    ],
-    [
-      "road_major_label"
-    ],
-    [
-      "place_label_other"
-    ],
-    [
-      "point"
-    ]
-  ],
+  "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]],
   "filter": {
     "wsLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
+      "layerName": ["pipeline_info", "pipeline_point"],
       "filter": [
-        [
-          "WS",
-          "HS"
-        ],
-        [
-          "污水点",
-          "合流点"
-        ]
+        ["WS", "HS"],
+        ["污水点", "合流点"]
       ]
     },
     "ysLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
-      "filter": [
-        [
-          "YS"
-        ],
-        [
-          "雨水点"
-        ]
-      ]
+      "layerName": ["pipeline_info", "pipeline_point"],
+      "filter": [["YS"], ["雨水点"]]
     },
     "oldCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["老城区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.926
-        ],
+        "center": [113.933, 30.926],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "southCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "南城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["南城新区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.886
-        ],
+        "center": [113.933, 30.886],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "newCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区"]],
       "easeTo": {
-        "center": [
-          113.983,
-          30.896
-        ],
+        "center": [113.983, 30.896],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "allCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区",
-          "南城新区",
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区", "南城新区", "老城区"]],
       "easeTo": {
-        "center": [
-          113.953,
-          30.906
-        ],
+        "center": [113.953, 30.906],
         "zoom": 13.6,
         "pitch": 55
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index f6a4e6b..a5513af 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -157,6 +157,15 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 30px;
+  .titleBase {
+    width: 100%;
+    height: 34px;
+    line-height: 30px;
+    background: url('@/assets/newImgs/HMScreen/areaBg.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 30px;
+    color: #fff;
+  }
   .part {
     display: flex;
     flex-wrap: wrap;

diff --git a/public/static/libs/mapbox/style/preventionCX.json b/public/static/libs/mapbox/style/preventionCX.json
index ce6ddba..f0a3b1e 100644
--- a/public/static/libs/mapbox/style/preventionCX.json
+++ b/public/static/libs/mapbox/style/preventionCX.json
@@ -2,14 +2,9 @@
   "params": {
     "basemap": "https://supermap2.wh-nf.cn:8090/bm",
     "mvt": "https://supermap0.wh-nf.cn:8090/vt",
-    "sprites": [
-      "/static/libs/mapbox/style/sprite/sprite5"
-    ],
+    "sprites": ["/static/libs/mapbox/style/sprite/sprite5"],
     "init": {
-      "center": [
-        114.312,
-        34.802
-      ],
+      "center": [114.312, 34.802],
       "zoom": 11,
       "style": "/static/libs/mapbox/style/customs/night-style.json"
     },
@@ -35,27 +30,19 @@
       "methods": [
         {
           "name": "shape",
-          "params": [
-            "circle"
-          ]
+          "params": ["circle"]
         },
         {
           "name": "color",
-          "params": [
-            "rgba(255,0,0,1.0)"
-          ]
+          "params": ["rgba(255,0,0,1.0)"]
         },
         {
           "name": "size",
-          "params": [
-            10
-          ]
+          "params": [10]
         },
         {
           "name": "animate",
-          "params": [
-            true
-          ]
+          "params": [true]
         },
         {
           "name": "style",
@@ -75,11 +62,7 @@
       "type": "symbol",
       "minzoom": 0,
       "maxzoom": 24,
-      "filter": [
-        "in",
-        "type",
-        ""
-      ],
+      "filter": ["in", "type", ""],
       "paint": {
         "text-color": "rgba(255, 255, 255, 1)",
         "text-halo-color": "rgba(14, 139, 90, 1)",
@@ -88,10 +71,7 @@
       "layout": {
         "icon-image": [
           "match",
-          [
-            "get",
-            "type"
-          ],
+          ["get", "type"],
           "YSBZ",
           "rainBengZhan_icon",
           "WSBZ",
@@ -119,142 +99,64 @@
         "icon-anchor": "center",
         "icon-size": 0.8,
         "text-field": "{name}",
-        "text-font": [
-          "KlokanTech Noto Sans Regular"
-        ],
+        "text-font": ["KlokanTech Noto Sans Regular"],
         "text-size": 16,
         "text-line-height": 3,
         "text-anchor": "bottom",
         "text-max-width": 50,
-        "text-offset": [
-          0,
-          -0.8
-        ]
+        "text-offset": [0, -0.8]
       },
       "mType": "geojson"
     }
   ],
-  "orders": [
-    [
-      "poi_label"
-    ],
-    [
-      "place_label_city"
-    ],
-    [
-      "road_major_label"
-    ],
-    [
-      "place_label_other"
-    ],
-    [
-      "point"
-    ]
-  ],
+  "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]],
   "filter": {
     "wsLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
+      "layerName": ["pipeline_info", "pipeline_point"],
       "filter": [
-        [
-          "WS",
-          "HS"
-        ],
-        [
-          "污水点",
-          "合流点"
-        ]
+        ["WS", "HS"],
+        ["污水点", "合流点"]
       ]
     },
     "ysLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
-      "filter": [
-        [
-          "YS"
-        ],
-        [
-          "雨水点"
-        ]
-      ]
+      "layerName": ["pipeline_info", "pipeline_point"],
+      "filter": [["YS"], ["雨水点"]]
     },
     "oldCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["老城区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.926
-        ],
+        "center": [113.933, 30.926],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "southCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "南城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["南城新区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.886
-        ],
+        "center": [113.933, 30.886],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "newCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区"]],
       "easeTo": {
-        "center": [
-          113.983,
-          30.896
-        ],
+        "center": [113.983, 30.896],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "allCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区",
-          "南城新区",
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区", "南城新区", "老城区"]],
       "easeTo": {
-        "center": [
-          113.953,
-          30.906
-        ],
+        "center": [113.953, 30.906],
         "zoom": 13.6,
         "pitch": 55
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index f6a4e6b..a5513af 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -157,6 +157,15 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 30px;
+  .titleBase {
+    width: 100%;
+    height: 34px;
+    line-height: 30px;
+    background: url('@/assets/newImgs/HMScreen/areaBg.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 30px;
+    color: #fff;
+  }
   .part {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
index 2874d9b..7fc38e8 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
@@ -2,157 +2,134 @@
   <!-- 年径流污染削减率 -->
   <div class="publicContainer">
     <!-- gis地图 -->
-    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" @map-click="mapClick"></MapBox>
+    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
+
+    <!-- 年份选择 -->
+    <el-select clearable v-model="yearKH" placeholder="请选择年份" disabled class="selYear">
+      <el-option label="2022" value="2022" />
+      <el-option label="2023" value="2023" />
+      <el-option label="2024" value="2024" />
+    </el-select>
 
     <!-- 海绵设施监测详情 -->
-    <el-dialog v-model="dialogShow" title="海绵设施监测点位详情" :modal-append-to-body="false" width="600px">
-      <el-form :inline="true">
-        <el-form-item label="日期" prop="date">
-          <el-date-picker type="daterange" v-model="dateSearch" value-format="YYYY-MM-DD" placeholder="请选择"></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="chartHMXJ" style="width: 100%; height: 300px"></div>
+    <el-dialog v-model="dialogShow" title="海绵项目监测分析详情" :modal-append-to-body="false" width="600px">
+      <div class="publicDetail">
+        <h3 class="titleBase">基础信息</h3>
+        <div class="part">
+          <div class="title">项目名称:</div>
+          <div class="content">{{ projectDetail.name }}</div>
+        </div>
+        <div class="part">
+          <div class="title">统计年份:</div>
+          <div class="content">{{ projectDetail.year }}</div>
+        </div>
+        <div class="part">
+          <div class="title">降雨总量(mm):</div>
+          <div class="content">{{ projectDetail.rainTotal }}</div>
+        </div>
+        <div class="part">
+          <div class="title">占地面积(㎡):</div>
+          <div class="content">{{ projectDetail.area }}</div>
+        </div>
+
+        <h3 class="titleBase">水量监测</h3>
+        <div class="part">
+          <div class="title">项目外排总SS负荷量(g):</div>
+          <div class="content">{{ projectDetail.wpzjl }}</div>
+        </div>
+
+        <h3 class="titleBase">设计指标</h3>
+        <div class="part">
+          <div class="title">设计降雨量(mm):</div>
+          <div class="content">{{ projectDetail.sjRain }}</div>
+        </div>
+        <div class="part">
+          <div class="title">有效面积(㎡):</div>
+          <div class="content">{{ projectDetail.sjArea }}</div>
+        </div>
+        <div class="part">
+          <div class="title">设计年径流污染削减率(%):</div>
+          <div class="content">{{ projectDetail.sjjlzl }}</div>
+        </div>
+
+        <h3 class="titleBase">效果评价</h3>
+        <div class="part">
+          <div class="title">实际年径流污染削减率(%):</div>
+          <div class="content">{{ projectDetail.jlzlSJ }}</div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
-import optionChart from './chartOption.js';
-import YSFQ3 from '@/assets/geojson/kaifeng/kaifengPSFQ3.json';
+import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
-import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
-import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
-import bus from '@/bus';
+import yuanTous from '@/assets/images/gisMap/in.png';
+
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(false);
-const charts = ref(null);
 const mapboxTimer = ref(null);
-const dateSearch = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const yearKH = ref('2024');
+const projectArr = ref([
+  {
+    name: '汴京路管网及道路海绵化改造',
+    geometry: 'POINT(114.374417 34.793947)',
+    area: 110330.52,
+    sjArea: 53417.89,
+    year: 2024,
+    rainTotal: 627.1,
+    wpzjl: 1104.54,
+    sjRain: 54.98,
+    sjjlzl: 40,
+    jlzlSJ: 48.4,
+  },
+]);
+const projectDetail = ref({});
 
-// 历史数据搜索
-function handleQuery() {
-  setTimeout(() => {
-    initChart();
-  });
-}
-
-// echarts初始化
-function initChart() {
-  charts.value && charts.value.dispose();
-  charts.value = proxy.echarts.init(document.getElementById('chartHMXJ'));
-  optionChart.option.xAxis.data = ['2024-07-24 00:00:00', '2024-07-26 00:10:00', '2024-07-29 00:20:00'];
-  // optionChart.option.series[0].name = 'SS(mg/L)';
-  // optionChart.option.series[0].data = [12, 9, 20]; //降雨量
-  // optionChart.option.series[1].name = '降雨量(mm)';
-  // optionChart.option.series[1].data = [230, 190, 132]; //进口SS
-  optionChart.option.series = [
-    {
-      name: '降雨量(mm)',
-      data: [230, 190, 132],
-      type: 'bar',
-      barWidth: 10,
-      yAxisIndex: 0,
-    },
-    {
-      name: 'SS(mg/L)',
-      data: [12, 9, 20],
-      type: 'line',
-      smooth: true,
-      yAxisIndex: 1,
-      symbolSize: 8,
-    },
-  ];
-  optionChart.option.yAxis = [
-    {
-      name: '降雨量(mm)',
-      type: 'value',
-      inverse: true, //翻转
-      nameLocation: 'start', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-    },
-    {
-      name: 'SS(mg/L)',
-      type: 'value',
-      nameLocation: 'end', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-    },
-  ];
-  // optionChart.option.series[2].name = '出口SS';
-  // optionChart.option.series[2].data = [110, 90, 103]; //出口SS
-  // 设置鼠标滚轮放大缩小展示数据区间
-  // optionChart.option.dataZoom = [{ type: 'inside', startValue: optionChart.option.xAxis.data[optionChart.option.xAxis.data.length / 2] }];
-  if (optionChart.option.xAxis.data.length > 0) {
-    optionChart.option.graphic.invisible = true; //暂无数据
-  } else {
-    optionChart.option.graphic.invisible = false; //暂无数据
-  }
-  charts.value.clear();
-  console.log(optionChart.option, 'optionChart.option');
-  charts.value.setOption(optionChart.option);
-}
-//添加海绵设施
+//添加海绵项目
 const addFacilityLayer = async () => {
-  let params = {};
-  let projectStationRes = await queryProjectStation(params);
-  if (projectStationRes && projectStationRes.code == 200) {
-    //projectStation = this.getGeojsonData(projectStationRes.data);
-    let facilityFeaturcs = [];
-    projectStationRes.data.forEach(data => {
-      facilityFeaturcs.push(turf.point(data.lonlat.split(',').map(Number), data));
-    });
-    let facilityGeojson = {
-      type: 'FeatureCollection',
-      features: facilityFeaturcs,
-    };
-    console.log('facilityGeojson--', facilityGeojson);
-    bus.emit('setLegendData', [{ data: facilityGeojson, layername: 'spongeFacility', type: 'point' }]);
-    bus.emit('setLayerVisible', { layername: 'spongeFacility', isCheck: true });
-  }
-};
-//地图点击事件
-const mapClick = (point, properties) => {
-  console.log('point', point);
-  console.log('properties', properties);
-  dialogShow.value = true;
-  setTimeout(() => {
-    initChart();
+  let point = { type: 'FeatureCollection', features: [] };
+  projectArr.value.map(item => {
+    let projectGeojson = { geometry: Terraformer.WKT.parse(item.geometry), properties: item };
+    point.features.push(projectGeojson);
+    addPointProject(newfiberMapbox.map, point, 'projectNjlwrxj');
   });
 };
+// 添加点位方法
+function addPointProject(map, data, layerId) {
+  newfiberMapbox.map.loadImage(yuanTous, (error, image) => {
+    if (error) throw error;
+    !!!map.getSource(layerId) && map.addImage(layerId, image);
+    !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
+    !!!map.getLayer(layerId) &&
+      map.addLayer({
+        id: layerId,
+        type: 'symbol',
+        source: layerId,
+        layout: {
+          'text-field': ['get', 'name'],
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 2,
+          'text-anchor': 'bottom',
+          'text-offset': [0, 3],
+          'text-max-width': 50,
+          'icon-image': layerId,
+          'icon-size': 0.15,
+        },
+        paint: {
+          'text-color': 'rgba(127, 11, 147, 1)',
+          'text-halo-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-width': 2,
+        },
+      });
+  });
+}
+
 onMounted(() => {
-  handleQuery();
-  YSFQ3.features.forEach(element => {
+  YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
   //添加排水分区
@@ -160,22 +137,43 @@
     if (!newfiberMapbox) {
       return;
     } else {
-      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ3);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ2);
       newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
       clearInterval(mapboxTimer.value);
     }
   }, 1000);
+
   setTimeout(() => {
-    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
-    //添加海绵设施
+    // 添加海绵项目
     addFacilityLayer();
-  }, 4000);
+    // 地图点击事件
+    newfiberMapbox.map.on('click', e => {
+      let clickfeature = newfiberMapbox.map
+        .queryRenderedFeatures([
+          [e.point.x - 10 / 2, e.point.y - 10 / 2],
+          [e.point.x + 10 / 2, e.point.y + 10 / 2],
+        ])
+        .filter(i => i.layer.id == 'projectNjlwrxj');
+      if (clickfeature.length == 0) return;
+      projectDetail.value = clickfeature[0].properties; //项目介绍详情
+      dialogShow.value = true;
+    });
+  }, 1000);
 });
 onBeforeUnmount(() => {
-  YSFQ3.features.forEach(element => {
+  YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name.split('/')[0];
   });
+  if (mapboxTimer.value) clearInterval(mapboxTimer.value);
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.selYear {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 99;
+  width: 100px;
+}
+</style>

diff --git a/public/static/libs/mapbox/style/preventionCX.json b/public/static/libs/mapbox/style/preventionCX.json
index ce6ddba..f0a3b1e 100644
--- a/public/static/libs/mapbox/style/preventionCX.json
+++ b/public/static/libs/mapbox/style/preventionCX.json
@@ -2,14 +2,9 @@
   "params": {
     "basemap": "https://supermap2.wh-nf.cn:8090/bm",
     "mvt": "https://supermap0.wh-nf.cn:8090/vt",
-    "sprites": [
-      "/static/libs/mapbox/style/sprite/sprite5"
-    ],
+    "sprites": ["/static/libs/mapbox/style/sprite/sprite5"],
     "init": {
-      "center": [
-        114.312,
-        34.802
-      ],
+      "center": [114.312, 34.802],
       "zoom": 11,
       "style": "/static/libs/mapbox/style/customs/night-style.json"
     },
@@ -35,27 +30,19 @@
       "methods": [
         {
           "name": "shape",
-          "params": [
-            "circle"
-          ]
+          "params": ["circle"]
         },
         {
           "name": "color",
-          "params": [
-            "rgba(255,0,0,1.0)"
-          ]
+          "params": ["rgba(255,0,0,1.0)"]
         },
         {
           "name": "size",
-          "params": [
-            10
-          ]
+          "params": [10]
         },
         {
           "name": "animate",
-          "params": [
-            true
-          ]
+          "params": [true]
         },
         {
           "name": "style",
@@ -75,11 +62,7 @@
       "type": "symbol",
       "minzoom": 0,
       "maxzoom": 24,
-      "filter": [
-        "in",
-        "type",
-        ""
-      ],
+      "filter": ["in", "type", ""],
       "paint": {
         "text-color": "rgba(255, 255, 255, 1)",
         "text-halo-color": "rgba(14, 139, 90, 1)",
@@ -88,10 +71,7 @@
       "layout": {
         "icon-image": [
           "match",
-          [
-            "get",
-            "type"
-          ],
+          ["get", "type"],
           "YSBZ",
           "rainBengZhan_icon",
           "WSBZ",
@@ -119,142 +99,64 @@
         "icon-anchor": "center",
         "icon-size": 0.8,
         "text-field": "{name}",
-        "text-font": [
-          "KlokanTech Noto Sans Regular"
-        ],
+        "text-font": ["KlokanTech Noto Sans Regular"],
         "text-size": 16,
         "text-line-height": 3,
         "text-anchor": "bottom",
         "text-max-width": 50,
-        "text-offset": [
-          0,
-          -0.8
-        ]
+        "text-offset": [0, -0.8]
       },
       "mType": "geojson"
     }
   ],
-  "orders": [
-    [
-      "poi_label"
-    ],
-    [
-      "place_label_city"
-    ],
-    [
-      "road_major_label"
-    ],
-    [
-      "place_label_other"
-    ],
-    [
-      "point"
-    ]
-  ],
+  "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]],
   "filter": {
     "wsLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
+      "layerName": ["pipeline_info", "pipeline_point"],
       "filter": [
-        [
-          "WS",
-          "HS"
-        ],
-        [
-          "污水点",
-          "合流点"
-        ]
+        ["WS", "HS"],
+        ["污水点", "合流点"]
       ]
     },
     "ysLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
-      "filter": [
-        [
-          "YS"
-        ],
-        [
-          "雨水点"
-        ]
-      ]
+      "layerName": ["pipeline_info", "pipeline_point"],
+      "filter": [["YS"], ["雨水点"]]
     },
     "oldCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["老城区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.926
-        ],
+        "center": [113.933, 30.926],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "southCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "南城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["南城新区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.886
-        ],
+        "center": [113.933, 30.886],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "newCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区"]],
       "easeTo": {
-        "center": [
-          113.983,
-          30.896
-        ],
+        "center": [113.983, 30.896],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "allCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区",
-          "南城新区",
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区", "南城新区", "老城区"]],
       "easeTo": {
-        "center": [
-          113.953,
-          30.906
-        ],
+        "center": [113.953, 30.906],
         "zoom": 13.6,
         "pitch": 55
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index f6a4e6b..a5513af 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -157,6 +157,15 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 30px;
+  .titleBase {
+    width: 100%;
+    height: 34px;
+    line-height: 30px;
+    background: url('@/assets/newImgs/HMScreen/areaBg.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 30px;
+    color: #fff;
+  }
   .part {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
index 2874d9b..7fc38e8 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
@@ -2,157 +2,134 @@
   <!-- 年径流污染削减率 -->
   <div class="publicContainer">
     <!-- gis地图 -->
-    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" @map-click="mapClick"></MapBox>
+    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
+
+    <!-- 年份选择 -->
+    <el-select clearable v-model="yearKH" placeholder="请选择年份" disabled class="selYear">
+      <el-option label="2022" value="2022" />
+      <el-option label="2023" value="2023" />
+      <el-option label="2024" value="2024" />
+    </el-select>
 
     <!-- 海绵设施监测详情 -->
-    <el-dialog v-model="dialogShow" title="海绵设施监测点位详情" :modal-append-to-body="false" width="600px">
-      <el-form :inline="true">
-        <el-form-item label="日期" prop="date">
-          <el-date-picker type="daterange" v-model="dateSearch" value-format="YYYY-MM-DD" placeholder="请选择"></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="chartHMXJ" style="width: 100%; height: 300px"></div>
+    <el-dialog v-model="dialogShow" title="海绵项目监测分析详情" :modal-append-to-body="false" width="600px">
+      <div class="publicDetail">
+        <h3 class="titleBase">基础信息</h3>
+        <div class="part">
+          <div class="title">项目名称:</div>
+          <div class="content">{{ projectDetail.name }}</div>
+        </div>
+        <div class="part">
+          <div class="title">统计年份:</div>
+          <div class="content">{{ projectDetail.year }}</div>
+        </div>
+        <div class="part">
+          <div class="title">降雨总量(mm):</div>
+          <div class="content">{{ projectDetail.rainTotal }}</div>
+        </div>
+        <div class="part">
+          <div class="title">占地面积(㎡):</div>
+          <div class="content">{{ projectDetail.area }}</div>
+        </div>
+
+        <h3 class="titleBase">水量监测</h3>
+        <div class="part">
+          <div class="title">项目外排总SS负荷量(g):</div>
+          <div class="content">{{ projectDetail.wpzjl }}</div>
+        </div>
+
+        <h3 class="titleBase">设计指标</h3>
+        <div class="part">
+          <div class="title">设计降雨量(mm):</div>
+          <div class="content">{{ projectDetail.sjRain }}</div>
+        </div>
+        <div class="part">
+          <div class="title">有效面积(㎡):</div>
+          <div class="content">{{ projectDetail.sjArea }}</div>
+        </div>
+        <div class="part">
+          <div class="title">设计年径流污染削减率(%):</div>
+          <div class="content">{{ projectDetail.sjjlzl }}</div>
+        </div>
+
+        <h3 class="titleBase">效果评价</h3>
+        <div class="part">
+          <div class="title">实际年径流污染削减率(%):</div>
+          <div class="content">{{ projectDetail.jlzlSJ }}</div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
-import optionChart from './chartOption.js';
-import YSFQ3 from '@/assets/geojson/kaifeng/kaifengPSFQ3.json';
+import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
-import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
-import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
-import bus from '@/bus';
+import yuanTous from '@/assets/images/gisMap/in.png';
+
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(false);
-const charts = ref(null);
 const mapboxTimer = ref(null);
-const dateSearch = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const yearKH = ref('2024');
+const projectArr = ref([
+  {
+    name: '汴京路管网及道路海绵化改造',
+    geometry: 'POINT(114.374417 34.793947)',
+    area: 110330.52,
+    sjArea: 53417.89,
+    year: 2024,
+    rainTotal: 627.1,
+    wpzjl: 1104.54,
+    sjRain: 54.98,
+    sjjlzl: 40,
+    jlzlSJ: 48.4,
+  },
+]);
+const projectDetail = ref({});
 
-// 历史数据搜索
-function handleQuery() {
-  setTimeout(() => {
-    initChart();
-  });
-}
-
-// echarts初始化
-function initChart() {
-  charts.value && charts.value.dispose();
-  charts.value = proxy.echarts.init(document.getElementById('chartHMXJ'));
-  optionChart.option.xAxis.data = ['2024-07-24 00:00:00', '2024-07-26 00:10:00', '2024-07-29 00:20:00'];
-  // optionChart.option.series[0].name = 'SS(mg/L)';
-  // optionChart.option.series[0].data = [12, 9, 20]; //降雨量
-  // optionChart.option.series[1].name = '降雨量(mm)';
-  // optionChart.option.series[1].data = [230, 190, 132]; //进口SS
-  optionChart.option.series = [
-    {
-      name: '降雨量(mm)',
-      data: [230, 190, 132],
-      type: 'bar',
-      barWidth: 10,
-      yAxisIndex: 0,
-    },
-    {
-      name: 'SS(mg/L)',
-      data: [12, 9, 20],
-      type: 'line',
-      smooth: true,
-      yAxisIndex: 1,
-      symbolSize: 8,
-    },
-  ];
-  optionChart.option.yAxis = [
-    {
-      name: '降雨量(mm)',
-      type: 'value',
-      inverse: true, //翻转
-      nameLocation: 'start', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-    },
-    {
-      name: 'SS(mg/L)',
-      type: 'value',
-      nameLocation: 'end', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-    },
-  ];
-  // optionChart.option.series[2].name = '出口SS';
-  // optionChart.option.series[2].data = [110, 90, 103]; //出口SS
-  // 设置鼠标滚轮放大缩小展示数据区间
-  // optionChart.option.dataZoom = [{ type: 'inside', startValue: optionChart.option.xAxis.data[optionChart.option.xAxis.data.length / 2] }];
-  if (optionChart.option.xAxis.data.length > 0) {
-    optionChart.option.graphic.invisible = true; //暂无数据
-  } else {
-    optionChart.option.graphic.invisible = false; //暂无数据
-  }
-  charts.value.clear();
-  console.log(optionChart.option, 'optionChart.option');
-  charts.value.setOption(optionChart.option);
-}
-//添加海绵设施
+//添加海绵项目
 const addFacilityLayer = async () => {
-  let params = {};
-  let projectStationRes = await queryProjectStation(params);
-  if (projectStationRes && projectStationRes.code == 200) {
-    //projectStation = this.getGeojsonData(projectStationRes.data);
-    let facilityFeaturcs = [];
-    projectStationRes.data.forEach(data => {
-      facilityFeaturcs.push(turf.point(data.lonlat.split(',').map(Number), data));
-    });
-    let facilityGeojson = {
-      type: 'FeatureCollection',
-      features: facilityFeaturcs,
-    };
-    console.log('facilityGeojson--', facilityGeojson);
-    bus.emit('setLegendData', [{ data: facilityGeojson, layername: 'spongeFacility', type: 'point' }]);
-    bus.emit('setLayerVisible', { layername: 'spongeFacility', isCheck: true });
-  }
-};
-//地图点击事件
-const mapClick = (point, properties) => {
-  console.log('point', point);
-  console.log('properties', properties);
-  dialogShow.value = true;
-  setTimeout(() => {
-    initChart();
+  let point = { type: 'FeatureCollection', features: [] };
+  projectArr.value.map(item => {
+    let projectGeojson = { geometry: Terraformer.WKT.parse(item.geometry), properties: item };
+    point.features.push(projectGeojson);
+    addPointProject(newfiberMapbox.map, point, 'projectNjlwrxj');
   });
 };
+// 添加点位方法
+function addPointProject(map, data, layerId) {
+  newfiberMapbox.map.loadImage(yuanTous, (error, image) => {
+    if (error) throw error;
+    !!!map.getSource(layerId) && map.addImage(layerId, image);
+    !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
+    !!!map.getLayer(layerId) &&
+      map.addLayer({
+        id: layerId,
+        type: 'symbol',
+        source: layerId,
+        layout: {
+          'text-field': ['get', 'name'],
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 2,
+          'text-anchor': 'bottom',
+          'text-offset': [0, 3],
+          'text-max-width': 50,
+          'icon-image': layerId,
+          'icon-size': 0.15,
+        },
+        paint: {
+          'text-color': 'rgba(127, 11, 147, 1)',
+          'text-halo-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-width': 2,
+        },
+      });
+  });
+}
+
 onMounted(() => {
-  handleQuery();
-  YSFQ3.features.forEach(element => {
+  YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
   //添加排水分区
@@ -160,22 +137,43 @@
     if (!newfiberMapbox) {
       return;
     } else {
-      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ3);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ2);
       newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
       clearInterval(mapboxTimer.value);
     }
   }, 1000);
+
   setTimeout(() => {
-    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
-    //添加海绵设施
+    // 添加海绵项目
     addFacilityLayer();
-  }, 4000);
+    // 地图点击事件
+    newfiberMapbox.map.on('click', e => {
+      let clickfeature = newfiberMapbox.map
+        .queryRenderedFeatures([
+          [e.point.x - 10 / 2, e.point.y - 10 / 2],
+          [e.point.x + 10 / 2, e.point.y + 10 / 2],
+        ])
+        .filter(i => i.layer.id == 'projectNjlwrxj');
+      if (clickfeature.length == 0) return;
+      projectDetail.value = clickfeature[0].properties; //项目介绍详情
+      dialogShow.value = true;
+    });
+  }, 1000);
 });
 onBeforeUnmount(() => {
-  YSFQ3.features.forEach(element => {
+  YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name.split('/')[0];
   });
+  if (mapboxTimer.value) clearInterval(mapboxTimer.value);
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.selYear {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 99;
+  width: 100px;
+}
+</style>
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue b/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
index cb4ad75..e9a0e3b 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
@@ -2,150 +2,133 @@
   <!-- 年径流总量控制率 -->
   <div class="publicContainer">
     <!-- gis地图 -->
-    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" @map-click="mapClick"></MapBox>
+    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
+
+    <!-- 年份选择 -->
+    <el-select clearable v-model="yearKH" placeholder="请选择年份" disabled class="selYear">
+      <el-option label="2022" value="2022" />
+      <el-option label="2023" value="2023" />
+      <el-option label="2024" value="2024" />
+    </el-select>
 
     <!-- 海绵设施监测详情 -->
-    <el-dialog v-model="dialogShow" title="海绵设施监测点位详情" :modal-append-to-body="false" width="600px">
-      <el-form :inline="true">
-        <el-form-item label="日期" prop="date">
-          <el-date-picker type="daterange" v-model="dateSearch" value-format="YYYY-MM-DD" placeholder="请选择"></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="chartHMJC" style="width: 100%; height: 300px"></div>
+    <el-dialog v-model="dialogShow" title="海绵项目监测分析详情" :modal-append-to-body="false" width="600px">
+      <div class="publicDetail">
+        <h3 class="titleBase">基础信息</h3>
+        <div class="part">
+          <div class="title">项目名称:</div>
+          <div class="content">{{ projectDetail.name }}</div>
+        </div>
+        <div class="part">
+          <div class="title">统计年份:</div>
+          <div class="content">{{ projectDetail.year }}</div>
+        </div>
+        <div class="part">
+          <div class="title">降雨总量(mm):</div>
+          <div class="content">{{ projectDetail.rainTotal }}</div>
+        </div>
+        <div class="part">
+          <div class="title">占地面积(㎡):</div>
+          <div class="content">{{ projectDetail.area }}</div>
+        </div>
+
+        <h3 class="titleBase">水量监测</h3>
+        <div class="part">
+          <div class="title">项目外排总径流体积(m³):</div>
+          <div class="content">{{ projectDetail.wpzjl }}</div>
+        </div>
+
+        <h3 class="titleBase">设计指标</h3>
+        <div class="part">
+          <div class="title">设计降雨量(mm):</div>
+          <div class="content">{{ projectDetail.sjRain }}</div>
+        </div>
+        <div class="part">
+          <div class="title">计算径流面积(㎡):</div>
+          <div class="content">{{ projectDetail.sjArea }}</div>
+        </div>
+        <div class="part">
+          <div class="title">设计年径流总量控制率(%):</div>
+          <div class="content">{{ projectDetail.sjjlzl }}</div>
+        </div>
+
+        <h3 class="titleBase">效果评价</h3>
+        <div class="part">
+          <div class="title">实际年径流总量控制率(%):</div>
+          <div class="content">{{ projectDetail.jlzlSJ }}</div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
-import optionChart from './chartOption.js';
 import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
-import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
-import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
-import bus from '@/bus';
-import { onBeforeUnmount } from 'vue';
+import yuanTous from '@/assets/images/gisMap/in.png';
+
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(false);
-const charts = ref(null);
 const mapboxTimer = ref(null);
-const dateSearch = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const yearKH = ref('2024');
+const projectArr = ref([
+  {
+    name: '汴京路管网及道路海绵化改造',
+    geometry: 'POINT(114.374417 34.793947)',
+    area: 110330.52,
+    sjArea: 85635.45,
+    year: 2024,
+    rainTotal: 627.1,
+    wpzjl: 1407.78,
+    sjRain: 54.62,
+    sjjlzl: 90,
+    jlzlSJ: 90,
+  },
+]);
+const projectDetail = ref({});
 
-// 历史数据搜索
-function handleQuery() {
-  setTimeout(() => {
-    initChart();
-  });
-}
-
-// echarts初始化
-function initChart() {
-  charts.value && charts.value.dispose();
-  charts.value = proxy.echarts.init(document.getElementById('chartHMJC'));
-  optionChart.option.xAxis.data = ['2024-07-24 00:00:00', '2024-07-26 00:10:00', '2024-07-29 00:20:00'];
-  optionChart.option.series = [
-    {
-      name: '降雨量(mm)',
-      data: [230, 190, 132],
-      type: 'bar',
-      barWidth: 10,
-      yAxisIndex: 0,
-    },
-    {
-      name: '流量(m³/s)',
-      data: [12, 9, 20],
-      type: 'line',
-      smooth: true,
-      yAxisIndex: 1,
-      symbolSize: 8,
-    },
-  ];
-  optionChart.option.yAxis = [
-    {
-      name: '降雨量(mm)',
-      type: 'value',
-      inverse: true, //翻转
-      nameLocation: 'start', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-    },
-    {
-      name: '流量(m³/s)',
-      type: 'value',
-      nameLocation: 'end', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-    },
-  ];
-  // 设置鼠标滚轮放大缩小展示数据区间
-  // optionChart.option.dataZoom = [{ type: 'inside', startValue: optionChart.option.xAxis.data[optionChart.option.xAxis.data.length / 2] }];
-  if (optionChart.option.xAxis.data.length > 0) {
-    optionChart.option.graphic.invisible = true; //暂无数据
-  } else {
-    optionChart.option.graphic.invisible = false; //暂无数据
-  }
-  charts.value.clear();
-  charts.value.setOption(optionChart.option);
-}
-//添加海绵设施
+//添加海绵项目
 const addFacilityLayer = async () => {
-  let params = {};
-  let projectStationRes = await queryProjectStation(params);
-  if (projectStationRes && projectStationRes.code == 200) {
-    //projectStation = this.getGeojsonData(projectStationRes.data);
-    let facilityFeaturcs = [];
-    projectStationRes.data.forEach(data => {
-      facilityFeaturcs.push(turf.point(data.lonlat.split(',').map(Number), data));
-    });
-    let facilityGeojson = {
-      type: 'FeatureCollection',
-      features: facilityFeaturcs,
-    };
-    console.log('facilityGeojson--', facilityGeojson);
-    bus.emit('setLegendData', [{ data: facilityGeojson, layername: 'spongeFacility', type: 'point' }]);
-    bus.emit('setLayerVisible', { layername: 'spongeFacility', isCheck: true });
-  }
-};
-//地图点击事件
-const mapClick = (point, properties) => {
-  console.log('point', point);
-  console.log('properties', properties);
-  dialogShow.value = true;
-  setTimeout(() => {
-    initChart();
+  let point = { type: 'FeatureCollection', features: [] };
+  projectArr.value.map(item => {
+    let projectGeojson = { geometry: Terraformer.WKT.parse(item.geometry), properties: item };
+    point.features.push(projectGeojson);
+    addPointProject(newfiberMapbox.map, point, 'projectNjlzl');
   });
 };
+// 添加点位方法
+function addPointProject(map, data, layerId) {
+  newfiberMapbox.map.loadImage(yuanTous, (error, image) => {
+    if (error) throw error;
+    !!!map.getSource(layerId) && map.addImage(layerId, image);
+    !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
+    !!!map.getLayer(layerId) &&
+      map.addLayer({
+        id: layerId,
+        type: 'symbol',
+        source: layerId,
+        layout: {
+          'text-field': ['get', 'name'],
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 2,
+          'text-anchor': 'bottom',
+          'text-offset': [0, 3],
+          'text-max-width': 50,
+          'icon-image': layerId,
+          'icon-size': 0.15,
+        },
+        paint: {
+          'text-color': 'rgba(127, 11, 147, 1)',
+          'text-halo-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-width': 2,
+        },
+      });
+  });
+}
+
 onMounted(() => {
-  handleQuery();
   YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
@@ -161,16 +144,36 @@
   }, 1000);
 
   setTimeout(() => {
-    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
-    //添加海绵设施
+    // 添加海绵项目
     addFacilityLayer();
-  }, 4000);
+    // 地图点击事件
+    newfiberMapbox.map.on('click', e => {
+      let clickfeature = newfiberMapbox.map
+        .queryRenderedFeatures([
+          [e.point.x - 10 / 2, e.point.y - 10 / 2],
+          [e.point.x + 10 / 2, e.point.y + 10 / 2],
+        ])
+        .filter(i => i.layer.id == 'projectNjlzl');
+      if (clickfeature.length == 0) return;
+      projectDetail.value = clickfeature[0].properties; //项目介绍详情
+      dialogShow.value = true;
+    });
+  }, 1000);
 });
 onBeforeUnmount(() => {
   YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name.split('/')[0];
   });
+  if (mapboxTimer.value) clearInterval(mapboxTimer.value);
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.selYear {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 99;
+  width: 100px;
+}
+</style>

diff --git a/public/static/libs/mapbox/style/preventionCX.json b/public/static/libs/mapbox/style/preventionCX.json
index ce6ddba..f0a3b1e 100644
--- a/public/static/libs/mapbox/style/preventionCX.json
+++ b/public/static/libs/mapbox/style/preventionCX.json
@@ -2,14 +2,9 @@
   "params": {
     "basemap": "https://supermap2.wh-nf.cn:8090/bm",
     "mvt": "https://supermap0.wh-nf.cn:8090/vt",
-    "sprites": [
-      "/static/libs/mapbox/style/sprite/sprite5"
-    ],
+    "sprites": ["/static/libs/mapbox/style/sprite/sprite5"],
     "init": {
-      "center": [
-        114.312,
-        34.802
-      ],
+      "center": [114.312, 34.802],
       "zoom": 11,
       "style": "/static/libs/mapbox/style/customs/night-style.json"
     },
@@ -35,27 +30,19 @@
       "methods": [
         {
           "name": "shape",
-          "params": [
-            "circle"
-          ]
+          "params": ["circle"]
         },
         {
           "name": "color",
-          "params": [
-            "rgba(255,0,0,1.0)"
-          ]
+          "params": ["rgba(255,0,0,1.0)"]
         },
         {
           "name": "size",
-          "params": [
-            10
-          ]
+          "params": [10]
         },
         {
           "name": "animate",
-          "params": [
-            true
-          ]
+          "params": [true]
         },
         {
           "name": "style",
@@ -75,11 +62,7 @@
       "type": "symbol",
       "minzoom": 0,
       "maxzoom": 24,
-      "filter": [
-        "in",
-        "type",
-        ""
-      ],
+      "filter": ["in", "type", ""],
       "paint": {
         "text-color": "rgba(255, 255, 255, 1)",
         "text-halo-color": "rgba(14, 139, 90, 1)",
@@ -88,10 +71,7 @@
       "layout": {
         "icon-image": [
           "match",
-          [
-            "get",
-            "type"
-          ],
+          ["get", "type"],
           "YSBZ",
           "rainBengZhan_icon",
           "WSBZ",
@@ -119,142 +99,64 @@
         "icon-anchor": "center",
         "icon-size": 0.8,
         "text-field": "{name}",
-        "text-font": [
-          "KlokanTech Noto Sans Regular"
-        ],
+        "text-font": ["KlokanTech Noto Sans Regular"],
         "text-size": 16,
         "text-line-height": 3,
         "text-anchor": "bottom",
         "text-max-width": 50,
-        "text-offset": [
-          0,
-          -0.8
-        ]
+        "text-offset": [0, -0.8]
       },
       "mType": "geojson"
     }
   ],
-  "orders": [
-    [
-      "poi_label"
-    ],
-    [
-      "place_label_city"
-    ],
-    [
-      "road_major_label"
-    ],
-    [
-      "place_label_other"
-    ],
-    [
-      "point"
-    ]
-  ],
+  "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]],
   "filter": {
     "wsLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
+      "layerName": ["pipeline_info", "pipeline_point"],
       "filter": [
-        [
-          "WS",
-          "HS"
-        ],
-        [
-          "污水点",
-          "合流点"
-        ]
+        ["WS", "HS"],
+        ["污水点", "合流点"]
       ]
     },
     "ysLine1": {
-      "layerName": [
-        "pipeline_info",
-        "pipeline_point"
-      ],
-      "filter": [
-        [
-          "YS"
-        ],
-        [
-          "雨水点"
-        ]
-      ]
+      "layerName": ["pipeline_info", "pipeline_point"],
+      "filter": [["YS"], ["雨水点"]]
     },
     "oldCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["老城区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.926
-        ],
+        "center": [113.933, 30.926],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "southCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "南城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["南城新区"]],
       "easeTo": {
-        "center": [
-          113.933,
-          30.886
-        ],
+        "center": [113.933, 30.886],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "newCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区"]],
       "easeTo": {
-        "center": [
-          113.983,
-          30.896
-        ],
+        "center": [113.983, 30.896],
         "zoom": 13.6,
         "pitch": 55
       }
     },
     "allCity": {
-      "layerName": [
-        "city_boundary"
-      ],
-      "filter": [
-        [
-          "东城新区",
-          "南城新区",
-          "老城区"
-        ]
-      ],
+      "layerName": ["city_boundary"],
+      "filter": [["东城新区", "南城新区", "老城区"]],
       "easeTo": {
-        "center": [
-          113.953,
-          30.906
-        ],
+        "center": [113.953, 30.906],
         "zoom": 13.6,
         "pitch": 55
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index f6a4e6b..a5513af 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -157,6 +157,15 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 30px;
+  .titleBase {
+    width: 100%;
+    height: 34px;
+    line-height: 30px;
+    background: url('@/assets/newImgs/HMScreen/areaBg.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 30px;
+    color: #fff;
+  }
   .part {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
index 2874d9b..7fc38e8 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
@@ -2,157 +2,134 @@
   <!-- 年径流污染削减率 -->
   <div class="publicContainer">
     <!-- gis地图 -->
-    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" @map-click="mapClick"></MapBox>
+    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
+
+    <!-- 年份选择 -->
+    <el-select clearable v-model="yearKH" placeholder="请选择年份" disabled class="selYear">
+      <el-option label="2022" value="2022" />
+      <el-option label="2023" value="2023" />
+      <el-option label="2024" value="2024" />
+    </el-select>
 
     <!-- 海绵设施监测详情 -->
-    <el-dialog v-model="dialogShow" title="海绵设施监测点位详情" :modal-append-to-body="false" width="600px">
-      <el-form :inline="true">
-        <el-form-item label="日期" prop="date">
-          <el-date-picker type="daterange" v-model="dateSearch" value-format="YYYY-MM-DD" placeholder="请选择"></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="chartHMXJ" style="width: 100%; height: 300px"></div>
+    <el-dialog v-model="dialogShow" title="海绵项目监测分析详情" :modal-append-to-body="false" width="600px">
+      <div class="publicDetail">
+        <h3 class="titleBase">基础信息</h3>
+        <div class="part">
+          <div class="title">项目名称:</div>
+          <div class="content">{{ projectDetail.name }}</div>
+        </div>
+        <div class="part">
+          <div class="title">统计年份:</div>
+          <div class="content">{{ projectDetail.year }}</div>
+        </div>
+        <div class="part">
+          <div class="title">降雨总量(mm):</div>
+          <div class="content">{{ projectDetail.rainTotal }}</div>
+        </div>
+        <div class="part">
+          <div class="title">占地面积(㎡):</div>
+          <div class="content">{{ projectDetail.area }}</div>
+        </div>
+
+        <h3 class="titleBase">水量监测</h3>
+        <div class="part">
+          <div class="title">项目外排总SS负荷量(g):</div>
+          <div class="content">{{ projectDetail.wpzjl }}</div>
+        </div>
+
+        <h3 class="titleBase">设计指标</h3>
+        <div class="part">
+          <div class="title">设计降雨量(mm):</div>
+          <div class="content">{{ projectDetail.sjRain }}</div>
+        </div>
+        <div class="part">
+          <div class="title">有效面积(㎡):</div>
+          <div class="content">{{ projectDetail.sjArea }}</div>
+        </div>
+        <div class="part">
+          <div class="title">设计年径流污染削减率(%):</div>
+          <div class="content">{{ projectDetail.sjjlzl }}</div>
+        </div>
+
+        <h3 class="titleBase">效果评价</h3>
+        <div class="part">
+          <div class="title">实际年径流污染削减率(%):</div>
+          <div class="content">{{ projectDetail.jlzlSJ }}</div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
-import optionChart from './chartOption.js';
-import YSFQ3 from '@/assets/geojson/kaifeng/kaifengPSFQ3.json';
+import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
-import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
-import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
-import bus from '@/bus';
+import yuanTous from '@/assets/images/gisMap/in.png';
+
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(false);
-const charts = ref(null);
 const mapboxTimer = ref(null);
-const dateSearch = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const yearKH = ref('2024');
+const projectArr = ref([
+  {
+    name: '汴京路管网及道路海绵化改造',
+    geometry: 'POINT(114.374417 34.793947)',
+    area: 110330.52,
+    sjArea: 53417.89,
+    year: 2024,
+    rainTotal: 627.1,
+    wpzjl: 1104.54,
+    sjRain: 54.98,
+    sjjlzl: 40,
+    jlzlSJ: 48.4,
+  },
+]);
+const projectDetail = ref({});
 
-// 历史数据搜索
-function handleQuery() {
-  setTimeout(() => {
-    initChart();
-  });
-}
-
-// echarts初始化
-function initChart() {
-  charts.value && charts.value.dispose();
-  charts.value = proxy.echarts.init(document.getElementById('chartHMXJ'));
-  optionChart.option.xAxis.data = ['2024-07-24 00:00:00', '2024-07-26 00:10:00', '2024-07-29 00:20:00'];
-  // optionChart.option.series[0].name = 'SS(mg/L)';
-  // optionChart.option.series[0].data = [12, 9, 20]; //降雨量
-  // optionChart.option.series[1].name = '降雨量(mm)';
-  // optionChart.option.series[1].data = [230, 190, 132]; //进口SS
-  optionChart.option.series = [
-    {
-      name: '降雨量(mm)',
-      data: [230, 190, 132],
-      type: 'bar',
-      barWidth: 10,
-      yAxisIndex: 0,
-    },
-    {
-      name: 'SS(mg/L)',
-      data: [12, 9, 20],
-      type: 'line',
-      smooth: true,
-      yAxisIndex: 1,
-      symbolSize: 8,
-    },
-  ];
-  optionChart.option.yAxis = [
-    {
-      name: '降雨量(mm)',
-      type: 'value',
-      inverse: true, //翻转
-      nameLocation: 'start', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-    },
-    {
-      name: 'SS(mg/L)',
-      type: 'value',
-      nameLocation: 'end', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-    },
-  ];
-  // optionChart.option.series[2].name = '出口SS';
-  // optionChart.option.series[2].data = [110, 90, 103]; //出口SS
-  // 设置鼠标滚轮放大缩小展示数据区间
-  // optionChart.option.dataZoom = [{ type: 'inside', startValue: optionChart.option.xAxis.data[optionChart.option.xAxis.data.length / 2] }];
-  if (optionChart.option.xAxis.data.length > 0) {
-    optionChart.option.graphic.invisible = true; //暂无数据
-  } else {
-    optionChart.option.graphic.invisible = false; //暂无数据
-  }
-  charts.value.clear();
-  console.log(optionChart.option, 'optionChart.option');
-  charts.value.setOption(optionChart.option);
-}
-//添加海绵设施
+//添加海绵项目
 const addFacilityLayer = async () => {
-  let params = {};
-  let projectStationRes = await queryProjectStation(params);
-  if (projectStationRes && projectStationRes.code == 200) {
-    //projectStation = this.getGeojsonData(projectStationRes.data);
-    let facilityFeaturcs = [];
-    projectStationRes.data.forEach(data => {
-      facilityFeaturcs.push(turf.point(data.lonlat.split(',').map(Number), data));
-    });
-    let facilityGeojson = {
-      type: 'FeatureCollection',
-      features: facilityFeaturcs,
-    };
-    console.log('facilityGeojson--', facilityGeojson);
-    bus.emit('setLegendData', [{ data: facilityGeojson, layername: 'spongeFacility', type: 'point' }]);
-    bus.emit('setLayerVisible', { layername: 'spongeFacility', isCheck: true });
-  }
-};
-//地图点击事件
-const mapClick = (point, properties) => {
-  console.log('point', point);
-  console.log('properties', properties);
-  dialogShow.value = true;
-  setTimeout(() => {
-    initChart();
+  let point = { type: 'FeatureCollection', features: [] };
+  projectArr.value.map(item => {
+    let projectGeojson = { geometry: Terraformer.WKT.parse(item.geometry), properties: item };
+    point.features.push(projectGeojson);
+    addPointProject(newfiberMapbox.map, point, 'projectNjlwrxj');
   });
 };
+// 添加点位方法
+function addPointProject(map, data, layerId) {
+  newfiberMapbox.map.loadImage(yuanTous, (error, image) => {
+    if (error) throw error;
+    !!!map.getSource(layerId) && map.addImage(layerId, image);
+    !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
+    !!!map.getLayer(layerId) &&
+      map.addLayer({
+        id: layerId,
+        type: 'symbol',
+        source: layerId,
+        layout: {
+          'text-field': ['get', 'name'],
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 2,
+          'text-anchor': 'bottom',
+          'text-offset': [0, 3],
+          'text-max-width': 50,
+          'icon-image': layerId,
+          'icon-size': 0.15,
+        },
+        paint: {
+          'text-color': 'rgba(127, 11, 147, 1)',
+          'text-halo-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-width': 2,
+        },
+      });
+  });
+}
+
 onMounted(() => {
-  handleQuery();
-  YSFQ3.features.forEach(element => {
+  YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
   //添加排水分区
@@ -160,22 +137,43 @@
     if (!newfiberMapbox) {
       return;
     } else {
-      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ3);
+      newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('rainAreaLayer', YSFQ2);
       newfiberMapbox.map.setLayoutProperty('rainAreaLayer_label', 'text-allow-overlap', true);
       clearInterval(mapboxTimer.value);
     }
   }, 1000);
+
   setTimeout(() => {
-    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
-    //添加海绵设施
+    // 添加海绵项目
     addFacilityLayer();
-  }, 4000);
+    // 地图点击事件
+    newfiberMapbox.map.on('click', e => {
+      let clickfeature = newfiberMapbox.map
+        .queryRenderedFeatures([
+          [e.point.x - 10 / 2, e.point.y - 10 / 2],
+          [e.point.x + 10 / 2, e.point.y + 10 / 2],
+        ])
+        .filter(i => i.layer.id == 'projectNjlwrxj');
+      if (clickfeature.length == 0) return;
+      projectDetail.value = clickfeature[0].properties; //项目介绍详情
+      dialogShow.value = true;
+    });
+  }, 1000);
 });
 onBeforeUnmount(() => {
-  YSFQ3.features.forEach(element => {
+  YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name.split('/')[0];
   });
+  if (mapboxTimer.value) clearInterval(mapboxTimer.value);
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.selYear {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 99;
+  width: 100px;
+}
+</style>
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue b/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
index cb4ad75..e9a0e3b 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
@@ -2,150 +2,133 @@
   <!-- 年径流总量控制率 -->
   <div class="publicContainer">
     <!-- gis地图 -->
-    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`" @map-click="mapClick"></MapBox>
+    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
+
+    <!-- 年份选择 -->
+    <el-select clearable v-model="yearKH" placeholder="请选择年份" disabled class="selYear">
+      <el-option label="2022" value="2022" />
+      <el-option label="2023" value="2023" />
+      <el-option label="2024" value="2024" />
+    </el-select>
 
     <!-- 海绵设施监测详情 -->
-    <el-dialog v-model="dialogShow" title="海绵设施监测点位详情" :modal-append-to-body="false" width="600px">
-      <el-form :inline="true">
-        <el-form-item label="日期" prop="date">
-          <el-date-picker type="daterange" v-model="dateSearch" value-format="YYYY-MM-DD" placeholder="请选择"></el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="chartHMJC" style="width: 100%; height: 300px"></div>
+    <el-dialog v-model="dialogShow" title="海绵项目监测分析详情" :modal-append-to-body="false" width="600px">
+      <div class="publicDetail">
+        <h3 class="titleBase">基础信息</h3>
+        <div class="part">
+          <div class="title">项目名称:</div>
+          <div class="content">{{ projectDetail.name }}</div>
+        </div>
+        <div class="part">
+          <div class="title">统计年份:</div>
+          <div class="content">{{ projectDetail.year }}</div>
+        </div>
+        <div class="part">
+          <div class="title">降雨总量(mm):</div>
+          <div class="content">{{ projectDetail.rainTotal }}</div>
+        </div>
+        <div class="part">
+          <div class="title">占地面积(㎡):</div>
+          <div class="content">{{ projectDetail.area }}</div>
+        </div>
+
+        <h3 class="titleBase">水量监测</h3>
+        <div class="part">
+          <div class="title">项目外排总径流体积(m³):</div>
+          <div class="content">{{ projectDetail.wpzjl }}</div>
+        </div>
+
+        <h3 class="titleBase">设计指标</h3>
+        <div class="part">
+          <div class="title">设计降雨量(mm):</div>
+          <div class="content">{{ projectDetail.sjRain }}</div>
+        </div>
+        <div class="part">
+          <div class="title">计算径流面积(㎡):</div>
+          <div class="content">{{ projectDetail.sjArea }}</div>
+        </div>
+        <div class="part">
+          <div class="title">设计年径流总量控制率(%):</div>
+          <div class="content">{{ projectDetail.sjjlzl }}</div>
+        </div>
+
+        <h3 class="titleBase">效果评价</h3>
+        <div class="part">
+          <div class="title">实际年径流总量控制率(%):</div>
+          <div class="content">{{ projectDetail.jlzlSJ }}</div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
-import optionChart from './chartOption.js';
 import YSFQ2 from '@/assets/geojson/kaifeng/kaifengPSFQ2.json';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
-import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
-import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
-import bus from '@/bus';
-import { onBeforeUnmount } from 'vue';
+import yuanTous from '@/assets/images/gisMap/in.png';
+
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(false);
-const charts = ref(null);
 const mapboxTimer = ref(null);
-const dateSearch = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const yearKH = ref('2024');
+const projectArr = ref([
+  {
+    name: '汴京路管网及道路海绵化改造',
+    geometry: 'POINT(114.374417 34.793947)',
+    area: 110330.52,
+    sjArea: 85635.45,
+    year: 2024,
+    rainTotal: 627.1,
+    wpzjl: 1407.78,
+    sjRain: 54.62,
+    sjjlzl: 90,
+    jlzlSJ: 90,
+  },
+]);
+const projectDetail = ref({});
 
-// 历史数据搜索
-function handleQuery() {
-  setTimeout(() => {
-    initChart();
-  });
-}
-
-// echarts初始化
-function initChart() {
-  charts.value && charts.value.dispose();
-  charts.value = proxy.echarts.init(document.getElementById('chartHMJC'));
-  optionChart.option.xAxis.data = ['2024-07-24 00:00:00', '2024-07-26 00:10:00', '2024-07-29 00:20:00'];
-  optionChart.option.series = [
-    {
-      name: '降雨量(mm)',
-      data: [230, 190, 132],
-      type: 'bar',
-      barWidth: 10,
-      yAxisIndex: 0,
-    },
-    {
-      name: '流量(m³/s)',
-      data: [12, 9, 20],
-      type: 'line',
-      smooth: true,
-      yAxisIndex: 1,
-      symbolSize: 8,
-    },
-  ];
-  optionChart.option.yAxis = [
-    {
-      name: '降雨量(mm)',
-      type: 'value',
-      inverse: true, //翻转
-      nameLocation: 'start', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-    },
-    {
-      name: '流量(m³/s)',
-      type: 'value',
-      nameLocation: 'end', // 坐标轴名称显示位置
-      nameGap: 15, // 坐标轴名称与轴线之间的距离
-      nameTextStyle: {
-        color: '#c6c6c6', //字体颜色
-        fontSize: 12, //字体大小
-        align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      },
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#066592',
-        },
-      },
-    },
-  ];
-  // 设置鼠标滚轮放大缩小展示数据区间
-  // optionChart.option.dataZoom = [{ type: 'inside', startValue: optionChart.option.xAxis.data[optionChart.option.xAxis.data.length / 2] }];
-  if (optionChart.option.xAxis.data.length > 0) {
-    optionChart.option.graphic.invisible = true; //暂无数据
-  } else {
-    optionChart.option.graphic.invisible = false; //暂无数据
-  }
-  charts.value.clear();
-  charts.value.setOption(optionChart.option);
-}
-//添加海绵设施
+//添加海绵项目
 const addFacilityLayer = async () => {
-  let params = {};
-  let projectStationRes = await queryProjectStation(params);
-  if (projectStationRes && projectStationRes.code == 200) {
-    //projectStation = this.getGeojsonData(projectStationRes.data);
-    let facilityFeaturcs = [];
-    projectStationRes.data.forEach(data => {
-      facilityFeaturcs.push(turf.point(data.lonlat.split(',').map(Number), data));
-    });
-    let facilityGeojson = {
-      type: 'FeatureCollection',
-      features: facilityFeaturcs,
-    };
-    console.log('facilityGeojson--', facilityGeojson);
-    bus.emit('setLegendData', [{ data: facilityGeojson, layername: 'spongeFacility', type: 'point' }]);
-    bus.emit('setLayerVisible', { layername: 'spongeFacility', isCheck: true });
-  }
-};
-//地图点击事件
-const mapClick = (point, properties) => {
-  console.log('point', point);
-  console.log('properties', properties);
-  dialogShow.value = true;
-  setTimeout(() => {
-    initChart();
+  let point = { type: 'FeatureCollection', features: [] };
+  projectArr.value.map(item => {
+    let projectGeojson = { geometry: Terraformer.WKT.parse(item.geometry), properties: item };
+    point.features.push(projectGeojson);
+    addPointProject(newfiberMapbox.map, point, 'projectNjlzl');
   });
 };
+// 添加点位方法
+function addPointProject(map, data, layerId) {
+  newfiberMapbox.map.loadImage(yuanTous, (error, image) => {
+    if (error) throw error;
+    !!!map.getSource(layerId) && map.addImage(layerId, image);
+    !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
+    !!!map.getLayer(layerId) &&
+      map.addLayer({
+        id: layerId,
+        type: 'symbol',
+        source: layerId,
+        layout: {
+          'text-field': ['get', 'name'],
+          'text-font': ['KlokanTech Noto Sans Regular'],
+          'text-size': 16,
+          'text-line-height': 2,
+          'text-anchor': 'bottom',
+          'text-offset': [0, 3],
+          'text-max-width': 50,
+          'icon-image': layerId,
+          'icon-size': 0.15,
+        },
+        paint: {
+          'text-color': 'rgba(127, 11, 147, 1)',
+          'text-halo-color': 'rgba(255, 255, 255, 1)',
+          'text-halo-width': 2,
+        },
+      });
+  });
+}
+
 onMounted(() => {
-  handleQuery();
   YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
@@ -161,16 +144,36 @@
   }, 1000);
 
   setTimeout(() => {
-    newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
-    //添加海绵设施
+    // 添加海绵项目
     addFacilityLayer();
-  }, 4000);
+    // 地图点击事件
+    newfiberMapbox.map.on('click', e => {
+      let clickfeature = newfiberMapbox.map
+        .queryRenderedFeatures([
+          [e.point.x - 10 / 2, e.point.y - 10 / 2],
+          [e.point.x + 10 / 2, e.point.y + 10 / 2],
+        ])
+        .filter(i => i.layer.id == 'projectNjlzl');
+      if (clickfeature.length == 0) return;
+      projectDetail.value = clickfeature[0].properties; //项目介绍详情
+      dialogShow.value = true;
+    });
+  }, 1000);
 });
 onBeforeUnmount(() => {
   YSFQ2.features.forEach(element => {
     element.properties.name = element.properties.name.split('/')[0];
   });
+  if (mapboxTimer.value) clearInterval(mapboxTimer.value);
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.selYear {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 99;
+  width: 100px;
+}
+</style>
diff --git a/src/views/spongePerformance/OutputPerformance/chartOption.js b/src/views/spongePerformance/OutputPerformance/chartOption.js
deleted file mode 100644
index 8dc5845..0000000
--- a/src/views/spongePerformance/OutputPerformance/chartOption.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import useUserStore from '@/store/modules/user';
-import * as echarts from 'echarts';
-const pinias = useUserStore();
-
-let optionChart = {
-  // 柱状图+折线图
-  option: {
-    color: pinias.$state.chartColor,
-    // 显示暂无数据
-    graphic: {
-      type: 'text', // 类型：文本
-      left: 'center',
-      top: 'middle',
-      silent: true, // 不响应事件
-      invisible: false, // 有数据就隐藏
-      style: {
-        fill: '#c6c6c6',
-        fontWeight: 'bold',
-        text: '暂无数据',
-        fontFamily: 'Microsoft YaHei',
-        fontSize: '18px',
-      },
-    },
-    tooltip: {
-      trigger: 'axis',
-      confine: true, //是否将 tooltip 框限制在图表的区域内
-    },
-    title: {
-      left: 'left',
-      text: '',
-      top: 10,
-      bottom: 10,
-      left: 10,
-      textStyle: {
-        color: '#545E75', //字体颜色
-        fontSize: 16, //字体大小
-      },
-    },
-    grid: {
-      left: '3%',
-      right: '5%',
-      top: '20%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    legend: {
-      top: '2%',
-      orient: 'horizontal', //horizontal
-      left: 'center', //left ,center
-      textStyle: {
-        color: 'inherit',
-      },
-    },
-    xAxis: {
-      type: 'category',
-      position: 'bottom',
-      data: ['2023', '2024', '2025'],
-      axisLabel: {
-        color: '#c6c6c6',
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#066592',
-        },
-      },
-    },
-    yAxis: [
-      // {
-      //   name: '降雨量(mm)',
-      //   type: 'value',
-      //   inverse: true, //翻转
-      //   nameLocation: 'start', // 坐标轴名称显示位置
-      //   nameGap: 15, // 坐标轴名称与轴线之间的距离
-      //   nameTextStyle: {
-      //     color: '#c6c6c6', //字体颜色
-      //     fontSize: 12, //字体大小
-      //     align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      //   },
-      //   splitLine: {
-      //     lineStyle: {
-      //       type: 'dashed',
-      //       color: '#066592',
-      //     },
-      //   },
-      //   axisLabel: {
-      //     color: '#c6c6c6',
-      //   },
-      // },
-      // {
-      //   name: '流量(m³/h)',
-      //   type: 'value',
-      //   nameLocation: 'end', // 坐标轴名称显示位置
-      //   nameGap: 15, // 坐标轴名称与轴线之间的距离
-      //   nameTextStyle: {
-      //     color: '#c6c6c6', //字体颜色
-      //     fontSize: 12, //字体大小
-      //     align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
-      //   },
-      //   axisLabel: {
-      //     color: '#c6c6c6',
-      //   },
-      //   splitLine: {
-      //     lineStyle: {
-      //       type: 'dashed',
-      //       color: '#066592',
-      //     },
-      //   },
-      // },
-    ],
-    series: [
-      // {
-      //   name: '降雨量(mm)',
-      //   type: 'bar',
-      //   barWidth: 10,
-      //   yAxisIndex: 0,
-      //   data: [24, 12, 9],
-      // },
-      // {
-      //   name: '流量(m³/s)',
-      //   type: 'line',
-      //   smooth: true,
-      //   yAxisIndex: 1,
-      //   symbolSize: 8,
-      //   data: [14, 8, 5],
-      // },
-      // {
-      //   name: '出口流量',
-      //   type: 'line',
-      //   smooth: true,
-      //   yAxisIndex: 1,
-      //   symbolSize: 8,
-      //   data: [4, 2, 1],
-      // },
-    ],
-  },
-};
-export default optionChart;