diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/layout/components/HeaderSys/index.vue b/src/layout/components/HeaderSys/index.vue
index 45fa42a..fe15a21 100644
--- a/src/layout/components/HeaderSys/index.vue
+++ b/src/layout/components/HeaderSys/index.vue
@@ -51,8 +51,8 @@
     </el-dialog>
 
     <!-- 消息通知弹窗 -->
-    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body>
-      <newsDiaLOG :tableData="tableData"></newsDiaLOG>
+    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
+      <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
       <template>
         <div class="dialog-footer">
           <el-button @click="dialogClose">取 消</el-button>
@@ -159,7 +159,14 @@
     NumPer.value = response.data;
   });
 }
-
+function handleClose() {
+  // dialogNews.value = false;
+  getDataListA();
+}
+function closed() {
+  dialogNews.value = false;
+  getDataListA();
+}
 onMounted(() => {
   // 动态获取路由返回子菜单
   permissionStore.sidebarRouters.map(item => {

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/layout/components/HeaderSys/index.vue b/src/layout/components/HeaderSys/index.vue
index 45fa42a..fe15a21 100644
--- a/src/layout/components/HeaderSys/index.vue
+++ b/src/layout/components/HeaderSys/index.vue
@@ -51,8 +51,8 @@
     </el-dialog>
 
     <!-- 消息通知弹窗 -->
-    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body>
-      <newsDiaLOG :tableData="tableData"></newsDiaLOG>
+    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
+      <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
       <template>
         <div class="dialog-footer">
           <el-button @click="dialogClose">取 消</el-button>
@@ -159,7 +159,14 @@
     NumPer.value = response.data;
   });
 }
-
+function handleClose() {
+  // dialogNews.value = false;
+  getDataListA();
+}
+function closed() {
+  dialogNews.value = false;
+  getDataListA();
+}
 onMounted(() => {
   // 动态获取路由返回子菜单
   permissionStore.sidebarRouters.map(item => {
diff --git a/src/views/sponeScreen/Echarts/DEchart.vue b/src/views/sponeScreen/Echarts/DEchart.vue
new file mode 100644
index 0000000..f9b5d4c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/DEchart.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="line" v-loading="loading">
+    <div class="echarts" ref="echarts"></div>
+    <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
+  </div>
+</template>
+
+<script setup>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
+const props = defineProps({
+  curType: {
+    type: String,
+    default: '',
+  },
+  //站点code
+  stCode: {
+    type: String,
+    default: '',
+  },
+  rainTime: {
+    type: String,
+    default: '',
+  },
+});
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const myChart = shallowRef(null);
+const echartData = {
+  xAxis: [],
+  yAxis: [],
+};
+
+const initEcharts = () => {
+  myChart.value && myChart.value.clear();
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: params => {
+        let str = '';
+        params.forEach(item => {
+          str += `
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
+            <div style="display: flex;align-items: center;">
+              <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
+              <span>${item.seriesName}</span>
+            </div>
+            <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
+          </div>
+        `;
+        });
+        return `
+        <div style="margin: 0px 0 0;line-height:1;width: 180px;">
+          <div>${params[0].axisValue}</div>
+          ${str}
+        </div>
+      `;
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '8%',
+      top: '24%',
+      bottom: '16%',
+    },
+    xAxis: {
+      type: 'category',
+      data: echartData.xAxis,
+      axisLabel: {
+        color: '#D8F4FF',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#53D8FB',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
+        type: 'value',
+        nameTextStyle: {
+          color: '#D1DEEE',
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#005CBA',
+            type: 'dashed',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#005CBA',
+            width: 1,
+            type: 'dashed',
+          },
+          show: true,
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#D1DEEE',
+            type: 'dashed',
+            color: '#53D8FB',
+          },
+        },
+        nameTextStyle: {
+          color: '#fff',
+        },
+      },
+    ],
+    dataZoom: [
+      // {
+      //   //默认控制x轴
+      //   type: 'slider', //图标下方的伸缩条
+      //   // show: true, //是否显示
+
+      //   // realtime: true,
+      //   start: 0, //伸缩条开始位置
+      //   end: 60, //伸缩条结束位置
+      // },
+      {
+        type: 'inside',
+        // xAxisIndex: [0],
+        start: 0,
+        end: 60,
+      },
+    ],
+    series: [
+      {
+        name: '降雨量',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#11FFB3',
+        },
+        smooth: true,
+        data: echartData.yAxis,
+      },
+    ],
+  });
+};
+
+const getData = async () => {
+  console.log(props, '1`');
+  if (props.curType == 'day') return;
+  loading.value = true;
+  let rainTime = '';
+  if (props.curType === 'month') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
+  } else if (props.curType === 'year') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY');
+  }
+  const res = await rainRainlist({
+    rainTime: rainTime,
+    timeType: props.curType,
+    stCode: props.stCode,
+  });
+  loading.value = false;
+  if (res?.code !== 200) return;
+  if (res.data) {
+    echartData.xAxis = res.data.map(item => item.rainTime);
+    echartData.yAxis = res.data.map(item => item.rainCumulative);
+  }
+  initEcharts();
+};
+watch(
+  () => props.curType,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+watch(
+  () => props.stCode,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+watch(
+  () => props.rainTime,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.line {
+  // padding-top: 10px;
+  height: 100%;
+  position: relative;
+
+  .echarts {
+    height: 100%;
+  }
+
+  .xAxisUnit {
+    position: absolute;
+    bottom: 8px;
+    right: 20px;
+    color: #d1deee;
+    font-size: 12px;
+  }
+}
+</style>

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/layout/components/HeaderSys/index.vue b/src/layout/components/HeaderSys/index.vue
index 45fa42a..fe15a21 100644
--- a/src/layout/components/HeaderSys/index.vue
+++ b/src/layout/components/HeaderSys/index.vue
@@ -51,8 +51,8 @@
     </el-dialog>
 
     <!-- 消息通知弹窗 -->
-    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body>
-      <newsDiaLOG :tableData="tableData"></newsDiaLOG>
+    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
+      <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
       <template>
         <div class="dialog-footer">
           <el-button @click="dialogClose">取 消</el-button>
@@ -159,7 +159,14 @@
     NumPer.value = response.data;
   });
 }
