<template>
  <div class="drill">
    <!-- 汛情预警处置 -->
    <button
      class="xqyjcz"
      @click="openXqyjcz"
      :disabled="pageLoading1"
      :class="{ disabled: pageLoading1 }"
    >
      汛情预警处置
    </button>
    <!-- <button class="open" @click="open">开闸</button> -->
    <div class="myslider" v-if="Number($store.state.flowOutMax.fa1) !== 0">
      <el-select
        @change="sliderSelect"
        v-model="sliderValue1"
        placeholder="请选择方案"
        :popper-append-to-body="false"
        :key="selectKey"
      >
        <el-option
          v-for="item in sliderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="play-box">
        <div
          class="start"
          :class="{ pause: sliderPlay }"
          @click="startBtn"
        ></div>
        <el-button class="replay" @click="replay" size="mini">重播</el-button>
        <div class="back"></div>
        <div class="slider-box">
          <el-slider
            v-model="sliderValue"
            :format-tooltip="formatTooltip"
            :show-tooltip="false"
            :max="40"
          >
          </el-slider>
        </div>

        <div class="fast"></div>
      </div>
      <div class="btn-box">
        <label for="duan"
          >断面：<input
            type="checkbox"
            id="duan"
            v-model="activePoint.controlVisiable"
        /></label>
        <label for="cun"
          >村落：<input
            type="checkbox"
            id="cun"
            v-model="activePoint.villageVisiable"
        /></label>
        <select v-model="waterActiveType">
          <option value="1">热力图</option>
          <option value="0">真实水体</option>
        </select>
      </div>
    </div>
    <div
      class="is-show"
      @click="isShowBtn"
      :class="{ hidden: isShow === false }"
    ></div>
    <!-- <button class="getMess">获取UE信息</button> -->
    <div class="drill-left" v-show="isShow" v-loading="pageLoading1">
      <BigPanel title="预演方案库" class="mb top1">
        <template #title>
          <el-select
            v-if="false"
            v-model="selectValue"
            placeholder="选择方案"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in lTop1options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <div class="programme-box">
          <!-- 台风推挤aN方案原本是97 -->
          <div class="programme">
            <p>推荐方案</p>
            <p
              :class="{
                no: Number($store.state.flowOutMax.fa1) === 0,
              }"
            >
              {{
                Number($store.state.flowOutMax.fa1) === 0
                  ? "无"
                  : "最大下泄流量" + $store.state.flowOutMax.fa1 + "m³/s"
              }}
            </p>
            <button @click="look(1)">查看</button>
          </div>
          <div class="programme">
            <p>方案 2</p>
            <p
              :class="{
                no: Number($store.state.flowOutMax.fa2) === 0,
              }"
            >
              {{
                Number($store.state.flowOutMax.fa2) === 0
                  ? "无"
                  : "最大下泄流量" + $store.state.flowOutMax.fa2 + "m³/s"
              }}
            </p>
            <button @click="look(2)">查看</button>
          </div>
          <div class="programme">
            <p>方案 3</p>
            <p
              :class="{
                no: Number($store.state.flowOutMax.fa3) === 0,
              }"
            >
              {{
                Number($store.state.flowOutMax.fa3) === 0
                  ? "无"
                  : "最大下泄流量" + $store.state.flowOutMax.fa3 + "m³/s"
              }}
            </p>
            <button @click="look(3)">查看</button>
          </div>
          <div class="programme">
            <p>自定义</p>
            <!-- 预报雨量自定义 -->
            <p
              v-if="$store.state.rTop1Value === 0"
              :class="{
                no: !$store.state.futureZiData.format,
              }"
            >
              {{
                $store.state.futureZiData.format
                  ? `最大下泄流量${Number(
                      Math.max(...$store.state.futureZiData.format.flowOut)
                    ).toFixed(2)}m³/s`
                  : "暂未设置自定义方案"
              }}
            </p>
            <!-- 台风自定义 -->
            <p
              v-if="$store.state.rTop1Value === 1"
              :class="{
                no: !$store.state.tfZiData.format,
              }"
            >
              {{
                $store.state.tfZiData.format
                  ? `最大下泄流量${Number(
                      Math.max(...$store.state.tfZiData.format.flowOut)
                    ).toFixed(2)}m³/s`
                  : "暂未设置自定义方案"
              }}
            </p>
            <!-- 自定义雨量的自定义度汛方案 -->
            <p
              v-if="$store.state.rTop1Value === 2"
              :class="{
                no: !$store.state.rainCalcZiData.format,
              }"
            >
              {{
                $store.state.rainCalcZiData.format
                  ? `最大下泄流量${Number(
                      Math.max(...$store.state.rainCalcZiData.format.flowOut)
                    ).toFixed(2)}m³/s`
                  : "暂未设置自定义方案"
              }}
            </p>
            <button @click="look(4)">查看</button>
            <!-- <button @click="gk(4)" :disabled="true" :class="{ no: true }">
              预演
            </button> -->
          </div>
        </div>
      </BigPanel>
      <BigPanel title="调度过程预演" class="top2">
        <template #title>
          <div
            class="is-big"
            @click="openChart('调度过程预演', titleArr, lTop2Index)"
          ></div>
          <div class="big-panel-title-btn-box">
            <button
              v-for="(item, index) in titleArr"
              :key="index"
              @click="lTop2Btn(index)"
              :class="{ active: lTop2Index === index }"
            >
              {{ item }}
            </button>
          </div>
        </template>
        <div class="demo-chart-box">
          <div id="demoChart"></div>
        </div>
      </BigPanel>
      <BigPanel title="受灾分析" class="top3">
        <template #title>
          <div class="is-big" @click="openLT3('受灾分析', lTop3Arr)"></div>
        </template>
        <div class="big-panel-btn-box">
          <button
            v-for="(item, index) in lTop3Arr"
            :key="index"
            @click="lTop3Btn(index)"
            :class="{ btnActive: lTop3Index === index }"
          >
            {{ item }}
          </button>
        </div>
        <Scroll3
          :listScrollData="listScrollData1"
          :listScrollOption="listScrollOption1"
          :num="4"
          ref="scroll3"
        ></Scroll3>
      </BigPanel>
    </div>
    <div class="drill-right" v-show="isShow" v-loading="pageLoading2">
      <!-- <BigPanel title="堤防风险统计" class="top1">
        <template #title>
          <div
            class="is-big"
            @click="openChart('堤防风险统计', lrArr, rTop1Index)"
          ></div>
          <div class="big-panel-title-btn-box">
            <button
              v-for="(item, index) in lrArr"
              :key="index"
              @click="rTop1Btn(index)"
              :class="{ active: rTop1Index === index }"
            >
              {{ item }}
            </button>
          </div>
        </template>
        <div id="right-chart1"></div>
      </BigPanel> -->
      <BigPanel title="缩略图" class="top1">
        <template #title>
          <!-- <div
            class="is-big"
            @click="openChart('缩略图', lrArr, rTop1Index)"
          ></div> -->
          <div class="is-big" @click="openImg"></div>
        </template>
        <img src="@/assets/images/flood/img.png" />
      </BigPanel>
      <BigPanel title="预测最高水位" class="top3">
        <template #title>
          <div class="big-panel-title-btn-box">
            <button
              v-for="(item, index) in lrArr"
              :key="index"
              @click="rTop2Btn(index)"
              :class="{ active: rTop2Index === index }"
            >
              {{ item }}
            </button>
          </div>
          <div class="is-big" @click="openLT3('预测最高水位', lrArr)"></div>
        </template>
        <Scroll4
          :listScrollData="listScrollData2"
          :listScrollOption="listScrollOption2"
          :num="4"
          class="scroll4"
          :scrollUpdate="scrollUpdate"
          ref="scroll4"
          @place-name="placeName"
        ></Scroll4>
      </BigPanel>
      <BigPanel title="断面水位过程" class="top2">
        <template #title>
          <div
            class="is-big"
            @click="openChart('断面水位过程', [], selectValue2)"
          ></div>
          <!-- <el-select
            v-model="selectValue2"
            placeholder="选择断面"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </template>
        <div id="right-chart2"></div>
        <div class="left-box" v-if="rtop2box"></div>
        <div class="right-box" v-if="rtop2box"></div>
      </BigPanel>
    </div>
    <BigChart :show="chartShow" @close-dialog="closeChart" :title="chartTitle">
      <div class="big-chart-btn-box" v-if="bigChartBtnArr.length > 0">
        <button
          v-for="(item, index) in bigChartBtnArr"
          :key="index"
          :class="{ active: bigChartBtnIndex === index }"
          @click="bigChartBtn(index)"
        >
          {{ typeof item === "object" ? item.label : item }}
        </button>
      </div>
      <div id="big-chart"></div>
    </BigChart>
    <BigChart :show="chartShow2" @close-dialog="closeChart" :title="chartTitle">
      <div id="big-chart2"></div>
    </BigChart>
    <!-- 受灾分析 预测最高水位 -->
    <BigChart
      class="lt3-dialog"
      :show="lt3Show"
      @close-dialog="closeLT3"
      :title="scrollTitle"
    >
      <div class="big-chart-btn-box">
        <button
          @click="lt3DialogBtn(index)"
          v-for="(item, index) in btnArr"
          :key="index"
          :class="{ active: bigChartBtnIndex === index }"
        >
          {{ item }}
        </button>
      </div>
      <div class="list-scroll-column">
        <template v-if="scrollTitle === '受灾分析'">
          <div class="list-scroll-title1">
            <h4>名称</h4>
            <h4>推荐方案</h4>
            <h4>方案 2</h4>
            <h4>方案 3</h4>
            <h4>自定义</h4>
          </div>
          <div class="list-scroll-main1 webkit-scroll-line">
            <div class="row" v-for="(item, index) in scrollData" :key="index">
              <div class="column column1">{{ item.name }}</div>
              <div class="column column2">{{ item.plan1 }}</div>
              <div class="column column3">{{ item.plan2 }}</div>
              <div class="column column4">{{ item.plan3 }}</div>
              <div class="column column5">{{ item.customPlan }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="list-scroll-title2">
            <h4>名称</h4>
            <h4>推荐方案</h4>
            <h4>方案2</h4>
            <h4>方案3</h4>
            <h4>自定义</h4>
            <h4>堤(岸)顶高程</h4>
          </div>
          <div class="list-scroll-main2 webkit-scroll-line">
            <div class="row" v-for="(item, index) in scrollData" :key="index">
              <div class="column column1">{{ item.name }}</div>
              <div
                class="column column2"
                :class="{ red: item.one > item.height }"
              >
                {{ Number(item.one).toFixed(1) }}
              </div>
              <div
                class="column column3"
                :class="{ red: item.two > item.height }"
              >
                {{ Number(item.two).toFixed(1) }}
              </div>
              <div
                class="column column4"
                :class="{ red: item.three > item.height }"
              >
                {{ Number(item.three).toFixed(1) }}
              </div>
              <div
                class="column column5"
                :class="{ red: item.zi > item.height }"
              >
                {{ item.zi }}
              </div>
              <div class="column column6">
                {{ Number(item.height).toFixed(1) }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </BigChart>
    <BigChart :show="imgShow" @close-dialog="imgShow = false" title="缩略图">
      <img src="@/assets/images/flood/img_big.png" />
    </BigChart>
    <BigChart
      class="look-dialog"
      :show="lookShow"
      @close-dialog="closeLookShow"
      :title="faTitle"
    >
      <div class="content">
        <div class="row">
          <div class="left">影响群众</div>
          <div class="right">
            <h4 v-if="faData.people !== '无'">{{ faData.people }}</h4>
            <span v-if="faData.people !== '无'">万人</span>
            <span v-if="faData.people === '无'">{{ faData.people }}</span>
          </div>
        </div>
        <div class="row">
          <div class="left">涉及乡镇</div>
          <div class="right">
            <!-- 乡镇名称1、乡镇名称2、乡镇名称3、乡镇名称4、 乡镇名称5、乡镇名称6 -->
            {{ faData.xz }}
          </div>
        </div>
        <div class="row">
          <div class="left">涉及网络员</div>
          <div class="right">
            <!-- <h4>234</h4>
            <span>万m³</span> -->
            {{ faData.wgy }}
          </div>
        </div>
      </div>
    </BigChart>
    <Process1 :xqyjczShow="xqyjczShow" @xqyjcz-close="xqyjczClose" />
  </div>
</template>

<script>
// import { getReservoirRealApi } from '@/api/reservoir.js'
// import { getOptimalApi, getTfZiApi } from '@/api/flood.js'

import { getMaxwaterlevelApi, getTotalrainApi, getRiversectionlistApi, getFiveOneControlArrApi } from '@/api/flood.js'
import Process1 from './process1.vue'
export default {
  name: 'Drill',
  components: {
    Process1
  },
  created () {
    this.pageLoading1 = true
    this.pageLoading2 = true
    this.sliderOptions = [{
      value: 'fa1',
      label: Number(this.$store.state.flowOutMax.fa1) === 0
        ? '无'
        : '方案 1：最大下泄流量' + this.$store.state.flowOutMax.fa1 + 'm³/s'
    }, {
      value: 'fa2',
      label: Number(this.$store.state.flowOutMax.fa2) === 0
        ? '无'
        : '方案 2：最大下泄流量' + this.$store.state.flowOutMax.fa2 + 'm³/s'
    }, {
      value: 'fa3',
      label: Number(this.$store.state.flowOutMax.fa3) === 0
        ? '无'
        : '方案 3：最大下泄流量' + this.$store.state.flowOutMax.fa3 + 'm³/s'
    }, {
      value: 'fa4',
      label: '自定义方案'
    }]
    if (this.$store.state.rTop1Value === 0 || this.$store.state.rTop1Value === 1) {
      if (this.$store.state.dxZiData.format) {
        if (Math.max(...this.$store.state.dxZiData.format.flowOut) === 0) {
          this.sliderOptions[3].label = '无'
        } else {
          this.sliderOptions[3].label = `最大下泄流量${Number(Math.max(...this.$store.state.dxZiData.format.flowOut)).toFixed(2)}m³/s`
        }
      }
    } else if (this.$store.state.rTop1Value === 2) {
      if (this.$store.state.rainCalcZiData.format) {
        if (Math.max(...this.$store.state.rainCalcZiData.format.flowOut) === 0) {
          this.sliderOptions[3].label = '无'
        } else {
          this.sliderOptions[3].label = `最大下泄流量${Number(Math.max(...this.$store.state.rainCalcZiData.format.flowOut)).toFixed(2)}m³/s`
        }
      }
    }
    this.selectKey = Date.now()
  },
  async mounted () {
    try {
      this.getFiveOneControlArr()

      window.addEventListener('resize', this.initChart)
      this.$eventBus.$on('changeSlider', (value) => {
        this.sliderValue = value
      })
      // 受灾分析不依赖其他数据单独发送
      this.getTotalrainData()
      // 断面水位过程不依赖其他
      await this.getRiversectionlist()
      // 依赖真实水位
      // 不存在再去取
      if (!this.$store.state.reservoirRealData.air_value) {
        await this.$store.dispatch('getReservoirRealAction')
      }
      if (this.$store.state.rTop1Value === 0) {
        // 一开始默认拿未来预报雨量的度汛方案
        await this.$store.dispatch('getfutureDxAction')
        await this.getMaxwaterlevelData()
        await this.getDemoChartData()
        this.pageLoading1 = false
        this.pageLoading2 = false
        this.placeName('溢洪道末')
      } else if (this.$store.state.rTop1Value === 1) {
        await this.$store.dispatch('getTfDxAction')
        await this.getMaxwaterlevelData()
        await this.getDemoChartData()
        this.pageLoading1 = false
        this.pageLoading2 = false
        this.placeName('溢洪道末')
      } else if (this.$store.state.rTop1Value === 2) {
        //  await this.$store.dispatch('getTfDxAction')
        await this.getMaxwaterlevelData()
        await this.getDemoChartData()
        this.pageLoading1 = false
        this.pageLoading2 = false
        this.placeName('溢洪道末')
      }
      this.initRrightChart1(this.f3r1Data.x[0], this.f3r1Data.y[0])

      // fetch('https://open.guangchuan.org/disaster/analysis?projectId=125', { headers: { Authorization: 'gqp7ade01wyeiqzgnxp9agsh1roqruz7bdl1jwatmj2jar4vkbjay73p9g0se22l' } })
      //   .then(res => { console.log(123, res) })
      // this.getDemoChart()
    } catch (error) {
      this.pageLoading1 = false
      this.pageLoading2 = false
    }
  },
  destroyed () {
    this.$eventBus.$emit('resetAll')
    window.removeEventListener('resize', this.initChart)
  },
  data () {
    return {
      // 汛情预警处置
      xqyjczShow: false,
      // 弹窗
      faData: {
        people: '无',
        xz: '无',
        wgy: '无'
      },
      // 方案查看弹窗
      faTitle: '',
      lookShow: false,
      //
      imgShow: false,
      selectKey: 0,
      maxNum: 0,
      pageLoading1: false,
      pageLoading2: false,
      waterActiveType: '1',
      activePoint: {
        // 断点
        controlVisiable: true,
        // 村落
        villageVisiable: false
      },
      // 断面水位过程数据
      riversectionlist: [],
      riversectionObj: [], // echarts
      // 岸
      rtop2box: false,
      // 播放进图条
      sliderFlag: false,
      sliderPlay: false,
      sliderValue: 0,
      playShow: false,
      // 受灾分析和预测最高水位弹窗
      btnArr: [],
      scrollTitle: '',
      scrollData: [],
      // 受灾分析
      lt3Show: false,
      sliderValue1: 'fa1',
      sliderOptions: [{
        value: 'fa1',
        label: '推荐方案'
      }, {
        value: 'fa2',
        label: '方案 2'
      }, {
        value: 'fa3',
        label: '方案 3'
      }, {
        value: 'fa4',
        label: '自定义方案'
      }],
      // 弹层
      reset: true,
      chartTitle: '图表',
      chartShow: false,
      chartShow2: false,
      bigChartBtnArr: [],
      bigChartBtnIndex: 0,
      // 隐藏显示全部
      isShow: true,
      // 预演方案库
      selectValue: '1',
      lTop1options: [{
        value: '1',
        label: '预报雨量'
      }, {
        value: '2',
        label: '烟花台风'
      }, {
        value: '3',
        label: '自定义雨量'
      }],
      // 调度过程预演
      lTop2Index: 0,
      titleArr: ['库水位', '下泄流量'],
      // 受灾分析
      f3l2Data: [],
      lTop3Index: 0,
      lTop3Arr: ['淹没面积/k㎡', '最大淹没水深/m', '洪水到达时间/h'],
      listScrollData1: [],
      listScrollOption1: {
        step: 0.35, // 数值越大滚动速度越快
        limitMoveNum: 5, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1, // 方向:  0-往下  1-往上  2-向左  3-向右
        singleHeight: 50 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      },
      // 堤防风险统计 预测最高水位 左右岸
      lrArr: ['左岸', '右岸'],
      // 堤防风险统计
      rTop1Index: 0,
      f3r1Data: {
        flag: 'f3r1',
        x: [
          ['推荐方案', '方案2', '方案3', '自定义'],
          ['推荐方案', '方案2', '方案3', '自定义'],
          ['推荐方案', '方案2', '方案3', '自定义']
        ],
        y: [
          {
            normal: [20, 16, 16, 0],
            warm: [0, 4, 4, 0]
          },
          {
            normal: [20, 16, 16, 0],
            warm: [0, 4, 4, 0]
          }
        ]
      },
      // 预测最高水位
      rTop2Index: 0,
      listScrollData2: [

      ],
      listScrollOption2: {
        step: 0.35, // 数值越大滚动速度越快
        limitMoveNum: 5, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1, // 方向:  0-往下  1-往上  2-向左  3-向右
        singleHeight: 50 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      },
      f3r2Data: {
        x: [
          ['7-30 8:00', '7-30 9:00', '7-30 10:00', '7-30 11:00', '7-30 12:00', '7-30 13:00', '7-30 14:00', '7-30 15:00', '7-30 16:00', '7-30 17:00', '7-30 18:00', '7-30 19:00', '7-30 20:00', '7-30 21:00', '7-30 22:00', '7-30 23:00', '7-31 0:00', '7-31 1:00', '7-31 2:00', '7-31 3:00', '7-31 4:00', '7-31 5:00', '7-31 6:00', '7-31 7:00', '7-31 7:01']
        ],
        y: [
          {
            one: [69.46, 69.59, 69.66, 69.89, 70.10, 70.18, 70.19, 70.19, 70.19, 70.20, 70.20, 70.19, 70.18, 70.19, 70.20, 70.21, 70.20, 70.19, 70.18, 70.16, 70.15, 70.13, 70.12, 70.11, 70.09],
            two: [69.46, 69.59, 69.66, 69.90, 70.11, 70.19, 70.19, 70.19, 70.20, 70.22, 70.21, 70.20, 70.20, 70.21, 70.22, 70.22, 70.21, 70.20, 70.19, 70.17, 70.16, 70.14, 70.13, 70.12, 70.10],
            three: [69.46, 69.59, 69.66, 69.90, 70.10, 70.18, 70.19, 70.19, 70.19, 70.21, 70.21, 70.19, 70.19, 70.20, 70.21, 70.21, 70.21, 70.19, 70.18, 70.16, 70.15, 70.14, 70.12, 70.11, 70.10],
            left: [69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7, 69.7],
            right: [72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4, 72.4]
          }
        ]
      },
      // 断面水位过程
      selectValue2: 0,
      options: [{
        value: 0,
        label: '断面1'
      }, {
        value: 1,
        label: '断面2'
      }, {
        value: 2,
        label: '断面3'
      }],
      f3r3Data: []
    }
  },
  methods: {
    openXqyjcz () {
      this.xqyjczShow = true
    },
    xqyjczClose () {
      this.xqyjczShow = false
    },
    closeLookShow () {
      this.lookShow = false
    },
    // 查看弹窗
    look (num) {
      this.lookShow = true
      if (num === 1) {
        this.faTitle = '推荐方案详情'
        this.faData = {
          people: '无',
          xz: '无',
          wgy: '无'
        }
      } else if (num === 2) {
        this.faTitle = '方案二详情'
        this.faData = {
          people: 1.73,
          xz: '东阳江镇、歌山镇、六石镇、江北街道',
          wgy: '上陈村（冯先锋）、尚侃村（金长法）、圳干村（金光明）、大里村（俞大明）、石潭村（俞国尧）、积塘坞村（王茂孝）、上宅村（胡锦民）、西宅村（胡耀良）、下蒋村（蒋增海）'
        }
      } else if (num === 3) {
        this.faTitle = '方案三详情'
        this.faData = {
          people: 1.73,
          xz: '东阳江镇、歌山镇、六石镇、江北街道',
          wgy: '上陈村（冯先锋）、尚侃村（金长法）、圳干村（金光明）、大里村（俞大明）、石潭村（俞国尧）、积塘坞村（王茂孝）、上宅村（胡锦民）、西宅村（胡耀良）、下蒋村（蒋增海）'
        }
      } else if (num === 4) {
        this.faTitle = '自定义方案详情'
        this.faData = {
          people: '无',
          xz: '无',
          wgy: '无'
        }
      }
    },
    openImg () {
      this.imgShow = true
    },
    async getFiveOneControlArr () {
      let res
      if (this.$store.state.rTop1Value === 0) {
        console.log('这里是预报雨量')
        res = await getFiveOneControlArrApi({
          projectId: 125,
          isInfa: this.$store.state.rTop1Value === 1,
          gk: this.sliderValue1 === 'fa1' ? 1 : this.sliderValue1 === 'fa2' ? 2 : this.sliderValue1 === 'fa3' ? 3 : 4,
          startDate: this.cqq.elDateformate(new Date()),
          gateCount: this.$store.state.szfxData.gateCount,
          totalRainFall: this.$store.state.szfxData.totalRainFall,
          token: 'gqp7ade01wyeiqzgnxp9agsh1roqruz7bdl1jwatmj2jar4vkbjay73p9g0se22l'
        })

        this.$store.commit('set51FiveOne', {
          startDate: this.cqq.elDateformate(new Date()),
          gateCount: this.$store.state.szfxData.gateCount,
          totalRainFall: this.$store.state.szfxData.totalRainFall,
          gk: this.sliderValue1 === 'fa1' ? 1 : this.sliderValue1 === 'fa2' ? 2 : this.sliderValue1 === 'fa3' ? 3 : 4
        })

        const nameArr = ['溢洪道末', '林头堰上', '伯丰堰上', '洲义堰上', '白溪汇口', '泗渡溪汇口', '艺海大桥', '中山大桥', '榔坑汇口', '义东大桥', '东义交界']
        const fres = res.data.data.control.filter(item => {
          return nameArr.includes(item.areaName)
        })
        console.log('过滤后的51数据', fres)
        this.$store.commit('set51control', fres)
        this.$eventBus.$emit('set51controlArr', fres)
      } else if (this.$store.state.rTop1Value === 1) {
        console.log('这里是烟花')
        res = await getFiveOneControlArrApi({
          projectId: 125,
          isInfa: this.$store.state.rTop1Value === 1,
          gk: this.sliderValue1 === 'fa1' ? 1 : this.sliderValue1 === 'fa2' ? 2 : this.sliderValue1 === 'fa3' ? 3 : 4,
          startDate: '2021-07-27 00:00:00',
          gateCount: this.$store.state.szfxData.gateCount,
          totalRainFall: this.$store.state.szfxData.totalRainFall,
          token: 'gqp7ade01wyeiqzgnxp9agsh1roqruz7bdl1jwatmj2jar4vkbjay73p9g0se22l'
        })
        this.$store.commit('set51FiveOne', {
          startDate: '2021-07-27 00:00:00',
          gateCount: this.$store.state.szfxData.gateCount,
          totalRainFall: this.$store.state.szfxData.totalRainFall,
          gk: this.sliderValue1 === 'fa1' ? 1 : this.sliderValue1 === 'fa2' ? 2 : this.sliderValue1 === 'fa3' ? 3 : 4
        })
        console.log('查看一下烟花传递的值', this.$store.state.fiveOne)
        const nameArr = ['溢洪道末', '林头堰上', '伯丰堰上', '洲义堰上', '白溪汇口', '泗渡溪汇口', '艺海大桥', '中山大桥', '榔坑汇口', '义东大桥', '东义交界']
        const fres = res.data.data.control.filter(item => {
          return nameArr.includes(item.areaName)
        })
        console.log('过滤后的51数据', fres)
        this.$store.commit('set51control', fres)
        this.$eventBus.$emit('set51controlArr', fres)
      } else if (this.$store.state.rTop1Value === 2) {
        console.log('这里是自定义雨量')
        res = await getFiveOneControlArrApi({
          projectId: 125,
          isInfa: this.$store.state.rTop1Value === 1,
          gk: this.sliderValue1 === 'fa1' ? 1 : this.sliderValue1 === 'fa2' ? 2 : this.sliderValue1 === 'fa3' ? 3 : 4,
          startDate: this.$store.state.szfxData.startDate,
          gateCount: this.$store.state.szfxData.gateCount,
          totalRainFall: this.$store.state.szfxData.totalRainFall,
          token: 'gqp7ade01wyeiqzgnxp9agsh1roqruz7bdl1jwatmj2jar4vkbjay73p9g0se22l'
        })

        this.$store.commit('set51FiveOne', {
          startDate: this.$store.state.szfxData.startDate,
          gateCount: this.$store.state.szfxData.gateCount,
          totalRainFall: this.$store.state.szfxData.totalRainFall,
          gk: this.sliderValue1 === 'fa1' ? 1 : this.sliderValue1 === 'fa2' ? 2 : this.sliderValue1 === 'fa3' ? 3 : 4
        })

        const nameArr = ['溢洪道末', '林头堰上', '伯丰堰上', '洲义堰上', '白溪汇口', '泗渡溪汇口', '艺海大桥', '中山大桥', '榔坑汇口', '义东大桥', '东义交界']
        const fres = res.data.data.control.filter(item => {
          return nameArr.includes(item.areaName)
        })
        console.log('过滤后的51数据', fres)
        this.$store.commit('set51control', fres)
        this.$eventBus.$emit('set51controlArr', fres)
      }
    },
    async startBtn () {
      if (this.sliderPlay) {
        this.sliderPlay = false
        this.$eventBus.$emit('stop51')
      } else {
        await this.getFiveOneControlArr()
        this.sliderPlay = true
        if (this.sliderFlag) {
          this.$eventBus.$emit('jixu51')
        } else {
          this.sliderFlag = true
          if (this.sliderValue1 === 'fa1') {
            // this.$eventBus.$emit('play51', '1')
            this.$eventBus.$emit('play51', '1')
          } else if (this.sliderValue1 === 'fa2') {
            this.$eventBus.$emit('play51', '2')
          } else if (this.sliderValue1 === 'fa3') {
            this.$eventBus.$emit('play51', '3')
          } else if (this.sliderValue1 === 'zi') {
            // 自定义还没写
          }
        }
      }
    },
    async placeName (txt) {
      const obj = this.riversectionlist.find(item => item.name === txt)
      const newObj = {
        waterLevel1: [],
        waterLevel2: [],
        waterLevel3: [],
        leftHigh: [],
        rightHigh: [],
        customWaterLevel: [],
        dateTime: []
      }
      obj.valueList.forEach(item => {
        newObj.waterLevel1.push(item.waterLevel1)
        newObj.waterLevel2.push(item.waterLevel2)
        newObj.waterLevel3.push(item.waterLevel3)
        newObj.customWaterLevel.push(item.customWaterLevel)
        newObj.leftHigh.push(item.leftHigh)
        newObj.rightHigh.push(item.rightHigh)
        newObj.dateTime.push(item.dateTime)
      })
      this.riversectionObj = newObj
      console.log('断面水位过程echarts', this.riversectionObj)
      this.initRrightChart2(this.riversectionObj)
    },
    // 重播
    replay () {
      this.$eventBus.$emit('replay', () => {
        if (this.sliderValue1 === 'fa1') {
          return '1'
        } else if (this.sliderValue1 === 'fa2') {
          return '2'
        } else if (this.sliderValue1 === 'fa3') {
          return '3'
        } else if (this.sliderValue1 === 'zi') {
          // 自定义还没写
        }
      })
    },
    // 获取断面水位过程全部列表
    async getRiversectionlist () {
      let res
      if (this.$store.state.rTop1Value === 0) {
        res = await getRiversectionlistApi(this.$store.state.szfxData)
        console.log('预报雨量断面水位过程全部列表', res)
      } else if (this.$store.state.rTop1Value === 1) {
        res = await getRiversectionlistApi({
          isInfa: true
        })
        console.log('自定义雨量断面水位过程全部列表', res)
      } else if (this.$store.state.rTop1Value === 2) {
        res = await getRiversectionlistApi(this.$store.state.szfxData)
        console.log('自定义雨量断面水位过程全部列表', res)
      }
      this.riversectionlist = res
    },
    // 受灾分析
    async getTotalrainData () {
      let res
      if (this.$store.state.rTop1Value === 0) {
        res = await getTotalrainApi(this.$store.state.szfxData)
        console.log('预报雨量受灾分析', res)
      } else if (this.$store.state.rTop1Value === 1) {
        res = await getTotalrainApi({
          isInfa: true
        })
        console.log('台风受灾分析', res)
      } else if (this.$store.state.rTop1Value === 2) {
        res = await getTotalrainApi(this.$store.state.szfxData)
        console.log('自定义受灾分析', res)
      }
      this.f3l2Data = res
      this.listScrollData1 = this.f3l2Data.area
    },
    // 预测最高水位
    async getMaxwaterlevelData () {
      // let num = 0
      // if (this.$store.state.form1.level) {
      //   const gmArr = Object.values(this.$store.state.form1.gateOpenMap)
      //   gmArr.forEach(item => {
      //     num += item[0].e
      //   })
      // }
      let res
      if (this.$store.state.rTop1Value === 0) {
        res = await getMaxwaterlevelApi(this.$store.state.szfxData)
        console.log('预测雨量最高水位', res)
      } else if (this.$store.state.rTop1Value === 1) {
        res = await getMaxwaterlevelApi({
          isInfa: true
        })
        console.log('烟花台风最高水位', res)
      } else if (this.$store.state.rTop1Value === 2) {
        res = await getMaxwaterlevelApi(this.$store.state.szfxData)
        console.log('自定义雨量最高水位', res)
      }
      const arr = [[], []]
      res.forEach(item => {
        arr[0].push({
          name: item.name,
          one: item.plan1,
          two: item.plan2,
          three: item.plan3,
          zi: item.customPlan,
          height: item.leftHigh
        })
        arr[1].push({
          name: item.name,
          one: item.plan1,
          two: item.plan2,
          three: item.plan3,
          zi: item.customPlan,
          height: item.rightHigh
        })
      })
      //  监测最高水位
      this.f3r3Data = arr
      this.listScrollData2 = this.f3r3Data[0]
      console.log('查看预测最高水位处理后', this.f3r3Data)
    },
    // 调度过程预演
    async getDemoChartData () {
      if (this.$store.state.rTop1Value === 0) {
        const obj1 = {
          x: [],
          y: [{ one: [], two: [], three: [] }, { one: [], two: [], three: [] }]
        }
        obj1.x = this.$store.state.dxObj1.x[0]
        this.$store.state.dxObj1.ku.forEach((item, index) => {
          if (index === 0) {
            obj1.y[0].one = item
          } else if (index === 1) {
            obj1.y[0].two = item
          } else if (index === 2) {
            obj1.y[0].three = item
          }
        })
        this.$store.state.dxObj1.xia.forEach((item, index) => {
          if (index === 0) {
            obj1.y[1].one = item
          } else if (index === 1) {
            obj1.y[1].two = item
          } else if (index === 2) {
            obj1.y[1].three = item
          }
        })
        console.log('未来调度过程预演', obj1)
        this.$store.commit('setFutureDiaoDuData', obj1)

        this.$nextTick(() => {
          this.initDemoChart(this.$store.state.futureDiaoDuData.x, this.$store.state.futureDiaoDuData.y[0], 0)
        })
      } else if (this.$store.state.rTop1Value === 1) {
        const obj2 = {
          x: [],
          y: [{ one: [], two: [], three: [] }, { one: [], two: [], three: [] }]
        }
        obj2.x = this.$store.state.dxObj1.x[0]
        this.$store.state.dxObj1.ku.forEach((item, index) => {
          if (index === 0) {
            obj2.y[0].one = item
          } else if (index === 1) {
            obj2.y[0].two = item
          } else if (index === 2) {
            obj2.y[0].three = item
          }
        })
        this.$store.state.dxObj1.xia.forEach((item, index) => {
          if (index === 0) {
            obj2.y[1].one = item
          } else if (index === 1) {
            obj2.y[1].two = item
          } else if (index === 2) {
            obj2.y[1].three = item
          }
        })
        console.log('烟花台风调度过程预演', obj2)
        this.$store.commit('setTfDiaoDuData', obj2)
        this.$nextTick(() => {
          this.initDemoChart(this.$store.state.tfDiaoDuData.x, this.$store.state.tfDiaoDuData.y[0], 0)
        })
      } else if (this.$store.state.rTop1Value === 2) {
        const obj3 = {
          x: [],
          y: [{ one: [], two: [], three: [] }, { one: [], two: [], three: [] }]
        }
        if (this.$store.state.rainCalcFlagLR === 0) {
          obj3.x = this.$store.state.rainDxZiObj.x[0]
          this.$store.state.rainDxZiObj.ku.forEach((item, index) => {
            if (index === 0) {
              obj3.y[0].one = item
            } else if (index === 1) {
              obj3.y[0].two = item
            } else if (index === 2) {
              obj3.y[0].three = item
            }
          })
          this.$store.state.rainDxZiObj.xia.forEach((item, index) => {
            if (index === 0) {
              obj3.y[1].one = item
            } else if (index === 1) {
              obj3.y[1].two = item
            } else if (index === 2) {
              obj3.y[1].three = item
            }
          })
          console.log('自定义雨量调度过程预演', obj3)
          this.$store.commit('setRainZiDiaoDuData', obj3)
          this.$nextTick(() => {
            this.initDemoChart(this.$store.state.rainZiDiaoDuData.x, this.$store.state.rainZiDiaoDuData.y[0], 0)
          })
        } else if (this.$store.state.rainCalcFlagLR === 1) {
          obj3.x = this.$store.state.rainDxZiAddObj.x[0]
          this.$store.state.rainDxZiAddObj.ku.forEach((item, index) => {
            if (index === 0) {
              obj3.y[0].one = item
            } else if (index === 1) {
              obj3.y[0].two = item
            } else if (index === 2) {
              obj3.y[0].three = item
            }
          })
          this.$store.state.rainDxZiAddObj.xia.forEach((item, index) => {
            if (index === 0) {
              obj3.y[1].one = item
            } else if (index === 1) {
              obj3.y[1].two = item
            } else if (index === 2) {
              obj3.y[1].three = item
            }
          })
          console.log('自定义雨量增量调度过程预演', obj3)
          this.$store.commit('setRainZiDiaoDuData', obj3)
          this.$nextTick(() => {
            this.initDemoChart(this.$store.state.rainZiDiaoDuData.x, this.$store.state.rainZiDiaoDuData.y[0], 0)
          })
        }
      }
    },
    sliderSelect (value) {
      this.sliderFlag = false
      this.sliderPlay = false
      this.sliderValue = 0
      console.log('触发stop')
      this.$eventBus.$emit('stop51')
    },

    formatTooltip (val) {
      return val
    },
    lt3DialogBtn (i) {
      this.bigChartBtnIndex = i
      if (this.scrollTitle === '受灾分析') {
        if (i === 0) {
          this.scrollData = this.f3l2Data.area
        } else if (i === 1) {
          this.scrollData = this.f3l2Data.depth
        } else if (i === 2) {
          this.scrollData = this.f3l2Data.reach
        }
      } else if (this.scrollTitle === '预测最高水位') {
        this.scrollData = this.f3r3Data[this.bigChartBtnIndex]
      }
    },
    openLT3 (title, arr) {
      this.scrollTitle = title
      this.lt3Show = true
      this.btnArr = arr
      if (title === '受灾分析') {
        this.scrollData = this.listScrollData1
      } else if (title === '预测最高水位') {
        this.scrollData = this.f3r3Data[this.rTop2Index]
      }
    },
    closeLT3 () {
      this.lt3Show = false
    },
    open () {
      this.$eventBus.$emit('open')
    },
    // 51
    gk (i) {
      this.$eventBus.$emit('hidden')
      if (i === 1) {
        this.$eventBus.$emit('gk', 'gk1')
      } else if (i === 2) {
        this.$eventBus.$emit('gk', 'gk2')
      } else if (i === 3) {
        this.$eventBus.$emit('gk', 'gk3')
      }
    },
    // 弹层
    bigChartBtn (i) {
      if (this.chartTitle === '调度过程预演') {
        this.lTop2Btn(i)
      } else if (this.chartTitle === '堤防风险统计') {
        this.rTop1Btn(i)
      } else if (this.chartTitle === '断面水位过程') {
        console.log('没有数据')
      }
    },
    openChart (title, arr, i) {
      // this.reset = true
      this.chartTitle = title
      this.bigChartBtnIndex = i
      this.bigChartBtnArr = arr
      if (title === '断面水位过程') {
        if (this.riversectionObj.dateTime && this.riversectionObj.dateTime.length > 0) {
          this.chartShow2 = true
          this.$nextTick(() => this.initRrightChart2Copy(this.riversectionObj))
        }
      } else {
        this.chartShow = true
        if (title === '调度过程预演') {
          if (this.$store.state.rTop1Value === 0) {
            this.$nextTick(() => this.initDemoChartCopy(this.$store.state.futureDiaoDuData.x, this.$store.state.futureDiaoDuData.y[i], i))
          } else if (this.$store.state.rTop1Value === 1) {
            this.$nextTick(() => this.initDemoChartCopy(this.$store.state.tfDiaoDuData.x, this.$store.state.tfDiaoDuData.y[i], i))
          } else if (this.$store.state.rTop1Value === 2) {
            this.$nextTick(() => this.initDemoChartCopy(this.$store.state.rainZiDiaoDuData.x, this.$store.state.rainZiDiaoDuData.y[i], i))
          }
        } else if (title === '堤防风险统计') {
          if (this.$store.state.rTop1Value === 0) {
            this.$nextTick(() => this.initRrightChart1Copy(this.f3r1Data.x[i], this.f3r1Data.y[i]))
          } else if (this.$store.state.rTop1Value === 1) {
            this.$nextTick(() => this.initRrightChart1Copy(this.f3r1Data.x[i], this.f3r1Data.y[i]))
          } else if (this.$store.state.rTop1Value === 2) {
            this.$nextTick(() => this.initRrightChart1Copy(this.f3r1Data.x[i], this.f3r1Data.y[i]))
          }
        } else if (title === '缩略图') {
          console.log('123')
        }
      }
    },
    closeChart (flag) {
      this.chartShow = flag
      this.chartShow2 = flag
      // this.reset = false
      this.bigChartBtnArr = []
      this.bigChartBtnIndex = 0
    },
    // 隐藏显示全部
    isShowBtn () {
      this.isShow = !this.isShow
      if (this.isShow === true) {
        this.$nextTick(() => {
          // this.initChart()
        })
      }
    },
    // 调度过程预演
    lTop2Btn (i) {
      if (this.chartShow) {
        this.bigChartBtnIndex = i
        if (this.$store.state.rTop1Value === 0) {
          this.initDemoChartCopy(this.$store.state.futureDiaoDuData.x, this.$store.state.futureDiaoDuData.y[i], i)
        } else if (this.$store.state.rTop1Value === 1) {
          this.initDemoChartCopy(this.$store.state.tfDiaoDuData.x, this.$store.state.tfDiaoDuData.y[i], i)
        } else if (this.$store.state.rTop1Value === 2) {
          this.initDemoChartCopy(this.$store.state.rainZiDiaoDuData.x, this.$store.state.rainZiDiaoDuData.y[i], i)
        }
      } else {
        this.lTop2Index = i
        if (this.$store.state.rTop1Value === 0) {
          this.initDemoChart(this.$store.state.futureDiaoDuData.x, this.$store.state.futureDiaoDuData.y[i], i)
        } else if (this.$store.state.rTop1Value === 1) {
          this.initDemoChart(this.$store.state.tfDiaoDuData.x, this.$store.state.tfDiaoDuData.y[i], i)
        } else if (this.$store.state.rTop1Value === 2) {
          this.initDemoChart(this.$store.state.rainZiDiaoDuData.x, this.$store.state.rainZiDiaoDuData.y[i], i)
        }
      }
    },
    // 受灾分析
    lTop3Btn (i) {
      this.lTop3Index = i
      this.bigChartBtnIndex = i
      if (i === 0) {
        this.listScrollData1 = this.f3l2Data.area
      } else if (i === 1) {
        this.listScrollData1 = this.f3l2Data.depth
      } else if (i === 2) {
        this.listScrollData1 = this.f3l2Data.reach
      }
    },
    // 堤防风险统计
    rTop1Btn (i) {
      if (this.chartShow) {
        this.bigChartBtnIndex = i
        this.initRrightChart1Copy(this.f3r1Data.x[i], this.f3r1Data.y[i])
      } else {
        this.rTop1Index = i
        this.initRrightChart1(this.f3r1Data.x[i], this.f3r1Data.y[i])
      }
    },
    // 预测最高水位
    rTop2Btn (i) {
      this.rTop2Index = i
      this.bigChartBtnIndex = i
      if (i === 0) {
        this.listScrollData2 = this.f3r3Data[0]
      } else if (i === 1) {
        this.listScrollData2 = this.f3r3Data[1]
      }
      // 在这里进行渲染下面的图表
      // this.initRrightChart2()
    },
    // 滚动条更新
    scrollUpdate () {
      this.listScrollData.push()
      this.$refs.seamlessScrollColumn.reset()
    },
    // 图表
    initChart () {
      // this.initDemoChart(this.$store.state.diaoDuData., this.$store.state.diaoDuData.y[0], 0)
      // this.initRrightChart1(this.f3r1Data.x[0], this.f3r1Data.y[0])
      // this.initRrightChart2(this.f3r2Data.x[0], this.f3r2Data.y[0])
      this.echarts.init(document.getElementById('demoChart')).resize()
      // this.echarts.init(document.getElementById('right-chart1')).resize()
      this.echarts.init(document.getElementById('right-chart2')).resize()
      this.echarts.init(document.getElementById('big-chart')).resize()
    },

    initDemoChart (x, y, flag) {
      let dan
      if (flag === 0) {
        dan = ' m'
      } else if (flag === 1) {
        dan = ' m³/s'
      }
      // let yMin = Math.floor((Math.min(Math.min(...y.one), Math.min(...y.two), Math.min(...y.three))) - 1)
      let yMin = Math.floor((Math.min(Math.min(...y.one), Math.min(...y.two), Math.min(...y.three))) - 1)
      if (yMin < 0) yMin = 0
      this.echarts.init(document.getElementById('demoChart')).clear()
      const myChart = this.echarts.init(document.getElementById('demoChart'))
      const option = {
        grid: {
          show: true,
          top: 42,
          right: 30,
          left: 0,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: ({ value }) => Number(value).toFixed(2)
            }
          }
        },
        legend: {
          data: ['推荐方案', '方案2', '方案3', '自定义方案'],
          top: 5,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 186, 0, 0.2)' },
            { offset: 1, color: 'rgba(255, 186, 0, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.2)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 87, 87, 0.2)' },
            { offset: 1, color: 'rgba(255, 87, 87, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.2)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: x,
          name: '点',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: -5
          },
          nameGap: 25,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          name: 'm',
          nameGap: 12,
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          min: yMin,
          axisLine: {
            show: false
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: true
            },
            lineStyle: {}
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value, index) => Number(value).toFixed(2)
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '推荐方案',
            barWidth: 15,
            data: y.one,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FFBA00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          },
          {
            name: '方案2',
            barWidth: 15,
            data: y.two,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          },
          {
            name: '方案3',
            barWidth: 15,
            data: y.three,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF5757'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          },
          {
            name: '自定义方案',
            data: y.four,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          }
        ]
      }
      myChart.setOption(option)
      window.resize = myChart.resize
    },
    initDemoChartCopy (x, y, flag) {
      let dan
      if (flag === 0) {
        dan = ' m'
      } else if (flag === 1) {
        dan = ' m³/s'
      }
      // let yMin = Math.floor((Math.min(Math.min(...y.one), Math.min(...y.two), Math.min(...y.three))) - 1)
      let yMin = Math.floor((Math.min(Math.min(...y.one), Math.min(...y.two), Math.min(...y.three))) - 1)
      if (yMin < 0) yMin = 0
      this.echarts.init(document.getElementById('big-chart')).clear()
      const myChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: true,
          top: 42,
          right: 30,
          left: 0,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        legend: {
          data: ['推荐方案', '方案2', '方案3', '自定义方案'],
          top: 5,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 186, 0, 0.2)' },
            { offset: 1, color: 'rgba(255, 186, 0, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.2)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 87, 87, 0.2)' },
            { offset: 1, color: 'rgba(255, 87, 87, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.2)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: x,
          name: '点',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: -5
          },
          nameGap: 25,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          name: 'm',
          nameGap: 12,
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          min: yMin,
          axisLine: {
            show: false
          },
          axisPointer: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value, index) => Number(value).toFixed(2)
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '推荐方案',
            barWidth: 15,
            data: y.one,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FFBA00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          },
          {
            name: '方案2',
            barWidth: 15,
            data: y.two,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          },
          {
            name: '方案3',
            barWidth: 15,
            data: y.three,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF5757'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          },
          {
            name: '自定义方案',
            data: y.four,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + dan
            }
          }
        ]
      }
      myChart.setOption(option)
      window.resize = myChart.resize
    },
    initRrightChart1 (x, y) {
      let myChart = this.echarts.init(document.getElementById('right-chart1'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('right-chart1'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['正常', '漫堤'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 8
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#60FFF6'
            }, {
              offset: 1, color: '#009DD0'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#FE2D2D'
            }, {
              offset: 1, color: '#FF6464'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['推荐方案', '方案2', '方案3', '自定义'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '数量：个',
          nameGap: 25,
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'center',
            verticalAlign: 'middle',
            padding: [0, 0, 0, 10] // 使用 padding 要将 align 属性改为 'center'
          },
          max: 20,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '正常',
            barWidth: '10%',
            data: y.normal,
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' 个'
            }
          }, {
            name: '漫堤',
            barWidth: '10%',
            data: y.warm,
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' 个'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initRrightChart1Copy (x, y) {
      let myChart = this.echarts.init(document.getElementById('big-chart'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['正常', '漫堤'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 8
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#60FFF6'
            }, {
              offset: 1, color: '#009DD0'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#FE2D2D'
            }, {
              offset: 1, color: '#FF6464'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: x || ['正常', '漫堤'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '数量：个',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          max: 20,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '正常',
            barWidth: '10%',
            data: y.normal,
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' 个'
            }
          }, {
            name: '漫堤',
            barWidth: '10%',
            data: y.warm,
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' 个'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initRrightChart2 (obj) {
      let yMin = Math.floor((Math.min(...obj.leftHigh, ...obj.rightHigh) - 10))
      if (yMin < 0) yMin = 0
      let myChart = this.echarts.init(document.getElementById('right-chart2'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('right-chart2'))
      const option = {
        grid: {
          show: true,
          left: 10,
          right: 30,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        legend: {
          data: ['推荐方案', '方案2', '方案3', '左岸堤顶高程', '右岸堤顶高程'],
          top: 5,
          left: 0,
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
          itemWidth: 20,
          itemHeight: 12,
          itemGap: 3
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 255, 255, 0.2)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.2)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 87, 87, 0.2)' },
            { offset: 1, color: 'rgba(255, 87, 87, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 201, 54, 0.2)' },
            { offset: 1, color: 'rgba(255, 201, 54, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(115, 255, 54, 0.2)' },
            { offset: 1, color: 'rgba(115, 255, 54, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: obj.dateTime,
          name: '点',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: -5
          },
          nameGap: 20,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: false
          },
          name: 'm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'middle'
          },
          nameGap: 10,
          min: yMin,
          axisPointer: {
            show: false
          },
          // interval: 1.5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value, index) => Number(value).toFixed(1)
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '推荐方案',
            barWidth: 15,
            data: obj.waterLevel1,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '方案2',
            barWidth: 15,
            data: obj.waterLevel2,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '方案3',
            barWidth: 15,
            data: obj.waterLevel3,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF5757'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '左岸堤顶高程',
            barWidth: 15,
            data: obj.leftHigh,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FFC936'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '右岸堤顶高程',
            barWidth: 15,
            data: obj.rightHigh,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#73FF36'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      this.rtop2box = true
      myChart.setOption(option)
    },
    initRrightChart2Copy (obj) {
      let yMin = Math.floor((Math.min(...obj.leftHigh, ...obj.rightHigh) - 10))
      if (yMin < 0) yMin = 0
      let myChart = this.echarts.init(document.getElementById('big-chart2'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('big-chart2'))
      const option = {
        grid: {
          show: true,
          left: 10,
          right: 30,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        legend: {
          data: ['推荐方案', '方案2', '方案3', '左岸堤顶高程', '右岸堤顶高程'],
          top: 5,
          right: '32%',
          textStyle: {
            color: '#fff',
            fontSize: 11
          },
          itemWidth: 20,
          itemHeight: 12,
          itemGap: 3
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 255, 255, 0.2)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.2)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 87, 87, 0.2)' },
            { offset: 1, color: 'rgba(255, 87, 87, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 201, 54, 0.2)' },
            { offset: 1, color: 'rgba(255, 201, 54, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(115, 255, 54, 0.2)' },
            { offset: 1, color: 'rgba(115, 255, 54, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: obj.dateTime,
          name: '点',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: -5
          },
          nameGap: 20,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: false
          },
          name: 'm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'middle'
          },
          nameGap: 10,
          min: yMin,
          axisPointer: {
            show: false
          },
          // interval: 1.5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value, index) => Number(value).toFixed(1)
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '推荐方案',
            barWidth: 15,
            data: obj.waterLevel1,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '方案2',
            barWidth: 15,
            data: obj.waterLevel2,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '方案3',
            barWidth: 15,
            data: obj.waterLevel3,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF5757'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '左岸堤顶高程',
            barWidth: 15,
            data: obj.leftHigh,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FFC936'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '右岸堤顶高程',
            barWidth: 15,
            data: obj.rightHigh,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#73FF36'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      this.rtop2box = true
      myChart.setOption(option)
    }
  },
  watch: {
    waterActiveType (newValue) {
      this.$eventBus.$emit('changeWaterType', newValue)
    },
    activePoint: {
      immediate: false,
      deep: true,
      handler (newValue) {
        console.log('改变')
        // if (!newValue) return
        this.$eventBus.$emit('activePointChange', this.activePoint)
      }
    }
  }

}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)
.xqyjcz {
  position: absolute;
  left: 430px;
  top: 90px;
  width: 140px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  z-index: 7;
  background: url("~@/assets/images/flood/process1/button.png") no-repeat center /
    100% 100%;
  &:hover {
    background: url("~@/assets/images/flood/process1/button_hover.png")
      no-repeat center / 100% 100%;
  }
  &.disabled {
    cursor: not-allowed;
  }
}
#big-chart2 {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 10px;
}
.open {
  position: absolute;
  width: 500px;
  height: 500px;
  background-color: red;
}
.is-show {
  position: absolute;
  left: 1460px;
  top: 0;
  width: 40px;
  height: 40px;
  background: url("~@/assets/images/flood/is_show.png") no-repeat center / 100%
    100%;
  cursor: pointer;
  &.hidden {
    left: 1870px;
  }
}
.getMess {
  display: block;
  position: fixed;
  top: 300px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: pink;
}
.mb {
  margin-bottom: 10px;
}
.drill {
  position: absolute;
  left: 0;
  top: 0;
  .drill-left {
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;
    .top1 ::v-deep {
      .panel-main {
        align-items: center;
      }
      .big-panel-select {
        width: 120px;
        .el-input {
          width: 120px;
          .el-input__inner {
            width: 120px;
          }
        }
      }
    }
    .programme-box {
      width: 358px;
      margin-top: 10px;
      .no {
        background-color: rgb(112, 109, 109) !important;
      }
      .programme {
        display: flex;
        align-items: center;
        height: 40px;
        color: #e8eff6;
        font-size: 14px;
        p {
          line-height: 40px;
        }
        p:nth-child(1) {
          width: 90px;
          height: 100%;
          text-align: center;
        }
        P:nth-child(2) {
          flex: 1;
          height: 100%;
          text-align: center;
        }
        button {
          width: 50px;
          height: 26px;
          background: transparent;
          color: #e8eff6;
          border-left: 1px solid #fff;
        }
      }
      .programme:nth-child(1) {
        background-color: #0d92b0;
        margin-bottom: 6px;
        p:nth-child(1) {
          background-color: #08cdbc;
        }
      }
      .programme:nth-child(2) {
        background-color: #2a78bf;
        margin-bottom: 6px;
        p:nth-child(1) {
          background-color: #42a7e5;
        }
      }
      .programme:nth-child(3) {
        background-color: #1497cd;
        margin-bottom: 6px;
        p:nth-child(1) {
          background-color: #32b2e7;
        }
      }
      .programme:nth-child(4) {
        background-color: #135ecb;
        p:nth-child(1) {
          background-color: #1879e4;
        }

        button.no {
          color: rgba(255, 255, 255, 0.8);
          cursor: not-allowed;
        }
      }
    }
    .demo-chart-box {
      position: relative;
      width: 100%;
      height: 100%;
      #demoChart {
        width: 100%;
        height: 100%;
      }
      p {
        position: absolute;
        color: #cacaca;
        font-size: 12px;
      }
      p:first-child {
        left: 30px;
        top: 22px;
      }
      p:nth-child(2) {
        right: 10px;
        bottom: 22px;
      }
    }
    .top2 {
      height: 368px !important;
      margin-bottom: 10px;
      .big-panel-title-btn-box {
        right: 30px;
      }
    }
    .top3 ::v-deep {
      .btn-box {
        margin: 15px 0;
      }
    }
  }
  .drill-right {
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .top1 ::v-deep {
      height: 312px;
      margin-bottom: 10px;
      .big-panel-title-btn-box {
        right: 30px;
      }
      #right-chart1 {
        width: 100%;
        height: 100%;
      }
      button {
        width: 40px;
      }
    }
    .top2 ::v-deep {
      height: 312px;
      .el-select {
        right: 40px;
      }
      #right-chart2 {
        width: 100%;
        height: 100%;
      }
      .left-box,
      .right-box {
        position: absolute;
        width: 44px;
        height: 170px;
      }
      .left-box {
        bottom: 19px;
        left: 49px;
        background: url("~@/assets/images/flood/ba_left.png") no-repeat left top /
          100% 100%;
      }
      .right-box {
        bottom: 19px;
        right: 30px;
        background: url("~@/assets/images/flood/ba_right.png") no-repeat right
          top / 100% 100%;
      }
      p {
        position: absolute;
        color: #cacaca;
        font-size: 12px;
      }
      p:first-child {
        left: 30px;
        top: 22px;
      }
      p:nth-child(2) {
        right: 10px;
        bottom: 22px;
      }
    }
    .top3 ::v-deep {
      height: 312px;
      margin-bottom: 10px;
      .big-panel-title-btn-box {
        right: 30px;
      }
      .scroll4 {
        margin-top: 10px;
      }
      button {
        width: 40px;
      }
    }
  }
}
.myslider ::v-deep {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 426px;
  z-index: 2;
  width: 1020px;
  height: 70px;
  background-color: rgba(3, 35, 79, 0.5);
  .btn-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100px;
    height: 100%;
    padding: 3px 0;
    color: #fff;
    label {
      width: 70px;
      cursor: pointer;
    }
    input {
      cursor: pointer;
    }
    select {
      width: 100%;
      cursor: pointer;
    }
  }
  /* 下拉选择 */
  .el-select {
    border-right: 1px solid rgba(96, 255, 246, 0.3);
    // 输入框
    .el-input {
      // 输入框选中时
      &.is-focus .el-input__inner {
        border-color: transparent;
      }
      .el-input__inner {
        width: 270px;
        height: 50px;
        background-color: transparent;
        border-color: transparent;
        color: #fff;
        font-size: 14px;
        &::placeholder {
          font-size: 14px;
        }
      }
      // 输入框箭头颜色
      .el-input__suffix {
        display: flex;
        align-items: center;
        .el-input__suffix-inner {
          i {
            color: #fff;
          }
        }
      }
    }
    // 显示的选中项
    .el-select__tags {
      span {
        .el-tag {
          background-color: #2b809e;
          border-color: $pry;
          color: #fff;
        }
      }
    }
    // 选择框的下拉弹出框
    .el-select-dropdown {
      background-color: #226697;
      border-color: #226697;
      // 弹出框的数据列表
      .el-select-dropdown__list {
        padding: 10px;
        // 弹出框的单条数据
        .el-select-dropdown__item {
          display: flex;
          align-items: center;
          height: 40px;
          margin-bottom: 4px;
          border-radius: 4px;
          color: #fff;
          font-size: 14px;
        }
      }
      // 经过选项时选项的背景色
      .el-select-dropdown__item.hover {
        background-color: #39a0bb;
      }
      // 已选中的选项
      &.is-multiple .el-select-dropdown__item.selected {
        background-color: #39a0bb;
        color: #fff;
      }
      // 弹出框三角形
      .popper__arrow {
        left: 30px !important;
        &::after {
          border-bottom-color: #226697;
          border-top-color: #226697;
        }
      }
    }
  }
  .play-box {
    display: flex;
    flex: 1;
    .replay {
      color: #fff;
      border: 0;
      margin-left: 10px;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .start {
      width: 30px;
      height: 30px;
      background: url("~@/assets/images/flood/play.png") no-repeat center / 100%
        100%;
      margin-left: 10px;
      cursor: pointer;
      &.pause {
        background: url("~@/assets/images/flood/pause.png") no-repeat center /
          100% 100%;
      }
    }
    .back {
      width: 30px;
      height: 30px;
      background: url("~@/assets/images/flood/ht.png") no-repeat center / 100%
        100%;
      margin-left: 10px;
    }
    .fast {
      width: 30px;
      height: 30px;
      background: url("~@/assets/images/flood/kj.png") no-repeat center / 100%
        100%;
      margin-left: 10px;
      margin-right: 10px;
    }
    .slider-box {
      display: flex;
      align-items: center;
      flex: 1;
      height: 30px;
      margin-left: 10px;
      padding: 0 10px;
      // 滑块
      .el-slider {
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        // 滑道
        .el-slider__runway {
          display: flex;
          align-items: center;
          background-color: rgba(114, 114, 114, 0.8);
          // 进度
          .el-slider__bar {
            background-color: #ffc774;
          }
          // 进度点盒子
          .el-slider__button-wrapper {
            // 进度点
            .el-tooltip.el-slider__button {
              width: 12px;
              height: 12px;
              border-color: #ff9900;
              background-color: #ff9900;
            }
          }
        }
      }
    }
  }
}
.lt3-dialog {
  .list-scroll-column {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    flex: 1;
    .list-scroll-title1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      width: 100%;
      height: 70px;
      background-color: rgba(96, 255, 246, 0.2);
      h4 {
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
      }
      h4:nth-child(1) {
        width: 270px;
      }
      h4:nth-child(2) {
        width: 150px;
      }
      h4:nth-child(3) {
        width: 150px;
      }
      h4:nth-child(4) {
        width: 150px;
      }
      h4:nth-child(5) {
        width: 240px;
      }
    }
    .list-scroll-main1 {
      position: relative;
      width: 100%;
      height: 510px;
      overflow: auto;
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: #d1d5d9;
        .column {
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          text-align: center;
        }
        .column1 {
          width: 270px;
        }
        .column2 {
          width: 150px;
        }
        .column3 {
          width: 150px;
        }
        .column4 {
          width: 150px;
        }
        .column5 {
          width: 240px;
        }
      }
      .row:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
      .row:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
    }
    .list-scroll-title2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      width: 100%;
      height: 70px;
      background-color: rgba(96, 255, 246, 0.2);
      h4 {
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
      }
      h4:nth-child(1) {
        width: 270px;
      }
      h4:nth-child(2) {
        width: 135px;
      }
      h4:nth-child(3) {
        width: 135px;
      }
      h4:nth-child(4) {
        width: 135px;
      }
      h4:nth-child(5) {
        width: 150px;
      }
      h4:nth-child(6) {
        width: 195px;
      }
    }
    .list-scroll-main2 {
      position: relative;
      width: 100%;
      height: 510px;
      overflow: auto;
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: #d1d5d9;
        .column {
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          text-align: center;
        }
        .column1 {
          width: 270px;
        }
        .column2 {
          width: 135px;
        }
        .column3 {
          width: 135px;
        }
        .column4 {
          width: 135px;
        }
        .column5 {
          width: 150px;
        }
        .column6 {
          width: 195px;
        }
      }
      .row:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
      .row:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
    }
  }
}
.look-dialog ::v-deep {
  .el-dialog {
    width: 1200px;
    height: 500px;
    .content {
      width: 100%;
      height: 410px;
      overflow: auto;
      &::-webkit-scrollbar {
        // 滚动条整体样式
        width: 6px !important; // 竖向滚动条宽度
        height: 0 !important; // 横向滚动条高度
      }
      &::-webkit-scrollbar-thumb {
        // 滚动条内滑块样式
        background-color: #6d9dbc !important;
        border-radius: 2px !important;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道样式
        background-color: transparent !important;
      }
      .row {
        display: flex;
        width: 100%;
        min-height: 130px;
        margin-bottom: 10px;
        .left {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 270px;
          background-color: rgba(96, 255, 246, 0.2);
          font-size: 20px;
        }
        .right {
          display: flex;
          align-items: center;
          padding: 12px 35px 12px 35px;
          background-color: rgba(96, 255, 246, 0.1);
          flex: 1;
          line-height: 28px;
          font-size: 20px;
          h4 {
            margin-right: 15px;
            color: #00ffff;
            font-size: 24px;
          }
          span {
            margin-top: 2px;
            color: #fff;
            font-size: 20px;
          }
        }
      }
      .row:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
