<template>
   <el-col :span="24" class="energy modular">
      <el-col class="title">实时巡更任务</el-col>
         <el-col class="item2" :span="24">
            <el-table :data="list" height="calc(100vh - 690px)" class="dataTable" >
               <el-table-column label="巡更任务" align="center" prop="name"  show-overflow-tooltip min-width="25%"/>
               <el-table-column label="执行人" align="center" prop="enforcer"  show-overflow-tooltip min-width="20%"/>
               <el-table-column label="开始时间" align="center" prop="time"  show-overflow-tooltip min-width="35%" />
               <el-table-column label="是否完成" align="center" prop="status"  show-overflow-tooltip min-width="25%">
               <template #default="scope">
                  <span :class="scope.row.status == '0' ? 'fail' : 'success'">{{scope.row.status == '1'  ? "已完成" : "未完成"}}</span>
               </template>
               </el-table-column>
            </el-table>
         </el-col>
 </el-col>
</template>
<script setup >
const props = defineProps({
   resData: Object,
})
const list = props.resData
</script>
<style lang="scss" scoped >
.energy{
   width:626px; 
   height:calc(100vh - 630px);
   overflow: hidden;
   box-sizing: border-box;
   color:#fff;
      .itemWrap{
         .item{
            padding:0px 0;
            .typeTitle{
               width:100%;
               text-align: center !important;
               font-size: 14px;
               display: block;
            }
         }
         .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: rgb(44, 44, 44);
               .img{
                  display: inline-block;
                  vertical-align: middle;
                  width:30px;
                  height:30px;
               }
               .attribute{
                  vertical-align: middle;
                  display: inline-block;
                  .name{
                     font-size: 12px;
                     width:100%;
                  }
                  .value{
                     font-size: 12px;
                     margin-top:5px;
                     font-weight: 700;
                     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;
            }
         }
      }
     
      .itemWrap:nth-child(3){
         border-left:1px solid #fff;
      }
      .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>
