<template>
  <div class="prediction">
    <!-- 显示隐藏左右侧全部内容 -->
    <div
      class="is-show"
      @click="isShowAll"
      :class="{ hidden: isShow === false }"
    ></div>

    <!-- 左侧 -->
    <div class="flood-left" v-show="isShow" v-loading="pageLoading1">
      <BigPanel title="水库控运情况" class="top1">
        <div class="box">
          <div class="icon-txt">
            <div class="icon icon1"></div>
            <span>应急响应等级</span>
          </div>
          <p>
            <span>{{ $store.state.reservoirBaseData.emergency_response }}</span>
          </p>
        </div>
        <div class="box">
          <div class="icon-txt">
            <div class="icon icon2"></div>
            <span>实时水位</span>
          </div>
          <p>
            <span>{{
              Number($store.state.reservoirRealData.water_level_value).toFixed(
                2
              )
            }}</span
            >m
          </p>
        </div>
        <div class="box">
          <div class="icon-txt">
            <div class="icon icon3"></div>
            <span>入库流量</span>
          </div>
          <p>
            <span>{{
              Number($store.state.reservoirRealData.inflow).toFixed(2)
            }}</span
            >m³/s
          </p>
        </div>
        <div class="box">
          <div class="icon-txt">
            <div class="icon icon4"></div>
            <span>可纳库容(汛限水位)</span>
          </div>
          <p>
            <span>{{
              (
                Number($store.state.reservoirRealData.storage_capacity) *
                (1 - $store.state.reservoirRealData.water_storage_rate / 100)
              ).toFixed(2)
            }}</span
            >万m³
          </p>
        </div>
        <div class="line"></div>
        <div class="box">
          <div class="icon-txt">
            <div class="icon icon5"></div>
            <span>出库流量</span>
          </div>
          <p>
            <span>{{
              Number($store.state.reservoirRealData.outflow).toFixed(2)
            }}</span
            >m³/s
          </p>
        </div>
        <div class="box">
          <div class="icon-txt">
            <div class="icon icon6"></div>
            <span>溢洪道下泄流量</span>
          </div>
          <p><span>0</span>m³/s</p>
        </div>
        <div class="line"></div>
        <div class="box2-father">
          <div
            class="box2"
            v-for="(item, index) in sluicegateData.data"
            :key="index"
          >
            <div class="icon">
              <div class="door">
                {{ sluicegateData.data[index].content }}
              </div>
            </div>
            <p>
              开度(m)<span>{{
                Number(sluicegateData.data[index].opening).toFixed(2)
              }}</span>
            </p>
            <p>
              流量(m³/s)<span>{{
                Number(sluicegateData.data[index].flow).toFixed(2)
              }}</span>
            </p>
          </div>
        </div>
        <div class="line"></div>
        <div class="video-box">
          <el-carousel>
            <el-carousel-item v-for="item in videoArr" :key="item.id">
              <div class="video" @click="openVideo(item)">
                <img :src="item.realtime_pic" />
                <div class="icon" v-show="!videoShow" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </BigPanel>
    </div>

    <!-- 右侧 -->
    <div class="flood-right" v-show="isShow" v-loading="pageLoading2">
      <BigPanel class="top1" title="雨量预报">
        <template #title>
          <div
            class="is-big"
            @click="openChart('雨量预报', dayArr, rTop1Index)"
          ></div>
          <el-select
            v-model="rTop1Value"
            placeholder="请选择"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in rTop1Options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <button
            class="againSetting"
            v-if="rTop1Value === 2"
            @click="rainShow = true"
          >
            再次设置
          </button>
        </template>
        <div class="big-panel-btn-box" v-if="false">
          <button
            v-for="(item, index) in dayArr"
            :key="index"
            @click="rTop1Btn(index)"
            :class="{ btnActive: rTop1Index === index }"
          >
            {{ item }}
          </button>
        </div>
        <div class="flood-chart-box chart1">
          <div id="flood-chart1"></div>
        </div>
      </BigPanel>
      <BigPanel class="top2" title="入库流量">
        <template #title>
          <div
            class="is-big"
            @click="openChart('入库流量', dayArr, rTop2Index)"
          ></div>
        </template>
        <div class="big-panel-btn-box" v-if="false">
          <button
            v-for="(item, index) in dayArr"
            :key="index"
            @click="rTop2Btn(index)"
            :class="{ btnActive: rTop2Index === index }"
          >
            {{ item }}
          </button>
        </div>
        <div class="flood-chart-box chart2">
          <div id="flood-chart2"></div>
        </div>
      </BigPanel>
      <BigPanel title="调度方案" class="top3">
        <template #title>
          <div class="is-big" @click="openDuXun"></div>
          <!-- v-if="!rainCalcFlag" -->
          <el-select
            @change="duxunSelect"
            v-model="selectValue"
            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 class="flood-chart-box chart3">
          <div id="flood-chart3"></div>
          <!-- :class="{ visi_hidden: rainCalcFlag }" -->
        </div>
      </BigPanel>
    </div>

    <!-- 通用图表放大 -->
    <BigChart :show="chartShow" @close-dialog="closeChart" :title="chartTitle">
      <div class="big-chart-btn-box" v-if="bigChartBtnArr.length > 0 && false">
        <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="videoShow"
      @close-dialog="videoClose"
      title="视频监控"
      class="videoDialog"
    >
      <iframe :src="url" frameborder="0" id="video-f"></iframe>
    </BigChart>

    <!-- 度汛方案图表放大 -->
    <BigChart
      class="du-xun"
      :show="DuXunShow"
      @close-dialog="closeDuXun"
      title="调度方案"
    >
      <el-form :model="formData" :rules="formRules" ref="duXunForm">
        <el-form-item label="方案选择：" prop="fun">
          <!-- v-if="!rainCalcFlag" -->
          <!-- 下拉选择 -->
          <el-select
            class="big-panel-select"
            v-model="formData.fun"
            placeholder="请选择"
            filterable
            @change="dxDialogSelect"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in duXunOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间" prop="date">
          <el-date-picker
            :disabled="formData.fun !== 3"
            v-model="formData.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开闸时间"
            end-placeholder="关闸时间"
            clearable
            :editable="false"
            popper-class="el-picker-panel1"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="formData.fun === 3" label="水位：" prop="water">
          <el-input
            class="water"
            v-model="formData.water"
            placeholder="输入水位"
          >
            <template #suffix>m</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="formData.fun === 3">
          <el-button class="calc" @click.prevent="calc" :loading="calcloading"
            >计算</el-button
          >
        </el-form-item>
      </el-form>
      <div class="door-box">
        <div class="box">
          <!-- 中间三个 13.32m -->
          <div class="t-box">最大开度 4.5m</div>
          <div class="b-box">
            <span>1#闸门</span>
            <input
              :min="0"
              :max="4.5"
              type="number"
              :readonly="formData.fun !== 3"
              @input="transInput"
              :class="{ zi: formData.fun === 3 }"
              v-model="form1.gateOpenMap[1][0].e"
            />
            <i>m</i>
          </div>
        </div>
        <div class="box">
          <!-- 中间三个 13.32m -->
          <div class="t-box">最大开度 13.32m</div>
          <div class="b-box">
            <span>2#闸门</span>
            <input
              @input="transInput"
              :min="0"
              :max="13.32"
              type="number"
              :readonly="formData.fun !== 3"
              :class="{ zi: formData.fun === 3 }"
              v-model="form1.gateOpenMap[2][0].e"
            />
            <i>m</i>
          </div>
        </div>
        <div class="box">
          <!-- 中间三个 13.32m -->
          <div class="t-box">最大开度 13.32m</div>
          <div class="b-box">
            <span>3#闸门</span>
            <input
              @input="transInput"
              :min="0"
              :max="13.32"
              type="number"
              :readonly="formData.fun !== 3"
              :class="{ zi: formData.fun === 3 }"
              v-model="form1.gateOpenMap[3][0].e"
            />
            <i>m</i>
          </div>
        </div>
        <div class="box">
          <!-- 中间三个 13.32m -->
          <div class="t-box">最大开度 13.32m</div>
          <div class="b-box">
            <span>4#闸门</span>
            <input
              @input="transInput"
              :min="0"
              type="number"
              :max="13.32"
              :readonly="formData.fun !== 3"
              :class="{ zi: formData.fun === 3 }"
              v-model="form1.gateOpenMap[4][0].e"
            />
            <i>m</i>
          </div>
        </div>
        <div class="box">
          <!-- 中间三个 13.32m -->
          <div class="t-box">最大开度 4.5m</div>
          <div class="b-box">
            <span>5#闸门</span>
            <input
              @input="transInput"
              :min="0"
              type="number"
              :max="4.5"
              :readonly="formData.fun !== 3"
              :class="{ zi: formData.fun === 3 }"
              v-model="form1.gateOpenMap[5][0].e"
            />
            <i>m</i>
          </div>
        </div>
      </div>
      <div class="txt">{{ duXunTxt }}</div>
      <div id="big-chart-dx"></div>
    </BigChart>

    <!-- 雨量自定义弹窗 -->
    <BigChart
      class="rain-dialog"
      :show="rainShow"
      @close-dialog="closeRain"
      title="雨量自定义"
    >
      <div class="btn-box">
        <div
          class="button"
          @click="rainDialogBtn(0)"
          :class="{ active: rainDialogIndex === 0 }"
        >
          <div class="icon" :class="{ active: rainDialogIndex === 0 }"></div>
          <span>根据浙江省暴雨时程分配</span>
        </div>
        <div
          class="button"
          @click="rainDialogBtn(1)"
          :class="{ active: rainDialogIndex === 1 }"
        >
          <div class="icon" :class="{ active: rainDialogIndex === 1 }"></div>
          <span>在原有降雨基础上增加雨量</span>
        </div>
      </div>
      <div class="content" v-show="rainDialogIndex === 0">
        <el-form
          :model="rainDialogForm"
          :rules="rainDialogFormRules"
          ref="rainDialogForm"
        >
          <el-form-item label="降雨起始时间：" prop="datetime">
            <!-- 日期时间选择器 -->
            <el-date-picker
              v-model="rainDialogForm.datetime"
              type="datetime"
              placeholder="选择日期时间"
              popper-class="el-picker-panel3"
              @change="dateChange"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item class="item-father">
            <el-form-item label="第一天降雨总量(mm)：" prop="firstTotal">
              <el-input
                v-model="rainDialogForm.firstTotal"
                placeholder="请输入降雨总量"
              ></el-input>
            </el-form-item>
            <el-form-item label="第一天最大降雨时段" prop="firstMaxTime">
              <el-select
                v-model="rainDialogForm.firstMaxTime"
                placeholder="请选择最大降雨时段"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in rainDialogSelectOptions1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item class="item-father">
            <el-form-item label="第二天降雨总量(mm)：" prop="secondTotal">
              <el-input
                v-model="rainDialogForm.secondTotal"
                placeholder="请输入降雨总量"
              ></el-input>
            </el-form-item>
            <el-form-item label="第二天最大降雨时段" prop="secondMaxTime">
              <el-select
                v-model="rainDialogForm.secondMaxTime"
                placeholder="请选择最大降雨时段"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in rainDialogSelectOptions1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item class="item-father">
            <el-form-item label="第三天降雨总量(mm)：" prop="thirdTotal">
              <el-input
                v-model="rainDialogForm.thirdTotal"
                placeholder="请输入降雨总量"
              ></el-input>
            </el-form-item>
            <el-form-item label="第三天最大降雨时段" prop="thirdMaxTime">
              <el-select
                v-model="rainDialogForm.thirdMaxTime"
                placeholder="请选择最大降雨时段"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in rainDialogSelectOptions1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="rainBtnLoading"
              @click.prevent="rainCalc"
              class="rain-btn"
            >
              <span>计算</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content content2" v-show="rainDialogIndex === 1">
        <el-form
          :model="rainAddForm"
          :rules="rainAddFormRules"
          ref="rainAddForm"
          v-loading="tableLoading"
        >
          <el-form-item prop="date">
            <el-date-picker
              v-model="rainAddForm.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              clearable
              popper-class="el-picker-panel5"
              @change="rainDialogDate2Change"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button size="mini" @click.prevent="rainAddFormQuery">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <table>
              <thead>
                <tr>
                  <th>降雨时间</th>
                  <th>降雨量(mm)</th>
                  <th>自定义增量(mm)</th>
                  <th
                    v-if="
                      rainZiAddListData.original &&
                      rainZiAddListData.original.length >= 7
                    "
                  ></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, index) in rainZiAddListData.original"
                  :key="item.id"
                >
                  <td>{{ item.date }}</td>
                  <td>{{ item.rainfall }}</td>
                  <td class="td-input">
                    <!-- <el-form-item :prop="`val${index}`"> -->
                    <el-input-number
                      v-model="rainAddForm[`val${index}`]"
                      :min="0"
                      :max="10"
                      :step="1"
                      :precision="2"
                      controls-position="right"
                      @change="inputNumberChange"
                    ></el-input-number>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form-item>
          <el-form-item class="el-form-item-calc">
            <el-button
              :loading="rainAddFormCalcLoading"
              @click.prevent="rainAddFormCalc"
              >计算</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- <input
        type="number"
        placeholder="请输入雨量 (0 - 500) / mm"
        v-model="rainInput"
      />
      <el-button
        :loading="rainBtnLoading"
        @click.prevent="rainCalc"
        class="rain-btn"
        :class="{ no: rainInput < 0 || rainInput === '' || rainInput > 500 }"
        :disabled="rainInput < 0 || rainInput === '' || rainInput > 500"
      >
        <span v-show="!rainBtnLoading">计算</span>
      </el-button> -->
    </BigChart>

    <!-- 烟花台风弹窗信息框 -->
    <div class="tf-water-level" v-if="tf_water_level_show">
      <div class="close" @click="tf_water_level_show = false"></div>
      <div class="title">水库水情预测</div>
      <div class="content">
        <div class="box">
          <span>初始库水位：</span>
          <!-- <span
            >{{
              Number($store.state.reservoirRealData.water_level_value).toFixed(
                2
              )
            }}m</span
          > -->
          <span>162.14m</span>
        </div>
        <div class="box">
          <span>预测库水位：</span>
          <!-- <span>{{ $store.state.ycWater }}m</span> -->
          <span :class="{ red: test > 164 }">{{ test }}m</span>
          <p v-if="test > 164">
            超过警戒水位：<span>{{ Number(test - 164).toFixed(2) }}</span
            ><i>m</i>
          </p>
        </div>
      </div>
    </div>
    <div
      class="tf-water-level-small"
      @click="tf_water_level_show = true"
      v-if="tf_water_level_show === false && rTop1Value === 1"
    ></div>
  </div>
