<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>南通桑德森蓝智慧工厂</title>
|
@*<link type="text/css" href="css/style.css" rel="stylesheet" />*@
|
@*<link href="~/Content/css/screenStyle.css" rel="stylesheet" />*@
|
<script src="~/Content/js/jquery/jquery-1.10.2.min.js"></script>
|
<style type="text/css">
|
/* CSS Document */
|
* {
|
margin: 0;
|
padding: 0;
|
}
|
|
body {
|
font-family: Arial,'微软雅黑';
|
color: #fff;
|
font-size: 16px;
|
background: url('../../../../Content/images/ntsd/background.jpg') no-repeat;
|
}
|
|
table {
|
border-collapse: collapse;
|
}
|
|
li {
|
list-style: none;
|
}
|
|
a {
|
text-decoration: none;
|
}
|
|
.wrapper {
|
margin: 0 1%;
|
width: 98%;
|
height: 100%;
|
min-width: 1300px;
|
}
|
|
.wrapper:after, .content:after {
|
display: block;
|
content: " ";
|
visibility: hidden;
|
clear: both;
|
}
|
|
.fL {
|
float: left;
|
}
|
|
.fR {
|
float: right;
|
}
|
|
.clear {
|
clear: both;
|
}
|
|
.head {
|
height: 80px;
|
background: url('../../../../Content/images/ntsd/head.png') no-repeat center;
|
margin-bottom: 18px;
|
position: relative;
|
}
|
|
.head h2 {
|
font-weight: normal;
|
font-size: 30px;
|
line-height: 80px;
|
text-align: center;
|
}
|
|
.head .time {
|
font-size: 20px;
|
position: absolute;
|
right: 10px;
|
top: 50px;
|
}
|
|
.head .kuquCurrent {
|
position: absolute;
|
left: 10px;
|
top: 50px;
|
}
|
|
.head .kuquCurrent a {
|
color: #fff;
|
height: 34px;
|
line-height: 34px;
|
display: block;
|
font-weight: bold;
|
padding: 0 20px;
|
background: #69F;
|
border-radius: 15px;
|
}
|
|
.footer {
|
padding: 0 0 5px 0;
|
height: 30px;
|
line-height: 30px;
|
position: fixed;
|
bottom: 0;
|
right: 1%;
|
left: 1%;
|
text-align: right;
|
}
|
|
.footer span {
|
display: inline-block;
|
margin-left: 5px;
|
vertical-align: middle;
|
}
|
|
.footer img {
|
display: inline-block;
|
vertical-align: middle;
|
}
|
|
.content {
|
overflow: auto;
|
width: 100%;
|
}
|
|
.content .block {
|
border: 1px solid #1074e4;
|
box-sizing: border-box;
|
box-shadow: inset 2px 2px 50px #0D6CD7;
|
-webkit-box-shadow: inset 2px 2px 50px #0D6CD7;
|
}
|
|
.content .block h2 {
|
font-weight: normal;
|
font-size: 20px;
|
text-align: center;
|
line-height: 40px;
|
}
|
|
.area1 {
|
width: 70%;
|
height: 40%;
|
float: left;
|
overflow: auto;
|
}
|
/*.area2{ width:30%; height:30%; float:left; margin:0 1%;overflow:auto;}*/
|
.area3 {
|
width: 29%;
|
height: 40%;
|
float: right;
|
overflow: auto;
|
}
|
|
.area4 {
|
width: 42%;
|
height: 57%;
|
float: left;
|
margin-top: 0.8%;
|
overflow: auto;
|
}
|
|
.area5 {
|
width: 57%;
|
height: 57%;
|
float: right;
|
margin-top: 0.8%;
|
overflow: auto;
|
}
|
|
/*库区选择弹出层*/
|
.kuquChoose {
|
width: 400px;
|
position: absolute;
|
left: 50%;
|
margin-left: -200px;
|
top: 200px;
|
border: 1px solid #06F;
|
background: #364AAB;
|
border-radius: 10px;
|
}
|
|
.kuquChoose ul li {
|
margin: 10px 20px;
|
}
|
|
.kuquChoose ul li a {
|
color: #fff;
|
height: 40px;
|
line-height: 40px;
|
display: block;
|
padding: 0 10px;
|
font-size: 20px;
|
}
|
|
.kuquChoose ul li.clicked a {
|
background: #69F;
|
border-radius: 15px;
|
}
|
|
/*可视化*/
|
.displayDiv {
|
padding: 0 15px;
|
position: relative;
|
}
|
|
.displayDiv:after {
|
display: block;
|
content: " ";
|
visibility: hidden;
|
clear: both;
|
}
|
|
.colorLabel {
|
overflow: hidden;
|
font-size: 16px;
|
float: left;
|
padding: 0px 10px;
|
width: 120px;
|
border-right: 1px solid #0f60ba;
|
}
|
|
.colorLabel ul li {
|
padding:5px 0px;
|
vertical-align: middle;
|
}
|
|
.colorLabel ul li:after {
|
display: block;
|
content: " ";
|
visibility: hidden;
|
clear: both;
|
}
|
|
.colorLabel ul li label {
|
float: left;
|
margin-top: 5px;
|
}
|
|
.colorLabel ul li span {
|
float: left;
|
margin-left: 10px;
|
}
|
/*颜色²*/
|
.colorLabel .spaceState {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
display: inline-block;
|
}
|
|
.green {
|
background: #0C0;
|
}
|
|
.orange {
|
background: #FF9900;
|
}
|
|
.yellow {
|
background: #FF0;
|
}
|
|
.purple {
|
background: #9999FF;
|
}
|
|
.grey {
|
background: #aaa;
|
}
|
|
.black {
|
background: #000;
|
}
|
|
.blue {
|
background: #3498DB;
|
}
|
|
.white {
|
background: #fff;
|
}
|
|
.red {
|
background: #f00;
|
}
|
|
.brown {
|
background: #a38b74;
|
}
|
|
.navy {
|
background: #4169db;
|
}
|
|
|
/*货位显示区*/
|
.areaRight {
|
position: absolute;
|
left: 165px;
|
right: 15px;
|
top: 0;
|
}
|
|
.areaRight h3 {
|
position: relative;
|
text-align: center;
|
}
|
|
.areaRight h3:after {
|
width: 40%;
|
height: 1px;
|
background: -webkit-linear-gradient(left,#336cf9,#48daff);
|
content: "";
|
position: absolute;
|
left: 30%;
|
top: 10px;
|
z-index: -1;
|
}
|
|
.areaRight h3 span {
|
background: #0f152f;
|
display: inline-table;
|
color: #02c5fd;
|
font-weight: normal;
|
font-size: 18px;
|
padding: 0 20px;
|
}
|
|
.areaRightDiv {
|
position: relative;
|
display: block;
|
}
|
|
.areaRightDiv:after {
|
display: block;
|
content: " ";
|
visibility: hidden;
|
clear: both;
|
}
|
|
/*.showDiv{transform: translate(-50%,0);position: absolute;top: 0;left:50%; clear:both;}*/
|
.showDiv {
|
display: table;
|
margin: 10px auto;
|
}
|
|
.showDiv:after {
|
display: block;
|
content: " ";
|
visibility: hidden;
|
clear: both;
|
}
|
|
.showTable1 {
|
float: left;
|
}
|
|
.showTable1 .spaceState {
|
width: 30px;
|
height: 30px;
|
display: inline-block;
|
}
|
|
.showTable1 td {
|
padding: 5px 7px;
|
}
|
|
.showTable2 {
|
float: left;
|
}
|
|
.showTable2 td {
|
padding: 5px 7px;
|
}
|
|
.showTable2 .tagShow {
|
width: 70px;
|
height: 70px;
|
display: inline-block;
|
}
|
|
.showTable2 .tag1_white {
|
background: linear-gradient(to right,#fff 33.3%,#0f152f 66.6%);
|
background-size: 5px 100%;
|
}
|
|
.showTable2 .tag1_green {
|
background: linear-gradient(to right,#0c0 33.3%,#0f152f 66.6%);
|
background-size: 5px 100%;
|
}
|
|
.showTable2 .tag1_grey {
|
background: linear-gradient(to right,#aaa 33.3%,#0f152f 66.6%);
|
background-size: 5px 100%;
|
}
|
|
.showTable2 .tag1_red {
|
background: linear-gradient(to right,#f00 33.3%,#0f152f 66.6%);
|
background-size: 5px 100%;
|
}
|
|
.showTable2 .tag1_yellow {
|
background: linear-gradient(to right,#FF0 33.3%,#0f152f 66.6%);
|
background-size: 5px 100%;
|
}
|
|
.showTable2 .tag1_brown {
|
background: linear-gradient(to right,#a38b74 33.3%,#0f152f 66.6%);
|
background-size: 5px 100%;
|
}
|
|
|
.showTable2 .tag2_white {
|
background: repeating-linear-gradient(130deg,#0f152f 0,#0f152f 2px,#fff 4px,#aaa 6px);
|
}
|
|
.showTable2 .tag2_grey {
|
background: repeating-linear-gradient(130deg,#0f152f 0,#0f152f 2px,#aaa 4px,#aaa 6px);
|
}
|
|
.showTable2 .tag2_green {
|
background: repeating-linear-gradient(130deg,#0f152f 0,#0f152f 2px,#0c0 4px,#0c0 6px);
|
}
|
|
.showTable2 .tag2_red {
|
background: repeating-linear-gradient(130deg,#0f152f 0,#0f152f 2px,#f00 4px,#f00 6px);
|
}
|
|
.showTable2 .tag2_yellow {
|
background: repeating-linear-gradient(130deg,#0f152f 0,#0f152f 2px,#FF0 4px,#FF0 6px);
|
}
|
|
.showTable2 .tag2_brown {
|
background: repeating-linear-gradient(130deg,#0f152f 0,#0f152f 2px,#a38b74 4px,#a38b74 6px);
|
}
|
|
ul.showTag {
|
display: table;
|
margin: 0 auto;
|
}
|
|
ul.showTag:after {
|
display: block;
|
content: " ";
|
visibility: hidden;
|
clear: both;
|
}
|
|
ul.showTag li {
|
padding: 8px 0px;
|
vertical-align: middle;
|
float: left;
|
margin-right: 20px;
|
}
|
|
ul.showTag li:after {
|
display: block;
|
content: " ";
|
visibility: hidden;
|
clear: both;
|
}
|
|
ul.showTag li label {
|
float: left;
|
width: 20px;
|
height: 16px;
|
margin-top: 3px;
|
display: inline-block;
|
}
|
|
ul.showTag li span {
|
float: left;
|
margin-left: 5px;
|
}
|
|
ul.showTag li label.tag1 {
|
background: linear-gradient(to right,#fff 33.3%,#0f152f 66.6%);
|
background-size: 4px 100%;
|
}
|
|
ul.showTag li label.tag2 {
|
background: repeating-linear-gradient(120deg,#0f152f 0,#0f152f 2px,#fff 2px,#fff 4px);
|
}
|
|
ul.showTag li label.tag3 {
|
background: #fff;
|
}
|
|
/*成品库*/
|
.finishArea {
|
position: relative;
|
}
|
|
.finishArea span {
|
box-sizing: border-box;
|
text-align: center;
|
display: inline-block;
|
font-size: 26px;
|
background: -webkit-linear-gradient(left,rgba(69,140,248,0.3),rgba(8, 66,154,0.3));
|
border: 1px solid #0764c4;
|
}
|
|
.fBlock1 {
|
position: absolute;
|
width: 200px;
|
left: 50%;
|
top: 10px;
|
margin-left: -100px;
|
}
|
|
.fBlock1 span {
|
width: 200px;
|
height: 80px;
|
line-height: 80px;
|
}
|
|
.fBlock2 {
|
position: absolute;
|
width: 200px;
|
left: 50%;
|
top: 100px;
|
margin-left: -100px;
|
}
|
|
.fBlock2 span {
|
width: 95px;
|
height: 80px;
|
line-height:80px;
|
}
|
|
/*库区量表*/
|
.materialState {
|
padding: 15px 30px;
|
height: 70px;
|
box-sizing: border-box;
|
}
|
|
.materialState ul:after {
|
content: "";
|
display: block;
|
clear: both;
|
visibility: hidden;
|
}
|
|
.materialState ul li {
|
float: left;
|
width: 33%;
|
}
|
|
.materialState ul li label {
|
height: 10px;
|
border-radius: 5px;
|
display: block;
|
width: 44px;
|
margin-bottom: 5px;
|
}
|
|
.materialState ul li label.state1 {
|
background: #00a0e9;
|
border: 1px solid #00bfff;
|
}
|
|
.materialState ul li label.state2 {
|
background: #1bc85e;
|
border: 1px solid #1ef167;
|
}
|
|
.materialState ul li label.state3 {
|
background: #496283;
|
border: 1px solid #618dbf;
|
}
|
/*温度检测*/
|
.temperature {
|
padding: 20px 15px 15px 15px;
|
}
|
|
.temperature:after {
|
content: "";
|
display: block;
|
clear: both;
|
visibility: hidden;
|
}
|
|
.temperature .rowNumber {
|
border-right: 2px solid #0A51A0;
|
width: 100px;
|
float: left;
|
}
|
|
.temperature .rowNumber ul li {
|
height: 40px;
|
line-height: 40px;
|
}
|
|
.temDisplay {
|
float: left;
|
padding-left: 15px;
|
}
|
|
.temDisplay ul li {
|
height: 40px;
|
line-height: 40px;
|
}
|
|
.temDisplay ul li div {
|
height: 10px;
|
width: 200px;
|
margin-top: 15px;
|
border: 1px solid #45517A;
|
box-sizing: border-box;
|
border-radius: 5px;
|
background: #1A2D53;
|
position: relative;
|
float: left;
|
vertical-align: middle;
|
}
|
|
.temDisplay ul li div span.currentTem {
|
position: absolute;
|
top: -1px;
|
left: -1px;
|
height: 10px;
|
border-radius: 5px;
|
background: linear-gradient(left,#336cf9,#48ffc7);
|
background: -webkit-linear-gradient(left,#336cf9,#48ffc7);
|
background: -o-linear-gradient(left,#336cf9,#48ffc7);
|
background: -moz-linear-gradient(left,#336cf9,#48ffc7);
|
}
|
|
.temDisplay ul li label {
|
color: #0291d5;
|
float: left;
|
vertical-align: middle;
|
margin-left: 15px;
|
}
|
/*AGV状态监控*/
|
.agvState table {
|
width: 86%;
|
margin: 10px 7% 0 7%;
|
}
|
|
.agvState table thead tr td {
|
height: 34px;
|
line-height: 34px;
|
background: #283057;
|
font-size: 18px;
|
opacity: 0.8;
|
text-align: center;
|
}
|
|
.agvState table tr.abnormal td {
|
color: #f00;
|
}
|
|
.agvState table tbody tr td {
|
color: #0291d5;
|
font-size: 17px;
|
padding-top: 5px;
|
}
|
|
.agvState table td div {
|
position: relative;
|
width: 95px;
|
display: block;
|
height: 65px;
|
background-size: 65px;
|
}
|
|
.agvState table td div i {
|
position: absolute;
|
top: 10px;
|
left: -5px;
|
font-style: normal;
|
font-size: 18px;
|
}
|
|
.agv_normal {
|
background: url('../../../../Content/images/ntsd/agv_normal.png') no-repeat center center;
|
}
|
|
.agv_abnormal {
|
background: url('../../../../Content/images/ntsd/agv_normal.png') no-repeat center center;
|
}
|
|
/*AGV搬运任务*/
|
.agvTask table {
|
width: 96%;
|
margin: 10px 2%;
|
}
|
|
.agvTask table thead tr td {
|
height: 34px;
|
line-height: 34px;
|
background: #283057;
|
font-size: 18px;
|
opacity: 0.8;
|
}
|
|
.agvTask table td {
|
text-align: center;
|
}
|
|
.agvTask table tbody td {
|
border-bottom: 1px dashed #314c83;
|
height: 40px;
|
line-height: 20px;
|
color: #0291d5;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="wrapper">
|
<div class="head">
|
<div class="kuquCurrent">
|
<a href="#" id="txtStockAreaName"></a>
|
</div>
|
<h2>南通桑德森蓝智慧工厂总览数据图</h2>
|
<div class="time" id="txtRealTime"></div>
|
</div>
|
<div class="content">
|
<div class="block area1">
|
<h2>二车间</h2>
|
<div class="displayDiv">
|
<div class="colorLabel">
|
<ul>
|
<li>
|
<label class="spaceState grey"></label><span>空货位</span>
|
</li>
|
<li>
|
<label class="spaceState green"></label><span>满货位</span>
|
</li>
|
<li>
|
<label class="spaceState red"></label><span>预入库锁定</span>
|
</li>
|
<li>
|
<label class="spaceState yellow"></label><span>预出库锁定</span>
|
</li>
|
<li>
|
<label class="spaceState brown"></label><span>报废</span>
|
</li>
|
</ul>
|
</div>
|
<div class="areaRight">
|
<h3><span>冰箱生产线</span></h3>
|
<div class="areaRightDiv">
|
<div class="showDiv" id="locationView">
|
@*<table class="showTable1" border="0" cellpadding="0" cellspacing="0">
|
<tr>
|
<td><a href="#" class="spaceState red"></a></td>
|
<td><a href="#" class="spaceState red"></a></td>
|
<td><a href="#" class="spaceState grey"></a></td>
|
</tr>
|
<tr>
|
<td><a href="#" class="spaceState grey"></a></td>
|
<td><a href="#" class="spaceState yellow"></a></td>
|
<td><a href="#" class="spaceState brown"></a></td>
|
</tr>
|
</table>
|
<table class="showTable2" border="0" cellpadding="0" cellspacing="0">
|
<tr>
|
<td><a href="#" class="tagShow tag1_green"></a></td>
|
<td><a href="#" class="tagShow tag1_grey"></a></td>
|
<td><a href="#" class="tagShow tag2_yellow"></a></td>
|
<td><a href="#" class="tagShow tag2_green"></a></td>
|
<td><a href="#" class="tagShow tag2_grey"></a></td>
|
<td><a href="#" class="tagShow tag2_grey"></a></td>
|
<td><a href="#" class="tagShow tag1_grey"></a></td>
|
</tr>
|
</table>*@
|
</div>
|
<ul class="showTag">
|
<li>
|
<label class="tag1"></label><span>原材料空托盘货位</span>
|
</li>
|
<li>
|
<label class="tag2"></label><span>产物货位</span>
|
</li>
|
<li>
|
<label class="tag3"></label><span>产物空托盘货位</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="block area3">
|
<h2>成品库</h2>
|
<div class="finishArea">
|
<div class="fBlock1"><span>地托</span></div>
|
<div class="fBlock2">
|
@*<span style="margin-right:10px;">空托</span><span>空托</span>*@
|
</div>
|
</div>
|
</div>
|
<div class="block area4">
|
<h2>AGV状态监控</h2>
|
<div class="agvState">
|
<table id="tbAgvMonitor" border="0" cellpadding="0" cellspacing="0">
|
<thead>
|
<tr>
|
<td width="25%">车号</td>
|
<td width="15%">状态</td>
|
<td width="25%">异常原因</td>
|
<td width="35%">时间</td>
|
</tr>
|
</thead>
|
<tbody>
|
@*<tr class="abnormal">
|
<td align="center"><div class="agv_abnormal"><i>1#</i></div></td>
|
<td align="center">异常</td>
|
<td align="center">报警</td>
|
<td align="center">2019-04-02 13:00:00</td>
|
</tr>
|
<tr class="abnormal">
|
<td align="center"><div class="agv_abnormal"><i>2#</i></div></td>
|
<td align="center">异常</td>
|
<td align="center">报警</td>
|
<td align="center">2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td align="center"><div class="agv_normal"><i>3#</i></div></td>
|
<td align="center">正常</td>
|
<td align="center"></td>
|
<td align="center">2019-07-02 10:20:05</td>
|
</tr>
|
<tr class="abnormal">
|
<td align="center"><div class="agv_abnormal"><i>4#</i></div></td>
|
<td align="center">异常</td>
|
<td align="center">报警</td>
|
<td align="center">2019-04-02 13:00:00</td>
|
</tr>
|
<tr>
|
<td align="center"><div class="agv_normal"><i>5#</i></div></td>
|
<td align="center">正常</td>
|
<td align="center"></td>
|
<td align="center">2019-07-02 10:20:05</td>
|
</tr>
|
<tr class="abnormal">
|
<td align="center"><div class="agv_abnormal"><i>6#</i></div></td>
|
<td align="center">异常</td>
|
<td align="center">报警</td>
|
<td align="center">2019-04-02 13:26:42</td>
|
</tr>*@
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div class="block area5">
|
<h2>AGV搬运任务</h2>
|
<div class="agvTask">
|
<table id="tbAgvCarryTask" border="0" cellpadding="0" cellspacing="0">
|
<thead>
|
<tr>
|
<td width="14%">任务号</td>
|
<td width="12%">任务类型</td>
|
<td width="16%">起点货位</td>
|
<td width="16%">终点货位</td>
|
<td width="10%">状态</td>
|
<td width="10%">车号</td>
|
<td width="22%">创建时间</td>
|
</tr>
|
</thead>
|
<tbody>
|
@*<tr>
|
<td>RKT000229</td>
|
<td>转运</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>未执行</td>
|
<td>1号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000230</td>
|
<td>移库</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>取消</td>
|
<td>2号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000228</td>
|
<td>移库</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>未执行</td>
|
<td>3号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000226</td>
|
<td>转运</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>取消</td>
|
<td>1号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000225</td>
|
<td>转运</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>取消</td>
|
<td>3号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000224</td>
|
<td>移库</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>未执行</td>
|
<td>2号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000228</td>
|
<td>移库</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>未执行</td>
|
<td>3号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000226</td>
|
<td>转运</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>取消</td>
|
<td>1号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000225</td>
|
<td>转运</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>取消</td>
|
<td>3号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>
|
<tr>
|
<td>RKT000224</td>
|
<td>移库</td>
|
<td>CK001-N-07-02</td>
|
<td>CK001-N-05-01</td>
|
<td>未执行</td>
|
<td>2号车</td>
|
<td>2019-04-02 13:26:42</td>
|
</tr>*@
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="footer">
|
技术支持：<span style="line-height:20px;">焕智科技</span>
|
</div>
|
</div>
|
|
<script src="~/js/core/common.js"></script>
|
<script>
|
var para = {
|
runIndex: 0,
|
urls: getUrl(),
|
stock: {},
|
stockAreas: {},
|
displayStockAreas: ["YLKT", "CPMRK", "CPKTE"], // "CPKTS"
|
rowList: {},
|
agvStatus: {},
|
agvCarryTask: {},
|
};
|
|
//执行
|
$(function () {
|
initHeight();
|
getStock();
|
getStockAreas();
|
|
setInterval("time()", 1000);
|
//para.runIndex = 13;
|
run();
|
self.setInterval(run, 10000);
|
})
|
|
function run() {
|
console.log("para.runIndex:");
|
console.log(para.runIndex);
|
|
if (para.displayStockAreas.indexOf(para.stockAreas[para.runIndex].CN_S_AREA_CODE) < 0) {
|
console.log(para.runIndex + "----" + para.stockAreas.length);
|
if (para.runIndex == para.stockAreas.length) {
|
console.log("未找到！");
|
return;
|
}
|
addRunIndex();
|
run();
|
return;
|
} else {
|
console.log(para.stockAreas[para.runIndex].CN_S_AREA_CODE);
|
}
|
|
$("#txtStockAreaName").text(para.stock.CN_S_STOCK_NAME);
|
|
locationFixedView();
|
|
//getRowsList();
|
//if (para.rowList.length == 0) {
|
// addRunIndex();
|
// run();
|
// return;
|
//}
|
//getTunnelLocations();
|
//locationView();
|
chengPinEmptyTray();
|
agvMonitorViw();
|
agvCarryTaskView();
|
addRunIndex();
|
}
|
|
//初始化高度
|
function initHeight() {
|
var clientHeight = document.documentElement.clientHeight + 20; //$(window).height()
|
|
$(".wrapper").css("height", clientHeight);
|
$(".content").css("height", clientHeight - 135);
|
$(window).resize(function () {
|
$(".wrapper").css("height", clientHeight);
|
$(".content").css("height", clientHeight - 135);
|
})
|
}
|
|
//获取仓库
|
function getStock() {
|
ajaxManage({
|
url: para.urls.StockList,
|
success: function (result) {
|
//console.log("result:");
|
if (result.Data != null) {
|
para.stock = result.Data[0];
|
}
|
//console.log(para.stock);
|
}
|
});
|
}
|
|
//获取库区
|
function getStockAreas() {
|
ajaxManage({
|
url: para.urls.AreaList + "?stockCode=" + para.stock.CN_S_STOCK_CODE,
|
success: function (result) {
|
console.log("stockAreas:");
|
if (result.Data != null) {
|
para.stockAreas = result.Data;
|
}
|
console.log(para.stockAreas);
|
}
|
});
|
}
|
|
//获取行
|
function getRowsList() {
|
ajaxManage({
|
url: para.urls.GetRowsList + "?stockCode=" + para.stock.CN_S_STOCK_CODE + "&areaCode=" + para.stockAreas[para.runIndex].CN_S_AREA_CODE,
|
success: function (result) {
|
if (result.Data != null) {
|
para.rowList = result.Data;
|
}
|
console.log(" para.rowList：");
|
console.log(para.rowList);
|
}
|
});
|
}
|
|
//获取货位
|
function getTunnelLocations() {
|
ajaxManage({
|
url: para.urls.GetTunnelLocations + "?stockCode=" + para.stock.CN_S_STOCK_CODE + "&areaCode=" + para.stockAreas[para.runIndex].CN_S_AREA_CODE,
|
success: function (result) {
|
if (result.Data != null) {
|
para.locations = result.Data;
|
}
|
console.log("货位：");
|
console.log(para.locations);
|
}
|
});
|
}
|
|
function getLocations(areaCode) {
|
var locations = [];
|
ajaxManage({
|
url: para.urls.GetTunnelLocations + "?stockCode=" + para.stock.CN_S_STOCK_CODE + "&areaCode=" + areaCode,
|
success: function (result) {
|
locations = result.Data;
|
//if (result.Data != null) {
|
// para.locations = result.Data;
|
//}
|
console.log("货位：");
|
console.log(locations);
|
}
|
});
|
return locations;
|
}
|
|
function getRows(areaCode) {
|
var rows = [];
|
ajaxManage({
|
url: para.urls.GetRowsList + "?stockCode=" + para.stock.CN_S_STOCK_CODE + "&areaCode=" + areaCode,
|
success: function (result) {
|
if (result.Data != null) {
|
rows = result.Data;
|
}
|
console.log(" rows：");
|
console.log(rows);
|
}
|
});
|
return rows;
|
}
|
|
//固定货位展示
|
function locationFixedView() {
|
var tableStr1 = "";
|
var tableStr2 = "";
|
$.each(para.stockAreas, function (index, value) {
|
if (value.CN_S_AREA_CODE == "CPKTE") {
|
tableStr1 += '<table class="showTable1" border="0" cellpadding="0" cellspacing="0">';
|
var rows = getRows(value.CN_S_AREA_CODE);
|
var locations = getLocations(value.CN_S_AREA_CODE);
|
tableStr1 += splitLocationView(value.CN_S_AREA_CODE, rows, locations, true);
|
tableStr1 += "</table>";
|
} else if (value.CN_S_AREA_CODE == "YLKT") {
|
var rows = getRows(value.CN_S_AREA_CODE);
|
var locations = getLocations(value.CN_S_AREA_CODE);
|
|
tableStr2 = '<table class="showTable2" border="0" cellpadding="0" cellspacing="0"><tr>';
|
var maxCol = "";
|
$.each(rows, function (index, value) {
|
$.each(locations, function (index, location) {
|
if (location.CN_S_ROW.trim() === value.CN_S_ROW) {
|
if (parseInt(location.CN_S_COL) > maxCol)
|
maxCol = parseInt(location.CN_S_COL);
|
tableStr2 += "<td><a href='#' class='tagShow " + "tag1_" + getLocationColor(location.VIEW_STATE.trim()) + "'></a></td>";
|
|
if (index == 1) {
|
var rows2 = getRows("CPMRK");
|
var locations2 = getLocations("CPMRK");
|
var maxCol2 = "";
|
$.each(rows2, function (index2, value2) {
|
$.each(locations2, function (index, location2) {
|
if (location2.CN_S_ROW.trim() === value2.CN_S_ROW) {
|
if (parseInt(location2.CN_S_COL) > maxCol2)
|
maxCol2 = parseInt(location2.CN_S_COL);
|
tableStr2 += "<td><a href='#' class='tagShow " + "tag2_" + getLocationColor(location2.VIEW_STATE.trim()) + "'></a></td>";
|
}
|
});
|
});
|
}
|
}
|
});
|
|
});
|
tableStr2 += "</tr>";
|
}
|
//else if (value.CN_S_AREA_CODE == "YLKT" || value.CN_S_AREA_CODE == "CPMRK") {
|
// var rows = getRows(value.CN_S_AREA_CODE);
|
// var locations = getLocations(value.CN_S_AREA_CODE);
|
// if (tableStr2 == "") {
|
// tableStr2 = '<table class="showTable2" border="0" cellpadding="0" cellspacing="0"><tr>';
|
// tableStr2 += splitLocationView(value.CN_S_AREA_CODE, rows, locations, false);
|
// } else {
|
// tableStr2 += splitLocationView(value.CN_S_AREA_CODE, rows, locations, false);
|
// }
|
//}
|
});
|
tableStr2 += "</tr></table>";
|
$("#locationView").html("");
|
console.log(tableStr1 + tableStr2);
|
$("#locationView").append(tableStr1 + tableStr2);
|
}
|
|
function splitLocationView(areaCode, rows, locations, needTr) {
|
var tableStr = "";
|
var maxCol = "";
|
$.each(rows, function (index, value) {
|
if (needTr) {
|
tableStr += "<tr>";
|
}
|
$.each(locations, function (index, location) {
|
if (location.CN_S_ROW.trim() === value.CN_S_ROW) {
|
if (parseInt(location.CN_S_COL) > maxCol)
|
maxCol = parseInt(location.CN_S_COL);
|
if (areaCode == "YLKT") {
|
tableStr += "<td><a href='#' class='tagShow " + "tag1_" + getLocationColor(location.VIEW_STATE.trim()) + "'></a></td>";
|
} else if (areaCode == "CPMRK") {
|
tableStr += "<td><a href='#' class='tagShow " + "tag2_" + getLocationColor(location.VIEW_STATE.trim()) + "'></a></td>";
|
}
|
else {
|
tableStr += "<td><a href='#' class='spaceState " + getLocationColor(location.VIEW_STATE.trim()) + "'></a></td>";
|
}
|
}
|
});
|
if (needTr) {
|
tableStr += "</tr>";
|
}
|
});
|
|
return tableStr;
|
}
|
|
//货位可视化
|
function locationView() {
|
var areaCode = para.stockAreas[para.runIndex].CN_S_AREA_CODE;
|
|
var tableStr = '<table class="showTable1" border="0" cellpadding="0" cellspacing="0">';
|
|
if (areaCode == "YLKT" || areaCode == "CPMRK") {
|
tableStr = '<table class="showTable2" border="0" cellpadding="0" cellspacing="0">';
|
}
|
|
|
var maxCol = "";
|
$.each(para.rowList, function (index, value) {
|
tableStr += ("<tr><td class='colNum'>" + value.CN_S_ROW + "排</td>");
|
$.each(para.locations, function (index, location) {
|
if (location.CN_S_ROW.trim() === value.CN_S_ROW) {
|
if (parseInt(location.CN_S_COL) > maxCol)
|
maxCol = parseInt(location.CN_S_COL);
|
|
if (areaCode == "YLKT") {
|
tableStr += "<td><a href='#' class='tagShow " + "tag1_" + getLocationColor(location.VIEW_STATE.trim()) + "'></a></td>";
|
} else if (areaCode == "CPMRK") {
|
tableStr += "<td><a href='#' class='tagShow " + "tag2_" + getLocationColor(location.VIEW_STATE.trim()) + "'></a></td>";
|
}
|
else {
|
tableStr += "<td><a href='#' class='spaceState " + getLocationColor(location.VIEW_STATE.trim()) + "'></a></td>";
|
}
|
|
|
}
|
});
|
tableStr += "</tr>";
|
});
|
$("#locationView").html("");
|
$("#locationView").append(tableStr + "</table>");
|
}
|
|
//成品空托区
|
function chengPinEmptyTray() {
|
ajaxManage({
|
url: para.urls.GetTunnelLocations + "?stockCode=" + para.stock.CN_S_STOCK_CODE + "&areaCode=CPKTE,CPKTD", //CPKTS
|
success: function (result) {
|
if (result.Data != null) {
|
var locations = result.Data;
|
console.log("成品空托区货位：");
|
console.log(locations);
|
var str = '<span style="margin-right:10px;">' + (locations[0].VIEW_STATE == "空" ? "空托" : "满托") + '</span>';
|
str += ('<span>' + (locations[1].VIEW_STATE == "空" ? "空托" : "满托") + '</span>');
|
//<span style="margin-right:10px;">空托</span><span>空托</span>
|
$(".fBlock2").html("");
|
$(".fBlock2").append(str);
|
}
|
}
|
});
|
}
|
|
//AGV状态监控
|
function agvMonitorViw() {
|
$("#tbAgvMonitor tbody").html("");
|
|
ajaxManage({
|
url: para.urls.GetAllAgvStatus,
|
success: function (result) {
|
console.log("GetAllAgvStatus:");
|
console.log(result);
|
|
para.agvStatus = result.List;
|
if (para.agvStatus.length > 0) {
|
$.each(para.agvStatus, function (index, value) {
|
if (value.agvErrMsg == "") {
|
//正常
|
$("#tbAgvMonitor tbody").append("<tr>");
|
$("#tbAgvMonitor tbody").append("<td align='center'><div class='agv_normal'><i>" + value.agvNo + "#</i></div></td>"); //agv_normal
|
$("#tbAgvMonitor tbody").append("<td align='center'>正常</td>");
|
$("#tbAgvMonitor tbody").append("<td align='center'>" + value.agvErrMsg + "</td>");
|
$("#tbAgvMonitor tbody").append("<td align='center'>" + value.createDate + "</td>");
|
$("#tbAgvMonitor tbody").append("</tr>");
|
} else {
|
//异常
|
$("#tbAgvMonitor tbody").append("<tr class='abnormal'>");
|
$("#tbAgvMonitor tbody").append("<td align='center'><div class='agv_abnormal'><i>" + value.agvNo + "#</i></div></td>"); //agv_normal
|
$("#tbAgvMonitor tbody").append("<td align='center'>异常</td>");
|
$("#tbAgvMonitor tbody").append("<td align='center'>" + value.agvErrMsg + "</td>");
|
$("#tbAgvMonitor tbody").append("<td align='center'>" + value.createDate + "</td>");
|
$("#tbAgvMonitor tbody").append("</tr>");
|
}
|
});
|
}
|
//$("#tbAgvMonitor tbody").append("<tr class='abnormal'>");
|
//$("#tbAgvMonitor tbody").append("<td align='center'><div class='agv_abnormal'><i>1#</i></div></td>"); //agv_normal
|
//$("#tbAgvMonitor tbody").append("<td align='center'>异常</td>");
|
//$("#tbAgvMonitor tbody").append("<td align='center'>报警</td>");
|
//$("#tbAgvMonitor tbody").append("<td align='center'>2019-04-02 13:00:00</td>");
|
//$("#tbAgvMonitor tbody").append("</tr>");
|
}
|
});
|
}
|
|
//AGV搬运任务
|
function agvCarryTaskView() {
|
$("#tbAgvCarryTask tbody").html("");
|
|
ajaxManage({
|
url: para.urls.GetMongoTaskStatus,
|
success: function (result) {
|
console.log("GetMongoTaskStatus:");
|
console.log(result);
|
|
if (result != null) {
|
para.agvCarryTask = result;
|
$.each(para.agvCarryTask, function (index, value) {
|
$("#tbAgvCarryTask tbody").append("<tr>");
|
$("#tbAgvCarryTask tbody").append("<td>" + value.CN_S_TASK_NO + "</td>");
|
$("#tbAgvCarryTask tbody").append("<td>" + value.CN_S_TASK_TYPE + "</td>");
|
$("#tbAgvCarryTask tbody").append("<td>" + value.CN_S_START_BIT + "</td>");
|
$("#tbAgvCarryTask tbody").append("<td>" + value.CN_S_END_BIT + "</td>");
|
$("#tbAgvCarryTask tbody").append("<td>" + value.CN_S_STATUS + "</td>");
|
if (value.CN_S_ForkliftNo == undefined) {
|
$("#tbAgvCarryTask tbody").append("<td></td>");
|
} else {
|
$("#tbAgvCarryTask tbody").append("<td>" + value.CN_S_ForkliftNo + "号车</td>");
|
}
|
$("#tbAgvCarryTask tbody").append("<td>" + value.CN_T_CREATE.substring(0, 19).replace("T", " ") + "</td>");
|
$("#tbAgvCarryTask tbody").append("</tr>");
|
});
|
}
|
}
|
});
|
|
|
|
}
|
|
//日期
|
function time() {
|
var vWeek, vWeek_s, vDay;
|
vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
var date = new Date();
|
year = date.getFullYear();
|
month = date.getMonth() + 1;
|
day = date.getDate();
|
hours = date.getHours();
|
minutes = date.getMinutes();
|
seconds = date.getSeconds() < 10 ? ("0" + date.getSeconds()) : date.getSeconds();
|
vWeek_s = date.getDay();
|
document.getElementById("txtRealTime").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];
|
};
|
|
function addRunIndex() {
|
para.runIndex++;
|
if (para.runIndex == para.stockAreas.length) {
|
para.runIndex = 0;
|
}
|
}
|
|
//根据状态返回货位颜色
|
function getLocationColor(state) {
|
if (state == "空") {
|
return "grey";//return "white";
|
} else if (state == "满") {
|
return "green";
|
} else if (state == "预入库锁定") {
|
return "red";
|
} else if (state == "预出库锁定") {
|
return "yellow";
|
} else if (state == "报废") {
|
return "navy";
|
} else {
|
return "white";
|
}
|
}
|
|
//地址
|
function getUrl() {
|
return {
|
"StockList": "@Url.Action("StockList")",
|
"AreaList": "@Url.Action("AreaList")",
|
"GetRowsList": "@Url.Action("GetRowsList")",
|
"GetTunnelLocations": "@Url.Action("GetTunnelLocations")",
|
"GetAllAgvStatus": "@Url.Action("GetAllAgvStatus")",
|
"GetMongoTaskStatus": "@Url.Action("GetMongoTaskStatus")"
|
};
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
</html>
|
