ProductionLineMonitor/ProductionLineMonitor.Web/wwwroot/js/home/differenceV1.js

var vm = new Vue({
    el: '#app',
    data: {
        mark: "",
        module: "",
        year: "",
        month: "",
        modules: "",
        lines: "",
        newDates: [],
        planCapacities: [],
        capacities: [],
        differences: [],
        ms: [],
        ls: [],
        moduleType: "",
        keyInInfos: [],
        differenceInfos: [],
        line: 0,
        difference: 0,

        dom1: Object,
        myChart1: Object,
        option1: Object,

        dom2: Object,
        myChart2: Object,
        option2: Object
    },
    watch: {
        ms: function () {
            this.$nextTick(function () {
                $("input[name='optionsRadios'][value=" + this.moduleType + "]").prop("checked", true)
            });
        },
        ls: function () {
            this.$nextTick(function () {
                $("input[name='optionsRadios1'][value=" + this.line + "]").prop("checked", true)
            });
        }
    },
    mounted() {
        this.init()
        this.initEcharts()
        this.getMonthData()
        //this.getMonthDataByKeyin()
    },
    methods: {
        revert() {
            //window.open("/Home/V1", "home-v1");
            window.location.href = "/Home/V1";
        },
        onClickOptionsRadios() {
            let m = $("input[name='optionsRadios']:checked").val()
            if (m === "" || m === undefined) {
                m = "ALL"
            }
            this.moduleType = m

            let l = $("input[name='optionsRadios1']:checked").val()
            if (l === "" || l === undefined) {
                l = 0
            }
            this.line = l

            this.getMonthData()
        },
        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");
            this.modules = url.searchParams.get("module");
            this.moduleType = "ALL";
            this.ms = this.modules.split(",");
            this.ls = this.lines.split(",");
            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,
                        '目标产能': true,
                        '差异': 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);

            this.dom2 = document.getElementById('container1');
            this.myChart2 = echarts.init(this.dom2, 'dark');
            this.option2 = {
                backgroundColor: '#001529',
                legend: {
                    show: false,
                    left: 'right'
                },
                tooltip: {},
                xAxis: {
                    show: false,
                    axisLabel: {
                        fontSize: 16
                    }
                },
                textStyle: {
                    "fontSize": 14
                },
                yAxis: {
                    inverse: false,
                    show: false,
                    axisLabel: {
                        fontSize: 16
                    }
                },
                grid: {
                    top: "15px",
                    left: "25px",
                    right: "25px",
                    bottom: '25px',
                }
            };
            if (this.option2 && typeof option2 === 'object') {
                this.myChart2.setOption(this.option2);
            }
            window.addEventListener('resize', this.myChart2.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: {
                            width: 3
                        }
                    }
                },
                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();
        },
        addSerie2(dates, linePlans) {
            this.option2.series = [];
            this.option2.xAxis.data = dates;
            for (let i = 0; i < linePlans.length; i++) {
                let x = linePlans[i].start + 0.5;
                let y = i + 1;
                let ds = [];
                for (let j = 0; j < linePlans[i].planDates.length; j++) {
                    if (linePlans[i].planDates[j] === "") {
                        ds[j] = ""
                    } else {
                        ds[j] = parseInt(linePlans[i].planDates[j]) + i
                    }
                }
                let serie = {
                    name: linePlans[i].line,
                    type: 'line',
                    step: 'middle',
                    showSymbol: false,
                    itemStyle: {
                        normal: {
                            color: 'rgba(74,125,215,0.6)',
                            lineStyle: {
                                width: 35
                            }
                        }
                    },
                    markPoint: {
                        data: [{
                            coord: [x, y],
                            symbol: 'rect',
                            symbolSize: [30, 0],
                            animation: true,
                            label: {
                                show: true,
                                formatter: linePlans[i].line + " Line"
                            },
                            tooltip: {
                                formatter: linePlans[i].line + 'Line Plan: ' + linePlans[i].planCapacity + ' pcs',
                                textStyle: {
                                    "fontSize": 18
                                }
                            }
                        }]
                    },
                    data: ds
                }
                this.option2.series.push(serie);
            }
            this.myChart2.setOption(this.option2, true);
            this.myChart2.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
            if (_this.moduleType === "") {
                _this.moduleType = "ALL"
            }
            axios
                .get('/v1/MonthModule/Difference/MonthOverview',
                    {
                        params: {
                            mark: _this.mark,
                            year: _this.year,
                            month: _this.month,
                            moduleType: _this.moduleType,
                            lines: _this.lines,
                            moduleTypes: _this.module,
                            line: _this.line
                        }
                    })
                .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);
                        _this.addSerie2(response.data.newDates, response.data.linePlans);
                        _this.keyInInfos = response.data.keyInInfos;
                        _this.differenceInfos = response.data.differenceInfos;
                        _this.difference = response.data.difference;
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        getMonthDataByKeyin() {
            let _this = this
            axios
                .get('/v1/MonthModule/Difference/Keyin',
                    {
                        params: {
                            mark: _this.mark,
                            year: _this.year,
                            month: _this.month,
                            lines: _this.lines
                        }
                    })
                .then(function (response) {
                    if (response.data !== null) {
                        _this.keyInInfos = response.data;
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        }
    }
})