<template>
  <!-- 排水体系 -->
  <div class="YSIndex">
    <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
    <Transition name="fade_left">
      <div :class="['moduleBox', 'moduleBoxLeft']" v-show="!showPanel">
        <!-- 顶部公共标题 -->
        <div class="CrumbesTitle">
          <!-- 一级 -->
          <span
            class="crumbs"
            v-for="item in AllData.TitleName"
            :key="item.grade"
            v-show="item.abbreviation"
            @click="MBClick(item)"
          >
            {{ item.grade != 'one' ? '/' : '' }}
            {{ item.abbreviation ? item.abbreviation : '' }}
          </span>
        </div>
        <div class="modular1">
          <div class="leve2Title">
            {{
              AllData.regionGrade == 'one'
                ? '河湖水情'
                : AllData.regionGrade == 'two'
                ? '管网监测'
                : AllData.regionGrade == 'three'
                ? '管网统计'
                : AllData.regionGrade == 'four'
                ? '当日水量分析'
                : ''
            }}
            {{ 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 && AllData.RightShowType == 'rainwater_pipeline_quality'"
      >
        <!-- 顶部公共标题 -->
        <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">
                <el-tooltip :content="AllData.SLFX.upstreamSiteWaterYield + '万吨'" placement="top">
                  <span class="SlListNum">{{ AllData.SLFX.upstreamSiteWaterYield }}</span>
                </el-tooltip>
                <span class="SlListUnit">万吨</span>
              </div>
              <div class="SlList2P">上游水量</div>
            </div>
            <div class="SLList">
              <div class="SlList1P">
                <el-tooltip :content="AllData.SLFX.siteWaterYield + '万吨'" placement="top">
                  <span class="SlListNum">{{ AllData.SLFX.siteWaterYield }}</span>
                </el-tooltip>
                <span class="SlListUnit">万吨</span>
              </div>
              <div class="SlList2P">当前站点水量</div>
            </div>
            <div class="SLList">
              <div class="SlList1P">
                <el-tooltip :content="AllData.SLFX.downstreamSiteWaterYield + '万吨'" placement="top">
                  <span class="SlListNum">{{ AllData.SLFX.downstreamSiteWaterYield }}</span>
                </el-tooltip>
                <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="ListInfo50">
              <div class="ListInfo_label">类型:</div>
              <div class="ListInfo_value">
                {{ AllData.GWBD.pointType == 'YS' ? '雨水管网' : AllData.GWBD.pointType == 'WS' ? '污水管网' : '--' }}
              </div>
            </div>
            <div class="ListInfo50">
              <div class="ListInfo_label">设计编号:</div>
              <div class="ListInfo_value">
                {{ AllData.GWBD.stAsName ? AllData.GWBD.stAsName : '--' }}
              </div>
            </div>
            <div class="ListInfo100">
              <div class="ListInfo_label">管井编码:</div>
              <div class="ListInfo_value">
                {{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : '--' }}
              </div>
            </div>
            <div class="ListInfo100">
              <div class="ListInfo_label">站点编号:</div>
              <div class="ListInfo_value">
                {{ AllData.GWBD.stCode ? AllData.GWBD.stCode : '--' }}
              </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 v-if="AllData.regionGrade == 'one'" class="crumbs2">港渠统计</span>
          <span v-if="AllData.regionGrade == 'two'" class="crumbs2">水质统计</span>
        </div>
        <div class="modularRight2">
          <YSRight v-if="AllData.regionGrade == 'one'" :waterRegionCode="AllData.waterRegionCode"></YSRight>
          <YSRight2 v-if="AllData.regionGrade == 'two'" :waterRegionCode="AllData.waterRegionCode"></YSRight2>
        </div>
      </div>
    </Transition>
    <!-- 泵站信息 -->
    <Transition name="fade_right">
      <div
        :class="['moduleBox', 'moduleBoxRight']"
        v-if="!showPanel && AllData.RightShow && AllData.RightShowType == 'rain_water_pump_station_info'"
      >
        <!-- 顶部公共标题 -->
        <div class="CrumbesTitle">
          <span class="crumbs2">{{ AllData.ClicksiteName }}</span>
        </div>

        <div class="modularRight2">
          <BengZhanInfo :Datatype="AllData.RightShowType" :DataId="AllData.RightShowID" :TypeID="AllData.TypeID"></BengZhanInfo>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup name="YSIndex">
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 YSRight2 from './YSIndex_right2.vue';
import BengZhanInfo from './BengZhanRight.vue';
// 面板控制组件
import PanelDisplayHidden from '@/views/pictureOnMap/page/components/PanelDisplayHidden.vue';
const showPanel = ref(false); //面板展开收起
const PanelChange = val => {
  showPanel.value = val;
};

const AllData = reactive({
  TypeID: 'rain',
  regionGrade: 'one', //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
  regionName: '', //分区名称
  waterRegionCode: '', //分区编号
  RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
  RightShowID: '',
  RightShowType: '',
  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: '降雨量(mm)',
    yAxis2: [],
    yAxis2_Name: '流速(m/s)',
    yAxis3: [],
    yAxis3_Name: '水深(m)',
    yAxis4: [],
    yAxis4_Name: '5分钟水量(m³)',
    xAxis: [],
  },
  refreshRight: 0,
  ClicksiteName: '',
  TjData1: 0,
  TjData1Unit: '',
  TjData2: 0,
  TjData2Unit: '',
  TjData3: 0,
  TjData3Unit: '',
});
// 面包屑点击事件
const MBClick = item => {
  console.log(item);
  AllData.RightShow = false;
  AllData.RightShowID = '';
  AllData.RightShowType = '';
  // 赋值需要进行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;
    AllData.RightShowType = '排水分区';
    //   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 ? element.shortName : element.name,
              id: element.id,
              grade: 'two',
              sort: 1,
              Name: element.name,
            };
          }
          if (element.grade == 'two') {
            AllData.TitleName[2] = {
              abbreviation: element.shortName ? element.shortName : element.name,
              id: element.id,
              grade: 'three',
              sort: 2,
              Name: element.name,
            };
          }
          if (element.grade == 'three') {
            AllData.TitleName[3] = {
              abbreviation: element.shortName ? element.shortName : element.name,
              id: element.id,
              grade: 'four',
              sort: 3,
              Name: element.name,
            };
          }
          if (element.grade == 'four') {
            AllData.TitleName[4] = {
              abbreviation: element.shortName ? element.shortName : element.name,
              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 (AllData.RightShowID == Row.properties.id) {
      // 说明是同样的一个点点了两次,所以进行关闭
      AllData.RightShow = false;
      AllData.RightShowID = '';
      AllData.RightShowType = '';
    } else {
      // 管点
      if (Row.properties.pointType == 'rainwater_pipeline_quality') {
        AllData.ClicksiteName = Row.properties.name;
        AllData.RightShowID = Row.properties.id;
        AllData.RightShowType = 'rainwater_pipeline_quality';
        AllData.RightShow = true;
        //   Row.properties.wellCode
        //   获取管网信息
        if (!!Row.properties.wellCode) {
          MonitorAPI.pipelinePointPage({
            pointNumber: Row.properties.wellCode,
          }).then(res => {
            if (res && res.code == 200) {
              AllData.GWBD = res.data[0];
            }
          });
        } else {
          AllData.GWBD = {
            pointType: '--',
            pointNumber: '--',
            stAsName: '--',
            stCode: '--',
            buildTime: '--',
            pipelineDiameter: '--',
            pipelineTexture: '--',
            issueType: '--',
            roadName: '--',
            repairYear: '--',
          };
        }
        //   根据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: '降雨量(mm)',
          yAxis2: [],
          yAxis2_Name: '流速(m/s)',
          yAxis3: [],
          yAxis3_Name: '水深(m)',
          yAxis4: [],
          yAxis4_Name: '5分钟水量(m³)',
          xAxis: [],
        };
        AllData.refreshRight = 0;
        GetRightCharts(Row.properties);
        //   }, 900);
      }
      // 泵站
      if (Row.properties.pointType == 'rain_water_pump_station_info') {
        if (Row.properties.id == '') {
          // 不展示
          AllData.ClicksiteName = '';
          AllData.RightShow = false;
          AllData.RightShowID = '';
          AllData.RightShowType = '';
        } else {
          AllData.RightShowType = 'rain_water_pump_station_info';
          AllData.ClicksiteName = Row.properties.name;
          AllData.RightShowID = Row.properties.id;
          AllData.RightShow = true;
        }
      }
    }
    // }
  }
};

