<template>
  <div class="water-dispatch">
    <div class="dispatch-left">
      <BigPanel title="测点水质" class="top1">
        <template #title>
          <el-select
            v-model="selectValue"
            placeholder="请选择"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <div class="p">
          <div class="p-line">
            <div
              class="icon"
              :class="{
                l: lineIcon === 1,
                c: lineIcon === 2,
                r: lineIcon === 3,
              }"
            ></div>
          </div>
          <div class="p-box">
            <span v-for="(item, index) in leftTop2Arr1" :key="index">
              {{ item }}
            </span>
          </div>
        </div>
      </BigPanel>
      <BigPanel
        title="水质监测"
        class="top2"
        :btnObj="{ show: true, arr: ['浊度', 'pH', '溶解氧', '温度'] }"
      >
        <template #title>
          <button class="his">历史记录</button>
          <div class="is-big" @click="openChart('水质监测')"></div>
        </template>
        <div id="left-chart1"></div>
      </BigPanel>
      <BigPanel
        title="入库流量过程"
        class="top3"
        :btnObj="{
          show: true,
          arr: ['历史', '未来1天', '未来3天', '未来5天', '未来7天'],
        }"
      >
        <template #title>
          <button class="his">历史记录</button>
          <div class="is-big" @click="openChart('入库流量过程')"></div>
        </template>
        <div id="left-chart2"></div>
      </BigPanel>
      <BigPanel title="出库流量过程" class="top4">
        <div class="four-box">
          <button
            @click="changeLTop4Index(0)"
            :class="{ active: lTop4Index === 0 }"
          >
            供水
          </button>
          <button
            @click="changeLTop4Index(1)"
            :class="{ active: lTop4Index === 1 }"
          >
            发电
          </button>
          <button
            @click="changeLTop4Index(2)"
            :class="{ active: lTop4Index === 2 }"
          >
            灌溉
          </button>
          <button
            @click="changeLTop4Index(3)"
            :class="{ active: lTop4Index === 3 }"
          >
            生态
          </button>
        </div>
      </BigPanel>
    </div>
    <div class="dispatch-right">
      <BigPanel
        title="水位-库容过程线"
        class="top1"
        :btnObj="{
          show: true,
          arr: ['历史', '未来1天', '未来3天', '未来5天', '未来7天'],
        }"
      >
        <template #title>
          <button class="his">历史记录</button>
          <div class="is-big" @click="openChart('水位-库容过程线')"></div>
        </template>
        <div id="right-chart1"></div>
      </BigPanel>
      <BigPanel title="水资源调度" class="top2">
        <template #title>
          <button class="his">详情</button>
          <el-select
            v-model="selectValue"
            placeholder="请选择"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <div class="box">
          <span>可取用水量</span>
          <p><span>1000</span>万m³</p>
        </div>
        <div class="box">
          <span>日取用水量</span>
          <p><span>100</span>万m³</p>
        </div>
      </BigPanel>
      <BigPanel title="兴利状态与调度图" class="top3">
        <template #title>
          <div class="is-big" @click="openChart('兴利状态与调度图')"></div>
        </template>
        <div class="box">
          <span>水库水位</span>
          <p><span>155.00</span>m</p>
        </div>
        <div class="box">
          <span>兴利状态</span>
          <p><span>加大供水</span></p>
        </div>
        <div class="chart-box">
          <div class="c c1">
            <div class="icon"></div>
            正常蓄水位 164m
          </div>
          <div class="c c2">
            <div class="icon"></div>
            台汛限制水位 161m
          </div>
          <div class="c c3">正常用水</div>
          <div class="c c4">禁止纯发电用水</div>
          <div class="c c5">
            <div class="icon"></div>
            死水位 130m
          </div>
          <div class="c c6">加大供水</div>
          <div class="c c7">
            <div class="icon"></div>
            当前水位
          </div>
          <div class="eye" @click="eye = !eye">
            调度过程线
            <div class="icon" :class="{ cloEye: !eye }"></div>
          </div>
          <div id="rightChart2"></div>
        </div>
      </BigPanel>
    </div>
    <BigChart :show="chartShow" @close-dialog="closeChart" :title="chartTitle">
      <div id="big-chart" v-if="reset"></div>
    </BigChart>
  </div>
</template>

