diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 3b3efe8..0ef22b5 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -56,6 +56,7 @@
 import HeadRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
 import { nextTick, onBeforeUnmount } from 'vue';
 import bus from '@/bus/index';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
@@ -105,6 +106,28 @@
     //   pitch: -25.2508969308367,
     //   roll: 0.005453465256790101,
     // });
+    //河流流向
+    let layer = new mapboxL7.LineLayer({
+      name: 'waterFlow',
+    })
+      .source(riverFlow)
+      .size(6)
+      .shape('line')
+      .texture('arrow')
+      .color('rgb(117, 207, 240)')
+      .animate({
+        interval: 1, // 间隔
+        duration: 1.5, // 持续时间，延时
+        trailLength: 2, // 流线长度
+      })
+      .style({
+        opacity: 0.6,
+        lineTexture: true, // 开启线的贴图功能
+        iconStep: 200, // 设置贴图纹理的间距
+        borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+        borderColor: '#fff', // 默认为 #ccc
+      });
+    newfiberMapbox.addLayer(layer);
     // 默认缩放比、中心点
     newfiberMapbox.map.easeTo({
       center: [114.35, 34.802],
@@ -151,6 +174,8 @@
   bus.off('checkBZGYT');
   bus.off('checkWSCGYT');
   bus.off('pipeMonitorBus');
+  if (!newfiberMapbox) return;
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterFlow'));
 });
 </script>
 

diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 3b3efe8..0ef22b5 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -56,6 +56,7 @@
 import HeadRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
 import { nextTick, onBeforeUnmount } from 'vue';
 import bus from '@/bus/index';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
@@ -105,6 +106,28 @@
     //   pitch: -25.2508969308367,
     //   roll: 0.005453465256790101,
     // });
+    //河流流向
+    let layer = new mapboxL7.LineLayer({
+      name: 'waterFlow',
+    })
+      .source(riverFlow)
+      .size(6)
+      .shape('line')
+      .texture('arrow')
+      .color('rgb(117, 207, 240)')
+      .animate({
+        interval: 1, // 间隔
+        duration: 1.5, // 持续时间，延时
+        trailLength: 2, // 流线长度
+      })
+      .style({
+        opacity: 0.6,
+        lineTexture: true, // 开启线的贴图功能
+        iconStep: 200, // 设置贴图纹理的间距
+        borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+        borderColor: '#fff', // 默认为 #ccc
+      });
+    newfiberMapbox.addLayer(layer);
     // 默认缩放比、中心点
     newfiberMapbox.map.easeTo({
       center: [114.35, 34.802],
@@ -151,6 +174,8 @@
   bus.off('checkBZGYT');
   bus.off('checkWSCGYT');
   bus.off('pipeMonitorBus');
+  if (!newfiberMapbox) return;
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterFlow'));
 });
 </script>
 
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
index 5967e73..9aa9ecb 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
@@ -153,7 +153,7 @@
 onMounted(() => {
   handleQuery();
   YSFQ3.features.forEach(element => {
-    element.properties.name = element.properties.name + element.properties.totalflow;
+    element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
   //添加排水分区
   mapboxTimer.value = setInterval(() => {
@@ -171,6 +171,11 @@
     addFacilityLayer();
   }, 4000);
 });
+onBeforeUnmount(() => {
+  YSFQ3.features.forEach(element => {
+    element.properties.name = element.properties.name.split('/')[0];
+  });
+});
 </script>
 
 <style lang="scss" scoped></style>

diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index 3b3efe8..0ef22b5 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -56,6 +56,7 @@
 import HeadRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
 import { nextTick, onBeforeUnmount } from 'vue';
 import bus from '@/bus/index';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
 
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
@@ -105,6 +106,28 @@
     //   pitch: -25.2508969308367,
     //   roll: 0.005453465256790101,
     // });
+    //河流流向
+    let layer = new mapboxL7.LineLayer({
+      name: 'waterFlow',
+    })
+      .source(riverFlow)
+      .size(6)
+      .shape('line')
+      .texture('arrow')
+      .color('rgb(117, 207, 240)')
+      .animate({
+        interval: 1, // 间隔
+        duration: 1.5, // 持续时间，延时
+        trailLength: 2, // 流线长度
+      })
+      .style({
+        opacity: 0.6,
+        lineTexture: true, // 开启线的贴图功能
+        iconStep: 200, // 设置贴图纹理的间距
+        borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+        borderColor: '#fff', // 默认为 #ccc
+      });
+    newfiberMapbox.addLayer(layer);
     // 默认缩放比、中心点
     newfiberMapbox.map.easeTo({
       center: [114.35, 34.802],
@@ -151,6 +174,8 @@
   bus.off('checkBZGYT');
   bus.off('checkWSCGYT');
   bus.off('pipeMonitorBus');
+  if (!newfiberMapbox) return;
+  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterFlow'));
 });
 </script>
 
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
index 5967e73..9aa9ecb 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualRunoffPollution.vue
@@ -153,7 +153,7 @@
 onMounted(() => {
   handleQuery();
   YSFQ3.features.forEach(element => {
-    element.properties.name = element.properties.name + element.properties.totalflow;
+    element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
   //添加排水分区
   mapboxTimer.value = setInterval(() => {
@@ -171,6 +171,11 @@
     addFacilityLayer();
   }, 4000);
 });
+onBeforeUnmount(() => {
+  YSFQ3.features.forEach(element => {
+    element.properties.name = element.properties.name.split('/')[0];
+  });
+});
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue b/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
index 784a7a6..0217a0e 100644
--- a/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
+++ b/src/views/spongePerformance/OutputPerformance/AnnualTotalRunoff.vue
@@ -27,6 +27,7 @@
 import newfiberVectorLayer from '../../sponeScreen/gisMF/newfiberVectorLayer.js';
 import { queryProjectStation } from '@/api/sponeScreen/syntherticData.js';
 import bus from '@/bus';
+import { onBeforeUnmount } from 'vue';
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(false);
 const charts = ref(null);
@@ -146,7 +147,7 @@
 onMounted(() => {
   handleQuery();
   YSFQ2.features.forEach(element => {
-    element.properties.name = element.properties.name + element.properties.totalflow;
+    element.properties.name = element.properties.name + '/' + element.properties.totalflow;
   });
   //添加排水分区
   mapboxTimer.value = setInterval(() => {
@@ -158,12 +159,18 @@
       clearInterval(mapboxTimer.value);
     }
   }, 1000);
+
   setTimeout(() => {
     newfiberMapbox.map.moveLayer('kaifengWater', 'rainAreaLayer');
     //添加海绵设施
     addFacilityLayer();
   }, 4000);
 });
+onBeforeUnmount(() => {
+  YSFQ2.features.forEach(element => {
+    element.properties.name = element.properties.name.split('/')[0];
+  });
+});
 </script>
 
 <style lang="scss" scoped></style>