<template>
  <div class="prediction">
    <div class="flood-left">
      <BigPanel
        :btnObj="{
          show: true,
          arr: ['未来1天', '未来2天', '未来3天', '未来4天'],
        }"
        title="雨量站雨量预报"
      >
        <div class="flood-chart-box chart1">
          <div id="flood-chart1"></div>
          <p class="flood-chart1-p1">单位：mm</p>
        </div>
      </BigPanel>
      <BigPanel
        :btnObj="{
          show: true,
          arr: ['未来1天', '未来2天', '未来3天', '未来4天'],
        }"
        title="入库流量过程"
      >
        <div class="flood-chart-box chart2">
          <div id="flood-chart2"></div>
          <p class="flood-chart2-p1">流量：m³/s</p>
          <p class="flood-chart2-p2">单位：h</p>
        </div>
      </BigPanel>
      <BigPanel title="推荐度汛方案过程">
        <div class="flood-chart-box chart3">
          <div id="flood-chart3"></div>
          <p class="flood-chart3-p1">流量：m³/s</p>
          <p class="flood-chart3-p2">单位：h</p>
        </div>
      </BigPanel>
    </div>
    <div class="flood-right">
      <BigPanel title="预报信息">
        <div class="txt">
          <p>
            横锦水库预计未来1天来水总量22.0mm，未来3天来水总量36.0mm，未来5天来水总量48.0mm，未来7天来水总量69.0mm。
          </p>
          <p>
            未来1天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位168.0m。
          </p>
          <p>
            未来3天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位169.0m。
          </p>
          <p>
            未来5天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位170.0m。
          </p>
          <p>
            未来7天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位170.0m。
          </p>
          <p>
            横锦水库预计未来1天来水总量22.0mm，未来3天来水总量36.0mm，未来5天来水总量48.0mm，未来7天来水总量69.0mm。
          </p>
          <p>
            未来1天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位168.0m。
          </p>
          <p>
            未来3天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位169.0m。
          </p>
          <p>
            未来5天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位170.0m。
          </p>
          <p>
            未来7天水库保持当前闸门开度1#：0.20m，2#：0.20m，3#：0.30m，4#：0.30m，5#：0.50m，水库最大入库流量525.2m3/s，水库最大下泄流量256.3m3/s，水库达到的最高水位170.0m。
          </p>
        </div>
      </BigPanel>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Prediction',
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.initChart)
  },
  destroyed () {
    window.removeEventListener('resize', this.initChart)
  },
  methods: {
    initChart () {
      this.initFloodChart1()
      this.initFloodChart2()
      this.initFloodChart3()
    },
    initFloodChart1 () {
      const myChart = this.echarts.init(document.getElementById('flood-chart1'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 5,
          top: 25,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['窈川站', '史姆站', '西坞站', '学陶站', '八达站', '横锦站'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '雨量',
            barWidth: 15,
            data: ['3.11', '1.63', '5.00', '3.21', '0.43', '2.13'],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initFloodChart2 () {
      const myChart = this.echarts.init(document.getElementById('flood-chart2'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 10,
          top: 25,
          bottom: 5,
          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: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 1
          },
          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',
          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: [1, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#00FFAE'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    initFloodChart3 () {
      const myChart = this.echarts.init(document.getElementById('flood-chart3'))
      const option = {
        grid: {
          show: false,
          left: 5,
          right: 10,
          top: 40,
          bottom: 5,
          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: 8,
          left: 80,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 186, 0, 0.4)' },
            { offset: 1, color: 'rgba(255, 186, 0, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(96, 255, 246, 0.4)' },
            { offset: 1, color: 'rgba(96, 255, 246, 0)' }
          ]
        ), new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 87, 87, 0.4)' },
            { offset: 1, color: 'rgba(255, 87, 87, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 1
          },
          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',
          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: [1, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5, 3.5, 5],
            type: 'line',
            areaStyle: {},
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#FFBA00'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m³/s'
            }
          },
          {
            name: '下泄流量',
            barWidth: 15,
            data: [2, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6, 4.5, 6],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m³/s'
            }
          },
          {
            name: '水库水位',
            barWidth: 15,
            data: [1, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3, 2.5, 3],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF5757'
            },
            tooltip: {
              valueFormatter: (value) => value + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.prediction {
  position: absolute;
  left: 0;
  top: 0;
  .flood-chart-box {
    position: relative;
    width: 100%;
    // #flood-chart1
    #flood-chart1 {
      width: 100%;
      height: 218px;
    }
    &.chart1 .flood-chart1-p1 {
      position: absolute;
      top: 0;
      left: 5px;
      color: #cacaca;
      font-size: 12px;
    }
    // #flood-chart2
    #flood-chart2 {
      width: 100%;
      height: 218px;
    }
    &.chart2 {
      .flood-chart2-p1 {
        position: absolute;
        top: 0;
        left: 5px;
        color: #cacaca;
        font-size: 12px;
      }
      .flood-chart2-p2 {
        position: absolute;
        bottom: -10px;
        right: 0;
        color: #cacaca;
        font-size: 12px;
      }
    }
    // #flood-chart3
    #flood-chart3 {
      width: 100%;
      height: 218px;
    }
    &.chart3 {
      .flood-chart3-p1 {
        position: absolute;
        top: 15px;
        left: 5px;
        color: #cacaca;
        font-size: 12px;
      }
      .flood-chart3-p2 {
        position: absolute;
        bottom: -10px;
        right: 0;
        color: #cacaca;
        font-size: 12px;
      }
    }
  }
  .flood-left ::v-deep {
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    .flood-panel {
      margin-bottom: 10px;
    }
  }
  .flood-right {
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .flood-panel {
      height: 956px;
      padding-right: 5px;
      .txt {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        overflow: auto;
        &::-webkit-scrollbar {
          // 滚动条整体样式
          width: 10px; // 竖向滚动条宽度
          height: 0; // 横向滚动条高度
        }
        &::-webkit-scrollbar-thumb {
          // 滚动条内滑块样式
          background-color: #5b9ebf;
          border-radius: 2px;
        }
        &::-webkit-scrollbar-track {
          // 滚动条轨道样式
          background-color: #2a5c8a;
        }
        p {
          line-height: 32px;
          margin-bottom: 20px;
          color: #fff;
          font-size: 16px;
          text-indent: 2em;
        }
        p:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
