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

var vm = new Vue({
    el: '#app',
    data: {
        timer: null,
        title: "",
        statisticsTime: "",
        month: "",
        lastMonth: "",
        monthModuleTypeDtos: [],
        totals: [0, 0, 0]
    },
    mounted() {
        this.init()
        this.getModuleTypeOverviewByMark()
    },
    methods: {
        updateRemark(tId, modelId, year, month) {
            var str = $("#" + tId).val();
            axios
                .post('/Home/UpdateRemark',
                    {
                        Id: modelId,
                        Remark: str,
                        Year: parseInt(year),
                        Month: parseInt(month)
                    })
                .then(function (response) {
                    result = response.data;
                    if (result.code === 0) {
                        alert("保存成功！");
                    } else if (result.code === 1) {
                        alert(result.message);
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });

        },
        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';

            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);
        },
        refresh() {
            this.getModuleTypeOverviewByMark()
        },
        getModuleTypeOverview() {
            let _this = this
            axios
                .get('/Home/GetModuleTypeOverview')
                .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
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        getModuleTypeOverviewByMark() {
            let _this = this
            _this.totals[0] = 0;
            _this.totals[1] = 0;
            _this.totals[2] = 0;
            axios
                .get('/Home/GetModuleTypeOverviewByMark',
                    {
                        params: {
                            mark: $('#selectMark option:selected').val(),
                            year: $('#selectYear option:selected').val(),
                            month: $('#selectMonth option:selected').val()
                        }
                    })
                .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

                    if (_this.monthModuleTypeDtos !== undefined) {
                        for (var i = 0; i < _this.monthModuleTypeDtos.length; i++) {
                            _this.totals[0] += _this.monthModuleTypeDtos[i].planCapacity;
                            _this.totals[0] += _this.monthModuleTypeDtos[i].lastModuleCapacity;
                            _this.totals[1] += _this.monthModuleTypeDtos[i].capacity;
                        }
                        _this.totals[2] = _this.totals[1] - _this.totals[0];
                        if (_this.totals[2] > 0) {
                            _this.totals[2] = 0;
                        }
                    } 
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        jump(id, floor, line) {
            document.cookie = 'lineId=' + id
            document.cookie = 'lineName=' + floor + 'F ' + line + 'Line'
            document.cookie = 'action=' + 'Home'
            window.location.href = "/Line"
        },
        setTimer() {
            //if (this.timer == null) {
            //    this.timer = setInterval(() => {
            //        this.getProgramOfProduction()
            //    }, 60000)
            //}
        },
        clearTimer() {
            //clearInterval(this.timer)
            //this.timer = null
        },
        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.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.getModuleTypeOverviewByMark()
        }
    },
    filters: {
        dataTimeFormat: function (value) {
            return value.substr(11, 5)
        },
        blankSpaceFormat: function (value) {
            return value.replace('&nbsp;', '&nbsp;/&nbsp;')
        },
        modelSizeFormat: function (value) {
            let str;
            str = value.substr(0, 2) + "." + value(2, 1);
            return str;
        },
    },
    created: function () {
        this.clearTimer()
        this.setTimer()
    },
    destroyed: function () {
        this.clearTimer()
    }
})