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

<template>
    <div class="module-main">
        <div class="module-box">
            <div class="header">
                <span  @click="clickTask">任务数据统计</span>
                <span class="pull-right" @click="clickMore">更多></span>
                <select v-model="type" class="module-select" @change="updateData">
                    <option value="1">日统计</option>
                    <option value="2">周统计</option>
                    <option value="3">月统计</option>
                </select>
                <select v-model="mode" class="module-select" @change="updateData">
                    <option value="1">报修</option>
                    <option value="2">保洁</option>
                    <option value="3">运送</option>
                    <option value="4">应急</option>
                </select>
            </div>
            <echarts :data="echartsOption"  class="data" />
        </div>
        <popup-7 :visible="taskVisible" :ctype="type" :cmode="mode" @closeClick="()=>{taskVisible=false}" />
    </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import echarts from '@/common/components/echarts.vue';
import Popup7 from '../popup/popup7.vue';
import api from '../../api';

@Component({
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
    components: {
        echarts,
        Popup7,
    },
})
export default class Echarts extends Vue {
    taskVisible = false;

    echartsOption = {
        color: ['#1CC6DA', '#FBFE25'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999',
                },
            },
        },
        legend: {
            show: true,
            data: ['工单数', '订单数'],
            itemWidth: 20, // 颜色块宽度
            itemHeight: 5, // 颜色块高度
            textStyle: {
                fontSize: 12, // 颜色块后字体大小
                color: '#fff', // 颜色块后字体颜色
            },
            top: '-3px',
        },
        grid: {
            top: '15px',
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                // 设置轴线的属性
                axisLine: {
                    lineStyle: {
                        color: '#FFFFFF',
                        width: 1, // 这里是为了突出显示加上的
                    },
                },
                // splitLine: {
                //     show: false, // 去掉网格线
                // },
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量',
                // min: 0,
                // max: 250,
                // interval: 50,
                axisLabel: {
                    formatter: '{value}',
                },
                // 设置轴线的属性
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#FFFFFF',
                        width: 1, // 这里是为了突出显示加上的
                    },
                },
                axisTick: { // y轴刻度线
                    show: true,
                },
                splitLine: { // 网格线
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '工单数',
                type: 'bar',
                barWidth: '10px',
                data: [],
            },
            {
                name: '订单数',
                type: 'line',
                data: [],
            },
        ],
    };

    loading = true;

    mode = '1';

    type = '1';

    timer=null;

    created() {
        this.updateData();
        // this.getOrderCount();
        // setInterval(() => {
        //     this.getOrderCount();
        // }, 1000 * 60 * 5);
    }

    updateData() {
        if (this.timer) { // 清除定时器
            clearInterval(this.timer);
        }
        this.getOrderCount();
        this.timer = setInterval(() => {
            this.getOrderCount();
        }, 1000 * 60 * 5);
    }

    getOrderCount() {
        api.getOrderCount({
            type: this.type,
            mode: this.mode,
        }).then((res) => {
            this.$nextTick(() => {
                this.echartsOption.xAxis = [
                    {
                        type: 'category',
                        data: res.data.d,
                        // 设置轴线的属性
                        axisLine: {
                            lineStyle: {
                                color: '#FFFFFF',
                                width: 1, // 这里是为了突出显示加上的
                            },
                        },
                        // splitLine: {
                        //     show: false, // 去掉网格线
                        // },
                    },
                ];
                this.echartsOption.series = [
                    {
                        name: '工单数',
                        type: 'bar',
                        barWidth: '5px',
                        data: res.data.d1,
                    },
                    {
                        name: '订单数',
                        type: 'line',
                        data: res.data.d2,
                    },
                ];
            });
        }).catch(() => {}).finally(() => {});
    }

    clickTask() {
        this.taskVisible = true;
    }

    clickMore() {
        const url = `${process.env.VUE_APP_PHP_URL}/admin/orders/index.html?mode=0`;
        window.open(url);
    }
}
</script>

<style scoped lang="scss">

    .header{
        width: calc(100% - 20px);
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        font-size: 18px;
    }
    .header span{
        font-size: 16px;
        font-family: Source Han Sans CN;
        // font-weight: bold;
        color: #FFFFFF;
        cursor: pointer;
    }
    .data{
        width: calc(100% - 20px);
        height: calc(100% - 70px);
        margin: 0px 10px;
    }

    .module-select{
        width: 80px;
        height: 20px;
        color: #A6D6FF;
        background-color: #3D7FFF;
        outline: none;
        border: 1px solid #A6D6FF;
        float: right;
        vertical-align: middle;
        margin-top: 16px;
        margin-right: 5px;
    }
    .pull-right{
        float: right !important;
    }
</style>