diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
new file mode 100644
index 0000000..45e5aee
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -0,0 +1,832 @@
+<template>
+  <!-- 排水体系 -->
+  <div class="YSIndex">
+    <!-- 中间的污水/雨水切换 -->
+    <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
+    <Transition name="fade_left">
+      <div :class="['moduleBox', 'moduleBoxLeft']" v-show="!showPanel">
+        <!-- 顶部公共标题 -->
+        <div class="CrumbesTitle">
+          <!-- 一级 -->
+          <span
+            class="crumbs"
+            v-for="item in AllData.TitleName"
+            :key="item.grade"
+            v-show="item.abbreviation"
+            @click="MBClick(item)"
+          >
+            {{ item.grade != "one" ? "/" : "" }}
+            {{ item.abbreviation ? item.abbreviation : "" }}
+          </span>
+        </div>
+        <div class="modular1">
+          <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 == 'four'
+              "
+              :data="AllData.chartData1"
+              :refresh="AllData.refresh1"
+              :ClickData="AllData.ClickData1"
+            ></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">
+            {{
+              AllData.regionGrade == "one"
+                ? "流域管网"
+                : AllData.regionGrade == "two"
+                ? "管网统计"
+                : AllData.regionGrade == "three"
+                ? "当日水量分析"
+                : AllData.regionGrade == "four"
+                ? "渍水风险点"
+                : ""
+            }}
+          </div>
+          <div class="modularBody">
+            <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.chartData3"
+              :refresh="AllData.refresh3"
+              :ClickData="AllData.ClickData3"
+            ></DraBarCharts2Y>
+            <DraLineChartsLeft
+              v-if="AllData.regionGrade == 'four'"
+              :data="AllData.chartData3"
+              :refresh="AllData.refresh3"
+              :ClickData="AllData.ClickData3"
+            />
+          </div>
+        </div></div
+    ></Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-show="!showPanel && AllData.RightShow"
+      >
+        <!-- 顶部公共标题 -->
+        <div class="CrumbesTitle">
+          <!-- 一级 -->
+          <span
+            class="crumbs"
+            v-for="item in AllData.TitleName"
+            :key="item.grade"
+            v-show="item.abbreviation"
+          >
+            {{ item.grade != "one" ? "/" : "" }}
+            {{ item.abbreviation ? item.abbreviation : "" }}
+          </span>
+        </div>
+        <div class="modular1">
+          <!-- <div class="leve2Title">河湖水情</div>
+            <div class="modularBody"></div> -->
+        </div>
+        <div class="modular2">
+          <div class="leve2Title">水量分析</div>
+          <div class="modularBody"></div>
+        </div>
+        <div class="modular3">
+          <div class="leve2Title">管网本底</div>
+          <div class="modularBody"></div>
+        </div></div
+    ></Transition>
+  </div>
+</template>
+
+<script setup name="YSIndex">
+import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from "@/bus";
+// 引入接口
+import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
+// 引入echarts组件
+// 纵向立体柱状体以及标线和折现
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
+//横向的两组柱状图堆叠
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
+// 纵向的两条折现
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
+// 面板控制组件
+import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
+const showPanel = ref(false); //面板展开收起
+const PanelChange = (val) => {
+  showPanel.value = val;
+};
+
+const AllData = reactive({
+  TypeID: "rain",
+  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
+  regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
+  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  TitleName: [
+    {
+      abbreviation: "一级分区", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "one", //分区层级-静态(查询数据用)
+      sort: 0, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "two", //分区层级-静态
+      sort: 1, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "three", //分区层级-静态
+      sort: 2, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "four", //分区层级-静态
+      sort: 3, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "five", //分区层级-静态
+      sort: 4, //面包屑的顺序
+      Name: "", //全称
+    },
+  ],
+  //   Ecahrts数据
+  //   河湖水情
+  chartData1: {
+    // 一级
+    // 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: "",
+    // 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",
+  //   流域管网
+  chartData2: {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+  },
+  refresh2: 0,
+  ClickData2: "dgtxg",
+  //   河湖排口
+  chartData3: {
+    // // 一级
+    // 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",
+});
+// 面包屑点击事件
+const MBClick = (item) => {
+  console.log(item);
+  // 赋值需要进行echarts数据请求的数据
+  AllData.regionGrade = item.grade;
+  AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
+
+  // 视角切换
+  if (item.sort == 0) {
+    // 回到默认图层
+    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
+    AllData.regionGrade = "one";
+    AllData.regionName = "";
+    AllData.waterRegionCode = "";
+    AllData.TitleName[1] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "two",
+      sort: 1,
+    };
+    AllData.TitleName[2] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "three",
+      sort: 2,
+    };
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  if (item.sort == 1) {
+    bus.emit("panelDataToMap", {
+      name: item.abbreviation,
+      id: item.id,
+    });
+    AllData.TitleName[2] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "three",
+      sort: 2,
+    };
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  if (item.sort == 2) {
+    bus.emit("panelDataToMap", {
+      name: item.abbreviation,
+      id: item.id,
+    });
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  if (item.sort == 3) {
+    bus.emit("panelDataToMap", {
+      name: item.abbreviation,
+      id: item.id,
+    });
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  // 切换时进行数据请求,默认视角请求
+  clearEchartsData();
+  getData1();
+  getData3();
+};
+// 分区点击切换
+const FenQuClick = (properties) => {
+  console.log("FenQuClick", properties);
+  if (!!!properties.pid) return;
+  // 请求面包屑的数据
+  let params = {
+    regionType: AllData.TypeID,
+    id: Number(properties.pid),
+  };
+  MonitorAPI.lineGrade(params).then((res) => {
+    if (res && res.code == 200) {
+      // 默认设置基础的分区
+      if (AllData.TypeID == "sewage") {
+        // 污水
+        AllData.TitleName[0].abbreviation = "一级分区";
+        AllData.TitleName[0].id = ""; //分区信息-动态
+        AllData.TitleName[0].grade = "one"; //分区层级-静态
+        AllData.TitleName[0].sort = 0; //面包屑的顺序
+        AllData.TitleName[0].Name = ""; //全称
+      } else {
+        // 雨水
+        AllData.TitleName[0].abbreviation = "一级流域";
+        AllData.TitleName[0].id = ""; //分区信息-动态
+        AllData.TitleName[0].grade = "one"; //分区层级-静态
+        AllData.TitleName[0].sort = 0; //面包屑的顺序
+        AllData.TitleName[0].Name = ""; //全称
+      }
+      // 设置1 2 3 4 级分区
+      clearMianBaoData();
+      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,
+          };
+        }
+        if (element.grade == "four") {
+          AllData.TitleName[4] = {
+            abbreviation: element.shortName,
+            id: element.id,
+            grade: "five",
+            sort: 4,
+            Name: element.name,
+          };
+        }
+      });
+      //   }
+      // 赋值需要进行echarts数据请求的数据
+      AllData.regionGrade =
+        res.data.length == 1
+          ? "two"
+          : res.data.length == 2
+          ? "three"
+          : res.data.length == 3
+          ? "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("五级");
+      }
+    }
+  });
+};
+
+const events_params = {
+  setHighlight: { key: "setHighlight" },
+  setLayerVisible: { key: "setLayerVisible" },
+  clearTemporaryData: { key: "clearTemporaryData" },
+};
+const operationLayer = (name, visible) => {
+  const { setLayerVisible, setHighlight } = events_params;
+  bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
+};
+// 清除面包屑的数据
+const clearMianBaoData = () => {
+  AllData.TitleName[1] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "two",
+    sort: 1,
+  };
+  AllData.TitleName[2] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "three",
+    sort: 2,
+  };
+  AllData.TitleName[3] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "four",
+    sort: 3,
+  };
+  AllData.TitleName[4] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "five",
+    sort: 4,
+  };
+};
+// 获取数据 徐云欣  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
+const getData1 = () => {
+  MonitorAPI.pipelineProblemStatistic({
+    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
+    regionName: AllData.regionName, //分区名称
+    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        // 一级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+      }
+      if (AllData.regionGrade == "two") {
+        // 二级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "问题管网";
+      }
+      if (AllData.regionGrade == "three") {
+        // 三级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+      }
+      //   数据赋值
+      AllData.chartData2.xAxis = res.data.regionNameList;
+      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
+      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
+      AllData.chartData2.yAxis2_Name = "总长度";
+      AllData.refresh2++;
+    }
+  });
+};
+
+// 获取数据 徐云欣  二级界面的管网监测/四级界面的历史风险
+const getData2 = () => {
+  MonitorAPI.pipelineRunRiskStatistic({
+    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
+    regionName: AllData.regionName, //分区名称
+    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+    // startTime: "", //开始时间（仅历史风险需要用到）
+    // endTime: "", //结束时间（仅历史风险需要用到）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "two") {
+        AllData.chartData1.xAxis = res.data.regionNameList;
+        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") {
+        AllData.chartData3.xAxis = res.data.regionNameList;
+        AllData.chartData3.yAxis = res.data.overFlowRiskTimesList; //溢流风险
+        AllData.chartData3.yAxis2 = res.data.fullPipeTimesList; //满管风险
+        AllData.chartData3.yAxis_Name = "溢流风险";
+        AllData.chartData3.yAxis2_Name = "满管风险";
+        AllData.refresh3++;
+      }
+    }
+  });
+};
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+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;
+    bus.on("FenQuClick", FenQuClick);
+    // bus.on("openJXFXDialog", openJXFXDialog);
+    clearInterval(initeGLTimer);
+  }, 100);
+});
+
+onBeforeUnmount(() => {
+  bus.off("FenQuClick");
+});
+</script>
+
+<style lang="scss" scoped>
+.YSIndex {
+  .CrumbesTitle {
+    width: 100%;
+    height: 44px;
+    background: url("@/assets/images/pictureOnMap/eachBgc.png") no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding-left: 40px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    .crumbs {
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      cursor: pointer;
+      &:hover {
+        color: #2291e1;
+      }
+    }
+  }
+  .modular1,
+  .modular2,
+  .modular3 {
+    width: 100%;
+    height: calc((100% - 50px) / 3);
+
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+
+      .FontText {
+        width: 100%;
+        height: 20px;
+        line-height: 20px;
+        text-align: right;
+        color: rgb(110, 230, 230);
+        font-weight: 300;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
new file mode 100644
index 0000000..45e5aee
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -0,0 +1,832 @@
+<template>
+  <!-- 排水体系 -->
+  <div class="YSIndex">
+    <!-- 中间的污水/雨水切换 -->
+    <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
+    <Transition name="fade_left">
+      <div :class="['moduleBox', 'moduleBoxLeft']" v-show="!showPanel">
+        <!-- 顶部公共标题 -->
+        <div class="CrumbesTitle">
+          <!-- 一级 -->
+          <span
+            class="crumbs"
+            v-for="item in AllData.TitleName"
+            :key="item.grade"
+            v-show="item.abbreviation"
+            @click="MBClick(item)"
+          >
+            {{ item.grade != "one" ? "/" : "" }}
+            {{ item.abbreviation ? item.abbreviation : "" }}
+          </span>
+        </div>
+        <div class="modular1">
+          <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 == 'four'
+              "
+              :data="AllData.chartData1"
+              :refresh="AllData.refresh1"
+              :ClickData="AllData.ClickData1"
+            ></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">
+            {{
+              AllData.regionGrade == "one"
+                ? "流域管网"
+                : AllData.regionGrade == "two"
+                ? "管网统计"
+                : AllData.regionGrade == "three"
+                ? "当日水量分析"
+                : AllData.regionGrade == "four"
+                ? "渍水风险点"
+                : ""
+            }}
+          </div>
+          <div class="modularBody">
+            <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.chartData3"
+              :refresh="AllData.refresh3"
+              :ClickData="AllData.ClickData3"
+            ></DraBarCharts2Y>
+            <DraLineChartsLeft
+              v-if="AllData.regionGrade == 'four'"
+              :data="AllData.chartData3"
+              :refresh="AllData.refresh3"
+              :ClickData="AllData.ClickData3"
+            />
+          </div>
+        </div></div
+    ></Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-show="!showPanel && AllData.RightShow"
+      >
+        <!-- 顶部公共标题 -->
+        <div class="CrumbesTitle">
+          <!-- 一级 -->
+          <span
+            class="crumbs"
+            v-for="item in AllData.TitleName"
+            :key="item.grade"
+            v-show="item.abbreviation"
+          >
+            {{ item.grade != "one" ? "/" : "" }}
+            {{ item.abbreviation ? item.abbreviation : "" }}
+          </span>
+        </div>
+        <div class="modular1">
+          <!-- <div class="leve2Title">河湖水情</div>
+            <div class="modularBody"></div> -->
+        </div>
+        <div class="modular2">
+          <div class="leve2Title">水量分析</div>
+          <div class="modularBody"></div>
+        </div>
+        <div class="modular3">
+          <div class="leve2Title">管网本底</div>
+          <div class="modularBody"></div>
+        </div></div
+    ></Transition>
+  </div>
+</template>
+
+<script setup name="YSIndex">
+import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from "@/bus";
+// 引入接口
+import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
+// 引入echarts组件
+// 纵向立体柱状体以及标线和折现
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
+//横向的两组柱状图堆叠
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
+// 纵向的两条折现
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
+// 面板控制组件
+import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
+const showPanel = ref(false); //面板展开收起
+const PanelChange = (val) => {
+  showPanel.value = val;
+};
+
+const AllData = reactive({
+  TypeID: "rain",
+  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
+  regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
+  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  TitleName: [
+    {
+      abbreviation: "一级分区", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "one", //分区层级-静态(查询数据用)
+      sort: 0, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "two", //分区层级-静态
+      sort: 1, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "three", //分区层级-静态
+      sort: 2, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "four", //分区层级-静态
+      sort: 3, //面包屑的顺序
+      Name: "", //全称
+    },
+    {
+      abbreviation: "", //分区缩写-动态
+      id: "", //分区信息-动态
+      grade: "five", //分区层级-静态
+      sort: 4, //面包屑的顺序
+      Name: "", //全称
+    },
+  ],
+  //   Ecahrts数据
+  //   河湖水情
+  chartData1: {
+    // 一级
+    // 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: "",
+    // 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",
+  //   流域管网
+  chartData2: {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+  },
+  refresh2: 0,
+  ClickData2: "dgtxg",
+  //   河湖排口
+  chartData3: {
+    // // 一级
+    // 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",
+});
+// 面包屑点击事件
+const MBClick = (item) => {
+  console.log(item);
+  // 赋值需要进行echarts数据请求的数据
+  AllData.regionGrade = item.grade;
+  AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
+
+  // 视角切换
+  if (item.sort == 0) {
+    // 回到默认图层
+    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
+    AllData.regionGrade = "one";
+    AllData.regionName = "";
+    AllData.waterRegionCode = "";
+    AllData.TitleName[1] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "two",
+      sort: 1,
+    };
+    AllData.TitleName[2] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "three",
+      sort: 2,
+    };
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  if (item.sort == 1) {
+    bus.emit("panelDataToMap", {
+      name: item.abbreviation,
+      id: item.id,
+    });
+    AllData.TitleName[2] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "three",
+      sort: 2,
+    };
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  if (item.sort == 2) {
+    bus.emit("panelDataToMap", {
+      name: item.abbreviation,
+      id: item.id,
+    });
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  if (item.sort == 3) {
+    bus.emit("panelDataToMap", {
+      name: item.abbreviation,
+      id: item.id,
+    });
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+  }
+  // 切换时进行数据请求,默认视角请求
+  clearEchartsData();
+  getData1();
+  getData3();
+};
+// 分区点击切换
+const FenQuClick = (properties) => {
+  console.log("FenQuClick", properties);
+  if (!!!properties.pid) return;
+  // 请求面包屑的数据
+  let params = {
+    regionType: AllData.TypeID,
+    id: Number(properties.pid),
+  };
+  MonitorAPI.lineGrade(params).then((res) => {
+    if (res && res.code == 200) {
+      // 默认设置基础的分区
+      if (AllData.TypeID == "sewage") {
+        // 污水
+        AllData.TitleName[0].abbreviation = "一级分区";
+        AllData.TitleName[0].id = ""; //分区信息-动态
+        AllData.TitleName[0].grade = "one"; //分区层级-静态
+        AllData.TitleName[0].sort = 0; //面包屑的顺序
+        AllData.TitleName[0].Name = ""; //全称
+      } else {
+        // 雨水
+        AllData.TitleName[0].abbreviation = "一级流域";
+        AllData.TitleName[0].id = ""; //分区信息-动态
+        AllData.TitleName[0].grade = "one"; //分区层级-静态
+        AllData.TitleName[0].sort = 0; //面包屑的顺序
+        AllData.TitleName[0].Name = ""; //全称
+      }
+      // 设置1 2 3 4 级分区
+      clearMianBaoData();
+      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,
+          };
+        }
+        if (element.grade == "four") {
+          AllData.TitleName[4] = {
+            abbreviation: element.shortName,
+            id: element.id,
+            grade: "five",
+            sort: 4,
+            Name: element.name,
+          };
+        }
+      });
+      //   }
+      // 赋值需要进行echarts数据请求的数据
+      AllData.regionGrade =
+        res.data.length == 1
+          ? "two"
+          : res.data.length == 2
+          ? "three"
+          : res.data.length == 3
+          ? "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("五级");
+      }
+    }
+  });
+};
+
+const events_params = {
+  setHighlight: { key: "setHighlight" },
+  setLayerVisible: { key: "setLayerVisible" },
+  clearTemporaryData: { key: "clearTemporaryData" },
+};
+const operationLayer = (name, visible) => {
+  const { setLayerVisible, setHighlight } = events_params;
+  bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
+};
+// 清除面包屑的数据
+const clearMianBaoData = () => {
+  AllData.TitleName[1] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "two",
+    sort: 1,
+  };
+  AllData.TitleName[2] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "three",
+    sort: 2,
+  };
+  AllData.TitleName[3] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "four",
+    sort: 3,
+  };
+  AllData.TitleName[4] = {
+    abbreviation: "",
+    Name: "",
+    id: "",
+    grade: "five",
+    sort: 4,
+  };
+};
+// 获取数据 徐云欣  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
+const getData1 = () => {
+  MonitorAPI.pipelineProblemStatistic({
+    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
+    regionName: AllData.regionName, //分区名称
+    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        // 一级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+      }
+      if (AllData.regionGrade == "two") {
+        // 二级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "问题管网";
+      }
+      if (AllData.regionGrade == "three") {
+        // 三级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+      }
+      //   数据赋值
+      AllData.chartData2.xAxis = res.data.regionNameList;
+      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
+      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
+      AllData.chartData2.yAxis2_Name = "总长度";
+      AllData.refresh2++;
+    }
+  });
+};
+
+// 获取数据 徐云欣  二级界面的管网监测/四级界面的历史风险
+const getData2 = () => {
+  MonitorAPI.pipelineRunRiskStatistic({
+    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
+    regionName: AllData.regionName, //分区名称
+    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
+    // startTime: "", //开始时间（仅历史风险需要用到）
+    // endTime: "", //结束时间（仅历史风险需要用到）
+  }).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "two") {
+        AllData.chartData1.xAxis = res.data.regionNameList;
+        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") {
+        AllData.chartData3.xAxis = res.data.regionNameList;
+        AllData.chartData3.yAxis = res.data.overFlowRiskTimesList; //溢流风险
+        AllData.chartData3.yAxis2 = res.data.fullPipeTimesList; //满管风险
+        AllData.chartData3.yAxis_Name = "溢流风险";
+        AllData.chartData3.yAxis2_Name = "满管风险";
+        AllData.refresh3++;
+      }
+    }
+  });
+};
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+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;
+    bus.on("FenQuClick", FenQuClick);
+    // bus.on("openJXFXDialog", openJXFXDialog);
+    clearInterval(initeGLTimer);
+  }, 100);
+});
+
+onBeforeUnmount(() => {
+  bus.off("FenQuClick");
+});
+</script>
+
+<style lang="scss" scoped>
+.YSIndex {
+  .CrumbesTitle {
+    width: 100%;
+    height: 44px;
+    background: url("@/assets/images/pictureOnMap/eachBgc.png") no-repeat center;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    padding-left: 40px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    .crumbs {
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      cursor: pointer;
+      &:hover {
+        color: #2291e1;
+      }
+    }
+  }
+  .modular1,
+  .modular2,
+  .modular3 {
+    width: 100%;
+    height: calc((100% - 50px) / 3);
+
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+
+      .FontText {
+        width: 100%;
+        height: 20px;
+        line-height: 20px;
+        text-align: right;
+        color: rgb(110, 230, 230);
+        font-weight: 300;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/index.vue b/src/views/pictureOnMap/page/DrainageSystem/index.vue
index b32e737..33a89e7 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/index.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/index.vue
@@ -12,182 +12,14 @@
         <span class="TypenName">{{ item.name }}</span>
       </div>
     </div>
-    <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
-    <Transition name="fade_left">
-      <div :class="['moduleBox', 'moduleBoxLeft']" v-show="!showPanel">
-        <!-- 顶部公共标题 -->
-        <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <span
-            class="crumbs"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-            @click="MBClick(item)"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span>
-        </div>
-        <div class="modular1">
-          <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 == 'four'
-              "
-              :data="AllData.chartData1"
-              :refresh="AllData.refresh1"
-              :ClickData="AllData.ClickData1"
-            ></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">
-            {{
-              AllData.regionGrade == "one"
-                ? "流域管网"
-                : AllData.regionGrade == "two"
-                ? "管网统计"
-                : AllData.regionGrade == "three"
-                ? "当日水量分析"
-                : AllData.regionGrade == "four"
-                ? "渍水风险点"
-                : ""
-            }}
-          </div>
-          <div class="modularBody">
-            <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.chartData3"
-              :refresh="AllData.refresh3"
-              :ClickData="AllData.ClickData3"
-            ></DraBarCharts2Y>
-            <DraLineChartsLeft
-              v-if="AllData.TypeID == 'four'"
-              :data="AllData.chartData3"
-              :refresh="AllData.refresh3"
-              :ClickData="AllData.ClickData3"
-            />
-          </div>
-        </div></div
-    ></Transition>
-    <Transition name="fade_right">
-      <div
-        :class="['moduleBox', 'moduleBoxRight']"
-        v-show="!showPanel && AllData.RightShow"
-      >
-        <!-- 顶部公共标题 -->
-        <div class="CrumbesTitle">
-          <!-- 一级 -->
-          <span
-            class="crumbs"
-            v-for="item in AllData.TitleName"
-            :key="item.grade"
-            v-show="item.abbreviation"
-          >
-            {{ item.grade != "one" ? "/" : "" }}
-            {{ item.abbreviation ? item.abbreviation : "" }}
-          </span>
-        </div>
-        <div class="modular1">
-          <!-- <div class="leve2Title">河湖水情</div>
-          <div class="modularBody"></div> -->
-        </div>
-        <div class="modular2">
-          <div class="leve2Title">水量分析</div>
-          <div class="modularBody"></div>
-        </div>
-        <div class="modular3">
-          <div class="leve2Title">管网本底</div>
-          <div class="modularBody"></div>
-        </div></div
-    ></Transition>
+    <YSIndex v-if="AllData.TypeID == 'rain'"></YSIndex>
   </div>
 </template>
 
 <script setup name="DrainageSystem">
 import { ref, reactive, toRefs, onMounted } from "vue";
-import bus from "@/bus";
-// 引入接口
-import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
-// 引入echarts组件
-// 纵向立体柱状体以及标线和折现
-import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
-//横向的两组柱状图堆叠
-import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
-// 纵向的两条折现
-import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
-// 面板控制组件
-import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
-const showPanel = ref(false); //面板展开收起
-const PanelChange = (val) => {
-  showPanel.value = val;
-};
-
+import YSIndex from "./YSIndex.vue";
 const AllData = reactive({
-  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
-  regionName: "", //分区名称
-  waterRegionCode: "", //分区编号
-  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
   yw_type: [
     { name: "污水体系", value: "污水分区,尾水路径", key: "sewage" },
     {
@@ -197,622 +29,15 @@
       key: "rain",
     },
   ],
-  TitleName: [
-    {
-      abbreviation: "一级分区", //分区缩写-动态
-      id: "", //分区信息-动态
-      grade: "one", //分区层级-静态(查询数据用)
-      sort: 0, //面包屑的顺序
-      Name: "", //全称
-    },
-    {
-      abbreviation: "", //分区缩写-动态
-      id: "", //分区信息-动态
-      grade: "two", //分区层级-静态
-      sort: 1, //面包屑的顺序
-      Name: "", //全称
-    },
-    {
-      abbreviation: "", //分区缩写-动态
-      id: "", //分区信息-动态
-      grade: "three", //分区层级-静态
-      sort: 2, //面包屑的顺序
-      Name: "", //全称
-    },
-    {
-      abbreviation: "", //分区缩写-动态
-      id: "", //分区信息-动态
-      grade: "four", //分区层级-静态
-      sort: 3, //面包屑的顺序
-      Name: "", //全称
-    },
-    {
-      abbreviation: "", //分区缩写-动态
-      id: "", //分区信息-动态
-      grade: "five", //分区层级-静态
-      sort: 4, //面包屑的顺序
-      Name: "", //全称
-    },
-  ],
-  //   Ecahrts数据
-  //   河湖水情
-  chartData1: {
-    // 一级
-    // 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: "",
-    // 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",
-  //   流域管网
-  chartData2: {
-    xAxis: [],
-    yAxis: [],
-    yAxis2: [],
-    yAxis_Name: "",
-    yAxis2_Name: "",
-  },
-  refresh2: 0,
-  ClickData2: "dgtxg",
-  //   河湖排口
-  chartData3: {
-    // // 一级
-    // 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",
 });
-// 面包屑点击事件
-const MBClick = (item) => {
-  console.log(item);
-  // 赋值需要进行echarts数据请求的数据
-  AllData.regionGrade = item.grade;
-  AllData.regionName = item.Name;
-  AllData.waterRegionCode = item.id;
 
-  // 视角切换
-  if (item.sort == 0) {
-    // 回到默认图层
-    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
-    AllData.regionGrade = "one";
-    AllData.regionName = "";
-    AllData.waterRegionCode = "";
-    AllData.TitleName[1] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "two",
-      sort: 1,
-    };
-    AllData.TitleName[2] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "three",
-      sort: 2,
-    };
-    AllData.TitleName[3] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "four",
-      sort: 3,
-    };
-    AllData.TitleName[4] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "five",
-      sort: 4,
-    };
-  }
-  if (item.sort == 1) {
-    bus.emit("panelDataToMap", {
-      name: item.abbreviation,
-      id: item.id,
-    });
-    AllData.TitleName[2] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "three",
-      sort: 2,
-    };
-    AllData.TitleName[3] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "four",
-      sort: 3,
-    };
-    AllData.TitleName[4] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "five",
-      sort: 4,
-    };
-  }
-  if (item.sort == 2) {
-    bus.emit("panelDataToMap", {
-      name: item.abbreviation,
-      id: item.id,
-    });
-    AllData.TitleName[3] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "four",
-      sort: 3,
-    };
-    AllData.TitleName[4] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "five",
-      sort: 4,
-    };
-  }
-  if (item.sort == 3) {
-    bus.emit("panelDataToMap", {
-      name: item.abbreviation,
-      id: item.id,
-    });
-    AllData.TitleName[4] = {
-      abbreviation: "",
-      Name: "",
-      id: "",
-      grade: "five",
-      sort: 4,
-    };
-  }
-  // 切换时进行数据请求,默认视角请求
-  clearEchartsData();
-  getData1();
-  getData3();
-};
-// 分区点击切换
-const FenQuClick = (properties) => {
-  console.log("FenQuClick", properties);
-  if (!!!properties.pid) return;
-  // 请求面包屑的数据
-  let params = {
-    regionType: AllData.TypeID,
-    id: Number(properties.pid),
-  };
-  MonitorAPI.lineGrade(params).then((res) => {
-    if (res && res.code == 200) {
-      // 默认设置基础的分区
-      if (AllData.TypeID == "sewage") {
-        // 污水
-        AllData.TitleName[0].abbreviation = "一级分区";
-        AllData.TitleName[0].id = ""; //分区信息-动态
-        AllData.TitleName[0].grade = "one"; //分区层级-静态
-        AllData.TitleName[0].sort = 0; //面包屑的顺序
-        AllData.TitleName[0].Name = ""; //全称
-      } else {
-        // 雨水
-        AllData.TitleName[0].abbreviation = "一级流域";
-        AllData.TitleName[0].id = ""; //分区信息-动态
-        AllData.TitleName[0].grade = "one"; //分区层级-静态
-        AllData.TitleName[0].sort = 0; //面包屑的顺序
-        AllData.TitleName[0].Name = ""; //全称
-      }
-      // 设置1 2 3 4 级分区
-      clearMianBaoData();
-      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,
-          };
-        }
-        if (element.grade == "four") {
-          AllData.TitleName[4] = {
-            abbreviation: element.shortName,
-            id: element.id,
-            grade: "five",
-            sort: 4,
-            Name: element.name,
-          };
-        }
-      });
-      //   }
-      // 赋值需要进行echarts数据请求的数据
-      AllData.regionGrade =
-        res.data.length == 1
-          ? "two"
-          : res.data.length == 2
-          ? "three"
-          : res.data.length == 3
-          ? "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("五级");
-      }
-    }
-  });
-};
 const TypeClick = (item) => {
-  let type = item.key;
-  bus.emit("clearTemporaryData");
-  AllData.yw_type.forEach((i) =>
-    i.value.split(",").forEach((o) => operationLayer(o, false))
-  );
-  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;
-};
-const events_params = {
-  setHighlight: { key: "setHighlight" },
-  setLayerVisible: { key: "setLayerVisible" },
-  clearTemporaryData: { key: "clearTemporaryData" },
-};
-const operationLayer = (name, visible) => {
-  const { setLayerVisible, setHighlight } = events_params;
-  bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
-};
-// 清除面包屑的数据
-const clearMianBaoData = () => {
-  AllData.TitleName[1] = {
-    abbreviation: "",
-    Name: "",
-    id: "",
-    grade: "two",
-    sort: 1,
-  };
-  AllData.TitleName[2] = {
-    abbreviation: "",
-    Name: "",
-    id: "",
-    grade: "three",
-    sort: 2,
-  };
-  AllData.TitleName[3] = {
-    abbreviation: "",
-    Name: "",
-    id: "",
-    grade: "four",
-    sort: 3,
-  };
-  AllData.TitleName[4] = {
-    abbreviation: "",
-    Name: "",
-    id: "",
-    grade: "five",
-    sort: 4,
-  };
-};
-// 获取数据 徐云欣  一级界面的流域管网/二级界面的管网统计/三级界面的管网统计
-const getData1 = () => {
-  MonitorAPI.pipelineProblemStatistic({
-    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
-    regionName: AllData.regionName, //分区名称
-    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
-  }).then((res) => {
-    if (res && res.code == 200) {
-      if (AllData.regionGrade == "one") {
-        // 一级Ecahrts 名称
-        AllData.chartData2.yAxis_Name = "摸排管网";
-      }
-      if (AllData.regionGrade == "two") {
-        // 二级Ecahrts 名称
-        AllData.chartData2.yAxis_Name = "问题管网";
-      }
-      if (AllData.regionGrade == "three") {
-        // 三级Ecahrts 名称
-        AllData.chartData2.yAxis_Name = "摸排管网";
-      }
-      //   数据赋值
-      AllData.chartData2.xAxis = res.data.regionNameList;
-      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
-      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
-      AllData.chartData2.yAxis2_Name = "总长度";
-      AllData.refresh2++;
-    }
-  });
+  AllData.TypeID = item.key;
 };
 
