<template>
  <div class="alarm">
    <div class="alarm-top">
      <div class="alarm-top-left">
        <div class="alarm-divide line">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">今日报警</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <chart-pie></chart-pie>
          </div>
        </div>
        <div class="alarm-divide">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">报警分布</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <alarm-bar></alarm-bar>
          </div>
        </div>
      </div>
      <div class="alarm-top-center">
        <div class="alarm-title">
          <div class="alarm-title-left"></div>
          <div class="alarm-title-center">场区概况</div>
          <div class="alarm-title-right"></div>
        </div>
        <div class="alarm-content">
          <img src="../../assets/Alarm/111.png" width="100%" alt="">
        </div>
      </div>
      <div class="alarm-top-left">
        <div class="alarm-divide">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">事件提醒</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <cost-pie :pieData="pieData"></cost-pie>
          </div>
        </div>
        <div class="alarm-divide">
          <div class="alarm-title">
            <div class="alarm-title-left"></div>
            <div class="alarm-title-center">事件分布</div>
            <div class="alarm-title-right"></div>
          </div>
          <div class="alarm-content">
            <alarm-bar :bar-data="barData"></alarm-bar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ChartPie from "@/views/Alarm/chart/ChartPie";
import AlarmBar from "@/views/Alarm/chart/AlarmBar";
import CostPie from "@/views/Alarm/chart/CostPie";
export default {
  name: "Alarm",
  components: {
    ChartPie,
    AlarmBar,
    CostPie
  },
  data() {
    return {
      barData: {
        id: 1,
        salvProName: ['死猪运输', '车辆洗消', '人员违规', '猪只出售'],
        salvProValue: [489, 301, 315, 341]
      },
      pieData: [
        {
          name: '死猪运输',
          value: 42
        },
        {
          name: '车辆洗消',
          value: 26
        },
        {
          name: '人员违规',
          value: 20
        },
        {
          name: '猪只出售',
          value: 12
        },
      ]
    }
  }
}
</script>

<style scoped>
  .alarm {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
  }
  .alarm-top {
    width: 100%;
    height: 550px;
    display: flex;
    justify-content: space-between;
  }
  .alarm-top-left {
    width: 405px;
    height: 100%;
  }
  .alarm-top-center {
    flex: 1;
    margin: 0 20px;
  }
  .alarm-divide {
    width: 100%;
    height: 50%;
  }
  .alarm-title {
    width: 100%;
    height: 26px;
    display: flex;
  }
  .alarm-title-left {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1717.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .alarm-title-left:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .alarm-title-center {
    width: 120px;
    height: 26px;
    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
    color: white;
    font-size: 16px;
  }
  .alarm-title-right {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1718.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .alarm-title-right:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .alarm-content {
    width: 100%;
    height: calc(100% - 26px);
  }
  .line {
    transition: all 1s ease-out;
    z-index: 999;
  }
  .line:hover {
    transform-origin: 0 0;
    transform: scale(1.5);
  }
  /*@keyframes scale {*/
  /*  0% {*/
  /*    transform: translate(40px);*/
  /*  }*/
  /*  100% {*/
  /*    transform: scale(1.5);*/
  /*  }*/
  /*}*/
</style>