<template>
  <div class="plan-right" v-loading="pageLoading2">
    <BigPanel title="洪水复盘" class="top1">
      <div class="table-box">
        <el-table :data="tableData" height="auto" border>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="台风" prop="code"></el-table-column>
          <el-table-column label="开始时间" prop="startTime"></el-table-column>
          <el-table-column label="结束时间" prop="endTime"></el-table-column>
        </el-table>
      </div>
      <div class="chart-box">
        <div class="is-big" @click="openChart"></div>
        <div id="tf-chart"></div>
      </div>
      <div class="xldd-box">
        <el-select
          class="big-panel-select xldd"
          v-model="year"
          placeholder="请选择"
          multiple
          collapse-tags
          :multiple-limit="5"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, index) in yearOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="chart-box">
          <div class="is-big" @click="ruleBtn"></div>
          <div id="rightChart2"></div>
          <div id="rightChart3"></div>
        </div>
      </div>
    </BigPanel>
    <BigChart
      :show="bigChartShow"
      @close-dialog="bigChartClose"
      title="洪水复盘"
    >
      <div id="plan-right-chart"></div>
    </BigChart>
    <BigChart
      :show="ruleChartShow"
      @close-dialog="closeRuleChart"
      title="兴利状态与调度图"
      class="chart-show3"
    >
      <div class="rightChart2-box">
        <el-select
          class="big-panel-select xldd"
          v-model="year2"
          placeholder="请选择"
          multiple
          collapse-tags
          :multiple-limit="5"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, index) in yearOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div id="rightChart2-copy"></div>
        <div id="rightChart3-copy"></div>
      </div>
    </BigChart>
  </div>
</template>

