<template>
   <el-col :span="24" class="energy modular">
      <el-col class="title">安防</el-col>
         <el-col class="itemWrap" :span="24">
            <el-col class="item" :span="12">
               <el-col class="typeTitle" :span="24">
                 本月安防事件
               </el-col>
               <el-col class="bt" :span="24">
                  <pie alt="安防" :resData="list[1]" />
               </el-col>
            </el-col>
            <el-col class="item2Wrap" :span="8">
               <el-col class="item2" :span="24" v-for="item in list[0]" :key="item.index">
                  <el-col class="img" :span="8">
                     <el-image :src="`/assets/svg/sst.svg`"  class="img" v-if="loading"> </el-image>
                  </el-col>
                  <el-col class="attribute" :span="14">
                     <el-col class="name">{{item.name}}</el-col>
                     <el-col class="value">{{item.num}}个</el-col>
                  </el-col>
               </el-col>
            </el-col>
         </el-col>
 </el-col>
</template>

<script setup >
import pie from "@/components/business/security/pie";
const props = defineProps({
   resData: Object,
})
const list = props.resData
const loading = ref(false)
setTimeout(()=>{
   loading.value = ref(true)
},600)
</script>
<style lang="scss" scoped >
.energy{
   width:627px;
   height:270px;
   overflow: hidden;
   box-sizing: border-box;
      .itemWrap{
         padding:0 0px;
         height:190px;
         .item{
            padding:0px 0;
            .typeTitle{
               width:100%;
               text-align: center !important;
               font-size: 16px;
               display: block;
            }
         }
         .item2Wrap{
            margin-left:10%;
            .item2{
               padding:0px 0;
               margin-top:20px;
               display: block;
               width:100%;
               overflow: hidden;
               .img{
                  display: inline-block;
                  vertical-align: middle;
                  width:30px;
                  height:30px;
                  margin:2px 5px 0 0;
                  position: relative;
                  left: -80px;
                  filter: drop-shadow(#ffffff 80px 0); //设置颜色，并将阴影偏移至未溢出区域
                  -webkit-filter: drop-shadow(#fff 80px 0);
               }
               .attribute{
                  vertical-align: middle;
                  display: inline-block;
                  .name{
                     font-size: 14px;
                     width:100%;
                  }
                  .value{
                     font-size: 14px;
                     margin-top:5px;
                     font-weight: 700;
                     display: inline-block;
                     span{
                        font-size: 10px;
                     }
                     .compare{
                        width:30px;
                        height:40px;
                        display: inline-block;
                        margin-left:10px;
                        vertical-align: middle;
                     }
                  }
               }
            
            }
            .item2:nth-child(1){
               margin-top:0px !important;
            }
         }
         
      }
     
      .itemWrap:nth-child(3){
      }

}
</style>
