ProductionLineMonitor/ProductionLineMonitor.Web/wwwroot/js/fault/fault.js

$(".form-control").datepicker({
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    autoclose: true,
    todayBtn: 'linked'
}).on('changeDate', function () {
    zTreeOnClick();
}).on('keydown', function (e) {
    return false;
});

$("input[name='optionsRadios']").change(function (obj) {
    var str = $("input[name='optionsRadios']:checked").val();
    if (str === "0") {
        $("#day").attr("class", "tab-pane active")
        $("#days").attr("class", "tab-pane")
    }
    if (str === "1") {
        $("#day").attr("class", "tab-pane")
        $("#days").attr("class", "tab-pane active")
    }
    zTreeOnClick();
});

//$("input:radio:first").attr("checked", "checked");
//$("input:radio:first").change();

function shortcut(key) {
    if (key === -2) {
        var date = new Date();
        var d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() - 2);
        $("#date").val(d).datepicker('setDate', d);
    }
    if (key === -1) {
        var date = new Date();
        var d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() - 1);
        $("#date").val(d).datepicker('setDate', d);
    }
    if (key === 0) {
        var date = new Date();
        var d = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        $("#date").val(d).datepicker('setDate', d);
    }
}

function getTOP10Faults(id, startTime, endTime) {
    $.ajax({
        url: '/Fault/GetTOP10Faults',
        type: 'GET',
        async: true,
        data: {
            "id": id,
            "startTime": startTime,
            "endTime": endTime,
            "filterString": "安全门,门禁,提示上料,提示卸料,门锁,门打开,请选择LOT生产"
        },
        success: function (rev) {
            option.series = [];
            var x = [];
            var y1 = [];
            var y2 = [];
            for (var i = 0; i < rev.length; i++) {
                x.push(rev[i].faultInfo);
                y1.push(rev[i].shiftCount);
                y2.push(rev[i].nightShiftCount);
            }

            option.xAxis.data = x;

            var serie = {
                name: '白班',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                    formatter: (params) => '白班: ' + params.value + '次'
                },
                data: y1
            }
            option.series.push(serie);

            var serie1 = {
                name: '夜班',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                    formatter: (params) => '夜班: ' + params.value + '次'
                },
                data: y2
            }
            option.series.push(serie1);

            myChart.setOption(option, true);
        }
    });

    option2.series = [];
    myChart2.setOption(option2, true);
}

var dom = document.getElementById('container1');
var myChart = echarts.init(dom, 'dark');
var app = {};

var option;

option = {
    backgroundColor: '#001529',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataZoom: { yAxisIndex: 'none' },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        axisPointer: {
            type: 'shadow'
        },
        axisLabel: {
            interval: 0,
            rotate: 0,
            formatter: function (value) {
                var length = value.length;
                var str = "";
                var num = 8;
                for (let i = 0; i * num < length; i++) {
                    if ((i + 1) * num <= length) {
                        str += value.substring(i * num, (i + 1) * num) + "\r\n";
                    }
                    else {
                        str += value.substring(i * num, length);
                    }
                }
                //if (value.length > 5) {
                //    return value.substring(5, 15) + "..";
                //}
                return str;
            }
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '次数'
        }
    ],
    series: [],
    code:[]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

var emphasisStyle = {
    itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0,0,0,0.3)'
    }
};

function addSerie(name, type, data, yIndex, company) {
    var serie = {
        name: name,
        type: type,
        label: {
            show: true
        },
        yAxisIndex: yIndex,
        tooltip: {
            valueFormatter: function (value) {
                return value + company;
            }
        },
        data: data
    }
    option.series.push(serie);
}

