lh_firm_former/src/views/system/jbdHome/board/component/topBar.vue

<template>
    <div id="top-bar">
        <div :class="$style.bar">
            <div
                v-for="(item, index) in topBarData"
                :key="index"
                :class="$style.item"
            >
                <div :class="$style.title">{{ item.title }}</div>
                <div
                    v-for="(v, i) in item.children"
                    :key="i"
                    :class="$style.box"
                >
                    <div :class="$style.label">{{ v.label }}</div>
                    <div :class="$style.count">
                        <dv-digital-flop
                            :config="v.data"
                            :class="$style.flop"
                        />
                        <div :class="$style.unit">{{ v.unit }}</div>
                    </div>
                </div>
            </div>
        </div>
        <dv-decoration-10 />
    </div>
</template>
<script>
    import { getRandomColor } from '../data.js'
    export default {
        name: 'topBar',
        props: {
            info: {
                type: Array,
                default: []
            },
            color: {
                type: Array,
                default: []
            }
        },
        components: {},
        watch: {
            info(v) {
                this.update()
            }
        },
        data() {
            return {
                topBarData: []
            }
        },
        created() {
            this.update()
        },
        methods: {
            // 数据更新
            update() {
                const fontColor = [...this.color].sort(() => Math.random() - 0.5)
                const colorGenerator = getRandomColor(fontColor)
                this.info.forEach(item => {
                    item.children.forEach(i => {
                        i.data = {
                            number: [i.value],
                            content: '{nt}',
                            textAlign: 'right',
                            style: {
                                fill: colorGenerator.next().value,
                                fontWeight: 'bold'
                            }
                        }
                        i.unit = item.unit
                    })
                })
                this.topBarData = JSON.parse(JSON.stringify(this.info))
            }
        }
    }
</script>
<style lang="scss" module>
    .bar {
        position: relative;
        height: 90%;
        margin: 20px 2%;
        display: flex;
        // flex-shrink: 0;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(6, 30, 93, 0.5);
        .item {
            width: 20%;
            // width: calc(100% / 13);
            height: 60%;
            padding: 12px 20px;
            border-left: 5px solid rgb(6, 30, 93);
            &:first-child{
                width: 33.3%;
                .box{
                    width: 20%;
                }
            }
            &:last-child{
                width: 26.6%;
                .box{
                    width: 25%;
                }
            }
            .title {
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 20px;
            }
            .box{
                display: inline-block;
                width: 33%;
                .label{
                    text-align: center;
                    font-size: 14px;
                }
                .count {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .flop {
                        width: 60px;
                        height: 40px;
                        font-size: 18px;
                    }
                    .unit {
                        margin-left: 10px;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
    :global {
        #top-bar{
            height: 150px;
        }
        .dv-decoration-10 {
            width: 96%;
            margin: -7px 2% 0;
            height: 5px;
        }
    }
</style>