guoyao-jiankang-screen/src/apps/xxscreen/components/xxmodule2.vue

<template>
    <div class="module-main">
        <div class="module-box">
            <div class="main-box">
                <div class="nums-box">
                    <div class="nums">{{info.bj}}</div>
                    <div class="name">保洁工单</div>
                    <div class="img">
                        <img src="../images/chengse.png" alt="">
                    </div>
                </div>
                <div class="nums-box">
                    <div class="nums">{{info.bx}}</div>
                    <div class="name">报修工单</div>
                    <div class="img">
                        <img src="../images/fense.png" alt="">
                    </div>
                </div>
                <div class="nums-box">
                    <div class="nums">{{info.yh}}</div>
                    <div class="name">应急工单</div>
                    <div class="img">
                        <img src="../images/huangse.png" alt="">
                    </div>
                </div>
                <div class="nums-box">
                    <div class="nums">{{info.ys}}</div>
                    <div class="name">运送工单</div>
                    <div class="img">
                        <img src="../images/lanse.png" alt="">
                    </div>
                </div>
                <div class="nums-box">
                    <div class="nums">{{info.total}}</div>
                    <div class="name">总工单</div>
                    <div class="img">
                        <img src="../images/lvse.png" alt="">
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import api from '../api';

@Component({
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
})
export default class Echarts extends Vue {
    info = [];

    created() {
        this.cateTodoCount();
        setInterval(() => {
            this.cateTodoCount();
        }, 5000 * 60);
    }

    cateTodoCount() {
        api.cateTodoCount().then((res) => {
            this.info = res.data;
        }).catch(() => {}).finally(() => {
        });
    }
}
</script>

<style scoped lang="scss">
    .main-box{
        // width: calc(100% - 40px);
        // height: calc(100% - 20px);
        // margin: 10px 20px;
        width: 100%;
        height: 100%;
    }
    .nums-box{
        width:calc(113px - 65px);
        height: 100%;
        display: inline-block;
        padding-left: 65px;
    }
    .nums-box .nums{
        width: 100%;
        height: 20px;
        line-height: 25px;
        text-align: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
    }
    .nums-box .name{
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
    }
    .nums-box .img{
        // width: 100%;
        // height: calc(100% - 40px);
        width: 48px;
        height: 30px;
    }
    .nums-box .img img{
        width: 100%;
        height: 100%;
    }

</style>