diff --git a/src/api/MonitoringAnalysis.js b/src/api/MonitoringAnalysis.js
index f8ebcec..4f07c98 100644
--- a/src/api/MonitoringAnalysis.js
+++ b/src/api/MonitoringAnalysis.js
@@ -59,14 +59,42 @@
 // 获取列表数据
 export function pipelineProblemStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineProblemStatistic`,
+    url: `business/drainageSystemv1/pipelineProblemStatistic`,
     method: 'get',
     params,
   });
 }
 export function pipelineRunRiskStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineRunRiskStatistic`,
+    url: `business/drainageSystemv1/pipelineRunRiskStatistic`,
+    method: 'get',
+    params,
+  });
+}
+export function outletList(params) {
+  return request({
+    url: `business/drainageSystem/outletList`,
+    method: 'get',
+    params,
+  });
+}
+export function pointList(params) {
+  return request({
+    url: `business/drainageSystem/pointList`,
+    method: 'get',
+    params,
+  });
+}
+export function siteWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/siteWaterYieldAnalysis`,
+    method: 'get',
+    params,
+  });
+}
+export function waterRegionWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/waterRegionWaterYieldAnalysis`,
     method: 'get',
     params,
   });

diff --git a/src/api/MonitoringAnalysis.js b/src/api/MonitoringAnalysis.js
index f8ebcec..4f07c98 100644
--- a/src/api/MonitoringAnalysis.js
+++ b/src/api/MonitoringAnalysis.js
@@ -59,14 +59,42 @@
 // 获取列表数据
 export function pipelineProblemStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineProblemStatistic`,
+    url: `business/drainageSystemv1/pipelineProblemStatistic`,
     method: 'get',
     params,
   });
 }
 export function pipelineRunRiskStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineRunRiskStatistic`,
