ProductionLineMonitor/ProductionLineMonitor.Web/wwwroot/js/line/line.js

var vm = new Vue({
    el: '#app',
    data: {
        lineName:"",
        date: "",
        moduleType: "",
        moduleTypes: [],
        lineModuleType: "",
        isLine: false,
        lineOverViews: [],
        lineData: {},
        lineKeyFaults: [],
        selectId: "",
        lines: [],
        lineFault: [],
        lineMorningAccumulatedFault: [],
        lineNightAccumulatedFault: [],
        MorningCapacity: 0,
        NightCapacity: 0,
        TotalCapacity: 0,

        dom: Object,
        myChart: Object,
        option: Object,

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

        dom2: Object,
        myChart2: Object,
        option2: Object,

        monthTitle: "",
        dates: [],
        newDates: [],
        planCapacities: [],
        capacities: [],
        differences: [],
        accumulatedDifferences: [],
        accumulatedDifference: 0
    },
    created() {
        this.getLines()
    },
    mounted() {
        this.init()
        this.initDatepicker()
        this.initCapacityEcharts()
        this.initData()
        this.initMonthDataEcharts()
    },
    watch: {
        moduleTypes: function () {
            this.$nextTick(function () {
                $("input[name='optionsRadios'][value=" + this.lineModuleType + "]").prop("checked", true)
            });
        }
    },
    methods: {
        init() {
            let width = document.body.clientWidth - 120;
            let homeTable1 = document.querySelector("#homeTable1");
            let homeTable2 = document.querySelector("#homeTable2");
            homeTable1.style.width = width + 'px';
            homeTable2.style.width = width + 'px';
        },
        onClickOptionsRadios() {
            let moduleType = $("input[name='optionsRadios']:checked").val()
            if (moduleType === "" || moduleType === undefined) {
                moduleType = "ALL"
            }
            this.lineModuleType = moduleType
            document.cookie = 'lineModuleType=' + moduleType
            this.getLineMonthData()
        },
        initMonthDataEcharts() {
            this.dom2 = document.getElementById('container3');
            this.myChart2 = echarts.init(this.dom2, 'dark');
            this.option2 = {
                backgroundColor: '#001529',
                legend: {
                    show: false,
                    left: 'right'
                },
                tooltip: {
                },
                xAxis: {
                    /*   type: 'value',*/
                    show: false,
                    axisLabel: {
                        fontSize: 16
                    }
                },
                textStyle: {
                    "fontSize": 14
                },
                yAxis: {
                    /*type: 'category',*/
                    inverse: false,
                    show: false,
                    axisLabel: {
                        fontSize: 16
                    },
                    max: 3
                },
                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);

            this.dom1 = document.getElementById('container2');
            this.myChart1 = echarts.init(this.dom1, 'dark');
            this.option1 = {
                backgroundColor: '#001529',
                legend: {
                    show: true,
                    left: 'right',
                    padding: [0, 20, 15, 10],
                    selected: {
                        '产能': true,
                        '目标产能': true,
                        '差异': true,
                        '累计差异': false
                    }
                },
                tooltip: {},
                xAxis: {
                    axisLabel: {
                        fontSize: 16
                    }
                },
                textStyle: {
                    "fontSize": 16
                },
                yAxis: {
                    show: false,
                    axisLabel: {
                        fontSize: 16
                    }
                },
                grid: {
                    left: "25px",
                    right: "25px",
                    bottom: '40px',
                }
            };

            this.myChart1.on('click', (params) => this.onClickMonthData(params));

            if (this.option1 && typeof option1 === 'object') {
                this.myChart1.setOption(this.option1);
            }
            window.addEventListener('resize', this.myChart1.resize);

            
        },
        addMonthData(dates, planCapacities, capacities, differences, accumulatedDifferences) {
            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',
                showSymbol: true,
                itemStyle: {
                    normal: {
                        color: '#fddd60',
                        lineStyle: {
                            width: 2
                        }
                    }
                },
                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);

            //var serie4 = {
            //    name: '累计差异',
            //    type: 'line',
            //    itemStyle: {
            //        normal: {
            //            color: '#ed7d31'
            //        }
            //    },
            //    label: {
            //        show: true
            //    },
            //    tooltip: {
            //        formatter: (params) => this.getMonthDayData(params),
            //        textStyle: {
            //            "fontSize": 18
            //        }
            //    },
            //    data: accumulatedDifferences
            //}

            //this.option1.series.push(serie4);

            this.myChart1.setOption(this.option1, true);
            this.myChart1.resize();
        },
        addMonthDataPlan(datas, series) {
            this.option2.series = [];

            this.option2.xAxis.data = datas;

            for (var i = 0; i < series.length; i++) {
                var x = 0;
                var ds = [];
                var y = i % 3;
                for (var j = 0; j < series[i].values.length; j++) {
                    if (series[i].values[j] === "") {
                        ds[j] = ""
                    } else {
                        ds[j] = parseInt(series[i].values[j]) + y
                    }  
                    x = series[i].start;
                }
                if (x === 0) {
                    x += 0.5
                } else if (x === series[i].values.length - 1) {

                } else {
                    x += 0.5
                }
                var serie = {
                    name: series[i].name,
                    type: 'line',
                    step: 'middle',
                    showSymbol: false,
                    itemStyle: {
                        normal: {
                            color: 'rgba(74,125,215,0.6)',
                            lineStyle: {
                                width: 35
                            }
                        }
                    },
                    markPoint: {
                        data: [{
                            coord: [x, y + 1],
                            symbol: 'rect',
                            symbolSize: [30, 0],
                            animation: true,
                            label: {
                                show: true,
                                formatter: series[i].name
                            },
                            tooltip: {
                                formatter: series[i].name + ' Plan: ' + series[i].planCapacities + ' 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 += '累计差异: ' + this.accumulatedDifferences[params.dataIndex] + ' pcs<br/>'
            rev += '</div>'
            return rev
        },
        onClickMonthData(params) {
            var d = new Date(this.dates[params.dataIndex])
            $("#date").val(d).datepicker('setDate', d)
            this.getData()
        },
        initData() {
            let cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)lineId\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            let cookieValueLineName = document.cookie.replace(/(?:(?:^|.*;\s*)lineName\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            let cookieLineModuleType = document.cookie.replace(/(?:(?:^|.*;\s*)lineModuleType\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            if (cookieValue != "") {
                this.selectId = cookieValue
                this.lineName = cookieValueLineName
                this.lineModuleType = cookieLineModuleType
            } else {
                this.selectId = "00000000-0000-0000-0000-000000000000"
                this.lineName = "总览"
            }
            this.getData()
        },
        getLineOverview() {
            let _this = this
            axios
                .get(
                    '/Line/GetLineOverviewV1',
                    {
                        params: {
                            date: $("#date").val()
                        }
                    }
                )
                .then(function (response) {
                    _this.lineOverViews = response.data
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        initDatepicker() {
            $("#date").datepicker({
                format: 'yyyy-mm-dd',
                language: "zh-CN",
                autoclose: true,
                todayBtn: "linked"
            }).on('changeDate',
                () => this.selectDatepicker()
            ).on('keydown', function (e) {
                return false;
            })
        },
        onClickCell(id, moduleType) {
            this.selectId = id
            $("#Line").val(id)
            this.lineName = $('#Line option:selected').text();
            document.cookie = 'lineId=' + id
            document.cookie = 'lineName=' + this.lineName
            document.cookie = 'action='

            //document.cookie = 'lineModuleType=' + moduleType
            //this.lineModuleType = moduleType;

            document.cookie = 'lineModuleType=' + 'ALL'
            this.lineModuleType = 'ALL';

            this.getData()
            this.getLineMonthData()
        },
        returnOverview() {
            let cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)lineId\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            let cookieValueLineName = document.cookie.replace(/(?:(?:^|.*;\s*)lineName\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            let action = document.cookie.replace(/(?:(?:^|.*;\s*)action\s*\=\s*([^;]*).*$)|^.*$/, "$1");

            if (action === 'Home') {
                window.location.href = "/Home";
            } else {
                this.selectId = '00000000-0000-0000-0000-000000000000'
                $("#Line").val(this.selectId)
                this.lineName = $('#Line option:selected').text();
                document.cookie = 'lineId=' + this.selectId
                document.cookie = 'lineName=' + this.lineName
                document.cookie = 'action='
                document.cookie = 'lineModuleType='
                this.getData()
            }
        },
        selectDatepicker(e) {
            this.getData()
        },
        initCapacityEcharts() {
            this.dom = document.getElementById('container1');
            this.myChart = echarts.init(this.dom, 'dark');
            this.option = {
                backgroundColor: '#001529',
                legend: {
                    left: 'right',
                    data: ["早班", "夜班", "目标产能", "差异"]
                },
                tooltip: {},
                xAxis: {
                    data: [
                        "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19",
                        "20", "21", "22", "23", "00", "01", "02", "03", "04", "05", "06", "07"],
                    axisLabel: {
                        fontSize: 16
                    }
                },
                textStyle: {
                    "fontSize": 16
                },
                yAxis: {
                    show: false,
                    axisLabel: {
                        fontSize: 16
                    }
                },
                grid: {
                    left: "25px",
                    right: "25px"
                }
            };
            if (this.option && typeof option === 'object') {
                this.myChart.setOption(this.option);
            }
            window.addEventListener('resize', this.myChart.resize);
        },
        addHourCapacityAndCapa(data, tData) {

            this.MorningCapacity = this.sum(data.slice(0, 12))
            this.NightCapacity = this.sum(data.slice(12, 24))
            this.TotalCapacity = this.MorningCapacity + this.NightCapacity

            this.option.series = [];
            var serie1 = {
                name: '早班',
                type: 'bar',
                stack: 'Total',
                tooltip: {
                    formatter: (params) => this.getHourData(params, ""),
                    textStyle: {
                        "fontSize": 18
                    }
                },
                label: {
                    show: true
                },
                data: data.slice(0, 12)
            }
            this.option.series.push(serie1);
            data1 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
            for (var i = 12; i < 24; i++) {
                data1.push(data[i])
            }
            var serie2 = {
                name: '夜班',
                type: 'bar',
                stack: 'Total',
                tooltip: {
                    formatter: (params) => this.getHourData(params, ""),
                    textStyle: {
                        "fontSize": 18
                    }
                },
                label: {
                    show: true
                },
                data: data1
            }
            this.option.series.push(serie2);
            var serie3 = {
                name: '目标产能',
                type: 'line',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + " pcs";
                    }
                },
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 3
                        }
                    }
                },
                data: tData
            }
            this.option.series.push(serie3);

            data2 = [];
            for (var i = 0; i < tData.length; i++) {
                var temp = tData[i] - data[i]
                if (temp > 0) {
                    data2.push(temp)
                } else {
                    data2.push('-')
                }
            }
            var serie4 = {
                name: '差异',
                type: 'bar',
                stack: 'Total',
                tooltip: {
                    formatter: (params) => this.getHourData(params, "差异"),
                    textStyle: {
                        "fontSize": 18
                    }
                },
                label: {
                    show: true
                },
                data: data2
            }
            this.option.series.push(serie4);

            this.myChart.setOption(this.option, true);
            this.myChart.resize();
        },
        getHourData(params, serieName) {
            var rev = ''
            rev += '<div class="show">'
            rev += serieName + '产能: ' + params.value + ' pcs<br/>'

            rev += '<br/>'

            var idelTime = 0;
            if (this.lineData.hourKeyInInfos !== undefined) {
                for (var i = 0; i < this.lineData.hourKeyInInfos.length; i++) {
                    var h = this.lineData.hourKeyInInfos[i].startTime.substring(11, 13)
                    if (h == params.name) {
                        idelTime += this.lineData.hourKeyInInfos[i].affectTime
                    }
                }
            }
            rev += '<strong>Idel - ' + idelTime.toFixed(0) + 'min</strong><br/>'

            if (this.lineData.hourKeyInInfos !== undefined) {
                for (var i = 0; i < this.lineData.hourKeyInInfos.length; i++) {
                    var h = this.lineData.hourKeyInInfos[i].startTime.substring(11, 13)
                    if (h == params.name) {
                        rev += this.lineData.hourKeyInInfos[i].keyInTypeName + ', '
                            + this.lineData.hourKeyInInfos[i].description + ', '
                            + this.lineData.hourKeyInInfos[i].affectTime.toFixed(0)
                            + 'min<br/>'
                    }
                }
            }

            rev += '<br/>'

            var downTime = 0;
            if (this.lineFault !== undefined) {
                for (var i = 0; i < this.lineFault.length; i++) {
                    var h = this.lineFault[i].startTime.substring(11, 13)
                    if (h == params.name) {
                        downTime += this.lineFault[i].duration
                    }
                }
            }
            rev += '<strong>Down - ' + downTime.toFixed(0) + ' min</strong><br/>'
            if (this.lineFault !== undefined) {
                for (var i = 0; i < this.lineFault.length; i++) {
                    var h = this.lineFault[i].startTime.substring(11, 13)
                    if (h == params.name) {
                        if (this.lineFault[i].duration.toFixed(0) !== '0') {
                            rev += this.lineFault[i].machineType + ', '
                                + this.lineFault[i].faultInfo + ', '
                                + this.lineFault[i].duration.toFixed(0)
                                + 'min, '
                            if (this.lineFault[i].dataSource === 0) {
                                rev += "自动上抛<br/>"
                            } else {
                                rev += "人工录入<br/>"
                            }
                        }
                    }
                }
            }

            rev += '</div>'
            return rev
        },
        sum(arr) {
            var sum = 0
            for (var i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            return sum
        },
        getData() {
            if (this.selectId === '00000000-0000-0000-0000-000000000000') {
                $("#overview").attr("class", "tab-pane active")
                $("#line").attr("class", "tab-pane")
                this.getLineOverview()
                this.date = $("#date").val()
                this.isLine = false
            } else {
                $("#overview").attr("class", "tab-pane")
                $("#line").attr("class", "tab-pane active")
                this.getLineData()
                this.getLineFault()
                this.getLineMorningAccumulatedFault()
                this.getLineNightAccumulatedFault()
                this.getLineMonthData()
                this.date = $("#date").val()
                this.isLine = true
            }
        },
        getLineData() {
            this.lineData = {}
            /* this.initCapacityEcharts()*/
            let _this = this
            axios
                .get(
                    '/Line/GetLineData',
                    {
                        params: {
                            lineId: _this.selectId,
                            date: $("#date").val()
                        }
                    }
                )
                .then(function (response) {
                    if (response.data !== null) {
                        _this.lineData = response.data

                        _this.moduleType = ""

                        for (var i = 0; i < _this.lineData.statistics.length; i++) {
                            _this.moduleType += _this.lineData.statistics[i].moduleType + " "
                        }

                        var data = []
                        var tData = []

                        for (var i = 0; i < _this.lineData.newOutPutPerHours.length; i++) {
                            data.push(_this.lineData.newOutPutPerHours[i].outPut)
                        }

                        for (var i = 0; i < _this.lineData.newOutPutPerHours.length; i++) {
                            if (_this.lineData.newOutPutPerHours[i].moduleType === "") {
                                tData.push("")
                            } else {
                                var b = false
                                for (var j = 0; j < _this.lineData.productionPlans.length; j++) {
                                    if (_this.lineData.newOutPutPerHours[i].moduleType.substr(0, 8)
                                        === _this.lineData.productionPlans[j].moduleType.substr(0, 8)) {
                                        tData.push((_this.lineData.productionPlans[j].capa / 24).toFixed(0))
                                        b = true
                                        break;
                                    }
                                }
                                if (b == false) {
                                    tData.push("")
                                }
                            }
                        }

                        _this.addHourCapacityAndCapa(data, tData)
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        getLines() {
            let _this = this
            axios
                .get('/ProductionLine/GetProductionLines')
                .then(function (response) {
                    if (response.data !== null) {
                        _this.lines = response.data.data

                        _this.$nextTick(() => {
                            $("#Line").prepend("<option value='00000000-0000-0000-0000-000000000000'>总览</option>");
                            $("#Line").val(_this.selectId)
                        })
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        select(event) {
            this.selectId = event.target.value
            this.lineName = $('#Line option:selected').text();
            document.cookie = 'lineId=' + this.selectId
            document.cookie = 'lineName=' + this.lineName
            document.cookie = 'lineModuleType=' + 'ALL';
            this.lineModuleType = "ALL";
            this.getData()
        },
        getLineKeyFaults() {
            this.lineKeyFaults = []
            let _this = this
            axios
                .get(
                    '/Line/GetKeyFaults',
                    {
                        params: {
                            id: _this.selectId,
                            date: $("#date").val()
                        }
                    }
                )
                .then(function (response) {
                    if (response.data !== null) {
                        _this.lineKeyFaults = response.data
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        getLineFault() {
            this.lineFault = []
            let _this = this
            axios
                .get(
                    '/Line/GetLineFault',
                    {
                        params: {
                            lineId: _this.selectId,
                            date: $("#date").val(),
                            durationThreshold: 3
                        }
                    }
                )
                .then(function (response) {
                    if (response.data !== null) {
                        _this.lineFault = response.data
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        getLineMorningAccumulatedFault() {
            this.LineMorningAccumulatedFault = []
            let _this = this
            axios
                .get(
                    '/Line/GetLineAccumulatedFaultByMorning',
                    {
                        params: {
                            lineId: _this.selectId,
                            date: $("#date").val()
                        }
                    }
                )
                .then(function (response) {
                    if (response.data !== null) {
                        _this.lineMorningAccumulatedFault = response.data
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        getLineNightAccumulatedFault() {
            this.lineNightAccumulatedFault = []
            let _this = this
            axios
                .get(
                    '/Line/GetLineAccumulatedFaultByNight',
                    {
                        params: {
                            lineId: _this.selectId,
                            date: $("#date").val()
                        }
                    }
                )
                .then(function (response) {
                    if (response.data !== null) {
                        _this.lineNightAccumulatedFault = response.data
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        getFloorOverview(floor) {
            var data = []
            for (var i = 0; i < this.lineOverViews.length; i++) {
                if (this.lineOverViews[i].floor == floor) {
                    data.push(this.lineOverViews[i])
                }
            }
            return data
        },
        nextDay() {
            var date = new Date($("#date").val())
            var d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() + 1)
            $("#date").val(d).datepicker('setDate', d)
        },
        lastDay() {
            var date = new Date($("#date").val())
            var d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() - 1)
            $("#date").val(d).datepicker('setDate', d)
        },
        getLineMonthData() {
            if (this.selectId !== '00000000-0000-0000-0000-000000000000') {
                let _this = this
                axios
                    .get(
                        '/Line/GetMonthData',
                        {
                            params: {
                                lineId: _this.selectId,
                                date: $("#date").val(),
                                moduleType: _this.lineModuleType
                            }
                        }
                    )
                    .then(function (response) {
                        _this.monthTitle = response.data.monthTitle;
                        _this.dates = response.data.dates;
                        _this.newDates = response.data.newDates;
                        _this.planCapacities = response.data.planCapacities;
                        _this.capacities = response.data.capacities;
                        _this.differences = response.data.differences;
                        _this.accumulatedDifferences = response.data.accumulatedDifferences;
                        _this.accumulatedDifference = response.data.accumulatedDifference;
                        _this.moduleTypes = response.data.moduleTypes;

                        _this.addMonthData(response.data.newDates, response.data.planCapacities,
                            response.data.capacities, response.data.differences,
                            response.data.accumulatedDifferences)
                        _this.addMonthDataPlan(response.data.newDates, response.data.series)
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            }
        },
        sort() {
            var iconName = $("#sortSpan").attr("class");
            switch (iconName) {
                case "glyphicon glyphicon-sort-by-alphabet":
                    this.lineOverViews.sort(function (a, b) {
                        return b.achievementRate - a.achievementRate;
                    });
                    $("#sortSpan").attr("class", "glyphicon glyphicon-sort-by-attributes-alt")
                    break;
                case "glyphicon glyphicon-sort-by-attributes-alt":
                    this.lineOverViews.sort(function (a, b) {
                        return a.achievementRate - b.achievementRate;
                    });
                    $("#sortSpan").attr("class", "glyphicon glyphicon-sort-by-attributes");
                    break;
                case "glyphicon glyphicon-sort-by-attributes":
                    this.lineOverViews.sort(function (a, b) {
                        return a.line - b.line;
                    });
                    this.lineOverViews.sort(function (a, b) {
                        return b.floor - a.floor;
                    });
                    $("#sortSpan").attr("class", "glyphicon glyphicon-sort-by-alphabet");
                    break;
            }
        },
        jumpEyz() {
            this.selectId = '00000000-0000-0000-0000-000000000000'
            $("#Line").val(this.selectId)
            this.lineName = $('#Line option:selected').text();
            document.cookie = 'lineId=' + this.selectId
            document.cookie = 'lineName=' + this.lineName
            document.cookie = 'action='
            document.cookie = 'lineModuleType='
            window.location.href = "http://eyz2rp3.toc.eink.com/ERS/#/Home/IndexPage";
        },
        ExportineAccumulatedFaultByMorning() {
            let _this = this
            window.open("/Line/ExportineAccumulatedFaultByMorning?lineId="
                + _this.selectId + "&date=" + $("#date").val());
        },
        ExportineAccumulatedFaultByNight() {
            let _this = this
            window.open("/Line/ExportineAccumulatedFaultByNight?lineId="
                + _this.selectId + "&date=" + $("#date").val());
        },
        jumpNextMonth() {
            let currentDate = new Date();
            let nextMonth = currentDate.getMonth() + 1;
            let nextMonthDay = currentDate.getDate(); 
            if (nextMonth === 13) {
                nextMonth = 0;
            }
            currentDate.setMonth(nextMonth);
            currentDate.setDate(nextMonthDay);  
            $("#date").val(currentDate).datepicker('setDate', currentDate);
        },
        jumpTheSameDay() {
            let currentDate = new Date();
            $("#date").val(currentDate).datepicker('setDate', currentDate);
        }
    },
    filters: {
        dataTimeFormat: function (value) {
            return value.substr(11, 5)
        },
        dataTimeFormatV1: function (value) {
            return value.substr(0, 19)
        },
        dataTimeFormatV2: function (value) {
            return value.substr(5, 2) + "/" + value.substr(8, 2) + ' ' + value.substr(11, 5)
        }
    },
    computed: {
        getKeyInInfoAffectTime() {
            var keyInInfoAffectTime = 0
            if (this.lineData.keyInInfos !== undefined) {
                for (var i = 0; i < this.lineData.keyInInfos.length; i++) {
                    keyInInfoAffectTime += this.lineData.keyInInfos[i].affectTime
                }
            }
            return keyInInfoAffectTime
        },
        getKeyInInfoAffectTime_8() {
            var keyInInfoAffectTime = 0
            if (this.lineData.keyInInfos !== undefined) {
                for (var i = 0; i < this.lineData.keyInInfos.length; i++) {
                    if (this.lineData.keyInInfos[i].keyInType == 8) {
                        keyInInfoAffectTime += this.lineData.keyInInfos[i].affectTime
                    }
                }
            }
            return keyInInfoAffectTime
        },
        getKeyInInfoAffectTime_8_morning() {
            var keyInInfoAffectTime = 0
            if (this.lineData.morningReplaceConsumables !== undefined) {
                for (var i = 0; i < this.lineData.morningReplaceConsumables.length; i++) {
                    keyInInfoAffectTime += this.lineData.morningReplaceConsumables[i].accumulativeTime
                }
            }
            return keyInInfoAffectTime
        },
        getKeyInInfoAffectTime_8_night() {
            var keyInInfoAffectTime = 0
            if (this.lineData.nightReplaceConsumables !== undefined) {
                for (var i = 0; i < this.lineData.nightReplaceConsumables.length; i++) {
                    keyInInfoAffectTime += this.lineData.nightReplaceConsumables[i].accumulativeTime
                }
            }
            return keyInInfoAffectTime
        },
        getKeyInInfoAffectTime_9() {
            var keyInInfoAffectTime = 0
            if (this.lineData.keyInInfos !== undefined) {
                for (var i = 0; i < this.lineData.keyInInfos.length; i++) {
                    if (this.lineData.keyInInfos[i].keyInType == 9) {
                        keyInInfoAffectTime += this.lineData.keyInInfos[i].affectTime
                    }
                }
            }
            return keyInInfoAffectTime
        },
        getKeyInInfoDown() {
            var keyInInfoAffectTime = 0
            if (this.lineData.faultStatistics !== undefined) {
                for (var i = 0; i < this.lineData.faultStatistics.length; i++) {
                    keyInInfoAffectTime += this.lineData.faultStatistics[i].downTime
                }
            }
            return keyInInfoAffectTime
        }
    }
})