</template>

<script>
import { getFutureDxApi, getFutureRainApi, getFutureFlowInApi, getTfHisRainAllApi, getTfHisRainApi, getTfHisFlowInApi, getRainZiApi, getFlowInZiApi, getTfListApi, getRainDxZiApi, getRainZiAddListApi, getRainZiAddFlowinApi, getRainZiAddDxApi, getTfDxApi } from '@/api/flood.js'
import { encrypt } from '@/utils/crypto'
import { mapActions } from 'vuex'
import { getSluicegateApi, getReservoirBaseApi, getReservoirRealApi } from '@/api/reservoir.js'
import { getVideoApi } from '@/api/home.js'
// import { getTfDxApi, , getFutureZiApi, getTfZiApi, getRainCalcZiApi } from '@/api/flood.js'
export default {
  name: 'Prediction',
  async created () {
    // this.getRainZiAddListData()
    // 打开loading
    this.pageLoading1 = true
    this.pageLoading2 = true
    // 雨量自定义的时间选择
    for (let i = 0; i <= 23; i++) {
      this.rainDialogSelectOptions1.push({
        value: i,
        label: i >= 10 ? `${i}:00` : `0${i}:00`
      })
      this.rainDialogSelectOptions2.push({
        value: i,
        label: i >= 10 ? `${i}:00` : `0${i}:00`
      })
      this.rainDialogSelectOptions3.push({
        value: i,
        label: i >= 10 ? `${i}:00` : `0${i}:00`
      })
    }
    // 重新进入页面再重置vuex变量
    this.$store.commit('setRTop1Value', 0)
    // 限制下方按钮,等待数据拿到保存完毕
    this.$store.commit('setFooterDis', true) // loading
  },
  async mounted () {
    try {
      // this.$eventBus.$on('addWaterLevel', (val) => {
      //   this.$store.commit('setYCWater', val.toFixed(2))
      // })
      // 视频监控
      this.getVideoData()
      // 泄洪闸
      this.getSluicegateData()
      // 台风历史雨量总计,显示到下拉选择框
      this.getTfHisRainAllData()
      // 不存在再去取
      if (!this.$store.state.reservoirRealData.air_value) {
        // 三个水库信息
        await this.http1()
      }

      // 默认拿预报雨量下的三个图表
      await this.http2()
      // 数据保存完毕,开放下方按钮
      this.$store.commit('setFooterDis', false)
      this.pageLoading1 = false
      this.pageLoading2 = false
      // 统一渲染三个图表
      this.initChart()
      window.addEventListener('resize', this.chartResize)

      console.log('查看度汛方案提取出来的数据', this.$store.state.szfxData)
    } catch (error) {
      this.$store.commit('setFooterDis', false)
      this.pageLoading1 = false
      this.pageLoading2 = false
    }
  },
  destroyed () {
    clearInterval(this.timer)
    clearInterval(this.timer2)
    this.floodChart1.dispose()
    this.floodChart2.dispose()
    this.floodChart3.dispose()
    this.bigChart.dispose()
    this.bigChart2.dispose()
    window.removeEventListener('resize', this.chartResize)
  },
  data () {
    const inputNumber = (rule, value, callback) => {
      if (!Number(value)) {
        callback(new Error('请输入纯数字'))
      } else if (Number(value) < 0) {
        callback(new Error('请输入大于 0 的数字'))
      } else {
        callback()
      }
    }
    const inputNumber1 = (rule, value, callback) => {
      if (!(Number(value) + 1)) {
        callback(new Error('请输入纯数字'))
      } else if (Number(value < 0 || value > 500)) {
        callback(new Error('请输入 0 ~ 500 的数字'))
      } else {
        callback()
      }
    }
    const inputNumber8 = (rule, value, callback) => {
      if (!Number(value) && value !== '') {
        callback(new Error('请输入纯数字'))
      } else if (Number(value < 0 || value > 500)) {
        callback(new Error('请输入 0 ~ 500 的数字'))
      } else {
        callback()
      }
    }
    return {
      // loading
      pageLoading1: false,
      pageLoading2: false,
      // 图表
      floodChart1: null,
      floodChart2: null,
      floodChart3: null,
      bigChart: null,
      bigChart2: null,
      // 泄洪闸
      sluicegateData: {},
      // 视频
      videoArr: [],
      rainDialogIndex: 0,
      // 限制时间选择器的规则
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6 // 只能选择今天及今天之前的日期
          // return time.getTime() > Date.now() - 8.64e7; //只能选择今天之前的日期，连今天的日期也不能选
        }
      },
      // 雨量预报(预报和台风共用)
      futureRainDataEchart: {
        x: [],
        y: []
      },
      // 入库流量(预报和台风共用)
      flowInData: {
        x: [],
        y: [],
        waterlY: []
      },
      // 度汛方案下拉框历史选择的select记录,每次关闭自定义度汛方案恢复最后选择的
      hisDXSelect: 0,
      // 烟花台风
      timer: null,
      timer2: null,
      test: 162.14,
      // 雨量自定义增量点击计算后提取出度汛方案需要的数据
      timeRainfalls: [],
      // 台风开关标识记忆 - 待定
      tfFlag: false,
      // 烟花台风弹窗信息框
      tf_water_level_show: false,
      // 雨量自定义
      // 区分是点击了左边的计算还是右边的计算
      rainCalcFlagLR: 0,
      // 雨量自定义左边的loading
      rainBtnLoading: false,
      // 雨量自定义右边的loading
      rainAddFormCalcLoading: false,
      tableLoading: false,
      // 雨量自定义增量
      rainAddForm: {
        date: []
      },
      rainAddFormRules: {
        date: [
          { required: true, message: '请选择时间区间', trigger: 'blur' }
        ],
        val1: [
          { validator: inputNumber8, trigger: 'blur' }
        ],
        val2: [
          { validator: inputNumber8, trigger: 'blur' }
        ]
      },
      // 列表
      rainZiAddListData: {},
      // 雨量自定义表单
      rainDialogForm: {
        datetime: new Date(),
        firstTotal: '100',
        firstMaxTime: 18,
        secondTotal: '100',
        secondMaxTime: 18,
        thirdTotal: '100',
        thirdMaxTime: 18,
        level: 0
      },
      rainDialogFormHis: {},
      rainAddFormHis: {},
      rainDialogFormRules: {
        datetime: [
          { required: true, message: '请选择起始时间', trigger: 'blur' }
        ],
        firstTotal: [
          { required: true, message: '请输入降雨总量', trigger: 'blur' },
          { validator: inputNumber1, trigger: 'blur' }
        ],
        secondTotal: [
          { required: true, message: '请输入降雨总量', trigger: 'blur' },
          { validator: inputNumber1, trigger: 'blur' }
        ],
        thirdTotal: [
          { required: true, message: '请输入降雨总量', trigger: 'blur' },
          { validator: inputNumber1, trigger: 'blur' }
        ],
        firstMaxTime: [
          { required: true, message: '请选择最大降雨时段', trigger: 'blur' }
        ],
        secondMaxTime: [
          { required: true, message: '请选择最大降雨时段', trigger: 'blur' }
        ],
        thirdMaxTime: [
          { required: true, message: '请选择最大降雨时段', trigger: 'blur' }
        ]
      },
      // 雨量自定义表单中的下拉选择
      rainDialogSelectOptions1: [],
      rainDialogSelectOptions2: [],
      rainDialogSelectOptions3: [],

      // 自定义度汛弹窗计算按钮
      calcloading: false,
      // 记录是选了哪个工况,记忆功能
      hisRTop1Value: '',
      // 记录是否点击了计算还是就打开不计算
      rainCalcFlag: false,
      // 未来入库流量 - 待修正
      futureFlowInData: {
        x: [],
        y: [],
        waterlY: []
      },
      // 烟花台风历史雨量 - 待修正
      tfHisRainData: {
        x: [],
        y: []
      },
      // 烟花台风历史入库流量 - 待修正
      tfHisFlowInData: {
        x: [],
        y: []
      },
      rainInput: '',
      // 雨量自定义
      rainShow: false,
      // 计算第一次不清空表单
      calcFlag: false,
      duXunTxt: '',
      // 度汛方案弹窗中间表单开闸
      form1: {
        level: 156,
        gateOpenMap: {
          1: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          2: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          3: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          4: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          5: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }]
        }
      },
      // 度汛弹窗下拉选择
      duXunOptions: [{
        value: 0,
        label: '推荐方案'
      }, {
        value: 1,
        label: '方案2'
      }, {
        value: 2,
        label: '方案3'
      }, {
        value: 3,
        label: '自定义方案'
      }],
      // 表单数据
      formData: {
        fun: 0,
        water: '',
        date: []
      },
      formRules: {
        fun: [
          { required: true, message: '请选择方案', trigger: 'blur' }
        ],
        water: [
          { required: true, message: '请填写水位', trigger: 'blur' },
          { validator: inputNumber, trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ]
      },
      // 度汛方案弹窗
      DuXunShow: false,
      // 直播
      videoShow: false,
      chartTitle: '图表',
      chartShow: false,
      bigChartBtnArr: [],
      bigChartBtnIndex: 0,
      // 隐藏显示全部
      isShow: true,
      // 雨量站雨量预报 入库流量过程
      dayArr: ['未来1天', '未来3天', '未来5天', '未来7天'],
      rTop1Index: 3,
      // 入库流量
      rTop2Index: 3,
      // 视频
      url: '',
      // 雨量预报
      rTop1Value: 0,
      rTop1Options: [{
        value: 0,
        label: '预报雨量'
      }, {
        value: 1,
        label: '烟花台风'
      }, {
        value: 2,
        label: '雨量自定义'
      }],
      // 外面的度汛方案
      selectValue: 0,
      options: [{
        value: 0,
        label: '推荐方案'
      }, {
        value: 1,
        label: '方案2'
      }, {
        value: 2,
        label: '方案3'
      }, {
        value: 3,
        label: '自定义方案'
      }]
    }
  },
  methods: {
    ...mapActions(['getTfDxAction', 'getfutureZiAction', 'getTfZiAction', 'getRainZiDxCalcAction', 'getRainZiAddDxCalcAction']),
    transInput () {
      if (this.form1.gateOpenMap[1][0].e > 4.5) this.form1.gateOpenMap[1][0].e = 4.5
      if (this.form1.gateOpenMap[1][0].e < 0) this.form1.gateOpenMap[1][0].e = 0
      if (this.form1.gateOpenMap[2][0].e > 13.32) this.form1.gateOpenMap[2][0].e = 13.32
      if (this.form1.gateOpenMap[2][0].e < 0) this.form1.gateOpenMap[2][0].e = 0
      if (this.form1.gateOpenMap[3][0].e > 13.32) this.form1.gateOpenMap[3][0].e = 13.32
      if (this.form1.gateOpenMap[3][0].e < 0) this.form1.gateOpenMap[3][0].e = 0
      if (this.form1.gateOpenMap[4][0].e > 13.32) this.form1.gateOpenMap[4][0].e = 13.32
      if (this.form1.gateOpenMap[4][0].e < 0) this.form1.gateOpenMap[4][0].e = 0
      if (this.form1.gateOpenMap[5][0].e > 4.5) this.form1.gateOpenMap[5][0].e = 4.5
      if (this.form1.gateOpenMap[5][0].e < 0) this.form1.gateOpenMap[5][0].e = 0
    },
    async getRainZiAddListData () {
      this.tableLoading = true
      if (this.rainAddForm.date.length === 0) {
        this.rainAddForm.date = [
          this.dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
          this.dayjs().subtract(5, 's').format('YYYY-MM-DD HH:mm:ss')
        ]
      }
      const res = await getRainZiAddListApi({
        start_time: this.dayjs(this.rainAddForm.date[0]).format('YYYY-MM-DD HH:mm:ss'),
        end_time: this.dayjs(this.rainAddForm.date[1]).format('YYYY-MM-DD HH:mm:ss')
      })

      console.log('雨量自定义增量数据列表', res)
      this.rainZiAddListData = res
      this.rainZiAddListData.original.forEach((item, index) => {
        this.rainAddForm[`val${index}`] = 0
        // this.rainAddFormRules[`val${index}`] = [{ validator: this.inputNumber8, trigger: 'blur' }]
      })
      console.log('根据雨量自定义增量数据列表拿到的表单对象', this.rainAddForm)
      this.tableLoading = false
    },
    inputNumber8 (rule, value, callback) {
      if (!Number(value) && value !== '') {
        callback(new Error('请输入纯数字'))
      } else if (Number(value < 0 || value > 500)) {
        callback(new Error('请输入 0 ~ 500 的数字'))
      } else {
        callback()
      }
    },
    async http1 () {
      const [res1, res2] = await Promise.all([getReservoirBaseApi(), getReservoirRealApi()])
      // console.log('水库两个信息', res1, res2)
      // 水库基本信息
      this.$store.commit('setReservoirBase', res1)
      // 水库实时信息
      this.$store.commit('setReservoirReal', res2)
      this.formData.water = Number(this.$store.state.reservoirRealData.water_level_value).toFixed(2)
    },
    async http2 () {
      const [res1, res2, res3] = await Promise.all([
        getFutureRainApi(),
        getFutureFlowInApi(this.$store.state.reservoirRealData.water_level_value),
        getFutureDxApi(this.$store.state.reservoirRealData.water_level_value)
      ])
      // console.log('未来三个信息', res1, res2, res3)
      // 未来雨量
      this.futureRainDataEchart = this.transRainEcharts(res1)
      console.log('未来雨量预报echarts', this.futureRainDataEchart)
      // 未来入库流量
      console.log('查看未来入库流量源数据', res2)
      this.flowInData = this.transFlowInEcharts(res2)
      console.log('未来入库流量echarts', this.flowInData)
      // 默认保存未来雨量度汛方案
      this.$store.commit('setDxData', res3)
      // 提取受灾分析需要的参数
      this.getSzfxData()
    },
    // 提取受灾分析需要的参数
    getSzfxData () {
      // 提取受灾分析
      this.$store.commit('set_szfxData', {
        isInfa: false,
        totalRainFall: this.futureRainDataEchart.y[3][5],
        gateCounts1: this.$store.state.dxData1[0].gateOpenMap[1][0].e + this.$store.state.dxData1[0].gateOpenMap[2][0].e + this.$store.state.dxData1[0].gateOpenMap[3][0].e + this.$store.state.dxData1[0].gateOpenMap[4][0].e + this.$store.state.dxData1[0].gateOpenMap[5][0].e,
        gateCounts2: this.$store.state.dxData1[1].gateOpenMap[1][0].e + this.$store.state.dxData1[1].gateOpenMap[2][0].e + this.$store.state.dxData1[1].gateOpenMap[3][0].e + this.$store.state.dxData1[1].gateOpenMap[4][0].e + this.$store.state.dxData1[1].gateOpenMap[5][0].e,
        gateCounts3: this.$store.state.dxData1[2].gateOpenMap[1][0].e + this.$store.state.dxData1[2].gateOpenMap[2][0].e + this.$store.state.dxData1[2].gateOpenMap[3][0].e + this.$store.state.dxData1[2].gateOpenMap[4][0].e + this.$store.state.dxData1[2].gateOpenMap[5][0].e,
        gateCount: 0
      })
    },
    // 烟花数据
    async getInfoData () {
      const [res1, res2, res3] = await Promise.all([
        getTfHisRainApi(),
        getTfListApi(),
        getTfDxApi(162.14)
      ])
      console.log('查看', res1, res2, res3)
      // 历史雨量
      this.futureRainDataEchart = this.transRainEcharts(res1)
      console.log('烟花历史雨量echarts', this.futureRainDataEchart)
      // 历史入库流量
      const res4 = await getTfHisFlowInApi({
        level: res2.data[0].water_level
      })
      console.log('获取烟花历史入库流量', res4)
      this.flowInData = this.transFlowInEcharts(res4)
      console.log('烟花历史入库流量echarts', this.flowInData)
      // 保存度汛方案
      this.$store.commit('setDxData', res3)
      // 提取受灾分析需要的参数
      this.getSzfxData()
    },
    // 雨量自定义
    rainDialogBtn (num) {
      this.rainDialogIndex = num
      if (num === 1) {
        this.getRainZiAddListData()
      }
    },
    rainDialogDate2Change (val) {
      console.log('雨量自定义增量时间变化', val)
      if (val === null) {
        this.rainZiAddListData = {}
      } else {
        if ((this.rainAddForm.date[1] - this.rainAddForm.date[0]) > (24 * 60 * 60 * 3)) {
          this.rainAddForm.date = [
            this.dayjs(this.rainAddForm.date[1]).subtract(3, 'day').format('YYYY-MM-DD HH:mm:ss'),
            this.dayjs(this.rainAddForm.date[1]).format('YYYY-MM-DD HH:mm:ss')
          ]
        }
        this.rainAddFormQuery()
      }
    },
    async rainAddFormQuery () {
      await this.$refs.rainAddForm.validate()
      try {
        this.rainZiAddListData = {}
        await this.getRainZiAddListData()
      } catch (error) {
        console.log(error)
      }
    },
    async rainAddFormCalc () {
      await this.$refs.rainAddForm.validate()
      this.rainAddFormCalcLoading = true
      this.$store.commit('setRainCalcFlagLR', 1)
      try {
        this.hisRTop1Value = 2
        this.rainCalcFlag = true
        // 恢复水位
        this.$eventBus.$emit('resetWL')
        this.test = 162.14
        // 恢复51图标
        this.$eventBus.$emit('znybicon')
        this.tf_water_level_show = false
        clearInterval(this.timer)
        clearInterval(this.timer2)

        this.floodChart1.clear()
        this.floodChart2.clear()
        this.floodChart3.clear()
        this.rainAddFormHis = JSON.parse(JSON.stringify(this.rainAddForm))

        const rainObj = {
          date: [],
          rainFall: []
        }
        const obj = {
          level: this.$store.state.reservoirRealData.water_level_value,
          timeRainfalls: []
        }
        this.rainZiAddListData.original.forEach((item, index) => {
          obj.timeRainfalls.push({
            date: item.date,
            id: item.id,
            rainfall: this.rainAddForm[`val${index}`] === 0 ? item.rainfall : this.rainAddForm[`val${index}`]
          })
          rainObj.date.push(item.date)
          rainObj.rainFall.push(item.rainfall)
        })
        // console.log('雨量自定义增量的雨量预报数据', rainObj)
        console.log('度汛方案要用的数据', obj)
        this.timeRainfalls = obj
        const [res2, res3] = await Promise.all([
          getRainZiAddFlowinApi(obj),
          getRainZiAddDxApi(obj)
        ])

        this.rainAddFormCalcLoading = false
        // console.log('计算得到增量的入库流量', res2)
        console.log('计算得到增量度汛方案', res3)
        const obj1 = {
          x: [],
          y: [],
          waterlY: []
        }

        res2.forEach(item => {
          obj1.x.push(item.date)
          obj1.y.push(item.flowIn)
          obj1.waterlY.push(item.level)
        })

        console.log('计算得到增量的入库流量后从里面拼接后最后的入库流量echarts数据', obj1)

        this.$store.commit('setRainZiAddData', rainObj)
        this.$store.commit('setRainFlowInZiAddData', obj1)
        this.$store.commit('setRainDxZiAddData', res3)
        // 关闭雨量自定义弹窗
        this.$refs.rainDialogForm.resetFields()
        this.$refs.rainAddForm.resetFields()
        this.rainShow = false
        this.selectValue = 0
        // this.rainInput = ''
        this.rainDialogIndex = 0

        let sum = 0
        rainObj.rainFall.forEach(item => {
          sum += item
        })
        this.$store.commit('setRainInput', sum)
        this.form1.totalRainfall = sum
        this.dayArr = []
        this.$store.commit('set_szfxData', {
          isInfa: false,
          totalRainFall: sum,
          startDate: this.rainAddFormHis.date[0],
          gateCounts1: this.$store.state.rainDxZiAddData[0].gateOpenMap[1][0].e + this.$store.state.rainDxZiAddData[0].gateOpenMap[2][0].e + this.$store.state.rainDxZiAddData[0].gateOpenMap[3][0].e + this.$store.state.rainDxZiAddData[0].gateOpenMap[4][0].e + this.$store.state.rainDxZiAddData[0].gateOpenMap[5][0].e,
          gateCounts2: this.$store.state.rainDxZiAddData[1].gateOpenMap[1][0].e + this.$store.state.rainDxZiAddData[1].gateOpenMap[2][0].e + this.$store.state.rainDxZiAddData[1].gateOpenMap[3][0].e + this.$store.state.rainDxZiAddData[1].gateOpenMap[4][0].e + this.$store.state.rainDxZiAddData[1].gateOpenMap[5][0].e,
          gateCounts3: this.$store.state.rainDxZiAddData[2].gateOpenMap[1][0].e + this.$store.state.rainDxZiAddData[2].gateOpenMap[2][0].e + this.$store.state.rainDxZiAddData[2].gateOpenMap[3][0].e + this.$store.state.rainDxZiAddData[2].gateOpenMap[4][0].e + this.$store.state.rainDxZiAddData[2].gateOpenMap[5][0].e,
          gateCount: 0
        })
        console.log('查看自定义雨量增量度汛方案提取出来的数据', this.$store.state.sz_ziAddData)
        this.initFloodChart1(this.$store.state.rainZiAddData.date, this.$store.state.rainZiAddData.rainFall)
        this.initFloodChart2(this.$store.state.rainFlowInZiAddData.x, this.$store.state.rainFlowInZiAddData.y, this.$store.state.rainFlowInZiAddData.waterlY)
        this.initFloodChart3(this.$store.state.rainDxZiAddObj.x[0], this.$store.state.rainDxZiAddObj.ru[0], this.$store.state.rainDxZiAddObj.xia[0], this.$store.state.rainDxZiAddObj.ku[0])
        // this.futureFlowInData = this.transFlowInEcharts(res2)
        // console.log('未来入库流量echarts', this.futureFlowInData)
      } catch (error) {
        console.log(error)
      }
    },
    pageReset () {
      // this.rTop1Index = 0
      // this.rTop2Index = 0
      this.selectValue = 0
    },
    // 泄洪闸
    async getSluicegateData () {
      const res = await getSluicegateApi()
      // console.log('智能预报 水库泄洪闸', res)
      this.sluicegateData = res
    },
    // 直播
    openVideo (item) {
      // 视频token + 视频地址
      const token = encodeURIComponent(encrypt())
      console.log('拿到视频token', token)
      console.log(item.index_url)
      this.url = `${item.index_url}?auth=` + token
      this.videoShow = true
      this.$nextTick(() => {
        this.videoKey = Date.now()
      })
    },
    // 视频数据
    async getVideoData () {
      const res = await getVideoApi()
      // console.log('视频', res)
      // 生成不重复的随机数放到一个数组里
      let videoNumArr = new Set()
      while (true) {
        if (Array.from(videoNumArr).length === 6) break
        videoNumArr.add(Math.floor(Math.random() * (Number(res.data.length))))
      }
      videoNumArr = Array.from(videoNumArr)
      // console.log('查看拿到不重复的视频数组', videoNumArr)
      videoNumArr.forEach(item => {
        this.videoArr.push(res.data[item])
      })
      // console.log('查看所有拿到的视频', this.videoArr)
    },
    videoClose () {
      this.videoShow = false
    },

    closeChart (flag) {
      this.chartShow = flag
      this.bigChartBtnArr = []
      this.bigChartBtnIndex = 0
    },
    bigChartBtn (i) {
      if (this.chartTitle === '雨量预报') {
        console.log('这里是雨量预报', i)
        this.rTop1Btn(i)
      } else if (this.chartTitle === '入库流量') {
        console.log('这里是入库流量', i)
        this.rTop2Btn(i)
      }
    },
    initChart () {
      this.initFloodChart1(this.futureRainDataEchart.x, this.futureRainDataEchart.y[3])
      this.initFloodChart2(this.flowInData.x[3], this.flowInData.y[3], this.flowInData.waterlY[3])
      this.initFloodChart3(this.$store.state.dxObj1.x[0], this.$store.state.dxObj1.ru[0], this.$store.state.dxObj1.xia[0], this.$store.state.dxObj1.ku[0])
    },
    chartResize () {
      this.floodChart1.resize()
      this.floodChart2.resize()
      this.floodChart3.resize()
      if (this.bigChart && this.chartShow) this.bigChart.resize()
      if (this.bigChart2 && this.DuXunShow) this.bigChart2.resize()
    },
    // 隐藏显示全部
    isShowAll () {
      this.isShow = !this.isShow
    },
    inputNumberChange () {
      // this.inputKey = Date.now()
      this.$forceUpdate()
    },
    // 雨量数据转换
    transRainEcharts (obj) {
      const x = []
      const y = []
      obj[1].forEach(item => {
        x.push(item.stationName)
      })
      const resArr = Object.values(obj)
      resArr.forEach((item, index) => {
        const yArr = []
        item.forEach(item2 => {
          yArr.push(item2.totalRain)
        })
        y.push(yArr)
      })
      return { x, y }
    },
    // 入库流量数据转换
    transFlowInEcharts (obj) {
      const x = []
      const y = []
      const waterlY = []
      const resArr = Object.values(obj)
      resArr.forEach((item, index) => {
        const xArr = []
        const yArr = []
        const waterlArr = []
        item.forEach(item2 => {
          xArr.push(item2.date)
          yArr.push(item2.flowIn)
          waterlArr.push(item2.level)
        })
        x.push(xArr)
        y.push(yArr)
        waterlY.push(waterlArr)
      })
      return { x, y, waterlY }
    },
    // 获取烟花历史雨量累计
    async getTfHisRainAllData () {
      const res = await getTfHisRainAllApi()
      const count = res.reduce((acc, item) => (acc += item), 0)
      // console.log('烟花历史雨量累计', count)
      this.rTop1Options[1].label = `烟花台风/${parseInt(count)}mm`
    },
    // 获取烟花台风度汛方案源数据并处理数据
    async getTfDxData () {
      await this.getTfDxAction()
    },
    // 雨量自定义
    async rainCalc () {
      await this.$refs.rainDialogForm.validate()
      try {
        this.$store.commit('setRainCalcFlagLR', 0)
        this.hisRTop1Value = 2
        this.rainBtnLoading = true
        this.rainCalcFlag = true
        // 恢复水位
        this.$eventBus.$emit('resetWL')
        this.test = 162.14
        // 恢复51图标
        this.$eventBus.$emit('znybicon')
        this.tf_water_level_show = false
        clearInterval(this.timer)
        clearInterval(this.timer2)
        // this.rainDialogForm.totalRainfall = Number(this.rainDialogForm.totalRainfall)
        // this.formData.fun = 3
        const rainTotal = Number(this.rainDialogForm.firstTotal) + Number(this.rainDialogForm.secondTotal) + Number(this.rainDialogForm.thirdTotal)
        this.$store.commit('setRainInput', rainTotal)
        this.form1.totalRainfall = rainTotal
        this.dayArr = []
        this.floodChart1.clear()
        this.floodChart2.clear()
        this.floodChart3.clear()
        this.rainDialogForm.level = Number(this.$store.state.reservoirRealData.water_level_value)
        if (typeof this.rainDialogForm.datetime === 'object') {
          this.rainDialogForm.datetime = this.cqq.elDateformate(this.rainDialogForm.datetime)
        }
        console.log('打印一下雨量自定义表单', this.rainDialogForm)
        this.rainDialogFormHis = JSON.parse(JSON.stringify(this.rainDialogForm))
        const [res1, res2, res3] = await Promise.all([getRainZiApi(this.rainDialogForm), getFlowInZiApi(this.rainDialogForm), getRainDxZiApi(this.rainDialogForm)])
        console.log('自定义雨量雨量预报', res1)
        console.log('自定义雨量入库流量', res2)
        console.log('自定义雨量度汛方案', res3)
        this.rainBtnLoading = false
        this.$store.commit('setRainZiData', res1)
        this.$store.commit('setRainFlowInZiData', res2)
        this.$store.commit('setRainDxZiData', res3)

        // 关闭雨量自定义弹窗
        this.$refs.rainDialogForm.resetFields()
        this.$refs.rainAddForm.resetFields()
        this.rainShow = false
        this.selectValue = 0
        // this.rainInput = ''
        this.rainDialogIndex = 0
        // this.rainAddForm = {
        //   date: [],
        //   val1: '',
        //   val2: ''
        // }
        // this.rainDialogForm = {
        //   datetime: '',
        //   totalRainfall: '',
        //   divideDay: '',
        //   maxRainOnTime: '',
        //   level: 0
        // }
        // 自定义中提取
        this.$store.commit('set_szfxData', {
          isInfa: false,
          totalRainFall: rainTotal,
          startDate: this.rainDialogFormHis.datetime,
          gateCounts1: this.$store.state.rainDxZiData[0].gateOpenMap[1][0].e + this.$store.state.rainDxZiData[0].gateOpenMap[2][0].e + this.$store.state.rainDxZiData[0].gateOpenMap[3][0].e + this.$store.state.rainDxZiData[0].gateOpenMap[4][0].e + this.$store.state.rainDxZiData[0].gateOpenMap[5][0].e,
          gateCounts2: this.$store.state.rainDxZiData[1].gateOpenMap[1][0].e + this.$store.state.rainDxZiData[1].gateOpenMap[2][0].e + this.$store.state.rainDxZiData[1].gateOpenMap[3][0].e + this.$store.state.rainDxZiData[1].gateOpenMap[4][0].e + this.$store.state.rainDxZiData[1].gateOpenMap[5][0].e,
          gateCounts3: this.$store.state.rainDxZiData[2].gateOpenMap[1][0].e + this.$store.state.rainDxZiData[2].gateOpenMap[2][0].e + this.$store.state.rainDxZiData[2].gateOpenMap[3][0].e + this.$store.state.rainDxZiData[2].gateOpenMap[4][0].e + this.$store.state.rainDxZiData[2].gateOpenMap[5][0].e,
          gateCount: 0
        })
        console.log('查看自定义雨量度汛方案提取出来的数据', this.$store.state.szfxData)
        this.initFloodChart1(this.$store.state.rainZiData.format.date, this.$store.state.rainZiData.format.rainfall)
        this.initFloodChart2(this.$store.state.rainFlowInZiData.format.dateTime, this.$store.state.rainFlowInZiData.format.flowIn, this.$store.state.rainFlowInZiData.format.level)
        this.initFloodChart3(this.$store.state.rainDxZiObj.x[0], this.$store.state.rainDxZiObj.ru[0], this.$store.state.rainDxZiObj.xia[0], this.$store.state.rainDxZiObj.ku[0])
      } catch (error) {
        console.log(error)
      }
    },
    openRain () {
      this.rainShow = true
    },
    closeRain () {
      this.$refs.rainDialogForm.resetFields()
      this.$refs.rainAddForm.resetFields()
      this.rainShow = false
      if (this.hisRTop1Value !== '') this.rTop1Value = this.hisRTop1Value
      // this.rainInput = ''
      this.rainDialogIndex = 0
      // this.rainAddForm = {
      //   date: [],
      //   val1: '',
      //   val2: ''
      // }
      // this.rainDialogForm = {
      //   datetime: '',
      //   totalRainfall: '',
      //   divideDay: '',
      //   maxRainOnTime: '',
      //   level: 0
      // }

      // if (this.$store.state.tfFlag === true) {
      //   this.rTop1Value = 0
      // }
      // if (this.rainCalcFlag) {
      //   this.rTop1Value = 0
      // }
      // else if (this.$store.state.tfFlag === false && ) {
      //   this.rTop1Value = ''
      // }
    },
    async dxDialogSelect (value) {
      this.formData.date = []
      if (this.rTop1Value === 0 || this.rTop1Value === 1) {
        if (value !== 3) {
          this.duXunTxt = this.$store.state.dxData1[value].msg
          this.form1.gateOpenMap[1][0].e = this.$store.state.dxData1[value].gateOpenMap[1][0].e
          this.form1.gateOpenMap[2][0].e = this.$store.state.dxData1[value].gateOpenMap[2][0].e
          this.form1.gateOpenMap[3][0].e = this.$store.state.dxData1[value].gateOpenMap[3][0].e
          this.form1.gateOpenMap[4][0].e = this.$store.state.dxData1[value].gateOpenMap[4][0].e
          this.form1.gateOpenMap[5][0].e = this.$store.state.dxData1[value].gateOpenMap[5][0].e
          this.formData.date.push(new Date(this.$store.state.dxData1[value].gateOpenMap[1][0].startTime))
          this.formData.date.push(new Date(this.$store.state.dxData1[value].gateOpenMap[1][0].endTime))
          this.initFloodChart3Copy(this.$store.state.dxObj1.x[value], this.$store.state.dxObj1.ru[value], this.$store.state.dxObj1.xia[value], this.$store.state.dxObj1.ku[value])
        } else if (value === 3) {
          this.form1.gateOpenMap[1][0].e = this.$store.state.dxData1[0].gateOpenMap[1][0].e
          this.form1.gateOpenMap[2][0].e = this.$store.state.dxData1[0].gateOpenMap[2][0].e
          this.form1.gateOpenMap[3][0].e = this.$store.state.dxData1[0].gateOpenMap[3][0].e
          this.form1.gateOpenMap[4][0].e = this.$store.state.dxData1[0].gateOpenMap[4][0].e
          this.form1.gateOpenMap[5][0].e = this.$store.state.dxData1[0].gateOpenMap[5][0].e
          this.formData.date.push(new Date(this.$store.state.dxData1[0].gateOpenMap[1][0].startTime))
          this.formData.date.push(new Date(this.$store.state.dxData1[0].gateOpenMap[1][0].endTime))
        }
      } else if (this.rTop1Value === 2) {
        if (value !== 3) {
          if (this.$store.state.rainCalcFlagLR === 0) {
            this.duXunTxt = this.$store.state.rainDxZiData[value].msg
            this.form1.gateOpenMap[1][0].e = this.$store.state.rainDxZiData[value].gateOpenMap[1][0].e
            this.form1.gateOpenMap[2][0].e = this.$store.state.rainDxZiData[value].gateOpenMap[2][0].e
            this.form1.gateOpenMap[3][0].e = this.$store.state.rainDxZiData[value].gateOpenMap[3][0].e
            this.form1.gateOpenMap[4][0].e = this.$store.state.rainDxZiData[value].gateOpenMap[4][0].e
            this.form1.gateOpenMap[5][0].e = this.$store.state.rainDxZiData[value].gateOpenMap[5][0].e
            this.formData.date.push(new Date(this.$store.state.rainDxZiData[value].gateOpenMap[1][0].startTime))
            this.formData.date.push(new Date(this.$store.state.rainDxZiData[value].gateOpenMap[1][0].endTime))
            this.initFloodChart3Copy(this.$store.state.rainDxZiObj.x[value], this.$store.state.rainDxZiObj.ru[value], this.$store.state.rainDxZiObj.xia[value], this.$store.state.rainDxZiObj.ku[value])
          } else if (this.$store.state.rainCalcFlagLR === 1) {
            this.duXunTxt = this.$store.state.rainDxZiAddData[value].msg
            this.form1.gateOpenMap[1][0].e = this.$store.state.rainDxZiAddData[value].gateOpenMap[1][0].e
            this.form1.gateOpenMap[2][0].e = this.$store.state.rainDxZiAddData[value].gateOpenMap[2][0].e
            this.form1.gateOpenMap[3][0].e = this.$store.state.rainDxZiAddData[value].gateOpenMap[3][0].e
            this.form1.gateOpenMap[4][0].e = this.$store.state.rainDxZiAddData[value].gateOpenMap[4][0].e
            this.form1.gateOpenMap[5][0].e = this.$store.state.rainDxZiAddData[value].gateOpenMap[5][0].e
            this.formData.date.push(new Date(this.$store.state.rainDxZiAddData[value].gateOpenMap[1][0].startTime))
            this.formData.date.push(new Date(this.$store.state.rainDxZiAddData[value].gateOpenMap[1][0].endTime))
            this.initFloodChart3Copy(this.$store.state.rainDxZiAddObj.x[value], this.$store.state.rainDxZiAddObj.ru[value], this.$store.state.rainDxZiAddObj.xia[value], this.$store.state.rainDxZiAddObj.ku[value])
          }
        } else if (value === 3) {
          this.formData.date = []
          if (this.$store.state.rainCalcFlagLR === 0) {
            this.duXunTxt = this.$store.state.rainDxZiData[0].msg
            this.form1.gateOpenMap[1][0].e = this.$store.state.rainDxZiData[0].gateOpenMap[1][0].e
            this.form1.gateOpenMap[2][0].e = this.$store.state.rainDxZiData[0].gateOpenMap[2][0].e
            this.form1.gateOpenMap[3][0].e = this.$store.state.rainDxZiData[0].gateOpenMap[3][0].e
            this.form1.gateOpenMap[4][0].e = this.$store.state.rainDxZiData[0].gateOpenMap[4][0].e
            this.form1.gateOpenMap[5][0].e = this.$store.state.rainDxZiData[0].gateOpenMap[5][0].e
            this.formData.date.push(new Date(this.$store.state.rainDxZiData[0].gateOpenMap[1][0].startTime))
            this.formData.date.push(new Date(this.$store.state.rainDxZiData[0].gateOpenMap[1][0].endTime))
          } else if (this.$store.state.rainCalcFlagLR === 1) {
            this.duXunTxt = this.$store.state.rainDxZiAddData[0].msg
            this.form1.gateOpenMap[1][0].e = this.$store.state.rainDxZiAddData[0].gateOpenMap[1][0].e
            this.form1.gateOpenMap[2][0].e = this.$store.state.rainDxZiAddData[0].gateOpenMap[2][0].e
            this.form1.gateOpenMap[3][0].e = this.$store.state.rainDxZiAddData[0].gateOpenMap[3][0].e
            this.form1.gateOpenMap[4][0].e = this.$store.state.rainDxZiAddData[0].gateOpenMap[4][0].e
            this.form1.gateOpenMap[5][0].e = this.$store.state.rainDxZiAddData[0].gateOpenMap[5][0].e
            this.formData.date.push(new Date(this.$store.state.rainDxZiAddData[0].gateOpenMap[1][0].startTime))
            this.formData.date.push(new Date(this.$store.state.rainDxZiAddData[0].gateOpenMap[1][0].endTime))
          }
        }
      }
      if (value === 3) {
        this.bigChart2.clear()
        this.form1 = {
          level: this.$store.state.reservoirRealData.water_level_value,
          gateOpenMap: {
            1: [{
              id: 1,
              startTime: '',
              endTime: '',
              e: 0
            }],
            2: [{
              id: 1,
              startTime: '',
              endTime: '',
              e: 0
            }],
            3: [{
              id: 1,
              startTime: '',
              endTime: '',
              e: 0
            }],
            4: [{
              id: 1,
              startTime: '',
              endTime: '',
              e: 0
            }],
            5: [{
              id: 1,
              startTime: '',
              endTime: '',
              e: 0
            }]
          }
        }
        this.duXunTxt = ''
      }
    },
    async calc () {
      try {
        await this.$refs.duXunForm.validate()
        this.calcloading = true
        this.form1.gateOpenMap[1][0].startTime = this.cqq.elDateformate(this.formData.date[0])
        this.form1.gateOpenMap[1][0].endTime = this.cqq.elDateformate(this.formData.date[1])
        this.form1.gateOpenMap[2][0].startTime = this.cqq.elDateformate(this.formData.date[0])
        this.form1.gateOpenMap[2][0].endTime = this.cqq.elDateformate(this.formData.date[1])
        this.form1.gateOpenMap[3][0].startTime = this.cqq.elDateformate(this.formData.date[0])
        this.form1.gateOpenMap[3][0].endTime = this.cqq.elDateformate(this.formData.date[1])
        this.form1.gateOpenMap[4][0].startTime = this.cqq.elDateformate(this.formData.date[0])
        this.form1.gateOpenMap[4][0].endTime = this.cqq.elDateformate(this.formData.date[1])
        this.form1.gateOpenMap[5][0].startTime = this.cqq.elDateformate(this.formData.date[0])
        this.form1.gateOpenMap[5][0].endTime = this.cqq.elDateformate(this.formData.date[1])
        this.form1.gateOpenMap[1][0].e = Number(this.form1.gateOpenMap[1][0].e)
        this.form1.gateOpenMap[2][0].e = Number(this.form1.gateOpenMap[2][0].e)
        this.form1.gateOpenMap[3][0].e = Number(this.form1.gateOpenMap[3][0].e)
        this.form1.gateOpenMap[4][0].e = Number(this.form1.gateOpenMap[4][0].e)
        this.form1.gateOpenMap[5][0].e = Number(this.form1.gateOpenMap[5][0].e)
        this.form1.level = Number(this.formData.water)
        console.log('计算上传的参数form1', this.form1)

        // this.$store.commit('set_sz_rainFuture', {
        //   isInfa: false,
        //   totalRainFall: this.futureRainDataEchart.y[3][5],
        //   gateCounts1: this.$store.state.futureDxData[0].gateOpenMap[1][0].e + this.$store.state.futureDxData[0].gateOpenMap[2][0].e + this.$store.state.futureDxData[0].gateOpenMap[3][0].e + this.$store.state.futureDxData[0].gateOpenMap[4][0].e + this.$store.state.futureDxData[0].gateOpenMap[5][0].e,
        //   gateCounts2: this.$store.state.futureDxData[1].gateOpenMap[1][0].e + this.$store.state.futureDxData[1].gateOpenMap[2][0].e + this.$store.state.futureDxData[1].gateOpenMap[3][0].e + this.$store.state.futureDxData[1].gateOpenMap[4][0].e + this.$store.state.futureDxData[1].gateOpenMap[5][0].e,
        //   gateCounts3: this.$store.state.futureDxData[2].gateOpenMap[1][0].e + this.$store.state.futureDxData[2].gateOpenMap[2][0].e + this.$store.state.futureDxData[2].gateOpenMap[3][0].e + this.$store.state.futureDxData[2].gateOpenMap[4][0].e + this.$store.state.futureDxData[2].gateOpenMap[5][0].e,
        //   gateCount: this.from1.gateOpenMap[1][0].e + this.from1.gateOpenMap[2][0].e + this.from1.gateOpenMap[3][0].e + this.from1.gateOpenMap[4][0].e + this.from1.gateOpenMap[5][0].e
        // })

        // 自定义度汛方案表单保存
        await this.$store.commit('setForm1', this.form1)

        if (this.rTop1Value === 0) {
          console.log('预报雨量自定义度汛', this.form1)
          this.$store.commit('set_szfxData_gateCount', (this.form1.gateOpenMap[1][0].e + this.form1.gateOpenMap[2][0].e + this.form1.gateOpenMap[3][0].e + this.form1.gateOpenMap[4][0].e + this.form1.gateOpenMap[5][0].e))
          console.log('查看未来度汛方案放入闸门总开度提取出来的数据', this.$store.state.szfxData)
          await this.getfutureZiAction(this.form1)
          this.initFloodChart3Copy(this.$store.state.dxZiData.format.dateTime, this.$store.state.dxZiData.format.flowIn, this.$store.state.dxZiData.format.flowOut, this.$store.state.dxZiData.format.level)
        } else if (this.rTop1Value === 1) {
          console.log('烟花自定义度汛', this.form1)
          this.$store.commit('set_szfxData_gateCount', (this.form1.gateOpenMap[1][0].e + this.form1.gateOpenMap[2][0].e + this.form1.gateOpenMap[3][0].e + this.form1.gateOpenMap[4][0].e + this.form1.gateOpenMap[5][0].e))
          console.log('查看烟花度汛方案放入闸门总开度提取出来的数据', this.$store.state.szfxData)
          await this.getTfZiAction(this.form1)
          this.initFloodChart3Copy(this.$store.state.dxZiData.format.dateTime, this.$store.state.dxZiData.format.flowIn, this.$store.state.dxZiData.format.flowOut, this.$store.state.dxZiData.format.level)
        } else if (this.rTop1Value === 2) {
          const newObj = {
            gateOpenMap: this.form1.gateOpenMap,
            ...this.rainDialogFormHis
          }
          newObj.level = Number(this.formData.water)
          console.log('自定义雨量度汛计算的参数,关联到form1', newObj)
          this.$store.commit('set_szfxData_gateCount', (this.form1.gateOpenMap[1][0].e + this.form1.gateOpenMap[2][0].e + this.form1.gateOpenMap[3][0].e + this.form1.gateOpenMap[4][0].e + this.form1.gateOpenMap[5][0].e))
          console.log('查看自定义雨量度汛方案放入闸门总开度提取出来的数据', this.$store.state.sz_ziData)
          if (this.$store.state.rainCalcFlagLR === 0) {
            await this.getRainZiDxCalcAction(newObj)
          } else if (this.$store.state.rainCalcFlagLR === 1) {
            const dataObj = {
              ...newObj,
              ...this.timeRainfalls
            }
            console.log('查看接口传入的参数', dataObj)
            await this.getRainZiAddDxCalcAction(dataObj)
          }
          this.initFloodChart3Copy(this.$store.state.rainCalcZiData.format.dateTime, this.$store.state.rainCalcZiData.format.flowIn, this.$store.state.rainCalcZiData.format.flowOut, this.$store.state.rainCalcZiData.format.level)
        }
        this.calcloading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 度汛方案
    // 日期选择器
    dateChange () {
      console.log('左侧时间改变事件触发')
    },
    duxunSelect (value) {
      // this.formData.fun = value
      // console.log('下拉选择后', value, this.formData.fun)
      // if (value === 3) {
      //   this.DuXunShow = true
      //   this.formData.date = []
      //   this.formData.water = Number(this.$store.state.reservoirRealData.water_level_value).toFixed(2)
      //   this.$nextTick(() => {
      //     if (this.bigChart2 === null) {
      //       this.bigChart2 = this.echarts.init(document.getElementById('big-chart-dx'))
      //       this.bigChart2.clear()
      //     } else {
      //       this.bigChart2.clear()
      //     }
      //   })
      // }
    },
    // 弹层
    openChart (title, arr, i) {
      this.chartTitle = title
      this.bigChartBtnIndex = i
      this.bigChartBtnArr = arr
      this.chartShow = true
      if (this.rTop1Value === 0 || this.rTop1Value === 1) {
        if (title === '雨量预报') {
          this.$nextTick(() => this.initFloodChart1Copy(this.futureRainDataEchart.x, this.futureRainDataEchart.y[i]))
        } else if (title === '入库流量') {
          this.$nextTick(() => this.initFloodChart2Copy(this.flowInData.x[i], this.flowInData.y[i], this.flowInData.waterlY[i]))
        }
      } else if (this.rTop1Value === 2) {
        this.formData.fun = 3
        if (title === '雨量预报') {
          if (this.$store.state.rainCalcFlagLR === 0) {
            this.$nextTick(() => this.initFloodChart1Copy(this.$store.state.rainZiData.format.date, this.$store.state.rainZiData.format.rainfall))
          } else if (this.$store.state.rainCalcFlagLR === 1) {
            this.$nextTick(() => this.initFloodChart1Copy(this.$store.state.rainZiAddData.date, this.$store.state.rainZiAddData.rainFall))
          }
        } else if (title === '入库流量') {
          if (this.$store.state.rainCalcFlagLR === 0) {
            this.$nextTick(() => this.initFloodChart2Copy(this.$store.state.rainFlowInZiData.format.dateTime, this.$store.state.rainFlowInZiData.format.flowIn, this.$store.state.rainFlowInZiData.format.level))
          } else if (this.$store.state.rainCalcFlagLR === 1) {
            this.$nextTick(() => this.initFloodChart2Copy(this.$store.state.rainFlowInZiAddData.x, this.$store.state.rainFlowInZiAddData.y, this.$store.state.rainFlowInZiAddData.waterlY))
          }
        }
      }
    },
    openDuXun () {
      this.formData.fun = this.selectValue
      this.formData.date = []
      this.DuXunShow = true
      this.bigChartBtnIndex = this.selectValue
      this.$nextTick(() => {
        if (this.rTop1Value === 2) {
          if (this.$store.state.rainCalcFlagLR === 0) {
            this.duXunTxt = this.$store.state.rainDxZiData[this.selectValue].msg
            this.form1.gateOpenMap[1][0].e = this.$store.state.rainDxZiData[this.selectValue].gateOpenMap[1][0].e
            this.form1.gateOpenMap[2][0].e = this.$store.state.rainDxZiData[this.selectValue].gateOpenMap[2][0].e
            this.form1.gateOpenMap[3][0].e = this.$store.state.rainDxZiData[this.selectValue].gateOpenMap[3][0].e
            this.form1.gateOpenMap[4][0].e = this.$store.state.rainDxZiData[this.selectValue].gateOpenMap[4][0].e
            this.form1.gateOpenMap[5][0].e = this.$store.state.rainDxZiData[this.selectValue].gateOpenMap[5][0].e
            this.formData.date.push(new Date(this.$store.state.rainDxZiData[this.selectValue].gateOpenMap[1][0].startTime))
            this.formData.date.push(new Date(this.$store.state.rainDxZiData[this.selectValue].gateOpenMap[1][0].endTime))
            if (this.formData.fun === 3) return
            this.initFloodChart3Copy(this.$store.state.rainDxZiObj.x[this.selectValue], this.$store.state.rainDxZiObj.ru[this.selectValue], this.$store.state.rainDxZiObj.xia[this.selectValue], this.$store.state.rainDxZiObj.ku[this.selectValue])
            return
          } else if (this.$store.state.rainCalcFlagLR === 1) {
            this.duXunTxt = this.$store.state.rainDxZiAddData[this.selectValue].msg
            this.form1.gateOpenMap[1][0].e = this.$store.state.rainDxZiAddData[this.selectValue].gateOpenMap[1][0].e
            this.form1.gateOpenMap[2][0].e = this.$store.state.rainDxZiAddData[this.selectValue].gateOpenMap[2][0].e
            this.form1.gateOpenMap[3][0].e = this.$store.state.rainDxZiAddData[this.selectValue].gateOpenMap[3][0].e
            this.form1.gateOpenMap[4][0].e = this.$store.state.rainDxZiAddData[this.selectValue].gateOpenMap[4][0].e
            this.form1.gateOpenMap[5][0].e = this.$store.state.rainDxZiAddData[this.selectValue].gateOpenMap[5][0].e
            this.formData.date.push(new Date(this.$store.state.rainDxZiAddData[this.selectValue].gateOpenMap[1][0].startTime))
            this.formData.date.push(new Date(this.$store.state.rainDxZiAddData[this.selectValue].gateOpenMap[1][0].endTime))
            if (this.formData.fun === 3) return
            this.initFloodChart3Copy(this.$store.state.rainDxZiAddObj.x[this.selectValue], this.$store.state.rainDxZiAddObj.ru[this.selectValue], this.$store.state.rainDxZiAddObj.xia[this.selectValue], this.$store.state.rainDxZiAddObj.ku[this.selectValue])
            return
          }
        }
        this.duXunTxt = this.$store.state.dxData1[this.selectValue].msg
        this.form1.gateOpenMap[1][0].e = this.$store.state.dxData1[this.selectValue].gateOpenMap[1][0].e
        this.form1.gateOpenMap[2][0].e = this.$store.state.dxData1[this.selectValue].gateOpenMap[2][0].e
        this.form1.gateOpenMap[3][0].e = this.$store.state.dxData1[this.selectValue].gateOpenMap[3][0].e
        this.form1.gateOpenMap[4][0].e = this.$store.state.dxData1[this.selectValue].gateOpenMap[4][0].e
        this.form1.gateOpenMap[5][0].e = this.$store.state.dxData1[this.selectValue].gateOpenMap[5][0].e
        this.formData.date.push(new Date(this.$store.state.dxData1[this.selectValue].gateOpenMap[1][0].startTime))
        this.formData.date.push(new Date(this.$store.state.dxData1[this.selectValue].gateOpenMap[1][0].endTime))
        if (this.formData.fun === 3) return
        this.initFloodChart3Copy(this.$store.state.dxObj1.x[this.selectValue], this.$store.state.dxObj1.ru[this.selectValue], this.$store.state.dxObj1.xia[this.selectValue], this.$store.state.dxObj1.ku[this.selectValue])
      })
    },
    closeDuXun () {
      // if (this.selectValue === 3 && this.dxCalcFlag === false) {
      //   this.selectValue = this.hisDXSelect
      //   this.bigChartBtnIndex = this.hisDXSelect
      // }
      this.selectValue = this.hisDXSelect
      this.bigChartBtnIndex = 0
      if (this.rTop1Value !== 2) {
        this.formData.fun = 0
      }
      this.duXunTxt = ''
      this.form1 = {
        level: this.$store.state.reservoirRealData.water_level_value,
        gateOpenMap: {
          1: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          2: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          3: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          4: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }],
          5: [{
            id: 1,
            startTime: '',
            endTime: '',
            e: 0
          }]
        }
      }
      if (this.rTop1Value === 2 && this.$store.state.rainInput) {
        this.form1.totalRainfall = this.$store.state.rainInput
      }
      this.formData.date = []
      this.DuXunShow = false
      this.$refs.duXunForm.resetFields()
    },
    // 雨量站雨量预报
    rTop1Btn (i) {
      if (this.rTop1Value === 0) {
        if (this.chartShow) {
          if (this.bigChartBtnIndex === i) return
          this.bigChartBtnIndex = i
          this.initFloodChart1Copy(this.futureRainDataEchart.x, this.futureRainDataEchart.y[i])
        } else {
          if (this.rTop1Index === i) return
          this.rTop1Index = i
          this.rTop2Index = i
          this.initFloodChart1(this.futureRainDataEchart.x, this.futureRainDataEchart.y[i])
          this.initFloodChart2(this.futureFlowInData.x[i], this.futureFlowInData.y[i], this.futureFlowInData.waterlY[i])
        }
      } else if (this.rTop1Value === 1) {
        if (this.chartShow) {
          if (this.bigChartBtnIndex === i) return
          this.bigChartBtnIndex = i
          this.initFloodChart1Copy(this.tfHisRainData.x, this.tfHisRainData.y[i])
        } else {
          if (this.rTop1Index === i) return
          this.rTop1Index = i
          this.rTop2Index = i
          this.initFloodChart1(this.tfHisRainData.x, this.tfHisRainData.y[i])
          this.initFloodChart2(this.tfHisFlowInData.x[i], this.tfHisFlowInData.y[i], this.tfHisFlowInData.waterlY[i])
        }
      }
    },
    // 入库流量过程
    rTop2Btn (i) {
      if (this.rTop1Value === 0) {
        if (this.chartShow) {
          console.log('入库流量打开后的按钮')
          this.bigChartBtnIndex = i
          this.initFloodChart2Copy(this.futureFlowInData.x[i], this.futureFlowInData.y[i], this.futureFlowInData.waterlY[i])
          console.log('渲染第二个打开后的弹层')
        } else {
          this.rTop1Index = i
          this.rTop2Index = i
          this.initFloodChart1(this.futureRainDataEchart.x, this.futureRainDataEchart.y[i])
          this.initFloodChart2(this.futureFlowInData.x[i], this.futureFlowInData.y[i], this.futureFlowInData.waterlY[i])
        }
      } else if (this.rTop1Value === 1) {
        if (this.chartShow) {
          this.bigChartBtnIndex = i
          this.initFloodChart2Copy(this.tfHisFlowInData.x[i], this.tfHisFlowInData.y[i], this.tfHisFlowInData.waterlY[i])
        } else {
          this.rTop1Index = i
          this.rTop2Index = i
          this.initFloodChart1(this.tfHisRainData.x, this.tfHisRainData.y[i])
          this.initFloodChart2(this.tfHisFlowInData.x[i], this.tfHisFlowInData.y[i], this.tfHisFlowInData.waterlY[i])
        }
      }
    },
    // 图表
    // initChart () {
    //   if (this.$store.state.tfFlag) {
    //     // 渲染台风
    //     this.initFloodChart1(this.tfHisRainData.x, this.tfHisRainData.y[this.rTop1Index])
    //     this.initFloodChart2(this.tfHisFlowInData.x[this.rTop1Index], this.tfHisFlowInData.y[this.rTop1Index])
    //     this.initFloodChart3(this.optimalObj.x[this.selectValue], this.optimalObj.ru[this.selectValue], this.optimalObj.xia[this.selectValue], this.optimalObj.ku[this.selectValue])
    //   } else {
    //     // 渲染未来雨量
    //     this.initFloodChart1(this.futureRainDataEchart.x, this.futureRainDataEchart.y[this.rTop1Index])
    //     this.initFloodChart2(this.futureFlowInData.x[this.rTop1Index], this.futureFlowInData.y[this.rTop1Index])
    //     this.initFloodChart3(this.futureDXObj.x[this.selectValue], this.futureDXObj.ru[this.selectValue], this.futureDXObj.xia[this.selectValue], this.futureDXObj.ku[this.selectValue])
    //   }
    // },
    initFloodChart1 (x, y) {
      if (!this.floodChart1) this.floodChart1 = this.echarts.init(document.getElementById('flood-chart1'))
      const option = {
        grid: {
          show: false,
          top: 30,
          left: 20,
          right: 0,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: x || ['窈川站', '史姆站', '西坞站', '学陶站', '八达站', '横锦站'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          name: '雨量：mm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'center',
            verticalAlign: 'middle'
          },
          nameGap: 18,
          show: true,
          type: 'value',
          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: '25%',
            data: y,
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: false,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          }
        ]
      }
      this.floodChart1.clear()
      this.floodChart1.setOption(option)
    },
    initFloodChart1Copy (x, y) {
      if (!this.bigChart) this.bigChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          top: 30,
          left: 20,
          right: 0,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: x || ['窈川站', '史姆站', '西坞站', '学陶站', '八达站', '横锦站'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          name: '雨量：mm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'center',
            verticalAlign: 'middle'
          },
          nameGap: 18,
          show: true,
          type: 'value',
          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: '25%',
            data: y,
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: false,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          }
        ]
      }
      this.bigChart.clear()
      this.bigChart.setOption(option)
    },
    initFloodChart2 (x, y, waterlY) {
      // 汛限水位
      const nowLimitWaterLevel = Number(this.$store.state.reservoirRealData.nowLimitWaterLevel).toFixed(0)
      const nowLimitWaterLevelArr = []
      // 正常蓄水位
      const normalPoolLevel = Number(this.$store.state.reservoirBaseData.normal_pool_level).toFixed(0)
      const jingArr = []
      // 防洪高水位
      const waterHeightLevel = Number(this.$store.state.reservoirBaseData.water_height_level).toFixed(0)
      const waterHeightArr = []
      x.forEach(() => {
        nowLimitWaterLevelArr.push(nowLimitWaterLevel)
        jingArr.push(normalPoolLevel)
        waterHeightArr.push(waterHeightLevel)
      })
      let waterYMin = Math.floor(Math.min(...waterlY) - 1)
      if (waterYMin < 0) waterYMin = 0
      const waterYMax = Math.floor(Math.max(...waterlY, ...jingArr, ...waterHeightArr) + 1)
      if (!this.floodChart2) this.floodChart2 = this.echarts.init(document.getElementById('flood-chart2'))
      const option = {
        grid: {
          show: false,
          top: 30,
          left: 35,
          right: 15,
          bottom: 15,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'

          }
        },
        legend: {
          data: ['入库流量', '水库水位'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 5,
          itemWidth: 20,
          itemHeight: 12,
          itemStyle: {
            fontSize: 12
          } // 样式
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(1, 244, 168, 0.4)' },
            { offset: 1, color: 'rgba(1, 244, 168, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 255, 255, 0.4)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0)' }
          ]
        ), '#FF5757', 'purple', '#FF5757'],
        xAxis: {
          type: 'category',
          data: x,
          name: '单位：h',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: 60
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value, index) => String(value).substring(2) // 文本格式化
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '流量：m³/s',
            alignTicks: false,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle'
              // padding: [0, 65, 0, 0]
            },
            axisPointer: {
              show: true,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: true,
                // 此处会覆盖提示框文本格式化
                backgroundColor: '#6a7985',
                formatter: ({ value }) => `${Number(value).toFixed(2)}` // 文本格式化
              },
              lineStyle: {} // 线的样式
            },
            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: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '水位：m',
            position: 'right',
            alignTicks: false,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 0, 0, 30]
            },
            min: waterYMin,
            max: waterYMax,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: true,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: true,
                // 此处会覆盖提示框文本格式化
                // formatter: '{value}+X轴格式化', // 文本格式化
                formatter: ({ value }) => `${Number(value).toFixed(2)}`, // 文本格式化
                backgroundColor: '#6a7985'
              },
              lineStyle: {} // 线的样式
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12,
              formatter: (value) => value.toFixed(0)
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }],
        series: [
          {
            name: '入库流量',
            barWidth: 15,
            data: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#00FFAE'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '水库水位',
            barWidth: 15,
            data: waterlY,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '汛限水位',
            barWidth: 15,
            data: nowLimitWaterLevelArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              type: 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '正常蓄水位',
            barWidth: 15,
            data: jingArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: 'purple',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '防洪高水位',
            barWidth: 15,
            data: waterHeightArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          }
        ]
      }
      this.floodChart2.clear()
      this.floodChart2.setOption(option)
    },
    initFloodChart2Copy (x, y, waterlY) {
      // 汛限水位
      const nowLimitWaterLevel = Number(this.$store.state.reservoirRealData.nowLimitWaterLevel).toFixed(0)
      const nowLimitWaterLevelArr = []
      // 正常蓄水位
      const normalPoolLevel = Number(this.$store.state.reservoirBaseData.normal_pool_level).toFixed(0)
      const jingArr = []
      // 防洪高水位
      const waterHeightLevel = Number(this.$store.state.reservoirBaseData.water_height_level).toFixed(0)
      const waterHeightArr = []
      x.forEach(() => {
        nowLimitWaterLevelArr.push(nowLimitWaterLevel)
        jingArr.push(normalPoolLevel)
        waterHeightArr.push(waterHeightLevel)
      })
      let waterYMin = Math.floor(Math.min(...waterlY) - 1)
      if (waterYMin < 0) waterYMin = 0
      const waterYMax = Math.floor(Math.max(...waterlY, ...jingArr, ...waterHeightArr) + 1)
      if (!this.bigChart) this.bigChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          top: 30,
          left: 35,
          right: 15,
          bottom: 15,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'

          }
        },
        legend: {
          data: ['入库流量', '水库水位', '汛限水位', '正常蓄水位', '防洪高水位'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 5,
          itemWidth: 20,
          itemHeight: 12,
          itemStyle: {
            fontSize: 12
          } // 样式
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(1, 244, 168, 0.4)' },
            { offset: 1, color: 'rgba(1, 244, 168, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 255, 255, 0.4)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0)' }
          ]
        ), '#FF5757', 'purple', '#FF5757'],
        xAxis: {
          type: 'category',
          data: x,
          name: '单位：h',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: 60
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value, index) => String(value).substring(2) // 文本格式化
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '流量：m³/s',
            alignTicks: false,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle'
              // padding: [0, 65, 0, 0]
            },
            axisPointer: {
              show: true,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: true,
                // 此处会覆盖提示框文本格式化
                backgroundColor: '#6a7985',
                formatter: ({ value }) => `${Number(value).toFixed(2)}` // 文本格式化
              },
              lineStyle: {} // 线的样式
            },
            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: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '水位：m',
            position: 'right',
            alignTicks: false,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 0, 0, 30]
            },
            min: waterYMin,
            max: waterYMax,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: true,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: true,
                // 此处会覆盖提示框文本格式化
                // formatter: '{value}+X轴格式化', // 文本格式化
                formatter: ({ value }) => `${Number(value).toFixed(2)}`, // 文本格式化
                backgroundColor: '#6a7985'
              },
              lineStyle: {} // 线的样式
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12,
              formatter: (value) => value.toFixed(0)
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }],
        series: [
          {
            name: '入库流量',
            barWidth: 15,
            data: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#00FFAE'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '水库水位',
            barWidth: 15,
            data: waterlY,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '汛限水位',
            barWidth: 15,
            data: nowLimitWaterLevelArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              type: 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '正常蓄水位',
            barWidth: 15,
            data: jingArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: 'purple',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '防洪高水位',
            barWidth: 15,
            data: waterHeightArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          }
        ]
      }
      this.bigChart.clear()
      this.bigChart.setOption(option)
    },
    initFloodChart3 (x, ru, xia, ku) {
      // 汛限水位
      const nowLimitWaterLevel = Number(this.$store.state.reservoirRealData.nowLimitWaterLevel).toFixed(0)
      const nowLimitWaterLevelArr = []
      // 正常蓄水位
      const normalPoolLevel = Number(this.$store.state.reservoirBaseData.normal_pool_level).toFixed(0)
      const jingArr = []
      // 防洪高水位
      const waterHeightLevel = Number(this.$store.state.reservoirBaseData.water_height_level).toFixed(0)
      const waterHeightArr = []
      x.forEach(() => {
        nowLimitWaterLevelArr.push(nowLimitWaterLevel)
        jingArr.push(normalPoolLevel)
        waterHeightArr.push(waterHeightLevel)
      })
      let kuMin = Math.floor((Math.min(...ku) - 1))
      if (kuMin < 0) kuMin = 0
      const waterYMax = Math.floor(Math.max(...ku, ...jingArr, ...waterHeightArr) + 1)
      if (!this.floodChart3) this.floodChart3 = this.echarts.init(document.getElementById('flood-chart3'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 15,
          top: 50,
          bottom: 15,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}'
            }
          }
        },
        legend: {
          data: ['入库流量', '下泄流量', '水库水位'],
          top: 5,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(1, 244, 168, 0.4)' },
            { offset: 1, color: 'rgba(1, 244, 168, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 186, 0, 1)' },
            { offset: 1, color: 'rgba(255, 186, 0, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 255, 255, 0.4)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0)' }
          ]
        ), '#FF5757', 'purple', '#FF5757'],
        xAxis: {
          type: 'category',
          data: x,
          name: '单位：h',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: 60
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '流量：m³/s',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle'
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },

            axisPointer: {
              show: true,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: true,
                // 此处会覆盖提示框文本格式化
                // formatter: '{value}+X轴格式化', // 文本格式化
                formatter: ({ value }) => `${Number(value).toFixed(2)}` // 文本格式化
                // backgroundColor: '#6a7985'
              }
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '水位：m',
            position: 'right',
            min: kuMin,
            max: waterYMax,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle'
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: true,
              type: 'line',
              label: {
                show: true
              },
              lineStyle: {}
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }
        ],
        series: [
          {
            name: '入库流量',
            barWidth: 15,
            data: ru,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#00FFAE'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true,
            animationThreshold: 20000000000,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '下泄流量',
            barWidth: 15,
            data: xia,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FFBA00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true,
            animationThreshold: 20000000000,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '水库水位',
            barWidth: 15,
            data: ku,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '汛限水位',
            barWidth: 15,
            data: nowLimitWaterLevelArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              type: 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '正常蓄水位',
            barWidth: 15,
            data: jingArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: 'purple',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '防洪高水位',
            barWidth: 15,
            data: waterHeightArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          }

        ]
      }
      this.floodChart3.clear()
      this.floodChart3.setOption(option)
    },
    initFloodChart3Copy (x, ru, xia, ku) {
      // 汛限水位
      const nowLimitWaterLevel = Number(this.$store.state.reservoirRealData.nowLimitWaterLevel).toFixed(0)
      const nowLimitWaterLevelArr = []
      // 正常蓄水位
      const normalPoolLevel = Number(this.$store.state.reservoirBaseData.normal_pool_level).toFixed(0)
      const jingArr = []
      // 防洪高水位
      const waterHeightLevel = Number(this.$store.state.reservoirBaseData.water_height_level).toFixed(0)
      const waterHeightArr = []
      x.forEach(() => {
        nowLimitWaterLevelArr.push(nowLimitWaterLevel)
        jingArr.push(normalPoolLevel)
        waterHeightArr.push(waterHeightLevel)
      })
      let kuMin = Math.floor((Math.min(...ku) - 1))
      if (kuMin < 0) kuMin = 0
      const waterYMax = Math.floor(Math.max(...ku, ...jingArr, ...waterHeightArr) + 1)
      if (!this.bigChart2) this.bigChart2 = this.echarts.init(document.getElementById('big-chart-dx'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 15,
          top: 50,
          bottom: 15,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}'
            }
          }
        },
        legend: {
          data: ['入库流量', '下泄流量', '水库水位', '汛限水位', '正常蓄水位', '防洪高水位'],
          top: 5,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(1, 244, 168, 0.4)' },
            { offset: 1, color: 'rgba(1, 244, 168, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 186, 0, 1)' },
            { offset: 1, color: 'rgba(255, 186, 0, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 255, 255, 0.4)' },
            { offset: 1, color: 'rgba(255, 255, 255, 0)' }
          ]
        ), '#FF5757', 'purple', '#FF5757'],
        xAxis: {
          type: 'category',
          data: x,
          name: '单位：h',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'right',
            verticalAlign: 'top',
            lineHeight: 60
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '流量：m³/s',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle'
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: true,
              type: 'line',
              label: {
                show: true
              },
              lineStyle: {}
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '水位：m',
            position: 'right',
            min: kuMin,
            max: waterYMax,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle'
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: true,
              type: 'line',
              label: {
                show: true
              },
              lineStyle: {}
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }
        ],
        series: [
          {
            name: '入库流量',
            barWidth: 15,
            data: ru,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#00FFAE'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true,
            animationThreshold: 20000000000,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '下泄流量',
            barWidth: 15,
            data: xia,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FFBA00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true,
            animationThreshold: 20000000000,
            animationDuration: 16000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '水库水位',
            barWidth: 15,
            data: ku,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '汛限水位',
            barWidth: 15,
            data: nowLimitWaterLevelArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              type: 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '正常蓄水位',
            barWidth: 15,
            data: jingArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: 'purple',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          },
          {
            name: '防洪高水位',
            barWidth: 15,
            data: waterHeightArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true,
            animationDuration: 16000,
            animationThreshold: 20000000000,
            animationEasing: 'linear',
            animationDurationUpdate: 16000,
            animationEasingUpdate: 'linear'
          }

        ]
      }
      this.bigChart2.clear()
      this.bigChart2.setOption(option)
    }
  },
  watch: {
    async rTop1Value (newValue, oldValue) {
      try {
        // 改变主按钮(也用于判断是不是烟花)
        this.$store.commit('setRTop1Value', newValue)
        // 计算归零
        this.rainCalcFlag = false
        // 变0
        this.formData.fun = 0
        // 点击自定义只用打开弹层，别的不用干
        if (newValue === 2) {
          this.rainShow = true
          this.hisRTop1Value = oldValue
          return
        }
        // 点击自定义雨量之外的按钮 禁用下方导航按钮
        if (newValue !== 2) this.$store.commit('setFooterDis', true)
        // 点击了自定义没有计算就取消的话变回原来的会禁用掉按钮,要再次开放按钮
        if (oldValue === 2 && this.rainCalcFlag === false) {
          this.$store.commit('setFooterDis', false)
          return
        }
        this.pageLoading2 = true
        this.selectValue = 0
        // this.pageReset()
        this.floodChart1.clear()
        this.floodChart2.clear()
        this.floodChart3.clear()
        if (newValue === 0) {
          // 水库水情预测弹窗
          this.tf_water_level_show = false
          // 拿预报雨量下的三个图表
          await this.http2()
          // this.$store.commit('setFutureFlowOutMax')
          clearInterval(this.timer)
          clearInterval(this.timer2)
          this.dayArr = ['未来1天', '未来3天', '未来5天', '未来7天']
          this.pageLoading2 = false
          this.initChart()
          this.$eventBus.$emit('clearTimer')
          // this.$eventBus.$emit('stopWL')
          // 恢复水位
          this.$eventBus.$emit('resetWL')
          this.test = 162.14
          // 恢复51图标
          this.$eventBus.$emit('znybicon')
          this.$store.commit('resetYCWater')
        } else if (newValue === 1) {
          this.dayArr = ['第1天', '第3天', '第5天', '第7天']
          // 获取烟花三个图表数据
          await this.getInfoData()
          // 改变天气
          this.$eventBus.$emit('rainWeather')
          // 跳转台风视角
          this.$eventBus.$emit('taifeng')
          // 水库水情预测弹窗
          this.tf_water_level_show = true
          this.timer2 = setTimeout(() => {
            this.pageLoading2 = false
            // 水位上升
            this.$eventBus.$emit('updateWL')
            // 水位窗口数据变化
            this.timer = setInterval(() => {
              this.test = Number((Number(this.test) + 0.24).toFixed(2))
              if (this.test > 165.67) {
                clearInterval(this.timer)
                clearInterval(this.timer2)
              }
            }, 1000)
            setTimeout(() => {
              this.$store.commit('setFooterDis', false)
            }, 500)
            this.initChart()
          }, 3000)
          this.$store.commit('setFooterDis', false)
        }
      } catch (error) {
        console.log(error)
      }
    },
    selectValue (newValue, oldValue) {
      this.formData.fun = newValue
      console.log('下拉选择后', newValue, this.formData.fun)
      if (newValue === 3) {
        this.DuXunShow = true
        // 默认使用推荐方案
        this.form1.gateOpenMap[1][0].e = this.$store.state.dxData1[0].gateOpenMap[1][0].e
        this.form1.gateOpenMap[2][0].e = this.$store.state.dxData1[0].gateOpenMap[2][0].e
        this.form1.gateOpenMap[3][0].e = this.$store.state.dxData1[0].gateOpenMap[3][0].e
        this.form1.gateOpenMap[4][0].e = this.$store.state.dxData1[0].gateOpenMap[4][0].e
        this.form1.gateOpenMap[5][0].e = this.$store.state.dxData1[0].gateOpenMap[5][0].e
        this.formData.date = []
        this.formData.date.push(new Date(this.$store.state.dxData1[0].gateOpenMap[1][0].startTime))
        this.formData.date.push(new Date(this.$store.state.dxData1[0].gateOpenMap[1][0].endTime))

        this.formData.water = Number(this.$store.state.reservoirRealData.water_level_value).toFixed(2)
        this.$nextTick(() => {
          if (this.bigChart2 === null) {
            this.bigChart2 = this.echarts.init(document.getElementById('big-chart-dx'))
            this.bigChart2.clear()
          } else {
            this.bigChart2.clear()
          }
        })
        this.hisDXSelect = oldValue
        this.bigChartBtnIndex = oldValue
        return
      }
      if (this.rTop1Value === 0 || this.rTop1Value === 1) {
        this.initFloodChart3(this.$store.state.dxObj1.x[newValue], this.$store.state.dxObj1.ru[newValue], this.$store.state.dxObj1.xia[newValue], this.$store.state.dxObj1.ku[newValue])
      } else if (this.rTop1Value === 2) {
        if (this.$store.state.rainCalcFlagLR === 0) {
          this.initFloodChart3(this.$store.state.rainDxZiObj.x[newValue], this.$store.state.rainDxZiObj.ru[newValue], this.$store.state.rainDxZiObj.xia[newValue], this.$store.state.rainDxZiObj.ku[newValue])
        } else if (this.$store.state.rainCalcFlagLR === 1) {
          this.initFloodChart3(this.$store.state.rainDxZiAddObj.x[newValue], this.$store.state.rainDxZiAddObj.ru[newValue], this.$store.state.rainDxZiAddObj.xia[newValue], this.$store.state.rainDxZiAddObj.ku[newValue])
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)
.againSetting {
  display: flex;
  align-items: center;
  margin-left: 193px;
  padding: 5px;
  height: 20px;
  text-align: center;
  background-color: rgba(96, 255, 246, 0.3);
  color: #fff;
}
.tf-water-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 1251px;
  top: 39px;
  width: 259px;
  height: 200px;
  background: url("~@/assets/images/home/blue_bg.png") no-repeat center / 100%
    100%;
  color: #fff;
  .close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 17px;
    height: 17px;
    background: url("~@/assets/images/home/close.png") no-repeat center / 100%
      100%;
    cursor: pointer;
  }
  .title {
    margin: 13px 0 10px;
    font-size: 14px;
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 220px;
    height: 141px;
    padding-left: 10px;
    font-size: 18px;
    .box {
      display: flex;
    }
    .box span:nth-child(1) {
      margin-right: 20px;
    }
    .box:nth-child(1) {
      margin-bottom: 25px;
    }
    .box span:nth-child(1) {
      font-size: 14px;
    }
    .box span {
      line-height: 18px;
    }
    .box:nth-child(2) {
      position: relative;
      span:nth-child(2) {
        &.red {
          color: red;
        }
      }
      p {
        position: absolute;
        bottom: -30px;
        left: 0;
        color: orange;
        font-size: 14px;
        span {
          color: red;
          font-size: 18px;
          margin: 0 5px;
        }
        i {
          color: #fff;
        }
      }
    }
  }
}
.tf-water-level-small {
  position: absolute;
  left: 1460px;
  top: 46px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 255, 255, 0.7);
  cursor: pointer;
}
.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;
  }
}
// 弹层里面的图表
.big-chart {
  width: 100%;
  height: 100%;
}
.prediction {
  position: absolute;
  left: 0;
  top: 0;
  .flood-chart-box {
    position: relative;
    width: 100%;
    flex: 1;
    // #flood-chart1
    #flood-chart1 ::v-deep {
      width: 100%;
      // height: 218px;
      height: 100%;
    }
    &.chart1 .flood-chart1-p1 {
      position: absolute;
      top: 0;
      left: 5px;
      color: #cacaca;
      font-size: 12px;
    }
    // #flood-chart2
    #flood-chart2 {
      width: 100%;
      height: 218px;
      height: 100%;
    }
    &.chart2 {
      .flood-chart2-p1 {
        position: absolute;
        top: 0;
        left: 5px;
        color: #cacaca;
        font-size: 12px;
      }
      .flood-chart2-p2 {
        position: absolute;
        bottom: -10px;
        right: 0;
        color: #cacaca;
        font-size: 12px;
      }
    }
    // #flood-chart3
    #flood-chart3 {
      width: 100%;
      // height: 249px;
      height: 100%;
    }
    &.chart3 {
      .flood-chart3-p1 {
        position: absolute;
        top: 15px;
        left: 5px;
        color: #cacaca;
        font-size: 12px;
      }
      .flood-chart3-p2 {
        position: absolute;
        bottom: -10px;
        right: 0;
        color: #cacaca;
        font-size: 12px;
      }
    }
  }
  .flood-left {
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;
    .top1 {
      .box:last-child {
        margin-bottom: 0;
      }
      .box:first-child {
        margin-top: 10px;
      }
      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        margin-bottom: 2px;
        background-color: rgba(96, 255, 246, 0.15);
        padding: 0 30px 0 10px;
        .icon-txt {
          display: flex;
          align-items: center;
          .icon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            &.icon1 {
              background: url("~@/assets/images/flood/icon1.png") no-repeat
                center / 100% 100%;
            }
            &.icon2 {
              background: url("~@/assets/images/flood/icon2.png") no-repeat
                center / 100% 100%;
            }
            &.icon3 {
              background: url("~@/assets/images/flood/icon3.png") no-repeat
                center / 100% 100%;
            }
            &.icon4 {
              background: url("~@/assets/images/flood/icon4.png") no-repeat
                center / 100% 100%;
            }
            &.icon5 {
              background: url("~@/assets/images/flood/icon5.png") no-repeat
                center / 100% 100%;
            }
            &.icon6 {
              background: url("~@/assets/images/flood/icon6.png") no-repeat
                center / 100% 100%;
            }
          }
          span {
            color: #e8eff6;
            font-size: 14px;
          }
        }
        p {
          color: #e8eff6;
          font-size: 12px;
          span {
            color: #60fff6;
            font-size: 18px;
            margin-right: 5px;
            font-weight: 700;
          }
        }
      }
      .box2-father {
        height: 338px;
        .box2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 380px;
          height: 66px;
          margin-bottom: 2px;
          padding-left: 22px;
          background-color: rgba(96, 255, 246, 0.15);
          .icon {
            position: relative;
            width: 46px;
            height: 46px;
            background: url("~@/assets/images/flood/icon7.gif") no-repeat center /
              100% 100%;
            margin-right: 36px;
            .door {
              position: absolute;
              top: 12px;
              left: -12px;
              width: 70px;
              height: 22px;
              background-color: rgba(0, 76, 74, 0.8);
              border-radius: 11px;
              color: #e8eff6;
              font-size: 14px;
              text-align: center;
              line-height: 22px;
            }
          }
          p {
            display: flex;
            width: 138px;
            color: #e8eff6;
            font-size: 14px;
            line-height: 18px;
            span {
              margin-left: 10px;
              color: #60fff6;
              font-size: 18px;
              font-weight: 700;
            }
          }
          p:nth-child(3) {
            span {
              color: #ffba00;
            }
          }
        }
        .box2:last-child {
          margin-bottom: 0;
        }
      }

      .video-box ::v-deep {
        width: 100%;
        height: 210px;
        .el-carousel {
          width: 100%;
          height: 100%;
          .el-carousel__container {
            height: 100%;
            .el-carousel__item {
              height: 100%;
              .video {
                position: relative;
                width: 100%;
                height: 100%;
                cursor: pointer;
                img {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                }
                .icon {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  z-index: 2;
                  transform: translate(-50%, -50%);
                  width: 50px;
                  height: 50px;
                  background: url("~@/assets/images/home/play.png") no-repeat
                    center / 100% 100%;
                }
              }
            }
          }
          ul {
            display: flex;
          }
          .el-carousel__item:nth-child(even) {
            background-color: #99a9bf;
          }

          .el-carousel__item:nth-child(odd) {
            background-color: #d3dce6;
          }
        }
      }

      .line {
        width: 100%;
        height: 3px;
        background-color: pink;
        background: url("~@/assets/images/flood/line.gif") no-repeat top center /
          104% 100%;
        margin: 14px 0;
      }
    }
  }
  .flood-right ::v-deep {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .flood-panel {
      margin-bottom: 10px;
    }
    .flood-panel:last-child {
      margin-bottom: 0;
    }
    .top1 {
      height: 288px;
      .el-select {
        width: 160px;
        left: 120px;
        .el-input__inner {
          width: 160px;
        }
      }
    }
    .top2 {
      height: 288px;
    }
  }
  .top3 ::v-deep {
    width: 100%;
    flex: 1;
    margin-bottom: 0 !important;
    .el-select {
      width: 120px;
      right: 40px;
      .el-input__inner {
        width: 120px;
      }
    }
  }
}
.videoDialog {
  iframe {
    width: 100%;
    height: 100%;
  }
}
.du-xun ::v-deep {
  /* 表单 */
  .el-form {
    display: flex;
    width: 100%;
    height: 50px;
    padding-left: 20px;
    margin-bottom: 10px;
    background-color: rgba(96, 255, 246, 0.05);
    // 表单项
    .el-form-item {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      margin-right: 20px;

      // 表单项label标签
      .el-form-item__label {
        width: 110px;
        color: $pry;
        font-size: 16px;
        text-align: right;
      }
      // 表单项内容
      .el-form-item__content {
        display: flex;
        align-items: center;
        flex: 1;
        /* 输入框 */
        .water {
          .el-input__inner {
            width: 120px;
            height: 30px;
            background-color: #1b4878;
            border-color: #2e6d8d;
            color: #fff;
            font-size: 14px;
            &:focus {
              border-color: #01fff5;
            }
            &::placeholder {
              font-size: 14px;
            }
          }
          .el-input__suffix {
            display: flex;
            align-items: center;
            margin-right: 20px;
          }
        }
        .daochu {
          width: 70px;
          height: 24px;
          margin-left: 20px;
          border-radius: 4px;
          background-color: #37ccc4;
          color: #fff;
          text-align: center;
          line-height: 24px;
        }
        .chart-icon,
        .mess-list {
          width: 30px;
          height: 30px;
          margin-left: 10px;
          border-radius: 4px;
        }
        .chart-icon {
          background: rgba(96, 255, 246, 0.1)
            url("~@/assets/images/operate/chart_icon2.png") no-repeat center /
            20px 20px;
          &.active {
            background: rgba(96, 255, 246, 0.1)
              url("~@/assets/images/operate/chart_icon.png") no-repeat center /
              20px 20px !important;
          }
        }
        .mess-list {
          background: rgba(96, 255, 246, 0.1)
            url("~@/assets/images/operate/mess_list.png") no-repeat center /
            20px 20px;
          &.active {
            background: rgba(96, 255, 246, 0.1)
              url("~@/assets/images/operate/mess_list2.png") no-repeat center /
              20px 20px !important;
          }
        }
      }
      // 表单校验错误输入框边框颜色
      &.is-error .el-input__inner {
        border-color: #f56c6c !important;
      }
    }
  }
  /* 日期选择器 */
  // 日期选择器选择框
  .el-date-editor {
    display: flex;
    justify-content: space-between;
    width: 400px;
    height: 30px;
    padding: 3px 10px;
    background-color: #0b3268;
    border: 1px solid #2e6d8d;
    .el-icon-time {
      display: flex;
      align-items: center;
      margin: 0;
      &::before {
        color: $pry;
      }
    }
    .el-range__close-icon {
      display: flex;
      align-items: center;
      &::before {
        color: $pry;
      }
    }
    span {
      display: flex;
      align-items: center;
      width: 14px;
      padding: 0;
      color: #fff;
    }
    input {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: transparent;
      color: $pry;
      border-radius: 5px;
    }
  }
  .el-select {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 120px;
    height: 30px;
    .el-input__inner {
      width: 120px;
      height: 30px;
      background-color: rgba(18, 48, 71, 0.4);
    }
  }
  .el-range-editor.is-active:hover {
    border-color: $pry;
  }
  .door-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .box {
      width: 224px;
      margin-bottom: 10px;
      .t-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 30px;
        color: #00fff7;
        background-color: rgba(96, 255, 246, 0.15);
      }
      .b-box {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background-color: rgba(96, 255, 246, 0.1);
        span {
          font-size: 16px;
        }
        input {
          width: 70px;
          height: 30px;
          background-color: transparent;
          border-radius: 4px;
          border: 0;
          margin: 0 10px;
          color: #fff;
          font-size: 16px;
          text-align: center;
          &.zi {
            background-color: rgba(0, 0, 0, 0.2);
          }
        }
        i {
          font-size: 12px;
        }
      }
    }
  }
  .calc {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 30px;
    background-color: #8d6327;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    margin-left: 20px;
  }
  .txt {
    width: 100%;
    height: 50px;
    margin-bottom: 1px;
    text-align: center;
    line-height: 50px;
    background-color: rgba(96, 255, 246, 0.05);
  }
  #big-chart-dx {
    width: 100%;
    flex: 1;
    background-color: rgba(96, 255, 246, 0.05);
  }
}
.rain-dialog ::v-deep {
  .el-dialog {
    display: flex;
    justify-content: center;
    width: 800px;
    height: 650px;
    .btn-box {
      display: flex;
      justify-content: center;
      .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 34px;
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        &.active {
          color: #60fff6;
        }
        .icon {
          vertical-align: middle;
          width: 13px;
          height: 13px;
          margin-right: 30px;
          background: url("~@/assets/images/flood/dian1.png") no-repeat center /
            100% 100%;
          &.active {
            background: url("~@/assets/images/flood/dian2.png") no-repeat center /
              100% 100%;
          }
        }
      }
      .button:nth-child(2) {
        margin-left: 40px;
      }
    }
    .content {
      width: 100%;
      flex: 1;
      padding-top: 50px;
      padding: 50px 20px 0 10px;
      /* 表单 */
      .el-form {
        width: 100%;
        height: 100%;
        .item-father {
          width: 100%;
          .el-form-item__content {
            & .el-form-item:nth-child(1) {
              margin-right: 20px;
            }
          }
        }

        // 表单项
        .el-form-item {
          display: flex;
          align-items: center;
          margin: 0;
          // 表单项label标签
          .el-form-item__label {
            width: 170px;
            color: $pry;
            font-size: 14px;
            text-align: right;
          }
          // 表单项内容
          .el-form-item__content {
            display: flex;
            align-items: center;
            flex: 1;
          }
          // 表单校验错误输入框边框颜色
          &.is-error .el-input__inner {
            border-color: #f56c6c !important;
          }
        }
        & > .el-form-item {
          margin-bottom: 40px;
        }
        // .el-form-item:last-child {
        //   margin-top: 80px;
        // }
      }
      /* 输入框 */
      .el-input {
        .el-input__inner {
          width: 100%;
          height: 40px;
          background-color: #1b4878;
          border-color: #2e6d8d;
          color: #fff;
          font-size: 14px;
          &:hover {
            border-color: $pry2;
          }
          &:focus {
            border-color: $pry;
          }
          &::placeholder {
            font-size: 14px;
          }
        }
      }
      /* 下拉选择 */
      .el-select {
        // 搜索输入框
        .el-select__input {
          color: #fff;
          font-size: 14px;
        }
        // 输入框
        .el-input {
          // 输入框选中时
          &.is-focus .el-input__inner {
            border-color: $pry;
          }
          .el-input__inner {
            width: 180px;
            height: 40px;
            background-color: #1b4878;
            border-color: #2e6d8d;
            color: #fff;
            font-size: 14px;
            &::placeholder {
              font-size: 14px;
            }
            &:hover {
              border-color: $pry2;
            }
          }
          // 输入框箭头颜色
          .el-input__suffix {
            display: flex;
            align-items: center;
            .el-input__suffix-inner {
              i {
                color: $pry;
              }
            }
          }
        }
        // 显示的选中项
        .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;
            }
          }
        }
      }
      /* 日期时间选择器 */
      // 日期时间选择器选择框
      .el-date-editor {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 400px;
        height: 40px;
        padding: 3px 10px;
        background-color: #0b3268;
        border-color: #2e6d8d;
        .el-input__inner {
          padding-left: 40px;
        }
        .el-input__prefix {
          margin-left: 15px;
        }
        .el-input__suffix {
          margin-right: 20px;
        }
        // 日期选择器图标
        .el-icon-date {
          display: flex;
          align-items: center;
          width: 14px;
          margin: 0;
          &::before {
            color: $pry;
          }
        }
        // 日期时间选择器图标
        .el-icon-time {
          display: flex;
          align-items: center;
          width: 14px;
          margin: 0;
          &::before {
            color: $pry;
          }
        }
        .el-range__close-icon {
          display: flex;
          align-items: center;
          width: 14px;
          &::before {
            color: $pry;
          }
        }
        .el-range-input {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 30px;

          background-color: rgba(96, 255, 246, 0.4);
          color: $pry;
          border-radius: 5px;
        }
        span {
          display: flex;
          align-items: center;
          width: 14px;
          padding: 0;
          color: #fff;
        }
      }
      .el-range-editor.is-active {
        border-color: $pry;
      }
    }
    .content.content2 {
      padding: 20px 20px 0 10px;
      .el-form-item-calc {
        display: flex;
        margin-top: 0px !important;
        .el-form-item__content {
          display: flex;
          justify-content: center;
          .el-button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 70px;
            height: 30px;
            margin: 30px auto 0 !important;
            margin-top: 25px;
            background-color: #8d6327;
            border-radius: 4px;
            color: #fff;
            border: 1px solid #8d6327;
            font-size: 16px;
          }
        }
      }
      table {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 365px;
        background-color: #103b69;
        tbody {
          height: 334px;
          overflow: auto;
          background-color: #1d597f;
          &::-webkit-scrollbar {
            // 滚动条整体样式
            width: 10px !important; // 竖向滚动条宽度
            height: 0 !important; // 横向滚动条高度
          }
          &::-webkit-scrollbar-thumb {
            // 滚动条内滑块样式
            background-color: #6d9dbc !important;
          }
          &::-webkit-scrollbar-track {
            // 滚动条轨道样式
            background-color: transparent !important;
          }
        }
        tr {
          display: flex;
          align-items: center;
          width: 100%;
          height: 50px;
          border-bottom: 2px solid #0a3461;
          td.td-input {
            display: flex;
            align-items: center;
            .el-form-item {
              height: 50px !important;
              margin-bottom: 0 !important;
              background-color: transparent !important;
            }
            .el-form-item__error {
              left: 40px;
            }
          }
          th:nth-child(1) {
            width: 265px;
          }
          th:nth-child(2),
          th:nth-child(3) {
            flex: 1;
          }
          td:nth-child(1) {
            width: 265px;
          }
          td:nth-child(2),
          td:nth-child(3) {
            flex: 1;
          }
          td,
          th {
            text-align: center;
            height: 100%;
            line-height: 50px;
          }

          th,
          td {
            border-right: 2px solid #0a3461;
          }
          th:last-child,
          td:last-child {
            border-right: 0;
          }
          th:nth-child(4) {
            width: 10px;
          }
        }
        td {
          justify-content: center;
        }
        tr:nth-child(odd) td {
          background-color: #154570;
        }
        tr:nth-child(even) td {
          background-color: #103b69;
        }
        tr:nth-child(1) {
          th {
            color: #60fff6;
            background-color: #1d597f !important;
          }
        }
      }
      /* 表单 */
      .el-form {
        width: 100%;
        height: 100%;
        // 表单项
        .el-form-item {
          display: flex;
          align-items: center;
          margin: 0;
          // 表单项label标签
          .el-form-item__label {
            width: 100px;
            color: $pry;
            font-size: 14px;
            text-align: right;
          }
          // 表单项内容
          .el-form-item__content {
            display: flex;
            align-items: center;
            flex: 1;
          }
          // 表单校验错误输入框边框颜色
          &.is-error .el-input__inner {
            border-color: #f56c6c !important;
          }
        }
        .el-form-item:nth-child(1) {
          background-color: #103b69;
          height: 40px;
          padding: 0 10px;
          margin-bottom: 15px;
          .el-form-item__content {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 30px;
          }
          .el-button {
            position: absolute;
            right: 0;
            top: 0;
            width: 80px;
            background: #12bcb2;
            border-color: #12bcb2;
            color: #fff;
          }
        }
      }
      /* 输入框 */
      .el-input {
        width: 90px;
        height: 30px;
        .el-input__inner {
          width: 90px;
          height: 30px;
          background-color: rgba(0, 0, 0, 0.2);
          border-color: rgba(0, 0, 0, 0.2);
          color: #fff;
          font-size: 14px;
          &:hover {
            border-color: $pry2;
          }
          &:focus {
            border-color: $pry;
          }
          &::placeholder {
            font-size: 14px;
          }
        }
      }
      .el-date-editor {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        width: 400px;
        height: 30px;
        padding: 3px 10px;
        background-color: #0b3268;
        border-color: #2e6d8d;
        // 日期选择器图标
        .el-icon-date {
          display: flex;
          align-items: center;
          width: 14px;
          margin: 0;
          &::before {
            color: $pry;
          }
        }
        // 日期时间选择器图标
        .el-icon-time {
          display: flex;
          align-items: center;
          width: 14px;
          margin: 0;
          &::before {
            color: $pry;
          }
        }
        .el-range__close-icon {
          display: flex;
          align-items: center;
          width: 14px;
          &::before {
            color: $pry;
          }
        }
        .el-range-input {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 30px;
          background-color: transparent;
          color: $pry;
          border-radius: 5px;
        }
        span {
          display: flex;
          align-items: center;
          width: 14px;
          padding: 0;
          color: #fff;
        }
      }
      .el-range-editor.is-active {
        border-color: $pry;
      }
    }
    // input {
    //   width: 376px;
    //   height: 50px;
    //   background-color: rgba(96, 255, 246, 0.1);
    //   border: 0;
    //   text-align: center;
    //   line-height: 50px;
    //   font-size: 14px;
    //   color: #fff;
    //   &::placeholder {
    //     color: #fff;
    //   }
    // }
    .rain-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70px;
      height: 30px;
      margin: 25px auto;
      margin-top: 25px;
      background-color: #8d6327;
      border-radius: 4px;
      color: #fff;
      border: 1px solid #8d6327;
      font-size: 16px;
    }
  }
}
.el-input-number ::v-deep {
  width: 150px;
  span {
    width: 40px;
    height: 50% !important;
    &:hover i {
      color: $pry;
    }
    &.is-disabled i {
      color: #c0c4cc !important ;
    }
  }
  .el-input {
    width: 100% !important;
    height: 40px !important;
    .el-input__inner {
      width: 100% !important;
      height: 40px !important;
      background-color: #1b4878;
      color: #fff;
      border: 1px solid #2e6d8d !important;
      &:hover {
        border: 1px solid #2792a0 !important;
      }
      &:focus {
        border-color: $pry !important;
      }
    }
  }
  .el-input-number__increase:hover:not(.is-disabled)
    ~ .el-input
    .el-input__inner:not(.is-disabled) {
    border-color: $pry !important;
  }
}
</style>