<script>
export default {
  name: 'WaterDispatch',
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.initChart)
  },
  destroyed () {
    window.removeEventListener('resize', this.initChart)
  },
  data () {
    return {
      // 弹层
      reset: true,
      chartShow: false,
      chartTitle: '图表',
      //
      eye: true,
      isShow: true,
      selectValue: '1',
      options1: [{
        value: '1',
        label: '监测点 1'
      }, {
        value: '2',
        label: '监测点 2'
      }, {
        value: '3',
        label: '监测点 3'
      }],
      options2: [{
        value: '1',
        label: '未来1天'
      }, {
        value: '2',
        label: '未来3天'
      }, {
        value: '3',
        label: '未来5天'
      }, {
        value: '4',
        label: '未来7天'
      }],
      //
      lineIcon: 1,
      lTop4Index: 0,
      leftTop2Arr1: ['I 类', 'II 类', 'III 类'],
      leftTop2Arr2: [
        {
          title: 'pH',
          content: '9.09'
        },
        {
          title: '浊度(NTU)',
          content: '2'
        },
        {
          title: '温度(℃)',
          content: '25'
        },
        {
          title: '溶解氧(mg/L)',
          content: '6.42'
        },
        {
          title: '高锰酸钾指数',
          content: '1.36'
        },
        {
          title: '氨氮(ug/L)',
          content: '6'
        },
        {
          title: '总磷(ug/L)',
          content: '7.09'
        },
        {
          title: '总氮(mg/L)',
          content: '7.09'
        }
      ]
    }
  },
  methods: {
    isShowBtn () {
      this.isShow = !this.isShow
      if (this.isShow === true) {
        this.$nextTick(() => {
          this.initChart()
        })
      }
    },
    openChart (title) {
      this.reset = true
      this.chartTitle = title
      this.chartShow = true
      this.$nextTick(() => this.initLeftChart1Copy())
    },
    closeChart (flag) {
      this.chartShow = flag
    },
    initChart () {
      this.initLeftChart1()
      this.initLeftChart2()
      this.initRightChart1()
      this.initRightChart2()
    },
    initLeftChart1 () {
      const myChart = this.echarts.init(document.getElementById('left-chart1'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 20,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 198, 0, 1)' },
            { offset: 1, color: 'rgba(255, 198, 0, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: ['07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '单位：NTU',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: false
          },
          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: [2.2, 3.5, 3.1, 2.8, 3, 2.6, 2.2],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FFC600'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initLeftChart2 () {
      const myChart = this.echarts.init(document.getElementById('left-chart2'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 20,
          top: 30,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        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)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: ['07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            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: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: false
          },
          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: [2.2, 3.5, 3.1, 2.8, 3, 2.6, 2.2],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initRightChart1 () {
      const myChart = this.echarts.init(document.getElementById('right-chart1'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 0,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 132, 0, 0.7)' },
            { offset: 1, color: 'rgba(255, 132, 0, 0)' }
          ]
        ), '#00FFFF'],
        xAxis: {
          type: 'category',
          data: ['07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              verticalAlign: 'middle'
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              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³',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 36, 0, 0]
            },
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }
        ],
        series: [
          {
            name: '水位',
            data: [150, 158, 155, 155, 155, 160, 155],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF8400'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '库容',
            yAxisIndex: 1,
            data: [1139, 1139, 1139, 1139, 1139, 1139, 1139],
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#00FFFF'
            },
            tooltip: {
              valueFormatter: (value) => value + ' 万m³'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    changeLTop4Index (num) {
      this.lTop4Index = num
    },
    initRightChart2 () {
      const myChart = this.echarts.init(document.getElementById('rightChart2'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 10,
          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',
            label: {
              formatter: '{value}月'
            }
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.4)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(182, 199, 255, 0.4)' },
            { offset: 1, color: 'rgba(182, 199, 255, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 132, 0, 0.2)' },
            { offset: 1, color: 'rgba(255, 132, 0, 0)' }
          ]
        ), '#FFC600'],
        xAxis: {
          type: 'category',
          data: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            formatter: '{value}月',
            interval: 0
          },
          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,
            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: '未定',
            barWidth: 15,
            data: [164, 164, 164, 164, 160, 160, 160, 160, 160, 164, 164, 164],
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '正常用水',
            barWidth: 15,
            data: [130, 135, 140, 150, 158, 150, 148, 146, 140, 150, 143, 130],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: '#B6C7FF'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '禁止纯发电用水',
            barWidth: 15,
            data: [0, 0, 0, 133, 140, 145, 143, 140, 135, 140, 133, 130],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: '#FF8400'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          },
          {
            name: '死水位',
            barWidth: 15,
            data: [130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130],
            type: 'line',
            symbolSize: 0,
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.his {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 20px;
  padding: 0 8px;
  background-color: rgba(96, 255, 246, 0.3);
  text-align: center;
  line-height: 20px;
  color: #fff;
}
.water-dispatch {
  position: absolute;
  top: 0;
  left: 0;
  .dispatch-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;
    .top1 {
      margin-bottom: 10px;
      .p {
        width: 100%;
        padding: 0 10px;
        margin-top: 10px;
        background-color: rgba(96, 255, 246, 0.1);
        .p-line {
          position: relative;
          height: 6px;
          margin: 14px 0 24px 0;
          background-image: linear-gradient(90deg, #5ab9ff, #ffb515, #ff6d6d);
          border-radius: 3px;
          .icon {
            position: absolute;
            top: -3px;
            left: 16px;
            width: 12px;
            height: 20px;
            background: url("~@/assets/images/operate/tuo.png") no-repeat center /
              216% 120%;
            &.l {
              left: 16px;
            }
            &.c {
              left: 174px;
            }
            &.r {
              right: 16px;
            }
          }
        }
        .p-box {
          display: flex;
          justify-content: space-between;
          height: 26px;
          margin-bottom: 12px;
          span {
            width: 50px;
            height: 100%;
            line-height: 26px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
          }
          span:nth-child(1) {
            background-color: rgba(58, 137, 226, 0.5);
          }
          span:nth-child(2) {
            background-color: rgba(255, 186, 0, 0.5);
          }
          span:nth-child(3) {
            background-color: rgba(240, 72, 100, 0.5);
          }
        }
      }
    }
    .top2 ::v-deep {
      height: 316px;
      .is-big {
        right: 86px;
      }
      .btn-box {
        margin: 10px 0;
      }
      #left-chart1 {
        width: 100%;
        flex: 1;
      }
    }
    .top3 ::v-deep {
      height: 316px;
      margin-bottom: 10px;
      .is-big {
        right: 86px;
      }
      .btn-box {
        margin: 10px 0;
      }
      #left-chart2 {
        width: 100%;
        flex: 1;
      }
    }
    .top4 {
      flex: 1;
      .four-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-evenly;
        width: 100%;
        flex: 1;
        button {
          width: 170px;
          height: 40px;
          background: url("~@/assets/images/operate/icon3.png") no-repeat center
            center / 106% 126%;
          color: #fff;
          &.active {
            background: url("~@/assets/images/operate/icon2.png") no-repeat
              center center / 106% 126%;
          }
        }
      }
    }
  }
  .dispatch-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .top1 ::v-deep {
      height: 316px;
      margin-bottom: 10px;
      .is-big {
        right: 86px;
      }
      .btn-box {
        margin: 10px 0;
      }
      #right-chart1 {
        width: 100%;
        flex: 1;
      }
    }
    .top2 {
      margin-bottom: 10px;
      .el-select {
        right: 60px;
      }
      .box {
        display: flex;
        align-items: center;
        padding-left: 35px;
        width: 100%;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: url("~@/assets/images/operate/icon4.png") no-repeat top
          center / 100% 100%;
        margin-top: 10px;
        span {
          margin-right: 54px;
        }
        p {
          span {
            color: #ff6060;
            font-size: 20px;
            margin-right: 5px;
          }
        }
      }
      .box:nth-child(2) p span {
        color: #ffbb38;
      }
    }
    .top3 {
      width: 1005;
      flex: 1;
      .box {
        display: flex;
        align-items: center;
        padding-left: 42px;
        width: 100%;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: url("~@/assets/images/operate/icon4.png") no-repeat top
          center / 100% 100%;
        margin-top: 10px;
        span {
          margin-right: 60px;
        }
        p {
          span {
            color: #60fff6;
            font-size: 20px;
            margin-right: 5px;
          }
        }
      }
      .box:nth-child(2) p span {
        font-size: 16px;
      }
      .chart-box {
        position: relative;
        width: 100%;
        flex: 1;
        margin-top: 10px;
        .eye {
          display: flex;
          align-items: center;
          position: absolute;
          z-index: 6;
          right: 0;
          top: 0;
          width: 110px;
          height: 20px;
          padding-left: 6px;
          background-color: rgba(96, 255, 246, 0.3);
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          .icon {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            background: url("~@/assets/images/common/eye1.png") no-repeat center /
              100% 100%;
          }
          .cloEye {
            background: url("~@/assets/images/common/eye2.png") no-repeat center /
              100% 100%;
          }
        }
        #rightChart2 {
          width: 100%;
          height: 100%;
        }
      }

      .c {
        display: flex;
        align-items: center;
        position: absolute;
        font-size: 12px;
        .icon {
          width: 14px;
          height: 10px;
          margin-right: 5px;
          margin-top: 5px;
          background-color: red;
        }
      }
      .c1 {
        top: 16px;
        left: 50px;
        color: #60fff6;
        .icon {
          background: url("~@/assets/images/operate/icon5.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c2 {
        top: 46px;
        left: 152px;
        color: #60fff6;
        .icon {
          background: url("~@/assets/images/operate/icon5.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c3 {
        top: 144px;
        left: 130px;
        color: #b6c7ff;
      }
      .c4 {
        top: 220px;
        left: 160px;
        color: #ff8400;
      }
      .c5 {
        top: 272px;
        left: 160px;
        color: #ffc600;
        .icon {
          background: url("~@/assets/images/operate/icon8.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c6 {
        top: 88px;
        left: 180px;
        color: #fff;
      }
      .c7 {
        top: 118px;
        left: 240px;
        color: #49ff49;
        .icon {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #49ff49;
        }
      }
    }
  }
  .flood-panel ::v-deep .panel-title {
    background: url("~@/assets/images/operate/title_bg.png") no-repeat left top /
      100% 100%;
  }
}
</style>
