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

<template>
    <div class="module-main">
        <div class="module-box">

            <div class="module-public module-bottom-box">
                <div class="header">
                    <div class="rhombus" />
                    <span class="title">空间打扫总览</span>
                    <!-- <div class="right">
                        <span class="title">日常工作计划：{{list.title}}</span>
                    </div> -->
                </div>
                <div class="bottom-content-box">
                    <div v-for="(item,index) in list"  :key="index" class="daily-box">
                        <div class="content">
                            <span class="title">{{item.title}}</span>
                            <span class="nums">{{item.count}}</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 {
    list = []

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

    getTaskRecordOne() {
        api.getTaskRecordOne().then((res) => {
            this.list = res.data;
        }).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-box .header .rhombus{
        width: 14px;
        height: 14px;
        background: #2D59BC;
        display: inline-block;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
    .module-box .header .title{
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 500;
        margin-left: 2%;
    }

    .module-box .header .right{
        width: 50%;
        display: inline-block;
        float: right;
        text-align: right;
        padding-right: 2%;
    }
    .module-box .header .right span{
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;
        margin-right: 6%;;
    }
    .module-bottom-box{
        width: 100%;
        height: 100%;
    }
    .module-bottom-box .bottom-content-box{
        width: 97%;
        margin-top: 10px;
        height: calc(100% - 50px);
        overflow: hidden;
        padding: 0 1.5%;
    }
    .module-bottom-box .bottom-content-box .daily-box{
        width: 30.8%;
        height: 16.4%;
        padding: 0 1.2%;
        margin-bottom: 1.5%;
        display: inline-block;
        float: left;
    }
    .module-bottom-box .bottom-content-box .daily-box .content{
        width: 100%;
        height: 100%;
        background: rgba(45, 89, 188, 0.2);
        border: 1px solid #2D59BC;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
    }
    .module-bottom-box .bottom-content-box .daily-box .content .title{
        width: 75%;
        height: 45%;
        margin-left: 5%;
        font-size: 16px;
        overflow: hidden;
    }
    .module-bottom-box .bottom-content-box .daily-box .content .nums{
        width: 20%;
        margin-left: 5%;
        font-size: 16px;
        overflow: hidden;
        text-align: right;
        margin-right: 5%;
    }

</style>