function getFaultTrend(id, code, startTime, endTime) {
    $.ajax({
        url: '/Fault/GetFaultTrend',
        type: 'GET',
        async: true,
        data: {
            "id": id,
            "faultInfo": code,
            "startTime": startTime,
            "endTime": endTime
        },
        success: function (rev) {
            option2.series = [];
            for (var i = 0; i < rev.series.length; i++) {
                addSerie2(rev.series[i].name, "line", rev.series[i].data, 0, " 次");
                addSerie3("", "line", startTime, endTime);
            }
            myChart2.setOption(option2, true);
        }
    });
}

var dom2 = document.getElementById('container2');
var myChart2 = echarts.init(dom2, 'dark');
var app2 = {};

var option2;

option2 = {
    backgroundColor: '#001529',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {},
    toolbox: {
        feature: {
            dataZoom: { yAxisIndex: 'none' },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        axisPointer: {
            type: 'shadow'
        },
        axisLabel: {
            interval: 0,
            formatter: function (value) {
                return value.substring(0, 13)
            }
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '次数'
        }
    ],
    series: []
};


if (option2 && typeof option === 'object') {
    myChart2.setOption(option2);
}

window.addEventListener('resize', myChart2.resize);

function addSerie2(name, type, data, yIndex, company) {
    var serie = {
        name: name,
        type: type,
        label: {
            show: true
        },
        yAxisIndex: yIndex,
        tooltip: {
            valueFormatter: function (value) {
                return value + company;
            }
        },
        data: data
    }
    option2.series.push(serie);
}

function addSerie3(name, type, start, end) {
    var serie = {
        name: name,
        type: type,
        areaStyle: {},
        lineStyle: {
            width: 1
        },
        emphasis: {
            focus: 'series'
        },
        markArea: {
            silent: true,
            itemStyle: {
                opacity: 0.3
            },
            data: [
                [
                    {
                        xAxis: start
                    },
                    {
                        //xAxis: '2009/9/22\n7:00'
                        xAxis: end
                    }
                ]
            ]
        }
    }
    option2.series.push(serie);
}

var zTreeObj;
var setting = {
    callback: {
        onClick: zTreeOnClick
    },
    view: {
        showIcon: false
    }
};

$.ajax({
    url: "/ProductionLine/GetProductionLineMachineTree",
    type: "GET",
    async: true,
    success: function (zNodes) {
        zTreeObj = $.fn.zTree.init($("#productionLineTree"), setting, zNodes);
    }
});

function zTreeOnClick() {
    var treeNode = zTreeObj.getSelectedNodes()[0];
    if (treeNode.level === 1) {

        var str = $("input[name='optionsRadios']:checked").val();
        if (str === "0") {
            var startTime = $("#date").val();
            var endTime = $("#date").val();
            getTOP10Faults(treeNode.id, startTime, endTime);
        }
        if (str === "1") {
            var startTime = $("#date1").val();
            var endTime = $("#date2").val();
            getTOP10Faults(treeNode.id, startTime, endTime);
        }
    }
}

myChart.on('click', function (params) {
    //console.log(params);

    var treeNode = zTreeObj.getSelectedNodes()[0];
    if (treeNode.level === 1) {

        var str = $("input[name='optionsRadios']:checked").val();
        if (str === "0") {
            var startTime = $("#date").val();
            var endTime = $("#date").val();
            getFaultTrend(treeNode.id, params.name, startTime, endTime);
        }
        if (str === "1") {
            var startTime = $("#date1").val();
            var endTime = $("#date2").val();
            getFaultTrend(treeNode.id, params.name, startTime, endTime);
        }
    }
});

function getFaultTrendV1(id, code, day) {
    $.ajax({
        url: '/Fault/GetFaultTrendV1',
        type: 'GET',
        async: true,
        data: {
            "id": id,
            "faultInfo": code,
            "day": day
        },
        success: function (rev) {
            option2.series = [];
            for (var i = 0; i < rev.series.length; i++) {
                addSerie2(rev.series[i].name, "line", rev.series[i].data, 0, " 次");
            }
            myChart2.setOption(option2, true);
        }
    });
}