index.vue

<!-- 图表左侧的机组状态统计 -->
<template>
    <div class="state-count">
        <div class="item" :style="{'background-image': 'linear-gradient(to right, rgba(0,0,0,0), ' + item.color + ', rgba(0,0,0,0))'}" v-for="(item, key) in crewState">
            {{item.name}}: {{copyCount[key]}}
        </div>
    </div>
</template>

<script>
    import {CrewState} from '@/common/const.js';
    export default {
        props: {
            count: {
                type: Object,
                default(){
                    return {
                        warn: 0,
                        danger: 0,
                        shutdown: 0,
                        normal: 0
                    }
                }
            }
        },
        watch: {
            count(val){
                if(!val) return;
                else this.copyCount = val;
            }
        },
        data() {
            return {
                crewState: CrewState, // 机组状态
                // 复制count,防止count为空
                copyCount: {
                    warn: 0,
                    danger: 0,
                    shutdown: 0,
                    normal: 0
                },
            }
        }
    }
</script>

<style lang="scss" scoped>
    .state-count{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        
        .item{
            width: 100%;
            height: 17%;
            @extend %flex-center;
            font-size: 0.875rem;
        }
    }
</style>