factory18
/
fronend


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>流水线管理页</title>
    <!-- Favicon-->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet"
          type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

    <!-- Bootstrap Core Css -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Waves Effect Css -->
    <link href="plugins/node-waves/waves.css" rel="stylesheet"/>

    <!-- Animation Css -->
    <link href="plugins/animate-css/animate.css" rel="stylesheet"/>

    <!-- Morris Chart Css-->
    <link href="plugins/morrisjs/morris.css" rel="stylesheet"/>

    <!-- Custom Css -->
    <link href="css/style.css" rel="stylesheet">

    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
    <link href="css/themes/all-themes.css" rel="stylesheet"/>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>

<div class="row">
    <div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="info-box bg-pink " onclick="addContent1()">
            合格数
            <script>
                function addContent1() {
                    $('a[href="#home"]').tab('show');
                }
            </script>

        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="info-box bg-cyan " onclick="addContent2()">
            不合格数
            <script>
                function addContent2() {
                    $('a[href="#profile"]').tab('show');
                }
            </script>

        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="info-box bg-light-green " onclick="addContent3()">
            堆积数
            <script>
                function addContent3() {
                    $('a[href="#contact"]').tab('show');
                }
            </script>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="info-box bg-orange " onclick="addContent4()">
            工作时长
            <script>
                function addContent4() {
                    $('a[href="#time"]').tab('show');
                }
            </script>
        </div>
    </div>
</div>
<div>
    <ul class="nav nav-tabs" id="myTab" role="tablist" style="display: none">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
               aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
               aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
               aria-selected="false">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="time-tab" data-toggle="tab" href="#time" role="tab" aria-controls="time"
               aria-selected="false">Time</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div id="container" class="text-center" style="width: 50%;height:400px;margin: 0 auto"></div>
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div id="container2" style="width:50%;height:400px;margin: 0 auto"></div>
        </div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <div id="container3" style="width:50%;height:400px;margin: 0 auto"></div>
        </div>
        <div class="tab-pane fade" id="time" role="tabpanel" aria-labelledby="contact-tab">
            <div id="container5" style="width:50%;height:400px;margin: 0 auto"></div>
        </div>
    </div>
</div>


<script>
    var chart = Highcharts.chart('container2', {
        chart: {
            type: 'column'
        },
        title: {
            text: '月平均降雨量'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            categories: [
                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '降雨量 (mm)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '东京',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: '纽约',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            name: '伦敦',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: '柏林',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
    });
</script>
<script>
    var chart = Highcharts.chart('container1', {
        chart: {
            type: 'bar'
        },
        title: {
            text: '堆叠条形图'
        },
        xAxis: {
            categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
        },
        yAxis: {
            min: 0,
            title: {
                text: '水果消费总量'
            }
        },
        legend: {
            /* 图例显示顺序反转
             * 这是因为堆叠的顺序默认是反转的，可以设置
             * yAxis.reversedStacks = false 来达到类似的效果
             */
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: '小张',
            data: [5, 3, 4, 7, 2]
        }, {
            name: '小彭',
            data: [2, 2, 3, 2, 1]
        }, {
            name: '小潘',
            data: [3, 4, 4, 2, 5]
        }]
    });
</script>
<script>
    var chart = Highcharts.chart('container3', {
        chart: {
            type: 'column'
        },
        title: {
            text: '全球各大城市人口排行'
        },
        subtitle: {
            text: '数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45  // 设置轴标签旋转角度
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '人口 (百万)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
        },
        series: [{
            name: '总人口',
            data: [
                ['上海', 24.25],
                ['卡拉奇', 23.50],
                ['北京', 21.51],
                ['德里', 16.78],
                ['拉各斯', 16.06],
                ['天津', 15.20],
                ['伊斯坦布尔', 14.16],
                ['东京', 13.51],
                ['广州', 13.08],
                ['孟买', 12.44],
                ['莫斯科', 12.19],
                ['圣保罗', 12.03],
                ['深圳', 10.46],
                ['雅加达', 10.07],
                ['拉合尔', 10.05],
                ['首尔', 9.99],
                ['武汉', 9.78],
                ['金沙萨', 9.73],
                ['开罗', 9.27],
                ['墨西哥', 8.87]
            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                y: 10
            }
        }]
    });
</script>
<script>
    var chart = Highcharts.chart('container4', {
        chart: {
            type: 'line'
        },
        title: {
            text: '月平均气温'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            title: {
                text: '气温 (°C)'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    // 开启数据标签
                    enabled: true
                },
                // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                enableMouseTracking: false
            }
        },
        series: [{
            name: '东京',
            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '伦敦',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });

</script>

<script src="js/basic.js"></script>

<script>
    var thisPageFlow = 1;
    function showChart() {

        var data = [];
        var ratedata = [];
        var stackmax = 0;
        var failmax=0;

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

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

        stackAndFailChart = Highcharts.chart('container', {
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: null
            },
            credits: {
                enabled: false // 禁用版权信息
            },
            exporting: {
                enabled: false
            },
            xAxis: [{
                categories: namedata,
                crosshair: true,
                title: {
                    text: '员工',
                    style: {
                        fontSize: '15px'
                    }
                },
                labels: {
                    style: {
                        fontSize: '20px'
                    }
                }
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[0],
                        fontSize: '20px'
                    }
                },
                min: 0,
                max: 1.5 * stackmax,
                title: {
                    text: '堆积数',
                    style: {
                        color: Highcharts.getOptions().colors[0],
                        fontSize: '15px'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '不良率',
                    style: {
                        color: 'red',
                        fontSize: '15px'
                    }
                },
                min: 0,
                max: 1.5 * failmax,
                labels: {
                    formatter: function() {
                        return Math.floor(this.value) + "%";
                    },
                    style: {
                        color: 'red',
                        fontSize: '20px'
                    }
                },
                opposite: true
            }],
            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: 'column',

                data: data,
                tooltip: {
                    valueSuffix: ' mm'
                }
            }, {
                name: '不良率',
                type: 'spline',
                yAxis: 1,
                data: ratedata,
                color: 'red',
                tooltip: {
                    valueSuffix: '%'
                }
            }]
        });
    }
    function updateChart(){
        var data = [];
        var ratedata = [];
        var stackmax = 0;
        var failmax=0;

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

        stackmax = Math.max(stackmax,5);
        failmax =Math.max(failmax,5);
        // https://api.hcharts.cn/highcharts#Series.addPoint;
        stackAndFailChart.series[0].setData(data);
        stackAndFailChart.series[1].setData(ratedata);
    }
    var stackAndFailChart = null;

    $(document).ready(on_document_load);

    setInterval(function(){
        $("#container").width(window.innerWidth);
        $("#container").height(window.innerHeight);
    },1000);

</script>
</body>

</html>