zy-wcs.git - Gitblit

			@@ -4,7 +4,7 @@
			<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.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>
			@@ -13,175 +13,167 @@
			<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>运行方向2</th>
			<th>充电状态</th>
			<th>故障状态</th>
			<th>故障码</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			</div>
			<!-- 穿梭车状态 -->
			<div class="shuttle-msg">
			<table id="shuttle-msg-table">
			<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>
			</tr>
			<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 class="shuttle-operation">
			<!-- 遮罩层 -->
			<div class="shuttle-operation-shade">
			</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 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 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(18)">搬运货物</button>
			<button class="item" onclick="shuttleOperator(14)">移动到目标库位</button>
			<button class="item" onclick="shuttleOperator(16)">移动到提升机</button>
			</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 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(3)">托盘顶升</button>
			<button class="item" onclick="shuttleOperator(4)">托盘下降</button>
			<button class="item" onclick="shuttleOperator(15)">充电开关</button>
			<button class="item" onclick="shuttleOperator(9)">复位</button>
			</div>
			</div>
			</div>
			</div>

			</div>
			</fieldset>
			</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 class="shuttle-output-board">
			<textarea id="shuttle-output"></textarea>
			</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">
			<label class="form-label">令牌:</label>
			<div class="form-input">
			<input id="token" name="token" 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 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>
			@@ -193,18 +185,46 @@
			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();
			getShuttleMsgInfo();
			operatorBlockShow();
			setShuttleRadio();
			});

			setInterval(function () {
			getShuttleStateInfo()
			getShuttleMsgInfo();
			getShuttleStateInfo();
			},1000)
			setInterval(function () {
			getShuttleOutput();
			@@ -238,7 +258,6 @@
			shuttleNo: $('#shuttleNo').val(),
			workNo: $('#workNo').val(),
			pakMk: $('#pakMk').val(),
			token: $('#token').val(),
			}, function (res) {
			layer.msg("修改成功", {icon: 1,});
			layer.close(layerDetl);
			@@ -282,105 +301,110 @@

			// 四向穿梭车信息表获取 ---- 表一
			function getShuttleStateInfo() {
			sendWs(JSON.stringify({
			"url": "/shuttle/table/shuttle/state",
			"data": {}
			}))
			}

			// 四向穿梭车信息表设置 ---- 表一
			function setShuttleStateInfo(res) {
			let tableEl = $('#shuttle-state-table');
			$.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;
			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);
			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].free$);
			setVal(tr.children("td").eq(3), table[i-1].point$);
			setVal(tr.children("td").eq(4), table[i-1].coord$);
			setVal(tr.children("td").eq(5), table[i-1].powerPercent$);
			setVal(tr.children("td").eq(6), table[i-1].speed);
			setVal(tr.children("td").eq(7), table[i-1].loadState$);
			setVal(tr.children("td").eq(8), table[i-1].liftPosition$);
			setVal(tr.children("td").eq(9), table[i-1].runDir$);
			setVal(tr.children("td").eq(10), table[i-1].runDir2$);
			setVal(tr.children("td").eq(11), table[i-1].chargState$);
			setVal(tr.children("td").eq(12), table[i-1].errState$);
			setVal(tr.children("td").eq(13), table[i-1].errCode);
			}
			} else if (res.code === 403){
			window.location.href = baseUrl+"/login";
			} else {
			console.log(res.msg);
			}
			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 getShuttleMsgInfo() {
			function setShuttleMsgInfo(res) {
			let tableEl = $('#shuttle-msg-table');
			$.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;
			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);
			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), table[i-1].maxCellVoltage$);
			setVal(tr.children("td").eq(5), table[i-1].minCellVoltage$);
			setVal(tr.children("td").eq(6), table[i-1].voltage$);
			setVal(tr.children("td").eq(7), table[i-1].chargeCycleTimes);
			setVal(tr.children("td").eq(8), table[i-1].surplusQuantity);
			setVal(tr.children("td").eq(9), table[i-1].countQuantity);
			setVal(tr.children("td").eq(10), table[i-1].statusSum.mileage);
			setVal(tr.children("td").eq(11), table[i-1].pakMk$);
			setVal(tr.children("td").eq(12), table[i-1].currentLocNo);
			setVal(tr.children("td").eq(13), table[i-1].token);
			if (table[i-1].shuttleNo == parseInt($('input[name="shuttleSelect"]:checked').val())) {
			$("#runSpeedText").text(table[i-1].runSpeed)
			$("#chargeLineText").text(table[i-1].chargeLine + "%")
			}
			}
			} else if (res.code === 403){
			window.location.href = baseUrl+"/login";
			} else {
			console.log(res.msg);
			}
			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() {
			$.ajax({
			url: baseUrl + "/shuttle/output/shuttle",
			headers: {'token': localStorage.getItem('token')},
			method: 'POST',
			success: function (res) {
			if (res.code === 200) {
			shuttleOutput(res.data);
			} else if (res.code === 403) {
			window.location.href = baseUrl + "/login";
			} else {
			console.log(res.msg);
			}
			}
			})
			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);
			}
			}

			// 任务指令下发
			@@ -393,6 +417,32 @@
			}, 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);
			}
			}
			})
			}


			@@ -558,5 +608,10 @@
			layer.close(layerDetl);
			})

			function sendWs(message) {
			if (ws.readyState == WebSocket.OPEN) {
			ws.send(message)
			}
			}

			</script>