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

<template>
    <div class="module-main">
        <div class="module-box">
            <!-- <div class="main-box"> -->
            <div class="block2 flex-col">
                <div class="text-wrapper1 flex-row justify-between">
                    <span class="text5">{{ info.count1 }}</span>
                    <span class="text6">{{ info.count2 }}</span>
                </div>
                <div class="text-wrapper2 flex-row justify-between">
                    <span class="text7">点位总数</span>
                    <span class="text8">计划点位数</span>
                </div>
                <div class="box1 flex-row">
                    <span class="text9" style="margin-left: 1.5vw;">{{ info.count3 }}</span>
                    <span class="text9" style="font-size: 15px;margin-top: 4.3vw;margin-left: -17vw;">总人数</span>
                </div>
                <div class="box2  justify-between">
                    <div class="text-group2  justify-between">
                        <span class="text11">{{ info.count4 }}</span>
                        <span class="text12">当班人数</span>
                    </div>
                    <div class=" justify-between">
                        <span class="text13">{{ info.count5 }}<a v-if=" info.count5 > 0 " style="font-size: 30px;">%</a></span>
                        <span class="text14">今日巡更完成率</span>
                    </div>
                </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.getNewData();

        setInterval(() => {
            this.getNewData();
        }, 1000 * 60 * 15);
    }

    getNewData() {
        api.getNewData().then((res) => {
            this.info = res.data;
        }).catch(() => {}).finally(() => {

        });
    }
}
</script>

<style scoped lang="scss">
.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.justify-between {
    display: flex;
    justify-content: space-between;
}

.block2 {
    background-image: url(../../images/smodule/smodule103.png);
    background-repeat: no-repeat;
    background-size: 100% 80%;
    height: 77vh;

    .text-wrapper1 {
        width: 18.8vw;
        height: 11vh;
        margin: 4vh 0 0 2.2vw;

        .text5 {
            width: 13.9vw;
            height: 11vh;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 3.7vw;
            font-family: AlibabaPuHuiTi-Bold;
            font-weight: 700;
            text-align: left;
            white-space: nowrap;
            line-height: 11vh;
        }

        .text6 {
            width: 13.9vw;
            height: 11vh;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 3.7vw;
            font-family: AlibabaPuHuiTi-Bold;
            font-weight: 700;
            text-align: right;
            margin-left: 15.8vw;
            white-space: nowrap;
            line-height: 11vh;
        }
    }

    .text-wrapper2 {
        width: 26.5vw;
        height: 5vh;

        // margin: 0 0 0 2.9vw;
        .text7 {
            width: 9.3vw;
            height: 5vh;
            overflow-wrap: break-word;
            color: rgba(11, 226, 223, 1);
            font-size: 18px;
            font-family: AlibabaPuHuiTi-Regular;
            font-weight: NaN;
            text-align: left;
            margin-left: 2.5vw;
            margin-top: -5.5vh;
            white-space: nowrap;
            line-height: 11vh;
        }

        .text8 {
            width: 9.3vw;
            height: 5vh;
            overflow-wrap: break-word;
            color: rgba(11, 226, 223, 1);
            font-size: 18px;
            font-family: AlibabaPuHuiTi-Regular;
            font-weight: NaN;
            text-align: left;
            margin-left: 18.4vw;
            margin-top: -6vh;
            white-space: nowrap;
            line-height: 11vh;
        }
    }

    .box1 {
        width: 23.1vw;
        height: 27vh;
        margin: 0 0 0 11.6vw;
        .text9 {
            width: 23.1vw;
            height: 16vh;
            overflow-wrap: break-word;
            color: rgba(11, 226, 223, 1);
            font-size: 100px;
            font-family: AlibabaPuHuiTi-Heavy;
            font-weight: 900;
            text-align: left;
            white-space: nowrap;
            line-height: 20vh;
        }

    }

    .box2 {
        // width: 71.5vw;
        height: 11.5vw;
        margin: 5vh 0 0 2vw;
        .text-group2{
            .text11 {
                width: 13.9vw;
                height: 11vh;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 3.7vw;
                font-family: AlibabaPuHuiTi-Bold;
                font-weight: 700;
                text-align: left;
                margin-top: -2.5vw;
                white-space: nowrap;
                line-height: 49px;
            }

            .text12 {
                width: 69px;
                height: 17px;
                overflow-wrap: break-word;
                color: rgba(11, 226, 223, 1);
                font-size: 18px;
                font-family: AlibabaPuHuiTi-Regular;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 48px;
                margin-left: -13.5vw;
                margin-top: 1vh;
            }
        }
        .text13 {
            width: 104px;
            height: 47px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 3.7vw;
            font-family: AlibabaPuHuiTi-Bold;
            font-weight: 700;
            text-align: left;
            white-space: nowrap;
            margin-top: -4vh;
            margin-left: -9vw;
            line-height: 5vh;
        }
        .text14 {
            position: absolute;
            width: 123px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(11, 226, 223, 1);
            font-size: 18px;
            font-family: AlibabaPuHuiTi-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 6vh;
            margin-left: -9vw;
            margin-top: 1vh;
        }
    }
}
</style>