ProductionLineMonitor/ProductionLineMonitor.Web/wwwroot/js/home/difference.js

var vm = new Vue({
    el: '#app',
    data: {
        mark: "",
        module: "",
        year: "",
        month: "",
        lines: "",
        newDates: [],
        planCapacities: [],
        capacities: [],
        differences: [],
        dom1: Object,
        myChart1: Object,
        option1: Object,
    },
    mounted() {
        this.init()
        this.initEcharts()
        this.getMonthData()
    },
    methods: {
        init() {
            let url = new URL(window.location.href);
            this.mark = url.searchParams.get("mark");
            this.module = url.searchParams.get("module");
            this.year = url.searchParams.get("year");
            this.month = url.searchParams.get("month");
            this.lines = url.searchParams.get("lines");
            document.title = this.module + " - 差异详情";
            this.title = this.module + " " + this.year + "年 " + this.month + "月 " + "差异详情";
        },
        initEcharts() {
            this.dom1 = document.getElementById('container');
            this.myChart1 = echarts.init(this.dom1, 'dark');
            this.option1 = {
                backgroundColor: '#001529',
                legend: {
                    left: 'right',
                    selected: {
                        '产能': true,
                        '目标产能': false,
                        '差异': true
                    }
                },
                tooltip: {},
                xAxis: {
                    axisLabel: {
                        fontSize: 16
                    }
                },
                textStyle: {
                    "fontSize": 16
                },
                yAxis: {
                    show: false,
                    axisLabel: {
                        fontSize: 16
                    }
                },
                grid: {
                    left: "25px",
                    right: "25px"
                }
            };

            if (this.option1 && typeof option1 === 'object') {
                this.myChart1.setOption(this.option1);
            }
            window.addEventListener('resize', this.myChart1.resize);
        },
        addSerie(dates, capacities, planCapacities, differences) {
            this.option1.series = [];

            this.option1.xAxis.data = dates;

            var serie2 = {
                name: '产能',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        color: '#4472c4'
                    }
                },
                tooltip: {
                    formatter: (params) => this.getMonthDayData(params),
                    textStyle: {
                        "fontSize": 18
                    }
                },
                data: capacities
            }

            this.option1.series.push(serie2);

            var serie1 = {
                name: '目标产能',
                type: 'line',
                step: 'middle',
                itemStyle: {
                    normal: {
                        color: '#fddd60',
                        lineStyle: {
                            color: '#fddd60'
                        }
                    }
                },
                tooltip: {
                    formatter: (params) => this.getMonthDayData(params),
                    textStyle: {
                        "fontSize": 18
                    }
                },
                label: {
                    show: true
                },
                data: planCapacities
            }
            this.option1.series.push(serie1);

            var serie3 = {
                name: '差异',
                type: 'bar',
                stack: 'Total',
                itemStyle: {
                    normal: {
                        color: '#ff6e76'
                    }
                },
                tooltip: {
                    formatter: (params) => this.getMonthDayData(params),
                    textStyle: {
                        "fontSize": 18
                    }
                },
                label: {
                    show: true,
                    color: '#fff'
                },
                data: differences
            }

            this.option1.series.push(serie3);

            this.myChart1.setOption(this.option1, true);
            this.myChart1.resize();
        },
        getMonthDayData(params) {
            var rev = ''
            rev += '<div class="show">'
            rev += '日期: ' + this.newDates[params.dataIndex] + ' <br/>'
            rev += '目标产能: ' + this.planCapacities[params.dataIndex] + ' pcs<br/>'
            rev += '实际产能: ' + this.capacities[params.dataIndex] + ' pcs<br/>'
            if (this.differences[params.dataIndex] === "") {
                rev += '差异产能: ' + 0 + ' pcs<br/>'
            } else {
                rev += '差异产能: ' + this.differences[params.dataIndex] + ' pcs<br/>'
            }
            rev += '</div>'
            return rev
        },
        getMonthData() {
            let _this = this
            axios
                .get('/MonthModule/Difference/MonthOverview',
                    {
                        params: {
                            mark: _this.mark,
                            year: _this.year,
                            month: _this.month,
                            moduleType: _this.module,
                            lines: _this.lines
                        }
                    })
                .then(function (response) {
                    if (response.data !== null) {
                        _this.newDates = response.data.dates
                        _this.planCapacities = response.data.planCapacities
                        _this.capacities = response.data.capacities
                        _this.differences = response.data.differences
                        _this.addSerie(response.data.newDates, response.data.capacities,
                            response.data.planCapacities, response.data.differences)
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        }
    }
})