<template>
  <div class="panel alarmStatic">
    <div class="panel-tit">报警统计</div>
    <div class="staticList">
        <ul>
            <li>
                <img src="@/assets/static1.png" alt="">
                <div>
                  <p class="static-num colorTotal">{{this.total}}</p>
                  <p class="static-tit">总报警数</p>
                </div>
            </li>
            <li>
                <img src="@/assets/static2.png" alt="">
                <div>
                  <p class="static-num colorOverTime">{{this.untreated}}</p>
                  <p class="static-tit">已处置数</p>
                </div>
            </li>
            <li>
                <img src="@/assets/static3.png" alt="">
                <div>
                  <p class="static-num colorUnhandle">{{(this.total-this.untreated)}}</p>
                  <p class="static-tit">未处置数</p>
                </div>
            </li>
        </ul>
    </div>

     <div class="panel-footer"></div>
  </div>
</template>
<script>
// import pieAlarm from "./pieAlarm";
// import barChart from "./barChart";
import api from "@/api/alarmStatic"
export default {
//   components: { pieAlarm,barChart},
  name: "alarmStatic",
  data(){
    return{
      total:0,
      untreated:0,
    }
  },
  mounted(){
    api.queryAlarm().then((response)=>{
      this.total = response.data.toatl
      this.untreated = response.data.untreated
    })
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.panel.alarmStatic {

  box-sizing:border-box;
  padding:0 1.2rem;
  .staticList{
      height:20rem;
  }
  li{
      margin-top:1rem;
      display:block;
      float:left;
      width:33.3333%;
      //  border:1px solid pink;
      height:18rem;
      text-align:center;
      img{
          max-width:100%;
          width:70%;

          padding:0;
          margin:1.5rem auto 1.5rem;
          // position:relative;
          // top:-2.4rem
      }
      div{
        // position:relative;
        // top:-4.8rem;
        .static-num{
            font-size:2.4rem;
            font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            margin-bottom:.7rem
        }
        .static-tit{
          font-size:1.4rem;
        }
      }

  }


}
</style>
<style lang="scss">
</style>
