<template>
  <div class="plan">
    <div class="btn-box">
      <button
        @click="zjShow = true"
        class="xlfa"
        v-show="isShow"
        :disabled="this.pageLoading1"
        :style="{ cursor: this.pageLoading1 ? 'not-allowed' : 'pointer' }"
      >
        预案库
      </button>
      <button
        @click="yaShow = true"
        class="hqyjcz"
        v-show="isShow"
        :disabled="this.pageLoading1"
        :style="{ cursor: this.pageLoading1 ? 'not-allowed' : 'pointer' }"
      >
        专家库
      </button>
    </div>
    <div
      class="is-show"
      @click="isShowBtn"
      :class="{ hidden: isShow === false }"
    ></div>
    <div class="plan-left" v-show="isShow" v-loading="pageLoading1">
      <div class="title-box">
        <el-date-picker
          v-model="dateSelect"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
          :clearable="false"
          popper-class="el-picker-panel2"
          @change="dateChange"
        >
        </el-date-picker>
        <el-dropdown
          class="userInfo"
          @visible-change="addClass"
          trigger="click"
        >
          <el-button type="primary">
            <p>历史台风</p>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="tfChange(0)"
              >烟花台风</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <BigPanel
        title="雨情复盘"
        class="top1"
        :selectObj="{ show: false, arr: [] }"
        v-loading="pLTop1Loading"
      >
        <template #title>
          <div class="is-big" @click="openChart('雨情复盘', [])"></div>
          <el-select
            v-model="hisRain"
            placeholder="请选择"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in hisRainOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>

        <!-- <div class="txt">累计雨量：<span>356.50</span>&nbsp;mm</div> -->
        <div id="leftChart1"></div>
      </BigPanel>
      <BigPanel title="入库流量分析" class="top3">
        <template #title>
          <div
            class="is-big"
            @click="openChart('入库流量分析', [], selectValue)"
          ></div>
          <!-- @click="openChart('入库流量分析', options, selectValue)" -->
          <!-- <el-select
            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="box">
          <div class="b">
            <span>历史最高水位</span>
            <p><span>23.10 </span>m</p>
          </div>
          <div class="b">
            <span>复盘最高水位</span>
            <p><span>23.10 </span>m</p>
          </div>
        </div> -->
        <div id="leftChart3"></div>
      </BigPanel>
      <BigPanel title="库水位复盘" class="top2">
        <template #title>
          <div
            class="is-big"
            @click="openChart('库水位复盘', [], lTop2Index)"
          ></div>
          <!-- @click="openChart('库水位复盘', lTop2Arr, lTop2Index)" -->
          <div class="big-panel-title-btn-box">
            <button
              v-for="(item, index) in lTop2Arr"
              :key="index"
              @click="lTop2Btn(index)"
              :class="{ active: lTop2Index === index }"
            >
              {{ item }}
            </button>
          </div>
        </template>
        <!-- <div class="box">
          <div class="col col1">
            <div class="icon"></div>
            <div class="txt">
              <span>历史最高水位</span>
              <p><span>163.21</span> m</p>
            </div>
          </div>
          <div class="col col2">
            <div class="icon"></div>
            <div class="txt">
              <span>复盘最高水位</span>
              <p><span>163.09</span> m</p>
            </div>
          </div>
        </div> -->
        <div id="leftChart2"></div>
      </BigPanel>
    </div>
    <div class="plan-right" v-if="false">
      <BigPanel title="历史灾情统计" class="top1">
        <div class="box">
          <div class="b b1">
            <p>风险点</p>
            <p><span>10</span> 个</p>
          </div>
          <div class="b b2">
            <p>漫堤长度</p>
            <p><span>1500</span> m</p>
          </div>
          <div class="b b3">
            <p>受灾面积</p>
            <p><span>0.5</span> K㎡</p>
          </div>
          <div class="b b4">
            <p>受灾人口</p>
            <p><span>300</span> 人</p>
          </div>
        </div>
      </BigPanel>
      <!-- <BigPanel title="复盘评估分析 / 风险评估" class="top2">
        <Scroll5
          :listScrollData="listScrollData"
          :listScrollOption="listScrollOption"
          :num="5"
        ></Scroll5>
      </BigPanel> -->
      <BigPanel title="复盘评估分析" class="top3">
        <div class="box">
          <div class="b b1">
            <p>风险点</p>
            <p><span>10</span> 个</p>
          </div>
          <div class="b b2">
            <p>漫堤长度</p>
            <p><span>1500</span> m</p>
          </div>
          <div class="b b3">
            <p>受灾面积</p>
            <p><span>0.5</span> K㎡</p>
          </div>
          <div class="b b4">
            <p>受灾人口</p>
            <p><span>300</span> 人</p>
          </div>
        </div>
      </BigPanel>
      <BigPanel title="缩略图" class="top4">
        <div class="img"></div>
      </BigPanel>
    </div>
    <PlanRight
      v-show="isShow"
      :pageLoading2="pageLoading2"
      @closeLoading="closeLoading"
    />
    <BigChart :show="chartShow" @close-dialog="closeChart" :title="chartTitle">
      <div class="big-chart-btn-box" v-if="bigChartBtnArr.length > 0">
        <button
          v-for="(item, index) in bigChartBtnArr"
          :key="index"
          :class="{ active: bigChartBtnIndex === index }"
          @click="bigChartBtn(index)"
        >
          {{ typeof item === "object" ? item.label : item }}
        </button>
      </div>
      <div id="big-chart"></div>
    </BigChart>
    <BigChart
      class="zj-ya"
      :show="zjShow"
      @close-dialog="closeDialog"
      title="预案库"
    >
      <iframe
        src="https://hjsk.zjszsk.com/project/login/auto/1?directurl=https%3A%2F%2Fhjsk.zjszsk.com%2Fproject%2Frescueplan%2Fpages"
        frameborder="0"
      ></iframe>
    </BigChart>

    <BigChart
      class="zj-ya"
      :show="yaShow"
      @close-dialog="closeDialog"
      title="专家库"
    >
      <iframe
        src="https://hjsk.zjszsk.com/project/login/auto/1?directurl=https%3A%2F%2Fhjsk.zjszsk.com%2Fproject%2Fexpert%2Fpages"
        frameborder="0"
      ></iframe>
    </BigChart>
  </div>
</template>

<script>
import { getRainWaterlevelApi } from '@/api/home.js'
import { getRainZListApi, getFutureFlowApi } from '@/api/flood.js'
import PlanRight from './plan-right.vue'
// import Zhuanjia from '@/views/flood/components/plan.vue'
export default {
  name: 'Plan',
  components: {
    PlanRight
  },
  created () {
    this.pageLoading1 = true
    this.pageLoading2 = true
  },
  async mounted () {
    try {
      await this.getRainData()
      window.addEventListener('resize', this.initChart)
    } catch (error) {
      this.pageLoading1 = false
      this.pageLoading2 = false
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.initChart)
  },
  data () {
    return {
      zjShow: false,
      yaShow: false,
      leftChart1: null,
      leftChart1Copy: null,
      leftChart2: null,
      leftChart2Copy: null,
      leftChart3: null,
      leftChart3Copy: null,
      zhanList: [],
      rainData: {},
      pageLoading1: false,
      pageLoading2: false,
      pLTop1Loading: false,
      // 雨情复盘
      tfValue: '',
      tfOptions: [{
        value: 0,
        label: '烟花台风'
      }],
      dateSelect: [],
      hisRain: '',
      hisRainOptions: [],
      // 弹层
      reset: true,
      chartTitle: '图表',
      chartShow: false,
      bigChartBtnArr: [],
      bigChartBtnIndex: 0,
      // 隐藏显示全部
      isShow: true,
      // 水库水情复盘分析
      lTop2Index: 0,
      // lTop2Arr: ['库水位', '入库流量'],
      lTop2Arr: ['库水位'],
      // 河道水情复盘分析
      selectValue: 0,
      options: [{
        value: 0,
        label: '城东(寀卢)河道站'
      }, {
        value: 1,
        label: '歌山河道站'
      }, {
        value: 2,
        label: '广义桥河道站'
      }, {
        value: 3,
        label: '橡胶坝河道站'
      }, {
        value: 4,
        label: '东阳市水文站'
      }],
      // 取消掉了,备用
      listScrollData: [
        {
          place: '歌山镇',
          j: '100.40',
          b: '120.50',
          maxS: '118.55',
          maxL: '680'
        }, {
          place: '歌山镇',
          j: '100.40',
          b: '120.50',
          maxS: '118.55',
          maxL: '680'
        }, {
          place: '歌山镇',
          j: '100.40',
          b: '120.50',
          maxS: '118.55',
          maxL: '680'
        }, {
          place: '歌山镇',
          j: '100.40',
          b: '120.50',
          maxS: '118.55',
          maxL: '680'
        }, {
          place: '歌山镇',
          j: '100.40',
          b: '120.50',
          maxS: '118.55',
          maxL: '680'
        }, {
          place: '歌山镇',
          j: '100.40',
          b: '120.50',
          maxS: '118.55',
          maxL: '680'
        }
      ],
      listScrollOption: {
        step: 0.35, // 数值越大滚动速度越快
        limitMoveNum: 5, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1, // 方向:  0-往下  1-往上  2-向左  3-向右
        singleHeight: 50 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      }
    }
  },
  methods: {
    closeDialog () {
      this.zjShow = false
      this.yaShow = false
    },
    closeLoading () {
      this.pageLoading1 = false
      this.pageLoading2 = false
      this.initLeftChart1(this.rainData)
      this.initLeftChart2(this.rainData)
      this.initLeftChart3(this.rainData)
    },
    tfChange (flag) {
      if (flag === 0) {
        this.dateSelect = [
          new Date('2021-07-27'),
          new Date('2021-08-03')
        ]
        this.dateChange()
      }
    },
    addClass (bl) {
      let timer = null
      if (bl) {
        document.getElementsByTagName('body')[0].className = 'tf-body' // 弹出添加class
      } else {
        clearTimeout(timer)
        timer = setTimeout(() => {
          document.body.removeAttribute('class', 'tf-body') // 隐藏移除class
        }, 300)
      }
    },
    // 生成假数据
    randomData (obj) {
      const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
      const randomNum2 = (min, max) =>
        Number((Math.random() * (max - min + 0.1) + min).toFixed(2))
      obj.time.forEach((item, index) => {
        this.rainData.future.futureRain.push(Number((randomNum(80, 120) * this.rainData.real.realRain[index]) * 0.01).toFixed(2))
        this.rainData.future.futureWater_value.push(Number(randomNum2(-0.2, 0.2) + Number(Number(this.rainData.real.realWater_value[index]).toFixed(2))).toFixed(2))
        this.rainData.real.realFlowIn.push(Number((randomNum(80, 120) * this.rainData.future.futureFlowIn[index]) * 0.01).toFixed(2))
      })
    },
    // 雨晴分析-历史实测雨量
    async getRainData () {
      const rainList = await getRainZListApi(1)
      console.log('雨量站列表', rainList)
      const newRainList = rainList.data.filter(item => item.id !== 19)
      console.log('查看过滤结果', newRainList)
      this.zhanList = newRainList
      this.zhanList.forEach(item => {
        this.hisRainOptions.push({
          value: item.id,
          label: item.name
        })
      })
      console.log('查看放入下拉列表后的结果', this.hisRainOptions)
      this.hisRain = this.hisRainOptions[0].value
      // 处理数据
      const Data = {
        time: [],
        real: {
          realRain: [],
          realWater_value: [],
          realFlowIn: []
        },
        future: {
          futureRain: [],
          futureWater_value: [],
          futureFlowIn: []
        }
      }
      const [res1, res2, res3] = await Promise.all([
        getRainWaterlevelApi({
          start_date: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
          // end_date: this.dayjs().add(5, 'day').format('YYYY-MM-DD'),
          limit: 10000,
          monitoring_id: this.hisRain
        }),
        getRainWaterlevelApi({
          start_date: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
          // end_date: this.dayjs().add(5, 'day').format('YYYY-MM-DD'),
          limit: 10000,
          monitoring_id: 1
        }),
        getFutureFlowApi({
          start_date: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD')
        })
      ])
      // const timeArr = this.cqq.timeInterval(this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(1, 'day').format('YYYY-MM-DD'))
      const newRes1Data = this.cqq.sort(res1.data, 'record_date')
      const newRes2Data = this.cqq.sort(res2.data, 'record_date')
      const newRes3 = this.cqq.sort(res3, 'value')
      console.log('默认拿横锦水库雨量站信息', newRes1Data)
      console.log('默认拿横锦水库水位站信息', newRes2Data)
      console.log('默认拿横锦水库预报入库流量', newRes3)
      // const realNewRes1Data = []
      // timeArr.forEach(item1 => {
      //   const res = newRes1Data.find(item2 => {
      //     return item2.record_date === item1
      //   })
      //   if (res) {
      //     realNewRes1Data.push(res)
      //   } else {
      //     realNewRes1Data.push({
      //       eight_water_level:
      //     })
      //   }
      // })
      newRes1Data.forEach((item, index) => {
        if (index === res1.data.length - 1) return
        Data.time.push(item.record_date)
        Data.real.realRain.push(Number(item.rainfall_sum).toFixed(2))
      })
      newRes2Data.forEach((item, index) => {
        if (index === res2.data.length - 1) return
        Data.real.realWater_value.push(Number(item.eight_water_level).toFixed(2))
      })
      newRes3.forEach(item => {
        Data.future.futureFlowIn.push(Number(item.value).toFixed(2))
      })
      this.rainData = Data
      this.randomData(this.rainData)

      console.log('横锦水库历史结果', this.rainData)
      this.dateSelect = [new Date(this.rainData.time[0]), new Date(this.rainData.time[this.rainData.time.length - 1])]
      // 周
      // res1.data.forEach(item => {
      //   Data.week.now.water_level.push(item.eight_water_level)
      //   Data.week.now.rain.push(item.rainfall_sum)
      //   Data.week.now.date.push(item.record_date)
      // })
    },
    // 时间改变 和 雨量站改变
    async dateChange () {
      this.pageLoading1 = true
      this.leftChart1.clear()
      this.leftChart2.clear()
      this.leftChart3.clear()
      this.rainData = {}
      const Data = {
        time: [],
        real: {
          realRain: [],
          realWater_value: [],
          realFlowIn: []
        },
        future: {
          futureRain: [],
          futureWater_value: [],
          futureFlowIn: []
        }
      }
      const [res1, res2, res3] = await Promise.all([
        // 水情复盘
        getRainWaterlevelApi({
          start_date: this.cqq.elDateformate2(this.dateSelect[0]),
          end_date: this.cqq.elDateformate2(this.dateSelect[1]),
          limit: 10000,
          monitoring_id: this.hisRain
        }),
        // 水库和入库流量
        getRainWaterlevelApi({
          start_date: this.cqq.elDateformate2(this.dateSelect[0]),
          end_date: this.cqq.elDateformate2(this.dateSelect[1]),
          limit: 10000,
          monitoring_id: 1
        }),
        getFutureFlowApi({
          start_date: this.cqq.elDateformate2(this.dateSelect[0]),
          end_date: this.cqq.elDateformate2(this.dateSelect[1])
        })
      ])
      console.log('水情复盘', res1.data)
      console.log('横锦水库水位', res2.data)
      console.log('拿横锦水库预报入库流量', res3)
      res1.data.forEach((item, index) => {
        if (index === res1.data.length - 1) return

        Data.time.push(item.record_date)
        Data.real.realRain.push(Number(item.rainfall_sum).toFixed(2))
      })
      res2.data.forEach((item, index) => {
        if (index === res2.data.length - 1) return
        Data.real.realWater_value.push(Number(item.eight_water_level).toFixed(2))
      })

      res3.forEach((item, index) => {
        Data.future.futureFlowIn.push(Number(item.value).toFixed(2))
      })
      console.log('时间改变后拿到的数据转换后的结果', Data)
      this.rainData = Data
      this.randomData(this.rainData)
      this.pageLoading1 = false
      this.initLeftChart1(this.rainData)
      this.initLeftChart2(this.rainData)
      this.initLeftChart3(this.rainData)
    },
    // 弹层
    bigChartBtn (i) {
      if (this.chartTitle === '历史雨晴分析') {
        console.log('没有数据')
      } else if (this.chartTitle === '水库水情复盘分析') {
        this.lTop2Btn(i)
      } else if (this.chartTitle === '河道水情复盘分析') {
        console.log('没有数据')
      }
    },
    openChart (title, arr, i) {
      this.chartTitle = title
      this.bigChartBtnIndex = i
      this.bigChartBtnArr = arr
      this.chartShow = true
      if (title === '雨情复盘') {
        this.$nextTick(() => this.initLeftChart1Copy(this.rainData))
      } else if (title === '库水位复盘') {
        this.$nextTick(() => this.initLeftChart2Copy(this.rainData))
      } else if (title === '入库流量分析') {
        this.$nextTick(() => this.initLeftChart3Copy(this.rainData))
      }
    },
    closeChart (flag) {
      this.chartShow = flag
      this.bigChartBtnArr = []
      this.bigChartBtnIndex = 0
    },
    // 水库水情复盘分析
    lTop2Btn (i) {
      if (this.chartShow) {
        this.bigChartBtnIndex = i
        // 没有数据
        // this.initFloodChart1Copy(this.f1r1Data.x[i], this.f1r1Data.y[i])
      } else {
        this.lTop2Index = i
        // 没有数据
        // this.initFloodChart1(this.f1r1Data.x[i], this.f1r1Data.y[i])
      }
    },
    // 显示隐藏全部
    isShowBtn () {
      this.isShow = !this.isShow
      if (this.isShow === true) {
        this.$nextTick(() => {
          this.initChart()
        })
      }
    },
    // 图表
    initChart () {
      this.echarts.init(document.getElementById('leftChart1')).resize()
      this.echarts.init(document.getElementById('leftChart2')).resize()
      this.echarts.init(document.getElementById('leftChart3')).resize()
      this.echarts.init(document.getElementById('big-chart')).resize()
    },
    initLeftChart1 (obj) {
      if (!this.leftChart1) this.leftChart1 = this.echarts.init(document.getElementById('leftChart1'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 20,
          top: 40,
          bottom: 0,
          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: 10,
          itemGap: 20
        },
        color: [
          '#01F7AA',
          '#FFBA00'
        ],
        xAxis: {
          type: 'category',
          data: obj.time,
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value) => value.substring(5)
          },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: (value) => value + 1, // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {} // 线的样式
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '雨量：mm',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 0, 0, 10]
            },
            axisPointer: {
              show: false,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: false
              }
            },
            nameGap: 17,
            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)'
              }
            }

          }
        ],
        series: [
          {
            name: '实测雨量',
            barWidth: 15,
            data: obj.real.realRain,
            type: 'line',
            symbolSize: 0, // 标记大小(拐点标志)
            smooth: true,
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          },
          {
            name: '预报雨量',
            barWidth: 15,
            data: obj.future.futureRain,
            type: 'line',
            symbolSize: 0, // 标记大小(拐点标志)
            smooth: true,
            label: {
              show: false
            },
            lineStyle: {
              color: '#FFBA00'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      this.leftChart1.clear()
      this.leftChart1.setOption(option)
    },
    initLeftChart1Copy (obj) {
      if (!this.leftChart1Copy) this.leftChart1Copy = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 20,
          top: 40,
          bottom: 0,
          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: 10,
          itemGap: 20
        },
        color: [
          '#01F7AA',
          '#FFBA00'
        ],
        xAxis: {
          type: 'category',
          data: obj.time,
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value) => value.substring(5)
          },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: (value) => value + 1, // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {} // 线的样式
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '雨量：mm',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 0, 0, 10]
            },
            axisPointer: {
              show: false,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: false
              }
            },
            nameGap: 17,
            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)'
              }
            }

          }
        ],
        series: [
          {
            name: '实测雨量',
            barWidth: 15,
            data: obj.real.realRain,
            type: 'line',
            symbolSize: 0, // 标记大小(拐点标志)
            smooth: true,
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          },
          {
            name: '预报雨量',
            barWidth: 15,
            data: obj.future.futureRain,
            type: 'line',
            symbolSize: 0, // 标记大小(拐点标志)
            smooth: true,
            label: {
              show: false
            },
            lineStyle: {
              color: '#FFBA00'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      this.leftChart1Copy.clear()
      this.leftChart1Copy.setOption(option)
    },
    initLeftChart2 (obj) {
      console.log('obj', obj)
      let waterLevelYMin = Math.floor(Math.min(...obj.real.realWater_value, ...obj.future.futureWater_value) - 5)
      if (waterLevelYMin < 0) waterLevelYMin = 0
      if (!this.leftChart2) this.leftChart2 = this.echarts.init(document.getElementById('leftChart2'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 20,
          top: 40,
          bottom: 0,
          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
          },
          itemWidth: 25,
          itemHeight: 14,
          top: 10
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(1, 244, 168, 0.4)'
            }, {
              offset: 1, color: 'rgba(1, 244, 168, 0)'
            }],
            global: false
          }, '#FFBA00'
        ],
        xAxis: {
          type: 'category',
          data: obj.time,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value) => value.substring(5)
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {} // 线的样式
          }
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            min: waterLevelYMin,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              verticalAlign: 'bottom'
            },
            nameGap: 8,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: false,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: false
              }
            },
            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³/s',
          //   nameGap: 8,
          //   min: 150,
          //   nameTextStyle: {
          //     color: '#CACACA',
          //     fontSize: 12,
          //     align: 'center',
          //     padding: [0, 36, 0, 0],
          //     verticalAlign: 'bottom'
          //   },
          //   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
          //   }
          // }
        ],
        series: [
          {
            name: '实测水位',
            barWidth: 15,
            data: obj.real.realWater_value,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {
              color: '#01F7AA'
            },
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '预报水位',
            barWidth: 15,
            symbolSize: 0,
            data: obj.future.futureWater_value,
            type: 'line',
            label: {
              show: false
            },
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      this.leftChart2.clear()
      this.leftChart2.setOption(option)
    },
    initLeftChart2Copy (obj) {
      let waterLevelYMin = Math.floor(Math.min(...obj.real.realWater_value, ...obj.future.futureWater_value) - 5)
      if (waterLevelYMin < 0) waterLevelYMin = 0
      if (!this.leftChart2Copy) this.leftChart2Copy = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 20,
          top: 40,
          bottom: 0,
          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
          },
          itemWidth: 25,
          itemHeight: 14,
          top: 10
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(1, 244, 168, 0.4)'
            }, {
              offset: 1, color: 'rgba(1, 244, 168, 0)'
            }],
            global: false
          }, '#FFBA00'
        ],
        xAxis: {
          type: 'category',
          data: obj.time,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value) => value.substring(5)
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {} // 线的样式
          }
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            min: waterLevelYMin,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              verticalAlign: 'bottom'
            },
            nameGap: 8,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: false,
              type: 'line', // 'line', 'shadow', 'none'
              label: {
                show: false
              }
            },
            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³/s',
          //   nameGap: 8,
          //   min: 150,
          //   nameTextStyle: {
          //     color: '#CACACA',
          //     fontSize: 12,
          //     align: 'center',
          //     padding: [0, 36, 0, 0],
          //     verticalAlign: 'bottom'
          //   },
          //   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
          //   }
          // }
        ],
        series: [
          {
            name: '实测水位',
            barWidth: 15,
            data: obj.real.realWater_value,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {
              color: '#01F7AA'
            },
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '预报水位',
            barWidth: 15,
            symbolSize: 0,
            data: obj.future.futureWater_value,
            type: 'line',
            label: {
              show: false
            },
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      this.leftChart2Copy.clear()
      this.leftChart2Copy.setOption(option)
    },
    initLeftChart3 (obj) {
      if (!this.leftChart3) this.leftChart3 = this.echarts.init(document.getElementById('leftChart3'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 20,
          top: 40,
          bottom: 0,
          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
          },
          itemWidth: 25,
          itemHeight: 14,
          top: 10
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(1, 244, 168, 0.4)'
            }, {
              offset: 1, color: 'rgba(1, 244, 168, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 186, 0, 0.4)'
            }, {
              offset: 1, color: 'rgba(255, 186, 0, 0)'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: obj.time,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value) => value.substring(5)
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {} // 线的样式
          }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '流量\nm³/s',
          nameGap: 8,
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: false,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false
            }
          },
          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
          }
        },
        series: [
          {
            name: '实测入库流量',
            data: obj.real.realFlowIn,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {
              color: '#01F7AA'
            },
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '预报入库流量',
            data: obj.future.futureFlowIn,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {
              color: '#FFBA00'
            },
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      this.leftChart3.clear()
      this.leftChart3.setOption(option)
    },
    initLeftChart3Copy (obj) {
      if (!this.leftChart3Copy) this.leftChart3Copy = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          left: 10,
          right: 20,
          top: 40,
          bottom: 0,
          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
          },
          itemWidth: 25,
          itemHeight: 14,
          top: 10
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(1, 244, 168, 0.4)'
            }, {
              offset: 1, color: 'rgba(1, 244, 168, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 186, 0, 0.4)'
            }, {
              offset: 1, color: 'rgba(255, 186, 0, 0)'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: obj.time,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: (value) => value.substring(5)
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {} // 线的样式
          }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '流量\nm³/s',
          nameGap: 8,
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: false,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false
            }
          },
          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
          }
        },
        series: [
          {
            name: '实测入库流量',
            data: obj.real.realFlowIn,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {
              color: '#01F7AA'
            },
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '预报入库流量',
            data: obj.future.futureFlowIn,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {
              color: '#FFBA00'
            },
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      this.leftChart3Copy.clear()
      this.leftChart3Copy.setOption(option)
    }

  },
  watch: {
    async hisRain (newVal, oldVal) {
      if (oldVal === '') return
      this.pLTop1Loading = true
      this.leftChart1.clear()
      this.rainData = {}
      const Data = {
        time: [],
        real: {
          realRain: [],
          realWater_value: [],
          realFlowIn: []
        },
        future: {
          futureRain: [],
          futureWater_value: [],
          futureFlowIn: []
        }
      }
      const res = await getRainWaterlevelApi({
        start_date: this.cqq.elDateformate2(this.dateSelect[0]),
        end_date: this.cqq.elDateformate2(this.dateSelect[1]),
        limit: 10000,
        monitoring_id: this.hisRain
      })
      console.log('水情复盘', res.data)
      res.data.forEach(item => {
        Data.time.push(item.record_date)
        Data.real.realRain.push(Number(item.rainfall_sum).toFixed(2))
      })
      console.log('时间改变后拿到的数据转换后的结果', Data)
      this.rainData = Data
      this.randomData(this.rainData)
      this.pLTop1Loading = false
      this.initLeftChart1(this.rainData)
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)
.is-show {
  left: 1350px;
}
.btn-box {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 430px;
  top: 0;
  button {
    width: 140px;
    height: 40px;
    font-size: 16px;
    padding-left: 10px;
    color: #fff;
    background: url("~@/assets/images/flood/process1/button.png") no-repeat
      center / 100% 100%;
    &:hover {
      background: url("~@/assets/images/flood/process1/button_hover.png")
        no-repeat center / 100% 100%;
    }
    letter-spacing: 10px;
  }
  button:not(:last-child) {
    margin-bottom: 20px;
  }
}
.plan {
  position: absolute;
  left: 0;
  top: 0;
  .plan-left {
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;
    .title-box {
      display: flex;
      align-items: center;
      position: relative;
      background-color: rgba(3, 35, 79, 0.6);
      padding: 5px 10px 5px;
      margin-bottom: 5px;
      .el-date-editor ::v-deep {
        justify-content: space-between;
        flex: 1;
        height: 30px;
        padding: 3px 10px;
        background-color: rgba(96, 255, 246, 0.2);
        border: 1px solid #2e6d8d;
        .el-icon-date {
          display: flex;
          align-items: center;
          margin: 0;
          &::before {
            color: #fff;
          }
        }
        .el-range__close-icon {
          display: flex;
          align-items: center;
          &::before {
            color: #fff;
          }
        }
        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-range-editor.is-active:hover {
        border-color: $pry;
      }
      .userInfo ::v-deep {
        position: relative;
        display: flex;
        align-items: center;
        button {
          display: flex;
          align-items: center;
          width: 120px;
          height: 30px;
          margin-left: 10px;
          padding: 0;
          border: 1px solid #2e6d8d;
          background-color: rgba(96, 255, 246, 0.2);
          span {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 160px;
            color: #fff;
            font-size: 16px;
            padding: 0 15px;
            // i {
            //   margin-right: 15px;
            // }
            em {
              display: block;
              width: 20px;
              height: 20px;
              background: url("~@/assets/images/layout/user.png") no-repeat
                center / 100% 100%;
            }
            p {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            i {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }

    .top2,
    .top3 {
      height: 307px;
    }
    .top1 {
      height: 278px;
      margin-bottom: 10px;
      .el-select ::v-deep {
        right: 60px;
        .el-input {
          width: 120px;
          .el-input__inner {
            width: 120px;
          }
        }
      }

      .txt {
        width: 100%;
        height: 30px;
        margin-top: 5px;
        background-color: rgba(96, 255, 246, 0.2);
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 14px;
        span {
          color: #ffba00;
          font-size: 18px;
          font-weight: 700;
        }
      }
      #leftChart1 {
        width: 100%;
        flex: 1;
      }
    }
    .top3 {
      margin-bottom: 10px;
      .el-select ::v-deep {
        width: 160px;
        right: 40px;
        .el-input__inner {
          width: 160px;
        }
      }
      .box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        height: 30px;
        margin-top: 10px;
        margin-bottom: 5px;
        .b {
          display: flex;
          align-items: center;
          width: 188px;
          height: 30px;
          background: url("~@/assets/images/flood/11.png") no-repeat top center /
            100% 100%;
          color: #fff;
          font-size: 14px;
          span {
            margin: 0 17px 0 10px;
          }
          p span {
            margin: 0;
            color: #11ffb4;
          }
        }
      }
      #leftChart3 {
        width: 100%;
        flex: 1;
      }
    }
    .top2 {
      .big-panel-title-btn-box {
        right: 30px;
      }
      .box {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 60px;
        margin-top: 10px;
        .col {
          display: flex;
          align-items: center;
          flex: 1;
          height: 100%;
          background-color: rgba(96, 255, 246, 0.1);
          .icon {
            width: 40px;
            height: 40px;
            margin-left: 16px;
            margin-right: 10px;
          }
          .txt {
            display: flex;
            flex-direction: column;
            color: #fff;
            span {
              font-size: 14px;
              margin-bottom: 8px;
            }
            p {
              span {
                color: #ffba00;
                font-size: 20px;
                margin-bottom: 0;
              }
              font-size: 16px;
            }
          }
        }
        .col:nth-child(1) {
          margin-right: 10px;
          .icon {
            background: url("~@/assets/images/flood/4icon1.png") no-repeat
              center / 100% 100%;
          }
        }
        .col:nth-child(2) {
          .icon {
            background: url("~@/assets/images/flood/4icon2.png") no-repeat
              center / 100% 100%;
          }
        }
      }
      #leftChart2 {
        width: 100%;
        flex: 1;
      }
    }
  }
  // .plan-right {
  //   position: absolute;
  //   top: 0;
  //   left: 1510px;
  //   width: 400px;
  //   height: 956px;
  //   .top1 {
  //     margin-bottom: 10px;
  //     .box {
  //       display: flex;
  //       justify-content: space-between;
  //       width: 100%;
  //       height: 100%;
  //       margin-top: 10px;
  //       display: flex;
  //       flex-wrap: wrap;
  //       .b {
  //         width: 180px;
  //         height: 85px;
  //         background: url("~@/assets/images/flood/icon12.png") no-repeat top
  //           center / 100% 100%;
  //         text-align: center;
  //         p:nth-child(1) {
  //           margin-top: 10px;
  //           color: #fff;
  //           font-size: 14px;
  //           margin-bottom: 27px;
  //         }
  //         p:nth-child(2) {
  //           color: #fff;
  //           font-size: 16px;
  //           span {
  //             font-size: 20px;
  //             font-weight: 700;
  //           }
  //         }
  //       }
  //       .b1 span {
  //         color: #ff7a4c;
  //       }
  //       .b2 span {
  //         color: #ffba00;
  //       }
  //       .b3 span {
  //         color: #11ffb4;
  //       }
  //       .b4 span {
  //         color: #49c7fb;
  //       }
  //       .b1,
  //       .b2 {
  //         margin-bottom: 10px;
  //       }
  //     }
  //   }
  //   .top2 {
  //     margin-bottom: 10px;
  //   }
  //   .top3 {
  //     .box {
  //       display: flex;
  //       justify-content: space-between;
  //       width: 100%;
  //       flex: 1;
  //       margin-top: 10px;
  //       display: flex;
  //       flex-wrap: wrap;
  //       .b {
  //         width: 180px;
  //         height: 85px;
  //         background: url("~@/assets/images/flood/icon12.png") no-repeat top
  //           center / 100% 100%;
  //         text-align: center;
  //         span {
  //           font-weight: 700;
  //         }
  //         p:nth-child(1) {
  //           margin-top: 10px;
  //           color: #fff;
  //           font-size: 14px;
  //           margin-bottom: 27px;
  //         }
  //         p:nth-child(2) {
  //           color: #fff;
  //           font-size: 16px;
  //           span {
  //             font-size: 20px;
  //           }
  //         }
  //       }
  //       .b1 span {
  //         color: #ff7a4c;
  //       }
  //       .b2 span {
  //         color: #ffba00;
  //       }
  //       .b3 span {
  //         color: #11ffb4;
  //       }
  //       .b4 span {
  //         color: #49c7fb;
  //       }
  //       .b1,
  //       .b2 {
  //         margin-bottom: 10px;
  //       }
  //     }
  //   }
  //   .top4 {
  //     margin-top: 10px;
  //     height: 312px;
  //     .img {
  //       width: 100%;
  //       height: 100%;
  //       background: url("~@/assets/images/flood/small_img.png") no-repeat center /
  //         100% 100%;
  //     }
  //   }
  // }
}
.zj-ya ::v-deep {
  .el-dialog {
    margin-top: 10vh !important;
    width: 1400px;
    height: 850px;
  }

  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
