<template>
   <el-col :span="24" class="energy modular">
      <el-col class="title">巡更数据</el-col>
         <el-col class="itemWrap" :span="24">
            <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/xg.svg`"  class="img" v-if="loading"> </el-image>
                  </el-col>
                  <el-col class="attribute" :span="16">
                     <el-col class="name">{{item.num}}个</el-col>
                     <el-col class="value">{{item.name}}</el-col>
                  </el-col>
               </el-col>
            </el-col>
            <el-col class="item itemB" :span="15" >
               <el-col class="typeTitle" :span="24">
                 巡更准时率
               </el-col>
               <el-col class="bt" :span="24">
                  <pie :resData="list[1]" alt="巡更"/>
               </el-col>
            </el-col>
         </el-col>
 </el-col>
</template>
<script setup >
import pie from "@/components/business/keepWatch/pie";
   //生命周期钩子函数
   const props = defineProps({
      resData: Object,
   })
   const list = props.resData
   const loading = ref(false)
   setTimeout(()=>{
      loading.value = ref(true)
   },400)
</script>
<style lang="scss" scoped >
@import "@/assets/styles/common.scss";
.energy{
   width:626px;
   height:220px;
   overflow: hidden;
   box-sizing: border-box;
   color:#fff;
      .itemWrap{
         .item{
            padding:0px 0;
            .typeTitle{
               width:100%;
               text-align: center;
               font-size: 14px;
               display: block;
               margin:-20px 0 0 16px;
            }
         }
         .itemB{
            margin-left:10px;
            border-left:1px solid rgba(255,255,255,.1);
            // border-right:1px solid rgba(255,255,255,.1);
            padding-left:5px;
            height:150px;
            // margin-top:-40px;
            box-sizing: border-box;

         }
         .item2Wrap{
            .item2{
               padding:5px;
               margin-top:40px;
               background-color: $pmlbgc;
               border-radius: 2px;
               width:75%;
               margin-right:30px;
               overflow: hidden;
               .img{
                  display: inline-block;
                  vertical-align: middle;
                  width:25px;
                  height:25px;
                  margin:2px 5px 0 0;
                  position: relative;
                  left: -80px;
                  filter: drop-shadow(#ffffff 80px 0); //设置颜色，并将阴影偏移至未溢出区域
                  -webkit-filter: drop-shadow(#fff 80px 0);
                  // animation: scaleDraw 5s ease-in-out infinite;

                  // -webkit-animation: scaleDraw 5s ease-in-out infinite;
               }
               .attribute{
                  vertical-align: middle;
                  display: inline-block;
                  .name{
                     font-size: 12px;
                     width:100%;
                     font-weight: 700;
                  }
                  .value{
                     font-size: 12px;
                     margin-top:5px;
                     display: inline-block;
                     span{
                        font-size: 12px;
                     }
                     .compare{
                        width:15px;
                        height:20px;
                        display: inline-block;
                        margin-left:5px;
                        vertical-align: middle;
                     }
                  }
               }
            
            }
            .item2:nth-child(1){
               margin-top:0px !important;
            }
         }
      }
      .item2{
         width:100%;
         // margin-top:-40px;
         margin-left:0px;
         box-sizing: border-box;
         .title1{
            font-size: 14px;
            text-align: center;
            width:100%;
            margin-bottom:10px;
         }
      }
}
</style>
