factory18
/
fronend


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
							<!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="container1"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="container4" 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>
</body>

</html>