|
|
@@ -86,19 +86,21 @@
|
|
|
</head>
|
|
|
|
|
|
<body class="theme-black" style="background-color: #17253f !important;" onload="startTime()">
|
|
|
-<nav class="navbar">
|
|
|
+<nav class="navbar" style="background-color: red">
|
|
|
<div class="container-fluid">
|
|
|
<div class="navbar-header">
|
|
|
<a class="navbar-brand" href="index.html">工厂产能监控系统</a>
|
|
|
</div>
|
|
|
+ <div style="color: #ffffff"><img src="images/logo.jpg" style="width: 10%"> 深圳市度彼电子有限公司——</div>
|
|
|
<font color="#ffffff"><span id="nowDateTimeSpan"></span></font>
|
|
|
- <div class="collapse navbar-collapse" id="navbar-collapse">
|
|
|
+ </div>
|
|
|
+ <!-- <div class="collapse navbar-collapse" id="navbar-collapse">
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
|
<!-- Call Search -->
|
|
|
- <li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
|
|
|
+ <!-- <li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
|
|
|
<!-- #END# Call Search -->
|
|
|
<!-- Notifications -->
|
|
|
- <li class="dropdown">
|
|
|
+ <!-- <li class="dropdown">
|
|
|
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
|
|
|
<i class="material-icons">notifications</i>
|
|
|
<span class="label-count">7</span>
|
|
|
@@ -207,7 +209,7 @@
|
|
|
</li>
|
|
|
<!-- #END# Notifications -->
|
|
|
<!-- Tasks -->
|
|
|
- <li class="dropdown">
|
|
|
+ <!-- <li class="dropdown">
|
|
|
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
|
|
|
<i class="material-icons">flag</i>
|
|
|
<span class="label-count">9</span>
|
|
|
@@ -284,11 +286,79 @@
|
|
|
</ul>
|
|
|
</li>
|
|
|
<!-- #END# Tasks -->
|
|
|
- <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
|
|
|
+ <!-- <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
|
|
|
</ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
</nav>
|
|
|
+<section style="margin-top: 100px;color: #ffffff" style-height="30-1">
|
|
|
+ <div style="width: 38%;float: left">
|
|
|
+ <div class="text-center">本拉产能统计</div>
|
|
|
+ <table class="table table-bordered text-center" style="color: #ffffff">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th scope="col">#</th>
|
|
|
+ <th scope="col">First</th>
|
|
|
+ <th scope="col">Last</th>
|
|
|
+ <th scope="col">Handle</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <th scope="row">1</th>
|
|
|
+ <td>Mark</td>
|
|
|
+ <td>Otto</td>
|
|
|
+ <td>@mdo</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th scope="row">2</th>
|
|
|
+ <td>Jacob</td>
|
|
|
+ <td>Thornton</td>
|
|
|
+ <td>@fat</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th scope="row">3</th>
|
|
|
+ <td>Larry</td>
|
|
|
+ <td>the Bird</td>
|
|
|
+ <td>@twitter</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div style="width: 60%;float: right">
|
|
|
+ <div class="text-center">本厂今日生产能手榜</div>
|
|
|
+ <table class="table table-bordered text-center" style="color: #ffffff">
|
|
|
+ <thead>
|
|
|
+ <tr >
|
|
|
+
|
|
|
+ <th scope="col" colspan="2">First</th>
|
|
|
+
|
|
|
+ <th scope="col" colspan="2">Handle</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <th scope="row">1</th>
|
|
|
+ <td>Mark</td>
|
|
|
+ <td>Otto</td>
|
|
|
+ <td>@mdo</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th scope="row">2</th>
|
|
|
+ <td>Jacob</td>
|
|
|
+ <td>Thornton</td>
|
|
|
+ <td>@fat</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th scope="row">3</th>
|
|
|
+ <td>Larry</td>
|
|
|
+ <td>the Bird</td>
|
|
|
+ <td>@twitter</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
<!--<nav class="navbar navbar-expand-lg navbar-light bg-light" style-height="10">-- >
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
@@ -331,8 +401,8 @@
|
|
|
</form>
|
|
|
</div>
|
|
|
</nav>-->
|
|
|
-<section class="content" style="margin: 0 auto; margin-top: 100px;">
|
|
|
- <div class="row"></div>
|
|
|
+ <!--<section class="content" style="margin: 0 auto; margin-top: 100px;">
|
|
|
+ <!--<div class="row"></div>
|
|
|
<div class="container-fluid " style="margin-bottom: 1em;">
|
|
|
<div class="row text-center">
|
|
|
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
@@ -389,64 +459,68 @@
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="container-fluid" style="margin-top: 0.5em;padding-top: 1em">
|
|
|
-
|
|
|
- <div class="card" style-height="30-8" style="margin: 0 auto;">
|
|
|
- <div>
|
|
|
- <div class="" style="">
|
|
|
- <div class="table-responsive" style="width: 30%;float: left">
|
|
|
- <table class="table table-hover dashboard-task-infos">
|
|
|
- <thead>
|
|
|
- <tr style="border-bottom:3px solid black;">
|
|
|
- <th>姓名(工号)</th>
|
|
|
- <th>合格数</th>
|
|
|
- <th>不合格数</th>
|
|
|
-
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="rank-one">
|
|
|
-
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div class="table-responsive" style="width: 30%;float: left;padding-left: 5em">
|
|
|
- <table class="table table-hover dashboard-task-infos">
|
|
|
- <thead>
|
|
|
- <tr style="border-bottom:3px solid black;">
|
|
|
- <th>姓名(工号)</th>
|
|
|
- <th>合格数</th>
|
|
|
- <th>不合格数</th>
|
|
|
-
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="rank-two">
|
|
|
-
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div class="table-responsive" style="width: 30%;float: right">
|
|
|
- <table class="table table-hover dashboard-task-infos">
|
|
|
- <thead>
|
|
|
- <tr style="border-bottom:3px solid black;">
|
|
|
- <th>姓名(工号)</th>
|
|
|
- <th>合格数</th>
|
|
|
- <th>不合格数</th>
|
|
|
-
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="rank-three">
|
|
|
-
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row" style="height: 3em;"></div>
|
|
|
- <div class="row" style-height="50-8">
|
|
|
- <div id="graph-1"></div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ <!--<div class="container-fluid" style="margin-top: 0.5em;padding-top: 1em">
|
|
|
+
|
|
|
+ <!-- <div class="card" style-height="30-8" style="margin: 0 auto;">
|
|
|
+ --<div>
|
|
|
+ <div class="" style="">
|
|
|
+ <div class="table-responsive" style="width: 30%;float: left">
|
|
|
+ <table class="table table-hover dashboard-task-infos">
|
|
|
+ <thead>
|
|
|
+ <tr style="border-bottom:3px solid black;">
|
|
|
+ <th>姓名(工号)</th>
|
|
|
+ <th>合格数</th>
|
|
|
+ <th>不合格数</th>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="rank-one">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="table-responsive" style="width: 30%;float: left;padding-left: 5em">
|
|
|
+ <table class="table table-hover dashboard-task-infos">
|
|
|
+ <thead>
|
|
|
+ <tr style="border-bottom:3px solid black;">
|
|
|
+ <th>姓名(工号)</th>
|
|
|
+ <th>合格数</th>
|
|
|
+ <th>不合格数</th>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="rank-two">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="table-responsive" style="width: 30%;float: right">
|
|
|
+ <table class="table table-hover dashboard-task-infos">
|
|
|
+ <thead>
|
|
|
+ <tr style="border-bottom:3px solid black;">
|
|
|
+ <th>姓名(工号)</th>
|
|
|
+ <th>合格数</th>
|
|
|
+ <th>不合格数</th>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="rank-three">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+<section>
|
|
|
+
|
|
|
+<div class="row" style-height="50-8">
|
|
|
+ <div id="graph-1"></div>
|
|
|
+</div>
|
|
|
+ <div class="row " style="height: 10em"></div>
|
|
|
+ <div class="row" style-height="30-2">
|
|
|
+ <div id="graph-2"></div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
@@ -495,7 +569,7 @@
|
|
|
|
|
|
<script>
|
|
|
|
|
|
- function getSpotHtml(htmlbody, one_person, i) {
|
|
|
+ /* function getSpotHtml(htmlbody, one_person, i) {
|
|
|
htmlbody += "<tr>";
|
|
|
htmlbody += `<tr>
|
|
|
<td>${flowData[i].spotName}(${flowData[i].spotId})</td>
|
|
|
@@ -532,7 +606,7 @@
|
|
|
htmlbody = getSpotHtml(htmlbody, one_person, i + triGap * 2);
|
|
|
}
|
|
|
$("#rank-three").html(htmlbody);
|
|
|
- }
|
|
|
+ }*/
|
|
|
|
|
|
var thisPageFlow = 1;
|
|
|
|
|
|
@@ -542,6 +616,8 @@
|
|
|
var ratedata = [];
|
|
|
var stackmax = 0;
|
|
|
var failmax = 0;
|
|
|
+ var passdata=[];
|
|
|
+ var faildata=[];
|
|
|
|
|
|
for (i = 0; i < passNumber.length; i++) {
|
|
|
if (stackmax < stackeverynum[i]) {
|
|
|
@@ -552,9 +628,11 @@
|
|
|
}
|
|
|
data.push(stackeverynum[i]);
|
|
|
ratedata.push(Math.floor(failrate[i]));
|
|
|
+ passdata.push(passNumber[i]);
|
|
|
+ faildata.push(failNumber[i])
|
|
|
}
|
|
|
|
|
|
- showEachSpot();
|
|
|
+ //showEachSpot();
|
|
|
|
|
|
stackmax = Math.max(stackmax, 5);
|
|
|
failmax = Math.max(failmax, 5);
|
|
|
@@ -565,7 +643,7 @@
|
|
|
height: (4 / 16 * 100) + '%' // 16:9 ratio
|
|
|
},
|
|
|
title: {
|
|
|
- text: null
|
|
|
+ text: '各工位今日产能'
|
|
|
},
|
|
|
credits: {
|
|
|
enabled: false // 禁用版权信息
|
|
|
@@ -597,15 +675,73 @@
|
|
|
}
|
|
|
},
|
|
|
min: 0,
|
|
|
- max: 1.5 * stackmax,
|
|
|
+ max: 10000,
|
|
|
title: {
|
|
|
- text: '堆积数',
|
|
|
+
|
|
|
style: {
|
|
|
color: Highcharts.getOptions().colors[0],
|
|
|
fontSize: '1em'
|
|
|
}
|
|
|
}
|
|
|
- }, { // Secondary yAxis
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ shared: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ x: -100,
|
|
|
+ verticalAlign: 'top',
|
|
|
+ y: 0,
|
|
|
+ floating: true,
|
|
|
+ backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'column',
|
|
|
+ data: passdata,
|
|
|
+
|
|
|
+ }, {
|
|
|
+ type: 'column',
|
|
|
+ data: faildata,
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'column',
|
|
|
+ data: data,
|
|
|
+
|
|
|
+ },]
|
|
|
+ });
|
|
|
+ stackAndFailChart = Highcharts.chart('graph-2', {
|
|
|
+ chart: {
|
|
|
+ zoomType: 'xy',
|
|
|
+ height: (4 / 16 * 100) + '%' // 16:9 ratio
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '各工位今日不良率'
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false // 禁用版权信息
|
|
|
+ },
|
|
|
+ exporting: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ categories: namedata,
|
|
|
+ crosshair: true,
|
|
|
+ title: {
|
|
|
+ text: '员工',
|
|
|
+ style: {
|
|
|
+ fontSize: '1.5em'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ fontSize: '1.5em'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxis: [ { // Secondary yAxis
|
|
|
title: {
|
|
|
text: '不良率',
|
|
|
style: {
|
|
|
@@ -624,7 +760,7 @@
|
|
|
fontSize: '20px'
|
|
|
}
|
|
|
},
|
|
|
- opposite: true
|
|
|
+
|
|
|
}],
|
|
|
tooltip: {
|
|
|
shared: true
|
|
|
@@ -639,14 +775,6 @@
|
|
|
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
|
},
|
|
|
series: [{
|
|
|
- name: '堆积数',
|
|
|
- type: 'column',
|
|
|
-
|
|
|
- data: data,
|
|
|
- tooltip: {
|
|
|
- valueSuffix: ' mm'
|
|
|
- }
|
|
|
- }, {
|
|
|
name: '不良率',
|
|
|
type: 'spline',
|
|
|
yAxis: 1,
|
|
|
@@ -657,6 +785,7 @@
|
|
|
}
|
|
|
}]
|
|
|
});
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function updateChart() {
|
|
|
@@ -681,21 +810,34 @@
|
|
|
// https://api.hcharts.cn/highcharts#Series.addPoint;
|
|
|
stackAndFailChart.series[0].setData(data);
|
|
|
stackAndFailChart.series[1].setData(ratedata);
|
|
|
- showEachSpot();
|
|
|
+ // showEachSpot();
|
|
|
}
|
|
|
|
|
|
var stackAndFailChart = null;
|
|
|
|
|
|
$(document).ready(on_document_load);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
window.onresize = resizeAll;
|
|
|
|
|
|
function resizeAll() {
|
|
|
$('[style-height="10"]').height(window.innerHeight / 10);
|
|
|
$('[style-height="20"]').each(function(one,items){$(items).height(window.innerHeight / 5)});
|
|
|
- $('[style-height="30"]').each(function(one,items){$(items).height(window.innerHeight * 0.3)});
|
|
|
- $('[style-height="40"]').height(window.innerHeight / 2.5);
|
|
|
+ $('[style-height="30"]').each(function(one,items){$(items).height(window.innerHeight * 0.4)});
|
|
|
+ $('[style-height="40"]').height(window.innerHeight *0.4);
|
|
|
$('[style-height="30-8"]').height(window.innerHeight * 0.4 - 220);
|
|
|
- var graph = $("#graph-1");
|
|
|
+ $('[style-height="30-1"]').each(function(one,items){$(items).height(window.innerHeight * 0.3)});
|
|
|
+ $('[style-height="30-2"]').each(function(one,items){$(items).height(window.innerHeight * 0.2)});
|
|
|
+ var graph = $("#graph-1");
|
|
|
+ graph.width(window.innerWidth - 35);
|
|
|
+ graph.height(window.innerHeight / 3.333);
|
|
|
+ if (graph.highcharts !== undefined) {
|
|
|
+ graph.highcharts().reflow();
|
|
|
+ }
|
|
|
+ var graph = $("#graph-2");
|
|
|
graph.width(window.innerWidth - 35);
|
|
|
graph.height(window.innerHeight / 3.333);
|
|
|
if (graph.highcharts !== undefined) {
|
|
|
@@ -709,7 +851,19 @@
|
|
|
|
|
|
resizeAll();
|
|
|
|
|
|
- startClock();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //startClock();
|
|
|
|
|
|
</script>
|
|
|
</body>
|
Guichuan Yu