<template>
  <div id="yjtx">
    <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-yujing icon"></span>
          </template>
        </van-cell>
        <!-- 安全研判 -->
        <van-cell center class="cell-content">
          <div class="my-box">
            <div class="chart-left">
              <div class="chart-box">
                <div id="yjtx-anyp-chart" class="chart"></div>
                <span class="num">119</span>
              </div>
              <p>安全研判</p>
            </div>
            <div class="chart-right">
              <div class="box">
                <p class="green">正常:</p>
                <span>119</span>
              </div>
              <div class="box">
                <p class="orange">黄色预警:</p>
                <span>10</span>
              </div>
              <div class="box">
                <p class="red">红色预警:</p>
                <span>10</span>
              </div>
            </div>
          </div>
        </van-cell>
        <!-- 视频AI -->
        <van-cell center class="cell-content">
          <div class="my-box">
            <div class="chart-left">
              <div class="chart-box">
                <div id="yjtx-spai-chart" class="chart"></div>
                <span class="num">0</span>
              </div>
              <p>视频AI</p>
            </div>
            <div class="chart-right">
              <div class="box">
                <p>监控设备:</p>
                <span>119</span>
              </div>
              <div class="box">
                <p class="pink">在线监控:</p>
                <span>10</span>
              </div>
              <div class="box">
                <p class="pink2">离线监控:</p>
                <span>10</span>
              </div>
            </div>
          </div>
        </van-cell>
        <!-- 人机巡检 -->
        <van-cell center class="cell-content">
          <div class="my-box">
            <div class="chart-left">
              <div class="chart-box">
                <div id="yjtx-rjxj-chart" class="chart"></div>
                <span class="num">0</span>
              </div>
              <p>人机巡检</p>
            </div>
            <div class="chart-right">
              <div class="box">
                <p>点位总数:</p>
                <span>119</span>
              </div>
              <div class="box">
                <p class="yellow">点位正常:</p>
                <span>10</span>
              </div>
              <div class="box">
                <p class="yellow2">点位异常:</p>
                <span>10</span>
              </div>
            </div>
          </div>
        </van-cell>
        <!-- 设备状态 -->
        <van-cell center class="cell-content">
          <div class="my-box">
            <div class="chart-left">
              <div class="chart-box">
                <div id="yjtx-sbzt-chart" class="chart"></div>
                <span class="num">0</span>
              </div>
              <p>设备状态</p>
            </div>
            <div class="chart-right">
              <div class="box">
                <p>设备状态:</p>
                <span>119</span>
              </div>
              <div class="box">
                <p class="blue">正常运行:</p>
                <span>10</span>
              </div>
              <div class="box">
                <p class="blue2">设备异常:</p>
                <span>10</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-yujing icon"></span>
          </template>
        </van-cell>
        <van-cell center class="cell-content">
          <div class="tjtj-box">
            <div class="chart-box">
              <div id="yjtx-yjtj-chart"></div>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Real1',
  data () {
    return {
      anypChart: null,
      spaiChart: null,
      rjxjChart: null,
      sbztChart: null,
      yjtjChart: null
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  destroyed () {
    this.disposeChart()
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    initChart () {
      this.initAnypChart()
      this.initSpaiChart()
      this.initRjxjChart()
      this.initSbztChart()
      this.initYjtjChart()
    },
    resizeChart () {
      if (this.jcfxChart) this.jcfxChart.resize()
      if (this.spaiChart) this.spaiChart.resize()
      if (this.rjxjChart) this.rjxjChart.resize()
      if (this.sbztChart) this.sbztChart.resize()
      if (this.yjtjChart) this.yjtjChart.resize()
    },
    disposeChart () {
      if (this.jcfxChart) this.jcfxChart.dispose()
      if (this.spaiChart) this.spaiChart.dispose()
      if (this.rjxjChart) this.rjxjChart.dispose()
      if (this.sbztChart) this.sbztChart.resize()
      if (this.yjtjChart) this.yjtjChart.dispose()
    },
    // 安全研判
    initAnypChart () {
      if (!this.anypChart) this.anypChart = this.echarts.init(document.getElementById('yjtx-anyp-chart'))
      const option = {
        color: ['#6AE8C6', '#F8B551', '#FF5757'],
        series: [
          {
            name: '待办工单',
            type: 'pie',
            emphasis: {
              disabled: true
            },
            radius: ['70%', '100%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 100, name: '正常' },
              { value: 50, name: '黄色预警' },
              { value: 50, name: '红色预警' }
            ]
          }
        ]
      }
      this.anypChart.clear()
      this.anypChart.setOption(option)
    },
    // 视频AI
    initSpaiChart () {
      if (!this.spaiChart) this.spaiChart = this.echarts.init(document.getElementById('yjtx-spai-chart'))
      const option = {
        color: ['#FF8787', '#BD5050'],
        series: [
          {
            name: '待办工单',
            type: 'pie',
            emphasis: {
              disabled: true
            },
            radius: ['70%', '100%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 100, name: '在线监控' },
              { value: 50, name: '离线监控' }
            ]
          }
        ]
      }
      this.spaiChart.clear()
      this.spaiChart.setOption(option)
    },
    // 人机巡检
    initRjxjChart () {
      if (!this.rjxjChart) this.rjxjChart = this.echarts.init(document.getElementById('yjtx-rjxj-chart'))
      const option = {
        color: ['#FFDBA1', '#D28736'],
        series: [
          {
            name: '待办工单',
            type: 'pie',
            emphasis: {
              disabled: true
            },
            radius: ['70%', '100%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 100, name: '点位正常' },
              { value: 50, name: '点位异常' }
            ]
          }
        ]
      }
      this.rjxjChart.clear()
      this.rjxjChart.setOption(option)
    },
    // 设备状态
    initSbztChart () {
      if (!this.sbztChart) this.sbztChart = this.echarts.init(document.getElementById('yjtx-sbzt-chart'))
      const option = {
        color: ['#93CCF0', '#4252C8'],
        series: [
          {
            name: '待办工单',
            type: 'pie',
            emphasis: {
              disabled: true
            },
            radius: ['70%', '100%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 100, name: '正常运行' },
              { value: 50, name: '设备异常' }
            ]
          }
        ]
      }
      this.sbztChart.clear()
      this.sbztChart.setOption(option)
    },
    // 预警统计
    initYjtjChart () {
      if (!this.yjtjChart) this.yjtjChart = this.echarts.init(document.getElementById('yjtx-yjtj-chart'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 10
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '2%',
          top: '12%',
          containLabel: true
        },
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#94FADC'
          }, {
            offset: 1, color: '#39DEB4'
          }],
          global: false
        }],
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: true,
            symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'],
            symbolSize: [10, 15],
            lineStyle: {} // 样式

          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            // interval: 0,
            margin: 8, // 刻度文字与轴线之间的距离
            color: '#333',
            fontSize: 10
          },
          data: ['内部水平位移', '表面垂直位移', '表面水平位移', '渗流监测']
        },
        yAxis: {
          type: 'value',
          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: {} // 样式
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#F2F2F2'
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          }
        },
        series: [
          {
            data: [120, 200, 150, 80],
            type: 'bar',
            barWidth: 40,
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      }
      this.yjtjChart.clear()
      this.yjtjChart.setOption(option)
    }

  }
}
</script>

