everlight.eap/front/dashboard/js/js.js

$(window).load(function () {
    $(".loading").fadeOut();
})
$(function () {
    var prefix = 'http://10.172.21.30:9999/eap/api/ScreenDisplay/';

    load();
    setInterval(() => {
        load();
    }, 1000 * 60 * 30);

    function load() {
        loadCurrentOutput();
        loadEffiency();
        loadOrderProgress();
        loadAlarmCodePie();
        loadCompletedLots();
        loadCommst();
        loadStatusPie();
        loadMachineToPM();
        loadAlarmLine();
        loadMtbf();
    }

    function echarts_1(legends, data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                right: 0,
                top: 30,
                height: 160,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 12
                },
                orient: 'vertical',
                data: legends
            },
            calculable: true,
            series: [
                {
                    name: ' ',
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
                    type: 'pie',
                    radius: [30, 70],
                    center: ['35%', '50%'],
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    lableLine: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    data: data
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_2(legends, data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {

                top: '15%',
                data: legends,
                icon: 'circle',
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                }
            },
            calculable: true,
            series: [{
                name: '',
                color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#c96262'],
                type: 'pie',
                //起始角度，支持范围[0, 360]
                startAngle: 0,
                //饼图的半径，数组的第一项是内半径，第二项是外半径
                radius: [51, 100],
                //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                center: ['50%', '45%'],

                //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                // 'radius' 面积展现数据的百分比，半径展现数据的大小。
                //  'area' 所有扇区面积相同，仅通过半径展现数据大小
                roseType: 'area',
                //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: true,
                        //  formatter: '{c}辆'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length2: 1,
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: data
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_3(legends, dates, dbData, wbData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'));

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            legend: {
                //icon: 'vertical',
                data: legends,
                //align: 'center',
                // right: '35%',
                top: '0',
                textStyle: {
                    color: "#fff"
                },
                // itemWidth: 15,
                // itemHeight: 15,
                itemGap: 20,
            },
            grid: {
                left: '0',
                right: '20',
                top: '10',
                bottom: '20',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,.6)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                data: dates
            }, {




            }],
            yAxis: [{
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,.6)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            }],
            series: [{
                name: 'DB',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(24, 163, 64, 0.3)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(24, 163, 64, 0)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#cdba00',
                        borderColor: 'rgba(137,189,2,0.27)',
                        borderWidth: 12
                    }
                },
                data: dbData
            }, {
                name: 'WB',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(39, 122,206, 0.3)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(39, 122,206, 0)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#277ace',
                        borderColor: 'rgba(0,136,212,0.2)',
                        borderWidth: 12
                    }
                },
                data: wbData
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_4(legends, xData, dbData, wbData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            "legend": {
                "data": ['DB', 'WB'],
                "top": "0%",
                "textStyle": {
                    "color": "rgba(255,255,255,0.9)"//图例文字
                }
            },
            "xAxis": [
                {
                    "type": "category",
                    data: xData,
                    axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
                    axisLabel: {
                        textStyle: { color: "rgba(255,255,255,.6)", fontSize: '14', },
                    },

                },
            ],
            "yAxis": [
                {
                    "type": "value",
                    "name": "",
                    // "interval": 10,
                    "axisLabel": {
                        "show": true,
                    },
                    axisLine: { lineStyle: { color: 'rgba(255,255,255,.4)' } },//左线色

                }
            ],
            "grid": {
                "top": "10%",
                "right": "30",
                "bottom": "30",
                "left": "30",
            },
            "series": [
                {
                    "name": "DB",
                    "type": "bar",
                    "data": dbData,
                    "barWidth": "auto",
                    "itemStyle": {
                        "normal": {
                            "color": {
                                "type": "linear",
                                "x": 0,
                                "y": 0,
                                "x2": 0,
                                "y2": 1,
                                "colorStops": [
                                    {
                                        "offset": 0,
                                        "color": "#609db8"
                                    },

                                    {
                                        "offset": 1,
                                        "color": "#609db8"
                                    }
                                ],
                                "globalCoord": false
                            }
                        }
                    }
                },
                {
                    "name": "WB",
                    "type": "bar",
                    "data": wbData,
                    "barWidth": "auto",
                    "itemStyle": {
                        "normal": {
                            "color": {
                                "type": "linear",
                                "x": 0,
                                "y": 0,
                                "x2": 0,
                                "y2": 1,
                                "colorStops": [
                                    {
                                        "offset": 0,
                                        "color": "#66b8a7"
                                    },
                                    {
                                        "offset": 1,
                                        "color": "#66b8a7"
                                    }
                                ],
                                "globalCoord": false
                            }
                        }
                    },
                    "barGap": "0"
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_5(legends, completedData, totalData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        // 颜色
        var lightBlue = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: 'rgba(41, 121, 255, 1)'
            }, {
                offset: 1,
                color: 'rgba(0, 192, 255, 1)'
            }],
            globalCoord: false
        }

        var option = {
            tooltip: {
                show: false
            },
            grid: {
                top: '0%',
                left: '65',
                right: '14%',
                bottom: '0%',
            },
            xAxis: {
                min: 0,
                max: 100,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            yAxis: {
                data: legends,
                //offset: 15,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                }
            },
            series: [{
                type: 'bar',
                label: {
                    show: true,
                    zlevel: 10000,
                    position: 'right',
                    padding: 10,
                    color: '#49bcf7',
                    fontSize: 14,
                    formatter: '{c}%'

                },
                itemStyle: {
                    color: '#49bcf7'
                },
                barWidth: '15',
                data: completedData,
                z: 10
            }, {
                type: 'bar',
                barGap: '-100%',
                itemStyle: {
                    color: '#fff',
                    opacity: 0.1
                },
                barWidth: '15',
                data: totalData,
                z: 5
            }],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


    function zb1(v1) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zb1'));
        var v3 = 100;
        // v1 = 85;
        var v2 = v3 - v1;
        option = {
            //animation: false,
            series: [{
                type: 'pie',
                radius: ['60%', '70%'],
                color: '#49bcf7',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '稼动率',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            },
                            formatter: function (params) {
                                return v1 + '%'
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '',
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function zb2(v1) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zb2'));
        var v3 = 100;
        //   v1 = 5;
        var v2 = v3 - v1;
        option = {
            //animation: false,
            series: [{
                type: 'pie',
                radius: ['60%', '70%'],
                color: '#cdba00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '报警率',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            },
                            formatter: function (params) {
                                return v1 + '%'
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '',
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function zb3(v1) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zb3'));
        var v3 = 100;
        //   v1 = 10;
        var v2 = v3 - v1;
        option = {
            //animation: false,
            series: [{
                type: 'pie',
                radius: ['60%', '70%'],
                color: '#62c98d',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '闲置率',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            },
                            formatter: function (params) {
                                return v1 + '%'
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '',
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function loadCurrentOutput() {
        $.get(prefix + 'GetAlarmCountTotal', {}, function (res) {
            //  res = 18521;
            $('#currentOutput').text(res);
        }, 'json');
    }

    function loadEffiency() {
        $.get(prefix + 'GetEffiency', {}, function (res) {
            console.log(res);
            zb1((res.runRate * 100).toFixed(2));
            zb2((res.alarmRate * 100).toFixed(2));
            console.log((res.runRate * 100).toFixed(2));
            console.log((res.alarmRate * 100).toFixed(2));
            console.log(100 - parseFloat((res.runRate * 100).toFixed(2)) - parseFloat((res.alarmRate * 100).toFixed(2)));
            zb3(100 - parseFloat((res.runRate * 100).toFixed(2)) - parseFloat((res.alarmRate * 100).toFixed(2)));
        }, 'json');
    }

    function loadOrderProgress() {
        $.get(prefix + 'GetOrderProgress', {}, function (res) {
            console.log(res);
            var legends = [];
            var comdata = [];
            var total = [];
            res.forEach(element => {
                legends.push(element.orderNo);
                var com = Math.round(element.completeCount / element.totalCount * 100);
                if (com > 100) {
                    com = 100;
                }
                comdata.push(com);
                total.push(100);
            });
            echarts_5(legends, comdata, total);
        }, 'json');
    }

    function loadAlarmCodePie() {
        var take = 5;
        $.get(prefix + 'GetAlarmCodePie', { take: take }, function (res) {
            console.log(res);
            var legends = [];
            var data = [];
            var total = 0;
            res.forEach(element => {
                total += element.count;
            });
            res.forEach(element => {
                legends.push(element.alarmCode);
                data.push({
                    value: Math.round(element.count / total * 100),
                    name: element.alarmCode
                });
            });
            echarts_1(legends, data);
        }, 'json');
    }

    // 加载已完成lot
    function loadCompletedLots() {
        $.get(prefix + 'ReadJobBooking', {}, function (res) {
            console.log(res);
            var html = '';
            res.forEach(element => {
                html += '<li><p><span>' + element.lotNo + '</span><span>' + element.macCode + '</span><span>' + element.ftotal + '</span><span>'
                    + element.modtime.split('T')[1].substr(0, 8) + '</span></p></li>';
            });
            $('.lastestLots').html(html);
            $('.wrap,.adduser').liMarquee({
                direction: 'up',/*身上滚动*/
                runshort: true,/*内容不足时不滚动*/
                scrollamount: 20/*速度*/,
                behavior:'alternate'
            });
        }, 'json');
    }

    // 加载参数比对未通过机台
    function loadCommst() {
        $.get(prefix + 'ReadParamsComMst', {}, function (res) {
            console.log(res);
            var index = 1;
            res.forEach(element => {
                var tr = $('<tr>');
                var td1 = $('<td>');
                var span = $('<span>');
                span.text(index++);
                td1.append(span);
                var td2 = $('<td>');
                td2.text(element.macFCode);
                var td3 = $('<td>');
                td3.text(element.programFName);
                var td4 = $('<td>');
                td4.text(element.recTime.split('T')[1]);
                tr.append(td1).append(td2).append(td3).append(td4);
                $('#paramsCommst').append(tr);
            });
        }, 'json');
    }

    // 加载机台状态分布
    function loadStatusPie() {
        $.get(prefix + 'ReadLastStatus', {}, function (res) {
            console.log(res);
            var legends = [];
            var data = [];
            res.forEach(element => {
                legends.push(element.statusFName);
                data.push({
                    value: element.fLen,
                    name: element.statusFName
                });
            });
            for (var i = 0; i < 5; i++) {
                data.push(
                    { value: 0, name: "", label: { show: false }, labelLine: { show: false } }
                );
            }
            echarts_2(legends, data);
        }, 'json');
    }

    // 加载待保养机台
    function loadMachineToPM() {
        $.get(prefix + 'GetMachineToPms', {}, function (res) {
            console.log(res);
            var index = 1;
            res.forEach(element => {
                var tr = $('<tr>');
                var td1 = $('<td>');
                var span = $('<span>');
                span.text(index++);
                td1.append(span);
                var td2 = $('<td>');
                td2.text(element.macCode);
                var td3 = $('<td>');
                td3.text(element.pmName);
                var td4 = $('<td>');
                td4.text(element.nextPmTime.split('T')[0]);
                tr.append(td1).append(td2).append(td3).append(td4);
                $('#machineToPm').append(tr);
            });
        }, 'json');
    }

    function loadAlarmLine() {
        $.get(prefix + 'GetAlarmLines', {}, function (res) {
            console.log(res);
            var legends = [];
            var dbData = [];
            var wbData = [];
            var dates = res.dates;
            var series = res.lineSeries;
            series.forEach(element => {
                legends.push(element.name);
                if (element.name === 'DB') {
                    element.alarmTimeDtos.forEach(item => {
                        dbData.push(item.count);
                    });
                } else if (element.name === 'WB') {
                    element.alarmTimeDtos.forEach(item => {
                        wbData.push(item.count);
                    });
                }
            });
            legends = ['DB', 'WB'];
            echarts_3(legends, dates, dbData, wbData);
        }, 'json');
    }

    function loadMtbf() {
        $.get(prefix + 'GetMTBFForDisplay', {}, function (res) {
            console.log(res);
            var legends = [];
            var xData = [];
            var dbData = [];
            var wbData = [];
            res.legend.forEach(element => {
                legends.push({
                    name: element
                });
            });
            res.sources.forEach(element => {
                xData.push(element.title);
                element.data.forEach(item => {
                    if (item.code === 'DB') {
                        dbData.push(item.value.toFixed(2));
                    } else if (item.code === 'WB') {
                        wbData.push(item.value.toFixed(2));
                    }
                });
            });
            echarts_4(legends, xData, dbData, wbData);
        }, 'json');
    }
})