-// 获取数据 徐云欣  二级界面的管网监测/四级界面的历史风险
-const getData2 = () => {
-  MonitorAPI.pipelineRunRiskStatistic({
-    regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
-    regionName: AllData.regionName, //分区名称
-    regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
-    // startTime: "", //开始时间（仅历史风险需要用到）
-    // endTime: "", //结束时间（仅历史风险需要用到）
-  }).then((res) => {
-    if (res && res.code == 200) {
-      if (AllData.regionGrade == "two") {
-        AllData.chartData1.xAxis = res.data.regionNameList;
-        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") {
-        AllData.chartData3.xAxis = res.data.regionNameList;
-        AllData.chartData3.yAxis = res.data.overFlowRiskTimesList; //溢流风险
-        AllData.chartData3.yAxis2 = res.data.fullPipeTimesList; //满管风险
-        AllData.chartData3.yAxis_Name = "溢流风险";
-        AllData.chartData3.yAxis2_Name = "满管风险";
-        AllData.refresh3++;
-      }
-    }
-  });
-};
+onMounted(() => {});
 
-// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
-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;
-    TypeClick(AllData.yw_type[1]);
-    bus.on("FenQuClick", FenQuClick);
-    // bus.on("openJXFXDialog", openJXFXDialog);
-    clearInterval(initeGLTimer);
-  }, 100);
-});
-
-onBeforeUnmount(() => {
-  bus.off("FenQuClick");
-});
+onBeforeUnmount(() => {});
 </script>
 
 <style lang="scss" scoped>
@@ -862,48 +87,5 @@
       background: url("@/assets/images/pictureOnMap/JCFX/XuanZhong.png") no-repeat center;
     }
   }
-  .CrumbesTitle {
-    width: 100%;
-    height: 44px;
-    background: url("@/assets/images/pictureOnMap/eachBgc.png") no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    padding-left: 40px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    .crumbs {
-      font-weight: bold;
-      font-size: 20px;
-      color: #ffffff;
-      cursor: pointer;
-      &:hover {
-        color: #2291e1;
-      }
-    }
-  }
-  .modular1,
-  .modular2,
-  .modular3 {
-    width: 100%;
-    height: calc((100% - 50px) / 3);
-
-    .modularBody {
-      width: 100%;
-      height: calc(100% - 50px);
-
-      .FontText {
-        width: 100%;
-        height: 20px;
-        line-height: 20px;
-        text-align: right;
-        color: rgb(110, 230, 230);
-        font-weight: 300;
-        font-size: 12px;
-      }
-    }
-  }
 }
 </style>