diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index a1bb068..1cd628d 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -480,25 +480,6 @@
   color: #e4f5ff;
   padding-left: 30px;
   position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    width: 71px;
-    height: 35px;
-    background: url('@/assets/newImgs/HMScreen/partLight.png') no-repeat;
-    background-size: 100% 100%;
-    animation: partDXL 3s infinite ease-in-out;
-    pointer-events: none;
-    @keyframes partDXL {
-      0% {
-        left: 0px;
-      }
-      100% {
-        left: 390px;
-      }
-    }
-  }
 }
 .partContHM {
   background: #004565;

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index a1bb068..1cd628d 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -480,25 +480,6 @@
   color: #e4f5ff;
   padding-left: 30px;
   position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    width: 71px;
-    height: 35px;
-    background: url('@/assets/newImgs/HMScreen/partLight.png') no-repeat;
-    background-size: 100% 100%;
-    animation: partDXL 3s infinite ease-in-out;
-    pointer-events: none;
-    @keyframes partDXL {
-      0% {
-        left: 0px;
-      }
-      100% {
-        left: 390px;
-      }
-    }
-  }
 }
 .partContHM {
   background: #004565;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 7c03214..62292a6 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -12,8 +12,6 @@
     refresh: Number,
   },
   setup(props) {
-    console.log(props.data);
-
     const allData = reactive({
       series: [],
       legend: [],
@@ -40,20 +38,6 @@
         },
         tooltip: {
           trigger: 'axis',
-          // formatter: "{b}：{c}㎡",
-          // feature: {
-          //   mark: { show: true },
-          //   dataView: { show: true, readOnly: false },
-          //   magicType: { show: true, type: ['line', 'bar'] },
-          //   restore: { show: true },
-          //   saveAsImage: { show: true }
-          // },
-          // axisPointer: {
-          //   type: "cross",
-          //   textStyle: {
-          //     color: "#fff"
-          //   }
-          // },
           formatter: params => {
             // console.log(params);
             var relVal = '' + params[0].name;
@@ -68,7 +52,7 @@
         },
         legend: {
           // type: 'scroll',
-          data: '降雨量',
+          data: [],
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index a1bb068..1cd628d 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -480,25 +480,6 @@
   color: #e4f5ff;
   padding-left: 30px;
   position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    width: 71px;
-    height: 35px;
-    background: url('@/assets/newImgs/HMScreen/partLight.png') no-repeat;
-    background-size: 100% 100%;
-    animation: partDXL 3s infinite ease-in-out;
-    pointer-events: none;
-    @keyframes partDXL {
-      0% {
-        left: 0px;
-      }
-      100% {
-        left: 390px;
-      }
-    }
-  }
 }
 .partContHM {
   background: #004565;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 7c03214..62292a6 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -12,8 +12,6 @@
     refresh: Number,
   },
   setup(props) {
-    console.log(props.data);
-
     const allData = reactive({
       series: [],
       legend: [],
@@ -40,20 +38,6 @@
         },
         tooltip: {
           trigger: 'axis',
-          // formatter: "{b}：{c}㎡",
-          // feature: {
-          //   mark: { show: true },
-          //   dataView: { show: true, readOnly: false },
-          //   magicType: { show: true, type: ['line', 'bar'] },
-          //   restore: { show: true },
-          //   saveAsImage: { show: true }
-          // },
-          // axisPointer: {
-          //   type: "cross",
-          //   textStyle: {
-          //     color: "#fff"
-          //   }
-          // },
           formatter: params => {
             // console.log(params);
             var relVal = '' + params[0].name;
@@ -68,7 +52,7 @@
         },
         legend: {
           // type: 'scroll',
-          data: '降雨量',
+          data: [],
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 5dd1c73..4a22924 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,9 +121,12 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" @close="closePipe" append-to-body>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" append-to-body>
       <GisMapMF style="position: relative"></GisMapMF>
     </el-dialog>
+
+    <!-- 降雨效果 -->
+    <CanvasRain v-if="showRainFlow"></CanvasRain>
   </div>
 </template>
 
@@ -138,6 +141,7 @@
 import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估
 import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝
 import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维
+import CanvasRain from '@/views/sponeScreen/cityGK/canvasRain.vue'; //降雨效果
 import axios from 'axios';
 import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
@@ -149,6 +153,7 @@
 const stationList = ref([]);
 const stationCode = ref('');
 const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
+const showRainFlow = ref(false);
 const menuList = ref([
   { name: '城市概况', id: 1 },
   { name: '项目建设', id: 2 },
@@ -240,31 +245,25 @@
     newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
   }
 };
-//关闭三维管网弹窗
-const closePipe = () => {
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
-};
+
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
   bus.on('checkProjectArea', params => {
     areaObj.value = params;
   });
+  // 降雨特征点击
+  bus.on('checkRainL', params => {
+    if (params == 1) {
+      showRainFlow.value = false;
+    } else {
+      showRainFlow.value = true;
+    }
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkRainL');
   if (!newfiberMap) return;
   if (newfiberMap) {
     let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index a1bb068..1cd628d 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -480,25 +480,6 @@
   color: #e4f5ff;
   padding-left: 30px;
   position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    width: 71px;
-    height: 35px;
-    background: url('@/assets/newImgs/HMScreen/partLight.png') no-repeat;
-    background-size: 100% 100%;
-    animation: partDXL 3s infinite ease-in-out;
-    pointer-events: none;
-    @keyframes partDXL {
-      0% {
-        left: 0px;
-      }
-      100% {
-        left: 390px;
-      }
-    }
-  }
 }
 .partContHM {
   background: #004565;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 7c03214..62292a6 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -12,8 +12,6 @@
     refresh: Number,
   },
   setup(props) {
-    console.log(props.data);
-
     const allData = reactive({
       series: [],
       legend: [],
@@ -40,20 +38,6 @@
         },
         tooltip: {
           trigger: 'axis',
-          // formatter: "{b}：{c}㎡",
-          // feature: {
-          //   mark: { show: true },
-          //   dataView: { show: true, readOnly: false },
-          //   magicType: { show: true, type: ['line', 'bar'] },
-          //   restore: { show: true },
-          //   saveAsImage: { show: true }
-          // },
-          // axisPointer: {
-          //   type: "cross",
-          //   textStyle: {
-          //     color: "#fff"
-          //   }
-          // },
           formatter: params => {
             // console.log(params);
             var relVal = '' + params[0].name;
@@ -68,7 +52,7 @@
         },
         legend: {
           // type: 'scroll',
-          data: '降雨量',
+          data: [],
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 5dd1c73..4a22924 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,9 +121,12 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" @close="closePipe" append-to-body>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" append-to-body>
       <GisMapMF style="position: relative"></GisMapMF>
     </el-dialog>
+
+    <!-- 降雨效果 -->
+    <CanvasRain v-if="showRainFlow"></CanvasRain>
   </div>
 </template>
 
@@ -138,6 +141,7 @@
 import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估
 import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝
 import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维
+import CanvasRain from '@/views/sponeScreen/cityGK/canvasRain.vue'; //降雨效果
 import axios from 'axios';
 import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
@@ -149,6 +153,7 @@
 const stationList = ref([]);
 const stationCode = ref('');
 const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
+const showRainFlow = ref(false);
 const menuList = ref([
   { name: '城市概况', id: 1 },
   { name: '项目建设', id: 2 },
@@ -240,31 +245,25 @@
     newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
   }
 };
-//关闭三维管网弹窗
-const closePipe = () => {
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
-};
+
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
   bus.on('checkProjectArea', params => {
     areaObj.value = params;
   });
+  // 降雨特征点击
+  bus.on('checkRainL', params => {
+    if (params == 1) {
+      showRainFlow.value = false;
+    } else {
+      showRainFlow.value = true;
+    }
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkRainL');
   if (!newfiberMap) return;
   if (newfiberMap) {
     let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
diff --git a/src/views/sponeScreen/cityGK/canvasRain.vue b/src/views/sponeScreen/cityGK/canvasRain.vue
new file mode 100644
index 0000000..415c5f3
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/canvasRain.vue
@@ -0,0 +1,129 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRain"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const timer = ref(null);
+const timerAll = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = window.innerWidth;
+let h = window.innerWidth;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(300);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 1)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 10);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRain');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  init(ctx.value);
+  // 1-12个月的不同降雨量变化
+  let rainArr = [
+    { month: '1', rain: 300 },
+    { month: '2', rain: 350 },
+    { month: '3', rain: 400 },
+    { month: '4', rain: 450 },
+    { month: '5', rain: 550 },
+    { month: '6', rain: 600 },
+    { month: '7', rain: 1200 },
+    { month: '8', rain: 700 },
+    { month: '9', rain: 600 },
+    { month: '10', rain: 460 },
+    { month: '11', rain: 400 },
+    { month: '12', rain: 300 },
+  ];
+  let i = 0;
+  timerAll.value = setInterval(() => {
+    size.value = rainArr[i].rain;
+    i++;
+    if (i == 12) i = 0;
+    init(ctx.value);
+  }, 1500);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  if (timerAll.value) clearInterval(timerAll.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index a1bb068..1cd628d 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -480,25 +480,6 @@
   color: #e4f5ff;
   padding-left: 30px;
   position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    width: 71px;
-    height: 35px;
-    background: url('@/assets/newImgs/HMScreen/partLight.png') no-repeat;
-    background-size: 100% 100%;
-    animation: partDXL 3s infinite ease-in-out;
-    pointer-events: none;
-    @keyframes partDXL {
-      0% {
-        left: 0px;
-      }
-      100% {
-        left: 390px;
-      }
-    }
-  }
 }
 .partContHM {
   background: #004565;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 7c03214..62292a6 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -12,8 +12,6 @@
     refresh: Number,
   },
   setup(props) {
-    console.log(props.data);
-
     const allData = reactive({
       series: [],
       legend: [],
@@ -40,20 +38,6 @@
         },
         tooltip: {
           trigger: 'axis',
-          // formatter: "{b}：{c}㎡",
-          // feature: {
-          //   mark: { show: true },
-          //   dataView: { show: true, readOnly: false },
-          //   magicType: { show: true, type: ['line', 'bar'] },
-          //   restore: { show: true },
-          //   saveAsImage: { show: true }
-          // },
-          // axisPointer: {
-          //   type: "cross",
-          //   textStyle: {
-          //     color: "#fff"
-          //   }
-          // },
           formatter: params => {
             // console.log(params);
             var relVal = '' + params[0].name;
@@ -68,7 +52,7 @@
         },
         legend: {
           // type: 'scroll',
-          data: '降雨量',
+          data: [],
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 5dd1c73..4a22924 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,9 +121,12 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" @close="closePipe" append-to-body>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" append-to-body>
       <GisMapMF style="position: relative"></GisMapMF>
     </el-dialog>
+
+    <!-- 降雨效果 -->
+    <CanvasRain v-if="showRainFlow"></CanvasRain>
   </div>
 </template>
 
@@ -138,6 +141,7 @@
 import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估
 import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝
 import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维
+import CanvasRain from '@/views/sponeScreen/cityGK/canvasRain.vue'; //降雨效果
 import axios from 'axios';
 import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
@@ -149,6 +153,7 @@
 const stationList = ref([]);
 const stationCode = ref('');
 const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
+const showRainFlow = ref(false);
 const menuList = ref([
   { name: '城市概况', id: 1 },
   { name: '项目建设', id: 2 },
@@ -240,31 +245,25 @@
     newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
   }
 };
-//关闭三维管网弹窗
-const closePipe = () => {
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
-};
+
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
   bus.on('checkProjectArea', params => {
     areaObj.value = params;
   });
+  // 降雨特征点击
+  bus.on('checkRainL', params => {
+    if (params == 1) {
+      showRainFlow.value = false;
+    } else {
+      showRainFlow.value = true;
+    }
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkRainL');
   if (!newfiberMap) return;
   if (newfiberMap) {
     let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
diff --git a/src/views/sponeScreen/cityGK/canvasRain.vue b/src/views/sponeScreen/cityGK/canvasRain.vue
new file mode 100644
index 0000000..415c5f3
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/canvasRain.vue
@@ -0,0 +1,129 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRain"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const timer = ref(null);
+const timerAll = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = window.innerWidth;
+let h = window.innerWidth;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(300);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 1)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 10);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRain');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  init(ctx.value);
+  // 1-12个月的不同降雨量变化
+  let rainArr = [
+    { month: '1', rain: 300 },
+    { month: '2', rain: 350 },
+    { month: '3', rain: 400 },
+    { month: '4', rain: 450 },
+    { month: '5', rain: 550 },
+    { month: '6', rain: 600 },
+    { month: '7', rain: 1200 },
+    { month: '8', rain: 700 },
+    { month: '9', rain: 600 },
+    { month: '10', rain: 460 },
+    { month: '11', rain: 400 },
+    { month: '12', rain: 300 },
+  ];
+  let i = 0;
+  timerAll.value = setInterval(() => {
+    size.value = rainArr[i].rain;
+    i++;
+    if (i == 12) i = 0;
+    init(ctx.value);
+  }, 1500);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  if (timerAll.value) clearInterval(timerAll.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c6a4e74..2cb1d5d 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -28,15 +28,13 @@
 
 <script setup>
 import RainfallEcharts from '@/views/sponeScreen/Echarts/RainfallEcharts.vue'; //年际降雨变化
-
 import RainfallLegend from '@/views/sponeScreen/Echarts/RainfallLegend.vue'; //年内降雨量
 import { onBeforeUnmount } from 'vue';
-import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
+import bus from '@/bus';
 
 const chartData2 = ref({
   xAxis: [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2021],
   yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
-  // yAxis2: [7, 9, 10, 9, 11, 10, 12, 15],
   refresh: 1,
 });
 const chartData3 = ref({
@@ -64,91 +62,23 @@
 });
 const activedname = ref('年际降雨变化');
 const weatherTimer = ref(null);
-
-const ContentDetails = ref('');
 const yearList = ref([
   { name: '年际降雨变化', value: 1 },
   { name: '年内降雨量', value: 2 },
 ]);
-const a = ref('');
 
 function yearclick(val) {
-  console.log(val.name, 'val.name');
   activedname.value = val.name;
-  console.log(activedname.value, 'activedname.value ');
-  if (val.name == '年内降雨量') {
-    //消除实时天气效果
-    clearInterval(window.currentWeatherTimer);
-    window.currentWeatherTimer = null;
-    newfiberMap.weatherRemove();
-    let mounthIndex = 0;
-    weatherTimer.value = setInterval(() => {
-      if (mounthIndex == 0) {
-        newfiberMap.weatherSnow({
-          snowSize: 0.01,
-          snowSpeed: 60,
-        });
-      } else if (mounthIndex == 1) {
-        newfiberMap.weatherSnow({
-          snowSize: 0.02,
-          snowSpeed: 100,
-        });
-      } else if (mounthIndex == 6 || mounthIndex == 7) {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 0.1,
-          rainSpeed: 150.0,
-        }); // 暴雨
-      } else if (mounthIndex == 8) {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 0.2,
-          rainSpeed: 150.0,
-        }); // 大
-      } else if (mounthIndex == 5) {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 0.5,
-          rainSpeed: 150.0,
-        }); //中
-      } else {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 1,
-          rainSpeed: 150.0,
-        }); //小
-      }
-      mounthIndex = mounthIndex + 1;
-      if (mounthIndex == 12) {
-        mounthIndex = 0;
-      }
-    }, 2000);
-  } else {
-    // clearInterval(weatherTimer.value);
-    // weatherTimer.value = null;
-    // newfiberMap.weatherRemove();
-    // //恢复实时天气效果
-    // window.currentWeatherTimer = null;
-    // newfiberVectorLayer.setCurrentWeather();
-    // window.currentWeatherTimer = setInterval(() => {
-    //   newfiberVectorLayer.setCurrentWeather();
-    // }, 300000);
-  }
+  bus.emit('checkRainL', val.value);
 }
 
-const refresh = ref(1);
-const refresh1 = ref(1);
 onBeforeUnmount(() => {
   clearInterval(weatherTimer.value);
   weatherTimer.value = null;
-  // if (!newfiberMap) return;
-  // newfiberMap.weatherRemove();
 });
 </script>
 
 <style lang="scss" scoped>
-// height: 260px;
-// background: red;
 .HeadContent {
   width: 100%;
   height: 30px;

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index a1bb068..1cd628d 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -480,25 +480,6 @@
   color: #e4f5ff;
   padding-left: 30px;
   position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    width: 71px;
-    height: 35px;
-    background: url('@/assets/newImgs/HMScreen/partLight.png') no-repeat;
-    background-size: 100% 100%;
-    animation: partDXL 3s infinite ease-in-out;
-    pointer-events: none;
-    @keyframes partDXL {
-      0% {
-        left: 0px;
-      }
-      100% {
-        left: 390px;
-      }
-    }
-  }
 }
 .partContHM {
   background: #004565;
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
index 7c03214..62292a6 100644
--- a/src/views/sponeScreen/Echarts/RainfallLegend.vue
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -12,8 +12,6 @@
     refresh: Number,
   },
   setup(props) {
-    console.log(props.data);
-
     const allData = reactive({
       series: [],
       legend: [],
@@ -40,20 +38,6 @@
         },
         tooltip: {
           trigger: 'axis',
-          // formatter: "{b}：{c}㎡",
-          // feature: {
-          //   mark: { show: true },
-          //   dataView: { show: true, readOnly: false },
-          //   magicType: { show: true, type: ['line', 'bar'] },
-          //   restore: { show: true },
-          //   saveAsImage: { show: true }
-          // },
-          // axisPointer: {
-          //   type: "cross",
-          //   textStyle: {
-          //     color: "#fff"
-          //   }
-          // },
           formatter: params => {
             // console.log(params);
             var relVal = '' + params[0].name;
@@ -68,7 +52,7 @@
         },
         legend: {
           // type: 'scroll',
-          data: '降雨量',
+          data: [],
           itemWidth: 18,
           itemHeight: 12,
           textStyle: {
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 5dd1c73..4a22924 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,9 +121,12 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" @close="closePipe" append-to-body>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1850px; height: 900px" append-to-body>
       <GisMapMF style="position: relative"></GisMapMF>
     </el-dialog>
+
+    <!-- 降雨效果 -->
+    <CanvasRain v-if="showRainFlow"></CanvasRain>
   </div>
 </template>
 
@@ -138,6 +141,7 @@
 import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估
 import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝
 import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维
+import CanvasRain from '@/views/sponeScreen/cityGK/canvasRain.vue'; //降雨效果
 import axios from 'axios';
 import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
@@ -149,6 +153,7 @@
 const stationList = ref([]);
 const stationCode = ref('');
 const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
+const showRainFlow = ref(false);
 const menuList = ref([
   { name: '城市概况', id: 1 },
   { name: '项目建设', id: 2 },
@@ -240,31 +245,25 @@
     newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
   }
 };
-//关闭三维管网弹窗
-const closePipe = () => {
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
-};
+
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
   bus.on('checkProjectArea', params => {
     areaObj.value = params;
   });
+  // 降雨特征点击
+  bus.on('checkRainL', params => {
+    if (params == 1) {
+      showRainFlow.value = false;
+    } else {
+      showRainFlow.value = true;
+    }
+  });
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
+  bus.off('checkRainL');
   if (!newfiberMap) return;
   if (newfiberMap) {
     let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
diff --git a/src/views/sponeScreen/cityGK/canvasRain.vue b/src/views/sponeScreen/cityGK/canvasRain.vue
new file mode 100644
index 0000000..415c5f3
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/canvasRain.vue
@@ -0,0 +1,129 @@
+<template>
+  <!-- 降雨效果canvas -->
+  <div class="canvasRainPage">
+    <canvas id="canvasRain"></canvas>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const timer = ref(null);
+const timerAll = ref(null);
+
+// 画笔
+const ctx = ref(null);
+// 画布的宽高
+let w = window.innerWidth;
+let h = window.innerWidth;
+// 存放雨滴的数组
+let arr = [];
+// 雨滴的数量
+const size = ref(300);
+// 雨滴的构造函数
+class Rain {
+  x = random(w);
+  y = random(h);
+  ySpeed = random(2) + 8;
+  show() {
+    drawLine(this.x, this.y);
+  }
+  run() {
+    if (this.y > h) {
+      this.y = 0;
+      this.x = random(w);
+    }
+    this.y = this.y + this.ySpeed;
+  }
+}
+// 画线（雨滴）
+function drawLine(x1, y1) {
+  ctx.value.beginPath();
+  ctx.value.strokeStyle = 'rgba(35, 195, 255, 1)';
+  ctx.value.moveTo(x1, y1);
+  // 雨长度
+  ctx.value.lineTo(x1, y1 + 20);
+  ctx.value.stroke();
+}
+// 生成随机数
+function random(num) {
+  return Math.random() * num;
+}
+// 开始
+function start() {
+  for (let i = 0; i < size.value; i++) {
+    let rain = new Rain();
+    arr.push(rain);
+    rain.show();
+  }
+  timer.value = setInterval(() => {
+    ctx.value.clearRect(0, 0, w, h);
+    for (let i = 0; i < size.value; i++) {
+      arr[i].show();
+      arr[i].run();
+    }
+  }, 10);
+}
+// 初始化
+function init(ctx1) {
+  ctx.value = ctx1;
+  start();
+}
+
+// 清除画布
+function clearDraw() {
+  ctx.value.clearRect(0, 0, w, h);
+}
+
+// 初始化
+function initCanvas() {
+  const canvas = document.querySelector('#canvasRain');
+  ctx.value = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  init(ctx.value);
+  // 1-12个月的不同降雨量变化
+  let rainArr = [
+    { month: '1', rain: 300 },
+    { month: '2', rain: 350 },
+    { month: '3', rain: 400 },
+    { month: '4', rain: 450 },
+    { month: '5', rain: 550 },
+    { month: '6', rain: 600 },
+    { month: '7', rain: 1200 },
+    { month: '8', rain: 700 },
+    { month: '9', rain: 600 },
+    { month: '10', rain: 460 },
+    { month: '11', rain: 400 },
+    { month: '12', rain: 300 },
+  ];
+  let i = 0;
+  timerAll.value = setInterval(() => {
+    size.value = rainArr[i].rain;
+    i++;
+    if (i == 12) i = 0;
+    init(ctx.value);
+  }, 1500);
+}
+
+onMounted(() => {
+  initCanvas();
+});
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+  if (timerAll.value) clearInterval(timerAll.value);
+  clearDraw();
+});
+</script>
+
+<style lang="scss" scoped>
+.canvasRainPage {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 59, 109, 0.2);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
index c6a4e74..2cb1d5d 100644
--- a/src/views/sponeScreen/cityGK/rainfall.vue
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -28,15 +28,13 @@
 
 <script setup>
 import RainfallEcharts from '@/views/sponeScreen/Echarts/RainfallEcharts.vue'; //年际降雨变化
-
 import RainfallLegend from '@/views/sponeScreen/Echarts/RainfallLegend.vue'; //年内降雨量
 import { onBeforeUnmount } from 'vue';
-import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
+import bus from '@/bus';
 
 const chartData2 = ref({
   xAxis: [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2021],
   yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
-  // yAxis2: [7, 9, 10, 9, 11, 10, 12, 15],
   refresh: 1,
 });
 const chartData3 = ref({
@@ -64,91 +62,23 @@
 });
 const activedname = ref('年际降雨变化');
 const weatherTimer = ref(null);
-
-const ContentDetails = ref('');
 const yearList = ref([
   { name: '年际降雨变化', value: 1 },
   { name: '年内降雨量', value: 2 },
 ]);
-const a = ref('');
 
 function yearclick(val) {
-  console.log(val.name, 'val.name');
   activedname.value = val.name;
-  console.log(activedname.value, 'activedname.value ');
-  if (val.name == '年内降雨量') {
-    //消除实时天气效果
-    clearInterval(window.currentWeatherTimer);
-    window.currentWeatherTimer = null;
-    newfiberMap.weatherRemove();
-    let mounthIndex = 0;
-    weatherTimer.value = setInterval(() => {
-      if (mounthIndex == 0) {
-        newfiberMap.weatherSnow({
-          snowSize: 0.01,
-          snowSpeed: 60,
-        });
-      } else if (mounthIndex == 1) {
-        newfiberMap.weatherSnow({
-          snowSize: 0.02,
-          snowSpeed: 100,
-        });
-      } else if (mounthIndex == 6 || mounthIndex == 7) {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 0.1,
-          rainSpeed: 150.0,
-        }); // 暴雨
-      } else if (mounthIndex == 8) {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 0.2,
-          rainSpeed: 150.0,
-        }); // 大
-      } else if (mounthIndex == 5) {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 0.5,
-          rainSpeed: 150.0,
-        }); //中
-      } else {
-        newfiberMap.weatherRain({
-          tiltAngle: -0.2,
-          rainSize: 1,
-          rainSpeed: 150.0,
-        }); //小
-      }
-      mounthIndex = mounthIndex + 1;
-      if (mounthIndex == 12) {
-        mounthIndex = 0;
-      }
-    }, 2000);
-  } else {
-    // clearInterval(weatherTimer.value);
-    // weatherTimer.value = null;
-    // newfiberMap.weatherRemove();
-    // //恢复实时天气效果
-    // window.currentWeatherTimer = null;
-    // newfiberVectorLayer.setCurrentWeather();
-    // window.currentWeatherTimer = setInterval(() => {
-    //   newfiberVectorLayer.setCurrentWeather();
-    // }, 300000);
-  }
+  bus.emit('checkRainL', val.value);
 }
 
-const refresh = ref(1);
-const refresh1 = ref(1);
 onBeforeUnmount(() => {
   clearInterval(weatherTimer.value);
   weatherTimer.value = null;
-  // if (!newfiberMap) return;
-  // newfiberMap.weatherRemove();
 });
 </script>
 
 <style lang="scss" scoped>
-// height: 260px;
-// background: red;
 .HeadContent {
   width: 100%;
   height: 30px;
diff --git a/vite.config.js b/vite.config.js
index 24dcf41..ea36ec6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,8 +7,8 @@
 const Timestamp = new Date().getTime(); //随机时间戳
 
 // const targetUrl = 'http://192.168.16.254:7200'; //孙逢时
-const targetUrl = 'http://192.168.20.52:7300'; //杨辉
-// const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上
+// const targetUrl = 'http://192.168.20.52:7300'; //杨辉
+const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {