diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index b96f752..eb46cd6 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -3,7 +3,9 @@
   <div class="publicContainerA">
     <div class="partTitleHM">
       项目监测分析
-      <el-button type="warning" size="small" style="float: right; margin: 10px 50px 0px 0px">总分析报告</el-button>
+      <el-button type="warning" size="small" style="float: right; margin: 10px 50px 0px 0px" @click="openOverallAnalysis"
+        >总分析报告</el-button
+      >
     </div>
     <div class="ConstrucClass">
       <div class="WaterList">
@@ -151,6 +153,10 @@
     <el-dialog v-model="openvisible" title="项目设施对比分析" width="70%" append-to-body>
       <Xmanalysis v-if="openvisible" />
     </el-dialog>
+    <!-- 总分析报告 -->
+    <el-dialog v-model="dialogShowDetail" title="数据分析报告" width="70%" append-to-body>
+      <XmOverallsis v-if="dialogShowDetail" />
+    </el-dialog>
   </div>
 </template>
 
@@ -166,7 +172,9 @@
 import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';
 import typicalLandDiaLogDetail from './typicalLandDiaLogDetail.vue';
 import Xmanalysis from './Xmanalysis.vue';
-
+import XmOverallsis from './XmOverallsis.vue';
+const openvisible = ref(false);
+const dialogShowDetail = ref(false);
 const areaFX = ref('0');
 const dialogShow = ref(false);
 const { proxy } = getCurrentInstance();
@@ -451,13 +459,14 @@
   });
 }
 
-const openvisible = ref(false);
 //查看分析报告
 const openDialog = () => {
-  console.log('111');
   openvisible.value = true;
 };
-
+// 查看总分析报告
+const openOverallAnalysis = () => {
+  dialogShowDetail.value = true;
+};
 onMounted(() => {
   hmssListGet(); //海绵设施列表
   getJSDList(); //获取积水点数据

diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index b96f752..eb46cd6 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -3,7 +3,9 @@
   <div class="publicContainerA">
     <div class="partTitleHM">
       项目监测分析
-      <el-button type="warning" size="small" style="float: right; margin: 10px 50px 0px 0px">总分析报告</el-button>
+      <el-button type="warning" size="small" style="float: right; margin: 10px 50px 0px 0px" @click="openOverallAnalysis"
+        >总分析报告</el-button
+      >
     </div>
     <div class="ConstrucClass">
       <div class="WaterList">
@@ -151,6 +153,10 @@
     <el-dialog v-model="openvisible" title="项目设施对比分析" width="70%" append-to-body>
       <Xmanalysis v-if="openvisible" />
     </el-dialog>
+    <!-- 总分析报告 -->
+    <el-dialog v-model="dialogShowDetail" title="数据分析报告" width="70%" append-to-body>
+      <XmOverallsis v-if="dialogShowDetail" />
+    </el-dialog>
   </div>
 </template>
 
@@ -166,7 +172,9 @@
 import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';
 import typicalLandDiaLogDetail from './typicalLandDiaLogDetail.vue';
 import Xmanalysis from './Xmanalysis.vue';
-
+import XmOverallsis from './XmOverallsis.vue';
+const openvisible = ref(false);
+const dialogShowDetail = ref(false);
 const areaFX = ref('0');
 const dialogShow = ref(false);
 const { proxy } = getCurrentInstance();
@@ -451,13 +459,14 @@
   });
 }
 
-const openvisible = ref(false);
 //查看分析报告
 const openDialog = () => {
-  console.log('111');
   openvisible.value = true;
 };
