fronend/js/lazhang-display.js

var timeday = ["今日", "昨日", "本周", "本月"];

function getSpotHtml(htmlbody, i) {
    htmlbody += "<tr>";
    htmlbody += `<tr>
                    <td>${timeday[i]}</td>
                    <td>${hispass[i]}</td>
                    <td>${hisfail[i]}</td>
                    <td>${hisstack[i]}</td>
                    <td>${hisrate[i] + '%'}</td>
                </tr>`;
    htmlbody += "</tr>";
    return htmlbody;
}

function getSpotHtml1(htmlbody, i) {
    htmlbody += "<tr>";
    htmlbody += `<tr>
                    <td>${goodid[i]}</td>
                    <td>${goodpass[i]}</td>
                    <td>${goodid[i]}</td>
                    <td>${goodfailrate[i] + '%'}</td>
                </tr>`;
    htmlbody += "</tr>";
    return htmlbody;
}

function getSpotHtml2(htmlbody, i) {
    htmlbody += "<tr>";
    htmlbody += `<tr>
                    <td>${badid[i]}</td>
                    <td>${badpass[i]}</td>
                    <td>${badid[i]}</td>
                    <td>${badfailrate[i] + '%'}</td>
                </tr>`;
    htmlbody += "</tr>";
    return htmlbody;
}


function showEachSpot() {
    var htmlbody = "", one_person = "";
    var i = 0;
    var triGap = 4;

    htmlbody = "";
    for (i = 0; i < triGap; i++) {

        htmlbody = getSpotHtml(htmlbody, i);
    }
    $("#rank-one").html(htmlbody);
    //console.log(htmlbody);
}

function showEachSpot1() {
    var htmlbody = "", one_person = "";
    var i = 0;
    var triGap = 3;

    htmlbody = "";
    for (i = 0; i < triGap; i++) {

        htmlbody = getSpotHtml1(htmlbody, i);
    }
    $("#rank-two").html(htmlbody);
    //console.log(htmlbody);
}

function showEachSpot2() {
    var htmlbody = "", one_person = "";
    var i = 0;
    var triGap = 3;

    htmlbody = "";
    for (i = 0; i < triGap; i++) {

        htmlbody = getSpotHtml2(htmlbody, i);
    }
    $("#rank-three").html(htmlbody);
    //console.log(htmlbody);
}


var compAxis = {
    categories: namedata,
    crosshair: true,
    title: {
        text: '工位',
        style: {
            fontSize: '1.5em'
        }
    },
    labels: {
        style: {
            fontSize: '1.5em'
        }
    }
};

function showChart() {

    var data = [];
    var ratedata = [];
    var stackmax = 0;
    var failmax = 0;
    var passdata = [];
    var faildata = [];
    var passmax = 0;

    for (i = 0; i < passNumber.length; i++) {
        if (stackmax < stackeverynum[i]) {
            stackmax = stackeverynum[i];
        }
        if (failmax < failrate[i]) {
            failmax = failrate[i];
        }
        if (passmax < passNumber[i]) {
            passmax = passNumber[i];
        }
        data.push(stackeverynum[i]);
        ratedata.push(Math.floor(failrate[i]));
        passdata.push(passNumber[i]);
        faildata.push(failNumber[i])
    }

    showEachSpot();
    showEachSpot1();
    showEachSpot2();


    stackmax = Math.max(stackmax, 5);
    failmax = Math.max(failmax, 5);

    stackAndFailChart = Highcharts.chart('graph-1', {
        chart: {
            zoomType: 'xy',
            //height: (4 / 16 * 100) + '%' // 16:9 ratio
        },
        title: {text: '各工位今日产能'},
        credits: {enabled: false},
        exporting: {enabled: false},
        xAxis: [compAxis],
        yAxis: [{
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0],
                    fontSize: '1.5em'
                }
            },
            min: 0,
            max: passmax * 1.5,
            title: {

                style: {
                    color: Highcharts.getOptions().colors[0],
                    fontSize: '1em'
                }
            }
        },],
        tooltip: {shared: true},
        legend: {
            layout: 'vertical',
            align: 'right',
            x: -100,
            verticalAlign: 'top',
            y: 0,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: '良品数',
            type: 'column',
            data: passdata,

        }, {
            name: '不良品数',
            type: 'column',
            data: faildata,

        },
            {
                name: '堆积数',
                type: 'column',
                data: data,
            }]
    });

    FailChart = Highcharts.chart('graph-2', {
        chart: {
            //height: (4 / 16 * 100) + '%' // 16:9 ratio
        },
        title: {
            text: '各工位今日不良率'
        },
        credits: {
            enabled: false // 禁用版权信息
        },
        exporting: {
            enabled: false
        },
        xAxis: [compAxis],
        yAxis: [{ // Secondary yAxis
            title: {
                text: '不良率',
                style: {
                    color: 'red',
                    fontSize: '1em'
                }
            },
            min: 0,
            max: 1.5 * failmax,
            labels: {
                formatter: function () {
                    return Math.floor(this.value) + "%";
                },
                style: {
                    color: 'red',
                    fontSize: '20px'
                }
            },

        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            x: -120,
            verticalAlign: 'top',
            y: 0,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: '不良率',
            type: 'spline',
            data: ratedata,
            color: 'red',
            tooltip: {
                valueSuffix: '%'
            }
        }]
    });

}

function updateChart() {
    var data = [];
    var ratedata = [];
    var stackmax = 0;
    var failmax = 0;
    var passdata = [];
    var faildata = [];
    var passmax = 0;
    for (i = 0; i < passNumber.length; i++) {
        if (stackmax < stackeverynum[i]) {
            stackmax = stackeverynum[i];
        }
        if (failmax < failrate[i]) {
            failmax = failrate[i];
        }
        if (passmax < passNumber[i]) {
            passmax = passNumber[i];
        }
        data.push(stackeverynum[i]);
        ratedata.push(Math.floor(failrate[i]));
        passdata.push(passNumber[i]);
        faildata.push(failNumber[i])
    }

    stackmax = Math.max(stackmax, 5);
    failmax = Math.max(failmax, 5);

    // https://api.hcharts.cn/highcharts#Series.addPoint;

    stackAndFailChart.series[0].setData(passdata);
    stackAndFailChart.series[1].setData(faildata);
    stackAndFailChart.series[2].setData(data);

    FailChart.series[0].setData(ratedata);

    if (failmax > FailChart.yAxis[0].getExtremes().max * 1.3 || failmax < FailChart.yAxis[0].getExtremes().max * 0.5) {
        FailChart.yAxis[0].setExtremes(0, failmax * 1.5);
    }
    if (passmax > stackAndFailChart.yAxis[0].getExtremes().max * 1.3 || passmax < stackAndFailChart.yAxis[0].getExtremes().max * 0.5) {
        stackAndFailChart.yAxis[0].setExtremes(0, passmax * 1.5);
    }

    showEachSpot();
    showEachSpot1();
    showEachSpot2();

}

var stackAndFailChart = null;
var FailChart = null;