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

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

            <div class="module-public module-bottom-box">
                <div class="header">
                    <span>【超时】</span>  运送任务实时调度总览（新订单{{num}}个/进行中{{num1}}个）
                </div>
                <dv-scroll-board v-if="loading" :config="config" class="bottom-content-box" />
            </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 = {

    }

    num = 0

    num1 = 0

    loading = true

    created() {
        this.getYsTypeTask();
        setInterval(() => {
            this.getYsTypeTask();
        }, 3000 * 60);
    }

    getYsTypeTask() {
        this.loading = false;
        api.getYsTypeTask({ type: 1 }).then((res) => {
            this.config = {
                header: [
                    '<span style="font-size:13px">状态</span>',
                    '<span style="font-size:13px">类型</span>',
                    '<span style="font-size:13px">始发地</span>',
                    '<span style="font-size:13px">目的地</span>',
                    '<span style="font-size:13px">需求时间</span>',
                    '<span style="font-size:13px">运送员</span>',
                    '<span style="font-size:13px">派工时间</span>',
                    '<span style="font-size:13px">接收时间</span>',
                ],
                headerBGC: '#163f85',
                headerHeight: 45,
                data: res.data.list,
                align: 'left',
                oddRowBGC: '#163f85',
                evenRowBGC: '#13397d',
                rowNum: 7,
                columnWidth: [65, 100, 120, 120],
            };
            this.num = res.data.num;
            this.num1 = res.data.num1;
            this.loading = true;
        }).catch(() => {
            this.loading = true;
        }).finally(() => {
            this.loading = true;
        });
    }
}
</script>

<style scoped lang="scss">
    .module-box .header{
        width: 97%;
        height: 40px;
        font-size: 16px;
        // font-weight: bold;
        // color: #0BE2DF;
        // padding-left: 1%;
        display: flex;
        align-items: center;
        span{
            color: #FFE400;
        }
    }

    .module-bottom-box{
        width: 100%;
        height: 100%;
        // margin-top: 2.38%;
        position: relative;
    }
    .module-bottom-box .bottom-content-box{
        width: 100%;
        height: auto;
        position: absolute;
        top:40px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }

</style>