<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>四向穿梭车监控管理</title>
|
<link rel="stylesheet" type="text/css" href="../static/css/normalize.css">
|
<link rel="stylesheet" type="text/css" href="../static/css/common_wcs.css">
|
<link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
|
<link rel="stylesheet" href="../static/css/shuttle.css">
|
<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../static/js/layer/layer.js"></script>
|
<script type="text/javascript" src="../static/layui/layui.js"></script>
|
<script type="text/javascript" src="../static/js/common.js"></script>
|
</head>
|
<body>
|
<div style="padding: 10px;height: 100%;float: left;width: 6%">
|
<div class="button-window"></div>
|
</div>
|
<div style="height: 100%;padding-left: 6%">
|
<div style="padding: 10px;height: 100%">
|
<!-- 日志监控板 -->
|
<div class="log-board">
|
<!-- <div class="command-log" id="commandLogId" style="width: 5%;">-->
|
<!--<!– <div data-shuttleNo="1" class="shuttle-command-item">–>-->
|
<!--<!– <label>1#</label>–>-->
|
<!--<!– <button class="demoBtn pos-btn">数据维护</button>–>-->
|
<!--<!– <button id="mode-1" class="demoBtn mode-btn" >设备信息</button>–>-->
|
<!--<!– </div>–>-->
|
<!-- </div>-->
|
<!-- 堆垛机状态位信息 -->
|
<div class="shuttle-state" style="width: 100%;">
|
<table id="shuttle-state-table">
|
<thead>
|
<tr>
|
<th>四向穿梭车</th>
|
<th>任务状态</th>
|
<th>小车状态</th>
|
<th>工作模式</th>
|
<th>实际库位</th>
|
<th>实际坐标</th>
|
<th>电量</th>
|
<th>当前速度</th>
|
<th>负载状态</th>
|
<th>顶升位置</th>
|
<th>充电状态</th>
|
<th>故障码</th>
|
<th>管制状态</th>
|
<th>低电量</th>
|
<th>演示模式</th>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<!-- 穿梭车状态 -->
|
<div class="shuttle-msg">
|
<table id="shuttle-msg-table">
|
<thead>
|
<tr>
|
<th>四向穿梭车</th>
|
<th>工作号</th>
|
<th>源库位</th>
|
<th>目标库位</th>
|
<th>电池电压</th>
|
<th>剩余电量</th>
|
<th>总电量</th>
|
<th>作业标记</th>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
<!-- 手动操作 -->
|
<div class="shuttle-operation">
|
<!-- 遮罩层 -->
|
<div class="shuttle-operation-shade">
|
<span class="shuttle-operation-shade-span">
|
WCS 系统运行中，请停止后操作
|
</span>
|
</div>
|
<!-- 设备任务选择 -->
|
<div class="task-select">
|
<!-- 选择 -->
|
<div id="shuttle-select" class="operator-item" style="width: 100%;">
|
<span class="select-title">四向穿梭车号</span>
|
<div class="select-container" id="shuttleRadioBoxId" style="display: flex;flex-wrap: wrap;justify-content: center;align-items: center;">
|
<!-- <label><input type="radio" name="shuttleSelect" value="1" checked> 1号穿梭车</label>-->
|
</div>
|
</div>
|
</div>
|
|
<!-- 设备任务操作 -->
|
<div class="task-operator">
|
<fieldset style="height: auto;padding-bottom: 20px;">
|
<legend>手动操作</legend>
|
<div style="display: flex;">
|
<div style="width: 30%;">
|
<div class="operator-item" style="height: auto;width: 100%;">
|
<span class="select-title">源库位/目标库位</span>
|
<div class="select-container" style="height: auto;padding: 30px 10px 20px 10px;">
|
<div class="select-container-item">
|
<span>源库位</span>
|
<label><input id="sourceLocNo" type="text" name="sourceLocNo" /></label>
|
</div>
|
<div class="select-container-item">
|
<span>目标库位</span>
|
<label><input id="distLocNo" type="text" name="distLocNo" /></label>
|
</div>
|
|
<div style="margin-top: 10px;">
|
<button class="item" onclick="shuttleOperator(9)">搬运货物</button>
|
<button class="item" onclick="shuttleOperator(4)">移动到目标库位</button>
|
<button class="item" onclick="shuttleOperator(5)">移动到目标库位(任务)</button>
|
<!-- <button class="item" onclick="shuttleOperator(16)">移动到提升机</button>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div style="width: 40%;">
|
<div class="operator-item" style="height: auto;width: 100%;">
|
<span class="select-title">相关指令</span>
|
<div class="select-container" style="height: auto;padding: 30px 10px 10px 10px;">
|
<div class="button-group">
|
<button class="item" onclick="shuttleOperator(1)">托盘顶升</button>
|
<button class="item" onclick="shuttleOperator(2)">托盘下降</button>
|
<button class="item" onclick="shuttleOperator(15)">充电开</button>
|
<button class="item" onclick="shuttleOperator(16)">充电关</button>
|
<button class="item" onclick="shuttleOperator(3)">复位</button>
|
<button class="item" onclick="shuttleOperator(12)">演示模式-开</button>
|
<button class="item" onclick="shuttleOperator(13)">演示模式-关</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
|
</div>
|
<!-- 穿梭车日志输出 -->
|
<div class="shuttle-output-board">
|
<textarea id="shuttle-output"></textarea>
|
</div>
|
</div>
|
</div>
|
|
<div id="shuttle-detl" style="display: none">
|
<div>
|
<div class="form-item">
|
<label class="form-label">穿梭车号:</label>
|
<div class="form-input">
|
<input id="shuttleNo" name="shuttleNo" class="layui-input" lay-verify="required|number" autocomplete="off" disabled="disabled">
|
</div>
|
</div>
|
<div class="form-item">
|
<label class="form-label">工作号:</label>
|
<div class="form-input">
|
<input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off">
|
</div>
|
</div>
|
<div class="form-item">
|
<label class="form-label">作业标记:</label>
|
<div class="form-input">
|
<input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off">
|
</div>
|
</div>
|
<div class="form-item form-button-container">
|
<button class="form-button" id="save">保存</button>
|
<button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
<script>
|
// 空白行数
|
var shuttleStateTableBlankRows = 0;
|
var shuttleMsgTableBlankRows = 0;
|
// 实际行数
|
var shuttleStateTableFullRows = 0;
|
var shuttleMsgTableFullRows = 0;
|
// 初始化
|
var shuttleOutputDom = document.getElementById("shuttle-output");
|
|
var ws = new WebSocket("ws://" + window.location.host + baseUrl + "/shuttle/websocket");
|
|
//当WebSocket创建成功时，触发onopen事件
|
ws.onopen = function(){
|
console.log("open");
|
}
|
|
//当客户端收到服务端发来的消息时，触发onmessage事件
|
ws.onmessage = function(e){
|
const result = JSON.parse(e.data);
|
if (result.url == "/shuttle/table/shuttle/state") {
|
setShuttleStateInfo(JSON.parse(result.data))
|
setShuttleMsgInfo(JSON.parse(result.data))
|
}else if (result.url == "/shuttle/output/shuttle") {
|
setShuttleOutput(JSON.parse(result.data))
|
}
|
// console.log(e.data,result);
|
}
|
|
//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
|
ws.onclose = function(e){
|
console.log("close");
|
}
|
|
//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
|
ws.onerror = function(e) {
|
console.log(e);
|
}
|
|
$(document).ready(function() {
|
initShuttleStateTable();
|
getShuttleStateInfo();
|
initShuttleMsgTable();
|
operatorBlockShow();
|
setShuttleRadio();
|
});
|
|
setInterval(function () {
|
getShuttleStateInfo();
|
},1000)
|
setInterval(function () {
|
getShuttleOutput();
|
operatorBlockShow();
|
},500);
|
|
// 判断手动操作模块是否可用
|
function operatorBlockShow() {
|
if (parent.systemRunning) {
|
$('.shuttle-operation').css("opacity", "0.5");
|
$('.shuttle-operation-shade').show();
|
$('.shuttle-operation-shade-span').show();
|
} else {
|
$('.shuttle-operation').css("opacity", "1");
|
$('.shuttle-operation-shade').hide();
|
$('.shuttle-operation-shade-span').hide();
|
}
|
}
|
|
function getColor(res,e){
|
$(e).val(res?"✔":"—");
|
if (res){
|
$(e).attr("style", "color: #FD482C;");
|
}else {
|
$(e).attr("style", "color: #00FF00;");
|
}
|
}
|
|
$(document).on('click ','#save', function () {
|
http.post(baseUrl+ "/shuttle/detl/update", {
|
shuttleNo: $('#shuttleNo').val(),
|
workNo: $('#workNo').val(),
|
pakMk: $('#pakMk').val(),
|
}, function (res) {
|
layer.msg("修改成功", {icon: 1,});
|
layer.close(layerDetl);
|
})
|
})
|
|
function setShuttleRadio() {
|
$.ajax({
|
url: baseUrl+ "/shuttle/table/shuttle/state",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200){
|
let table = res.data;
|
for (let i=1;i<=table.length;i++){
|
//渲染四向穿梭车选项html
|
let shuttleRadioBox = '<label><input type="radio" name="shuttleSelect" ';
|
if (i === 1) {
|
shuttleRadioBox += 'checked '
|
}
|
shuttleRadioBox += 'value="' + table[i - 1].shuttleNo + '"> ' + table[i - 1].shuttleNo + '号穿梭车</label>'
|
$("#shuttleRadioBoxId").append(shuttleRadioBox)
|
|
|
//渲染四向穿梭车数据维护和设备信息html
|
let shuttleCommandLogBox = '<div class="shuttle-command-item" data-shuttleNo="' + table[i - 1].shuttleNo + '">\n' +
|
'<label>' + table[i - 1].shuttleNo + '#</label>\n' +
|
// '<button class="demoBtn pos-btn">数据维护</button>\n' +
|
// '<button class="demoBtn mode-btn" id="mode-' + table[i - 1].shuttleNo + '">设备信息</button>\n' +
|
'</div>'
|
$("#commandLogId").append(shuttleCommandLogBox);
|
}
|
} else if (res.code === 403){
|
window.location.href = baseUrl+"/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
});
|
}
|
|
// 四向穿梭车信息表获取 ---- 表一
|
function getShuttleStateInfo() {
|
sendWs(JSON.stringify({
|
"url": "/shuttle/table/shuttle/state",
|
"data": {}
|
}))
|
}
|
|
// 四向穿梭车信息表设置 ---- 表一
|
function setShuttleStateInfo(res) {
|
let tableEl = $('#shuttle-state-table');
|
if (res.code === 200){
|
let table = res.data;
|
if (table.length > shuttleStateTableBlankRows && table.length !== shuttleStateTableFullRows) {
|
initShuttleStateTable(table.length-shuttleStateTableBlankRows);
|
shuttleStateTableFullRows = table.length;
|
}
|
for (let i=1;i<=table.length;i++){
|
// $("#mode-"+table[i-1].shuttleNo).html(table[i-1].statusVal===0?'联机':'脱机');
|
let tr = tableEl.find("tr").eq(i);
|
let suspendState;
|
if (table[i - 1]['extend'] != undefined) {
|
suspendState = table[i-1]['extend'].suspendState
|
}
|
|
setVal(tr.children("td").eq(0), table[i-1].shuttleNo);
|
setVal(tr.children("td").eq(1), table[i-1].protocolStatus$);
|
setVal(tr.children("td").eq(2), table[i-1].deviceStatus$);
|
setVal(tr.children("td").eq(3), table[i-1].mode$);
|
setVal(tr.children("td").eq(4), table[i-1].currentLocNo);
|
setVal(tr.children("td").eq(5), table[i-1].currentCode);
|
setVal(tr.children("td").eq(6), table[i-1].batteryPower);
|
setVal(tr.children("td").eq(7), table[i-1].speed);
|
setVal(tr.children("td").eq(8), table[i-1].hasPallet$);
|
setVal(tr.children("td").eq(9), table[i-1].hasLift$);
|
setVal(tr.children("td").eq(10), table[i-1].hasCharge$);
|
setVal(tr.children("td").eq(11), table[i-1].statusErrorCode$);
|
setVal(tr.children("td").eq(12), suspendState);
|
setVal(tr.children("td").eq(13), table[i-1].lowerPower);
|
setVal(tr.children("td").eq(14), table[i-1].demo$);
|
}
|
} else if (res.code === 403){
|
window.location.href = baseUrl+"/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
|
// 四向穿梭车数据表获取 ---- 表二
|
function setShuttleMsgInfo(res) {
|
let tableEl = $('#shuttle-msg-table');
|
if (res.code === 200){
|
var table = res.data;
|
if (table.length > shuttleMsgTableBlankRows && table.length !== shuttleMsgTableFullRows) {
|
initShuttleMsgTable(table.length-shuttleMsgTableBlankRows);
|
shuttleMsgTableFullRows = table.length;
|
}
|
for (var i=1;i<=table.length;i++){
|
var tr = tableEl.find("tr").eq(i);
|
let maxCellVoltage;
|
let minCellVoltage;
|
let voltage;
|
let chargeCycleTimes;
|
let surplusQuantity;
|
let countQuantity;
|
if (table[i - 1]['extend'] != undefined) {
|
maxCellVoltage = table[i-1]['extend'].maxCellVoltage
|
minCellVoltage = table[i-1]['extend'].minCellVoltage
|
voltage = table[i-1]['extend'].voltage
|
chargeCycleTimes = table[i-1]['extend'].chargeCycleTimes
|
surplusQuantity = table[i-1]['extend'].surplusQuantity
|
countQuantity = table[i-1]['extend'].countQuantity
|
}
|
|
setVal(tr.children("td").eq(0), table[i-1].shuttleNo);
|
setVal(tr.children("td").eq(1), table[i-1].taskNo);
|
setVal(tr.children("td").eq(2), table[i-1].sourceLocNo);
|
setVal(tr.children("td").eq(3), table[i-1].locNo);
|
setVal(tr.children("td").eq(4), voltage);
|
setVal(tr.children("td").eq(5), surplusQuantity);
|
setVal(tr.children("td").eq(6), countQuantity);
|
setVal(tr.children("td").eq(7), table[i-1].pakMk$);
|
}
|
} else if (res.code === 403){
|
window.location.href = baseUrl+"/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
|
// 穿梭车日志输出 -----------------------------------------------------------------------
|
function getShuttleOutput() {
|
sendWs(JSON.stringify({
|
"url": "/shuttle/output/shuttle",
|
"data": {}
|
}))
|
}
|
|
function setShuttleOutput(res) {
|
if (res.code === 200) {
|
shuttleOutput(res.data);
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
|
// 任务指令下发
|
function shuttleOperator(shuttleTaskMode) {
|
http.post(baseUrl+"/shuttle/operator/shuttle", {
|
shuttleNo: $('input[name="shuttleSelect"]:checked').val(),
|
shuttleTaskMode: shuttleTaskMode,
|
sourceLocNo: $("#sourceLocNo").val(),
|
distLocNo: $("#distLocNo").val()
|
}, function (res) {
|
layer.msg(res.msg, {icon: 1});
|
});
|
}
|
|
// 跑库
|
function moveLoc() {
|
$.ajax({
|
url: baseUrl + "/shuttle/moveLoc",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: {
|
shuttleNo: $('input[name="shuttleSelect"]:checked').val(),
|
xStart: $("#xStart").val(),
|
xTarget: $("#xTarget").val(),
|
yStart: $("#yStart").val(),
|
yTarget: $("#yTarget").val(),
|
moveType: $('input[name="moveType"]:checked').val()
|
},
|
success: function (res) {
|
if (res.code === 200) {
|
layer.msg(res.msg, {icon: 1});
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
})
|
}
|
|
|
// ------------------------------------------------------------------------------------------------
|
|
// 四向穿梭车信息表获取 ----- 表一
|
function initShuttleStateTable(row) {
|
let line;
|
if (row === undefined){
|
let one = $('#shuttle-state-table thead').height();
|
let total = $('.shuttle-state').height();
|
let count = total / one;
|
count = parseInt(count) - 1;
|
shuttleStateTableBlankRows = count;
|
line = count;
|
} else {
|
line = row;
|
}
|
let html = "";
|
for (let i = 0; i < line; i ++){
|
html += " <tr>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" </tr>\n";
|
}
|
$('#shuttle-state-table tbody').after(html);
|
}
|
|
// 穿梭车数据表获取 ----- 表二
|
function initShuttleMsgTable(row) {
|
let line;
|
if (row === undefined){
|
let one = $('#shuttle-msg-table thead').height();
|
let total = $('.shuttle-msg').height();
|
let count = total / one;
|
count = parseInt(count) - 1;
|
shuttleMsgTableBlankRows = count;
|
line = count;
|
} else {
|
line = row;
|
}
|
let html = "";
|
for (let i = 0; i < line; i ++){
|
html += " <tr>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" <td></td>\n" +
|
" </tr>\n";
|
}
|
$('#shuttle-msg-table tbody').after(html);
|
}
|
|
// 日志输出框
|
function shuttleOutput(content){
|
shuttleOutputDom.value += content;
|
shuttleOutputDom.scrollTop = shuttleOutputDom.scrollHeight;
|
}
|
|
//四向穿梭车配置参数保存
|
function shuttleParamSave() {
|
$.ajax({
|
url: baseUrl+ "/shuttle/runSpeed/" + $('input[name="shuttleSelect"]:checked').val(),
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: {
|
runSpeed: $("#runSpeed").val(),
|
chargeLine: $("#chargeLine").val(),
|
},
|
success: function (res) {
|
if (res.code === 200){
|
layer.msg("配置已保存", {icon: 1,});
|
} else if (res.code === 403){
|
window.location.href = baseUrl+"/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
});
|
}
|
|
// 详情操作 -------------------------------------------------------------------------
|
var layerDetl;
|
$(document).on('dblclick ','#shuttle-msg-table tr', function () {
|
var shuttleNo = $(this).children("td").eq(0).html();
|
if (shuttleNo !== null && shuttleNo !== "") {
|
layerDetl = layer.open({
|
type: 1,
|
title: false,
|
shadeClose: true,
|
offset: 'rt',
|
anim: 5,
|
shade: [0],
|
area: ['340px', '255px'],
|
closeBtn: 0,
|
content: $("#shuttle-detl"),
|
success: function(layero, index){
|
$.ajax({
|
url: baseUrl+ "/shuttle/table/shuttle/state",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200){
|
var table = res.data;
|
for (var i=1;i<=table.length;i++){
|
if (shuttleNo == table[i-1].shuttleNo) {
|
$('#shuttleNo').val(shuttleNo);
|
$('#workNo').val(table[i-1].taskNo);
|
$('#pakMk').val(table[i-1].pakMk$);
|
$('#token').val(table[i-1].token);
|
}
|
}
|
} else if (res.code === 403){
|
window.location.href = baseUrl+"/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
});
|
},
|
end: function () {
|
$('#shuttleNo').val("");
|
$('#workNo').val("");
|
$('#pakMk').val("");
|
$('#token').val("");
|
}
|
})
|
}
|
});
|
|
$(document).on('click ','#cancel', function () {
|
$('#shuttleNo').val("");
|
$('#workNo').val("");
|
$('#pakMk').val("");
|
$('#token').val("");
|
layer.close(layerDetl);
|
})
|
|
function sendWs(message) {
|
if (ws.readyState == WebSocket.OPEN) {
|
ws.send(message)
|
}
|
}
|
|
</script>
|
