<template>
  <div id="dbjc">
    <van-nav-bar title="大坝监测" left-arrow @click-left="onClickLeft" />
    <div class="main">
      <!-- 监测分析 -->
      <van-cell-group inset>
        <van-cell class="cell-title" center title="监测分析">
          <template #icon>
            <span class="font_family icon-tongji icon fz22"></span>
          </template>
        </van-cell>
        <van-cell center class="cell-content">
          <div class="jcfx">
            <div class="dbjc-jcfx-chart">
              <div id="dbjc-jcfx-chart"></div>
            </div>
            <div class="chart-right">
              <div class="box green">
                <span>正常测点:</span>
                <span>98</span>
              </div>
              <div class="box orange">
                <span>缺数测点:</span>
                <span>0</span>
              </div>
              <div class="box red">
                <span>异常侧点:</span>
                <span>0</span>
              </div>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
      <!-- 监测数据 -->
      <van-cell-group inset>
        <van-cell class="cell-title" center title="监测数据">
          <template #icon>
            <span class="font_family icon-jianceshi icon"></span>
          </template>
        </van-cell>
        <van-cell center class="cell-content">
          <div class="jcsj">
            <div class="dbjc-jcsj-chart">
              <div id="dbjc-jcsj-chart"></div>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import 'echarts-liquidfill'
export default {
  name: 'Real1',
  data () {
    return {
      jcfxChart: null,
      jcsjChart: null
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  destroyed () {
    this.disposeChart()
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    initChart () {
      this.initJcfxChart()
      this.initJcsjChart()
    },
    resizeChart () {
      if (this.jcfxChart) this.jcfxChart.resize()
      if (this.jcsjChart) this.jcsjChart.resize()
    },
    disposeChart () {
      if (this.jcfxChart) this.jcfxChart.dispose()
      if (this.jcsjChart) this.jcsjChart.dispose()
    },
    initJcfxChart () {
      if (!this.jcfxChart) this.jcfxChart = this.echarts.init(document.getElementById('dbjc-jcfx-chart'))
      const option = {
        graphic: [{
          type: 'group',
          bottom: '10%',
          left: 'center',
          children: [{
            type: 'text',
            z: 100,
            style: {
              text: '总监测点',
              fill: '#fff',
              font: '400 normal 12px MicrosoftYaHei'
            }
          }]
        }],
        backgroundColor: '#fff',
        series: [
          {
            type: 'liquidFill',
            amplitude: '5%',
            color: [
              'rgba(18, 176, 133, 0.3)',
              'rgba(18, 176, 133, 0.6)'
            ],
            backgroundStyle: {
              color: 'rgba(18, 176, 133, 0.2)'
            },
            // 百分比文字设置
            label: {
              insideColor: '#fff',
              color: '#fff',
              fontSize: 20
            },
            // 高亮状态设置
            emphasis: {
              itemStyle: {
                opacity: 0.7
              }
            },
            center: ['50%', '50%'],
            radius: '100%',
            data: [
              {
                value: 1,
                direction: 'right'
              },
              {
                value: 1,
                direction: 'right'
              }
            ],
            outline: {
              show: false
            }
          }
        ]
      }
      this.jcfxChart.clear()
      this.jcfxChart.setOption(option)
    },
    initJcsjChart () {
      if (!this.jcsjChart) this.jcsjChart = this.echarts.init(document.getElementById('dbjc-jcsj-chart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 10
          }
        },
        grid: {
          left: 0,
          right: '12%',
          bottom: 0,
          top: '4%',
          containLabel: true
        },
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#39DEB4'
          }, {
            offset: 1, color: '#94FADC'
          }],
          global: false
        }],
        xAxis: {
          type: 'value',
          // boundaryGap: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#F2F2F2'
            }
          },
          axisLine: {
            show: true,
            symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'],
            symbolSize: [10, 15],
            lineStyle: {} // 样式
          },
          axisLabel: {
            show: true,
            // interval: 0,
            margin: 8, // 刻度文字与轴线之间的距离
            formatter: (value, index) => value + '%', // 文本格式化
            color: '#333',
            fontSize: 10
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            // interval: 0,
            margin: 8, // 刻度文字与轴线之间的距离
            formatter: (value, index) => value, // 文本格式化
            color: '#333',
            fontSize: 10,
            lineHeight: 12
          },
          axisLine: {
            show: true,
            symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'],
            symbolSize: [10, 15],
            lineStyle: {} // 样式
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          data: ['渗流监测', '表面垂直\n位移', '表面水平\n位移', '内部水平\n位移']
        },
        series: [
          {
            name: '信息',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              color: '#333',
              fontSize: 10,
              formatter: '{c} %'
            },
            tooltip: {
              valueFormatter: (value) => value + '%'
            },
            barWidth: 20,
            itemStyle: {
              borderRadius: [0, 20, 20, 0]
            },
            data: [63, 42, 100, 100]
          }
        ]
      }
      this.jcsjChart.clear()
      this.jcsjChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.fz22 {
  font-size: 22px !important;
}
#dbjc {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  z-index: 2;
  .main {
    width: 100%;
    flex: 1;
    padding: 10px 15px;
    overflow: auto;
    .van-cell-group {
      margin: 0 0 10px 0;
      border-radius: 10px;
      .cell-title {
        display: flex;
        align-items: center;
        &::after {
          left: 0;
          width: 100%;
        }
        .icon {
          margin-right: 6px;
          color: $green;
          font-size: 18px;
        }
        span {
          color: $color-333;
          font-size: 15px;
          font-weight: 700;
        }
      }
      .van-cell:nth-child(1) {
        height: 45px;
      }
      .cell-content {
        padding: 15px;
      }
    }
    .jcfx {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 118px;
      .dbjc-jcfx-chart {
        position: relative;
        width: 118px;
        height: 100%;
        margin: 15px 0;
        #dbjc-jcfx-chart {
          width: 100%;
          height: 100%;
        }
        span {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          color: $green;
          font-size: 20px;
          font-weight: 700;
        }
      }
      .chart-right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        .box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 145px;
          height: 24px;
          padding: 0 14px;
          color: #fff;
          font-size: 12px;
          border-radius: 12px;
          &.green {
            background-color: $green;
          }
          &.orange {
            background-color: $orange;
          }
          &.red {
            background-color: $red;
          }
        }
      }
    }
    .jcsj {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100%;
      .dbjc-jcsj-chart {
        position: relative;
        width: 100%;
        height: 220px;
        #dbjc-jcsj-chart {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
