fronend/js/lazhang-display.js

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

if (flowId == null || scheduleId == null) {
    send_alert("出错啦！请检查参数完整性");
}

function page_document_load() {
    get_data("fcWorkScheduleLoad/list?scheduleId=" + scheduleId, first_success);

}

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;
    var failratemax=0;

    for (i = 0; i < passNumber.length; i++) {
        if (stackmax < stackeverynum[i]) {
            stackmax = stackeverynum[i];
        }
        if (failmax < failNumber[i]) {
            failmax = failNumber[i];
        }
        if (failratemax< failrate[i]) {
            failratemax = 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();


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

    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: "#ffffff",
                    fontSize: '1.5em'
                }
            },
            min: 0,
            max: passmax * 1.5,
            title: {
                text: '数量',
                style: {
                    color: '#ffffff',
                    fontSize: '1em'
                }
            }
        },],
        tooltip: {shared: true},
        legend: {
            layout: 'vertical',
            align: 'right',
            x: 0,
            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: '#ffffff',
                    fontSize: '1em'
                }
            },
            min: 0,
            max: 1.5 * failratemax,
            labels: {
                formatter: function () {
                    return Math.floor(this.value) + "%";
                },
                style: {
                    color: '#ffffff',
                    fontSize: '20px'
                }
            },

        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            x: 0,
            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;
    var failratemax=0;

    for (i = 0; i < passNumber.length; i++) {
        if (stackmax < stackeverynum[i]) {
            stackmax = stackeverynum[i];
        }
        if (failmax < failNumber[i]) {
            failmax = failNumber[i];
        }
        if (failratemax < failrate[i]) {
            failratemax= 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])
    }
    failratemax = Math.max(failratemax, 5);
    stackmax = Math.max(stackmax, 5);
    failmax = Math.max(failmax, 5);
    passmax =  Math.max(passmax,failmax,stackmax);


    // 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 (failratemax > FailChart.yAxis[0].getExtremes().max * 1.3 || failratemax < FailChart.yAxis[0].getExtremes().max * 0.5) {
        FailChart.yAxis[0].setExtremes(0, failratemax * 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 secNames = [];

    sectorID.forEach(function(val){  secNames.push(getSectorName(val)); });

    if(JSON.stringify(secNames) !== lastTimeSecNames){
        lastTimeSecNames = JSON.stringify(secNames);
        FailChart.xAxis[0].setCategories(secNames);
        stackAndFailChart.xAxis[0].setCategories(secNames);
    }
}

var lastTimeSecNames = "";

var stackAndFailChart = null;
var FailChart = null;