baozhida-building-system/src/views/system/passengerFlow/earlyWarning.vue

<template>
    <div class="person_box">
        <!-- <div class="left_warning center_in">
            <div class="warning_card center_in">
                <svg class="warning_icon_star" aria-hidden="true">
                    <defs>
                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                            <stop offset="100%" stop-color="#ffffff" />
                        </linearGradient>
                    </defs>
                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
                </svg>
            </div>
        </div> -->
        <div class="right_warning">
            <div class="box_equipment">
                <span class="equi_title">客流监控设备</span>
                <span class="equi_num">{{ networkDevices }}</span>
            </div>
            <div class="box_early_warn">
                <div class="space_between_in card_eary">
                    <div class="type_title_early">正常</div>
                    <div class="type_num_early">{{ resultData.Normal }}个</div>
                </div>
                <el-progress :percentage="getPercentage(resultData.Normal)" :text-inside="true"
                    color="rgb(100, 178, 161)" />
            </div>
            <div class="box_early_warn">
                <div class="space_between_in card_eary">
                    <div class="type_title_early">故障</div>
                    <div class="type_num_early">{{ resultData.Fault }}个</div>
                </div>
                <el-progress :percentage="getPercentage(resultData.Fault)" :text-inside="true"
                    color="rgb(230, 162, 60)" />
            </div>
            <div class="box_early_warn">
                <div class="space_between_in card_eary">
                    <div class="type_title_early">离线</div>
                    <div class="type_num_early">{{ resultData.Offline }}个</div>
                </div>
                <el-progress :percentage="getPercentage(resultData.Offline)" :text-inside="true"
                    color="rgb(245, 108, 108)" />
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const networkDevices = ref(0)
watch(() => props.resultData, (newVal) => {
    if (newVal) {
        networkDevices.value = newVal.Normal + newVal.Fault + newVal.Offline
    }
}, { deep: true, immediate: true } // 开启深度监听
)
function getPercentage(params) {
    let num = params / networkDevices.value * 100
    return Math.floor(num)
}
// 生命周期
onMounted(() => {
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.left_warning {
    width: 100px;
}

.right_warning {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
    height: 100%;
    // padding-left: 20px;
    padding-right: 20px;
}

.box_equipment {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    width: 100%;
    height: 40px;
    border: 1px solid rgb(48 69 129);
}

.box_early_warn {
    margin-top: 10px;
    margin-bottom: 20px;
}

.equi_title {
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, rgb(143, 190, 224), rgb(245 245 245));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.equi_num {
    font-size: 18px;
    color: #fff;
    margin-left: 20px;
    line-height: 30px;
}

.card_eary {
    margin-bottom: 8px;
}

.type_title_early {
    font-size: 16px;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, rgb(143, 190, 224), rgb(245 245 245));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.type_num_early {
    font-size: 16px;
}

.warning_card {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: rgb(9, 29, 56);
    box-shadow: inset 0px 0px 20px 3px rgb(14 67 117);
    border: 1px solid rgb(135, 152, 189);
}

.warning_icon_star {
    width: 40px;
    height: 40px;
}
</style>
<style lang="scss" scoped>
:deep(.el-progress__text) {
    color: #ffffff !important;
}

:deep(.el-progress-bar__outer) {
    overflow: unset !important;
}

:deep(.el-progress-bar__innerText) {
    position: absolute;
    left: 0;
    bottom: -16px;
}
</style>