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

<template>
    <div class="module-main">
        <div class="module-box">
            <div class="header">
                巡更任务数据统计
            </div>
            <echarts :data="echartsOption"  class="data" />
        </div>
    </div>
</template>

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

@Component({
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
    components: {
        echarts,
    },
})
export default class Echarts extends Vue {
    echartsOption = {
        color: ['#23A3F4', '#FEC006'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999',
                },
            },
        },
        legend: {
            show: true,
            data: ['当天巡更', '30天内异常数据'],
            itemWidth: 20, // 颜色块宽度
            itemHeight: 5, // 颜色块高度
            textStyle: {
                fontSize: 12, // 颜色块后字体大小
                color: '#fff', // 颜色块后字体颜色
            },
            top: '-2px',
        },
        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: '数量',
                axisLabel: {
                    formatter: '{value}',
                },
                // 设置轴线的属性
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#FFFFFF',
                        width: 1, // 这里是为了突出显示加上的
                    },
                },
                axisTick: { // y轴刻度线
                    show: true,
                },
                splitLine: { // 网格线
                    show: true,
                    lineStyle: {
                        color: 'rgba(229, 255, 252, 0.33)',
                        width: 1, // 这里是为了突出显示加上的
                    },
                },
            },
        ],
        series: [
            {
                name: '当天巡更',
                type: 'bar',
                barWidth: '10px',
                data: [],
            },
            {
                name: '30天内异常数据',
                type: 'line',
                areaStyle: {
                    color: 'rgba(254, 192, 6, 0.18)',
                },
                data: [],
            },
        ],
    };

    timer = null;

    info = null;

    titles = [];

    y1 = [];

    y2 = [];

    created() {
        this.getAddrRecord();

        setInterval(() => {
            this.getAddrRecord();
        }, 1000 * 60 * 5);
    }

    updateData() {
        if (this.timer) { // 清除定时器
            clearInterval(this.timer);
        }
        if (this.info) {
            this.titles = this.info.titles;
            this.y1 = this.info.y1;
            this.y2 = this.info.y2;

            this.timer = setInterval(() => {
                this.formatEchart();
            }, 1000 * 3);
        }
    }

    formatEchart() {
        let ts = this.titles;
        let y11 = this.y1;
        let y22 = this.y2;
        if (this.titles.length > 7) {
            ts = this.titles.slice(0, 6);
            y11 = this.y1.slice(0, 6);
            y22 = this.y2.slice(0, 6);
            const tt1 = this.titles.shift();
            this.titles.push(tt1);
            const yy1 = this.y1.shift();
            this.y1.push(yy1);
            const yy2 = this.y2.shift();
            this.y2.push(yy2);
        }

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

    getAddrRecord() {
        api.getAddrRecord().then((res) => {
            this.info = res.data;
            this.updateData();
        }).catch(() => {}).finally(() => {});
    }
}
</script>

<style scoped lang="scss">
  .module-box .header{
        width: calc(100% - 20px);
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        font-size: 18px;
    }
    .data{
        width: calc(100% - 20px);
        height: calc(100% - 70px);
        margin: 0px 10px;
    }
</style>