diff --git a/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
new file mode 100644
index 0000000..45c2f01
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
@@ -0,0 +1,1305 @@
+<template>
+  <!-- 排水体系 -->
+  <div class="WSIndex">
+    <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"
+                ? "当日水量分析"
+                : ""
+            }}
+            {{ AllData.TjData1 ? `(${AllData.TjData1 + AllData.TjData1Unit})` : `` }}
+          </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"
+                ? "渍水风险点"
+                : ""
+            }}
+            {{ AllData.TjData2 ? `(${AllData.TjData2 + AllData.TjData2Unit})` : `` }}
+          </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"
+                ? "历史风险"
+                : ""
+            }}
+            {{ AllData.TjData3 ? `(${AllData.TjData3 + AllData.TjData3Unit})` : `` }}
+          </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="crumbs2">{{ AllData.ClicksiteName }}</span>
+        </div>
+        <div class="modular1_right">
+          <RightCharts
+            :data="AllData.chartDataRight"
+            :refresh="AllData.refreshRight"
+            v-if="AllData.refreshRight != 0"
+          ></RightCharts>
+        </div>
+        <div class="modular2_right">
+          <div class="leve2Title">水量分析</div>
+          <div class="modularBody">
+            <!-- 上游水量在接驳口时不展示 -->
+            <div v-if="!AllData.isJBK" class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.upstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">上游水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.siteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">当前站点水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.downstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">下游水量</div>
+            </div>
+          </div>
+        </div>
+        <div class="modular3_right">
+          <div class="leve2Title">管网本底</div>
+          <div class="modularBody">
+            <div class="ListInfo100">
+              <div class="ListInfo_label">类型:</div>
+              <div class="ListInfo_value">
+                {{
+                  AllData.GWBD.pointType == "YS"
+                    ? "雨水管网"
+                    : AllData.GWBD.pointType == "WS"
+                    ? "污水管网"
+                    : "--"
+                }}
+              </div>
+            </div>
+            <div class="ListInfo100">
+              <div class="ListInfo_label">编号:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">年份:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.buildTime ? AllData.GWBD.buildTime : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">管径:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineDiameter ? AllData.GWBD.pipelineDiameter : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">材质:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineTexture ? AllData.GWBD.pipelineTexture : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">缺陷类型:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.issueType ? AllData.GWBD.issueType : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">标段片区:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.roadName ? AllData.GWBD.roadName : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">末次运维:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.repairYear ? AllData.GWBD.repairYear : "--" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup name="WSIndex">
+import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
+import bus from "@/bus";
+// 引入接口
+import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
+import moment from "moment";
+import { getEchart } from "@/api/MonitorAssetsOnMap";
+
+// 引入echarts组件
+// 纵向立体柱状体以及标线和折现
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
+//横向的两组柱状图堆叠
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
+// 纵向的两条折现
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
+// 右侧面板接入
+import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
+// 面板控制组件
+import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
+const showPanel = ref(false); //面板展开收起
+const PanelChange = (val) => {
+  showPanel.value = val;
+};
+
+const AllData = reactive({
+  TypeID: "sewage",
+  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
+  regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
+  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
+  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: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh1: 0,
+  ClickData1: "dgtxg",
+  //   流域管网
+  chartData2: {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+  },
+  refresh2: 0,
+  ClickData2: "dgtxg",
+  //   河湖排口
+  chartData3: {
+    // 三级
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh3: 0,
+  ClickData3: "dgtxg",
+  GWBD: {},
+  SLFX: {},
+  isJBK: true, //是否为接驳口
+  chartDataRight: {
+    yAxis: [],
+    yAxis_Name: "降雨量",
+    yAxis2: [],
+    yAxis2_Name: "流速",
+    yAxis3: [],
+    yAxis3_Name: "水深",
+    xAxis: [],
+  },
+  refreshRight: 0,
+  ClicksiteName: "",
+  TjData1: 0,
+  TjData1Unit: "",
+  TjData2: 0,
+  TjData2Unit: "",
+  TjData3: 0,
+  TjData3Unit: "",
+});
+// 面包屑点击事件
+const MBClick = (item) => {
+  console.log(item);
+  AllData.RightShow = false;
+  AllData.RightShowID = "";
+  // 赋值需要进行echarts数据请求的数据
+  AllData.regionGrade = item.grade;
+  AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
+  clearEchartsData();
+  // debugger;
+  // 视角切换
+  if (item.sort == 0) {
+    // 回到默认图层
+    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
+    bus.emit(mapInitBusName);
+    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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData3();
+    getData7();
+  }
+  if (item.sort == 1) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData2();
+    getData3();
+  }
+  if (item.sort == 2) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 3) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    getData2();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 4) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+  }
+};
+// 分区点击切换
+const FenQuClick = (Row) => {
+  console.log("FenQuClick", Row.properties, Row.layerId);
+  //判断点击的是片区还是点位
+  if (Row.layerId == "排水分区") {
+    // 片区
+    AllData.RightShow = false;
+    AllData.RightShowID = false;
+    //   if (!!!Row.properties.pid) return;
+    //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
+    if (Row.properties.level == "4") return;
+    // 请求面包屑的数据
+    let params = {
+      regionType: AllData.TypeID,
+      id: Number(Row.properties.pid || Row.properties.w_id),
+    };
+    MonitorAPI.lineGrade(params).then((res) => {
+      if (res && res.code == 200) {
+        // 污水
+        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("五级");
+        }
+      }
+    });
+  } else if (Row.layerId == "point") {
+    // 点位
+    if (Row.properties.pointType == "rainwater_pipeline_quality") {
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
+      } else {
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
+      }
+    }
+  }
+};
+
+// 清除面包屑的数据
+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 = "摸排管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "two") {
+        // 二级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "问题管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "three") {
+        // 三级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+        AllData.TjData1 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData1Unit = "km";
+      }
+      //   数据赋值
+      AllData.chartData2.xAxis = res.data.regionNameList;
+      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
+      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
+      AllData.chartData2.yAxis2_Name = "总长度";
+      AllData.chartData2.y1_Unit = "km";
+      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; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = false; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = res.data.pipelinePointCount; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = res.data.pipelineRunRiskPointCount; //数据2
+        AllData.chartData1.yAxis2_bar_Name = "运行风险数"; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "";
+        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis3_line = null;
+        AllData.chartData1.yAxis3_line_Name = "";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = res.data.pipelinePointCount
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+      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++;
+        AllData.chartData3.xAxis = res.data.regionNameList;
+        AllData.chartData3.yAxis1_bar = null;
+        AllData.chartData3.yAxis1_bar_Name = "";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis2_line = res.data.fullPipeTimesList;
+        AllData.chartData3.yAxis2_line_Name = "满管";
+        AllData.chartData3.yAxis2_line_Index = 0;
+        AllData.chartData3.yAxis3_line = res.data.overFlowRiskTimesList;
+        AllData.chartData3.yAxis3_line_Name = "溢流";
+        AllData.chartData3.yAxis3_line_Index = 0;
+        AllData.chartData3.y1_Unit = "次"; //Y轴单位
+        AllData.chartData3.y2_Unit = "万方"; //Y轴单位
+        AllData.chartData3.y2_show = false;
+        AllData.refresh3++;
+        AllData.TjData3 = null;
+        AllData.TjData3Unit = null;
+      }
+    }
+  });
+};
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+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.inflowWater;
+        AllData.chartData3.yAxis1_bar_Name = "进水量";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis3_line = res.data.outletsNumber;
+        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++;
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "two") {
+        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;
+        // nextTick(() => {
+        //   debugger;
+        AllData.refresh3++;
+        // }, 1000);
+
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢杨  三级界面的渍水风险点/ 四级界面的渍水风险点
+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.xAxis = res.data.partitionName;
+        AllData.chartData3.yAxis1_bar = res.data.pointNumber;
+        AllData.chartData3.yAxis1_bar_Name = "渍水风险点";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "风险排口";
+        AllData.chartData3.yAxis3_line = null;
+        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 = false;
+        AllData.refresh3++;
+
+        AllData.TjData3 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        //
+        AllData.chartData2.xAxis = res.data.partitionName;
+        AllData.chartData2.yAxis = null;
+        AllData.chartData2.yAxis2 = res.data.pointNumber;
+        AllData.chartData2.yAxis2_Name = "数量";
+        AllData.chartData2.yAxis_Name = null;
+        AllData.chartData2.y1_Unit = "个";
+        AllData.refresh2++;
+
+        AllData.TjData2 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢扬 一级界面的河湖水情
+const getData7 = () => {
+  MonitorAPI.queryWaterLevel({}).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        let XData = [];
+        let data1 = []; //当前水位
+        let data2 = []; //设防水位
+        let data3 = []; //调蓄容积
+        res.data.forEach((element) => {
+          XData.push(element.lakeName);
+          data1.push(element.nowWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
+          data3.push(element.volume);
+        });
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = data3; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = data2;
+        AllData.chartData1.yAxis2_line_Name = "控制水位";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = data1;
+        AllData.chartData1.yAxis3_line_Name = "当前水位";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = null;
+        AllData.TjData1Unit = null;
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳  / 三级 当日水量分析 /四级当日水量分析
+const getData5 = () => {
+  MonitorAPI.waterRegionWaterYieldAnalysis({
+    waterRegionId: AllData.waterRegionCode,
+  }).then((res) => {
+    if (res && res.code == 200) {
+      let XData = [];
+      let YData1 = [];
+      let YData2 = [];
+      let YData3 = [];
+      res.data.forEach((element) => {
+        XData.push(element.waterRegionName); //X轴数据
+        YData1.push(element.siteNum); //点位数量
+        YData2.push(element.inWaterYield); //进水
+        YData3.push(element.outWaterYield); //出水
+      });
+      if (AllData.regionGrade == "three") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = YData2;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+
+        AllData.TjData2 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "接驳点数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳 上下游分析
+const getDataSXY = (row) => {
+  MonitorAPI.siteWaterYieldAnalysis({
+    stCode: row.stCode,
+    stType: row.pointType,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      AllData.SLFX = res.data;
+    }
+  });
+};
+const GetRightCharts = (row) => {
+  getEchart({
+    stType: row.pointType,
+    stCode: row.stCode,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      res.data.datas.forEach((element) => {
+        switch (element.dataKey) {
+          case "z":
+            AllData.chartDataRight.yAxis3 = element.datas;
+            break;
+          case "va":
+            AllData.chartDataRight.yAxis2 = element.datas;
+            break;
+          case "pn05":
+            AllData.chartDataRight.yAxis = element.datas;
+            break;
+        }
+      });
+      AllData.chartDataRight.xAxis = res.data.times;
+      AllData.refreshRight++;
+    }
+  });
+};
+
+// 一级界面的河湖水情
+// 清除本底分析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.TjData1 = null;
+  AllData.TjData1Unit = null;
+  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++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
+  AllData.chartData2 = {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+    y1_Unit: "km",
+  };
+  AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
+};
+onMounted(() => {
+  let initeGLTimer = setInterval(() => {
+    if (!newfiberMap) return;
+    bus.on("FenQuClick", FenQuClick);
+    getData1();
+    getData3();
+    getData7();
+    clearInterval(initeGLTimer);
+  }, 100);
+});
+
+onBeforeUnmount(() => {
+  bus.off("FenQuClick");
+});
+</script>
+
+<style lang="scss" scoped>
+.WSIndex {
+  .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;
+      }
+    }
+    .crumbs2 {
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
+    }
+  }
+  .modular1,
+  .modular2,
+  .modular3 {
+    width: 100%;
+    height: calc((100% - 50px) / 3);
+
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+    }
+  }
+
+  .modular1_right {
+    width: 100%;
+    height: calc(100% - 584px);
+  }
+  .modular2_right {
+    width: 100%;
+    height: 200px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: space-evenly;
+      align-items: center;
+
+      .SLList {
+        display: inline-block;
+        width: 33.33%;
+        height: 110px;
+        box-sizing: border-box;
+        padding: 15px 0;
+        background-image: url("@/assets/images/pictureOnMap/SLFX.png");
+
+        .SlList1P {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          .SlListNum {
+            font-family: DINPro;
+            font-weight: bold;
+            font-size: 22px;
+            color: #00fcff;
+          }
+          .SlListUnit {
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 16px;
+            color: #ccdfff;
+          }
+        }
+        .SlList2P {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #ffffff;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .modular3_right {
+    width: 100%;
+    height: 340px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+
+      .ListInfo100 {
+        width: 100%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      .ListInfo50 {
+        width: 50%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .ListInfo_label {
+        width: 75px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ccdfff;
+      }
+      .ListInfo_value {
+        width: calc(100% - 75px);
+        height: 40px;
+        line-height: 30px;
+        background: #0d2359;
+        border-radius: 6px;
+        border: 1px solid #0b9bff;
+        box-sizing: border-box;
+        padding: 5px 5px 5px 10px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #00fcff;
+      }
+    }
+  }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
+}
+</style>

diff --git a/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
new file mode 100644
index 0000000..45c2f01
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
@@ -0,0 +1,1305 @@
+<template>
+  <!-- 排水体系 -->
+  <div class="WSIndex">
+    <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"
+                ? "当日水量分析"
+                : ""
+            }}
+            {{ AllData.TjData1 ? `(${AllData.TjData1 + AllData.TjData1Unit})` : `` }}
+          </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"
+                ? "渍水风险点"
+                : ""
+            }}
+            {{ AllData.TjData2 ? `(${AllData.TjData2 + AllData.TjData2Unit})` : `` }}
+          </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"
+                ? "历史风险"
+                : ""
+            }}
+            {{ AllData.TjData3 ? `(${AllData.TjData3 + AllData.TjData3Unit})` : `` }}
+          </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="crumbs2">{{ AllData.ClicksiteName }}</span>
+        </div>
+        <div class="modular1_right">
+          <RightCharts
+            :data="AllData.chartDataRight"
+            :refresh="AllData.refreshRight"
+            v-if="AllData.refreshRight != 0"
+          ></RightCharts>
+        </div>
+        <div class="modular2_right">
+          <div class="leve2Title">水量分析</div>
+          <div class="modularBody">
+            <!-- 上游水量在接驳口时不展示 -->
+            <div v-if="!AllData.isJBK" class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.upstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">上游水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.siteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">当前站点水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.downstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">下游水量</div>
+            </div>
+          </div>
+        </div>
+        <div class="modular3_right">
+          <div class="leve2Title">管网本底</div>
+          <div class="modularBody">
+            <div class="ListInfo100">
+              <div class="ListInfo_label">类型:</div>
+              <div class="ListInfo_value">
+                {{
+                  AllData.GWBD.pointType == "YS"
+                    ? "雨水管网"
+                    : AllData.GWBD.pointType == "WS"
+                    ? "污水管网"
+                    : "--"
+                }}
+              </div>
+            </div>
+            <div class="ListInfo100">
+              <div class="ListInfo_label">编号:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">年份:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.buildTime ? AllData.GWBD.buildTime : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">管径:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineDiameter ? AllData.GWBD.pipelineDiameter : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">材质:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineTexture ? AllData.GWBD.pipelineTexture : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">缺陷类型:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.issueType ? AllData.GWBD.issueType : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">标段片区:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.roadName ? AllData.GWBD.roadName : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">末次运维:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.repairYear ? AllData.GWBD.repairYear : "--" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup name="WSIndex">
+import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
+import bus from "@/bus";
+// 引入接口
+import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
+import moment from "moment";
+import { getEchart } from "@/api/MonitorAssetsOnMap";
+
+// 引入echarts组件
+// 纵向立体柱状体以及标线和折现
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
+//横向的两组柱状图堆叠
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
+// 纵向的两条折现
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
+// 右侧面板接入
+import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
+// 面板控制组件
+import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
+const showPanel = ref(false); //面板展开收起
+const PanelChange = (val) => {
+  showPanel.value = val;
+};
+
+const AllData = reactive({
+  TypeID: "sewage",
+  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
+  regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
+  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
+  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: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh1: 0,
+  ClickData1: "dgtxg",
+  //   流域管网
+  chartData2: {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+  },
+  refresh2: 0,
+  ClickData2: "dgtxg",
+  //   河湖排口
+  chartData3: {
+    // 三级
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh3: 0,
+  ClickData3: "dgtxg",
+  GWBD: {},
+  SLFX: {},
+  isJBK: true, //是否为接驳口
+  chartDataRight: {
+    yAxis: [],
+    yAxis_Name: "降雨量",
+    yAxis2: [],
+    yAxis2_Name: "流速",
+    yAxis3: [],
+    yAxis3_Name: "水深",
+    xAxis: [],
+  },
+  refreshRight: 0,
+  ClicksiteName: "",
+  TjData1: 0,
+  TjData1Unit: "",
+  TjData2: 0,
+  TjData2Unit: "",
+  TjData3: 0,
+  TjData3Unit: "",
+});
+// 面包屑点击事件
+const MBClick = (item) => {
+  console.log(item);
+  AllData.RightShow = false;
+  AllData.RightShowID = "";
+  // 赋值需要进行echarts数据请求的数据
+  AllData.regionGrade = item.grade;
+  AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
+  clearEchartsData();
+  // debugger;
+  // 视角切换
+  if (item.sort == 0) {
+    // 回到默认图层
+    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
+    bus.emit(mapInitBusName);
+    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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData3();
+    getData7();
+  }
+  if (item.sort == 1) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData2();
+    getData3();
+  }
+  if (item.sort == 2) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 3) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    getData2();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 4) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+  }
+};
+// 分区点击切换
+const FenQuClick = (Row) => {
+  console.log("FenQuClick", Row.properties, Row.layerId);
+  //判断点击的是片区还是点位
+  if (Row.layerId == "排水分区") {
+    // 片区
+    AllData.RightShow = false;
+    AllData.RightShowID = false;
+    //   if (!!!Row.properties.pid) return;
+    //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
+    if (Row.properties.level == "4") return;
+    // 请求面包屑的数据
+    let params = {
+      regionType: AllData.TypeID,
+      id: Number(Row.properties.pid || Row.properties.w_id),
+    };
+    MonitorAPI.lineGrade(params).then((res) => {
+      if (res && res.code == 200) {
+        // 污水
+        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("五级");
+        }
+      }
+    });
+  } else if (Row.layerId == "point") {
+    // 点位
+    if (Row.properties.pointType == "rainwater_pipeline_quality") {
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
+      } else {
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
+      }
+    }
+  }
+};
+
+// 清除面包屑的数据
+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 = "摸排管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "two") {
+        // 二级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "问题管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "three") {
+        // 三级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+        AllData.TjData1 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData1Unit = "km";
+      }
+      //   数据赋值
+      AllData.chartData2.xAxis = res.data.regionNameList;
+      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
+      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
+      AllData.chartData2.yAxis2_Name = "总长度";
+      AllData.chartData2.y1_Unit = "km";
+      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; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = false; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = res.data.pipelinePointCount; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = res.data.pipelineRunRiskPointCount; //数据2
+        AllData.chartData1.yAxis2_bar_Name = "运行风险数"; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "";
+        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis3_line = null;
+        AllData.chartData1.yAxis3_line_Name = "";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = res.data.pipelinePointCount
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+      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++;
+        AllData.chartData3.xAxis = res.data.regionNameList;
+        AllData.chartData3.yAxis1_bar = null;
+        AllData.chartData3.yAxis1_bar_Name = "";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis2_line = res.data.fullPipeTimesList;
+        AllData.chartData3.yAxis2_line_Name = "满管";
+        AllData.chartData3.yAxis2_line_Index = 0;
+        AllData.chartData3.yAxis3_line = res.data.overFlowRiskTimesList;
+        AllData.chartData3.yAxis3_line_Name = "溢流";
+        AllData.chartData3.yAxis3_line_Index = 0;
+        AllData.chartData3.y1_Unit = "次"; //Y轴单位
+        AllData.chartData3.y2_Unit = "万方"; //Y轴单位
+        AllData.chartData3.y2_show = false;
+        AllData.refresh3++;
+        AllData.TjData3 = null;
+        AllData.TjData3Unit = null;
+      }
+    }
+  });
+};
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+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.inflowWater;
+        AllData.chartData3.yAxis1_bar_Name = "进水量";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis3_line = res.data.outletsNumber;
+        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++;
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "two") {
+        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;
+        // nextTick(() => {
+        //   debugger;
+        AllData.refresh3++;
+        // }, 1000);
+
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢杨  三级界面的渍水风险点/ 四级界面的渍水风险点
+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.xAxis = res.data.partitionName;
+        AllData.chartData3.yAxis1_bar = res.data.pointNumber;
+        AllData.chartData3.yAxis1_bar_Name = "渍水风险点";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "风险排口";
+        AllData.chartData3.yAxis3_line = null;
+        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 = false;
+        AllData.refresh3++;
+
+        AllData.TjData3 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        //
+        AllData.chartData2.xAxis = res.data.partitionName;
+        AllData.chartData2.yAxis = null;
+        AllData.chartData2.yAxis2 = res.data.pointNumber;
+        AllData.chartData2.yAxis2_Name = "数量";
+        AllData.chartData2.yAxis_Name = null;
+        AllData.chartData2.y1_Unit = "个";
+        AllData.refresh2++;
+
+        AllData.TjData2 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢扬 一级界面的河湖水情
+const getData7 = () => {
+  MonitorAPI.queryWaterLevel({}).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        let XData = [];
+        let data1 = []; //当前水位
+        let data2 = []; //设防水位
+        let data3 = []; //调蓄容积
+        res.data.forEach((element) => {
+          XData.push(element.lakeName);
+          data1.push(element.nowWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
+          data3.push(element.volume);
+        });
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = data3; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = data2;
+        AllData.chartData1.yAxis2_line_Name = "控制水位";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = data1;
+        AllData.chartData1.yAxis3_line_Name = "当前水位";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = null;
+        AllData.TjData1Unit = null;
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳  / 三级 当日水量分析 /四级当日水量分析
+const getData5 = () => {
+  MonitorAPI.waterRegionWaterYieldAnalysis({
+    waterRegionId: AllData.waterRegionCode,
+  }).then((res) => {
+    if (res && res.code == 200) {
+      let XData = [];
+      let YData1 = [];
+      let YData2 = [];
+      let YData3 = [];
+      res.data.forEach((element) => {
+        XData.push(element.waterRegionName); //X轴数据
+        YData1.push(element.siteNum); //点位数量
+        YData2.push(element.inWaterYield); //进水
+        YData3.push(element.outWaterYield); //出水
+      });
+      if (AllData.regionGrade == "three") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = YData2;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+
+        AllData.TjData2 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "接驳点数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳 上下游分析
+const getDataSXY = (row) => {
+  MonitorAPI.siteWaterYieldAnalysis({
+    stCode: row.stCode,
+    stType: row.pointType,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      AllData.SLFX = res.data;
+    }
+  });
+};
+const GetRightCharts = (row) => {
+  getEchart({
+    stType: row.pointType,
+    stCode: row.stCode,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      res.data.datas.forEach((element) => {
+        switch (element.dataKey) {
+          case "z":
+            AllData.chartDataRight.yAxis3 = element.datas;
+            break;
+          case "va":
+            AllData.chartDataRight.yAxis2 = element.datas;
+            break;
+          case "pn05":
+            AllData.chartDataRight.yAxis = element.datas;
+            break;
+        }
+      });
+      AllData.chartDataRight.xAxis = res.data.times;
+      AllData.refreshRight++;
+    }
+  });
+};
+
+// 一级界面的河湖水情
+// 清除本底分析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.TjData1 = null;
+  AllData.TjData1Unit = null;
+  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++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
+  AllData.chartData2 = {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+    y1_Unit: "km",
+  };
+  AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
+};
+onMounted(() => {
+  let initeGLTimer = setInterval(() => {
+    if (!newfiberMap) return;
+    bus.on("FenQuClick", FenQuClick);
+    getData1();
+    getData3();
+    getData7();
+    clearInterval(initeGLTimer);
+  }, 100);
+});
+
+onBeforeUnmount(() => {
+  bus.off("FenQuClick");
+});
+</script>
+
+<style lang="scss" scoped>
+.WSIndex {
+  .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;
+      }
+    }
+    .crumbs2 {
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
+    }
+  }
+  .modular1,
+  .modular2,
+  .modular3 {
+    width: 100%;
+    height: calc((100% - 50px) / 3);
+
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+    }
+  }
+
+  .modular1_right {
+    width: 100%;
+    height: calc(100% - 584px);
+  }
+  .modular2_right {
+    width: 100%;
+    height: 200px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: space-evenly;
+      align-items: center;
+
+      .SLList {
+        display: inline-block;
+        width: 33.33%;
+        height: 110px;
+        box-sizing: border-box;
+        padding: 15px 0;
+        background-image: url("@/assets/images/pictureOnMap/SLFX.png");
+
+        .SlList1P {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          .SlListNum {
+            font-family: DINPro;
+            font-weight: bold;
+            font-size: 22px;
+            color: #00fcff;
+          }
+          .SlListUnit {
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 16px;
+            color: #ccdfff;
+          }
+        }
+        .SlList2P {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #ffffff;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .modular3_right {
+    width: 100%;
+    height: 340px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+
+      .ListInfo100 {
+        width: 100%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      .ListInfo50 {
+        width: 50%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .ListInfo_label {
+        width: 75px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ccdfff;
+      }
+      .ListInfo_value {
+        width: calc(100% - 75px);
+        height: 40px;
+        line-height: 30px;
+        background: #0d2359;
+        border-radius: 6px;
+        border: 1px solid #0b9bff;
+        box-sizing: border-box;
+        padding: 5px 5px 5px 10px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #00fcff;
+      }
+    }
+  }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index 6f1cdc3..51becf8 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -559,22 +559,13 @@
     };
     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 = ""; //全称
-        }
+        // 雨水
+        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) => {

diff --git a/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
new file mode 100644
index 0000000..45c2f01
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
@@ -0,0 +1,1305 @@
+<template>
+  <!-- 排水体系 -->
+  <div class="WSIndex">
+    <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"
+                ? "当日水量分析"
+                : ""
+            }}
+            {{ AllData.TjData1 ? `(${AllData.TjData1 + AllData.TjData1Unit})` : `` }}
+          </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"
+                ? "渍水风险点"
+                : ""
+            }}
+            {{ AllData.TjData2 ? `(${AllData.TjData2 + AllData.TjData2Unit})` : `` }}
+          </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"
+                ? "历史风险"
+                : ""
+            }}
+            {{ AllData.TjData3 ? `(${AllData.TjData3 + AllData.TjData3Unit})` : `` }}
+          </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="crumbs2">{{ AllData.ClicksiteName }}</span>
+        </div>
+        <div class="modular1_right">
+          <RightCharts
+            :data="AllData.chartDataRight"
+            :refresh="AllData.refreshRight"
+            v-if="AllData.refreshRight != 0"
+          ></RightCharts>
+        </div>
+        <div class="modular2_right">
+          <div class="leve2Title">水量分析</div>
+          <div class="modularBody">
+            <!-- 上游水量在接驳口时不展示 -->
+            <div v-if="!AllData.isJBK" class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.upstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">上游水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.siteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">当前站点水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.downstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">下游水量</div>
+            </div>
+          </div>
+        </div>
+        <div class="modular3_right">
+          <div class="leve2Title">管网本底</div>
+          <div class="modularBody">
+            <div class="ListInfo100">
+              <div class="ListInfo_label">类型:</div>
+              <div class="ListInfo_value">
+                {{
+                  AllData.GWBD.pointType == "YS"
+                    ? "雨水管网"
+                    : AllData.GWBD.pointType == "WS"
+                    ? "污水管网"
+                    : "--"
+                }}
+              </div>
+            </div>
+            <div class="ListInfo100">
+              <div class="ListInfo_label">编号:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">年份:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.buildTime ? AllData.GWBD.buildTime : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">管径:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineDiameter ? AllData.GWBD.pipelineDiameter : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">材质:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineTexture ? AllData.GWBD.pipelineTexture : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">缺陷类型:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.issueType ? AllData.GWBD.issueType : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">标段片区:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.roadName ? AllData.GWBD.roadName : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">末次运维:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.repairYear ? AllData.GWBD.repairYear : "--" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup name="WSIndex">
+import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
+import bus from "@/bus";
+// 引入接口
+import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
+import moment from "moment";
+import { getEchart } from "@/api/MonitorAssetsOnMap";
+
+// 引入echarts组件
+// 纵向立体柱状体以及标线和折现
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
+//横向的两组柱状图堆叠
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
+// 纵向的两条折现
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
+// 右侧面板接入
+import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
+// 面板控制组件
+import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
+const showPanel = ref(false); //面板展开收起
+const PanelChange = (val) => {
+  showPanel.value = val;
+};
+
+const AllData = reactive({
+  TypeID: "sewage",
+  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
+  regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
+  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
+  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: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh1: 0,
+  ClickData1: "dgtxg",
+  //   流域管网
+  chartData2: {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+  },
+  refresh2: 0,
+  ClickData2: "dgtxg",
+  //   河湖排口
+  chartData3: {
+    // 三级
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh3: 0,
+  ClickData3: "dgtxg",
+  GWBD: {},
+  SLFX: {},
+  isJBK: true, //是否为接驳口
+  chartDataRight: {
+    yAxis: [],
+    yAxis_Name: "降雨量",
+    yAxis2: [],
+    yAxis2_Name: "流速",
+    yAxis3: [],
+    yAxis3_Name: "水深",
+    xAxis: [],
+  },
+  refreshRight: 0,
+  ClicksiteName: "",
+  TjData1: 0,
+  TjData1Unit: "",
+  TjData2: 0,
+  TjData2Unit: "",
+  TjData3: 0,
+  TjData3Unit: "",
+});
+// 面包屑点击事件
+const MBClick = (item) => {
+  console.log(item);
+  AllData.RightShow = false;
+  AllData.RightShowID = "";
+  // 赋值需要进行echarts数据请求的数据
+  AllData.regionGrade = item.grade;
+  AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
+  clearEchartsData();
+  // debugger;
+  // 视角切换
+  if (item.sort == 0) {
+    // 回到默认图层
+    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
+    bus.emit(mapInitBusName);
+    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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData3();
+    getData7();
+  }
+  if (item.sort == 1) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData2();
+    getData3();
+  }
+  if (item.sort == 2) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 3) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    getData2();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 4) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+  }
+};
+// 分区点击切换
+const FenQuClick = (Row) => {
+  console.log("FenQuClick", Row.properties, Row.layerId);
+  //判断点击的是片区还是点位
+  if (Row.layerId == "排水分区") {
+    // 片区
+    AllData.RightShow = false;
+    AllData.RightShowID = false;
+    //   if (!!!Row.properties.pid) return;
+    //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
+    if (Row.properties.level == "4") return;
+    // 请求面包屑的数据
+    let params = {
+      regionType: AllData.TypeID,
+      id: Number(Row.properties.pid || Row.properties.w_id),
+    };
+    MonitorAPI.lineGrade(params).then((res) => {
+      if (res && res.code == 200) {
+        // 污水
+        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("五级");
+        }
+      }
+    });
+  } else if (Row.layerId == "point") {
+    // 点位
+    if (Row.properties.pointType == "rainwater_pipeline_quality") {
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
+      } else {
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
+      }
+    }
+  }
+};
+
+// 清除面包屑的数据
+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 = "摸排管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "two") {
+        // 二级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "问题管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "three") {
+        // 三级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+        AllData.TjData1 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData1Unit = "km";
+      }
+      //   数据赋值
+      AllData.chartData2.xAxis = res.data.regionNameList;
+      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
+      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
+      AllData.chartData2.yAxis2_Name = "总长度";
+      AllData.chartData2.y1_Unit = "km";
+      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; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = false; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = res.data.pipelinePointCount; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = res.data.pipelineRunRiskPointCount; //数据2
+        AllData.chartData1.yAxis2_bar_Name = "运行风险数"; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "";
+        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis3_line = null;
+        AllData.chartData1.yAxis3_line_Name = "";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = res.data.pipelinePointCount
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+      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++;
+        AllData.chartData3.xAxis = res.data.regionNameList;
+        AllData.chartData3.yAxis1_bar = null;
+        AllData.chartData3.yAxis1_bar_Name = "";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis2_line = res.data.fullPipeTimesList;
+        AllData.chartData3.yAxis2_line_Name = "满管";
+        AllData.chartData3.yAxis2_line_Index = 0;
+        AllData.chartData3.yAxis3_line = res.data.overFlowRiskTimesList;
+        AllData.chartData3.yAxis3_line_Name = "溢流";
+        AllData.chartData3.yAxis3_line_Index = 0;
+        AllData.chartData3.y1_Unit = "次"; //Y轴单位
+        AllData.chartData3.y2_Unit = "万方"; //Y轴单位
+        AllData.chartData3.y2_show = false;
+        AllData.refresh3++;
+        AllData.TjData3 = null;
+        AllData.TjData3Unit = null;
+      }
+    }
+  });
+};
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+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.inflowWater;
+        AllData.chartData3.yAxis1_bar_Name = "进水量";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis3_line = res.data.outletsNumber;
+        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++;
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "two") {
+        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;
+        // nextTick(() => {
+        //   debugger;
+        AllData.refresh3++;
+        // }, 1000);
+
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢杨  三级界面的渍水风险点/ 四级界面的渍水风险点
+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.xAxis = res.data.partitionName;
+        AllData.chartData3.yAxis1_bar = res.data.pointNumber;
+        AllData.chartData3.yAxis1_bar_Name = "渍水风险点";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "风险排口";
+        AllData.chartData3.yAxis3_line = null;
+        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 = false;
+        AllData.refresh3++;
+
+        AllData.TjData3 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        //
+        AllData.chartData2.xAxis = res.data.partitionName;
+        AllData.chartData2.yAxis = null;
+        AllData.chartData2.yAxis2 = res.data.pointNumber;
+        AllData.chartData2.yAxis2_Name = "数量";
+        AllData.chartData2.yAxis_Name = null;
+        AllData.chartData2.y1_Unit = "个";
+        AllData.refresh2++;
+
+        AllData.TjData2 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢扬 一级界面的河湖水情
+const getData7 = () => {
+  MonitorAPI.queryWaterLevel({}).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        let XData = [];
+        let data1 = []; //当前水位
+        let data2 = []; //设防水位
+        let data3 = []; //调蓄容积
+        res.data.forEach((element) => {
+          XData.push(element.lakeName);
+          data1.push(element.nowWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
+          data3.push(element.volume);
+        });
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = data3; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = data2;
+        AllData.chartData1.yAxis2_line_Name = "控制水位";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = data1;
+        AllData.chartData1.yAxis3_line_Name = "当前水位";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = null;
+        AllData.TjData1Unit = null;
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳  / 三级 当日水量分析 /四级当日水量分析
+const getData5 = () => {
+  MonitorAPI.waterRegionWaterYieldAnalysis({
+    waterRegionId: AllData.waterRegionCode,
+  }).then((res) => {
+    if (res && res.code == 200) {
+      let XData = [];
+      let YData1 = [];
+      let YData2 = [];
+      let YData3 = [];
+      res.data.forEach((element) => {
+        XData.push(element.waterRegionName); //X轴数据
+        YData1.push(element.siteNum); //点位数量
+        YData2.push(element.inWaterYield); //进水
+        YData3.push(element.outWaterYield); //出水
+      });
+      if (AllData.regionGrade == "three") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = YData2;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+
+        AllData.TjData2 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "接驳点数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳 上下游分析
+const getDataSXY = (row) => {
+  MonitorAPI.siteWaterYieldAnalysis({
+    stCode: row.stCode,
+    stType: row.pointType,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      AllData.SLFX = res.data;
+    }
+  });
+};
+const GetRightCharts = (row) => {
+  getEchart({
+    stType: row.pointType,
+    stCode: row.stCode,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      res.data.datas.forEach((element) => {
+        switch (element.dataKey) {
+          case "z":
+            AllData.chartDataRight.yAxis3 = element.datas;
+            break;
+          case "va":
+            AllData.chartDataRight.yAxis2 = element.datas;
+            break;
+          case "pn05":
+            AllData.chartDataRight.yAxis = element.datas;
+            break;
+        }
+      });
+      AllData.chartDataRight.xAxis = res.data.times;
+      AllData.refreshRight++;
+    }
+  });
+};
+
+// 一级界面的河湖水情
+// 清除本底分析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.TjData1 = null;
+  AllData.TjData1Unit = null;
+  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++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
+  AllData.chartData2 = {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+    y1_Unit: "km",
+  };
+  AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
+};
+onMounted(() => {
+  let initeGLTimer = setInterval(() => {
+    if (!newfiberMap) return;
+    bus.on("FenQuClick", FenQuClick);
+    getData1();
+    getData3();
+    getData7();
+    clearInterval(initeGLTimer);
+  }, 100);
+});
+
+onBeforeUnmount(() => {
+  bus.off("FenQuClick");
+});
+</script>
+
+<style lang="scss" scoped>
+.WSIndex {
+  .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;
+      }
+    }
+    .crumbs2 {
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
+    }
+  }
+  .modular1,
+  .modular2,
+  .modular3 {
+    width: 100%;
+    height: calc((100% - 50px) / 3);
+
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+    }
+  }
+
+  .modular1_right {
+    width: 100%;
+    height: calc(100% - 584px);
+  }
+  .modular2_right {
+    width: 100%;
+    height: 200px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: space-evenly;
+      align-items: center;
+
+      .SLList {
+        display: inline-block;
+        width: 33.33%;
+        height: 110px;
+        box-sizing: border-box;
+        padding: 15px 0;
+        background-image: url("@/assets/images/pictureOnMap/SLFX.png");
+
+        .SlList1P {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          .SlListNum {
+            font-family: DINPro;
+            font-weight: bold;
+            font-size: 22px;
+            color: #00fcff;
+          }
+          .SlListUnit {
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 16px;
+            color: #ccdfff;
+          }
+        }
+        .SlList2P {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #ffffff;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .modular3_right {
+    width: 100%;
+    height: 340px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+
+      .ListInfo100 {
+        width: 100%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      .ListInfo50 {
+        width: 50%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .ListInfo_label {
+        width: 75px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ccdfff;
+      }
+      .ListInfo_value {
+        width: calc(100% - 75px);
+        height: 40px;
+        line-height: 30px;
+        background: #0d2359;
+        border-radius: 6px;
+        border: 1px solid #0b9bff;
+        box-sizing: border-box;
+        padding: 5px 5px 5px 10px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #00fcff;
+      }
+    }
+  }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index 6f1cdc3..51becf8 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -559,22 +559,13 @@
     };
     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 = ""; //全称
-        }
+        // 雨水
+        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) => {
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
index 662d24f..e8e520d 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+  <div id="YSIndex_right"></div>
 </template>
 
 <script setup name="YSIndex_right">

diff --git a/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
new file mode 100644
index 0000000..45c2f01
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/WSIndex.vue
@@ -0,0 +1,1305 @@
+<template>
+  <!-- 排水体系 -->
+  <div class="WSIndex">
+    <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"
+                ? "当日水量分析"
+                : ""
+            }}
+            {{ AllData.TjData1 ? `(${AllData.TjData1 + AllData.TjData1Unit})` : `` }}
+          </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"
+                ? "渍水风险点"
+                : ""
+            }}
+            {{ AllData.TjData2 ? `(${AllData.TjData2 + AllData.TjData2Unit})` : `` }}
+          </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"
+                ? "历史风险"
+                : ""
+            }}
+            {{ AllData.TjData3 ? `(${AllData.TjData3 + AllData.TjData3Unit})` : `` }}
+          </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="crumbs2">{{ AllData.ClicksiteName }}</span>
+        </div>
+        <div class="modular1_right">
+          <RightCharts
+            :data="AllData.chartDataRight"
+            :refresh="AllData.refreshRight"
+            v-if="AllData.refreshRight != 0"
+          ></RightCharts>
+        </div>
+        <div class="modular2_right">
+          <div class="leve2Title">水量分析</div>
+          <div class="modularBody">
+            <!-- 上游水量在接驳口时不展示 -->
+            <div v-if="!AllData.isJBK" class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.upstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">上游水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.siteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">当前站点水量</div>
+            </div>
+            <div class="SLList">
+              <div class="SlList1P">
+                <span class="SlListNum">{{ AllData.SLFX.downstreamSiteWaterYield }}</span>
+                <span class="SlListUnit">万吨</span>
+              </div>
+              <div class="SlList2P">下游水量</div>
+            </div>
+          </div>
+        </div>
+        <div class="modular3_right">
+          <div class="leve2Title">管网本底</div>
+          <div class="modularBody">
+            <div class="ListInfo100">
+              <div class="ListInfo_label">类型:</div>
+              <div class="ListInfo_value">
+                {{
+                  AllData.GWBD.pointType == "YS"
+                    ? "雨水管网"
+                    : AllData.GWBD.pointType == "WS"
+                    ? "污水管网"
+                    : "--"
+                }}
+              </div>
+            </div>
+            <div class="ListInfo100">
+              <div class="ListInfo_label">编号:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">年份:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.buildTime ? AllData.GWBD.buildTime : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">管径:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineDiameter ? AllData.GWBD.pipelineDiameter : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">材质:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.pipelineTexture ? AllData.GWBD.pipelineTexture : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">缺陷类型:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.issueType ? AllData.GWBD.issueType : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">标段片区:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.roadName ? AllData.GWBD.roadName : "--" }}
+              </div>
+            </div>
+            <div class="ListInfo50">
+              <div class="ListInfo_label">末次运维:</div>
+              <div class="ListInfo_value">
+                {{ AllData.GWBD.repairYear ? AllData.GWBD.repairYear : "--" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    <Transition name="fade_right">
+      <div
+        :class="['moduleBox', 'moduleBoxRight']"
+        v-if="
+          !showPanel &&
+          !AllData.RightShow &&
+          (AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
+        "
+      >
+        <div class="CrumbesTitle">
+          <span class="crumbs2">港渠统计</span>
+        </div>
+        <div class="modularRight2">
+          <YSRight :waterRegionCode="AllData.waterRegionCode"></YSRight>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup name="WSIndex">
+import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
+import bus from "@/bus";
+// 引入接口
+import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
+import moment from "moment";
+import { getEchart } from "@/api/MonitorAssetsOnMap";
+
+// 引入echarts组件
+// 纵向立体柱状体以及标线和折现
+import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
+//横向的两组柱状图堆叠
+import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
+// 纵向的两条折现
+import DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
+// 右侧面板接入
+import RightCharts from "./components/RightCharts.vue";
+import YSRight from "./YSIndex_right.vue";
+// 面板控制组件
+import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
+const showPanel = ref(false); //面板展开收起
+const PanelChange = (val) => {
+  showPanel.value = val;
+};
+
+const AllData = reactive({
+  TypeID: "sewage",
+  regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
+  regionName: "", //分区名称
+  waterRegionCode: "", //分区编号
+  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
+  RightShowID: "",
+  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: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh1: 0,
+  ClickData1: "dgtxg",
+  //   流域管网
+  chartData2: {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+  },
+  refresh2: 0,
+  ClickData2: "dgtxg",
+  //   河湖排口
+  chartData3: {
+    // 三级
+    xAxis: [], //X轴数据
+    y1_Unit: "", //Y轴单位
+    y2_Unit: "", //Y轴单位
+    y2_show: false,
+    yAxis1_bar: [], //数据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,
+  },
+  refresh3: 0,
+  ClickData3: "dgtxg",
+  GWBD: {},
+  SLFX: {},
+  isJBK: true, //是否为接驳口
+  chartDataRight: {
+    yAxis: [],
+    yAxis_Name: "降雨量",
+    yAxis2: [],
+    yAxis2_Name: "流速",
+    yAxis3: [],
+    yAxis3_Name: "水深",
+    xAxis: [],
+  },
+  refreshRight: 0,
+  ClicksiteName: "",
+  TjData1: 0,
+  TjData1Unit: "",
+  TjData2: 0,
+  TjData2Unit: "",
+  TjData3: 0,
+  TjData3Unit: "",
+});
+// 面包屑点击事件
+const MBClick = (item) => {
+  console.log(item);
+  AllData.RightShow = false;
+  AllData.RightShowID = "";
+  // 赋值需要进行echarts数据请求的数据
+  AllData.regionGrade = item.grade;
+  AllData.regionName = item.Name;
+  AllData.waterRegionCode = item.id;
+  clearEchartsData();
+  // debugger;
+  // 视角切换
+  if (item.sort == 0) {
+    // 回到默认图层
+    newfiberMap.map.easeTo(newfiberMap.config_.params.init);
+    bus.emit(mapInitBusName);
+    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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData3();
+    getData7();
+  }
+  if (item.sort == 1) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      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,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData2();
+    getData3();
+  }
+  if (item.sort == 2) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[3] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "four",
+      sort: 3,
+    };
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    // 切换时进行数据请求,默认视角请求
+    getData1();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 3) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+    AllData.TitleName[4] = {
+      abbreviation: "",
+      Name: "",
+      id: "",
+      grade: "five",
+      sort: 4,
+    };
+
+    getData2();
+    getData4();
+    getData5();
+  }
+  if (item.sort == 4) {
+    bus.emit("panelDataToMap", {
+      name: item.Name,
+      id: item.id,
+    });
+  }
+};
+// 分区点击切换
+const FenQuClick = (Row) => {
+  console.log("FenQuClick", Row.properties, Row.layerId);
+  //判断点击的是片区还是点位
+  if (Row.layerId == "排水分区") {
+    // 片区
+    AllData.RightShow = false;
+    AllData.RightShowID = false;
+    //   if (!!!Row.properties.pid) return;
+    //   原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
+    if (Row.properties.level == "4") return;
+    // 请求面包屑的数据
+    let params = {
+      regionType: AllData.TypeID,
+      id: Number(Row.properties.pid || Row.properties.w_id),
+    };
+    MonitorAPI.lineGrade(params).then((res) => {
+      if (res && res.code == 200) {
+        // 污水
+        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("五级");
+        }
+      }
+    });
+  } else if (Row.layerId == "point") {
+    // 点位
+    if (Row.properties.pointType == "rainwater_pipeline_quality") {
+      if (AllData.RightShowID == Row.properties.id) {
+        // 说明是同样的一个点点了两次,所以进行关闭
+        AllData.RightShow = false;
+        AllData.RightShowID = "";
+      } else {
+        AllData.ClicksiteName = Row.properties.name;
+        AllData.RightShow = true;
+        AllData.RightShowID = Row.properties.id;
+        //   Row.properties.wellCode
+        //   获取管网信息
+        MonitorAPI.pipelinePointPage({
+          pointNumber: Row.properties.wellCode,
+        }).then((res) => {
+          if (res && res.code == 200) {
+            AllData.GWBD = res.data[0];
+          }
+        });
+        //   根据type 判断是管井还是接驳口
+        if (Row.properties.type == "rainwater_pipeline_quality_area1") {
+          // 接驳口
+          AllData.isJBK = true;
+        } else {
+          // 管井或其他
+          AllData.isJBK = false;
+        }
+        //   上下游水量分析
+        getDataSXY(Row.properties);
+        //   获取echarts数据
+        //   setTimeout(() => {
+        AllData.chartDataRight = {
+          yAxis: [],
+          yAxis_Name: "降雨量",
+          yAxis2: [],
+          yAxis2_Name: "流速",
+          yAxis3: [],
+          yAxis3_Name: "水深",
+          xAxis: [],
+        };
+        AllData.refreshRight = 0;
+        GetRightCharts(Row.properties);
+        //   }, 900);
+      }
+    }
+  }
+};
+
+// 清除面包屑的数据
+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 = "摸排管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "two") {
+        // 二级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "问题管网";
+        AllData.TjData2 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData2Unit = "km";
+      }
+      if (AllData.regionGrade == "three") {
+        // 三级Ecahrts 名称
+        AllData.chartData2.yAxis_Name = "摸排管网";
+        AllData.TjData1 = res.data.pipelineLengthList
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(2);
+        AllData.TjData1Unit = "km";
+      }
+      //   数据赋值
+      AllData.chartData2.xAxis = res.data.regionNameList;
+      AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
+      AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
+      AllData.chartData2.yAxis2_Name = "总长度";
+      AllData.chartData2.y1_Unit = "km";
+      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; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = false; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = res.data.pipelinePointCount; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = res.data.pipelineRunRiskPointCount; //数据2
+        AllData.chartData1.yAxis2_bar_Name = "运行风险数"; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "";
+        AllData.chartData1.yAxis2_line_Index = 0;
+        AllData.chartData1.yAxis3_line = null;
+        AllData.chartData1.yAxis3_line_Name = "";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = res.data.pipelinePointCount
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+      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++;
+        AllData.chartData3.xAxis = res.data.regionNameList;
+        AllData.chartData3.yAxis1_bar = null;
+        AllData.chartData3.yAxis1_bar_Name = "";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis2_line = res.data.fullPipeTimesList;
+        AllData.chartData3.yAxis2_line_Name = "满管";
+        AllData.chartData3.yAxis2_line_Index = 0;
+        AllData.chartData3.yAxis3_line = res.data.overFlowRiskTimesList;
+        AllData.chartData3.yAxis3_line_Name = "溢流";
+        AllData.chartData3.yAxis3_line_Index = 0;
+        AllData.chartData3.y1_Unit = "次"; //Y轴单位
+        AllData.chartData3.y2_Unit = "万方"; //Y轴单位
+        AllData.chartData3.y2_show = false;
+        AllData.refresh3++;
+        AllData.TjData3 = null;
+        AllData.TjData3Unit = null;
+      }
+    }
+  });
+};
+
+// 获取数据 谢杨  一级界面的河湖排口/ 二级界面的河湖排口
+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.inflowWater;
+        AllData.chartData3.yAxis1_bar_Name = "进水量";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "";
+        AllData.chartData3.yAxis3_line = res.data.outletsNumber;
+        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++;
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "two") {
+        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;
+        // nextTick(() => {
+        //   debugger;
+        AllData.refresh3++;
+        // }, 1000);
+
+        AllData.TjData3 = res.data.outletsNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢杨  三级界面的渍水风险点/ 四级界面的渍水风险点
+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.xAxis = res.data.partitionName;
+        AllData.chartData3.yAxis1_bar = res.data.pointNumber;
+        AllData.chartData3.yAxis1_bar_Name = "渍水风险点";
+        AllData.chartData3.yAxis2_bar = null;
+        AllData.chartData3.yAxis2_bar_Name = "风险排口";
+        AllData.chartData3.yAxis3_line = null;
+        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 = false;
+        AllData.refresh3++;
+
+        AllData.TjData3 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData3Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        //
+        AllData.chartData2.xAxis = res.data.partitionName;
+        AllData.chartData2.yAxis = null;
+        AllData.chartData2.yAxis2 = res.data.pointNumber;
+        AllData.chartData2.yAxis2_Name = "数量";
+        AllData.chartData2.yAxis_Name = null;
+        AllData.chartData2.y1_Unit = "个";
+        AllData.refresh2++;
+
+        AllData.TjData2 = res.data.pointNumber
+          .reduce((accu, curren) => Number(accu) + Number(curren))
+          .toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 谢扬 一级界面的河湖水情
+const getData7 = () => {
+  MonitorAPI.queryWaterLevel({}).then((res) => {
+    if (res && res.code == 200) {
+      if (AllData.regionGrade == "one") {
+        let XData = [];
+        let data1 = []; //当前水位
+        let data2 = []; //设防水位
+        let data3 = []; //调蓄容积
+        res.data.forEach((element) => {
+          XData.push(element.lakeName);
+          data1.push(element.nowWaterlevel);
+          data2.push(element.bestPromitWaterlevel);
+          data3.push(element.volume);
+        });
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "万方"; //Y轴单位
+        AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = data3; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = data2;
+        AllData.chartData1.yAxis2_line_Name = "控制水位";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = data1;
+        AllData.chartData1.yAxis3_line_Name = "当前水位";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = null;
+        AllData.TjData1Unit = null;
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳  / 三级 当日水量分析 /四级当日水量分析
+const getData5 = () => {
+  MonitorAPI.waterRegionWaterYieldAnalysis({
+    waterRegionId: AllData.waterRegionCode,
+  }).then((res) => {
+    if (res && res.code == 200) {
+      let XData = [];
+      let YData1 = [];
+      let YData2 = [];
+      let YData3 = [];
+      res.data.forEach((element) => {
+        XData.push(element.waterRegionName); //X轴数据
+        YData1.push(element.siteNum); //点位数量
+        YData2.push(element.inWaterYield); //进水
+        YData3.push(element.outWaterYield); //出水
+      });
+      if (AllData.regionGrade == "three") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = YData2;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+
+        AllData.TjData2 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData2Unit = "个";
+      }
+      if (AllData.regionGrade == "four") {
+        AllData.chartData1.xAxis = XData; //X轴数据
+        AllData.chartData1.y1_Unit = "个"; //Y轴单位
+        AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
+        AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
+        AllData.chartData1.yAxis1_bar = YData1; //数据1
+        AllData.chartData1.yAxis1_bar_Name = "接驳点数"; //数据1的名称
+        AllData.chartData1.yAxis1_bar_index = 0;
+        AllData.chartData1.yAxis2_bar = null; //数据2
+        AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
+        AllData.chartData1.yAxis2_bar_index = 0;
+        AllData.chartData1.yAxis2_line = null;
+        AllData.chartData1.yAxis2_line_Name = "进水";
+        AllData.chartData1.yAxis2_line_Index = 1;
+        AllData.chartData1.yAxis3_line = YData3;
+        AllData.chartData1.yAxis3_line_Name = "出水";
+        AllData.chartData1.yAxis3_line_Index = 1;
+        AllData.refresh1++;
+        AllData.TjData1 = YData1.reduce(
+          (accu, curren) => Number(accu) + Number(curren)
+        ).toFixed(0);
+        AllData.TjData1Unit = "个";
+      }
+    }
+  });
+};
+// 获取数据 刘芳阳 上下游分析
+const getDataSXY = (row) => {
+  MonitorAPI.siteWaterYieldAnalysis({
+    stCode: row.stCode,
+    stType: row.pointType,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      AllData.SLFX = res.data;
+    }
+  });
+};
+const GetRightCharts = (row) => {
+  getEchart({
+    stType: row.pointType,
+    stCode: row.stCode,
+    start: moment().format("YYYY-MM-DD") + " 00:00:00",
+    end: moment().format("YYYY-MM-DD") + " 23:59:59",
+  }).then((res) => {
+    if (res && res.code == 200) {
+      res.data.datas.forEach((element) => {
+        switch (element.dataKey) {
+          case "z":
+            AllData.chartDataRight.yAxis3 = element.datas;
+            break;
+          case "va":
+            AllData.chartDataRight.yAxis2 = element.datas;
+            break;
+          case "pn05":
+            AllData.chartDataRight.yAxis = element.datas;
+            break;
+        }
+      });
+      AllData.chartDataRight.xAxis = res.data.times;
+      AllData.refreshRight++;
+    }
+  });
+};
+
+// 一级界面的河湖水情
+// 清除本底分析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.TjData1 = null;
+  AllData.TjData1Unit = null;
+  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++;
+  AllData.TjData3 = null;
+  AllData.TjData3Unit = null;
+  AllData.chartData2 = {
+    xAxis: [],
+    yAxis: [],
+    yAxis2: [],
+    yAxis_Name: "",
+    yAxis2_Name: "",
+    y1_Unit: "km",
+  };
+  AllData.refresh2++;
+  AllData.TjData2 = null;
+  AllData.TjData2Unit = null;
+};
+onMounted(() => {
+  let initeGLTimer = setInterval(() => {
+    if (!newfiberMap) return;
+    bus.on("FenQuClick", FenQuClick);
+    getData1();
+    getData3();
+    getData7();
+    clearInterval(initeGLTimer);
+  }, 100);
+});
+
+onBeforeUnmount(() => {
+  bus.off("FenQuClick");
+});
+</script>
+
+<style lang="scss" scoped>
+.WSIndex {
+  .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;
+      }
+    }
+    .crumbs2 {
+      font-weight: bold;
+      font-size: 20px;
+      color: #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
+      white-space: nowrap; /* 限制不允许换行 */
+    }
+  }
+  .modular1,
+  .modular2,
+  .modular3 {
+    width: 100%;
+    height: calc((100% - 50px) / 3);
+
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+    }
+  }
+
+  .modular1_right {
+    width: 100%;
+    height: calc(100% - 584px);
+  }
+  .modular2_right {
+    width: 100%;
+    height: 200px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: space-evenly;
+      align-items: center;
+
+      .SLList {
+        display: inline-block;
+        width: 33.33%;
+        height: 110px;
+        box-sizing: border-box;
+        padding: 15px 0;
+        background-image: url("@/assets/images/pictureOnMap/SLFX.png");
+
+        .SlList1P {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          .SlListNum {
+            font-family: DINPro;
+            font-weight: bold;
+            font-size: 22px;
+            color: #00fcff;
+          }
+          .SlListUnit {
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 16px;
+            color: #ccdfff;
+          }
+        }
+        .SlList2P {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #ffffff;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .modular3_right {
+    width: 100%;
+    height: 340px;
+    .modularBody {
+      width: 100%;
+      height: calc(100% - 50px);
+
+      .ListInfo100 {
+        width: 100%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      .ListInfo50 {
+        width: 50%;
+        height: 40px;
+        float: left;
+        margin-top: 15px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .ListInfo_label {
+        width: 75px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ccdfff;
+      }
+      .ListInfo_value {
+        width: calc(100% - 75px);
+        height: 40px;
+        line-height: 30px;
+        background: #0d2359;
+        border-radius: 6px;
+        border: 1px solid #0b9bff;
+        box-sizing: border-box;
+        padding: 5px 5px 5px 10px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #00fcff;
+      }
+    }
+  }
+
+  .modularRight2 {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: #0d2359;
+  }
+}
+</style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
index 6f1cdc3..51becf8 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue
@@ -559,22 +559,13 @@
     };
     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 = ""; //全称
-        }
+        // 雨水
+        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) => {
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
index 662d24f..e8e520d 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="YSIndex_right">姗姐姗姐姗姐</div>
+  <div id="YSIndex_right"></div>
 </template>
 
 <script setup name="YSIndex_right">
diff --git a/src/views/pictureOnMap/page/DrainageSystem/index.vue b/src/views/pictureOnMap/page/DrainageSystem/index.vue
index e347b50..d0f2fb0 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/index.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/index.vue
@@ -13,6 +13,7 @@
       </div>
     </div>
     <YSIndex v-if="AllData.TypeID == 'rain'"></YSIndex>
+    <WSIndex v-if="AllData.TypeID == 'sewage'"></WSIndex>
   </div>
 </template>
 
@@ -20,22 +21,7 @@
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
 import bus from "@/bus";
 import YSIndex from "./YSIndex.vue";
-// 引入接口
-import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
-// 引入echarts组件
-// 纵向立体柱状体以及标线和折现
-import MonBarCharts from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarCharts.vue";
-//横向的两组柱状图堆叠
-import MonBarChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonBarChartsLeft.vue";
-// 纵向的两条折现
-import MonLineChartsLeft from "@/views/pictureOnMap/page/MonitoringAnalysis/components/MonLineChartsLeft.vue";
-// 面板控制组件
-import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
-const showPanel = ref(false); //面板展开收起
-const PanelChange = (val) => {
-  showPanel.value = val;
-};
-
+import WSIndex from "./WSIndex.vue";
 const AllData = reactive({
   yw_type: [
     {