fronend/js/dapingmu-display.js

var timeday = new Array("今日", "昨日", "本周", "本月");

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>${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>${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 i = 0, j = 0;

function showChart() {

    var stackdata = [];
    var passdata = [];
    var faildata = [];
    var ratedata = [];
    var failmax = 0;
    var passmax = 0;
    var iddata = [];
    var summax = 0;
    var stackmax = 0;
    var ratemax = 0;
    for (i = 0; i < passNumber.length; i++) {
        passdata.push(passNumber[i]);
        faildata.push(failNumber[i]);
        stackdata.push(stackeverynum[i]);
        ratedata.push(failrate[i]);
        iddata.push(flownum[i]);

        if (ratemax < ratedata[i]) {
            ratemax = ratedata[i];
        }
        if (passmax < passNumber[i]) {
            passmax = passNumber[i];
        }
        if (failmax < passNumber[i]) {
            failmax = passNumber[i];
        }
        if (stackmax < passNumber[i]) {
            stackmax = passNumber[i];
        }

    }
    if (passmax < failmax) {
        passmax = failmax
    }
    if (passmax < stackmax) {
        passmax = stackmax;
    }

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

    stackAndFailChart = Highcharts.chart('graph-1', {
        chart: {
            zoomType: 'xy',
            height: (4 / 16 * 100) + '%' // 16:9 ratio
        },
        title: {
            text: '各产线今日产能'
        },
        credits: {
            enabled: false // 禁用版权信息
        },
        exporting: {
            enabled: false
        },
        xAxis: [uaxv],
        yAxis: [{ // Primary 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: stackdata,

            },]
    });
    FailChart = Highcharts.chart('graph-2', {
        chart: {
            height: (4 / 16 * 100) + '%' // 16:9 ratio
        }, title: {
            text: '各产线今日不良率'
        }, credits: {
            enabled: false // 禁用版权信息
        }, exporting: {
            enabled: false
        }, xAxis: [uaxv],
        yAxis: [{ // Secondary yAxis
            title: {
                text: '不良率',
                style: {
                    color: 'red',
                    fontSize: '1em'
                }
            },
            min: 0,
            max: 1.5 * ratemax,
            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 stackdata = [];
    var passdata = [];
    var faildata = [];
    var ratedata = [];
    var failmax = 0;
    var passmax = 0;
    var iddata = [];
    var summax = 0;
    var stackmax = 0;
    var ratemax = 0;
    for (i = 0; i < passNumber.length; i++) {
        passdata.push(passNumber[i]);
        faildata.push(failNumber[i]);
        stackdata.push(stackeverynum[i]);
        ratedata.push(failrate[i]);
        iddata.push(flownum[i]);
        if (ratemax < ratedata[i]) {
            ratemax = ratedata[i];
        }
        if (passmax < passNumber[i]) {
            passmax = passNumber[i];
        }
        if (failmax < passNumber[i]) {
            failmax = passNumber[i];
        }
        if (stackmax < passNumber[i]) {
            stackmax = passNumber[i];
        }
    }
    if (passmax < failmax) {
        passmax = failmax
    }
    if (passmax < stackmax) {
        passmax = stackmax;
    }


    // https://api.hcharts.cn/highcharts#Series.addPoint;
    stackAndFailChart.series[0].setData(passdata);
    stackAndFailChart.series[1].setData(faildata);
    stackAndFailChart.series[2].setData(stackdata);
    FailChart.series[0].setData(ratedata);


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

var stackAndFailChart = null;
var FailChart = null;

var uaxv = {
    crosshair: true,
    labels: {
        style: {
            fontSize: '1.5em'
        }
    },
    categories: iddata,
};