// 清除面包屑的数据
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 = Number(res.data.pipelineLengthList.reduce((accu, curren) => Number(accu) + Number(curren))).toFixed(2);
        AllData.TjData2Unit = 'km';
      }
      if (AllData.regionGrade == 'two') {
        // 二级Ecahrts 名称
        // debugger;
        AllData.chartData2.yAxis_Name = '问题管网';
        AllData.TjData2 = Number(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 = Number(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 = Number(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.outletsNumber;
        AllData.chartData3.yAxis1_bar_Name = '排口';
        AllData.chartData3.yAxis2_bar = null;
        AllData.chartData3.yAxis2_bar_Name = '';
        AllData.chartData3.yAxis3_line = res.data.inflowWater;
        AllData.chartData3.yAxis3_line_Name = '出水量';
        AllData.chartData3.yAxis3_line_Index = 1;
        AllData.chartData3.y1_Unit = '个'; //Y轴单位
        AllData.chartData3.y2_Unit = '万方'; //Y轴单位
        AllData.chartData3.y2_show = true;
        AllData.refresh3++;
        AllData.TjData3 = Number(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 = Number(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 = Number(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 = Number(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 = Number(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 = Number(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;
          case 'sbl05':
            AllData.chartDataRight.yAxis4 = 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>
.YSIndex {
  .CrumbesTitle {
    width: 100%;
    height: 44px;
    background: url('@/assets/images/pictureOnMap/eachBgc.png') no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .crumbs {
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      cursor: pointer;
      &:hover {
        color: #2291e1;
      }
    }
    .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');
        background-repeat: no-repeat;
        background-size: contain;
        .SlList1P {
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .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: 38px;
        float: left;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
      }
      .ListInfo50 {
        width: 50%;
        height: 38px;
        float: left;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
      }

      .ListInfo_label {
        width: 75px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ccdfff;
      }
      .ListInfo_value {
        width: calc(100% - 75px);
        height: 38px;
        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>