-
+// 查看总分析报告
+const openOverallAnalysis = () => {
+  dialogShowDetail.value = true;
+};
 onMounted(() => {
   hmssListGet(); //海绵设施列表
   getJSDList(); //获取积水点数据
diff --git a/src/views/sponeScreen/projectHM/XmOverallsis.vue b/src/views/sponeScreen/projectHM/XmOverallsis.vue
new file mode 100644
index 0000000..0c1b926
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/XmOverallsis.vue
@@ -0,0 +1,576 @@
+<template>
+  <el-form :model="queryParams" ref="queryRef" :rules="Formrules" :inline="true" label-width="120px">
+    <el-form-item label="管网站" prop="pipelineData">
+      <el-tree-select
+        v-model="queryParams.pipelineData"
+        :data="pipelineList"
+        multiple
+        collapse-tags
+        :default-checked-keys="pipelineDefaultKeys"
+        show-checkbox
+        popper-class="dialogPopperClass"
+        node-key="stCode"
+        :render-after-expand="false"
+        :props="{ label: 'stName', value: 'stCode' }"
+        clearable
+        style="width: 250px"
+      />
+    </el-form-item>
+
+    <el-form-item label="积水点站" prop="waterloggingData">
+      <el-select
+        filterable
+        v-model="queryParams.waterloggingData"
+        :clearable="false"
+        multiple
+        collapse-tags
+        placeholder="积水点站"
+        popper-class="dialogPopperClass"
+        style="width: 400px"
+      >
+        <template #header>
+          <el-checkbox v-model="waterloggingCheckAll" :indeterminate="waterloggingIndeterminate" @change="handleWaterloggingCheckAll">
+            <span style="font-size: 16px; color: #ffffff">全选</span>
+          </el-checkbox>
+        </template>
+        <el-option v-for="item in waterloggingList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="雨量站" prop="rainData">
+      <el-select
+        filterable
+        v-model="queryParams.rainData"
+        multiple
+        :clearable="false"
+        collapse-tags
+        placeholder="雨量站"
+        popper-class="dialogPopperClass"
+        style="width: 250px"
+      >
+        <template #header>
+          <el-checkbox v-model="rainCheckAll" :indeterminate="rainIndeterminate" @change="handleRainCheckAll">
+            <span style="font-size: 16px; color: #ffffff">全选</span>
+          </el-checkbox>
+        </template>
+        <el-option v-for="item in rainList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="项目站点" prop="projectData">
+      <el-tree-select
+        v-model="queryParams.projectData"
+        :data="projectList"
+        multiple
+        collapse-tags
+        :default-checked-keys="projectDefaultKeys"
+        show-checkbox
+        popper-class="dialogPopperClass"
+        node-key="stCode"
+        :render-after-expand="false"
+        :props="{ label: 'stName', value: 'stCode' }"
+        clearable
+        style="width: 400px"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      <el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">下载</el-button>
+    </el-form-item>
+  </el-form>
+
+  <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
+    <h1>开封市海绵城市监测数据分析报告</h1>
+    <h4>报告时间：</h4>
+    <div class="rain_content">
+      <!-- 降雨情况说明 -->
+      <p class="title">1.降雨情况说明</p>
+      <p class="small_title">1.1.降雨情况综述</p>
+      <!-- <p class="content">
+        降雨等级: {{ selectDictLabel(rainfall_intensity, rainResult.rainLevel) }}。日累计降雨量在{{ rainResult.minRainfall }}-{{
+          rainResult.maxRainfall
+        }}mm/24h之间。{{ rainResult.minRainStation }}日累计降雨量最小：{{ rainResult.minRainfall }}mm/24h；{{ rainResult.maxRainStation
+}}日累计降雨量最大：{{ rainResult.maxRainfall }}mm/24h，详见下表：
+      </p>
+      <p class="small_tip">各监测站点降雨情况统计表</p>
+      <el-table :data="rainResult['rainTable']" class="detailDataTable" style="width:100%;margin:0 auto">
+        <el-table-column label="序号" type="index" class="pdf-details" aline="center" width="60px" />
+        <el-table-column label="雨量站名称" prop="stName" class="pdf-details" aline="center" width="150px" />
+        <el-table-column label="日累计降雨量（mm/24h ）" prop="rainTotol" class="pdf-details" aline="center" />
+        <el-table-column label="小时最大降雨量（mm/h）" prop="maxRainData" class="pdf-details" aline="center" />
+        <el-table-column label="小时最大降雨时段" prop="maxRainStartTime" class="pdf-details" aline="center">
+          <template #default="{ row }">
+            <span>{{ row.maxRainStartTime }}-{{ row.maxRainEndTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="降雨总历时" prop="rainTodate" class="pdf-details" aline="center" width="130px" />
+      </el-table>
+      <div class="img_content flex flex-v flex-justcontent-start flex-align-start" v-for="file in rainResult['wholeFiles']">
+        <img :src="file.url" class="img_box" />
+      </div> -->
+      <p class="small_tip">降雨强度分布图</p>
+      <!-- 雨量站数据 -->
+      <p class="small_title">1.2.各站点降雨情况</p>
+      <!-- 雨量站数据 -->
+      <div v-for="(item, index) in raindatalist">
+        <!-- <p class="small_title">1.2.{{ Number(index) + 1 }}.{{ item.stName }}</p>
+        <p class="small_title">1.2.{{ Number(index) + 1 }}.1监测点位置</p>
+        <div class="img_content" v-for="file in item.stationFiles">
+          <img :src="file.url" class="img_box" />
+          <p class="small_tip">{{ item.stName }}监测点位置示意图</p>
+        </div>
+        <p class="small_title">1.2.{{ Number(index) + 1 }}.2雨量详情</p>
+        <p class="content circle">降雨时间段{{ item.rainStartTime }}开始至{{ item.rainEndTime }}结束，总历时{{
+          item.rainTodate }};</p>
+        <p class="content circle">日累计降雨量{{ item.rainTotol }}mm/24h;</p>
+        <p class="content circle">降雨等级: {{ selectDictLabel(rainfall_intensity, item.rainLevel) }};</p>
+        <p class="content circle">最大小时降雨量：{{ item.maxRainData }}mm/h（{{ item.maxRainTimeStart }}-{{ item.maxRainTimeEnd
+        }}）。</p> -->
+        <!-- echarts降雨趋势图 -->
+        <!-- <div :id="`chartOneBG_${item.stCode}`" class="chartOneBG rainChart"></div>
+        <p class="small_tip">{{ item.stationName }}降雨趋势图</p> -->
+      </div>
+    </div>
+    <!-- 积水点部分 -->
+    <div class="logging_content">
+      <p class="title">2.内涝/积水情况分析</p>
+      <p class="small_title">2.1.内涝/积水情况综述</p>
+      <p class="content">本场降雨，共计发生积水情况次，内涝情况次，详情见下表：</p>
+      <p class="small_tip">监测点位积水情况统计表</p>
+      <!-- <el-table :data="waterLoggingResultDto['waterloggingTableList']" class="detailDataTable" style="width: 100%; margin: 0 auto">
+        <el-table-column label="序号" type="index" class="pdf-details" aline="center" width="60px" />
+        <el-table-column label="监测站点名称" prop="stName" class="pdf-details" aline="center" />
+        <el-table-column label="最大积水深度（cm）" prop="maxPongdingdepth" class="pdf-details" aline="center" width="120px" />
+        <el-table-column label="最大积水深度发生时刻" prop="maxPongdingTime" class="pdf-details" aline="center" />
+        <el-table-column label="小时最大降雨时段" prop="maxRainStartTime" class="pdf-details" aline="center">
+          <template #default="{ row }">
+            <span>{{ row.maxRainStartTime }}-{{ row.maxRainEndTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="累计积水时长" prop="pongdingDuration" class="pdf-details" aline="center" width="110px" />
+        <el-table-column label="类型" prop="stType" class="pdf-details" aline="center" width="90px" />
+      </el-table>
+      <div class="img_content" v-for="file in waterLoggingResultDto['stFiles']">
+        <img :src="file.url" class="img_box" />
+      </div> -->
+      <p class="small_tip">内涝/积水分布图</p>
+      <p class="small_title">2.2.各内涝/积水情况</p>
+      <!-- 易涝点数据 -->
+      <div v-for="(item, index) in loggingdatalist">
+        <!-- <p class="small_title">2.2.{{ Number(index) + 1 }}{{ item.stName }}</p> -->
+        <!-- echarts降雨量、水位 -->
+        <!-- <div :id="`LoggingJYLSWChartOneBG_${item.stCode}`" class="chartOneBG"></div>
+        <p class="small_tip">降雨量/水位趋势图</p>
+        <p class="content circle">最大积水深度：{{ item.maxPongdingdepth }}cm;</p>
+        <p class="content circle">最大积水深度发生时刻：{{ item.maxPongdingTime }};</p>
+        <p class="content circle">累计积水时长：{{ item.pongdingDuration }};</p>
+        <p class="content circle">积水原因：{{ item.pongdingReason }};</p>
+        <p class="content circle">解决措施：{{ item.measures }}。</p> -->
+      </div>
+    </div>
+    <!-- 管网数据 -->
+    <div class="pipeline_content">
+      <p class="title">3.排水设施运行状态分析</p>
+      <!-- <div class="img_content flex flex-v flex-justcontent-start flex-align-start">
+        <img :src="item.url" class="img_box" v-for="item in pipePicCCLFile" />
+      </div> -->
+
+      <!-- <div v-for="(item, index) in pipeResult['totPipeAreasInfoList']"> -->
+      <!-- <p class="small_title">3.{{ Number(index) + 1 }}.{{ item.areasName }}</p>
+        <p class="small_title">3.1.{{ Number(index) + 1 }}.{{ item.areasName }}排水设施运行状态综述</p>
+        <p class="small_title">3.1.1.{{ Number(index) + 1 }}.管网部分</p>
+        <p class="content">外水汇入点位：{{ item.pipebufen.wshrCount }}处，{{ item.pipebufen.wshrStr }}</p>
+        <p class="content">运行负荷过大点位：{{ item.pipebufen.yxfhdCount }}处，{{ item.pipebufen.yxfhdStr }}</p>
+        <p class="content">行泄不畅点位：{{ item.pipebufen.xxbcCount }}处，{{ item.pipebufen.xxbcStr }}</p>
+        <p class="content">流速过缓点位：{{ item.pipebufen.lshmCount }}处，{{ item.pipebufen.lshmStr }}</p> -->
+      <p class="small_tip">管网运行状态统计表</p>
+      <!-- <el-table :data="item.pipebufen.pipeTableInfoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
+          <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
+          <el-table-column label="监测点位" prop="stName" class="pdf-details" aline="center" />
+          <el-table-column label="管径" prop="pipeDiameter" class="pdf-details" aline="center" />
+          <el-table-column label="24h累计排水量（m³）" prop="sblSum24" class="pdf-details" aline="center" />
+          <el-table-column label="降雨时段累计排水量（m³）" prop="rainSumDistance" class="pdf-details" aline="center" />
+          <el-table-column label="降雨时段平均排水量（m³）" prop="rainAvgDistance" class="pdf-details" aline="center" />
+          <el-table-column label="最大水深（m）" prop="maxZ" class="pdf-details" aline="center" />
+          <el-table-column label="平均流速(m/s)" prop="avgFlow" class="pdf-details" aline="center" />
+          <el-table-column label="最大流速（m/s）" prop="maxFlow" class="pdf-details" aline="center" />
+          <el-table-column label="旱天水位占比" prop="clearDayRate" class="pdf-details" aline="center" />
+        </el-table> -->
+      <!-- <p class="small_title">2.1.2.仓程路雨水泵站设备运行日志</p>
+        <p class="small_tip">表 3-2仓程路雨水泵站设备运行日志</p>
+        <el-table :data="levelData" class="detailDataTable" style="width:100%;margin:0 auto">
+          <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
+          <el-table-column label="1#泵" prop="type" class="pdf-details" aline="center" />
+          <el-table-column label="2#泵" prop="24Rail" class="pdf-details" aline="center" />
+          <el-table-column label="3#泵" prop="12Rail" class="pdf-details" aline="center" />
+          <el-table-column label="4#泵" prop="12Rail" class="pdf-details" aline="center" />
+        </el-table>
+        <p class="content">
+          仓程路问题点共计十处，主要问题是运行负荷过大、行泄不畅等问题，问题分布示意图详见图3-1：
+        </p>
+        <img src="@/assets/images/mewOneMap/haiMianJianShe/demo.jpg" class="img_box" />
+        <p class="small_tip">图 3-1仓程路片区问题分布示意图</p> -->
+
+      <p class="small_title">2.2.2.典型问题说明</p>
+      <!-- <div v-for="(child, index1) in item['typicalProblems']['dxwtList']"> -->
+      <!-- <p class="small_title">2.2.2.{{ Number(index1) + 1 }}.{{ child.stName }}问题说明</p> -->
+      <!-- echarts 降雨量、流量 -->
+      <!-- <div :id="`JYLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div> -->
+      <!-- <p class="small_tip">{{ item.pipelineFlowStartTime }}至{{ item.pipelineFlowEndTime }}降雨量-流量变化过程图</p> -->
+      <p class="small_tip">管网、流量情况分布图</p>
+      <!-- echarts 水位、流量 -->
+      <!-- <div :id="`SWLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div> -->
+      <!-- <p class="small_tip">{{ item.pipelineTimeStart }}至{{ item.pipelineTimeEnd }}间水位-流量变化过程图</p> -->
+      <!-- <p class="small_tip">管网流量、水位变化趋势图</p> -->
+      <!-- <p class="content">24h累计排水量：{{ child.sblSum24 }}m³</p> -->
+      <!-- <p class="content">降雨时段累计排水量：{{ child.rainSumDistance }}m³</p> -->
+      <!-- <p class="content">平均流速:{{ child.avgFlow }}m/s</p> -->
+      <!-- <p class="content">退水时长：{{ child.diffInHours }}h</p> -->
+      <!-- <p class="content">管网问题：{{ child.questionDesc }}</p> -->
+      <!-- <p class="content">此次降雨事件降雨量{{ item.pipelineRain }}mm，属于{{ item.pipelinerainlevel }}事件。从{{
+        item.pipelineFlowStartTime }}开始，{{ item.pipelineFlowEndTime }}结束。监测期间发生产流。监测时间段内的平均流量
+        为{{ item.pipelineavgflow }}m³/h，累计排水量为{{ item.pipelinedrainage }}m³。</p> -->
+      <!-- </div> -->
+      <!-- </div> -->
+    </div>
+
+    <!-- 项目数据 -->
+    <div class="project_content">
+      <p class="title">5.海绵项目及设施达标情况分析</p>
+      <p class="small_title">5.1.项目</p>
+      <p class="small_title">5.1.1.项目整体情况</p>
+      <p class="content">监测项目目前存在管道淤积、雨污分流不彻底、安装点位导致数据不全等问题，具体分析情况如表5-1：</p>
+      <p class="small_tip">各个监测项目达标情况分析表</p>
+      <!-- <el-table :data="projectJlDtoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
+        <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
+        <el-table-column label="项目名称" prop="projectName" class="pdf-details" aline="center" />
+        <el-table-column label="设计降雨量（mm）" prop="designRain" class="pdf-details" aline="center" />
+        <el-table-column label="实际控制雨量（mm）" prop="trueRain" class="pdf-details" aline="center">
+          <template #default="{ row }">
+            <span v-if="row.trueRain == '异常'">雨前出流</span>
+            <span v-else>{{ row.trueRain }}mm </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="年径流总量控制率设计值（%）" prop="ghJlzlkzl" class="pdf-details" aline="center" />
+        <el-table-column label="典型降雨径流总量控制率实际值（%）" prop="jlzlkzl" class="pdf-details" aline="center" />
+        <el-table-column label="分析结果" prop="conclusion" class="pdf-details" aline="center" />
+      </el-table> -->
+
+      <p class="small_title">5.1.2.数据异常项目分析</p>
+      <!-- <div v-for="(item, index) in projectdatalist"> -->
+      <!-- <p class="small_title">5.{{ Number(index) + 1 }}.3{{ item.stationName }}</p> -->
+      <!-- <p class="content">为了解{{ item.stationName }}海绵改造项目建设成效，对{{ item.stationName }}进行监测，监测点位位置如图5-1所示： -->
+      <!-- </p> -->
+      <!-- <div class="img_content" v-for="file in item.fileList">
+          <img :src="file.url" class="img_box" />
+        </div> -->
+      <!-- <p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p>
+        <p class="content">{{ item.stationName }}设计降雨量{{ item.designRain }}mm，降雨期间基本未出流，详见表5-2：</p>
+        <p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p> -->
+      <div class="table_content_box">
+        <div class="header">基础信息</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">监测时间段</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.projectRainStartTime }}至{{ item.projectRainEndTime }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">降雨总量（mm）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.projectRain }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">项目占地面积（㎡）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.projectArea }}</div> -->
+        </div>
+        <div class="header">水质水量监测</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">项目外排总径流体积（m³）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.xmwpzjjtj }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">项目外排总SS负荷量（g）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.xmwpzssfhl }}</div> -->
+        </div>
+        <div class="header">设计指标</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">设计降雨量</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.designRain }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流总量控制率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.ghJlzlkzl }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流污染削减率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.ghJlwrxjl }}</div> -->
+        </div>
+        <div class="header">效果评价</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">实际控制雨量（mm）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.trueRain }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流总量控制率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.jlzlkzl }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流污染削减率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.jlwrxjl }}</div> -->
+        </div>
+      </div>
+      <p class="content">详见下图：</p>
+      <!-- echarts降雨量、流量 -->
+      <!-- <div :id="`projectJYLLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
+      <!-- echarts 流量、悬浮物固体浓度 -->
+      <!-- <div :id="`projectLLXFWChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
+      <!-- echarts水位、流量 -->
+      <!-- <div :id="`projectSWLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
+      <!-- <p class="small_tip">{{ item.stationName }}降雨量/流量、流量/SS、水位/SS变化过程图</p> -->
+      <!-- <p class="content">现场排查情况见图5-3：</p> -->
+      <!-- <div class="img_content" v-for="file in item['sceneFileList']"> -->
+      <!-- <img :src="file.url" class="img_box" /> -->
+      <!-- </div> -->
+      <p class="small_tip">总出口积水情况现场验证</p>
+    </div>
+    <p class="title">6.总结</p>
+    <p class="content">
+      此次降雨，监测到降雨等级为，发现路面积水点共计处：排水设施问题集中在管网流速过缓（水力坡度问题）、外水汇入、行泄不畅、水力停留时间过长等问题南塬来水在本次降雨情况下，对城区影响不大，海绵项目建设在补齐监测点位的情况下，需要加快海绵项目建设进度，加强海绵项目运维运维。
+    </p>
+  </div>
+</template>
+<script setup>
+const showLoading = ref(false);
+const loadingText = ref('正在加载中...');
+const queryParams = ref({
+  pipelineData: [],
+  waterloggingData: [],
+  rainData: [],
+  projectData: [],
+});
+const Formrules = reactive({
+  pipelineData: [{ required: true, message: '请至少选择一个管网站', trigger: ['change'] }],
+  waterloggingData: [{ required: true, message: '请至少选择一个积水点站', trigger: ['change'] }],
+  rainData: [{ required: true, message: '请至少选择一个雨量站', trigger: ['change'] }],
+  projectData: [{ required: true, message: '请至少选择一个项目站点', trigger: ['change'] }],
+});
+onMounted(() => {});
+onBeforeUnmount(() => {});
+</script>
+<style lang="scss" scoped>
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+
+  .waterlogImg {
+    flex-wrap: wrap;
+
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
+
+      img {
+        width: 100%;
+        height: 150px;
+      }
+
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    width: 100%;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: #c03639;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: #c03639;
+    border-bottom: 3px solid #c03639;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-weight: bold;
+    margin: 10px 0px;
+    font-size: 21px;
+    font-family: '宋体', 'SimSun', sans-serif;
+  }
+
+  .small_title {
+    font-weight: bold;
+    margin: 10px 0px;
+    font-size: 15px;
+    font-family: '宋体', 'SimSun', sans-serif;
+  }
+
+  .content {
+    text-indent: 28px;
+    font-size: 14px;
+    line-height: 30px;
+    font-family: '宋体', 'SimSun', sans-serif;
+  }
+
+  .circle {
+    position: relative;
+
+    &:after {
+      position: absolute;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      content: '';
+      background: #7b7b7b;
+      left: 8px;
+      top: 50%;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+}
+
+.table_content_box {
+  width: 70%;
+  margin: 10px auto;
+  color: #000;
+  border: 1px solid #00314e !important;
+
+  .header {
+    text-align: center;
+    border-bottom: 0.00521rem solid #00314e !important;
+    color: #000;
+    font-weight: bolder;
+    border-right: none !important;
+    position: static !important;
+    background-color: #dee1e6 !important;
+    height: 0.20833rem !important;
+    line-height: 0.20833rem !important;
+    font-size: 0.06771rem;
+  }
+
+  .basic_label {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+    border-right: 1px solid #00314e !important;
+  }
+
+  .basic_val {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+  }
+}
+
+.img_content {
+  max-width: 90%;
+
+  .img_box {
+    width: 80%;
+  }
+}
+
+.reportDetail {
+  .detailDataTable {
+    margin-bottom: 10px !important;
+  }
+
+  ::v-deep(.el-table) {
+    --el-table-border-color: $mainColor1 !important;
+    --el-table-bg-color: $mainColor1 !important;
+
+    .el-table__body {
+      border-bottom: 1px solid #333 !important;
+    }
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #dee1e6 !important;
+        height: 40px !important;
+        font-size: 13px;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background-color: #004770 !important;
+
+      .el-button [class*='el-icon-'] + span {
+        margin-left: 1px;
+      }
+
+      td.el-table-fixed-column--right {
+        background: #00314e !important;
+      }
+    }
+
+    tr {
+      background-color: #f8f8f9 !important;
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: #fff !important;
+    }
+
+    tr:hover > td {
+      background-color: #f5f7fa !important;
+    }
+
+    th.el-table__cell,
+    td.el-table__cell {
+      text-align: center;
+      border-bottom: 1px solid #00314e !important;
+      color: #000;
+      border-right: none !important;
+      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
+    }
+
+    .el-table__empty-block {
+      background-color: #fff !important;
+
+      .el-table__empty-text {
+        color: #c6c6c6 !important;
+      }
+    }
+
+    .el-button {
+      border: none !important;
+      background: none !important;
+
+      &:hover {
+        background: none !important;
+        transform: scale(1.01);
+      }
+    }
+  }
+}
+
+::v-deep(.el-loading-spinner) {
+  position: fixed;
+  top: 420px !important;
+  left: 0;
+}
+</style>

diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index b96f752..eb46cd6 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -3,7 +3,9 @@
   <div class="publicContainerA">
     <div class="partTitleHM">
       项目监测分析
-      <el-button type="warning" size="small" style="float: right; margin: 10px 50px 0px 0px">总分析报告</el-button>
+      <el-button type="warning" size="small" style="float: right; margin: 10px 50px 0px 0px" @click="openOverallAnalysis"
+        >总分析报告</el-button
+      >
     </div>
     <div class="ConstrucClass">
       <div class="WaterList">
@@ -151,6 +153,10 @@
     <el-dialog v-model="openvisible" title="项目设施对比分析" width="70%" append-to-body>
       <Xmanalysis v-if="openvisible" />
     </el-dialog>
+    <!-- 总分析报告 -->
+    <el-dialog v-model="dialogShowDetail" title="数据分析报告" width="70%" append-to-body>
+      <XmOverallsis v-if="dialogShowDetail" />
+    </el-dialog>
   </div>
 </template>
 
@@ -166,7 +172,9 @@
 import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';
 import typicalLandDiaLogDetail from './typicalLandDiaLogDetail.vue';
 import Xmanalysis from './Xmanalysis.vue';
-
+import XmOverallsis from './XmOverallsis.vue';
+const openvisible = ref(false);
+const dialogShowDetail = ref(false);
 const areaFX = ref('0');
 const dialogShow = ref(false);
 const { proxy } = getCurrentInstance();
@@ -451,13 +459,14 @@
   });
 }
 