<script>
import { getReservoirRealApi } from '@/api/reservoir.js'
// 获取水库每天信息
import { getRainWaterlevelApi } from '@/api/home.js'
import { getYearlistApi, getXingLiApi } from '@/api/operate.js'
import { getTfDxApi } from '@/api/flood.js'
export default {
  props: {
    pageLoading2: {
      type: Boolean,
      default: true
    }
  },
  async mounted () {
    try {
      await this.getreservoirRealData()
      await this.getYearlistData()
      this.initRightChart2(this.xingLiObj)
      this.yearChartChange()
      this.$emit('closeLoading')
      this.initTfChart(this.$store.state.tfDxObj.x[0], this.$store.state.tfDxObj.ru[0], this.$store.state.tfDxObj.xia[0], this.$store.state.tfDxObj.ku[0])
      window.addEventListener('resize', this.resizeChart)
    } catch (error) {
      this.$emit('closeLoading')
    }
  },
  destroyed () {
    this.disposeChart()
    window.removeEventListener('resize', this.resizeChart)
  },
  data () {
    return {
      rightChart2: null,
      rightChart2Copy: null,
      rightChart3: null,
      rightChart3Copy: null,
      year: [],
      year2: [],
      yearObj: {},
      yearOptions: [],
      ruleChartShow: false,
      bigChartShow: false,
      tableData: [{
        code: '烟花',
        startTime: '2021-7-27 00:00:00',
        endTime: '2022-08-03 00:00:00'
      }, {
        code: '利奇马',
        startTime: '2019-08-09 07:00:00',
        endTime: '2019-08-13 20:00:00'
      }, {
        code: '米娜',
        startTime: '2019-09-30 23:00:00',
        endTime: '2019-10-03 22:00:00'
      }, {
        code: '黑格比',
        startTime: '2020-08-04 00:00:00',
        endTime: '2020-08-06 04:00:00'
      }],
      tfChart: null,
      tfChartCopy: null,
      xingLiData: [],
      xingLiObj: {
        vandalism_line: [],
        water_supply_line: [],
        mean_value_line: [],
        guarantee_line: [],
        plan_date: [],
        real_data: []
      }
    }
  },
  methods: {
    async getYearlistData () {
      const [res1, res2, res3, res4] = await Promise.all([
        getYearlistApi({
          start_date: '1989-01-01',
          end_date: this.dayjs().format('YYYY-MM-DD')
        }),
        getXingLiApi(),
        getTfDxApi(162.14),
        getRainWaterlevelApi({
          start_date: '2021-07-27',
          end_date: '2022-08-03',
          limit: 100000
        })
      ])
      this.$store.commit('setYearObj', res1.yearList)
      this.yearObj = this.$store.state.yearObj
      this.getYearList(this.yearObj)
      this.getXingLiData(res2)
      this.$store.commit('setTfDxData', res3)
      console.log('查看历史实际水位', res4)
    },
    getYearList (res) {
      // 处理源数据,去掉2月29日
      for (const key in res) {
        if (res[key].length > 365) {
          res[key].splice(59, 1)
        }
      }
      const lengthArr = Object.keys(res)
      console.log('查看图例', lengthArr)
      const xArr = []
      for (let i = 0; i < 365; i++) {
        xArr.push(this.dayjs('2022-01-01').add(i, 'day').format('MM-DD'))
      }
      console.log('查看x轴', xArr)
      const obj = {
        lengthArr,
        xArr,
        seriesArr: []
      }
      let num = 0
      for (const key in res) {
        obj.seriesArr[num] = []
        res[key].forEach(item => {
          obj.seriesArr[num].push(Number(item.level).toFixed(2))
        })
        num++
      }
      this.yearObj = obj
      // 放入下拉列表
      this.year = [
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 1],
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 2]
      ]
      this.year2 = [
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 1],
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 2]
      ]
      this.yearObj.lengthArr.reverse()
      this.yearObj.seriesArr.reverse()

      this.yearObj.lengthArr.forEach(item => {
        this.yearOptions.push({
          value: item,
          label: item
        })
      })
      console.log('查看所有年汇集的Obj', this.yearObj)
      this.yearChartChange()
      // this.yearOptions.reverse()
      // this.yearOptions[0].disabled = true
    },
    async getXingLiData (res) {
      console.log('查看兴利调度源数据', res)
      // const newArr = res.slice(0, 2)
      // res.splice(0, 2)
      // this.xingLiData = [...res, ...newArr]
      // console.log('处理完毕后', this.xingLiData)
      this.xingLiData = res
      this.xingLiData.forEach(item => {
        this.xingLiObj.vandalism_line.push(item.vandalism_line)
        this.xingLiObj.water_supply_line.push(item.water_supply_line)
        this.xingLiObj.mean_value_line.push(item.mean_value_line)
        this.xingLiObj.guarantee_line.push(item.guarantee_line)
        this.xingLiObj.plan_date.push(item.plan_date)
        this.xingLiObj.real_data.push(this.$store.state.reservoirRealData.water_level_value)
      })
      console.log('兴利调度状态echarts', this.xingLiObj)
      const month = Number((new Date().getMonth()) + 1)
      // if (month === 1) {
      //   month = 11
      // } else if (month === 2) {
      //   month = 12
      // }
      // month = month - 3
      // console.log(month)
      this.xingLiObj.real_data.forEach((item, index) => {
        if (index !== month) this.xingLiObj.real_data[index] = ''
      })
      console.log('最终传入图表的数据', this.xingLiObj)
    },
    // 兴利状态与调度图 年份
    yearChartChange () {
      // console.log(this.year)
      // console.log(this.yearObj)

      if (this.ruleChartShow) {
        const obj = {
          lengthArr: this.year2,
          seriesArr: [],
          xArr: this.yearObj.xArr
        }
        // const color = ['#7030a0', '#1da3b3', '#1b17b9', '#b218b8', '#868947']
        this.year2.forEach((item1, index1) => {
          const i = this.yearObj.lengthArr.findIndex(item2 => item2 === item1)
          // obj.seriesArr.push(this.yearObj.seriesArr[i])
          obj.seriesArr.push({
            name: item1,
            data: this.yearObj.seriesArr[i],
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              // color: color[index1],
              type: item1 === this.dayjs().format('YYYY') ? 'solid' : 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          })
        })
        console.log('查看echarts兴利调度', obj)
        this.initRightChart3Copy(obj)
      } else {
        const obj = {
          lengthArr: this.year,
          seriesArr: [],
          xArr: this.yearObj.xArr
        }
        // const color = ['#E600E3', '#FF4A2C', '#F19EC2', '#6CFFAA', '#FFEA00']
        this.year.forEach((item1, index1) => {
          const i = this.yearObj.lengthArr.findIndex(item2 => item2 === item1)
          // obj.seriesArr.push(this.yearObj.seriesArr[i])
          obj.seriesArr.push({
            name: item1,
            data: this.yearObj.seriesArr[i],
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              // color: color[index1],
              type: item1 === this.dayjs().format('YYYY') ? 'solid' : 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          })
        })
        console.log('查看echarts兴利调度', obj)
        this.initRightChart3(obj)
      }
    },
    closeRuleChart () {
      this.ruleChartShow = false
    },
    ruleBtn () {
      this.ruleChartShow = true
      this.year2 = this.year
      this.$nextTick(() => {
        this.initRightChart2Copy(this.xingLiObj)
        this.yearChartChange()
        // this.initRightChart3Copy(this.xingLiObj2)
      })
    },
    // 打开图表放大弹窗
    openChart () {
      this.bigChartShow = true
      this.$nextTick(() => {
        this.initTfChartCopy(this.$store.state.tfDxObj.x[0], this.$store.state.tfDxObj.ru[0], this.$store.state.tfDxObj.xia[0], this.$store.state.tfDxObj.ku[0])
      })
    },
    // 关闭图表放大
    bigChartClose () {
      this.bigChartShow = false
    },
    detailBtn (row, $index, column) {
      console.log('表格本行的数据', row)
      console.log('表格本行的索引', $index)
      console.log('表格本列的数据', column)
    },
    resizeChart () {
      this.tfChart.resize()
      if (this.bigChartShow) this.tfChartCopy.resize()
    },
    disposeChart () {
      if (this.tfChart) this.tfChart.dispose()
      if (this.tfChartCopy) this.tfChartCopy.dispose()
    },
    async getreservoirRealData () {
      const res = await getReservoirRealApi()
      this.$store.commit('setReservoirReal', res)
    },
    initTfChart (x, ru, xia, ku) {
      const realWaterValue = Number(this.$store.state.reservoirRealData.water_level_value).toFixed(2)
      const realWaterValueArr = []
      const nowLimitWaterLevel = Number(this.$store.state.reservoirRealData.nowLimitWaterLevel).toFixed(0)
      const nowLimitWaterLevelArr = []
      const jingArr = []
      x.forEach(() => {
        nowLimitWaterLevelArr.push(nowLimitWaterLevel)
        realWaterValueArr.push(realWaterValue)
        jingArr.push(164)
      })
      let kuMin = Math.floor((Math.min(...ku, realWaterValue) - 1))
      if (kuMin < 0) kuMin = 0
      const waterYMax = Math.floor(Math.max(...ku, 164, 161) + 1)
      // 新增一条真实入库流量
      const realFlowInArr = []
      const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
      ru.forEach((item, index) => {
        realFlowInArr.push(Number((randomNum(80, 120) * item) * 0.01).toFixed(2))
      })
      realFlowInArr.push(realFlowInArr[0])
      realFlowInArr.shift()
      if (!this.tfChart) this.tfChart = this.echarts.init(document.getElementById('tf-chart'))
      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(173, 133, 255, 0.4)' },
            { offset: 1, color: 'rgba(173, 133, 255, 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', '#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,
            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: false
            },
            max: waterYMax,
            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: realFlowInArr,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#00FFAE'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true
          },
          {
            name: '预测入库流量',
            barWidth: 15,
            data: ru,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#ad85ff',
              type: 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true

          },
          {
            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

          },
          {
            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
          },

          {
            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
          },
          {
            name: '警戒水位',
            barWidth: 15,
            data: jingArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true
          }
        ]
      }
      this.tfChart.clear()
      this.tfChart.setOption(option)
    },
    initTfChartCopy (x, ru, xia, ku) {
      const realWaterValue = Number(this.$store.state.reservoirRealData.water_level_value).toFixed(2)
      const realWaterValueArr = []
      const nowLimitWaterLevel = Number(this.$store.state.reservoirRealData.nowLimitWaterLevel).toFixed(0)
      const nowLimitWaterLevelArr = []
      const jingArr = []
      x.forEach(() => {
        nowLimitWaterLevelArr.push(nowLimitWaterLevel)
        realWaterValueArr.push(realWaterValue)
        jingArr.push(164)
      })
      let kuMin = Math.floor((Math.min(...ku, realWaterValue) - 1))
      if (kuMin < 0) kuMin = 0
      const waterYMax = Math.floor(Math.max(...ku, 164, 161) + 1)
      // 新增一条真实入库流量
      const realFlowInArr = []
      const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
      ru.forEach((item, index) => {
        realFlowInArr.push(Number((randomNum(80, 120) * item) * 0.01).toFixed(2))
      })
      realFlowInArr.push(realFlowInArr[0])
      realFlowInArr.shift()
      if (!this.tfChartCopy) this.tfChartCopy = this.echarts.init(document.getElementById('plan-right-chart'))
      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}:00'
            }
          }
        },
        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(173, 133, 255, 0.4)' },
            { offset: 1, color: 'rgba(173, 133, 255, 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', '#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,
            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: false
            },
            max: waterYMax,
            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: realFlowInArr,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#00FFAE'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true
          },
          {
            name: '预测入库流量',
            barWidth: 15,
            data: ru,
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#ad85ff',
              type: 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            },
            animation: true
          },
          {
            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
          },
          {
            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

          },

          {
            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
          },
          {
            name: '警戒水位',
            barWidth: 15,
            data: jingArr,
            yAxisIndex: 1,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FF5757',
              width: 3
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' m'
            },
            animation: true
          }
        ]
      }
      this.tfChartCopy.clear()
      this.tfChartCopy.setOption(option)
    },
    initRightChart2 (obj) {
      if (!this.rightChart2) this.rightChart2 = this.echarts.init(document.getElementById('rightChart2'))
      const option = {
        grid: {
          show: false,
          top: 50,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['当前水位'],
          top: 0,
          right: 0,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        // color: ['rgba(96, 255, 246, 0.4)', 'rgba(66, 255, 0, 0.4)', 'rgba(154, 178, 255, 0.7)', 'rgba(255, 132, 0, 0.5)', '#FFC600', '#ff4f4f'],
        color: [
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(96, 255, 246, 0.4)' },
              { offset: 0.6, color: 'rgba(96, 255, 246, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(66, 255, 0, 0.4)' },
              { offset: 0.6, color: 'rgba(66, 255, 0, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(154, 178, 255, 0.7)' },
              { offset: 0.8, color: 'rgba(154, 178, 255, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(255, 132, 0, 0.5)' },
              { offset: 1, color: 'rgba(255, 132, 0, 0)' }
            ]
          ),
          '#FFC600',
          '#ff4f4f'
        ],
        xAxis: {
          show: false,
          type: 'category',
          data: obj.plan_date,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: false,
          type: 'value',
          axisLine: {
            show: false,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: false
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '水库水位',
            data: [164, 164, 164, 164, 164, 164, 160, 160, 160, 160, 160, 164],
            type: 'line',
            areaStyle: {},
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              // color: '#60FFF6',
              color: 'rgba(96, 255, 246, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '防破坏线',
            data: obj.vandalism_line,
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              // color: '#42FF00',
              color: 'rgba(66, 255, 0, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '限制供水线',
            // symbol: 'circle',
            data: obj.water_supply_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: 'rgba(255,255,255,0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '保证水位线',
            // symbol: 'circle',
            data: obj.guarantee_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              // color: '#FF8400',
              color: 'rgba(255, 132, 0, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '兴利下限水位',
            // symbol: 'circle',
            data: [130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130],
            type: 'line',
            symbolSize: 0,
            lineStyle: {
              // color: '#FF8400',
              color: 'rgba(255, 198, 0, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '当前水位',
            // symbol: 'circle',
            data: obj.real_data,
            type: 'line',
            symbolSize: 15,
            itemStyle: {
              color: 'auto', // 图形的颜色。 默认从全局调色盘 option.color 获取颜色。
              borderColor: '#ff4f4f', // 图形的描边颜色
              borderWidth: 1, // 描边线宽
              borderType: 'solid' // 描边类型, 'solid', 'dashed', 'dotted'
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            }
          }
        ]
      }
      this.rightChart2.clear()
      this.rightChart2.setOption(option)
    },
    initRightChart2Copy (obj) {
      if (!this.rightChart2Copy) this.rightChart2Copy = this.echarts.init(document.getElementById('rightChart2-copy'))
      const option = {
        grid: {
          show: false,
          top: 50,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['当前水位'],
          top: 0,
          right: 0,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        // color: ['rgba(96, 255, 246, 0.4)', 'rgba(66, 255, 0, 0.4)', 'rgba(154, 178, 255, 0.7)', 'rgba(255, 132, 0, 0.5)', '#FFC600', '#ff4f4f'],
        color: [
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(96, 255, 246, 0.4)' },
              { offset: 0.6, color: 'rgba(96, 255, 246, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(66, 255, 0, 0.4)' },
              { offset: 0.6, color: 'rgba(66, 255, 0, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(154, 178, 255, 0.7)' },
              { offset: 0.8, color: 'rgba(154, 178, 255, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(255, 132, 0, 0.5)' },
              { offset: 1, color: 'rgba(255, 132, 0, 0)' }
            ]
          ),
          '#FFC600',
          '#ff4f4f'
        ],
        xAxis: {
          show: false,
          type: 'category',
          data: obj.plan_date,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: false,
          type: 'value',
          axisLine: {
            show: false,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: false
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '水库水位',
            data: [164, 164, 164, 164, 164, 164, 160, 160, 160, 160, 160, 164],
            type: 'line',
            areaStyle: {},
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              // color: '#60FFF6',
              color: 'rgba(96, 255, 246, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '防破坏线',
            data: obj.vandalism_line,
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              // color: '#42FF00',
              color: 'rgba(66, 255, 0, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '限制供水线',
            // symbol: 'circle',
            data: obj.water_supply_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: 'rgba(255,255,255,0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '保证水位线',
            // symbol: 'circle',
            data: obj.guarantee_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              // color: '#FF8400',
              color: 'rgba(255, 132, 0, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '兴利下限水位',
            // symbol: 'circle',
            data: [130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130],
            type: 'line',
            symbolSize: 0,
            lineStyle: {
              // color: '#FF8400',
              color: 'rgba(255, 198, 0, 0.4)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '当前水位',
            // symbol: 'circle',
            data: obj.real_data,
            type: 'line',
            symbolSize: 15,
            itemStyle: {
              color: 'auto', // 图形的颜色。 默认从全局调色盘 option.color 获取颜色。
              borderColor: '#ff4f4f', // 图形的描边颜色
              borderWidth: 1, // 描边线宽
              borderType: 'solid' // 描边类型, 'solid', 'dashed', 'dotted'
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            }
          }
        ]
      }
      this.rightChart2Copy.clear()
      this.rightChart2Copy.setOption(option)
    },
    initRightChart3 (obj) {
      if (!this.rightChart3) this.rightChart3 = this.echarts.init(document.getElementById('rightChart3'))
      const option = {
        grid: {
          show: false,
          top: 50,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: obj.lengthArr,
          top: 20,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemWidth: 20,
          itemHeight: 12,
          itemStyle: {
            fontSize: 10
          } // 样式
        },
        // color: ['#13bd9b', '#1da3b3', '#1b17b9', '#b218b8', '#868947'],
        color: ['#E600E3', '#FF4A2C', '#F19EC2', '#6CFFAA', '#FFEA00'],
        xAxis: {
          show: false,
          type: 'category',
          data: obj.xArr,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: true
            },
            lineStyle: {}
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: obj.seriesArr
      }
      this.rightChart3.clear()
      this.rightChart3.setOption(option)
    },
    initRightChart3Copy (obj) {
      if (!this.rightChart3Copy) this.rightChart3Copy = this.echarts.init(document.getElementById('rightChart3-copy'))
      const option = {
        grid: {
          show: false,
          top: 50,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: obj.lengthArr,
          top: 20,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemWidth: 20,
          itemHeight: 12,
          itemStyle: {
            fontSize: 10
          } // 样式
        },
        // color: ['#13bd9b', '#1da3b3', '#1b17b9', '#b218b8', '#868947'],
        color: ['#E600E3', '#FF4A2C', '#F19EC2', '#6CFFAA', '#FFEA00'],
        xAxis: {
          show: false,
          type: 'category',
          data: obj.xArr,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: true
            },
            lineStyle: {}
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: obj.seriesArr
      }
      this.rightChart3Copy.clear()
      this.rightChart3Copy.setOption(option)
    }
  },
  watch: {
    year: {
      immediate: false, // 页面加载时立即执行一次监听回调函数
      deep: true, // 开启深度监听,监听复杂类型内变化
      handler (newVal, oldVal) { // 形参可选
        this.yearChartChange()
      }
    },
    year2: {
      immediate: false, // 页面加载时立即执行一次监听回调函数
      deep: true, // 开启深度监听,监听复杂类型内变化
      handler (newVal, oldVal) { // 形参可选
        this.yearChartChange()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)
.chart-show3 {
  .mess-box {
    display: flex;
    width: 100%;
    height: 50px;
    margin-bottom: 35px;
    .box {
      display: flex;
      align-items: center;
      padding-left: 70px;
      width: 100%;
      height: 50px;
      color: #fff;
      font-size: 14px;
      background: url("~@/assets/images/operate/icon4.png") no-repeat top center /
        100% 100%;
      span {
        margin-right: 120px;
        font-weight: 700;
      }
      p {
        span {
          color: #60fff6;
          font-size: 20px;
          margin-right: 5px;
          font-weight: normal;
        }
      }
    }
    .box:nth-child(1) {
      margin-right: 20px;
      span {
        font-weight: 700;
      }
    }
  }
  .rightChart2-box {
    position: relative;
    flex: 1;
    width: 100%;
    padding-top: 30px;
    .big-panel-select ::v-deep {
      top: 0;
      right: 40px;
      width: 150px !important;
      height: 30px !important;
      .el-input__inner {
        width: 150px !important;
        height: 30px !important;
      }
      .el-select__tags {
        span {
          .el-tag {
            background-color: #2b809e;
            border-color: $pry;
            color: #fff;
          }
        }
      }
    }
    .c {
      display: flex;
      align-items: center;
      position: absolute;
      z-index: 5;
      font-size: 12px;
      .icon {
        width: 14px;
        height: 10px;
        margin-right: 5px;
        margin-top: 5px;
      }
    }
    .c1 {
      top: 22px;
      left: 130px;
      color: #60fff6;
      .icon {
        background: url("~@/assets/images/operate/icon5.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c2 {
      top: 82px;
      left: 576px;
      color: #60fff6;
      .icon {
        background: url("~@/assets/images/operate/icon5.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c3 {
      top: 118px;
      left: 780px;
      color: #42ff00;
      .icon {
        background: url("~@/assets/images/operate/icon9.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c4 {
      top: 150px;
      left: 660px;
      color: #fff;
      .icon {
        background: url("~@/assets/images/operate/icon6.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c11 {
      top: 84px;
      left: 35px;
      color: #ff4f4f;
      .icon {
        background: url("~@/assets/images/operate/icon11.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c5 {
      top: 242px;
      left: 345px;
      color: #ff8400;
      .icon {
        background: url("~@/assets/images/operate/icon7.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c6 {
      top: 538px;
      left: 550px;
      color: #ffc600;
      .icon {
        background: url("~@/assets/images/operate/icon8.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c7 {
      display: flex;
      align-items: center;
      color: #fff;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: rgba(96, 255, 246, 1);
        box-shadow: 0 0 1px 3px rgba(96, 255, 246, 0.6);
      }
      &.left {
        top: 83px;
        left: 138px;
      }
      &.right {
        top: 83px;
        left: 970px;
      }
    }
    .c8 {
      display: flex;
      align-items: center;
      left: 500px;
      top: 132px;
      color: #42ff00;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: #42ff00;
        box-shadow: 0 0 1px 3px rgba(66, 255, 0, 0.6);
      }
    }
    .c9-left {
      display: flex;
      align-items: center;
      left: 108px;
      top: 320px;
      color: #fff;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.6);
      }
    }
    .c9-right {
      display: flex;
      align-items: center;
      right: 200px;
      top: 320px;
      color: #fff;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.6);
      }
    }
    .c10 {
      display: flex;
      align-items: center;
      left: 370px;
      top: 350px;
      color: #ff8400;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: rgba(255, 132, 0, 1);
        box-shadow: 0 0 1px 3px rgba(255, 132, 0, 0.6);
      }
    }
  }
  #rightChart2-copy {
    width: 100%;
    height: 100%;
    // background: url("~@/assets/images/operate/big_chart_bg.png") no-repeat 30px
    //   44px / 1118px 517px;
  }
  #rightChart3-copy {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 610px;
    // background: url("~@/assets/images/operate/big_chart_bg.png") no-repeat 30px
    //   44px / 1118px 517px;
  }
}
.xldd ::v-deep {
  .el-scrollbar {
    .el-scrollbar__wrap {
      padding: 10px;
      height: 180px !important;
      .el-select-dropdown__list {
        padding: 0;
      }
    }
  }
}
.plan-right {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 1410px;
  width: 500px;
  height: 956px;
  .top1 {
    width: 100% !important;
    height: 100%;

    .table-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 200px;
      background-color: #fff;
      .el-table ::v-deep {
        display: flex;
        flex-direction: column;
        height: 100% !important; // 要设置
        font-size: 14px;
        // 内边框颜色
        th,
        td {
          padding: 0;
          border-color: #0a3461 !important;
          text-align: center;
          .cell {
            padding: 0;
            line-height: 1;
          }
        }
        // 表头
        .el-table__header-wrapper {
          table {
            width: 100% !important;
            thead {
              tr {
                height: 50px;
                th {
                  background-color: #1d597f;
                  color: $pry;
                  &.ascending .caret-wrapper .sort-caret.ascending {
                    border-bottom-color: $pry;
                  }
                  &.descending .caret-wrapper .sort-caret.descending {
                    border-top-color: $pry;
                  }
                  &.gutter {
                    width: 17px !important;
                  }
                }
              }
            }
          }
        }
        // 表身体
        .el-table__body-wrapper {
          flex: 1 !important;
          background-color: #103b69;
          &::-webkit-scrollbar {
            // 滚动条整体样式
            width: 17px; // 竖向滚动条宽度
            height: 17px; // 横向滚动条高度
          }
          &::-webkit-scrollbar-thumb {
            // 滚动条内滑块样式
            background-color: #6d9dbc;
            border-radius: 2px;
            &:hover {
              background-color: #4b8cb8;
            }
            &:active {
              background-color: #426b85;
            }
          }
          &::-webkit-scrollbar-track {
            // 滚动条轨道样式
            background-color: #1d597f;
          }
          table {
            width: 100% !important;
            tbody {
              tr {
                height: 50px;
                cursor: pointer;
                &:hover {
                  background-color: rgba(0, 255, 255, 0.3) !important;
                }
                .el-table__cell {
                  background-color: transparent;
                  color: #fff;
                }
              }
              tr:nth-child(odd) {
                background-color: #103b69;
              }
              tr:nth-child(even) {
                background-color: #154570;
              }
            }
          }
        }
        // 表格宽度
        colgroup {
          col:nth-child(1) {
            width: 40px;
          }
          col:nth-child(2) {
            width: 80px;
          }
          col:nth-child(3) {
            width: auto;
          }
          col:nth-child(4) {
            width: auto;
          }
        }
      }
      // 表格边框
      .el-table {
        border: 0;
        &::after,
        &::before {
          height: 0;
        }
      }
    }
    .chart-box {
      position: relative;
      width: 100%;
      height: 350px;
      #tf-chart {
        width: 100%;
        height: 100%;
      }
      .is-big {
        z-index: 8;
      }
    }
    .xldd-box {
      position: relative;
      width: 100%;
      flex: 1;
      .is-big {
        top: 5px;
        right: 10px;
      }
      .big-panel-select ::v-deep {
        top: 0;
        right: 40px;
        width: 150px !important;
        height: 30px !important;
        .el-input__inner {
          width: 150px !important;
          height: 30px !important;
        }
        .el-select__tags {
          span {
            .el-tag {
              background-color: #2b809e;
              border-color: $pry;
              color: #fff;
            }
          }
        }
      }
      .chart-box {
        width: 100%;
        height: 100%;
        padding-top: 30px;
        #rightChart2 {
          width: 100%;
          height: 100%;
        }
        #rightChart3 {
          position: absolute;
          left: 0;
          top: 30px;
          width: 100%;
          height: 326px;
        }
      }
    }
  }
}
.plan-right ::v-deep {
  .panel-title {
    padding-left: 40px;
  }
}
#plan-right-chart {
  width: 100%;
  height: 100%;
}
</style>
