<!--智能预警统计-->
<template>
  <div class="warning-statistics">
    <div class="warning-total-info">
      <div class="warning-data">
        <div class="warning-icon"></div>
        <div class="_title">报警总数</div>
        <div class="_value">
          <Number :num="286"/>
        </div>
      </div>
    </div>

    <peak-third-level-label :title="warningTypeTitle"/>

    <div class="warning-type-pie">
      <div class="_bg"></div>
      <peak-warning-type-chart :data-source="warningTypeDataSource"/>
    </div>
  </div>
</template>

<script>
import WarningTypeChart from "@/components/charts/WarningTypeChart";
import PeakWarningTypeChart from "@/components/charts/PeakWarningTypeChart";
import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";

export default {
  name: "PeakWarningStatistics",
  components: {PeakThirdLevelLabel, PeakWarningTypeChart, WarningTypeChart},
  data() {
    return {
      warningTypeTitle: '报警类型分布',
      warningTypeDataSource: [
        {
          name: '断电掉线',
          value: 214,
          rate: '38%'
        },
        {
          name: '区域入侵',
          value: 342,
          rate: '32%'
        },
        {
          name: '污染超标',
          value: 12,
          rate: '30%'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.warning-statistics {
  height: 100%;
  width: 100%;
  .flex-column;

  .warning-total-info {
    height: 60px;
    .flex-row;
    margin-bottom: 20px;
    .warning-data {
      width: 100%;
      height: 100%;
      background: rgba(1, 120, 198, 0.30);
      .flex-row;
      justify-content: space-around;

      .warning-icon {
        width: 60px;
        height: 40px;
        .bg("~/assets/peakCoalImages/right/warning-icon.png");
      }

      ._title {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #6AC4FF;
        letter-spacing: 2.26px;
        font-weight: 400;
      }

      ._value {
        font-family: YouSheBiaoTiHei;
        font-size:20px;
        color: #FFFFFF;
        letter-spacing: 5.64px;
        font-weight: 400;
      }
    }
  }

  .warning-type-pie {
    flex: 1;
    height: 0;
    position: relative;

    ._bg {
      position: absolute;
      left: 26px;
      top: 24px;
      width: 120px;
      height: 120px;
      background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
