123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341 |
- <!DOCTYPE html>
- <html style="height: 100%">
- <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-frontend.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" />
- <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="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>
- <script>
- var timer=null;
- function displayClock(num){//num是传入的startClock中的动态值
- if(num<10){
- return "0"+num;
- }
- else{
- return num;
- }
- }
- //停止计时
- function stopClock(){
- clearTimeout(timer);
- }
- //开始计时
- function startClock(){
- var time =new Date();
- var hours=displayClock(time.getHours())+":";
- var minutes=displayClock(time.getMinutes())+":";
- var seconds=displayClock(time.getSeconds());
- //显示时间
- show.innerHTML=hours+minutes+seconds;//在id为show的块区域显示
- timer=setTimeout("startClock()",1000);//延时器
- }
- </script>
- </head>
- <style>
- #show{
- font-size: 30px;
- color:#black;
- text-align:center;
- }
- </style>
- <body onload="startClock()" onunload="stopClock()" class="theme-red" style="height: 100%">
- <div class="container-fluid" style="margin: 0 auto;height: 100%">
- <div style="width: 60%;float: left;height: 100%">
- <div class="row" style="font-size: 2em;height: 8%">
- <div class="col-3"></div>
- <div class="col-3">全厂统揽</div>
- <div class="col-3" id="show"></div>
- <div class="col-3"></div>
- </div>
- <div class="row " style="height: 35%">
- <!-- Visitors -->
- <script>
- function addContent(name){
- console.log( $(name));
- $(name).tab('show');
- }
- </script>
- <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"style="height: 80%">
- <div class="card">
- <div class="body bg-pink">
- <div class="text-center" style="font-size: 2em">全厂产能</div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">今日</div>
- <div class="col-4">1255</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">昨日</div>
- <div class="col-4">1235</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">本周</div>
- <div class="col-4">12355</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">本月</div>
- <div class="col-4">552555</div>
- <div class="col-2"></div>
- </div>
- </div>
- </div>
- </div>
- <!-- #END# Visitors -->
- <!-- Latest Social Trends -->
- <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
- <div class="card">
- <div class="body bg-cyan">
- <div class="text-center" style="font-size: 2em">全厂不良率</div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">今日</div>
- <div class="col-4">10%</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">昨日</div>
- <div class="col-4">9%</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">本周</div>
- <div class="col-4">10%</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-4">本月</div>
- <div class="col-4">11%</div>
- <div class="col-2"></div>
- </div>
- </div>
- </div>
- </div>
- <!-- #END# Latest Social Trends -->
- <!-- Answered Tickets -->
- <!-- #END# Answered Tickets -->
- </div>
- <div class="" style="height: 55%">
- <div class="card">
- <div class="body" style="font-size: 2em">
- <div class="table-responsive" style="width: 50%;float: left">
- <table class="table table-hover dashboard-task-infos">
- <thead>
- <tr style="border-bottom:3px solid black;">
- <th>不良工率最高</th>
- <th>数量</th>
- </tr>
- </thead>
- <tbody id="rank-one">
- <tr >
- <td>张三</td>
- <td>11</td>
- </tr>
- <tr>
- <td>李四</td>
- <td>33</td>
- </tr>
- <tr>
- <td>王五</td>
- <td>21</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="table-responsive" style="width:50%">
- <table class="table table-hover dashboard-task-infos">
- <thead>
- <tr style="border-bottom:3px solid black;">
- <th>产能最低</th>
- <th>数量</th>
- </tr>
- </thead>
- <tbody id="rank-one">
- <tr >
- <td>Task A</td>
- <td>22</td>
- </tr>
- <tr>
- <td>Task B</td>
- <td>44</td>
- </tr>
- <tr>
- <td>Task C</td>
- <td>12</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="" style="width: 40%;float: right">
- <div class="">
- <div class="card">
- <div class="body bg-teal">
- <div class="text-center" style="font-size: 2em">每拉产能</div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>一</span>号</div>
- <div class="col-4">1255</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>二</span>号</div>
- <div class="col-4">1235</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>三</span>号</div>
- <div class="col-4">12355</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>四</span>号</div>
- <div class="col-4">552555</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>一</span>号</div>
- <div class="col-4">1255</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>二</span>号</div>
- <div class="col-4">1235</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>三</span>号</div>
- <div class="col-4">12355</div>
- <div class="col-2"></div>
- </div>
- <div class="row text-center" style="font-size: 2em">
- <div class="col-2"></div>
- <div class="col-5">生产线<span>四</span>号</div>
- <div class="col-4">552555</div>
- <div class="col-2"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Jquery Core Js -->
- <script src="plugins/jquery/jquery.min.js"></script>
- <!-- Bootstrap Core Js -->
- <script src="plugins/bootstrap/js/bootstrap.js"></script>
- <!-- Select Plugin Js -->
- <script src="plugins/bootstrap-select/js/bootstrap-select.js"></script>
- <!-- Slimscroll Plugin Js -->
- <script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
- <!-- Waves Effect Plugin Js -->
- <script src="plugins/node-waves/waves.js"></script>
- <!-- Jquery CountTo Plugin Js -->
- <script src="plugins/jquery-countto/jquery.countTo.js"></script>
- <!-- Morris Plugin Js -->
- <script src="plugins/raphael/raphael.min.js"></script>
- <script src="plugins/morrisjs/morris.js"></script>
- <!-- ChartJs -->
- <script src="plugins/chartjs/Chart.bundle.js"></script>
- <!-- Flot Charts Plugin Js -->
- <script src="plugins/flot-charts/jquery.flot.js"></script>
- <script src="plugins/flot-charts/jquery.flot.resize.js"></script>
- <script src="plugins/flot-charts/jquery.flot.pie.js"></script>
- <script src="plugins/flot-charts/jquery.flot.categories.js"></script>
- <script src="plugins/flot-charts/jquery.flot.time.js"></script>
- <!-- Sparkline Chart Plugin Js -->
- <script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
- <!-- Custom Js -->
- <script src="js/admin.js"></script>
- <script src="js/pages/index.js"></script>
- <!-- Demo Js -->
- <script src="js/demo.js"></script>
- </body>
- </html>
|