super-fusion-platform/src/views/screenAdaptation/pages/dynamicMode/equipmentCondition.vue

<template>
    <div class="equipment-condition-style">
        <div class="data-row-style">
            <span class="info-title-style">共计设备：</span>
            <span class="info-data-style">{{dataInfo.totalNum}}</span>
        </div>
        <div class="data-row-style">
            <span class="info-title-style">正常运行：</span>
            <span class="info-data-style">{{dataInfo.normalNum}}</span>
        </div>
        <div class="data-row-style">
            <span class="info-title-style">故障：</span>
            <span class="info-data-style">{{dataInfo.faultNum}}</span>
        </div>
        <div class="data-row-style">
            <span class="info-title-style">告警：</span>
            <span class="info-data-style">{{dataInfo.warningNum}}</span>
        </div>
    </div>
</template>
<script>
    /*
    * 设备情况
    * */
    export default{
        data(){
            return {}
        },
        props: {
            dataInfo: {
                type: Object,
                default: {
                    totalNum: 0,
                    normalNum: 0,
                    faultNum: 0,
                    warningNum: 0
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    .equipment-condition-style {
        width: 350px;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
        font-size: 16px;
        .data-row-style {
            width: 100%;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            .info-data-style {
                color: #7ce7fd;
            }
        }
    }
</style>