CKQ/src/views/home/components/SensorWarningStatistics.vue

<template>
    <div class="item warning-statistics">
        <div class="title">
            <span class="name">传感器预警统计</span>
            <span class="number">24</span>
        </div>
        <div class="container">
            <div class="lf">
                <div class="head">
                    <div class="head-item">
                        <div class="number">0</div>
                        <div class="name">危急</div>
                    </div>
                    <div class="head-item">
                        <div class="number">0</div>
                        <div class="name">危险</div>
                    </div>
                    <div class="head-item">
                        <div class="number">0</div>
                        <div class="name">威胁</div>
                    </div>
                    <div class="head-item">
                        <div class="number">0</div>
                        <div class="name">异常</div>
                    </div>
                </div>
                <div class="status">
                    <div class="status-item">
                        <div class="name">待整改</div>
                        <div class="number">2</div>
                    </div>                  
                    <div class="status-item">
                        <div class="name">待验收</div>
                        <div class="number">3</div>
                    </div>    
                    <div class="status-item">
                        <div class="name">已完成</div>
                        <div class="number">19</div>
                    </div>    
                </div>
            </div>
            <div class="chart-cont">
                <el-progress type="circle" :percentage="25" :width="120" color="#2affff" :stroke-width="8">   
                    <template #default="{ percentage }">
                        <span style="color:#fff;font-size: 20px;font-weight: bold;">{{ 80 }}%</span>
                    </template>
                </el-progress>
                <p>整改完成率</p>             
            </div>
        </div>
    </div> 
</template>
<script>
export default {
    name:"SensorWarningStatistics",
    props:{
        data:{
            type:Object,
            default:{

            }
        }
    }
}
</script>
<style lang="scss" scoped>
.container{
    height: 19.4vh !important; 
    .chart-cont{
        p{
            color: #fff;
            margin-top: 12px;
            font-size: 14px;
        }
    }
}
</style>