-
+function handleClose() {
+  // dialogNews.value = false;
+  getDataListA();
+}
+function closed() {
+  dialogNews.value = false;
+  getDataListA();
+}
 onMounted(() => {
   // 动态获取路由返回子菜单
   permissionStore.sidebarRouters.map(item => {
diff --git a/src/views/sponeScreen/Echarts/DEchart.vue b/src/views/sponeScreen/Echarts/DEchart.vue
new file mode 100644
index 0000000..f9b5d4c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/DEchart.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="line" v-loading="loading">
+    <div class="echarts" ref="echarts"></div>
+    <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
+  </div>
+</template>
+
+<script setup>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
+const props = defineProps({
+  curType: {
+    type: String,
+    default: '',
+  },
+  //站点code
+  stCode: {
+    type: String,
+    default: '',
+  },
+  rainTime: {
+    type: String,
+    default: '',
+  },
+});
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const myChart = shallowRef(null);
+const echartData = {
+  xAxis: [],
+  yAxis: [],
+};
+
+const initEcharts = () => {
+  myChart.value && myChart.value.clear();
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: params => {
+        let str = '';
+        params.forEach(item => {
+          str += `
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
+            <div style="display: flex;align-items: center;">
+              <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
+              <span>${item.seriesName}</span>
+            </div>
+            <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
+          </div>
+        `;
+        });
+        return `
+        <div style="margin: 0px 0 0;line-height:1;width: 180px;">
+          <div>${params[0].axisValue}</div>
+          ${str}
+        </div>
+      `;
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '8%',
+      top: '24%',
+      bottom: '16%',
+    },
+    xAxis: {
+      type: 'category',
+      data: echartData.xAxis,
+      axisLabel: {
+        color: '#D8F4FF',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#53D8FB',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
+        type: 'value',
+        nameTextStyle: {
+          color: '#D1DEEE',
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#005CBA',
+            type: 'dashed',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#005CBA',
+            width: 1,
+            type: 'dashed',
+          },
+          show: true,
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#D1DEEE',
+            type: 'dashed',
+            color: '#53D8FB',
+          },
+        },
+        nameTextStyle: {
+          color: '#fff',
+        },
+      },
+    ],
+    dataZoom: [
+      // {
+      //   //默认控制x轴
+      //   type: 'slider', //图标下方的伸缩条
+      //   // show: true, //是否显示
+
+      //   // realtime: true,
+      //   start: 0, //伸缩条开始位置
+      //   end: 60, //伸缩条结束位置
+      // },
+      {
+        type: 'inside',
+        // xAxisIndex: [0],
+        start: 0,
+        end: 60,
+      },
+    ],
+    series: [
+      {
+        name: '降雨量',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#11FFB3',
+        },
+        smooth: true,
+        data: echartData.yAxis,
+      },
+    ],
+  });
+};
+
+const getData = async () => {
+  console.log(props, '1`');
+  if (props.curType == 'day') return;
+  loading.value = true;
+  let rainTime = '';
+  if (props.curType === 'month') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
+  } else if (props.curType === 'year') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY');
+  }
+  const res = await rainRainlist({
+    rainTime: rainTime,
+    timeType: props.curType,
+    stCode: props.stCode,
+  });
+  loading.value = false;
+  if (res?.code !== 200) return;
+  if (res.data) {
+    echartData.xAxis = res.data.map(item => item.rainTime);
+    echartData.yAxis = res.data.map(item => item.rainCumulative);
+  }
+  initEcharts();
+};
+watch(
+  () => props.curType,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+watch(
+  () => props.stCode,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+watch(
+  () => props.rainTime,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.line {
+  // padding-top: 10px;
+  height: 100%;
+  position: relative;
+
+  .echarts {
+    height: 100%;
+  }
+
+  .xAxisUnit {
+    position: absolute;
+    bottom: 8px;
+    right: 20px;
+    color: #d1deee;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 038626c..ab81c9a 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -2,6 +2,7 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
 import { reactive, toRefs, onMounted, watch, onUnmounted, normalizeStyle } from 'vue';
@@ -113,6 +114,23 @@
             color: '#fff',
           },
         },
+        dataZoom: [
+          // {
+          //   //默认控制x轴
+          //   type: 'slider', //图标下方的伸缩条
+          //   // show: true, //是否显示
+
+          //   // realtime: true,
+          //   start: 0, //伸缩条开始位置
+          //   end: 60, //伸缩条结束位置
+          // },
+          {
+            type: 'inside',
+            // xAxisIndex: [0],
+            start: 0,
+            end: 60,
+          },
+        ],
         series: [
           {
             data: props.echartData.seriesData,

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/layout/components/HeaderSys/index.vue b/src/layout/components/HeaderSys/index.vue
index 45fa42a..fe15a21 100644
--- a/src/layout/components/HeaderSys/index.vue
+++ b/src/layout/components/HeaderSys/index.vue
@@ -51,8 +51,8 @@
     </el-dialog>
 
     <!-- 消息通知弹窗 -->
-    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body>
-      <newsDiaLOG :tableData="tableData"></newsDiaLOG>
+    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
+      <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
       <template>
         <div class="dialog-footer">
           <el-button @click="dialogClose">取 消</el-button>
@@ -159,7 +159,14 @@
     NumPer.value = response.data;
   });
 }
-
+function handleClose() {
+  // dialogNews.value = false;
+  getDataListA();
+}
+function closed() {
+  dialogNews.value = false;
+  getDataListA();
+}
 onMounted(() => {
   // 动态获取路由返回子菜单
   permissionStore.sidebarRouters.map(item => {
diff --git a/src/views/sponeScreen/Echarts/DEchart.vue b/src/views/sponeScreen/Echarts/DEchart.vue
new file mode 100644
index 0000000..f9b5d4c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/DEchart.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="line" v-loading="loading">
+    <div class="echarts" ref="echarts"></div>
+    <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
+  </div>
+</template>
+
+<script setup>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
+const props = defineProps({
+  curType: {
+    type: String,
+    default: '',
+  },
+  //站点code
+  stCode: {
+    type: String,
+    default: '',
+  },
+  rainTime: {
+    type: String,
+    default: '',
+  },
+});
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const myChart = shallowRef(null);
+const echartData = {
+  xAxis: [],
+  yAxis: [],
+};
+
+const initEcharts = () => {
+  myChart.value && myChart.value.clear();
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: params => {
+        let str = '';
+        params.forEach(item => {
+          str += `
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
+            <div style="display: flex;align-items: center;">
+              <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
+              <span>${item.seriesName}</span>
+            </div>
+            <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
+          </div>
+        `;
+        });
+        return `
+        <div style="margin: 0px 0 0;line-height:1;width: 180px;">
+          <div>${params[0].axisValue}</div>
+          ${str}
+        </div>
+      `;
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '8%',
+      top: '24%',
+      bottom: '16%',
+    },
+    xAxis: {
+      type: 'category',
+      data: echartData.xAxis,
+      axisLabel: {
+        color: '#D8F4FF',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#53D8FB',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
+        type: 'value',
+        nameTextStyle: {
+          color: '#D1DEEE',
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#005CBA',
+            type: 'dashed',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#005CBA',
+            width: 1,
+            type: 'dashed',
+          },
+          show: true,
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#D1DEEE',
+            type: 'dashed',
+            color: '#53D8FB',
+          },
+        },
+        nameTextStyle: {
+          color: '#fff',
+        },
+      },
+    ],
+    dataZoom: [
+      // {
+      //   //默认控制x轴
+      //   type: 'slider', //图标下方的伸缩条
+      //   // show: true, //是否显示
+
+      //   // realtime: true,
+      //   start: 0, //伸缩条开始位置
+      //   end: 60, //伸缩条结束位置
+      // },
+      {
+        type: 'inside',
+        // xAxisIndex: [0],
+        start: 0,
+        end: 60,
+      },
+    ],
+    series: [
+      {
+        name: '降雨量',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#11FFB3',
+        },
+        smooth: true,
+        data: echartData.yAxis,
+      },
+    ],
+  });
+};
+
+const getData = async () => {
+  console.log(props, '1`');
+  if (props.curType == 'day') return;
+  loading.value = true;
+  let rainTime = '';
+  if (props.curType === 'month') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
+  } else if (props.curType === 'year') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY');
+  }
+  const res = await rainRainlist({
+    rainTime: rainTime,
+    timeType: props.curType,
+    stCode: props.stCode,
+  });
+  loading.value = false;
+  if (res?.code !== 200) return;
+  if (res.data) {
+    echartData.xAxis = res.data.map(item => item.rainTime);
+    echartData.yAxis = res.data.map(item => item.rainCumulative);
+  }
+  initEcharts();
+};
+watch(
+  () => props.curType,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+watch(
+  () => props.stCode,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+watch(
+  () => props.rainTime,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.line {
+  // padding-top: 10px;
+  height: 100%;
+  position: relative;
+
+  .echarts {
+    height: 100%;
+  }
+
+  .xAxisUnit {
+    position: absolute;
+    bottom: 8px;
+    right: 20px;
+    color: #d1deee;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 038626c..ab81c9a 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -2,6 +2,7 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
 import { reactive, toRefs, onMounted, watch, onUnmounted, normalizeStyle } from 'vue';
@@ -113,6 +114,23 @@
             color: '#fff',
           },
         },
+        dataZoom: [
+          // {
+          //   //默认控制x轴
+          //   type: 'slider', //图标下方的伸缩条
+          //   // show: true, //是否显示
+
+          //   // realtime: true,
+          //   start: 0, //伸缩条开始位置
+          //   end: 60, //伸缩条结束位置
+          // },
+          {
+            type: 'inside',
+            // xAxisIndex: [0],
+            start: 0,
+            end: 60,
+          },
+        ],
         series: [
           {
             data: props.echartData.seriesData,
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
index 2b207a1..9c91e0d 100644
--- a/src/views/sponeScreen/waterFlood/rainCaldar.vue
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -3,34 +3,28 @@
   <div class="rainCaldarPage">
     <div class="partTitleHM">
       降雨日历
+
       <el-date-picker
-        type="date"
-        v-model="dateDay"
-        value-format="YYYY-MM-DD"
+        v-model="rangeTime"
+        :type="dateIndex == 'day' ? 'date' : dateIndex == 'month' ? 'month' : dateIndex == 'year' ? 'year' : ''"
+        :value-format="dateIndex == 'day' ? 'YYYY-MM-DD' : dateIndex == 'month' ? 'YYYY-MM' : dateIndex == 'year' ? 'YYYY' : ''"
         placeholder="请选择日期"
-        class="dateCal"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'day'"
-      />
-      <el-date-picker
-        type="month"
-        v-model="dateMonth"
-        value-format="YYYY-MM"
-        placeholder="请选择日期"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'month'"
-      />
-      <el-date-picker
-        type="year"
-        v-model="dateYear"
-        value-format="YYYY"
-        placeholder="请选择日期"
-        size="small"
-        v-if="dateIndex == 'year'"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-      />
+        :cell-class-name="cellClassNameFn"
+        popper-class="jianCePopperClass"
+        :clearable="false"
+        :disabled-date="disabledDateFun"
+        @change="datePickerChange"
+        style="float: right; width: 130px; margin: 5px 50px 0px 0px"
+      >
+        <template #default="cell">
+          <div class="el-date-table-cell">
+            <span class="el-date-table-cell__text">{{ cell.text }}</span>
+            <span class="rain_value" v-if="rainObj[moment(cell.date).format('YYYY-MM-DD')]"
+              >{{ rainObj[moment(cell.date).format('YYYY-MM-DD')] }}mm</span
+            >
+          </div>
+        </template>
+      </el-date-picker>
     </div>
     <div class="partContHM">
       <div class="flex flex-justcontent-spacebetween">
@@ -38,74 +32,155 @@
         <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
         <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
         <el-select clearable filterable v-model="rainCode" placeholder="请选择雨量站" style="width: 150px">
-          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          <el-option
+            v-for="dict in rainList"
+            :key="dict.stCode"
+            :label="dict.stName"
+            :value="dict.stCode"
+            @click="selectRainSite"
+          ></el-option>
         </el-select>
       </div>
       <!-- 日 -->
       <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
         <div class="part">
           <p>日期</p>
-          <p>{{ monDay }}<br />{{ yearDay }}</p>
+          <p>{{ AllData.curDate }}<br />{{ AllData.curYear }}</p>
         </div>
         <div class="part">
           <p>累计降雨量</p>
-          <p>15<br />mm/24h</p>
+          <p>{{ curInfo?.rainCumulative }}<br />mm/24h</p>
         </div>
         <div class="part">
           <p>雨强</p>
-          <p style="padding-top: 15px">小雨</p>
+          <p style="padding-top: 15px" v-if="curInfo?.rainLevel">{{ level[curInfo?.rainLevel] }}</p>
         </div>
       </div>
       <!-- 月 -->
       <div class="partDay" v-if="dateIndex == 'month'">
-        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
+        <DEchart curType="month" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
 
       <!-- 年 -->
       <div class="partDay" v-if="dateIndex == 'year'">
-        <ChartBar3D :refresh="refresh2" :echartData="echartData2"></ChartBar3D>
+        <DEchart curType="year" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
+import { rainRainDaylist } from '@/api/newPageline/riverCapacity.js';
+import DEchart from '@/views/sponeScreen/Echarts/DEchart.vue';
+import { getStationList } from '@/api/dataAnalysis/syntherticData';
 const { proxy } = getCurrentInstance();
-
-const monDay = ref(proxy.moment(new Date()).format('MM-DD'));
-const yearDay = ref(proxy.moment(new Date()).format('YYYY'));
-const dateDay = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
-const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const dateYear = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const rainCode = ref('1');
-const rainList = ref([
-  { value: '1', label: '汴京路雨量站' },
-  { value: '2', label: '黄河路雨量站' },
-]);
+const rainCode = ref('');
+const rangeTime = ref('');
+const curInfo = ref({});
+const rainObj = ref({});
+const currentType = ref('time'); //当前类型,区分是点击时间还是站点
+const level = {
+  '0_NAN': '无降雨',
+  '1_SMALL': '小雨',
+  '2_MIDDLE': '中雨',
+  '3_LARGE': '大雨',
+  '4_STORM': '暴雨',
+  '5_LARGE_STORM': '大暴雨',
+  '6_EX_LARGE_STORM': '特大暴雨',
+};
+const checkedList = ref([]);
+const rainList = ref([]);
 const dateIndex = ref('day');
-const refresh = ref(1);
-const echartData = ref({
-  xAxis: ['06-01', '06-05', '06-10', '06-15', '06-20', '06-25', '06-30'],
-  yName: '降雨量mm',
-  seriesData: [23.2, 10, 0, 12, 5, 19, 56],
-  seriesDataMax: [100, 100, 100, 100, 100, 100, 100],
+const AllData = reactive({
+  curDate: '',
+  curYear: '',
 });
 
-const refresh2 = ref(1);
-const echartData2 = ref({
-  xAxis: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-  yName: '降雨量mm',
-  seriesData: [123.2, 100, 60, 102, 85, 19, 123.2, 100, 60, 42, 59, 99],
-  seriesDataMax: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
-});
+const cellClassNameFn = data => {
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (time === rangeTime.value) {
+    return 'current';
+  }
+  const list = checkedList.value.map(item => item.rainTime);
+  if (list.includes(time)) {
+    return 'checked';
+  }
+};
+const disabledDateFun = data => {
+  if (dateIndex.value != 'day') return;
+  const list = checkedList.value.map(item => item.rainTime);
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (list.includes(time)) {
+    return false;
+  } else {
+    return true;
+  }
+};
 
 // 点击切换
 function changeDate(val) {
   dateIndex.value = val;
+  console.log(dateIndex.value, 'dateIndex.value');
+  let valueFormat =
+    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
+  rangeTime.value = proxy.moment().format(valueFormat);
+  currentType.value = '';
+
+  getBasRainTimeSectionListFn();
 }
 
-onMounted(() => {});
+//获取站点数据
+const getStationData = async () => {
+  let res = await getStationList();
+  if (res && res.code == 200) {
+    let datas = res.data;
+    rainList.value = datas || [];
+    rainCode.value = rainList.value[0].stCode;
+    getBasRainTimeSectionListFn();
+  }
+};
+
+//选择站点
+const selectRainSite = () => {
+  currentType.value = '';
+  getBasRainTimeSectionListFn();
+};
+//选择降雨时间
+const datePickerChange = val => {
+  console.log(val);
+  currentType.value = 'time';
+  if (dateIndex.value == 'day') {
+    handelData();
+  }
+};
+
+function getBasRainTimeSectionListFn() {
+  if (dateIndex.value != 'day') return;
+  let prams = {
+    stCode: rainCode.value,
+  };
+  rainRainDaylist(prams).then(res => {
+    if (res?.code !== 200) return;
+    checkedList.value = res.data || [];
+    checkedList.value.forEach(item => {
+      rainObj.value[item.rainTime] = item.rainCumulative;
+    });
+    rangeTime.value = checkedList.value.length ? checkedList.value[0].rainTime : '';
+    handelData();
+  });
+}
+
+const handelData = () => {
+  let arrData = checkedList.value.filter(item => item.rainTime == rangeTime.value);
+  curInfo.value = arrData ? arrData[0] : '';
+  rangeTime.value = curInfo.value?.rainTime;
+  AllData.curDate = proxy.moment(rangeTime.value).format('MM-DD');
+  AllData.curYear = proxy.moment(rangeTime.value).format('YYYY');
+};
+
+onMounted(() => {
+  getStationData();
+});
 </script>
 
 <style lang="scss">
@@ -154,4 +229,51 @@
     }
   }
 }
+.jianCePopperClass {
+  // width: 400px;
+
+  .el-date-table {
+    td {
+      &.disabled {
+        .el-date-table-cell {
+          opacity: 0.5;
+          background-color: #ccc !important;
+          // border-radius: 50%;
+          // width: 24px;
+          // height: 24px;
+          // line-height: 24px;
+        }
+      }
+
+      &.checked {
+        &:not(.current) {
+          .el-date-table-cell {
+            .el-date-table-cell__text {
+              // background-color: #d08f5a;
+              // color: #fff;
+              // color: #d08f5a;
+              // font-weight: bolder;'
+
+              color: #ffffff;
+              font-weight: bolder;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.el-date-table-cell {
+  position: relative;
+
+  .rain_value {
+    position: absolute;
+    left: 2px !important;
+    top: 15px;
+    color: yellow;
+    font-size: 10px;
+    font-weight: bolder;
+  }
+}
 </style>

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/layout/components/HeaderSys/index.vue b/src/layout/components/HeaderSys/index.vue
index 45fa42a..fe15a21 100644
--- a/src/layout/components/HeaderSys/index.vue
+++ b/src/layout/components/HeaderSys/index.vue
@@ -51,8 +51,8 @@
     </el-dialog>
 
     <!-- 消息通知弹窗 -->
-    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body>
-      <newsDiaLOG :tableData="tableData"></newsDiaLOG>
+    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
+      <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
       <template>
         <div class="dialog-footer">
           <el-button @click="dialogClose">取 消</el-button>
@@ -159,7 +159,14 @@
     NumPer.value = response.data;
   });
 }
-
+function handleClose() {
+  // dialogNews.value = false;
+  getDataListA();
+}
+function closed() {
+  dialogNews.value = false;
+  getDataListA();
+}
 onMounted(() => {
   // 动态获取路由返回子菜单
   permissionStore.sidebarRouters.map(item => {
diff --git a/src/views/sponeScreen/Echarts/DEchart.vue b/src/views/sponeScreen/Echarts/DEchart.vue
new file mode 100644
index 0000000..f9b5d4c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/DEchart.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="line" v-loading="loading">
+    <div class="echarts" ref="echarts"></div>
+    <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
+  </div>
+</template>
+
+<script setup>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
+const props = defineProps({
+  curType: {
+    type: String,
+    default: '',
+  },
+  //站点code
+  stCode: {
+    type: String,
+    default: '',
+  },
+  rainTime: {
+    type: String,
+    default: '',
+  },
+});
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const myChart = shallowRef(null);
+const echartData = {
+  xAxis: [],
+  yAxis: [],
+};
+
+const initEcharts = () => {
+  myChart.value && myChart.value.clear();
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: params => {
+        let str = '';
+        params.forEach(item => {
+          str += `
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
+            <div style="display: flex;align-items: center;">
+              <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
+              <span>${item.seriesName}</span>
+            </div>
+            <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
+          </div>
+        `;
+        });
+        return `
+        <div style="margin: 0px 0 0;line-height:1;width: 180px;">
+          <div>${params[0].axisValue}</div>
+          ${str}
+        </div>
+      `;
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '8%',
+      top: '24%',
+      bottom: '16%',
+    },
+    xAxis: {
+      type: 'category',
+      data: echartData.xAxis,
+      axisLabel: {
+        color: '#D8F4FF',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#53D8FB',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
+        type: 'value',
+        nameTextStyle: {
+          color: '#D1DEEE',
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#005CBA',
+            type: 'dashed',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#005CBA',
+            width: 1,
+            type: 'dashed',
+          },
+          show: true,
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#D1DEEE',
+            type: 'dashed',
+            color: '#53D8FB',
+          },
+        },
+        nameTextStyle: {
+          color: '#fff',
+        },
+      },
+    ],
+    dataZoom: [
+      // {
+      //   //默认控制x轴
+      //   type: 'slider', //图标下方的伸缩条
+      //   // show: true, //是否显示
+
+      //   // realtime: true,
+      //   start: 0, //伸缩条开始位置
+      //   end: 60, //伸缩条结束位置
+      // },
+      {
+        type: 'inside',
+        // xAxisIndex: [0],
+        start: 0,
+        end: 60,
+      },
+    ],
+    series: [
+      {
+        name: '降雨量',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#11FFB3',
+        },
+        smooth: true,
+        data: echartData.yAxis,
+      },
+    ],
+  });
+};
+
+const getData = async () => {
+  console.log(props, '1`');
+  if (props.curType == 'day') return;
+  loading.value = true;
+  let rainTime = '';
+  if (props.curType === 'month') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
+  } else if (props.curType === 'year') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY');
+  }
+  const res = await rainRainlist({
+    rainTime: rainTime,
+    timeType: props.curType,
+    stCode: props.stCode,
+  });
+  loading.value = false;
+  if (res?.code !== 200) return;
+  if (res.data) {
+    echartData.xAxis = res.data.map(item => item.rainTime);
+    echartData.yAxis = res.data.map(item => item.rainCumulative);
+  }
+  initEcharts();
+};
+watch(
+  () => props.curType,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+watch(
+  () => props.stCode,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+watch(
+  () => props.rainTime,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.line {
+  // padding-top: 10px;
+  height: 100%;
+  position: relative;
+
+  .echarts {
+    height: 100%;
+  }
+
+  .xAxisUnit {
+    position: absolute;
+    bottom: 8px;
+    right: 20px;
+    color: #d1deee;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 038626c..ab81c9a 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -2,6 +2,7 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
 import { reactive, toRefs, onMounted, watch, onUnmounted, normalizeStyle } from 'vue';
@@ -113,6 +114,23 @@
             color: '#fff',
           },
         },
+        dataZoom: [
+          // {
+          //   //默认控制x轴
+          //   type: 'slider', //图标下方的伸缩条
+          //   // show: true, //是否显示
+
+          //   // realtime: true,
+          //   start: 0, //伸缩条开始位置
+          //   end: 60, //伸缩条结束位置
+          // },
+          {
+            type: 'inside',
+            // xAxisIndex: [0],
+            start: 0,
+            end: 60,
+          },
+        ],
         series: [
           {
             data: props.echartData.seriesData,
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
index 2b207a1..9c91e0d 100644
--- a/src/views/sponeScreen/waterFlood/rainCaldar.vue
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -3,34 +3,28 @@
   <div class="rainCaldarPage">
     <div class="partTitleHM">
       降雨日历
+
       <el-date-picker
-        type="date"
-        v-model="dateDay"
-        value-format="YYYY-MM-DD"
+        v-model="rangeTime"
+        :type="dateIndex == 'day' ? 'date' : dateIndex == 'month' ? 'month' : dateIndex == 'year' ? 'year' : ''"
+        :value-format="dateIndex == 'day' ? 'YYYY-MM-DD' : dateIndex == 'month' ? 'YYYY-MM' : dateIndex == 'year' ? 'YYYY' : ''"
         placeholder="请选择日期"
-        class="dateCal"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'day'"
-      />
-      <el-date-picker
-        type="month"
-        v-model="dateMonth"
-        value-format="YYYY-MM"
-        placeholder="请选择日期"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'month'"
-      />
-      <el-date-picker
-        type="year"
-        v-model="dateYear"
-        value-format="YYYY"
-        placeholder="请选择日期"
-        size="small"
-        v-if="dateIndex == 'year'"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-      />
+        :cell-class-name="cellClassNameFn"
+        popper-class="jianCePopperClass"
+        :clearable="false"
+        :disabled-date="disabledDateFun"
+        @change="datePickerChange"
+        style="float: right; width: 130px; margin: 5px 50px 0px 0px"
+      >
+        <template #default="cell">
+          <div class="el-date-table-cell">
+            <span class="el-date-table-cell__text">{{ cell.text }}</span>
+            <span class="rain_value" v-if="rainObj[moment(cell.date).format('YYYY-MM-DD')]"
+              >{{ rainObj[moment(cell.date).format('YYYY-MM-DD')] }}mm</span
+            >
+          </div>
+        </template>
+      </el-date-picker>
     </div>
     <div class="partContHM">
       <div class="flex flex-justcontent-spacebetween">
@@ -38,74 +32,155 @@
         <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
         <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
         <el-select clearable filterable v-model="rainCode" placeholder="请选择雨量站" style="width: 150px">
-          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          <el-option
+            v-for="dict in rainList"
+            :key="dict.stCode"
+            :label="dict.stName"
+            :value="dict.stCode"
+            @click="selectRainSite"
+          ></el-option>
         </el-select>
       </div>
       <!-- 日 -->
       <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
         <div class="part">
           <p>日期</p>
-          <p>{{ monDay }}<br />{{ yearDay }}</p>
+          <p>{{ AllData.curDate }}<br />{{ AllData.curYear }}</p>
         </div>
         <div class="part">
           <p>累计降雨量</p>
-          <p>15<br />mm/24h</p>
+          <p>{{ curInfo?.rainCumulative }}<br />mm/24h</p>
         </div>
         <div class="part">
           <p>雨强</p>
-          <p style="padding-top: 15px">小雨</p>
+          <p style="padding-top: 15px" v-if="curInfo?.rainLevel">{{ level[curInfo?.rainLevel] }}</p>
         </div>
       </div>
       <!-- 月 -->
       <div class="partDay" v-if="dateIndex == 'month'">
-        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
+        <DEchart curType="month" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
 
       <!-- 年 -->
       <div class="partDay" v-if="dateIndex == 'year'">
-        <ChartBar3D :refresh="refresh2" :echartData="echartData2"></ChartBar3D>
+        <DEchart curType="year" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
+import { rainRainDaylist } from '@/api/newPageline/riverCapacity.js';
+import DEchart from '@/views/sponeScreen/Echarts/DEchart.vue';
+import { getStationList } from '@/api/dataAnalysis/syntherticData';
 const { proxy } = getCurrentInstance();
-
-const monDay = ref(proxy.moment(new Date()).format('MM-DD'));
-const yearDay = ref(proxy.moment(new Date()).format('YYYY'));
-const dateDay = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
-const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const dateYear = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const rainCode = ref('1');
-const rainList = ref([
-  { value: '1', label: '汴京路雨量站' },
-  { value: '2', label: '黄河路雨量站' },
-]);
+const rainCode = ref('');
+const rangeTime = ref('');
+const curInfo = ref({});
+const rainObj = ref({});
+const currentType = ref('time'); //当前类型,区分是点击时间还是站点
+const level = {
+  '0_NAN': '无降雨',
+  '1_SMALL': '小雨',
+  '2_MIDDLE': '中雨',
+  '3_LARGE': '大雨',
+  '4_STORM': '暴雨',
+  '5_LARGE_STORM': '大暴雨',
+  '6_EX_LARGE_STORM': '特大暴雨',
+};
+const checkedList = ref([]);
+const rainList = ref([]);
 const dateIndex = ref('day');
-const refresh = ref(1);
-const echartData = ref({
-  xAxis: ['06-01', '06-05', '06-10', '06-15', '06-20', '06-25', '06-30'],
-  yName: '降雨量mm',
-  seriesData: [23.2, 10, 0, 12, 5, 19, 56],
-  seriesDataMax: [100, 100, 100, 100, 100, 100, 100],
+const AllData = reactive({
+  curDate: '',
+  curYear: '',
 });
 
-const refresh2 = ref(1);
-const echartData2 = ref({
-  xAxis: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-  yName: '降雨量mm',
-  seriesData: [123.2, 100, 60, 102, 85, 19, 123.2, 100, 60, 42, 59, 99],
-  seriesDataMax: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
-});
+const cellClassNameFn = data => {
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (time === rangeTime.value) {
+    return 'current';
+  }
+  const list = checkedList.value.map(item => item.rainTime);
+  if (list.includes(time)) {
+    return 'checked';
+  }
+};
+const disabledDateFun = data => {
+  if (dateIndex.value != 'day') return;
+  const list = checkedList.value.map(item => item.rainTime);
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (list.includes(time)) {
+    return false;
+  } else {
+    return true;
+  }
+};
 
 // 点击切换
 function changeDate(val) {
   dateIndex.value = val;
+  console.log(dateIndex.value, 'dateIndex.value');
+  let valueFormat =
+    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
+  rangeTime.value = proxy.moment().format(valueFormat);
+  currentType.value = '';
+
+  getBasRainTimeSectionListFn();
 }
 
-onMounted(() => {});
+//获取站点数据
+const getStationData = async () => {
+  let res = await getStationList();
+  if (res && res.code == 200) {
+    let datas = res.data;
+    rainList.value = datas || [];
+    rainCode.value = rainList.value[0].stCode;
+    getBasRainTimeSectionListFn();
+  }
+};
+
+//选择站点
+const selectRainSite = () => {
+  currentType.value = '';
+  getBasRainTimeSectionListFn();
+};
+//选择降雨时间
+const datePickerChange = val => {
+  console.log(val);
+  currentType.value = 'time';
+  if (dateIndex.value == 'day') {
+    handelData();
+  }
+};
+
+function getBasRainTimeSectionListFn() {
+  if (dateIndex.value != 'day') return;
+  let prams = {
+    stCode: rainCode.value,
+  };
+  rainRainDaylist(prams).then(res => {
+    if (res?.code !== 200) return;
+    checkedList.value = res.data || [];
+    checkedList.value.forEach(item => {
+      rainObj.value[item.rainTime] = item.rainCumulative;
+    });
+    rangeTime.value = checkedList.value.length ? checkedList.value[0].rainTime : '';
+    handelData();
+  });
+}
+
+const handelData = () => {
+  let arrData = checkedList.value.filter(item => item.rainTime == rangeTime.value);
+  curInfo.value = arrData ? arrData[0] : '';
+  rangeTime.value = curInfo.value?.rainTime;
+  AllData.curDate = proxy.moment(rangeTime.value).format('MM-DD');
+  AllData.curYear = proxy.moment(rangeTime.value).format('YYYY');
+};
+
+onMounted(() => {
+  getStationData();
+});
 </script>
 
 <style lang="scss">
@@ -154,4 +229,51 @@
     }
   }
 }
+.jianCePopperClass {
+  // width: 400px;
+
+  .el-date-table {
+    td {
+      &.disabled {
+        .el-date-table-cell {
+          opacity: 0.5;
+          background-color: #ccc !important;
+          // border-radius: 50%;
+          // width: 24px;
+          // height: 24px;
+          // line-height: 24px;
+        }
+      }
+
+      &.checked {
+        &:not(.current) {
+          .el-date-table-cell {
+            .el-date-table-cell__text {
+              // background-color: #d08f5a;
+              // color: #fff;
+              // color: #d08f5a;
+              // font-weight: bolder;'
+
+              color: #ffffff;
+              font-weight: bolder;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.el-date-table-cell {
+  position: relative;
+
+  .rain_value {
+    position: absolute;
+    left: 2px !important;
+    top: 15px;
+    color: yellow;
+    font-size: 10px;
+    font-weight: bolder;
+  }
+}
 </style>
diff --git a/src/views/sponeScreen/waterFlood/rainReport.vue b/src/views/sponeScreen/waterFlood/rainReport.vue
index bfbe0fa..a24b199 100644
--- a/src/views/sponeScreen/waterFlood/rainReport.vue
+++ b/src/views/sponeScreen/waterFlood/rainReport.vue
@@ -18,10 +18,12 @@
         </div>
         <Vue3SeamlessScroll :list="dataList" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
           <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
-            <p class="ellipsis">{{ item.start }}</p>
-            <p class="ellipsis">{{ item.end }}</p>
-            <p class="ellipsis">{{ item.yq }}</p>
-            <p class="ellipsis">{{ item.num }}mm</p>
+            <p class="ellipsis" :title="item.startTime">{{ item.startTime }}</p>
+            <p class="ellipsis" :title="item.endTime">{{ item.endTime }}</p>
+            <p class="ellipsis">
+              <dict-tag :options="rainfall_intensity" :value="String(item.rainIntensity)" />
+            </p>
+            <p class="ellipsis">{{ item.accumulate }}mm</p>
             <p class="ellipsis reports" @click="checkReport(item)">查看报告</p>
           </div>
         </Vue3SeamlessScroll>
@@ -39,32 +41,38 @@
 </template>
 
 <script setup>
+import { rainfallSessionInfoList } from '@/api/publicService/index';
+
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue'; //查看报告单
 import RiskDetail from '@/views/floodSys/floodYP/riskAsses.vue'; //内涝模型
 
 const { proxy } = getCurrentInstance();
+const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度  字典数据
 const dialogShowDetail = ref(false);
 const dialogShowModal = ref(false);
 const rainId = ref('');
 
-const dataList = ref([
-  { start: '2024-04-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-04-13 10:12:20', end: '2024-06-12 13:12:20', yq: '大雨', num: 24.2, id: 1 },
-  { start: '2024-05-12 10:12:20', end: '2024-06-12 13:12:20', yq: '中雨', num: 8.5, id: 1 },
-  { start: '2024-05-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-18 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-]);
+const dataList = ref([]);
+
+// 获取降雨报告数据
+async function getJYData() {
+  let res = await rainfallSessionInfoList();
+  if (res && res.code == 200) {
+    dataList.value = res.data;
+    console.log(dataList.value, '123213');
+  }
+}
 
 // 查看报告
 function checkReport(item) {
-  rainId.value = '1804215833354420225';
+  rainId.value = item.id;
   dialogShowDetail.value = true;
 }
 
-onMounted(() => {});
+onMounted(() => {
+  getJYData();
+});
 </script>
 
 <style lang="scss">

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/layout/components/HeaderSys/index.vue b/src/layout/components/HeaderSys/index.vue
index 45fa42a..fe15a21 100644
--- a/src/layout/components/HeaderSys/index.vue
+++ b/src/layout/components/HeaderSys/index.vue
@@ -51,8 +51,8 @@
     </el-dialog>
 
     <!-- 消息通知弹窗 -->
-    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body>
-      <newsDiaLOG :tableData="tableData"></newsDiaLOG>
+    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
+      <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
       <template>
         <div class="dialog-footer">
           <el-button @click="dialogClose">取 消</el-button>
@@ -159,7 +159,14 @@
     NumPer.value = response.data;
   });
 }
-
+function handleClose() {
+  // dialogNews.value = false;
+  getDataListA();
+}
+function closed() {
+  dialogNews.value = false;
+  getDataListA();
+}
 onMounted(() => {
   // 动态获取路由返回子菜单
   permissionStore.sidebarRouters.map(item => {
diff --git a/src/views/sponeScreen/Echarts/DEchart.vue b/src/views/sponeScreen/Echarts/DEchart.vue
new file mode 100644
index 0000000..f9b5d4c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/DEchart.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="line" v-loading="loading">
+    <div class="echarts" ref="echarts"></div>
+    <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
+  </div>
+</template>
+
+<script setup>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
+const props = defineProps({
+  curType: {
+    type: String,
+    default: '',
+  },
+  //站点code
+  stCode: {
+    type: String,
+    default: '',
+  },
+  rainTime: {
+    type: String,
+    default: '',
+  },
+});
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const myChart = shallowRef(null);
+const echartData = {
+  xAxis: [],
+  yAxis: [],
+};
+
+const initEcharts = () => {
+  myChart.value && myChart.value.clear();
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: params => {
+        let str = '';
+        params.forEach(item => {
+          str += `
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
+            <div style="display: flex;align-items: center;">
+              <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
+              <span>${item.seriesName}</span>
+            </div>
+            <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
+          </div>
+        `;
+        });
+        return `
+        <div style="margin: 0px 0 0;line-height:1;width: 180px;">
+          <div>${params[0].axisValue}</div>
+          ${str}
+        </div>
+      `;
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '8%',
+      top: '24%',
+      bottom: '16%',
+    },
+    xAxis: {
+      type: 'category',
+      data: echartData.xAxis,
+      axisLabel: {
+        color: '#D8F4FF',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#53D8FB',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
+        type: 'value',
+        nameTextStyle: {
+          color: '#D1DEEE',
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#005CBA',
+            type: 'dashed',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#005CBA',
+            width: 1,
+            type: 'dashed',
+          },
+          show: true,
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#D1DEEE',
+            type: 'dashed',
+            color: '#53D8FB',
+          },
+        },
+        nameTextStyle: {
+          color: '#fff',
+        },
+      },
+    ],
+    dataZoom: [
+      // {
+      //   //默认控制x轴
+      //   type: 'slider', //图标下方的伸缩条
+      //   // show: true, //是否显示
+
+      //   // realtime: true,
+      //   start: 0, //伸缩条开始位置
+      //   end: 60, //伸缩条结束位置
+      // },
+      {
+        type: 'inside',
+        // xAxisIndex: [0],
+        start: 0,
+        end: 60,
+      },
+    ],
+    series: [
+      {
+        name: '降雨量',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#11FFB3',
+        },
+        smooth: true,
+        data: echartData.yAxis,
+      },
+    ],
+  });
+};
+
+const getData = async () => {
+  console.log(props, '1`');
+  if (props.curType == 'day') return;
+  loading.value = true;
+  let rainTime = '';
+  if (props.curType === 'month') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
+  } else if (props.curType === 'year') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY');
+  }
+  const res = await rainRainlist({
+    rainTime: rainTime,
+    timeType: props.curType,
+    stCode: props.stCode,
+  });
+  loading.value = false;
+  if (res?.code !== 200) return;
+  if (res.data) {
+    echartData.xAxis = res.data.map(item => item.rainTime);
+    echartData.yAxis = res.data.map(item => item.rainCumulative);
+  }
+  initEcharts();
+};
+watch(
+  () => props.curType,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+watch(
+  () => props.stCode,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+watch(
+  () => props.rainTime,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.line {
+  // padding-top: 10px;
+  height: 100%;
+  position: relative;
+
+  .echarts {
+    height: 100%;
+  }
+
+  .xAxisUnit {
+    position: absolute;
+    bottom: 8px;
+    right: 20px;
+    color: #d1deee;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 038626c..ab81c9a 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -2,6 +2,7 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
 import { reactive, toRefs, onMounted, watch, onUnmounted, normalizeStyle } from 'vue';
@@ -113,6 +114,23 @@
             color: '#fff',
           },
         },
+        dataZoom: [
+          // {
+          //   //默认控制x轴
+          //   type: 'slider', //图标下方的伸缩条
+          //   // show: true, //是否显示
+
+          //   // realtime: true,
+          //   start: 0, //伸缩条开始位置
+          //   end: 60, //伸缩条结束位置
+          // },
+          {
+            type: 'inside',
+            // xAxisIndex: [0],
+            start: 0,
+            end: 60,
+          },
+        ],
         series: [
           {
             data: props.echartData.seriesData,
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
index 2b207a1..9c91e0d 100644
--- a/src/views/sponeScreen/waterFlood/rainCaldar.vue
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -3,34 +3,28 @@
   <div class="rainCaldarPage">
     <div class="partTitleHM">
       降雨日历
+
       <el-date-picker
-        type="date"
-        v-model="dateDay"
-        value-format="YYYY-MM-DD"
+        v-model="rangeTime"
+        :type="dateIndex == 'day' ? 'date' : dateIndex == 'month' ? 'month' : dateIndex == 'year' ? 'year' : ''"
+        :value-format="dateIndex == 'day' ? 'YYYY-MM-DD' : dateIndex == 'month' ? 'YYYY-MM' : dateIndex == 'year' ? 'YYYY' : ''"
         placeholder="请选择日期"
-        class="dateCal"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'day'"
-      />
-      <el-date-picker
-        type="month"
-        v-model="dateMonth"
-        value-format="YYYY-MM"
-        placeholder="请选择日期"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'month'"
-      />
-      <el-date-picker
-        type="year"
-        v-model="dateYear"
-        value-format="YYYY"
-        placeholder="请选择日期"
-        size="small"
-        v-if="dateIndex == 'year'"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-      />
+        :cell-class-name="cellClassNameFn"
+        popper-class="jianCePopperClass"
+        :clearable="false"
+        :disabled-date="disabledDateFun"
+        @change="datePickerChange"
+        style="float: right; width: 130px; margin: 5px 50px 0px 0px"
+      >
+        <template #default="cell">
+          <div class="el-date-table-cell">
+            <span class="el-date-table-cell__text">{{ cell.text }}</span>
+            <span class="rain_value" v-if="rainObj[moment(cell.date).format('YYYY-MM-DD')]"
+              >{{ rainObj[moment(cell.date).format('YYYY-MM-DD')] }}mm</span
+            >
+          </div>
+        </template>
+      </el-date-picker>
     </div>
     <div class="partContHM">
       <div class="flex flex-justcontent-spacebetween">
@@ -38,74 +32,155 @@
         <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
         <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
         <el-select clearable filterable v-model="rainCode" placeholder="请选择雨量站" style="width: 150px">
-          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          <el-option
+            v-for="dict in rainList"
+            :key="dict.stCode"
+            :label="dict.stName"
+            :value="dict.stCode"
+            @click="selectRainSite"
+          ></el-option>
         </el-select>
       </div>
       <!-- 日 -->
       <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
         <div class="part">
           <p>日期</p>
-          <p>{{ monDay }}<br />{{ yearDay }}</p>
+          <p>{{ AllData.curDate }}<br />{{ AllData.curYear }}</p>
         </div>
         <div class="part">
           <p>累计降雨量</p>
-          <p>15<br />mm/24h</p>
+          <p>{{ curInfo?.rainCumulative }}<br />mm/24h</p>
         </div>
         <div class="part">
           <p>雨强</p>
-          <p style="padding-top: 15px">小雨</p>
+          <p style="padding-top: 15px" v-if="curInfo?.rainLevel">{{ level[curInfo?.rainLevel] }}</p>
         </div>
       </div>
       <!-- 月 -->
       <div class="partDay" v-if="dateIndex == 'month'">
-        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
+        <DEchart curType="month" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
 
       <!-- 年 -->
       <div class="partDay" v-if="dateIndex == 'year'">
-        <ChartBar3D :refresh="refresh2" :echartData="echartData2"></ChartBar3D>
+        <DEchart curType="year" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
+import { rainRainDaylist } from '@/api/newPageline/riverCapacity.js';
+import DEchart from '@/views/sponeScreen/Echarts/DEchart.vue';
+import { getStationList } from '@/api/dataAnalysis/syntherticData';
 const { proxy } = getCurrentInstance();
-
-const monDay = ref(proxy.moment(new Date()).format('MM-DD'));
-const yearDay = ref(proxy.moment(new Date()).format('YYYY'));
-const dateDay = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
-const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const dateYear = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const rainCode = ref('1');
-const rainList = ref([
-  { value: '1', label: '汴京路雨量站' },
-  { value: '2', label: '黄河路雨量站' },
-]);
+const rainCode = ref('');
+const rangeTime = ref('');
+const curInfo = ref({});
+const rainObj = ref({});
+const currentType = ref('time'); //当前类型,区分是点击时间还是站点
+const level = {
+  '0_NAN': '无降雨',
+  '1_SMALL': '小雨',
+  '2_MIDDLE': '中雨',
+  '3_LARGE': '大雨',
+  '4_STORM': '暴雨',
+  '5_LARGE_STORM': '大暴雨',
+  '6_EX_LARGE_STORM': '特大暴雨',
+};
+const checkedList = ref([]);
+const rainList = ref([]);
 const dateIndex = ref('day');
-const refresh = ref(1);
-const echartData = ref({
-  xAxis: ['06-01', '06-05', '06-10', '06-15', '06-20', '06-25', '06-30'],
-  yName: '降雨量mm',
-  seriesData: [23.2, 10, 0, 12, 5, 19, 56],
-  seriesDataMax: [100, 100, 100, 100, 100, 100, 100],
+const AllData = reactive({
+  curDate: '',
+  curYear: '',
 });
 
-const refresh2 = ref(1);
-const echartData2 = ref({
-  xAxis: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-  yName: '降雨量mm',
-  seriesData: [123.2, 100, 60, 102, 85, 19, 123.2, 100, 60, 42, 59, 99],
-  seriesDataMax: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
-});
+const cellClassNameFn = data => {
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (time === rangeTime.value) {
+    return 'current';
+  }
+  const list = checkedList.value.map(item => item.rainTime);
+  if (list.includes(time)) {
+    return 'checked';
+  }
+};
+const disabledDateFun = data => {
+  if (dateIndex.value != 'day') return;
+  const list = checkedList.value.map(item => item.rainTime);
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (list.includes(time)) {
+    return false;
+  } else {
+    return true;
+  }
+};
 
 // 点击切换
 function changeDate(val) {
   dateIndex.value = val;
+  console.log(dateIndex.value, 'dateIndex.value');
+  let valueFormat =
+    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
+  rangeTime.value = proxy.moment().format(valueFormat);
+  currentType.value = '';
+
+  getBasRainTimeSectionListFn();
 }
 
-onMounted(() => {});
+//获取站点数据
+const getStationData = async () => {
+  let res = await getStationList();
+  if (res && res.code == 200) {
+    let datas = res.data;
+    rainList.value = datas || [];
+    rainCode.value = rainList.value[0].stCode;
+    getBasRainTimeSectionListFn();
+  }
+};
+
+//选择站点
+const selectRainSite = () => {
+  currentType.value = '';
+  getBasRainTimeSectionListFn();
+};
+//选择降雨时间
+const datePickerChange = val => {
+  console.log(val);
+  currentType.value = 'time';
+  if (dateIndex.value == 'day') {
+    handelData();
+  }
+};
+
+function getBasRainTimeSectionListFn() {
+  if (dateIndex.value != 'day') return;
+  let prams = {
+    stCode: rainCode.value,
+  };
+  rainRainDaylist(prams).then(res => {
+    if (res?.code !== 200) return;
+    checkedList.value = res.data || [];
+    checkedList.value.forEach(item => {
+      rainObj.value[item.rainTime] = item.rainCumulative;
+    });
+    rangeTime.value = checkedList.value.length ? checkedList.value[0].rainTime : '';
+    handelData();
+  });
+}
+
+const handelData = () => {
+  let arrData = checkedList.value.filter(item => item.rainTime == rangeTime.value);
+  curInfo.value = arrData ? arrData[0] : '';
+  rangeTime.value = curInfo.value?.rainTime;
+  AllData.curDate = proxy.moment(rangeTime.value).format('MM-DD');
+  AllData.curYear = proxy.moment(rangeTime.value).format('YYYY');
+};
+
+onMounted(() => {
+  getStationData();
+});
 </script>
 
 <style lang="scss">
@@ -154,4 +229,51 @@
     }
   }
 }
+.jianCePopperClass {
+  // width: 400px;
+
+  .el-date-table {
+    td {
+      &.disabled {
+        .el-date-table-cell {
+          opacity: 0.5;
+          background-color: #ccc !important;
+          // border-radius: 50%;
+          // width: 24px;
+          // height: 24px;
+          // line-height: 24px;
+        }
+      }
+
+      &.checked {
+        &:not(.current) {
+          .el-date-table-cell {
+            .el-date-table-cell__text {
+              // background-color: #d08f5a;
+              // color: #fff;
+              // color: #d08f5a;
+              // font-weight: bolder;'
+
+              color: #ffffff;
+              font-weight: bolder;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.el-date-table-cell {
+  position: relative;
+
+  .rain_value {
+    position: absolute;
+    left: 2px !important;
+    top: 15px;
+    color: yellow;
+    font-size: 10px;
+    font-weight: bolder;
+  }
+}
 </style>
diff --git a/src/views/sponeScreen/waterFlood/rainReport.vue b/src/views/sponeScreen/waterFlood/rainReport.vue
index bfbe0fa..a24b199 100644
--- a/src/views/sponeScreen/waterFlood/rainReport.vue
+++ b/src/views/sponeScreen/waterFlood/rainReport.vue
@@ -18,10 +18,12 @@
         </div>
         <Vue3SeamlessScroll :list="dataList" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
           <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
-            <p class="ellipsis">{{ item.start }}</p>
-            <p class="ellipsis">{{ item.end }}</p>
-            <p class="ellipsis">{{ item.yq }}</p>
-            <p class="ellipsis">{{ item.num }}mm</p>
+            <p class="ellipsis" :title="item.startTime">{{ item.startTime }}</p>
+            <p class="ellipsis" :title="item.endTime">{{ item.endTime }}</p>
+            <p class="ellipsis">
+              <dict-tag :options="rainfall_intensity" :value="String(item.rainIntensity)" />
+            </p>
+            <p class="ellipsis">{{ item.accumulate }}mm</p>
             <p class="ellipsis reports" @click="checkReport(item)">查看报告</p>
           </div>
         </Vue3SeamlessScroll>
@@ -39,32 +41,38 @@
 </template>
 
 <script setup>
+import { rainfallSessionInfoList } from '@/api/publicService/index';
+
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue'; //查看报告单
 import RiskDetail from '@/views/floodSys/floodYP/riskAsses.vue'; //内涝模型
 
 const { proxy } = getCurrentInstance();
+const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度  字典数据
 const dialogShowDetail = ref(false);
 const dialogShowModal = ref(false);
 const rainId = ref('');
 
-const dataList = ref([
-  { start: '2024-04-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-04-13 10:12:20', end: '2024-06-12 13:12:20', yq: '大雨', num: 24.2, id: 1 },
-  { start: '2024-05-12 10:12:20', end: '2024-06-12 13:12:20', yq: '中雨', num: 8.5, id: 1 },
-  { start: '2024-05-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-18 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-]);
+const dataList = ref([]);
+
+// 获取降雨报告数据
+async function getJYData() {
+  let res = await rainfallSessionInfoList();
+  if (res && res.code == 200) {
+    dataList.value = res.data;
+    console.log(dataList.value, '123213');
+  }
+}
 
 // 查看报告
 function checkReport(item) {
-  rainId.value = '1804215833354420225';
+  rainId.value = item.id;
   dialogShowDetail.value = true;
 }
 
-onMounted(() => {});
+onMounted(() => {
+  getJYData();
+});
 </script>
 
 <style lang="scss">
diff --git a/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue b/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue
index 2b1d560..d820408 100644
--- a/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue
+++ b/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue
@@ -38,7 +38,9 @@
           </el-form-item>
         </div>
         <!-- 地图渲染河道断面，默认显示监测站站点名称、设防水位、实时水位，点击查看历史水位数据 -->
-        <div class="csfhbzM"></div>
+        <div class="csfhbzM">
+          <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
+        </div>
       </el-form>
     </div>
 
@@ -63,7 +65,7 @@
 import { projectEstimateRules } from '@/utils/rules';
 import chartOption from '@/components/Echarts/pieChart_1.js';
 import * as echarts from 'echarts';
-
+import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(true);
 const hisDate = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
@@ -170,7 +172,7 @@
   .csfhbzM {
     width: 100%;
     height: 400px;
-    border: 1px solid red;
+    // border: 1px solid red;
   }
 }
 </style>

diff --git a/src/api/newPageline/riverCapacity.js b/src/api/newPageline/riverCapacity.js
index 5b106f9..ab63073 100644
--- a/src/api/newPageline/riverCapacity.js
+++ b/src/api/newPageline/riverCapacity.js
@@ -84,3 +84,20 @@
     params: query,
   });
 }
+
+// 查询一张图降雨日历
+export function rainRainDaylist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/rainDaylist',
+    method: 'get',
+    params: query,
+  });
+}
+
+export function rainRainlist(query) {
+  return request({
+    url: '/business/rainTimeAnalysis/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/api/publicService/index.js b/src/api/publicService/index.js
index 7591b3d..8ee9c9c 100644
--- a/src/api/publicService/index.js
+++ b/src/api/publicService/index.js
@@ -347,6 +347,7 @@
     method: 'delete',
   });
 }
+
 // 新闻资讯 详情
 export function manageNewsDetail(id) {
   return request({
@@ -623,3 +624,12 @@
     data: data,
   });
 }
+
+// 一张图 降雨报告
+export function rainfallSessionInfoList(query) {
+  return request({
+    url: '/business/preventFlood/rainfallSessionInfo/list',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/layout/components/HeaderSys/index.vue b/src/layout/components/HeaderSys/index.vue
index 45fa42a..fe15a21 100644
--- a/src/layout/components/HeaderSys/index.vue
+++ b/src/layout/components/HeaderSys/index.vue
@@ -51,8 +51,8 @@
     </el-dialog>
 
     <!-- 消息通知弹窗 -->
-    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body>
-      <newsDiaLOG :tableData="tableData"></newsDiaLOG>
+    <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
+      <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
       <template>
         <div class="dialog-footer">
           <el-button @click="dialogClose">取 消</el-button>
@@ -159,7 +159,14 @@
     NumPer.value = response.data;
   });
 }
-
+function handleClose() {
+  // dialogNews.value = false;
+  getDataListA();
+}
+function closed() {
+  dialogNews.value = false;
+  getDataListA();
+}
 onMounted(() => {
   // 动态获取路由返回子菜单
   permissionStore.sidebarRouters.map(item => {
diff --git a/src/views/sponeScreen/Echarts/DEchart.vue b/src/views/sponeScreen/Echarts/DEchart.vue
new file mode 100644
index 0000000..f9b5d4c
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/DEchart.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="line" v-loading="loading">
+    <div class="echarts" ref="echarts"></div>
+    <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
+  </div>
+</template>
+
+<script setup>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
+const props = defineProps({
+  curType: {
+    type: String,
+    default: '',
+  },
+  //站点code
+  stCode: {
+    type: String,
+    default: '',
+  },
+  rainTime: {
+    type: String,
+    default: '',
+  },
+});
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const myChart = shallowRef(null);
+const echartData = {
+  xAxis: [],
+  yAxis: [],
+};
+
+const initEcharts = () => {
+  myChart.value && myChart.value.clear();
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: params => {
+        let str = '';
+        params.forEach(item => {
+          str += `
+          <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
+            <div style="display: flex;align-items: center;">
+              <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
+              <span>${item.seriesName}</span>
+            </div>
+            <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
+          </div>
+        `;
+        });
+        return `
+        <div style="margin: 0px 0 0;line-height:1;width: 180px;">
+          <div>${params[0].axisValue}</div>
+          ${str}
+        </div>
+      `;
+      },
+    },
+    grid: {
+      left: '12%',
+      right: '8%',
+      top: '24%',
+      bottom: '16%',
+    },
+    xAxis: {
+      type: 'category',
+      data: echartData.xAxis,
+      axisLabel: {
+        color: '#D8F4FF',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#53D8FB',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: [
+      {
+        name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
+        type: 'value',
+        nameTextStyle: {
+          color: '#D1DEEE',
+        },
+        axisLabel: {
+          color: '#fff',
+          fontSize: 12,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#005CBA',
+            type: 'dashed',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#005CBA',
+            width: 1,
+            type: 'dashed',
+          },
+          show: true,
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#D1DEEE',
+            type: 'dashed',
+            color: '#53D8FB',
+          },
+        },
+        nameTextStyle: {
+          color: '#fff',
+        },
+      },
+    ],
+    dataZoom: [
+      // {
+      //   //默认控制x轴
+      //   type: 'slider', //图标下方的伸缩条
+      //   // show: true, //是否显示
+
+      //   // realtime: true,
+      //   start: 0, //伸缩条开始位置
+      //   end: 60, //伸缩条结束位置
+      // },
+      {
+        type: 'inside',
+        // xAxisIndex: [0],
+        start: 0,
+        end: 60,
+      },
+    ],
+    series: [
+      {
+        name: '降雨量',
+        type: 'bar',
+        barWidth: 10,
+        itemStyle: {
+          color: '#11FFB3',
+        },
+        smooth: true,
+        data: echartData.yAxis,
+      },
+    ],
+  });
+};
+
+const getData = async () => {
+  console.log(props, '1`');
+  if (props.curType == 'day') return;
+  loading.value = true;
+  let rainTime = '';
+  if (props.curType === 'month') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
+  } else if (props.curType === 'year') {
+    rainTime = proxy.moment(props.rainTime).format('YYYY');
+  }
+  const res = await rainRainlist({
+    rainTime: rainTime,
+    timeType: props.curType,
+    stCode: props.stCode,
+  });
+  loading.value = false;
+  if (res?.code !== 200) return;
+  if (res.data) {
+    echartData.xAxis = res.data.map(item => item.rainTime);
+    echartData.yAxis = res.data.map(item => item.rainCumulative);
+  }
+  initEcharts();
+};
+watch(
+  () => props.curType,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+watch(
+  () => props.stCode,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+watch(
+  () => props.rainTime,
+  value => {
+    getData();
+  },
+  {
+    deep: true,
+    // immediate: true
+  }
+);
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    myChart.value && myChart.value.resize();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.line {
+  // padding-top: 10px;
+  height: 100%;
+  position: relative;
+
+  .echarts {
+    height: 100%;
+  }
+
+  .xAxisUnit {
+    position: absolute;
+    bottom: 8px;
+    right: 20px;
+    color: #d1deee;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/Echarts/echartBar3D.vue b/src/views/sponeScreen/Echarts/echartBar3D.vue
index 038626c..ab81c9a 100644
--- a/src/views/sponeScreen/Echarts/echartBar3D.vue
+++ b/src/views/sponeScreen/Echarts/echartBar3D.vue
@@ -2,6 +2,7 @@
   <div :id="id" style="width: 100%; height: 100%"></div>
 </template>
 <script>
+import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
 import * as echarts from 'echarts';
 import { guid } from '@/utils/ruoyi';
 import { reactive, toRefs, onMounted, watch, onUnmounted, normalizeStyle } from 'vue';
@@ -113,6 +114,23 @@
             color: '#fff',
           },
         },
+        dataZoom: [
+          // {
+          //   //默认控制x轴
+          //   type: 'slider', //图标下方的伸缩条
+          //   // show: true, //是否显示
+
+          //   // realtime: true,
+          //   start: 0, //伸缩条开始位置
+          //   end: 60, //伸缩条结束位置
+          // },
+          {
+            type: 'inside',
+            // xAxisIndex: [0],
+            start: 0,
+            end: 60,
+          },
+        ],
         series: [
           {
             data: props.echartData.seriesData,
diff --git a/src/views/sponeScreen/waterFlood/rainCaldar.vue b/src/views/sponeScreen/waterFlood/rainCaldar.vue
index 2b207a1..9c91e0d 100644
--- a/src/views/sponeScreen/waterFlood/rainCaldar.vue
+++ b/src/views/sponeScreen/waterFlood/rainCaldar.vue
@@ -3,34 +3,28 @@
   <div class="rainCaldarPage">
     <div class="partTitleHM">
       降雨日历
+
       <el-date-picker
-        type="date"
-        v-model="dateDay"
-        value-format="YYYY-MM-DD"
+        v-model="rangeTime"
+        :type="dateIndex == 'day' ? 'date' : dateIndex == 'month' ? 'month' : dateIndex == 'year' ? 'year' : ''"
+        :value-format="dateIndex == 'day' ? 'YYYY-MM-DD' : dateIndex == 'month' ? 'YYYY-MM' : dateIndex == 'year' ? 'YYYY' : ''"
         placeholder="请选择日期"
-        class="dateCal"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'day'"
-      />
-      <el-date-picker
-        type="month"
-        v-model="dateMonth"
-        value-format="YYYY-MM"
-        placeholder="请选择日期"
-        size="small"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-        v-if="dateIndex == 'month'"
-      />
-      <el-date-picker
-        type="year"
-        v-model="dateYear"
-        value-format="YYYY"
-        placeholder="请选择日期"
-        size="small"
-        v-if="dateIndex == 'year'"
-        style="float: right; width: 130px; margin: 8px 50px 0px 0px"
-      />
+        :cell-class-name="cellClassNameFn"
+        popper-class="jianCePopperClass"
+        :clearable="false"
+        :disabled-date="disabledDateFun"
+        @change="datePickerChange"
+        style="float: right; width: 130px; margin: 5px 50px 0px 0px"
+      >
+        <template #default="cell">
+          <div class="el-date-table-cell">
+            <span class="el-date-table-cell__text">{{ cell.text }}</span>
+            <span class="rain_value" v-if="rainObj[moment(cell.date).format('YYYY-MM-DD')]"
+              >{{ rainObj[moment(cell.date).format('YYYY-MM-DD')] }}mm</span
+            >
+          </div>
+        </template>
+      </el-date-picker>
     </div>
     <div class="partContHM">
       <div class="flex flex-justcontent-spacebetween">
@@ -38,74 +32,155 @@
         <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
         <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
         <el-select clearable filterable v-model="rainCode" placeholder="请选择雨量站" style="width: 150px">
-          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          <el-option
+            v-for="dict in rainList"
+            :key="dict.stCode"
+            :label="dict.stName"
+            :value="dict.stCode"
+            @click="selectRainSite"
+          ></el-option>
         </el-select>
       </div>
       <!-- 日 -->
       <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
         <div class="part">
           <p>日期</p>
-          <p>{{ monDay }}<br />{{ yearDay }}</p>
+          <p>{{ AllData.curDate }}<br />{{ AllData.curYear }}</p>
         </div>
         <div class="part">
           <p>累计降雨量</p>
-          <p>15<br />mm/24h</p>
+          <p>{{ curInfo?.rainCumulative }}<br />mm/24h</p>
         </div>
         <div class="part">
           <p>雨强</p>
-          <p style="padding-top: 15px">小雨</p>
+          <p style="padding-top: 15px" v-if="curInfo?.rainLevel">{{ level[curInfo?.rainLevel] }}</p>
         </div>
       </div>
       <!-- 月 -->
       <div class="partDay" v-if="dateIndex == 'month'">
-        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
+        <DEchart curType="month" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
 
       <!-- 年 -->
       <div class="partDay" v-if="dateIndex == 'year'">
-        <ChartBar3D :refresh="refresh2" :echartData="echartData2"></ChartBar3D>
+        <DEchart curType="year" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
+import { rainRainDaylist } from '@/api/newPageline/riverCapacity.js';
+import DEchart from '@/views/sponeScreen/Echarts/DEchart.vue';
+import { getStationList } from '@/api/dataAnalysis/syntherticData';
 const { proxy } = getCurrentInstance();
-
-const monDay = ref(proxy.moment(new Date()).format('MM-DD'));
-const yearDay = ref(proxy.moment(new Date()).format('YYYY'));
-const dateDay = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
-const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const dateYear = ref(proxy.moment(new Date()).format('YYYY-MM'));
-const rainCode = ref('1');
-const rainList = ref([
-  { value: '1', label: '汴京路雨量站' },
-  { value: '2', label: '黄河路雨量站' },
-]);
+const rainCode = ref('');
+const rangeTime = ref('');
+const curInfo = ref({});
+const rainObj = ref({});
+const currentType = ref('time'); //当前类型,区分是点击时间还是站点
+const level = {
+  '0_NAN': '无降雨',
+  '1_SMALL': '小雨',
+  '2_MIDDLE': '中雨',
+  '3_LARGE': '大雨',
+  '4_STORM': '暴雨',
+  '5_LARGE_STORM': '大暴雨',
+  '6_EX_LARGE_STORM': '特大暴雨',
+};
+const checkedList = ref([]);
+const rainList = ref([]);
 const dateIndex = ref('day');
-const refresh = ref(1);
-const echartData = ref({
-  xAxis: ['06-01', '06-05', '06-10', '06-15', '06-20', '06-25', '06-30'],
-  yName: '降雨量mm',
-  seriesData: [23.2, 10, 0, 12, 5, 19, 56],
-  seriesDataMax: [100, 100, 100, 100, 100, 100, 100],
+const AllData = reactive({
+  curDate: '',
+  curYear: '',
 });
 
-const refresh2 = ref(1);
-const echartData2 = ref({
-  xAxis: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-  yName: '降雨量mm',
-  seriesData: [123.2, 100, 60, 102, 85, 19, 123.2, 100, 60, 42, 59, 99],
-  seriesDataMax: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
-});
+const cellClassNameFn = data => {
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (time === rangeTime.value) {
+    return 'current';
+  }
+  const list = checkedList.value.map(item => item.rainTime);
+  if (list.includes(time)) {
+    return 'checked';
+  }
+};
+const disabledDateFun = data => {
+  if (dateIndex.value != 'day') return;
+  const list = checkedList.value.map(item => item.rainTime);
+  const time = proxy.moment(data).format('YYYY-MM-DD');
+  if (list.includes(time)) {
+    return false;
+  } else {
+    return true;
+  }
+};
 
 // 点击切换
 function changeDate(val) {
   dateIndex.value = val;
+  console.log(dateIndex.value, 'dateIndex.value');
+  let valueFormat =
+    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
+  rangeTime.value = proxy.moment().format(valueFormat);
+  currentType.value = '';
+
+  getBasRainTimeSectionListFn();
 }
 
-onMounted(() => {});
+//获取站点数据
+const getStationData = async () => {
+  let res = await getStationList();
+  if (res && res.code == 200) {
+    let datas = res.data;
+    rainList.value = datas || [];
+    rainCode.value = rainList.value[0].stCode;
+    getBasRainTimeSectionListFn();
+  }
+};
+
+//选择站点
+const selectRainSite = () => {
+  currentType.value = '';
+  getBasRainTimeSectionListFn();
+};
+//选择降雨时间
+const datePickerChange = val => {
+  console.log(val);
+  currentType.value = 'time';
+  if (dateIndex.value == 'day') {
+    handelData();
+  }
+};
+
+function getBasRainTimeSectionListFn() {
+  if (dateIndex.value != 'day') return;
+  let prams = {
+    stCode: rainCode.value,
+  };
+  rainRainDaylist(prams).then(res => {
+    if (res?.code !== 200) return;
+    checkedList.value = res.data || [];
+    checkedList.value.forEach(item => {
+      rainObj.value[item.rainTime] = item.rainCumulative;
+    });
+    rangeTime.value = checkedList.value.length ? checkedList.value[0].rainTime : '';
+    handelData();
+  });
+}
+
+const handelData = () => {
+  let arrData = checkedList.value.filter(item => item.rainTime == rangeTime.value);
+  curInfo.value = arrData ? arrData[0] : '';
+  rangeTime.value = curInfo.value?.rainTime;
+  AllData.curDate = proxy.moment(rangeTime.value).format('MM-DD');
+  AllData.curYear = proxy.moment(rangeTime.value).format('YYYY');
+};
+
+onMounted(() => {
+  getStationData();
+});
 </script>
 
 <style lang="scss">
@@ -154,4 +229,51 @@
     }
   }
 }
+.jianCePopperClass {
+  // width: 400px;
+
+  .el-date-table {
+    td {
+      &.disabled {
+        .el-date-table-cell {
+          opacity: 0.5;
+          background-color: #ccc !important;
+          // border-radius: 50%;
+          // width: 24px;
+          // height: 24px;
+          // line-height: 24px;
+        }
+      }
+
+      &.checked {
+        &:not(.current) {
+          .el-date-table-cell {
+            .el-date-table-cell__text {
+              // background-color: #d08f5a;
+              // color: #fff;
+              // color: #d08f5a;
+              // font-weight: bolder;'
+
+              color: #ffffff;
+              font-weight: bolder;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.el-date-table-cell {
+  position: relative;
+
+  .rain_value {
+    position: absolute;
+    left: 2px !important;
+    top: 15px;
+    color: yellow;
+    font-size: 10px;
+    font-weight: bolder;
+  }
+}
 </style>
diff --git a/src/views/sponeScreen/waterFlood/rainReport.vue b/src/views/sponeScreen/waterFlood/rainReport.vue
index bfbe0fa..a24b199 100644
--- a/src/views/sponeScreen/waterFlood/rainReport.vue
+++ b/src/views/sponeScreen/waterFlood/rainReport.vue
@@ -18,10 +18,12 @@
         </div>
         <Vue3SeamlessScroll :list="dataList" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
           <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
-            <p class="ellipsis">{{ item.start }}</p>
-            <p class="ellipsis">{{ item.end }}</p>
-            <p class="ellipsis">{{ item.yq }}</p>
-            <p class="ellipsis">{{ item.num }}mm</p>
+            <p class="ellipsis" :title="item.startTime">{{ item.startTime }}</p>
+            <p class="ellipsis" :title="item.endTime">{{ item.endTime }}</p>
+            <p class="ellipsis">
+              <dict-tag :options="rainfall_intensity" :value="String(item.rainIntensity)" />
+            </p>
+            <p class="ellipsis">{{ item.accumulate }}mm</p>
             <p class="ellipsis reports" @click="checkReport(item)">查看报告</p>
           </div>
         </Vue3SeamlessScroll>
@@ -39,32 +41,38 @@
 </template>
 
 <script setup>
+import { rainfallSessionInfoList } from '@/api/publicService/index';
+
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue'; //查看报告单
 import RiskDetail from '@/views/floodSys/floodYP/riskAsses.vue'; //内涝模型
 
 const { proxy } = getCurrentInstance();
+const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度  字典数据
 const dialogShowDetail = ref(false);
 const dialogShowModal = ref(false);
 const rainId = ref('');
 
-const dataList = ref([
-  { start: '2024-04-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-04-13 10:12:20', end: '2024-06-12 13:12:20', yq: '大雨', num: 24.2, id: 1 },
-  { start: '2024-05-12 10:12:20', end: '2024-06-12 13:12:20', yq: '中雨', num: 8.5, id: 1 },
-  { start: '2024-05-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-  { start: '2024-06-18 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
-]);
+const dataList = ref([]);
+
+// 获取降雨报告数据
+async function getJYData() {
+  let res = await rainfallSessionInfoList();
+  if (res && res.code == 200) {
+    dataList.value = res.data;
+    console.log(dataList.value, '123213');
+  }
+}
 
 // 查看报告
 function checkReport(item) {
-  rainId.value = '1804215833354420225';
+  rainId.value = item.id;
   dialogShowDetail.value = true;
 }
 
-onMounted(() => {});
+onMounted(() => {
+  getJYData();
+});
 </script>
 
 <style lang="scss">
diff --git a/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue b/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue
index 2b1d560..d820408 100644
--- a/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue
+++ b/src/views/spongePerformance/waterlogging/floodControlStandard/tableDalgo.vue
@@ -38,7 +38,9 @@
           </el-form-item>
         </div>
         <!-- 地图渲染河道断面，默认显示监测站站点名称、设防水位、实时水位，点击查看历史水位数据 -->
-        <div class="csfhbzM"></div>
+        <div class="csfhbzM">
+          <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
+        </div>
       </el-form>
     </div>
 
@@ -63,7 +65,7 @@
 import { projectEstimateRules } from '@/utils/rules';
 import chartOption from '@/components/Echarts/pieChart_1.js';
 import * as echarts from 'echarts';
-
+import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
 const { proxy } = getCurrentInstance();
 const dialogShow = ref(true);
 const hisDate = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
@@ -170,7 +172,7 @@
   .csfhbzM {
     width: 100%;
     height: 400px;
-    border: 1px solid red;
+    // border: 1px solid red;
   }
 }
 </style>
diff --git a/src/views/system/user/profile/newsDiaLOG.vue b/src/views/system/user/profile/newsDiaLOG.vue
index a0bd2d5..9b56fd0 100644
--- a/src/views/system/user/profile/newsDiaLOG.vue
+++ b/src/views/system/user/profile/newsDiaLOG.vue
@@ -17,7 +17,8 @@
 import { projectNoticeUserEdit } from '@/api/publicService/index';
 const tableLoading = ref(false);
 const tableList = ref({});
-
+const emits = defineEmits();
+defineExpose({ closed });
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   //数据
@@ -26,6 +27,7 @@
     default: {},
   },
 });
+
 watch(
   () => props.tableData,
   value => {
@@ -41,6 +43,10 @@
   };
   projectNoticeUserEdit(params).then(response => {
     proxy.$modal.msgSuccess('消息已读成功！');
+    closed();
   });
 }
+function closed() {
+  emits('handleClose');
+}
 </script>