-const openvisible = ref(false);
 //查看分析报告
 const openDialog = () => {
-  console.log('111');
   openvisible.value = true;
 };
-
+// 查看总分析报告
+const openOverallAnalysis = () => {
+  dialogShowDetail.value = true;
+};
 onMounted(() => {
   hmssListGet(); //海绵设施列表
   getJSDList(); //获取积水点数据
diff --git a/src/views/sponeScreen/projectHM/XmOverallsis.vue b/src/views/sponeScreen/projectHM/XmOverallsis.vue
new file mode 100644
index 0000000..0c1b926
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/XmOverallsis.vue
@@ -0,0 +1,576 @@
+<template>
+  <el-form :model="queryParams" ref="queryRef" :rules="Formrules" :inline="true" label-width="120px">
+    <el-form-item label="管网站" prop="pipelineData">
+      <el-tree-select
+        v-model="queryParams.pipelineData"
+        :data="pipelineList"
+        multiple
+        collapse-tags
+        :default-checked-keys="pipelineDefaultKeys"
+        show-checkbox
+        popper-class="dialogPopperClass"
+        node-key="stCode"
+        :render-after-expand="false"
+        :props="{ label: 'stName', value: 'stCode' }"
+        clearable
+        style="width: 250px"
+      />
+    </el-form-item>
+
+    <el-form-item label="积水点站" prop="waterloggingData">
+      <el-select
+        filterable
+        v-model="queryParams.waterloggingData"
+        :clearable="false"
+        multiple
+        collapse-tags
+        placeholder="积水点站"
+        popper-class="dialogPopperClass"
+        style="width: 400px"
+      >
+        <template #header>
+          <el-checkbox v-model="waterloggingCheckAll" :indeterminate="waterloggingIndeterminate" @change="handleWaterloggingCheckAll">
+            <span style="font-size: 16px; color: #ffffff">全选</span>
+          </el-checkbox>
+        </template>
+        <el-option v-for="item in waterloggingList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="雨量站" prop="rainData">
+      <el-select
+        filterable
+        v-model="queryParams.rainData"
+        multiple
+        :clearable="false"
+        collapse-tags
+        placeholder="雨量站"
+        popper-class="dialogPopperClass"
+        style="width: 250px"
+      >
+        <template #header>
+          <el-checkbox v-model="rainCheckAll" :indeterminate="rainIndeterminate" @change="handleRainCheckAll">
+            <span style="font-size: 16px; color: #ffffff">全选</span>
+          </el-checkbox>
+        </template>
+        <el-option v-for="item in rainList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="项目站点" prop="projectData">
+      <el-tree-select
+        v-model="queryParams.projectData"
+        :data="projectList"
+        multiple
+        collapse-tags
+        :default-checked-keys="projectDefaultKeys"
+        show-checkbox
+        popper-class="dialogPopperClass"
+        node-key="stCode"
+        :render-after-expand="false"
+        :props="{ label: 'stName', value: 'stCode' }"
+        clearable
+        style="width: 400px"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      <el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">下载</el-button>
+    </el-form-item>
+  </el-form>
+
+  <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
+    <h1>开封市海绵城市监测数据分析报告</h1>
+    <h4>报告时间：</h4>
+    <div class="rain_content">
+      <!-- 降雨情况说明 -->
+      <p class="title">1.降雨情况说明</p>
+      <p class="small_title">1.1.降雨情况综述</p>
+      <!-- <p class="content">
+        降雨等级: {{ selectDictLabel(rainfall_intensity, rainResult.rainLevel) }}。日累计降雨量在{{ rainResult.minRainfall }}-{{
+          rainResult.maxRainfall
+        }}mm/24h之间。{{ rainResult.minRainStation }}日累计降雨量最小：{{ rainResult.minRainfall }}mm/24h；{{ rainResult.maxRainStation
+}}日累计降雨量最大：{{ rainResult.maxRainfall }}mm/24h，详见下表：
+      </p>
+      <p class="small_tip">各监测站点降雨情况统计表</p>
+      <el-table :data="rainResult['rainTable']" class="detailDataTable" style="width:100%;margin:0 auto">
+        <el-table-column label="序号" type="index" class="pdf-details" aline="center" width="60px" />
+        <el-table-column label="雨量站名称" prop="stName" class="pdf-details" aline="center" width="150px" />
+        <el-table-column label="日累计降雨量（mm/24h ）" prop="rainTotol" class="pdf-details" aline="center" />
+        <el-table-column label="小时最大降雨量（mm/h）" prop="maxRainData" class="pdf-details" aline="center" />
+        <el-table-column label="小时最大降雨时段" prop="maxRainStartTime" class="pdf-details" aline="center">
+          <template #default="{ row }">
+            <span>{{ row.maxRainStartTime }}-{{ row.maxRainEndTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="降雨总历时" prop="rainTodate" class="pdf-details" aline="center" width="130px" />
+      </el-table>
+      <div class="img_content flex flex-v flex-justcontent-start flex-align-start" v-for="file in rainResult['wholeFiles']">
+        <img :src="file.url" class="img_box" />
+      </div> -->
+      <p class="small_tip">降雨强度分布图</p>
+      <!-- 雨量站数据 -->
+      <p class="small_title">1.2.各站点降雨情况</p>
+      <!-- 雨量站数据 -->
+      <div v-for="(item, index) in raindatalist">
+        <!-- <p class="small_title">1.2.{{ Number(index) + 1 }}.{{ item.stName }}</p>
+        <p class="small_title">1.2.{{ Number(index) + 1 }}.1监测点位置</p>
+        <div class="img_content" v-for="file in item.stationFiles">
+          <img :src="file.url" class="img_box" />
+          <p class="small_tip">{{ item.stName }}监测点位置示意图</p>
+        </div>
+        <p class="small_title">1.2.{{ Number(index) + 1 }}.2雨量详情</p>
+        <p class="content circle">降雨时间段{{ item.rainStartTime }}开始至{{ item.rainEndTime }}结束，总历时{{
+          item.rainTodate }};</p>
+        <p class="content circle">日累计降雨量{{ item.rainTotol }}mm/24h;</p>
+        <p class="content circle">降雨等级: {{ selectDictLabel(rainfall_intensity, item.rainLevel) }};</p>
+        <p class="content circle">最大小时降雨量：{{ item.maxRainData }}mm/h（{{ item.maxRainTimeStart }}-{{ item.maxRainTimeEnd
+        }}）。</p> -->
+        <!-- echarts降雨趋势图 -->
+        <!-- <div :id="`chartOneBG_${item.stCode}`" class="chartOneBG rainChart"></div>
+        <p class="small_tip">{{ item.stationName }}降雨趋势图</p> -->
+      </div>
+    </div>
+    <!-- 积水点部分 -->
+    <div class="logging_content">
+      <p class="title">2.内涝/积水情况分析</p>
+      <p class="small_title">2.1.内涝/积水情况综述</p>
+      <p class="content">本场降雨，共计发生积水情况次，内涝情况次，详情见下表：</p>
+      <p class="small_tip">监测点位积水情况统计表</p>
+      <!-- <el-table :data="waterLoggingResultDto['waterloggingTableList']" class="detailDataTable" style="width: 100%; margin: 0 auto">
+        <el-table-column label="序号" type="index" class="pdf-details" aline="center" width="60px" />
+        <el-table-column label="监测站点名称" prop="stName" class="pdf-details" aline="center" />
+        <el-table-column label="最大积水深度（cm）" prop="maxPongdingdepth" class="pdf-details" aline="center" width="120px" />
+        <el-table-column label="最大积水深度发生时刻" prop="maxPongdingTime" class="pdf-details" aline="center" />
+        <el-table-column label="小时最大降雨时段" prop="maxRainStartTime" class="pdf-details" aline="center">
+          <template #default="{ row }">
+            <span>{{ row.maxRainStartTime }}-{{ row.maxRainEndTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="累计积水时长" prop="pongdingDuration" class="pdf-details" aline="center" width="110px" />
+        <el-table-column label="类型" prop="stType" class="pdf-details" aline="center" width="90px" />
+      </el-table>
+      <div class="img_content" v-for="file in waterLoggingResultDto['stFiles']">
+        <img :src="file.url" class="img_box" />
+      </div> -->
+      <p class="small_tip">内涝/积水分布图</p>
+      <p class="small_title">2.2.各内涝/积水情况</p>
+      <!-- 易涝点数据 -->
+      <div v-for="(item, index) in loggingdatalist">
+        <!-- <p class="small_title">2.2.{{ Number(index) + 1 }}{{ item.stName }}</p> -->
+        <!-- echarts降雨量、水位 -->
+        <!-- <div :id="`LoggingJYLSWChartOneBG_${item.stCode}`" class="chartOneBG"></div>
+        <p class="small_tip">降雨量/水位趋势图</p>
+        <p class="content circle">最大积水深度：{{ item.maxPongdingdepth }}cm;</p>
+        <p class="content circle">最大积水深度发生时刻：{{ item.maxPongdingTime }};</p>
+        <p class="content circle">累计积水时长：{{ item.pongdingDuration }};</p>
+        <p class="content circle">积水原因：{{ item.pongdingReason }};</p>
+        <p class="content circle">解决措施：{{ item.measures }}。</p> -->
+      </div>
+    </div>
+    <!-- 管网数据 -->
+    <div class="pipeline_content">
+      <p class="title">3.排水设施运行状态分析</p>
+      <!-- <div class="img_content flex flex-v flex-justcontent-start flex-align-start">
+        <img :src="item.url" class="img_box" v-for="item in pipePicCCLFile" />
+      </div> -->
+
+      <!-- <div v-for="(item, index) in pipeResult['totPipeAreasInfoList']"> -->
+      <!-- <p class="small_title">3.{{ Number(index) + 1 }}.{{ item.areasName }}</p>
+        <p class="small_title">3.1.{{ Number(index) + 1 }}.{{ item.areasName }}排水设施运行状态综述</p>
+        <p class="small_title">3.1.1.{{ Number(index) + 1 }}.管网部分</p>
+        <p class="content">外水汇入点位：{{ item.pipebufen.wshrCount }}处，{{ item.pipebufen.wshrStr }}</p>
+        <p class="content">运行负荷过大点位：{{ item.pipebufen.yxfhdCount }}处，{{ item.pipebufen.yxfhdStr }}</p>
+        <p class="content">行泄不畅点位：{{ item.pipebufen.xxbcCount }}处，{{ item.pipebufen.xxbcStr }}</p>
+        <p class="content">流速过缓点位：{{ item.pipebufen.lshmCount }}处，{{ item.pipebufen.lshmStr }}</p> -->
+      <p class="small_tip">管网运行状态统计表</p>
+      <!-- <el-table :data="item.pipebufen.pipeTableInfoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
+          <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
+          <el-table-column label="监测点位" prop="stName" class="pdf-details" aline="center" />
+          <el-table-column label="管径" prop="pipeDiameter" class="pdf-details" aline="center" />
+          <el-table-column label="24h累计排水量（m³）" prop="sblSum24" class="pdf-details" aline="center" />
+          <el-table-column label="降雨时段累计排水量（m³）" prop="rainSumDistance" class="pdf-details" aline="center" />
+          <el-table-column label="降雨时段平均排水量（m³）" prop="rainAvgDistance" class="pdf-details" aline="center" />
+          <el-table-column label="最大水深（m）" prop="maxZ" class="pdf-details" aline="center" />
+          <el-table-column label="平均流速(m/s)" prop="avgFlow" class="pdf-details" aline="center" />
+          <el-table-column label="最大流速（m/s）" prop="maxFlow" class="pdf-details" aline="center" />
+          <el-table-column label="旱天水位占比" prop="clearDayRate" class="pdf-details" aline="center" />
+        </el-table> -->
+      <!-- <p class="small_title">2.1.2.仓程路雨水泵站设备运行日志</p>
+        <p class="small_tip">表 3-2仓程路雨水泵站设备运行日志</p>
+        <el-table :data="levelData" class="detailDataTable" style="width:100%;margin:0 auto">
+          <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
+          <el-table-column label="1#泵" prop="type" class="pdf-details" aline="center" />
+          <el-table-column label="2#泵" prop="24Rail" class="pdf-details" aline="center" />
+          <el-table-column label="3#泵" prop="12Rail" class="pdf-details" aline="center" />
+          <el-table-column label="4#泵" prop="12Rail" class="pdf-details" aline="center" />
+        </el-table>
+        <p class="content">
+          仓程路问题点共计十处，主要问题是运行负荷过大、行泄不畅等问题，问题分布示意图详见图3-1：
+        </p>
+        <img src="@/assets/images/mewOneMap/haiMianJianShe/demo.jpg" class="img_box" />
+        <p class="small_tip">图 3-1仓程路片区问题分布示意图</p> -->
+
+      <p class="small_title">2.2.2.典型问题说明</p>
+      <!-- <div v-for="(child, index1) in item['typicalProblems']['dxwtList']"> -->
+      <!-- <p class="small_title">2.2.2.{{ Number(index1) + 1 }}.{{ child.stName }}问题说明</p> -->
+      <!-- echarts 降雨量、流量 -->
+      <!-- <div :id="`JYLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div> -->
+      <!-- <p class="small_tip">{{ item.pipelineFlowStartTime }}至{{ item.pipelineFlowEndTime }}降雨量-流量变化过程图</p> -->
+      <p class="small_tip">管网、流量情况分布图</p>
+      <!-- echarts 水位、流量 -->
+      <!-- <div :id="`SWLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div> -->
+      <!-- <p class="small_tip">{{ item.pipelineTimeStart }}至{{ item.pipelineTimeEnd }}间水位-流量变化过程图</p> -->
+      <!-- <p class="small_tip">管网流量、水位变化趋势图</p> -->
+      <!-- <p class="content">24h累计排水量：{{ child.sblSum24 }}m³</p> -->
+      <!-- <p class="content">降雨时段累计排水量：{{ child.rainSumDistance }}m³</p> -->
+      <!-- <p class="content">平均流速:{{ child.avgFlow }}m/s</p> -->
+      <!-- <p class="content">退水时长：{{ child.diffInHours }}h</p> -->
+      <!-- <p class="content">管网问题：{{ child.questionDesc }}</p> -->
+      <!-- <p class="content">此次降雨事件降雨量{{ item.pipelineRain }}mm，属于{{ item.pipelinerainlevel }}事件。从{{
+        item.pipelineFlowStartTime }}开始，{{ item.pipelineFlowEndTime }}结束。监测期间发生产流。监测时间段内的平均流量
+        为{{ item.pipelineavgflow }}m³/h，累计排水量为{{ item.pipelinedrainage }}m³。</p> -->
+      <!-- </div> -->
+      <!-- </div> -->
+    </div>
+
+    <!-- 项目数据 -->
+    <div class="project_content">
+      <p class="title">5.海绵项目及设施达标情况分析</p>
+      <p class="small_title">5.1.项目</p>
+      <p class="small_title">5.1.1.项目整体情况</p>
+      <p class="content">监测项目目前存在管道淤积、雨污分流不彻底、安装点位导致数据不全等问题，具体分析情况如表5-1：</p>
+      <p class="small_tip">各个监测项目达标情况分析表</p>
+      <!-- <el-table :data="projectJlDtoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
+        <el-table-column label="序号" type="index" class="pdf-details" aline="center" />
+        <el-table-column label="项目名称" prop="projectName" class="pdf-details" aline="center" />
+        <el-table-column label="设计降雨量（mm）" prop="designRain" class="pdf-details" aline="center" />
+        <el-table-column label="实际控制雨量（mm）" prop="trueRain" class="pdf-details" aline="center">
+          <template #default="{ row }">
+            <span v-if="row.trueRain == '异常'">雨前出流</span>
+            <span v-else>{{ row.trueRain }}mm </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="年径流总量控制率设计值（%）" prop="ghJlzlkzl" class="pdf-details" aline="center" />
+        <el-table-column label="典型降雨径流总量控制率实际值（%）" prop="jlzlkzl" class="pdf-details" aline="center" />
+        <el-table-column label="分析结果" prop="conclusion" class="pdf-details" aline="center" />
+      </el-table> -->
+
+      <p class="small_title">5.1.2.数据异常项目分析</p>
+      <!-- <div v-for="(item, index) in projectdatalist"> -->
+      <!-- <p class="small_title">5.{{ Number(index) + 1 }}.3{{ item.stationName }}</p> -->
+      <!-- <p class="content">为了解{{ item.stationName }}海绵改造项目建设成效，对{{ item.stationName }}进行监测，监测点位位置如图5-1所示： -->
+      <!-- </p> -->
+      <!-- <div class="img_content" v-for="file in item.fileList">
+          <img :src="file.url" class="img_box" />
+        </div> -->
+      <!-- <p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p>
+        <p class="content">{{ item.stationName }}设计降雨量{{ item.designRain }}mm，降雨期间基本未出流，详见表5-2：</p>
+        <p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p> -->
+      <div class="table_content_box">
+        <div class="header">基础信息</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">监测时间段</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.projectRainStartTime }}至{{ item.projectRainEndTime }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">降雨总量（mm）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.projectRain }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">项目占地面积（㎡）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.projectArea }}</div> -->
+        </div>
+        <div class="header">水质水量监测</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">项目外排总径流体积（m³）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.xmwpzjjtj }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">项目外排总SS负荷量（g）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.xmwpzssfhl }}</div> -->
+        </div>
+        <div class="header">设计指标</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">设计降雨量</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.designRain }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流总量控制率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.ghJlzlkzl }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流污染削减率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.ghJlwrxjl }}</div> -->
+        </div>
+        <div class="header">效果评价</div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">实际控制雨量（mm）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.trueRain }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流总量控制率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.jlzlkzl }}</div> -->
+        </div>
+        <div class="basic_detail flex flex-r">
+          <div class="basic_label flex flex-1">径流污染削减率（%）</div>
+          <!-- <div class="basic_val flex flex-1">{{ item.jlwrxjl }}</div> -->
+        </div>
+      </div>
+      <p class="content">详见下图：</p>
+      <!-- echarts降雨量、流量 -->
+      <!-- <div :id="`projectJYLLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
+      <!-- echarts 流量、悬浮物固体浓度 -->
+      <!-- <div :id="`projectLLXFWChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
+      <!-- echarts水位、流量 -->
+      <!-- <div :id="`projectSWLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div> -->
+      <!-- <p class="small_tip">{{ item.stationName }}降雨量/流量、流量/SS、水位/SS变化过程图</p> -->
+      <!-- <p class="content">现场排查情况见图5-3：</p> -->
+      <!-- <div class="img_content" v-for="file in item['sceneFileList']"> -->
+      <!-- <img :src="file.url" class="img_box" /> -->
+      <!-- </div> -->
+      <p class="small_tip">总出口积水情况现场验证</p>
+    </div>
+    <p class="title">6.总结</p>
+    <p class="content">
+      此次降雨，监测到降雨等级为，发现路面积水点共计处：排水设施问题集中在管网流速过缓（水力坡度问题）、外水汇入、行泄不畅、水力停留时间过长等问题南塬来水在本次降雨情况下，对城区影响不大，海绵项目建设在补齐监测点位的情况下，需要加快海绵项目建设进度，加强海绵项目运维运维。
+    </p>
+  </div>
+</template>
+<script setup>
+const showLoading = ref(false);
+const loadingText = ref('正在加载中...');
+const queryParams = ref({
+  pipelineData: [],
+  waterloggingData: [],
+  rainData: [],
+  projectData: [],
+});
+const Formrules = reactive({
+  pipelineData: [{ required: true, message: '请至少选择一个管网站', trigger: ['change'] }],
+  waterloggingData: [{ required: true, message: '请至少选择一个积水点站', trigger: ['change'] }],
+  rainData: [{ required: true, message: '请至少选择一个雨量站', trigger: ['change'] }],
+  projectData: [{ required: true, message: '请至少选择一个项目站点', trigger: ['change'] }],
+});
+onMounted(() => {});
+onBeforeUnmount(() => {});
+</script>
+<style lang="scss" scoped>
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+
+  .waterlogImg {
+    flex-wrap: wrap;
+
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
+
+      img {
+        width: 100%;
+        height: 150px;
+      }
+
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    width: 100%;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: #c03639;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: #c03639;
+    border-bottom: 3px solid #c03639;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-weight: bold;
+    margin: 10px 0px;
+    font-size: 21px;
+    font-family: '宋体', 'SimSun', sans-serif;
+  }
+
+  .small_title {
+    font-weight: bold;
+    margin: 10px 0px;
+    font-size: 15px;
+    font-family: '宋体', 'SimSun', sans-serif;
+  }
+
+  .content {
+    text-indent: 28px;
+    font-size: 14px;
+    line-height: 30px;
+    font-family: '宋体', 'SimSun', sans-serif;
+  }
+
+  .circle {
+    position: relative;
+
+    &:after {
+      position: absolute;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      content: '';
+      background: #7b7b7b;
+      left: 8px;
+      top: 50%;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+}
+
+.table_content_box {
+  width: 70%;
+  margin: 10px auto;
+  color: #000;
+  border: 1px solid #00314e !important;
+
+  .header {
+    text-align: center;
+    border-bottom: 0.00521rem solid #00314e !important;
+    color: #000;
+    font-weight: bolder;
+    border-right: none !important;
+    position: static !important;
+    background-color: #dee1e6 !important;
+    height: 0.20833rem !important;
+    line-height: 0.20833rem !important;
+    font-size: 0.06771rem;
+  }
+
+  .basic_label {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+    border-right: 1px solid #00314e !important;
+  }
+
+  .basic_val {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+  }
+}
+
+.img_content {
+  max-width: 90%;
+
+  .img_box {
+    width: 80%;
+  }
+}
+
+.reportDetail {
+  .detailDataTable {
+    margin-bottom: 10px !important;
+  }
+
+  ::v-deep(.el-table) {
+    --el-table-border-color: $mainColor1 !important;
+    --el-table-bg-color: $mainColor1 !important;
+
+    .el-table__body {
+      border-bottom: 1px solid #333 !important;
+    }
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #dee1e6 !important;
+        height: 40px !important;
+        font-size: 13px;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background-color: #004770 !important;
+
+      .el-button [class*='el-icon-'] + span {
+        margin-left: 1px;
+      }
+
+      td.el-table-fixed-column--right {
+        background: #00314e !important;
+      }
+    }
+
+    tr {
+      background-color: #f8f8f9 !important;
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: #fff !important;
+    }
+
+    tr:hover > td {
+      background-color: #f5f7fa !important;
+    }
+
+    th.el-table__cell,
+    td.el-table__cell {
+      text-align: center;
+      border-bottom: 1px solid #00314e !important;
+      color: #000;
+      border-right: none !important;
+      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
+    }
+
+    .el-table__empty-block {
+      background-color: #fff !important;
+
+      .el-table__empty-text {
+        color: #c6c6c6 !important;
+      }
+    }
+
+    .el-button {
+      border: none !important;
+      background: none !important;
+
+      &:hover {
+        background: none !important;
+        transform: scale(1.01);
+      }
+    }
+  }
+}
+
+::v-deep(.el-loading-spinner) {
+  position: fixed;
+  top: 420px !important;
+  left: 0;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/Xmanalysis.vue b/src/views/sponeScreen/projectHM/Xmanalysis.vue
index 534a822..c2e566f 100644
--- a/src/views/sponeScreen/projectHM/Xmanalysis.vue
+++ b/src/views/sponeScreen/projectHM/Xmanalysis.vue
@@ -61,6 +61,44 @@
       <el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">导出</el-button>
     </el-form-item>
   </el-form>
+
+  <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
+    <h1>开封市海绵城市项目及设施分析报告</h1>
+    <h4>报告时间：</h4>
+    <!-- <div v-if="projectObj['tablelist'] && projectObj['tablelist'].length">
+      <div class="chart_content" v-for="item in projectObj['tablelist']">
+        小时流量、降雨量
+        <div class="chart_list" v-for="(child, index) in item['tablelist']">
+          <p class="small_title">【{{ moment(child.dataTime).format('YYYY-MM-DD') }}号{{ item.stName }}趋势】</p>
+          <div :id="`rain_chart_${moment(child.dataTime).format('YYYY-MM-DD')}_${item.stCode}_${index}`" class="chartOneBG rainChart"></div>
+        </div>
+        <p class="small_title" v-if="projectObj['tablelist'] && projectObj['tablelist'].length">
+          【设计参数】设计降雨量 {{ projectObj.designRain }}mm，设计年径流总控制率{{ projectObj.ghJlzlkzl }}%
+        </p>
+        <el-table :data="item['tablelist']" style="width: 100%; margin: 0 auto" class="detailDataTable">
+          <el-table-column label="对比日期" prop="dataTime" class="pdf-details" aline="center" width="100px">
+            <template #default="{ row }">
+              <span>{{ moment(row.dataTime).format('YYYY-MM-DD') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="降雨开始时间" prop="rainStartTime" class="pdf-details" aline="center" width="180px" />
+          <el-table-column label="出流开始时间" prop="flowStartTime" class="pdf-details" aline="center" width="180px" />
+          <el-table-column label="错峰间隔时间" prop="flowIntervalTime" class="pdf-details" aline="center" width="180px" />
+          <el-table-column label="控制雨量(mm)" prop="trueRain" class="pdf-details" aline="center" width="110px" />
+          <el-table-column label="总出流量(m³)" prop="totolFlow" class="pdf-details" aline="center"> </el-table-column>
+    
+          <el-table-column label="典型降雨径流总量控制率(%)" prop="jlzlkzl" class="pdf-details" aline="center"> </el-table-column>
+          <el-table-column label="是否达标" prop="isStandard" class="pdf-details" aline="center" width="90px">
+            <template #default="{ row }">
+  
+            </template>
+          </el-table-column>
+        </el-table>
+        <p class="small_title" style="font-weight: normal">【信息】{{ item['tablelist'][0].information }}</p>
+        <p class="small_title" style="font-weight: normal">【建议】{{ item['tablelist'][0].advice }}</p>
+      </div>
+    </div> -->
+  </div>
 </template>
 <script setup>
 const typeList = [
@@ -86,123 +124,379 @@
 onBeforeUnmount(() => {});
 </script>
 <style lang="scss" scoped>
-#dialogContent_1 {
-  .form {
-    .el-form-item {
-      position: relative;
-      margin-bottom: 30px;
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 30px;
 
-      &::after {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -15px;
-        height: 1px;
-        content: '';
-        background: #347ee5;
+  // 表格样式
+  .table_content {
+    .el-table {
+      background-color: transparent !important;
+
+      .el-table__cell {
+        padding: 6px 0 !important;
       }
 
-      &:last-child {
-        &::after {
-          height: 0;
+      .success {
+        color: #24de8d;
+        font-weight: bold;
+      }
+
+      .fail {
+        color: #f85050;
+        font-weight: bold;
+      }
+
+      .el-loading-mask {
+        background: rgba(3, 20, 37, 0.9) !important;
+      }
+
+      .indexClass_1 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_2 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_3 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      thead {
+        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
+        // background-size: 100% 100%;
+        background: #005cba !important;
+      }
+
+      .el-button--primary {
+        width: 49px;
+        height: 22px;
+        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
+        border-radius: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 14px;
+        color: #d2efff;
+        line-height: 22px;
+      }
+
+      .el-table__header-wrapper {
+        .el-table__header {
+          th {
+            background: transparent !important;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #fff;
+            line-height: 32px;
+          }
+        }
+      }
+
+      tr {
+        height: 36px !important;
+      }
+
+      tr:nth-of-type(even) {
+        // background: rgba(0, 72, 153, 0.3) !important;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      }
+
+      tr:nth-of-type(odd) {
+        // background: rgba(19, 108, 183, 0.5) !important;
+        background: transparent !important;
+      }
+
+      .el-table__body {
+        border-bottom: none !important;
+
+        tr:nth-of-type(odd) {
+        }
+
+        tr:nth-of-type(even) {
+          td {
+          }
+        }
+
+        tr:hover > td {
+          cursor: pointer;
+          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
+        }
+      }
+
+      .el-table__inner-wrapper {
+        &::before {
+          display: none;
+        }
+      }
+
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        tr {
+          background-color: transparent !important;
+        }
+
+        th {
+          word-break: break-word;
+        }
+      }
+
+      .el-table__body-wrapper {
+        .el-button [class*='el-icon-'] + span {
+          margin-left: 1px;
+        }
+      }
+
+      th.el-table__cell {
+        color: #fff;
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+      }
+
+      th.is-left {
+        text-align: left !important;
+      }
+
+      td.el-table__cell {
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+        color: #fff !important;
+      }
+
+      td.is-left {
+        text-align: left;
+      }
+
+      td.el-table-fixed-column--right {
+        background-color: #0f3a4f !important;
+        color: #fff !important;
+
+        .el-button {
+          color: #fff !important;
+        }
+      }
+
+      .el-table__empty-block {
+        .el-table__empty-text {
+          color: #fff !important;
+        }
+      }
+    }
+
+    // .ListBoxHeader_Sel {
+    //   .el-input__wrapper {
+    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
+    //     // box-shadow: none !important;
+    //   }
+    // }
+
+    .el-progress-bar__outer {
+      background: #2eafbf !important;
+    }
+
+    .el-tabs {
+      .el-tabs__header {
+        .el-tabs__nav {
+          .el-tabs__item {
+            color: #fff !important;
+
+            &.is-active {
+              color: #409eff !important;
+            }
+          }
         }
       }
     }
   }
 
-  .el-form--inline .el-form-item {
-    margin-right: 8px !important;
-  }
+  .waterlogImg {
+    flex-wrap: wrap;
 
-  .el-form-item__label {
-    font-family: Source Han Sans CN;
-    font-weight: 500;
-    font-size: 16px;
-    color: #e0e5fa;
-  }
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
 
-  .el-tabs__nav-scroll {
-    .el-tabs__item {
-      font-size: 16px !important;
-      color: #ffffff;
-    }
+      img {
+        width: 100%;
+        height: 150px;
+      }
 
-    .is-active {
-      border: 1px solid #009cff;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    &::after {
-      background-color: #b9c1c32b;
-    }
-  }
-
-  .el-tag.el-tag--info {
-    background-color: transparent;
-    color: #9ec4ff;
-  }
-
-  .el-date-editor .el-range-input,
-  .el-icon,
-  .el-range-separator {
-    color: #d3f6ff !important;
-    font-size: 16px !important;
-
-    &.avatar-uploader-icon {
-      font-size: 80px !important;
-    }
-  }
-
-  .el-textarea__inner {
-    background: #155785;
-    border-radius: 6px;
-    border: 1px solid #47affe;
-    box-shadow: none !important;
-    color: #d3f6ff;
-    font-family: Source Han Sans CN;
-    font-weight: 500;
-    font-size: 16px !important;
-
-    &::placeholder {
-      color: #d3f6ff;
-      font-family: Source Han Sans CN;
-      font-weight: 500;
-      font-size: 16px !important;
-    }
-  }
-
-  .el-input__wrapper {
-    box-shadow: none !important;
-    height: 35px !important;
-    background: #155785 !important;
-    border-radius: 6px !important;
-    border: 1px solid #47affe !important;
-    font-size: 16px !important;
-
-    .el-input__prefix {
-      color: #d3f6ff;
-    }
-
-    .el-input__inner {
-      height: 35px !important;
-      color: #d3f6ff !important;
-      -webkit-text-fill-color: #d3f6ff !important;
-      font-family: Source Han Sans CN;
-      font-weight: 500;
-      font-size: 16px !important;
-
-      &::placeholder {
-        color: #d3f6ff;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        font-size: 16px !important;
+      p {
+        line-height: 20px;
       }
     }
   }
 
-  .el-date-editor {
-    height: auto;
+  #rain_chart,
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    // width: 100%;
+    width: 1000px;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: #c03639;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: #c03639;
+    border-bottom: 3px solid #c03639;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .small_title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .button_title {
+    width: 66px;
+    height: 22px;
+    line-height: 22px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    margin-left: 20px;
+    cursor: pointer;
+
+    &:hover {
+      background: #00a4ae;
+      border-radius: 6px;
+      text-align: center;
+    }
+  }
+
+  .active_button_title {
+    background: #00a4ae;
+    border-radius: 6px;
+    text-align: center;
+  }
+
+  .content {
+    text-indent: 14px;
+    position: relative;
+
+    span {
+      color: #333333;
+      font-weight: bolder;
+    }
+
+    &:after {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: #918f8f;
+      border-radius: 50%;
+      content: '';
+      left: 0;
+      top: 16px;
+      margin-top: -4px;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+
+  .rain_date_detail {
+    margin-bottom: 10px;
+
+    .rain_box2 {
+      &:hover {
+        background: #5daee6;
+      }
+    }
+
+    .active_rain_box2 {
+      background: #5daee6 !important;
+    }
+
+    .rain_box {
+      // width: 112px;
+      height: 78px;
+      background: #155785;
+      border-radius: 6px;
+      margin-right: 10px;
+      cursor: pointer;
+      color: #ffffff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .rainfall {
+        span {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 20px;
+          color: #ffffff;
+        }
+      }
+    }
   }
 }
 </style>