jili2-screen/src/apps/home/components/smodule/smodule34.vue

<template>
    <div class="module-main">
        <div class="module-box">
            <div class="module-public module-top-box">
                <div class="header">
                    员工状态总览
                </div>
                <div class="center-box">
                    <div class="center-left-box">
                        <div class="nums">{{count1}}</div>
                        <div class="title">任务中的员工</div>
                    </div>
                    <div class="center-right-box">
                        <div class="nums">{{count2}}</div>
                        <div class="title">待命中的员工</div>
                    </div>
                </div>
                <div class="bottom-box">
                    <dv-scroll-board :config="config" class="bottom-left-box" />
                    <dv-scroll-board :config="config2" class="bottom-right-box" />
                </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 {
    config = {

    }

    config2 = {

    }

    config3 = {

    }

    count1 = 0;

    count2 = 0;

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

    getWxUserStatus() {
        api.getWxUserStatus().then((res) => {
            this.count1 = res.data.list2.count;
            this.count2 = res.data.list.count;
            this.config = {
                header: ['姓名', '维修次数', '最新位置'],
                headerBGC: '#163f85',
                headerHeight: 45,
                data: res.data.list2.list,
                align: 'center',
                oddRowBGC: '#163f85',
                evenRowBGC: '#13397d',
                rowNum: 4,
            };
            this.config2 = {
                header: ['姓名', '维修次数', '最新位置'],
                headerBGC: '#163f85',
                headerHeight: 45,
                data: res.data.list.list,
                align: 'center',
                oddRowBGC: '#163f85',
                evenRowBGC: '#13397d',
                rowNum: 4,
            };
        }).catch(() => {}).finally(() => {
        });
    }
}
</script>

<style scoped lang="scss">
    .module-box .header{
        width: 97%;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        // font-weight: bold;
        // color: #0BE2DF;
        padding-left: 3%;
    }

    .module-top-box{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .module-top-box .center-box{
        width: 100%;
        height: 80px;
    }
    .module-top-box .center-box .center-left-box{
        width: 50%;
        height: 100%;
        display: inline-block;
        overflow: hidden;
    }
    .module-top-box .center-box .center-left-box .nums{
        width: 100%;
        font-size: 30px;
        font-weight: bold;
        color: #11E799;
        text-align: center;
    }
    .module-top-box .center-box .center-left-box .title{
        width: 100%;
        font-size: 18px;
        color: #11E799;
        text-align: center;
    }
    .module-top-box .center-box .center-right-box{
        width: 50%;
        height: 100%;
        display: inline-block;
        overflow: hidden;
    }
    .module-top-box .center-box .center-right-box .nums{
        width: 100%;
        font-size: 30px;
        font-weight: bold;
        color: #FFE400;
        text-align: center;
    }
    .module-top-box .center-box .center-right-box .title{
        width: 100%;
        font-size: 18px;
        color: #FFE400;
        text-align: center;
    }
    .module-top-box .bottom-box{
         width: 100%;
         height: auto;
         position: absolute;
         top: 120px;
         left: 0;
         right: 0;
         bottom: 0;

    }
    .module-top-box .bottom-box .bottom-left-box{
        width: 49%;
        height: 100%;
        display: inline-block;
        float: left;
        overflow: hidden;
    }
    .module-top-box .bottom-box .bottom-right-box{
        width: 49%;
        height: 100%;
        display: inline-block;
        float: right;
        overflow: hidden;
    }

</style>