<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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">
<meta http-equiv="Content-Type" content="text/html"/>
<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"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<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>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<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 language="JavaScript">
function startTime()
{
var today=new Date();//定义日期对象
var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年
var dd = today.getDate();//通过日期对象的getDate()方法返回年
var hh=today.getHours();//通过日期对象的getHours方法返回小时
var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟
var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒
// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
MM=checkTime(MM);
dd=checkTime(dd);
mm=checkTime(mm);
ss=checkTime(ss);
var day; //用于保存星期（getDay()方法得到星期编号）
if(today.getDay()==0) day = "星期日 "
if(today.getDay()==1) day = "星期一 "
if(today.getDay()==2) day = "星期二 "
if(today.getDay()==3) day = "星期三 "
if(today.getDay()==4) day = "星期四 "
if(today.getDay()==5) day = "星期五 "
if(today.getDay()==6) day = "星期六 "
document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+" " + day;
setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法
}
function checkTime(i)
{
if (i<10){
i="0" + i;
}
return i;
}
</script>
<style>
.time1{width:100%; height:50px; background:#FFF000; line-height:50px; text-align:center;}
</style>
</head>
<body onload="startTime()">
当前时间：<font color="black"><span id="nowDateTimeSpan"></span></font>
<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>
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>