+    url: `business/drainageSystemv1/pipelineRunRiskStatistic`,
+    method: 'get',
+    params,
+  });
+}
+export function outletList(params) {
+  return request({
+    url: `business/drainageSystem/outletList`,
+    method: 'get',
+    params,
+  });
+}
+export function pointList(params) {
+  return request({
+    url: `business/drainageSystem/pointList`,
+    method: 'get',
+    params,
+  });
+}
+export function siteWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/siteWaterYieldAnalysis`,
+    method: 'get',
+    params,
+  });
+}
+export function waterRegionWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/waterRegionWaterYieldAnalysis`,
     method: 'get',
     params,
   });
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
new file mode 100644
index 0000000..ee4ce2c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -0,0 +1,395 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch, onUnmounted } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var barWidth = 13;
+      var option;
+      option = {
+        color: ["#3FFFC2", "#FFF21C"],
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: 15,
+          left: "0%",
+          top: 30,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: "#58b2ed",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#EBFEFF",
+              fontSize: 12,
+              fontFamily: "AlibabaPuHuiTi",
+              formatter: function (params) {
+                var str = ""; // 最终拼接成的字符串
+                var paramsLen = params.length; // 获取每项文字的个数
+                var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                if (paramsLen > len) {
+                  //大于设定的len就换行，不大于就不变化
+                  for (var i = 0; i < rowNumber; i++) {
+                    var temp = ""; // 表示每一次截取的字符串
+                    var start = i * len; // 开始截取的位置
+                    var end = start + len; // 结束截取的位置
+                    if (i == rowNumber - 1) {
+                      // 最后一次不换行
+                      temp = params.substring(start, paramsLen);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      temp = params.substring(start, end) + "\n";
+                    }
+                    str += temp; // 最终拼成的字符串
+                  }
+                } else {
+                  // 给新的字符串赋值
+                  str = params;
+                }
+                return str; //返回字符串
+              },
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.y1_Unit,
+            type: "value",
+            axisLabel: {
+              color: "#AAC1CF",
+              show: true,
+              formatter: function (value) {
+                return value.toFixed(2); // 保留两位小数
+              },
+            },
+            nameTextStyle: {
+              color: "#AAC1CF",
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#2161a8",
+              },
+            },
+            alignTicks: true,
+            position: "left",
+            offset: 0,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
+            handleStyle: {
+              color: "#94FA41",
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          // 柱状图
+          // 折线图
+        ],
+      };
+      // 右侧Y轴动态填入
+      if (props.data.y2_show) {
+        option.yAxis.push({
+          name: props.data.y2_Unit,
+          type: "value",
+          min: 0,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+            // formatter: function (value) {
+            //   return value.toFixed(2); // 保留两位小数
+            // },
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+          position: "right",
+          offset: 0,
+        });
+      }
+      // 数据动态填入
+      if (props.data.yAxis1_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis1_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 11,
+            itemStyle: {
+              color: "#19D6FF",
+            },
+            data: props.data.yAxis1_bar,
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis1_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: "rgba(25,214,255,0.8)",
+              opacity: 0.6,
+              // },
+            },
+            data: props.data.yAxis1_bar,
+            barGap: "-100%",
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis2_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 12,
+            itemStyle: {
+              color: "#FF6464",
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis2_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: function (params) {
+                return "rgba(255,100,100)";
+              },
+              opacity: 0.6,
+
+              // },
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_line != null) {
+        option.series.push({
+          name: props.data.yAxis2_line_Name,
+          data: props.data.yAxis2_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#FFC155", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#FFC155", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis2_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis2_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      if (props.data.yAxis3_line != null) {
+        option.series.push({
+          name: props.data.yAxis3_line_Name,
+          data: props.data.yAxis3_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#99FF55", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#99FF55", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis3_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis3_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        console.log("echarts点击事件", params.name, props.ClickData);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      allData.chart.off("click");
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/api/MonitoringAnalysis.js b/src/api/MonitoringAnalysis.js
index f8ebcec..4f07c98 100644
--- a/src/api/MonitoringAnalysis.js
+++ b/src/api/MonitoringAnalysis.js
@@ -59,14 +59,42 @@
 // 获取列表数据
 export function pipelineProblemStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineProblemStatistic`,
+    url: `business/drainageSystemv1/pipelineProblemStatistic`,
     method: 'get',
     params,
   });
 }
 export function pipelineRunRiskStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineRunRiskStatistic`,
+    url: `business/drainageSystemv1/pipelineRunRiskStatistic`,
+    method: 'get',
+    params,
+  });
+}
+export function outletList(params) {
+  return request({
+    url: `business/drainageSystem/outletList`,
+    method: 'get',
+    params,
+  });
+}
+export function pointList(params) {
+  return request({
+    url: `business/drainageSystem/pointList`,
+    method: 'get',
+    params,
+  });
+}
+export function siteWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/siteWaterYieldAnalysis`,
+    method: 'get',
+    params,
+  });
+}
+export function waterRegionWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/waterRegionWaterYieldAnalysis`,
     method: 'get',
     params,
   });
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
new file mode 100644
index 0000000..ee4ce2c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -0,0 +1,395 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch, onUnmounted } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var barWidth = 13;
+      var option;
+      option = {
+        color: ["#3FFFC2", "#FFF21C"],
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: 15,
+          left: "0%",
+          top: 30,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: "#58b2ed",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#EBFEFF",
+              fontSize: 12,
+              fontFamily: "AlibabaPuHuiTi",
+              formatter: function (params) {
+                var str = ""; // 最终拼接成的字符串
+                var paramsLen = params.length; // 获取每项文字的个数
+                var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                if (paramsLen > len) {
+                  //大于设定的len就换行，不大于就不变化
+                  for (var i = 0; i < rowNumber; i++) {
+                    var temp = ""; // 表示每一次截取的字符串
+                    var start = i * len; // 开始截取的位置
+                    var end = start + len; // 结束截取的位置
+                    if (i == rowNumber - 1) {
+                      // 最后一次不换行
+                      temp = params.substring(start, paramsLen);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      temp = params.substring(start, end) + "\n";
+                    }
+                    str += temp; // 最终拼成的字符串
+                  }
+                } else {
+                  // 给新的字符串赋值
+                  str = params;
+                }
+                return str; //返回字符串
+              },
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.y1_Unit,
+            type: "value",
+            axisLabel: {
+              color: "#AAC1CF",
+              show: true,
+              formatter: function (value) {
+                return value.toFixed(2); // 保留两位小数
+              },
+            },
+            nameTextStyle: {
+              color: "#AAC1CF",
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#2161a8",
+              },
+            },
+            alignTicks: true,
+            position: "left",
+            offset: 0,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
+            handleStyle: {
+              color: "#94FA41",
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          // 柱状图
+          // 折线图
+        ],
+      };
+      // 右侧Y轴动态填入
+      if (props.data.y2_show) {
+        option.yAxis.push({
+          name: props.data.y2_Unit,
+          type: "value",
+          min: 0,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+            // formatter: function (value) {
+            //   return value.toFixed(2); // 保留两位小数
+            // },
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+          position: "right",
+          offset: 0,
+        });
+      }
+      // 数据动态填入
+      if (props.data.yAxis1_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis1_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 11,
+            itemStyle: {
+              color: "#19D6FF",
+            },
+            data: props.data.yAxis1_bar,
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis1_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: "rgba(25,214,255,0.8)",
+              opacity: 0.6,
+              // },
+            },
+            data: props.data.yAxis1_bar,
+            barGap: "-100%",
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis2_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 12,
+            itemStyle: {
+              color: "#FF6464",
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis2_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: function (params) {
+                return "rgba(255,100,100)";
+              },
+              opacity: 0.6,
+
+              // },
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_line != null) {
+        option.series.push({
+          name: props.data.yAxis2_line_Name,
+          data: props.data.yAxis2_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#FFC155", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#FFC155", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis2_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis2_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      if (props.data.yAxis3_line != null) {
+        option.series.push({
+          name: props.data.yAxis3_line_Name,
+          data: props.data.yAxis3_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#99FF55", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#99FF55", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis3_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis3_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        console.log("echarts点击事件", params.name, props.ClickData);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      allData.chart.off("click");
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
new file mode 100644
index 0000000..9c5906c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -0,0 +1,211 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import bus from "@/bus";
+import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+    TypeID: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+          formatter: (params) => {
+            // console.log(params);
+            var relVal = "" + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#FFFFFF", // 这里设置为红色
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          // name: "数量(个)",
+          nameTextStyle: {
+            color: "#AAC1CF", // 红色
+            align: "right",
+            fontSize: 10,
+          },
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          nameLocation: "start",
+          type: "value",
+          minInterval: 1,
+          nameGap: 5,
+          axisLabel: {
+            color: "#AAC1CF",
+            fontSize: 12,
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: props.data.xAxis,
+          axisLabel: {
+            color: "#EBFEFF",
+            show: true,
+            fontSize: 12,
+          },
+          nameTextStyle: {
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            name: props.data.yAxis2_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis2,
+            barGap: "-100%",
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: "#31FEDF",
+            },
+          },
+          {
+            name: props.data.yAxis_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis,
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "#FF6464" },
+                { offset: 1, color: "#FF9A9A" },
+              ]),
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        // params.value 是点击的X轴标签的值
+        console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+          // clearInterval(allData.timer);
+        }
+        allData.chart.off("click");
+
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/api/MonitoringAnalysis.js b/src/api/MonitoringAnalysis.js
index f8ebcec..4f07c98 100644
--- a/src/api/MonitoringAnalysis.js
+++ b/src/api/MonitoringAnalysis.js
@@ -59,14 +59,42 @@
 // 获取列表数据
 export function pipelineProblemStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineProblemStatistic`,
+    url: `business/drainageSystemv1/pipelineProblemStatistic`,
     method: 'get',
     params,
   });
 }
 export function pipelineRunRiskStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineRunRiskStatistic`,
+    url: `business/drainageSystemv1/pipelineRunRiskStatistic`,
+    method: 'get',
+    params,
+  });
+}
+export function outletList(params) {
+  return request({
+    url: `business/drainageSystem/outletList`,
+    method: 'get',
+    params,
+  });
+}
+export function pointList(params) {
+  return request({
+    url: `business/drainageSystem/pointList`,
+    method: 'get',
+    params,
+  });
+}
+export function siteWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/siteWaterYieldAnalysis`,
+    method: 'get',
+    params,
+  });
+}
+export function waterRegionWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/waterRegionWaterYieldAnalysis`,
     method: 'get',
     params,
   });
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
new file mode 100644
index 0000000..ee4ce2c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -0,0 +1,395 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch, onUnmounted } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var barWidth = 13;
+      var option;
+      option = {
+        color: ["#3FFFC2", "#FFF21C"],
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: 15,
+          left: "0%",
+          top: 30,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: "#58b2ed",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#EBFEFF",
+              fontSize: 12,
+              fontFamily: "AlibabaPuHuiTi",
+              formatter: function (params) {
+                var str = ""; // 最终拼接成的字符串
+                var paramsLen = params.length; // 获取每项文字的个数
+                var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                if (paramsLen > len) {
+                  //大于设定的len就换行，不大于就不变化
+                  for (var i = 0; i < rowNumber; i++) {
+                    var temp = ""; // 表示每一次截取的字符串
+                    var start = i * len; // 开始截取的位置
+                    var end = start + len; // 结束截取的位置
+                    if (i == rowNumber - 1) {
+                      // 最后一次不换行
+                      temp = params.substring(start, paramsLen);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      temp = params.substring(start, end) + "\n";
+                    }
+                    str += temp; // 最终拼成的字符串
+                  }
+                } else {
+                  // 给新的字符串赋值
+                  str = params;
+                }
+                return str; //返回字符串
+              },
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.y1_Unit,
+            type: "value",
+            axisLabel: {
+              color: "#AAC1CF",
+              show: true,
+              formatter: function (value) {
+                return value.toFixed(2); // 保留两位小数
+              },
+            },
+            nameTextStyle: {
+              color: "#AAC1CF",
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#2161a8",
+              },
+            },
+            alignTicks: true,
+            position: "left",
+            offset: 0,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
+            handleStyle: {
+              color: "#94FA41",
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          // 柱状图
+          // 折线图
+        ],
+      };
+      // 右侧Y轴动态填入
+      if (props.data.y2_show) {
+        option.yAxis.push({
+          name: props.data.y2_Unit,
+          type: "value",
+          min: 0,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+            // formatter: function (value) {
+            //   return value.toFixed(2); // 保留两位小数
+            // },
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+          position: "right",
+          offset: 0,
+        });
+      }
+      // 数据动态填入
+      if (props.data.yAxis1_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis1_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 11,
+            itemStyle: {
+              color: "#19D6FF",
+            },
+            data: props.data.yAxis1_bar,
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis1_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: "rgba(25,214,255,0.8)",
+              opacity: 0.6,
+              // },
+            },
+            data: props.data.yAxis1_bar,
+            barGap: "-100%",
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis2_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 12,
+            itemStyle: {
+              color: "#FF6464",
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis2_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: function (params) {
+                return "rgba(255,100,100)";
+              },
+              opacity: 0.6,
+
+              // },
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_line != null) {
+        option.series.push({
+          name: props.data.yAxis2_line_Name,
+          data: props.data.yAxis2_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#FFC155", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#FFC155", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis2_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis2_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      if (props.data.yAxis3_line != null) {
+        option.series.push({
+          name: props.data.yAxis3_line_Name,
+          data: props.data.yAxis3_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#99FF55", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#99FF55", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis3_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis3_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        console.log("echarts点击事件", params.name, props.ClickData);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      allData.chart.off("click");
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
new file mode 100644
index 0000000..9c5906c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -0,0 +1,211 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import bus from "@/bus";
+import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+    TypeID: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+          formatter: (params) => {
+            // console.log(params);
+            var relVal = "" + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#FFFFFF", // 这里设置为红色
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          // name: "数量(个)",
+          nameTextStyle: {
+            color: "#AAC1CF", // 红色
+            align: "right",
+            fontSize: 10,
+          },
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          nameLocation: "start",
+          type: "value",
+          minInterval: 1,
+          nameGap: 5,
+          axisLabel: {
+            color: "#AAC1CF",
+            fontSize: 12,
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: props.data.xAxis,
+          axisLabel: {
+            color: "#EBFEFF",
+            show: true,
+            fontSize: 12,
+          },
+          nameTextStyle: {
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            name: props.data.yAxis2_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis2,
+            barGap: "-100%",
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: "#31FEDF",
+            },
+          },
+          {
+            name: props.data.yAxis_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis,
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "#FF6464" },
+                { offset: 1, color: "#FF9A9A" },
+              ]),
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        // params.value 是点击的X轴标签的值
+        console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+          // clearInterval(allData.timer);
+        }
+        allData.chart.off("click");
+
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
new file mode 100644
index 0000000..a721a90
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
@@ -0,0 +1,230 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+    TypeID: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+          formatter: (params) => {
+            // console.log(params);
+            var relVal = "" + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = "次";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          data: [props.data.yAxis_Name, props.data.yAxis2_Name],
+          textStyle: {
+            color: "#FFFFFF",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: "0%",
+          left: "0%",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: props.data.xAxis,
+          axisLabel: {
+            color: "rgba(255,255,255,1)",
+            fontSize: 12,
+            fontFamily: "AlibabaPuHuiTi",
+            formatter: function (params) {
+              var str = ""; // 最终拼接成的字符串
+              var paramsLen = params.length; // 获取每项文字的个数
+              var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+              var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+              if (paramsLen > len) {
+                //大于设定的len就换行，不大于就不变化
+                for (var i = 0; i < rowNumber; i++) {
+                  var temp = ""; // 表示每一次截取的字符串
+                  var start = i * len; // 开始截取的位置
+                  var end = start + len; // 结束截取的位置
+                  if (i == rowNumber - 1) {
+                    // 最后一次不换行
+                    temp = params.substring(start, paramsLen);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    temp = params.substring(start, end) + "\n";
+                  }
+                  str += temp; // 最终拼成的字符串
+                }
+              } else {
+                // 给新的字符串赋值
+                str = params;
+              }
+              return str; //返回字符串
+            },
+          },
+        },
+        yAxis: {
+          name: "次",
+          type: "value",
+          minInterval: 1,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+        },
+        series: [
+          {
+            name: props.data.yAxis_Name,
+            type: "line",
+            data: props.data.yAxis,
+            // 修改折线颜色
+            lineStyle: {
+              color: "aqua", // 折线颜色
+              width: 2, // 折线宽度
+            },
+            // 修改数据点颜色
+            itemStyle: {
+              color: "aqua", // 数据点颜色
+            },
+          },
+          {
+            name: props.data.yAxis2_Name,
+            type: "line",
+            data: props.data.yAxis2,
+            // 修改折线颜色
+            lineStyle: {
+              color: "yellow", // 折线颜色
+              width: 2, // 折线宽度
+            },
+            // 修改数据点颜色
+            itemStyle: {
+              color: "yellow", // 数据点颜色
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        // params.value 是点击的X轴标签的值
+        console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
+        // 在这里可以执行相应的逻辑
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+          // clearInterval(allData.timer);
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/api/MonitoringAnalysis.js b/src/api/MonitoringAnalysis.js
index f8ebcec..4f07c98 100644
--- a/src/api/MonitoringAnalysis.js
+++ b/src/api/MonitoringAnalysis.js
@@ -59,14 +59,42 @@
 // 获取列表数据
 export function pipelineProblemStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineProblemStatistic`,
+    url: `business/drainageSystemv1/pipelineProblemStatistic`,
     method: 'get',
     params,
   });
 }
 export function pipelineRunRiskStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineRunRiskStatistic`,
+    url: `business/drainageSystemv1/pipelineRunRiskStatistic`,
+    method: 'get',
+    params,
+  });
+}
+export function outletList(params) {
+  return request({
+    url: `business/drainageSystem/outletList`,
+    method: 'get',
+    params,
+  });
+}
+export function pointList(params) {
+  return request({
+    url: `business/drainageSystem/pointList`,
+    method: 'get',
+    params,
+  });
+}
+export function siteWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/siteWaterYieldAnalysis`,
+    method: 'get',
+    params,
+  });
+}
+export function waterRegionWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/waterRegionWaterYieldAnalysis`,
     method: 'get',
     params,
   });
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
new file mode 100644
index 0000000..ee4ce2c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -0,0 +1,395 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch, onUnmounted } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var barWidth = 13;
+      var option;
+      option = {
+        color: ["#3FFFC2", "#FFF21C"],
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: 15,
+          left: "0%",
+          top: 30,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: "#58b2ed",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#EBFEFF",
+              fontSize: 12,
+              fontFamily: "AlibabaPuHuiTi",
+              formatter: function (params) {
+                var str = ""; // 最终拼接成的字符串
+                var paramsLen = params.length; // 获取每项文字的个数
+                var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                if (paramsLen > len) {
+                  //大于设定的len就换行，不大于就不变化
+                  for (var i = 0; i < rowNumber; i++) {
+                    var temp = ""; // 表示每一次截取的字符串
+                    var start = i * len; // 开始截取的位置
+                    var end = start + len; // 结束截取的位置
+                    if (i == rowNumber - 1) {
+                      // 最后一次不换行
+                      temp = params.substring(start, paramsLen);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      temp = params.substring(start, end) + "\n";
+                    }
+                    str += temp; // 最终拼成的字符串
+                  }
+                } else {
+                  // 给新的字符串赋值
+                  str = params;
+                }
+                return str; //返回字符串
+              },
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.y1_Unit,
+            type: "value",
+            axisLabel: {
+              color: "#AAC1CF",
+              show: true,
+              formatter: function (value) {
+                return value.toFixed(2); // 保留两位小数
+              },
+            },
+            nameTextStyle: {
+              color: "#AAC1CF",
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#2161a8",
+              },
+            },
+            alignTicks: true,
+            position: "left",
+            offset: 0,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
+            handleStyle: {
+              color: "#94FA41",
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          // 柱状图
+          // 折线图
+        ],
+      };
+      // 右侧Y轴动态填入
+      if (props.data.y2_show) {
+        option.yAxis.push({
+          name: props.data.y2_Unit,
+          type: "value",
+          min: 0,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+            // formatter: function (value) {
+            //   return value.toFixed(2); // 保留两位小数
+            // },
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+          position: "right",
+          offset: 0,
+        });
+      }
+      // 数据动态填入
+      if (props.data.yAxis1_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis1_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 11,
+            itemStyle: {
+              color: "#19D6FF",
+            },
+            data: props.data.yAxis1_bar,
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis1_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: "rgba(25,214,255,0.8)",
+              opacity: 0.6,
+              // },
+            },
+            data: props.data.yAxis1_bar,
+            barGap: "-100%",
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis2_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 12,
+            itemStyle: {
+              color: "#FF6464",
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis2_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: function (params) {
+                return "rgba(255,100,100)";
+              },
+              opacity: 0.6,
+
+              // },
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_line != null) {
+        option.series.push({
+          name: props.data.yAxis2_line_Name,
+          data: props.data.yAxis2_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#FFC155", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#FFC155", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis2_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis2_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      if (props.data.yAxis3_line != null) {
+        option.series.push({
+          name: props.data.yAxis3_line_Name,
+          data: props.data.yAxis3_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#99FF55", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#99FF55", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis3_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis3_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        console.log("echarts点击事件", params.name, props.ClickData);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      allData.chart.off("click");
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
new file mode 100644
index 0000000..9c5906c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -0,0 +1,211 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import bus from "@/bus";
+import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+    TypeID: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+          formatter: (params) => {
+            // console.log(params);
+            var relVal = "" + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#FFFFFF", // 这里设置为红色
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          // name: "数量(个)",
+          nameTextStyle: {
+            color: "#AAC1CF", // 红色
+            align: "right",
+            fontSize: 10,
+          },
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          nameLocation: "start",
+          type: "value",
+          minInterval: 1,
+          nameGap: 5,
+          axisLabel: {
+            color: "#AAC1CF",
+            fontSize: 12,
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: props.data.xAxis,
+          axisLabel: {
+            color: "#EBFEFF",
+            show: true,
+            fontSize: 12,
+          },
+          nameTextStyle: {
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            name: props.data.yAxis2_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis2,
+            barGap: "-100%",
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: "#31FEDF",
+            },
+          },
+          {
+            name: props.data.yAxis_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis,
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "#FF6464" },
+                { offset: 1, color: "#FF9A9A" },
+              ]),
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        // params.value 是点击的X轴标签的值
+        console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+          // clearInterval(allData.timer);
+        }
+        allData.chart.off("click");
+
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
new file mode 100644
index 0000000..a721a90
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
@@ -0,0 +1,230 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+    TypeID: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+          formatter: (params) => {
+            // console.log(params);
+            var relVal = "" + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = "次";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          data: [props.data.yAxis_Name, props.data.yAxis2_Name],
+          textStyle: {
+            color: "#FFFFFF",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: "0%",
+          left: "0%",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: props.data.xAxis,
+          axisLabel: {
+            color: "rgba(255,255,255,1)",
+            fontSize: 12,
+            fontFamily: "AlibabaPuHuiTi",
+            formatter: function (params) {
+              var str = ""; // 最终拼接成的字符串
+              var paramsLen = params.length; // 获取每项文字的个数
+              var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+              var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+              if (paramsLen > len) {
+                //大于设定的len就换行，不大于就不变化
+                for (var i = 0; i < rowNumber; i++) {
+                  var temp = ""; // 表示每一次截取的字符串
+                  var start = i * len; // 开始截取的位置
+                  var end = start + len; // 结束截取的位置
+                  if (i == rowNumber - 1) {
+                    // 最后一次不换行
+                    temp = params.substring(start, paramsLen);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    temp = params.substring(start, end) + "\n";
+                  }
+                  str += temp; // 最终拼成的字符串
+                }
+              } else {
+                // 给新的字符串赋值
+                str = params;
+              }
+              return str; //返回字符串
+            },
+          },
+        },
+        yAxis: {
+          name: "次",
+          type: "value",
+          minInterval: 1,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+        },
+        series: [
+          {
+            name: props.data.yAxis_Name,
+            type: "line",
+            data: props.data.yAxis,
+            // 修改折线颜色
+            lineStyle: {
+              color: "aqua", // 折线颜色
+              width: 2, // 折线宽度
+            },
+            // 修改数据点颜色
+            itemStyle: {
+              color: "aqua", // 数据点颜色
+            },
+          },
+          {
+            name: props.data.yAxis2_Name,
+            type: "line",
+            data: props.data.yAxis2,
+            // 修改折线颜色
+            lineStyle: {
+              color: "yellow", // 折线颜色
+              width: 2, // 折线宽度
+            },
+            // 修改数据点颜色
+            itemStyle: {
+              color: "yellow", // 数据点颜色
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        // params.value 是点击的X轴标签的值
+        console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
+        // 在这里可以执行相应的逻辑
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+          // clearInterval(allData.timer);
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/index.vue b/src/views/pictureOnMap/page/DrainageSystem/index.vue
index a6ace1f..b32e737 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/index.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/index.vue
@@ -30,35 +30,98 @@
           </span>
         </div>
         <div class="modular1">
-          <div class="leve2Title">河湖水情</div>
+          <div class="leve2Title">
+            {{
+              AllData.regionGrade == "one"
+                ? "河湖水情"
+                : AllData.regionGrade == "two"
+                ? "管网监测"
+                : AllData.regionGrade == "three"
+                ? "管网统计"
+                : AllData.regionGrade == "four"
+                ? "当日水量分析"
+                : ""
+            }}
+          </div>
           <div class="modularBody">
-            <MonBarCharts
-              v-if="AllData.regionGrade == 'two'"
+            <DraBarCharts2Y
+              v-if="
+                AllData.regionGrade == 'one' ||
+                AllData.regionGrade == 'two' ||
+                AllData.regionGrade == 'four'
+              "
               :data="AllData.chartData1"
               :refresh="AllData.refresh1"
               :ClickData="AllData.ClickData1"
-            ></MonBarCharts>
+            ></DraBarCharts2Y>
+            <DraBarChartsLeft
+              v-if="AllData.regionGrade == 'three'"
+              :data="AllData.chartData2"
+              :refresh="AllData.refresh2"
+              :ClickData="AllData.ClickData2"
+            ></DraBarChartsLeft>
           </div>
         </div>
         <div class="modular2">
-          <div class="leve2Title">流域管网</div>
+          <div class="leve2Title">
+            {{
+              AllData.regionGrade == "one"
+                ? "流域管网"
+                : AllData.regionGrade == "two"
+                ? "管网统计"
+                : AllData.regionGrade == "three"
+                ? "当日水量分析"
+                : AllData.regionGrade == "four"
+                ? "渍水风险点"
+                : ""
+            }}
+          </div>
           <div class="modularBody">
-            <MonBarChartsLeft
+            <DraBarChartsLeft
+              v-if="
+                AllData.regionGrade == 'one' ||
+                AllData.regionGrade == 'two' ||
+                AllData.regionGrade == 'four'
+              "
+              :data="AllData.chartData2"
+              :refresh="AllData.refresh2"
+              :ClickData="AllData.ClickData2"
+            ></DraBarChartsLeft>
+
+            <DraBarCharts2Y
+              v-if="AllData.regionGrade == 'three'"
+              :data="AllData.chartData1"
+              :refresh="AllData.refresh1"
+              :ClickData="AllData.ClickData1"
+            ></DraBarCharts2Y>
+          </div>
+        </div>
+        <div class="modular3">
+          <div class="leve2Title">
+            {{
+              AllData.regionGrade == "one"
+                ? "河湖排口"
+                : AllData.regionGrade == "two"
+                ? "湖泊排口"
+                : AllData.regionGrade == "three"
+                ? "渍水风险点"
+                : AllData.regionGrade == "four"
+                ? "历史风险"
+                : ""
+            }}
+          </div>
+          <div class="modularBody">
+            <DraBarCharts2Y
               v-if="
                 AllData.regionGrade == 'one' ||
                 AllData.regionGrade == 'two' ||
                 AllData.regionGrade == 'three'
               "
-              :data="AllData.chartData2"
-              :refresh="AllData.refresh2"
-              :ClickData="AllData.ClickData2"
-            ></MonBarChartsLeft>
-          </div>
-        </div>
-        <div class="modular3">
-          <div class="leve2Title">河湖排口</div>
-          <div class="modularBody">
-            <MonLineChartsLeft
+              :data="AllData.chartData3"
+              :refresh="AllData.refresh3"
+              :ClickData="AllData.ClickData3"
+            ></DraBarCharts2Y>
+            <DraLineChartsLeft
               v-if="AllData.TypeID == 'four'"
               :data="AllData.chartData3"
               :refresh="AllData.refresh3"
@@ -108,11 +171,11 @@
 import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
 // 引入echarts组件
 // 纵向立体柱状体以及标线和折现
-import MonBarCharts from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarCharts.vue";
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
 //横向的两组柱状图堆叠
-import MonBarChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarChartsLeft.vue";
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
 // 纵向的两条折现
-import MonLineChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonLineChartsLeft.vue";
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -123,6 +186,7 @@
 const AllData = reactive({
   regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
   regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
   yw_type: [
     { name: "污水体系", value: "污水分区,尾水路径", key: "sewage" },
@@ -173,24 +237,74 @@
   //   Ecahrts数据
   //   河湖水情
   chartData1: {
-    // xAxis: [],
-    // yAxis: [],
-    // yAxis_Name: "",
-    // yAxis2: [],
-    // yAxis2_Name: "",
-    // yAxis3_line: [],
+    // 一级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //2号Y轴单位
+    // y2_show: true, //是否展示右侧的2号轴
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "当前水位", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: null, //数据2
+    // yAxis2_bar_Name: "", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: ["80", "90", "40", "50", "60", "60"],
+    // yAxis2_line_Name: "设防水位",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
+    // yAxis3_line_Name: "库容量",
+    // yAxis3_line_Index: 1,
+    // // 二级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //2号Y轴单位
+    // y2_show: false, //是否展示右侧的2号轴
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "点位数", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: ["20", "20", "20", "20", "20", "20"], //数据2
+    // yAxis2_bar_Name: "运行风险数", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: null,
+    // yAxis2_line_Name: "",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: null,
     // yAxis3_line_Name: "",
-    // yAxis4_line: null,
-    // yAxis4_line_Name: "",
-    xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
-    yAxis: ["870", "568", "700", "600", "276", "280"],
-    yAxis_Name: "复勘数",
-    yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
-    yAxis2_Name: "片区管网",
-    yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
-    yAxis3_line_Name: "报告数",
-    yAxis4_line: null,
-    yAxis4_line_Name: "",
+    // yAxis3_line_Index: 0,
+    // // 三级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "个", //Y轴单位
+    // y2_Unit: "万方", //2号Y轴单位
+    // y2_show: true, //是否展示右侧的2号轴
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "监测点位", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: null, //数据2
+    // yAxis2_bar_Name: "", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: [80, 40, 60, 50, 80, 40],
+    // yAxis2_line_Name: "进水",
+    // yAxis2_line_Index: 1,
+    // yAxis3_line: [90, 50, 70, 60, 90, 50],
+    // yAxis3_line_Name: "出水",
+    // yAxis3_line_Index: 1,
+    // 四级
+    xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    y1_Unit: "个", //Y轴单位
+    y2_Unit: "万方", //2号Y轴单位
+    y2_show: true, //是否展示右侧的2号轴
+    yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    yAxis1_bar_Name: "接驳点位", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "",
+    yAxis2_line_Index: 1,
+    yAxis3_line: [90, 50, 70, 60, 90, 50],
+    yAxis3_line_Name: "出水量",
+    yAxis3_line_Index: 1,
   },
   refresh1: 0,
   ClickData1: "dgtxg",
@@ -206,15 +320,57 @@
   ClickData2: "dgtxg",
   //   河湖排口
   chartData3: {
-    xAxis: [],
-    yAxis: [],
-    yAxis_Name: "",
-    yAxis2: [],
-    yAxis2_Name: "",
-    yAxis3_line: [],
-    yAxis3_line_Name: "",
-    yAxis4_line: null,
-    yAxis4_line_Name: "",
+    // // 一级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //Y轴单位
+    // y2_show: true,
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "排口", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: ["20", "20", "20", "20", "20", "20"], //数据2
+    // yAxis2_bar_Name: "风险排口", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: null,
+    // yAxis2_line_Name: "设防水位",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
+    // yAxis3_line_Name: "库容量",
+    // yAxis3_line_Index: 1,
+    // // 二级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //Y轴单位
+    // y2_show: true,
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "排口", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: ["20", "20", "20", "20", "20", "20"], //数据2
+    // yAxis2_bar_Name: "风险排口", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: null,
+    // yAxis2_line_Name: "设防水位",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
+    // yAxis3_line_Name: "进水量",
+    // yAxis3_line_Index: 1,
+    // 三级
+    xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    y1_Unit: "个", //Y轴单位
+    y2_Unit: "万方", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    yAxis1_bar_Name: "渍水风险点", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "风险排口", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "设防水位",
+    yAxis2_line_Index: 0,
+    yAxis3_line: null,
+    yAxis3_line_Name: "进水量",
+    yAxis3_line_Index: 1,
   },
   refresh3: 0,
   ClickData3: "dgtxg",
@@ -225,6 +381,7 @@
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
 
   // 视角切换
   if (item.sort == 0) {
@@ -232,6 +389,7 @@
     newfiberMap.map.easeTo(newfiberMap.config_.params.init);
     AllData.regionGrade = "one";
     AllData.regionName = "";
+    AllData.waterRegionCode = "";
     AllData.TitleName[1] = {
       abbreviation: "",
       Name: "",
@@ -322,8 +480,9 @@
     };
   }
   // 切换时进行数据请求,默认视角请求
-
+  clearEchartsData();
   getData1();
+  getData3();
 };
 // 分区点击切换
 const FenQuClick = (properties) => {
@@ -353,78 +512,7 @@
         AllData.TitleName[0].Name = ""; //全称
       }
       // 设置1 2 3 4 级分区
-
       clearMianBaoData();
-      //   if (res.data.length == 1) {
-      //     // 只有总分区/一级分区
-      //     res.data.forEach((element) => {
-      //       if (element.grade == "one") {
-      //         AllData.TitleName[1] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "two",
-      //           sort: 1,
-      //           Name: element.name,
-      //         };
-      //       }
-      //     });
-      //   } else if (res.data.length == 2) {
-      //     // 只有总分区/一级分区/二级分区
-
-      //     res.data.forEach((element) => {
-      //       if (element.grade == "one") {
-      //         AllData.TitleName[1] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "two",
-      //           sort: 1,
-      //           Name: element.name,
-      //         };
-      //       }
-      //       if (element.grade == "two") {
-      //         AllData.TitleName[2] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "three",
-      //           sort: 2,
-      //           Name: element.name,
-      //         };
-      //       }
-      //     });
-      //   } else if (res.data.length == 3) {
-      //     // 只有总分区/一级分区/二级分区/三级分区
-
-      //     res.data.forEach((element) => {
-      //       if (element.grade == "one") {
-      //         AllData.TitleName[1] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "two",
-      //           sort: 1,
-      //           Name: element.name,
-      //         };
-      //       }
-      //       if (element.grade == "two") {
-      //         AllData.TitleName[2] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "three",
-      //           sort: 2,
-      //           Name: element.name,
-      //         };
-      //       }
-      //       if (element.grade == "three") {
-      //         AllData.TitleName[3] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "four",
-      //           sort: 3,
-      //           Name: element.name,
-      //         };
-      //       }
-      //     });
-      //   } else if (res.data.length == 4) {
-      //     // 只有总分区/一级分区/二级分区/三级分区/四级分区
       res.data.forEach((element) => {
         if (element.grade == "one") {
           AllData.TitleName[1] = {
@@ -474,19 +562,26 @@
           ? "four"
           : "five"; //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
       AllData.regionName = AllData.TitleName[res.data.length].Name;
+      AllData.waterRegionCode = AllData.TitleName[res.data.length].id;
+      // clearEchartsData();
       if (AllData.regionGrade == "two") {
         // 二级
         console.log("二级");
         getData1();
         getData2();
+        getData3();
       } else if (AllData.regionGrade == "three") {
         // 三级
         console.log("三级");
         getData1();
+        getData4();
+        getData5();
       } else if (AllData.regionGrade == "four") {
         // 四级
         console.log("四级");
         getData2();
+        getData4();
+        getData5();
       } else {
         // 五级  五级为排水单元,由上可知,因为没有pid 所以此方法无效
         console.log("五级");
@@ -503,6 +598,7 @@
   item.value.split(",").forEach((o) => operationLayer(o, true));
   AllData.regionGrade = "one";
   AllData.regionName = "";
+  AllData.waterRegionCode = "";
   newfiberMap.map.easeTo(newfiberMap.config_.params.init);
   // 切换时回到默认一级分区
   AllData.TypeID = type;
@@ -547,7 +643,7 @@
     sort: 4,
   };
 };
-// 获取数据  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
+// 获取数据 徐云欣  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
 const getData1 = () => {
   MonitorAPI.pipelineProblemStatistic({
     regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
@@ -577,7 +673,7 @@
   });
 };
 
-// 获取数据  二级界面的管网监测/四级界面的历史风险
+// 获取数据 徐云欣  二级界面的管网监测/四级界面的历史风险
 const getData2 = () => {
   MonitorAPI.pipelineRunRiskStatistic({
     regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
@@ -592,7 +688,9 @@
         AllData.chartData1.yAxis = res.data.pipelinePointCount; //运行风险点位数
         AllData.chartData1.yAxis2 = res.data.pipelineRunRiskPointCount; //管网监测点位数
         AllData.chartData1.yAxis_Name = "运行风险数";
+        AllData.chartData1.yAxis_Unit = "个";
         AllData.chartData1.yAxis2_Name = "点位数";
+        AllData.chartData1.yAxis_Unit = "个";
         AllData.refresh1++;
       }
       if (AllData.regionGrade == "four") {
@@ -606,6 +704,102 @@
     }
   });
 };
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+const getData3 = () => {
+  MonitorAPI.outletList({
+    waterRegionCode: AllData.waterRegionCode, //分区编号
+    // regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        AllData.chartData3.xAxis = res.data.partitionName;
+        AllData.chartData3.yAxis1_bar = res.data.outletsNumber;
+        AllData.chartData3.yAxis1_bar_Name = "排口";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "风险排口";
+        AllData.chartData3.yAxis3_line = res.data.inflowWater;
+        AllData.chartData3.yAxis3_line_Name = "进水量";
+        AllData.chartData3.yAxis3_line_Index = 1;
+        AllData.chartData3.y1_Unit = "个"; //Y轴单位
+        AllData.chartData3.y2_Unit = "万方"; //Y轴单位
+        AllData.chartData3.y2_show = true;
+        AllData.refresh3++;
+      }
+      if (AllData.regionGrade == "two") {
+        // AllData.chartData3
+      }
+    }
+  });
+};
+// 获取数据 谢杨  三级界面的渍水风险点/ 四级界面的渍水风险点
+const getData4 = () => {
+  //
+  MonitorAPI.pointList({
+    waterRegionCode: AllData.waterRegionCode, //分区编号
+    // regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "three") {
+        // AllData.chartData3
+      }
+      if (AllData.regionGrade == "four") {
+        // AllData.chartData2
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳  / 三级 当日水量分析 /四级当日水量分析
+const getData5 = () => {
+  MonitorAPI.waterRegionWaterYieldAnalysis({
+    waterRegionId: AllData.waterRegionCode,
+  }).then((res) => []);
+};
+// 获取数据 刘芳阳
+const getData6 = () => {};
+
+// 一级界面的河湖水情
+// 清除本底分析echarts的数据
+const clearEchartsData = () => {
+  AllData.chartData1 = {
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //2号Y轴单位
+    y2_show: false, //是否展示右侧的2号轴
+    yAxis1_bar: null, //数据1
+    yAxis1_bar_Name: "", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "",
+    yAxis2_line_Index: 0,
+    yAxis3_line: null,
+    yAxis3_line_Name: "",
+    yAxis3_line_Index: 0,
+  };
+  AllData.refresh1++;
+  AllData.chartData3 = {
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //2号Y轴单位
+    y2_show: false, //是否展示右侧的2号轴
+    yAxis1_bar: null, //数据1
+    yAxis1_bar_Name: "", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "",
+    yAxis2_line_Index: 0,
+    yAxis3_line: null,
+    yAxis3_line_Name: "",
+    yAxis3_line_Index: 0,
+  };
+  AllData.refresh3++;
+};
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
     if (!newfiberMap) return;

diff --git a/src/api/MonitoringAnalysis.js b/src/api/MonitoringAnalysis.js
index f8ebcec..4f07c98 100644
--- a/src/api/MonitoringAnalysis.js
+++ b/src/api/MonitoringAnalysis.js
@@ -59,14 +59,42 @@
 // 获取列表数据
 export function pipelineProblemStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineProblemStatistic`,
+    url: `business/drainageSystemv1/pipelineProblemStatistic`,
     method: 'get',
     params,
   });
 }
 export function pipelineRunRiskStatistic(params) {
   return request({
-    url: `business/drainageSystem/pipelineRunRiskStatistic`,
+    url: `business/drainageSystemv1/pipelineRunRiskStatistic`,
+    method: 'get',
+    params,
+  });
+}
+export function outletList(params) {
+  return request({
+    url: `business/drainageSystem/outletList`,
+    method: 'get',
+    params,
+  });
+}
+export function pointList(params) {
+  return request({
+    url: `business/drainageSystem/pointList`,
+    method: 'get',
+    params,
+  });
+}
+export function siteWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/siteWaterYieldAnalysis`,
+    method: 'get',
+    params,
+  });
+}
+export function waterRegionWaterYieldAnalysis(params) {
+  return request({
+    url: `business/monitorData/waterRegionWaterYieldAnalysis`,
     method: 'get',
     params,
   });
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
new file mode 100644
index 0000000..ee4ce2c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarCharts2Y.vue
@@ -0,0 +1,395 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, watch, onUnmounted } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var barWidth = 13;
+      var option;
+      option = {
+        color: ["#3FFFC2", "#FFF21C"],
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: 15,
+          left: "0%",
+          top: 30,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: "#58b2ed",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#EBFEFF",
+              fontSize: 12,
+              fontFamily: "AlibabaPuHuiTi",
+              formatter: function (params) {
+                var str = ""; // 最终拼接成的字符串
+                var paramsLen = params.length; // 获取每项文字的个数
+                var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                if (paramsLen > len) {
+                  //大于设定的len就换行，不大于就不变化
+                  for (var i = 0; i < rowNumber; i++) {
+                    var temp = ""; // 表示每一次截取的字符串
+                    var start = i * len; // 开始截取的位置
+                    var end = start + len; // 结束截取的位置
+                    if (i == rowNumber - 1) {
+                      // 最后一次不换行
+                      temp = params.substring(start, paramsLen);
+                    } else {
+                      // 每一次拼接字符串并换行
+                      temp = params.substring(start, end) + "\n";
+                    }
+                    str += temp; // 最终拼成的字符串
+                  }
+                } else {
+                  // 给新的字符串赋值
+                  str = params;
+                }
+                return str; //返回字符串
+              },
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.y1_Unit,
+            type: "value",
+            axisLabel: {
+              color: "#AAC1CF",
+              show: true,
+              formatter: function (value) {
+                return value.toFixed(2); // 保留两位小数
+              },
+            },
+            nameTextStyle: {
+              color: "#AAC1CF",
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#2161a8",
+              },
+            },
+            alignTicks: true,
+            position: "left",
+            offset: 0,
+          },
+        ],
+        dataZoom: [
+          {
+            // show: true,
+            show: false,
+            height: 4,
+            bottom: 18,
+            start: 0,
+            end: 100,
+            handleSize: "100%",
+            fillerColor: "#94FA41",
+            borderColor: "transparent",
+            backgroundColor: "rgba(148, 250, 65, 0.2)",
+            handleStyle: {
+              color: "#94FA41",
+            },
+            moveHandleSize: 0,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ],
+        series: [
+          // 柱状图
+          // 折线图
+        ],
+      };
+      // 右侧Y轴动态填入
+      if (props.data.y2_show) {
+        option.yAxis.push({
+          name: props.data.y2_Unit,
+          type: "value",
+          min: 0,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+            // formatter: function (value) {
+            //   return value.toFixed(2); // 保留两位小数
+            // },
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+          position: "right",
+          offset: 0,
+        });
+      }
+      // 数据动态填入
+      if (props.data.yAxis1_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis1_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 11,
+            itemStyle: {
+              color: "#19D6FF",
+            },
+            data: props.data.yAxis1_bar,
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis1_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: "rgba(25,214,255,0.8)",
+              opacity: 0.6,
+              // },
+            },
+            data: props.data.yAxis1_bar,
+            barGap: "-100%",
+            yAxisIndex: props.data.yAxis1_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_bar != null) {
+        option.series.push(
+          {
+            name: props.data.yAxis2_bar_Name,
+            type: "pictorialBar",
+            symbolSize: [barWidth, 6],
+            symbolOffset: [0, -3],
+            symbolPosition: "end",
+            z: 12,
+            itemStyle: {
+              color: "#FF6464",
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              valueFormatter: function (value) {
+                let unit =
+                  props.data.yAxis2_bar_index == 0
+                    ? props.data.y1_Unit
+                    : props.data.y2_Unit;
+                return value + unit;
+              },
+            },
+          },
+          {
+            name: "",
+            type: "bar",
+            barWidth: barWidth,
+            itemStyle: {
+              // normal: {
+              color: function (params) {
+                return "rgba(255,100,100)";
+              },
+              opacity: 0.6,
+
+              // },
+            },
+            data: props.data.yAxis2_bar,
+            yAxisIndex: props.data.yAxis2_bar_index,
+            tooltip: {
+              show: false,
+            },
+          }
+        );
+      }
+      if (props.data.yAxis2_line != null) {
+        option.series.push({
+          name: props.data.yAxis2_line_Name,
+          data: props.data.yAxis2_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#FFC155", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#FFC155", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis2_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis2_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      if (props.data.yAxis3_line != null) {
+        option.series.push({
+          name: props.data.yAxis3_line_Name,
+          data: props.data.yAxis3_line,
+          type: "line",
+          // 修改折线颜色
+          lineStyle: {
+            color: "#99FF55", // 折线颜色
+            width: 2, // 折线宽度
+          },
+          // 修改数据点颜色
+          itemStyle: {
+            color: "#99FF55", // 数据点颜色
+          },
+          yAxisIndex: props.data.yAxis3_line_Index,
+          tooltip: {
+            valueFormatter: function (value) {
+              let unit =
+                props.data.yAxis3_line_Index == 0
+                  ? props.data.y1_Unit
+                  : props.data.y2_Unit;
+              return value + unit;
+            },
+          },
+        });
+      }
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        console.log("echarts点击事件", params.name, props.ClickData);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      allData.chart.off("click");
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
new file mode 100644
index 0000000..9c5906c
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraBarChartsLeft.vue
@@ -0,0 +1,211 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import bus from "@/bus";
+import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+    TypeID: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+          formatter: (params) => {
+            // console.log(params);
+            var relVal = "" + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = "个";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#FFFFFF", // 这里设置为红色
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          // name: "数量(个)",
+          nameTextStyle: {
+            color: "#AAC1CF", // 红色
+            align: "right",
+            fontSize: 10,
+          },
+          max: Math.ceil(Math.max.apply(null, props.data.yAxis2) * 1.1),
+          nameLocation: "start",
+          type: "value",
+          minInterval: 1,
+          nameGap: 5,
+          axisLabel: {
+            color: "#AAC1CF",
+            fontSize: 12,
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: props.data.xAxis,
+          axisLabel: {
+            color: "#EBFEFF",
+            show: true,
+            fontSize: 12,
+          },
+          nameTextStyle: {
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            name: props.data.yAxis2_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis2,
+            barGap: "-100%",
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: "#31FEDF",
+            },
+          },
+          {
+            name: props.data.yAxis_Name,
+            type: "bar",
+            barWidth: 10,
+            // label: {
+            //   show: true,
+            // },
+            data: props.data.yAxis,
+            itemStyle: {
+              borderRadius: [20, 20, 20, 20],
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "#FF6464" },
+                { offset: 1, color: "#FF9A9A" },
+              ]),
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        // params.value 是点击的X轴标签的值
+        console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+        // 在这里可以执行相应的逻辑
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+          // clearInterval(allData.timer);
+        }
+        allData.chart.off("click");
+
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
new file mode 100644
index 0000000..a721a90
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/DraLineChartsLeft.vue
@@ -0,0 +1,230 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { guid } from "@/utils/ruoyi";
+import { reactive, toRefs, onMounted, onUnmounted, watch } from "vue";
+import bus from "@/bus";
+export default {
+  name: "line-chart",
+  props: {
+    data: Object,
+    refresh: Number,
+    ClickData: String,
+    TypeID: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      // let chartDom = echarts.init(document.getElementById(allData.id));
+      //先获取Dom上的实例
+      let chartDom = echarts.getInstanceByDom(document.getElementById(allData.id));
+      //然后判断实例是否存在，如果不存在，就创建新实例
+      if (chartDom == null) {
+        chartDom = echarts.init(document.getElementById(allData.id));
+      }
+      var option;
+      option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "#004284",
+          borderColor: "#0B9BFF",
+          borderRadius: 6, // 设置圆角大小
+          // 自定义提示框文本样
+          textStyle: {
+            // 字体颜色
+            color: "white",
+            // 字体大小
+            fontSize: 14,
+          },
+          formatter: (params) => {
+            // console.log(params);
+            var relVal = "" + params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              if (params[i].seriesName) {
+                let unit = "次";
+                relVal +=
+                  "<br/>" +
+                  params[i].marker +
+                  params[i].seriesName +
+                  " " +
+                  params[i].value +
+                  unit;
+              }
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          data: [props.data.yAxis_Name, props.data.yAxis2_Name],
+          textStyle: {
+            color: "#FFFFFF",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          bottom: "0%",
+          right: "0%",
+          left: "0%",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: props.data.xAxis,
+          axisLabel: {
+            color: "rgba(255,255,255,1)",
+            fontSize: 12,
+            fontFamily: "AlibabaPuHuiTi",
+            formatter: function (params) {
+              var str = ""; // 最终拼接成的字符串
+              var paramsLen = params.length; // 获取每项文字的个数
+              var len = props.data.xAxis.length > 7 ? 2 : 3; // 每行能显示的字的个数（根据实际情况自己设置）
+              var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+              if (paramsLen > len) {
+                //大于设定的len就换行，不大于就不变化
+                for (var i = 0; i < rowNumber; i++) {
+                  var temp = ""; // 表示每一次截取的字符串
+                  var start = i * len; // 开始截取的位置
+                  var end = start + len; // 结束截取的位置
+                  if (i == rowNumber - 1) {
+                    // 最后一次不换行
+                    temp = params.substring(start, paramsLen);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    temp = params.substring(start, end) + "\n";
+                  }
+                  str += temp; // 最终拼成的字符串
+                }
+              } else {
+                // 给新的字符串赋值
+                str = params;
+              }
+              return str; //返回字符串
+            },
+          },
+        },
+        yAxis: {
+          name: "次",
+          type: "value",
+          minInterval: 1,
+          axisLabel: {
+            color: "#AAC1CF",
+            show: true,
+          },
+          nameTextStyle: {
+            color: "#AAC1CF",
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed",
+              color: "#2161a8",
+            },
+          },
+          alignTicks: true,
+        },
+        series: [
+          {
+            name: props.data.yAxis_Name,
+            type: "line",
+            data: props.data.yAxis,
+            // 修改折线颜色
+            lineStyle: {
+              color: "aqua", // 折线颜色
+              width: 2, // 折线宽度
+            },
+            // 修改数据点颜色
+            itemStyle: {
+              color: "aqua", // 数据点颜色
+            },
+          },
+          {
+            name: props.data.yAxis2_Name,
+            type: "line",
+            data: props.data.yAxis2,
+            // 修改折线颜色
+            lineStyle: {
+              color: "yellow", // 折线颜色
+              width: 2, // 折线宽度
+            },
+            // 修改数据点颜色
+            itemStyle: {
+              color: "yellow", // 数据点颜色
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+      // 监听点击事件
+      allData.chart.on("click", function (params) {
+        // params.value 是点击的X轴标签的值
+        console.log("echarts点击事件", params.value, props.ClickData, props.TypeID);
+        // 在这里可以执行相应的逻辑
+        bus.emit("openJXFXDialog", {
+          name: params.name,
+          ClickData: props.ClickData,
+        });
+      });
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        console.log(props, "propspropsprops");
+        if (allData.chartDom) {
+          allData.chartDom.dispose();
+          allData.chartDom = null;
+          // clearInterval(allData.timer);
+        }
+        allData.chart.off("click");
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      if (allData.timer) clearInterval(allData.timer);
+      allData.timer = setInterval(() => {
+        allData.chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+        i++;
+        if (i == length) i = 0;
+      }, 3000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener("resize", resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/index.vue b/src/views/pictureOnMap/page/DrainageSystem/index.vue
index a6ace1f..b32e737 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/index.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/index.vue
@@ -30,35 +30,98 @@
           </span>
         </div>
         <div class="modular1">
-          <div class="leve2Title">河湖水情</div>
+          <div class="leve2Title">
+            {{
+              AllData.regionGrade == "one"
+                ? "河湖水情"
+                : AllData.regionGrade == "two"
+                ? "管网监测"
+                : AllData.regionGrade == "three"
+                ? "管网统计"
+                : AllData.regionGrade == "four"
+                ? "当日水量分析"
+                : ""
+            }}
+          </div>
           <div class="modularBody">
-            <MonBarCharts
-              v-if="AllData.regionGrade == 'two'"
+            <DraBarCharts2Y
+              v-if="
+                AllData.regionGrade == 'one' ||
+                AllData.regionGrade == 'two' ||
+                AllData.regionGrade == 'four'
+              "
               :data="AllData.chartData1"
               :refresh="AllData.refresh1"
               :ClickData="AllData.ClickData1"
-            ></MonBarCharts>
+            ></DraBarCharts2Y>
+            <DraBarChartsLeft
+              v-if="AllData.regionGrade == 'three'"
+              :data="AllData.chartData2"
+              :refresh="AllData.refresh2"
+              :ClickData="AllData.ClickData2"
+            ></DraBarChartsLeft>
           </div>
         </div>
         <div class="modular2">
-          <div class="leve2Title">流域管网</div>
+          <div class="leve2Title">
+            {{
+              AllData.regionGrade == "one"
+                ? "流域管网"
+                : AllData.regionGrade == "two"
+                ? "管网统计"
+                : AllData.regionGrade == "three"
+                ? "当日水量分析"
+                : AllData.regionGrade == "four"
+                ? "渍水风险点"
+                : ""
+            }}
+          </div>
           <div class="modularBody">
-            <MonBarChartsLeft
+            <DraBarChartsLeft
+              v-if="
+                AllData.regionGrade == 'one' ||
+                AllData.regionGrade == 'two' ||
+                AllData.regionGrade == 'four'
+              "
+              :data="AllData.chartData2"
+              :refresh="AllData.refresh2"
+              :ClickData="AllData.ClickData2"
+            ></DraBarChartsLeft>
+
+            <DraBarCharts2Y
+              v-if="AllData.regionGrade == 'three'"
+              :data="AllData.chartData1"
+              :refresh="AllData.refresh1"
+              :ClickData="AllData.ClickData1"
+            ></DraBarCharts2Y>
+          </div>
+        </div>
+        <div class="modular3">
+          <div class="leve2Title">
+            {{
+              AllData.regionGrade == "one"
+                ? "河湖排口"
+                : AllData.regionGrade == "two"
+                ? "湖泊排口"
+                : AllData.regionGrade == "three"
+                ? "渍水风险点"
+                : AllData.regionGrade == "four"
+                ? "历史风险"
+                : ""
+            }}
+          </div>
+          <div class="modularBody">
+            <DraBarCharts2Y
               v-if="
                 AllData.regionGrade == 'one' ||
                 AllData.regionGrade == 'two' ||
                 AllData.regionGrade == 'three'
               "
-              :data="AllData.chartData2"
-              :refresh="AllData.refresh2"
-              :ClickData="AllData.ClickData2"
-            ></MonBarChartsLeft>
-          </div>
-        </div>
-        <div class="modular3">
-          <div class="leve2Title">河湖排口</div>
-          <div class="modularBody">
-            <MonLineChartsLeft
+              :data="AllData.chartData3"
+              :refresh="AllData.refresh3"
+              :ClickData="AllData.ClickData3"
+            ></DraBarCharts2Y>
+            <DraLineChartsLeft
               v-if="AllData.TypeID == 'four'"
               :data="AllData.chartData3"
               :refresh="AllData.refresh3"
@@ -108,11 +171,11 @@
 import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
 // 引入echarts组件
 // 纵向立体柱状体以及标线和折现
-import MonBarCharts from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarCharts.vue";
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
 //横向的两组柱状图堆叠
-import MonBarChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarChartsLeft.vue";
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
 // 纵向的两条折现
-import MonLineChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonLineChartsLeft.vue";
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
 // 面板控制组件
 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
 const showPanel = ref(false); //面板展开收起
@@ -123,6 +186,7 @@
 const AllData = reactive({
   regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
   regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
   RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
   yw_type: [
     { name: "污水体系", value: "污水分区,尾水路径", key: "sewage" },
@@ -173,24 +237,74 @@
   //   Ecahrts数据
   //   河湖水情
   chartData1: {
-    // xAxis: [],
-    // yAxis: [],
-    // yAxis_Name: "",
-    // yAxis2: [],
-    // yAxis2_Name: "",
-    // yAxis3_line: [],
+    // 一级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //2号Y轴单位
+    // y2_show: true, //是否展示右侧的2号轴
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "当前水位", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: null, //数据2
+    // yAxis2_bar_Name: "", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: ["80", "90", "40", "50", "60", "60"],
+    // yAxis2_line_Name: "设防水位",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
+    // yAxis3_line_Name: "库容量",
+    // yAxis3_line_Index: 1,
+    // // 二级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //2号Y轴单位
+    // y2_show: false, //是否展示右侧的2号轴
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "点位数", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: ["20", "20", "20", "20", "20", "20"], //数据2
+    // yAxis2_bar_Name: "运行风险数", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: null,
+    // yAxis2_line_Name: "",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: null,
     // yAxis3_line_Name: "",
-    // yAxis4_line: null,
-    // yAxis4_line_Name: "",
-    xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
-    yAxis: ["870", "568", "700", "600", "276", "280"],
-    yAxis_Name: "复勘数",
-    yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
-    yAxis2_Name: "片区管网",
-    yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
-    yAxis3_line_Name: "报告数",
-    yAxis4_line: null,
-    yAxis4_line_Name: "",
+    // yAxis3_line_Index: 0,
+    // // 三级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "个", //Y轴单位
+    // y2_Unit: "万方", //2号Y轴单位
+    // y2_show: true, //是否展示右侧的2号轴
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "监测点位", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: null, //数据2
+    // yAxis2_bar_Name: "", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: [80, 40, 60, 50, 80, 40],
+    // yAxis2_line_Name: "进水",
+    // yAxis2_line_Index: 1,
+    // yAxis3_line: [90, 50, 70, 60, 90, 50],
+    // yAxis3_line_Name: "出水",
+    // yAxis3_line_Index: 1,
+    // 四级
+    xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    y1_Unit: "个", //Y轴单位
+    y2_Unit: "万方", //2号Y轴单位
+    y2_show: true, //是否展示右侧的2号轴
+    yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    yAxis1_bar_Name: "接驳点位", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "",
+    yAxis2_line_Index: 1,
+    yAxis3_line: [90, 50, 70, 60, 90, 50],
+    yAxis3_line_Name: "出水量",
+    yAxis3_line_Index: 1,
   },
   refresh1: 0,
   ClickData1: "dgtxg",
@@ -206,15 +320,57 @@
   ClickData2: "dgtxg",
   //   河湖排口
   chartData3: {
-    xAxis: [],
-    yAxis: [],
-    yAxis_Name: "",
-    yAxis2: [],
-    yAxis2_Name: "",
-    yAxis3_line: [],
-    yAxis3_line_Name: "",
-    yAxis4_line: null,
-    yAxis4_line_Name: "",
+    // // 一级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //Y轴单位
+    // y2_show: true,
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "排口", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: ["20", "20", "20", "20", "20", "20"], //数据2
+    // yAxis2_bar_Name: "风险排口", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: null,
+    // yAxis2_line_Name: "设防水位",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
+    // yAxis3_line_Name: "库容量",
+    // yAxis3_line_Index: 1,
+    // // 二级
+    // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    // y1_Unit: "m", //Y轴单位
+    // y2_Unit: "万方", //Y轴单位
+    // y2_show: true,
+    // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    // yAxis1_bar_Name: "排口", //数据1的名称
+    // yAxis1_bar_index: 0,
+    // yAxis2_bar: ["20", "20", "20", "20", "20", "20"], //数据2
+    // yAxis2_bar_Name: "风险排口", //数据1的名称
+    // yAxis2_bar_index: 0,
+    // yAxis2_line: null,
+    // yAxis2_line_Name: "设防水位",
+    // yAxis2_line_Index: 0,
+    // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
+    // yAxis3_line_Name: "进水量",
+    // yAxis3_line_Index: 1,
+    // 三级
+    xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
+    y1_Unit: "个", //Y轴单位
+    y2_Unit: "万方", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
+    yAxis1_bar_Name: "渍水风险点", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "风险排口", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "设防水位",
+    yAxis2_line_Index: 0,
+    yAxis3_line: null,
+    yAxis3_line_Name: "进水量",
+    yAxis3_line_Index: 1,
   },
   refresh3: 0,
   ClickData3: "dgtxg",
@@ -225,6 +381,7 @@
   // 赋值需要进行echarts数据请求的数据
   AllData.regionGrade = item.grade;
   AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
 
   // 视角切换
   if (item.sort == 0) {
@@ -232,6 +389,7 @@
     newfiberMap.map.easeTo(newfiberMap.config_.params.init);
     AllData.regionGrade = "one";
     AllData.regionName = "";
+    AllData.waterRegionCode = "";
     AllData.TitleName[1] = {
       abbreviation: "",
       Name: "",
@@ -322,8 +480,9 @@
     };
   }
   // 切换时进行数据请求,默认视角请求
-
+  clearEchartsData();
   getData1();
+  getData3();
 };
 // 分区点击切换
 const FenQuClick = (properties) => {
@@ -353,78 +512,7 @@
         AllData.TitleName[0].Name = ""; //全称
       }
       // 设置1 2 3 4 级分区
-
       clearMianBaoData();
-      //   if (res.data.length == 1) {
-      //     // 只有总分区/一级分区
-      //     res.data.forEach((element) => {
-      //       if (element.grade == "one") {
-      //         AllData.TitleName[1] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "two",
-      //           sort: 1,
-      //           Name: element.name,
-      //         };
-      //       }
-      //     });
-      //   } else if (res.data.length == 2) {
-      //     // 只有总分区/一级分区/二级分区
-
-      //     res.data.forEach((element) => {
-      //       if (element.grade == "one") {
-      //         AllData.TitleName[1] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "two",
-      //           sort: 1,
-      //           Name: element.name,
-      //         };
-      //       }
-      //       if (element.grade == "two") {
-      //         AllData.TitleName[2] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "three",
-      //           sort: 2,
-      //           Name: element.name,
-      //         };
-      //       }
-      //     });
-      //   } else if (res.data.length == 3) {
-      //     // 只有总分区/一级分区/二级分区/三级分区
-
-      //     res.data.forEach((element) => {
-      //       if (element.grade == "one") {
-      //         AllData.TitleName[1] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "two",
-      //           sort: 1,
-      //           Name: element.name,
-      //         };
-      //       }
-      //       if (element.grade == "two") {
-      //         AllData.TitleName[2] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "three",
-      //           sort: 2,
-      //           Name: element.name,
-      //         };
-      //       }
-      //       if (element.grade == "three") {
-      //         AllData.TitleName[3] = {
-      //           abbreviation: element.shortName,
-      //           id: element.id,
-      //           grade: "four",
-      //           sort: 3,
-      //           Name: element.name,
-      //         };
-      //       }
-      //     });
-      //   } else if (res.data.length == 4) {
-      //     // 只有总分区/一级分区/二级分区/三级分区/四级分区
       res.data.forEach((element) => {
         if (element.grade == "one") {
           AllData.TitleName[1] = {
@@ -474,19 +562,26 @@
           ? "four"
           : "five"; //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
       AllData.regionName = AllData.TitleName[res.data.length].Name;
+      AllData.waterRegionCode = AllData.TitleName[res.data.length].id;
+      // clearEchartsData();
       if (AllData.regionGrade == "two") {
         // 二级
         console.log("二级");
         getData1();
         getData2();
+        getData3();
       } else if (AllData.regionGrade == "three") {
         // 三级
         console.log("三级");
         getData1();
+        getData4();
+        getData5();
       } else if (AllData.regionGrade == "four") {
         // 四级
         console.log("四级");
         getData2();
+        getData4();
+        getData5();
       } else {
         // 五级  五级为排水单元,由上可知,因为没有pid 所以此方法无效
         console.log("五级");
@@ -503,6 +598,7 @@
   item.value.split(",").forEach((o) => operationLayer(o, true));
   AllData.regionGrade = "one";
   AllData.regionName = "";
+  AllData.waterRegionCode = "";
   newfiberMap.map.easeTo(newfiberMap.config_.params.init);
   // 切换时回到默认一级分区
   AllData.TypeID = type;
@@ -547,7 +643,7 @@
     sort: 4,
   };
 };
-// 获取数据  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
+// 获取数据 徐云欣  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
 const getData1 = () => {
   MonitorAPI.pipelineProblemStatistic({
     regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
@@ -577,7 +673,7 @@
   });
 };
 
-// 获取数据  二级界面的管网监测/四级界面的历史风险
+// 获取数据 徐云欣  二级界面的管网监测/四级界面的历史风险
 const getData2 = () => {
   MonitorAPI.pipelineRunRiskStatistic({
     regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
@@ -592,7 +688,9 @@
         AllData.chartData1.yAxis = res.data.pipelinePointCount; //运行风险点位数
         AllData.chartData1.yAxis2 = res.data.pipelineRunRiskPointCount; //管网监测点位数
         AllData.chartData1.yAxis_Name = "运行风险数";
+        AllData.chartData1.yAxis_Unit = "个";
         AllData.chartData1.yAxis2_Name = "点位数";
+        AllData.chartData1.yAxis_Unit = "个";
         AllData.refresh1++;
       }
       if (AllData.regionGrade == "four") {
@@ -606,6 +704,102 @@
     }
   });
 };
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+const getData3 = () => {
+  MonitorAPI.outletList({
+    waterRegionCode: AllData.waterRegionCode, //分区编号
+    // regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        AllData.chartData3.xAxis = res.data.partitionName;
+        AllData.chartData3.yAxis1_bar = res.data.outletsNumber;
+        AllData.chartData3.yAxis1_bar_Name = "排口";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "风险排口";
+        AllData.chartData3.yAxis3_line = res.data.inflowWater;
+        AllData.chartData3.yAxis3_line_Name = "进水量";
+        AllData.chartData3.yAxis3_line_Index = 1;
+        AllData.chartData3.y1_Unit = "个"; //Y轴单位
+        AllData.chartData3.y2_Unit = "万方"; //Y轴单位
+        AllData.chartData3.y2_show = true;
+        AllData.refresh3++;
+      }
+      if (AllData.regionGrade == "two") {
+        // AllData.chartData3
+      }
+    }
+  });
+};
+// 获取数据 谢杨  三级界面的渍水风险点/ 四级界面的渍水风险点
+const getData4 = () => {
+  //
+  MonitorAPI.pointList({
+    waterRegionCode: AllData.waterRegionCode, //分区编号
+    // regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "three") {
+        // AllData.chartData3
+      }
+      if (AllData.regionGrade == "four") {
+        // AllData.chartData2
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳  / 三级 当日水量分析 /四级当日水量分析
+const getData5 = () => {
+  MonitorAPI.waterRegionWaterYieldAnalysis({
+    waterRegionId: AllData.waterRegionCode,
+  }).then((res) => []);
+};
+// 获取数据 刘芳阳
+const getData6 = () => {};
+
+// 一级界面的河湖水情
+// 清除本底分析echarts的数据
+const clearEchartsData = () => {
+  AllData.chartData1 = {
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //2号Y轴单位
+    y2_show: false, //是否展示右侧的2号轴
+    yAxis1_bar: null, //数据1
+    yAxis1_bar_Name: "", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "",
+    yAxis2_line_Index: 0,
+    yAxis3_line: null,
+    yAxis3_line_Name: "",
+    yAxis3_line_Index: 0,
+  };
+  AllData.refresh1++;
+  AllData.chartData3 = {
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //2号Y轴单位
+    y2_show: false, //是否展示右侧的2号轴
+    yAxis1_bar: null, //数据1
+    yAxis1_bar_Name: "", //数据1的名称
+    yAxis1_bar_index: 0,
+    yAxis2_bar: null, //数据2
+    yAxis2_bar_Name: "", //数据1的名称
+    yAxis2_bar_index: 0,
+    yAxis2_line: null,
+    yAxis2_line_Name: "",
+    yAxis2_line_Index: 0,
+    yAxis3_line: null,
+    yAxis3_line_Name: "",
+    yAxis3_line_Index: 0,
+  };
+  AllData.refresh3++;
+};
 onMounted(() => {
   let initeGLTimer = setInterval(() => {
     if (!newfiberMap) return;
diff --git a/vite.config.js b/vite.config.js
index 93ab8a4..e24d112 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,10 +5,10 @@
 import autoprefixer from 'autoprefixer';
 
 const Timestamp = new Date().getTime(); //随机时间戳
-// let ipLink = 'https://server1.wh-nf.cn:8201/prod-api';
-let ipLink = 'http://192.168.16.135:9100';
+let ipLink = 'https://server1.wh-nf.cn:8201/prod-api';
+// let ipLink = 'http://192.168.16.135:9100';//徐云欣
 // let ipLink = 'http://192.168.16.124:9100';
-// let ipLink = 'http://192.168.20.43:9100';
+// let ipLink = 'http://192.168.16.43:9100'; // 谢杨
 /*  */
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {