<!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="css/third/bootstrap.min.css" >
<!-- 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="css/third/jq.3.2.1.min.js"></script>
<script src="css/third/popper.1.12.9.js" ></script>
<script src="css/third/boot.min.js" ></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代码 */
</style>
<script src="css/third/hchart.js"></script>
<script src="css/third/exporting.js"></script>
<script src="css/third/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>