ProductionLineMonitor/ProductionLineMonitor.Web/wwwroot/js/home/home-v1.js

var vm = new Vue({
    el: '#app',
    data: {
        title: "",
        statisticsTime: "",
        month: "",
        lastMonth: "",
        monthModuleTypeDtos: [],
        v1s: [],
        v1sBackup: [],
        pMark: "",
        pYear: 0,
        pMonth: 0,
        totals: [0, 0, 0],
        modelPrefixs: [],
        lines: [],
        diffs: [0, 0, 0],
        modelSizes: [],

        modelPrefix: "All",
        modelSize: "All",
        line: "All",
        order: "0"
    },
    mounted() {
        this.init()
        this.getModuleTypeOverviewByMark()
    },
    watch: {
        lines: function () {
            this.$nextTick(function () {
                if (this.modelPrefix === "undefined" || this.modelPrefix === "") {
                    this.modelPrefix = "All";
                }
                $("#selectModelPrefix").val(this.modelPrefix);
                if (this.modelSize === "undefined" || this.modelSize === "") {
                    this.modelSize = "";
                }
                $("#selectModelSize").val(this.modelSize);
                if (this.line === "undefined" || this.line === "") {
                    this.line = "All";
                }
                $("#selectLine").val(this.line);
                this.onClickFilter();
                this.sort(this.order);
            });
        }
    },
    methods: {
        onHref(url) {
            window.location.href = url;
        },
        init() {
            let width = document.body.clientWidth - 120;
            let homeTop = document.querySelector("#homeTop");
            let homeTable1 = document.querySelector("#homeTable1");
            let homeTable2 = document.querySelector("#homeTable2");
            homeTop.style.width = width + 'px';
            homeTable1.style.width = width + 'px';
            homeTable2.style.width = width + 'px';

            this.readCookie();

            if (this.pYear == 0 || this.pMonth == 0 || this.pYear == "undefined" || this.pMonth == "undefined") {
                let now = new Date();
                let nowYear = now.getFullYear();
                let nowMonth = now.getMonth() + 1;
                let nowDay = now.getDate();

                if (nowMonth >= 12) {
                    nowYear++;
                }

                if (nowDay >= 21) {
                    nowMonth++
                    if (nowMonth > 12) {
                        nowMonth = 1;
                    }
                }

                $("#selectYear").val(nowYear);
                $("#selectMonth").val(nowMonth);

                this.pYear = nowYear;
                this.pMonth = nowMonth;
                this.writeCookie();
            } else {
                $("#selectMark").val(this.pMark);
                $("#selectYear").val(this.pYear);
                $("#selectMonth").val(this.pMonth); 
            }
            
        },
        refresh() {
            this.writeCookie();
            this.getModuleTypeOverviewByMark()
        },
        getModuleTypeOverviewByMark() {
            let _this = this
            this.readCookie();
            axios
                .get('/Home/GetModuleTypeOverviewByMarkV1',
                    {
                        params: {
                            mark: _this.pMark,
                            year: _this.pYear,
                            month: _this.pMonth
                        }
                    })
                .then(function (response) {
                    _this.title = response.data.title
                    _this.statisticsTime = response.data.statisticsTime
                    _this.month = response.data.month
                    _this.lastMonth = response.data.lastMonth
                    _this.monthModuleTypeDtos = response.data.monthModuleTypeDtos
                    _this.v1s = response.data.monthModuleTypeDtosV1s
                    _this.v1sBackup = _this.v1s

                    _this.initModelPrefixs()
                    _this.initModelSizes()
                    _this.initLines()

                    if (_this.v1s !== undefined) {
                        _this.totals[0] = 0;
                        _this.totals[1] = 0;
                        _this.totals[2] = 0;

                        for (var i = 0; i < _this.v1s.length; i++) {
                            _this.totals[0] += _this.v1s[i].planCapacity;
                            _this.totals[0] += _this.v1s[i].lastModuleCapacity;
                            _this.totals[1] += _this.v1s[i].capacity;
                        }
                        _this.totals[2] = _this.totals[1] - _this.totals[0];
                    } 

                    _this.cdiffs()

                    
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        lastMonthClick() {
            let year = $('#selectYear option:selected').val()
            let minYear = $('#selectYear option:first').val()
            let month = $('#selectMonth option:selected').val()
            month--
            if (month === 0) {
                month = 12
                year--
                if (year < minYear) {
                    year = minYear
                }
            }
            $("#selectYear").val(year)
            $("#selectMonth").val(month)
            this.writeCookie();
            this.getModuleTypeOverviewByMark()
        },
        nextMonthClick() {
            let year = $('#selectYear option:selected').val()
            let maxYear = $('#selectYear option:last').val()
            let month = $('#selectMonth option:selected').val()
            month++
            if (month === 13) {
                month = 1
                year++
                if (year > maxYear) {
                    year = maxYear
                }
            }
            $("#selectYear").val(year)
            $("#selectMonth").val(month)
            this.writeCookie();
            this.getModuleTypeOverviewByMark()
        },
        writeCookie() {
            document.cookie = 'pMark=' + $('#selectMark option:selected').val();
            document.cookie = 'pYear=' + $('#selectYear option:selected').val();
            document.cookie = 'pMonth=' + $('#selectMonth option:selected').val()
            document.cookie = 'pOrder=' + this.order;
            document.cookie = 'pModelPrefix=' + $('#selectModelPrefix option:selected').val()
            document.cookie = 'pModelSize=' + $("#selectModelSize").val();
            document.cookie = 'pLine=' + $('#selectLine option:selected').val()
        },
        readCookie() {
            this.pMark = document.cookie.replace(/(?:(?:^|.*;\s*)pMark\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            this.pYear = document.cookie.replace(/(?:(?:^|.*;\s*)pYear\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            this.pMonth = document.cookie.replace(/(?:(?:^|.*;\s*)pMonth\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            let order = document.cookie.replace(/(?:(?:^|.*;\s*)pOrder\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            this.order = parseInt(order);
            this.modelPrefix = document.cookie.replace(/(?:(?:^|.*;\s*)pModelPrefix\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            this.modelSize = document.cookie.replace(/(?:(?:^|.*;\s*)pModelSize\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            this.line = document.cookie.replace(/(?:(?:^|.*;\s*)pLine\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        },
        sort(order) {
            this.order = order;
            this.writeCookie();
            if (order === 0) {
                this.v1s.sort(function (a, b) {
                    return (b.planCapacity + b.lastModuleCapacity) - (a.planCapacity + a.lastModuleCapacity);
                });
            }
            if (order === 1) {
                this.v1s.sort(function (a, b) {
                    return b.difference - a.difference;
                });
            }
            if (order === 2) {
                this.v1s.sort(function (a, b) {
                    return a.difference - b.difference;
                });
            }
            if (order === 3) {
                this.v1s.sort(function (a, b) {
                    return (b.planCapacity + b.lastModuleCapacity) - (a.planCapacity + a.lastModuleCapacity);
                });
            }
            if (order === 4) {
                this.v1s.sort(function (a, b) {
                    return (a.planCapacity + a.lastModuleCapacity) - (b.planCapacity + b.lastModuleCapacity);
                });
            }
        },
        planSort(order) {
            this.order = order;
            this.writeCookie();
            if (order === 1) {
                this.v1s.sort(function (a, b) {
                    return (b.planCapacity + b.lastModuleCapacity) - (a.planCapacity + a.lastModuleCapacity);
                });
            }
            if (order === 2) {
                this.v1s.sort(function (a, b) {
                    return (a.planCapacity + a.lastModuleCapacity) - (b.planCapacity + b.lastModuleCapacity);
                });
            }
        },
        onClickFilter() {
            let modelPrefix = $("#selectModelPrefix").val();
            let modelSize = $("#selectModelSize").val();
            let line = $("#selectLine").val();

            var ms = [];
            for (var i = 0; i < this.v1sBackup.length; i++) {
                ms.push(this.v1sBackup[i])
            }

            if (modelPrefix != "All") {
                for (var i = 0; i < ms.length; i++) {
                    var len = modelPrefix.length;
                    if (ms[i].models[0].substring(0, len) != modelPrefix) {
                        ms.splice(i, 1);
                        i--;
                    }
                }
            }

            if (modelSize != "All") {
                ms = this.fuzzyQuery(ms, modelSize);
            }

            switch (line) {
                case "All":
                    break;
                case "待排配":
                    for (var i = 0; i < ms.length; i++) {
                        if (ms[i].lines.length > 0) {
                            ms.splice(i, 1);
                            i--;
                        }
                    }
                    break;
                default:
                    for (var i = 0; i < ms.length; i++) {
                        var b = false;
                        for (var j = 0; j < ms[i].lines.length; j++) {
                            if (ms[i].lines[j].line.toString() === line) {
                                b = true;
                                break;
                            }
                        }
                        if (b === false) {
                            ms.splice(i, 1);
                            i--;
                        }
                    }
            }

            this.writeCookie();

            this.v1s = ms;
        },
        fuzzyQuery(list, keyWord) {
            var arr = [];
            for (var i = 0; i < list.length; i++) {
                if (list[i].models[0].substring(0, 5).indexOf(keyWord) >= 0) {
                    arr.push(list[i]);
                }
            }
            return arr;
        },
        initModelPrefixs() {
            var ms = ["All"];
            for (var i = 0; i < this.v1sBackup.length; i++) {
                var len = 2;
                var modelPrefix = this.v1sBackup[i].models[0].substring(0, len);
                switch (modelPrefix) {
                    case "GT":
                        if (this.v1sBackup[i].models[0].substring(0, 4) === "GTP-") {
                            if (ms.indexOf("GTP") === -1) {
                                ms.push("GTP");
                            }
                        }
                        break;
                    case "FT":
                        if (this.v1sBackup[i].models[0].substring(0, 4) === "FTP-") {
                            if (ms.indexOf("FTP") === -1) {
                                ms.push("FTP");
                            }
                        }
                        break;
                    default:
                        if (ms.indexOf(modelPrefix) === -1) {
                            ms.push(modelPrefix)
                        }
                }
            }
            this.modelPrefixs = ms;
        },
        initModelSizes() {
            var ms = ["All"];
            for (var i = 0; i < this.v1sBackup.length; i++) {
                var modelPrefix = this.v1sBackup[i].models[0].substring(0, 2);
                switch (modelPrefix) {
                    case "GT":
                        if (this.v1sBackup[i].models[0].substring(0, 4) === "GTP-") {
                            let s = this.v1sBackup[i].models[0].substring(6, 9);
                            if (ms.indexOf(s) === -1) {
                                ms.push(s);
                            }
                        }
                        break;
                    case "FT":
                        if (this.v1sBackup[i].models[0].substring(0, 4) === "FTP-") {
                            let s = this.v1sBackup[i].models[0].substring(6, 9);
                            if (ms.indexOf(s) === -1) {
                                ms.push(s);
                            }
                        }
                        break;
                    default:
                        let s = this.v1sBackup[i].models[0].substring(2, 5);
                        if (ms.indexOf(s) === -1) {
                            ms.push(s);
                        }
                }
            }
            this.modelSizes = ms;
        },
        initLines() {
            var ms = ["All"];
            if (this.pMark === "2F") {
                for (var i = 1; i <= 12; i++) {
                    ms.push(i)
                }
            }
            if (this.pMark === "1F") {
                for (var i = 1; i <= 6; i++) {
                    ms.push(i)
                }
            }
            ms.push("待排配")
            this.lines = ms;
        },
        cdiffs() {
            this.diffs = [0, 0, 0];
            for (var i = 0; i < this.v1s.length; i++) {
                if (this.v1s[i].difference > 0) {
                    this.diffs[0] += this.v1s[i].difference;
                } else {
                    this.diffs[1] += this.v1s[i].difference;
                }
                this.diffs[2] += this.v1s[i].difference;
            }
        }
    }
})