<style lang="scss" scoped>
#yjtx {
  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: 0;
      }
    }
    .my-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 15px 35px;
      .chart-left {
        height: 100px;
        .chart-box {
          position: relative;
          width: 80px;
          height: 80px;
          margin-bottom: 6px;
          .chart {
            width: 80px;
            height: 80px;
          }
          .num {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #666;
            font-size: 20px;
          }
        }
        p {
          color: #666;
          font-size: 14px;
          text-align: center;
        }
      }
      .chart-right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100px;
        .box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 125px;
          height: 24px;
          padding: 0 14px 0 30px;
          border: 1px solid #51bc9f;
          font-size: 12px;
          border-radius: 2px;
          p {
            position: relative;
            color: #666;
            &::before {
              content: "";
              position: absolute;
              left: -14px;
              top: 3px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
            }
            &.green::before {
              background-color: #6ae8c6;
            }
            &.orange::before {
              background-color: #f8b551;
            }
            &.red::before {
              background-color: #ff5757;
            }
            &.pink::before {
              background-color: #ffa5a0;
            }
            &.pink2::before {
              background-color: #b34848;
            }
            &.yellow::before {
              background-color: #ffdba1;
            }
            &.yellow2::before {
              background-color: #d28736;
            }
            &.blue::before {
              background-color: #93ccf0;
            }
            &.blue2::before {
              background-color: #4252c8;
            }
          }
        }
      }
    }
    .tjtj-box {
      width: 100%;
      height: 210px;
      .chart-box {
        position: relative;
        width: 100%;
        height: 100%;
        #yjtx-yjtj-chart {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
