kanban-vue/src/views/smt/up2.vue

<template>
    <div id="center">
        <div class="up">
            <div
                    class=" item"
                    v-for="item in titleItem"
                    :key="item.title"
            >
                    <p class="ml-3 colorText fw-b " style="font-size:26px;">{{ item.title }}</p>
                    <div>
                        <dv-digital-flop
                                class="dv-dig-flop ml-1 mt-3 pl-3"
                                :config="item.number"
                        />
                    </div>
            </div>
        </div>
        <div class="down">
            <div>
                <Up2Chart />
            </div>
        </div>
    </div>
</template>

<script>
    import Up2Chart from '@/components/smtechart/up/up2Chart'
    export default {
        data() {
            return {
                titleItem:[],
            }
        },
        components: {
            Up2Chart
        },
        mounted () {
            this.drawTimingFn();
        },

        methods: {
            drawTimingFn () {
                this.setData();
                setInterval(() => {
                    this.setData(); //获取-数据
                }, 30000);
            },
            async setData () {
                // 基板总数 ，总实装点数 name value
                await this.$http.get("kanban/datalist.action?caller=KB!SMT!UP2!1&_noc=1&page=1&pageSize=100&condition=1=1")
                    .then((result)=>{
                            let dataList = JSON.parse(result.data.data);
                            let titleitems = new Array();
                            for (let index = 0; index < dataList.length; index++) {
                                const element = dataList[index];
                                titleitems.push({
                                    title: element.v_name,
                                    number: {
                                        number: [element.v_value],
                                        //toFixed: 1,
                                        textAlign: 'center',
                                        content: (element.v_name =='实装点数'? '{nt}K':'{nt}'),
                                        style: {
                                            fontSize: 35,
                                            fill: '#2e92e7',
                                            fontWeight:'bold',
                                           // fontFamily:'"Lucida Console", "Courier New", monospace'
                                        }
                                    }
                                });
                            }
                            this.titleItem = titleitems;
                        },(result)=>{
                            console.error(result)
                        }
                    );
            }
        }
    }
</script>

<style lang="scss" scoped>
    #center {
        display: flex;
        flex-direction: column;
        .up {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin: 70px 0px 0 0px;
            .bg-color-black {
                background-color: rgba(19, 25, 47, 0.6) !important;
            }
            .item {
                border-radius: 6px;
                padding-top: 20px;
                margin-top: 8px;
                width: 30%;
                height: 100px;
                padding-left: 20px;
                text-align: center;
                .dv-dig-flop {
                   // width: 350px;
                    height: 30px;
                }
                .dv-border-box-10{
                    width: 180px;
                    height: 80px;
                }
            }
        }
        .down {
            padding: 6px 4px;
            padding-bottom: 0;
            width: 100%;
            //display: flex;
            height: 355px;
            justify-content: space-between;
        }
    }
</style>