zy-wcs.git - Gitblit

			@@ -1,626 +1,98 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<meta charset="utf-8">
			<title>堆垛机监控管理</title>
			<meta name="renderer" content="webkit">
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
			<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/crn.css">
			<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../../static/js/common.js"></script>
			<script type="text/javascript" src="../../static/js/layer/layer.js"></script>
			<style>
			.demoBtn {
			vertical-align: middle;
			width: 20%;
			height: 25px;
			left: 0;
			top: 0;
			text-shadow: inherit;
			font-size: 15px;
			margin-left: 5px;
			margin-right: 5px;
			display: inline-block;
			background-color: #FF5722;
			border: none;
			color: #FFF;
			box-shadow: 1px 1px 5px #B6B6B6;
			border-radius: 3px;
			cursor: pointer;
			}

			.demoBtn:hover {
			opacity: 0.8
			}
			.demoBtn:focus {
			outline: 0;
			}
			</style>
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			<link rel="stylesheet" href="../../static/wms/layui/css/layui.css" media="all">
			<link rel="stylesheet" href="../../static/wms/css/admin.css?v=318" media="all">
			<link rel="stylesheet" href="../../static/wms/css/cool.css" media="all">
			</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">
			<h3>执行中的命令</h3>
			<div class="crn-command-item">
			<label>1#</label>
			<button id="demoBtn-1" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn1" disabled="disabled">
			</div>
			<div class="crn-command-item">
			<label>2#</label>
			<button id="demoBtn-2" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>
			<!-- <span> </span>-->
			<input id="crn2" disabled="disabled">
			</div>
			</div>
			<!-- 堆垛机状态位信息 -->
			<div class="crn-state">
			<table id="crn-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>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			</div>
			<!-- 堆垛机状态 -->
			<div class="crn-msg">
			<table id="crn-msg-table">
			<thead>
			<tr>
			<th>堆垛机</th>
			<th>工作号</th>
			<th>状态</th>
			<th>源站</th>
			<th>目标站</th>
			<th>源库位</th>
			<th>目标库位</th>
			<th>走行速度（m/min)</th>
			<th>升降速度（m/min)</th>
			<th>叉牙速度（m/min)</th>
			<th>走行距离(Km)</th>
			<th>升降距离(Km)</th>
			<th>走行时长(H)</th>
			<th>升降时长(H)</th>
			</tr>
			</thead>
			<tbody>
			</tbody>
			</table>
			</div>
			<!-- 手动操作 -->
			<div class="crn-operation">

			<!-- 遮罩层 -->
			<div class="crn-operation-shade">
			<span class="crn-operation-shade-span">
			WCS 系统运行中，请停止后操作
			</span>
			</div>

			<!-- 设备任务选择 -->
			<div class="task-select">
			<!-- 堆垛机选择 -->
			<div id="crn-select" class="operator-item">
			<span class="select-title">堆垛机号</span>
			<div class="select-container">
			<label><input type="radio" name="crnSelect" value="1" checked> 1号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="2"> 2号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="3"> 3号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="4"> 4号堆垛机</label>
			<label><input type="radio" name="crnSelect" value="5"> 5号堆垛机</label>
			</div>
			</div>
			<!-- 源站/源库位选择 -->
			<div id="source-select" class="operator-item">
			<span class="select-title">源站/源库位</span>
			<div class="select-container">
			<div class="select-container-item">
			<span>站</span>
			<label><input id="sourceStaNo" type="number" name="points" min="0" /></label>
			</div>
			<div class="select-container-item">
			<span>排</span>
			<label><input id="sourceRow" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			<div class="select-container-item">
			<span>列</span>
			<label><input id="sourceBay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
			</div>
			<div class="select-container-item">
			<span>层</span>
			<label><input id="sourceLev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			</div>
			</div>
			<!-- 目标站/目标库位选择 -->
			<div id="target-select" class="operator-item">
			<span class="select-title">目标站/目标库位</span>
			<div class="select-container">
			<div class="select-container-item">
			<span>站</span>
			<label><input id="staNo" type="number" name="points" min="0" /></label>
			</div>
			<div class="select-container-item">
			<span>排</span>
			<label><input id="row" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			<div class="select-container-item">
			<span>列</span>
			<label><input id="bay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
			</div>
			<div class="select-container-item">
			<span>层</span>
			<label><input id="lev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>
			</div>
			</div>
			</div>
			</div>

			<!-- 设备任务操作 -->
			<div class="task-operator">
			<fieldset>
			<legend>手动操作</legend>
			<div class="button-group">
			<button class="item" onclick="put()">入库</button>
			<button class="item" onclick="take()">出库</button>
			<button class="item" onclick="stockMove()">库位转移</button>
			<button class="item" onclick="siteMove()">站到站</button>
			<!-- <button class="item" onclick="bacOrigin()">回原点</button>-->
			<!-- <button class="item" onclick="reverseOrigin()">反原点</button>-->
			<!-- <button class="item" onclick="coorMove()">坐标移行</button>-->
			<button class="item" onclick="taskComplete()">任务完成</button>
			<!-- <button class="item" onclick="pause()">暂停</button>-->
			<!-- <button class="item" onclick="boot()">启动</button>-->
			<button class="item" onclick="clearCommand()">清除命令</button>
			<button class="item" onclick="handleReset()">复位</button>
			</div>
			</fieldset>
			</div>

			</div>
			<!-- 堆垛机日志输出 -->
			<div class="crn-output-board">
			<textarea id="crn-output"></textarea>
			<div class="layui-fluid">
			<div class="layui-card">
			<div class="layui-card-body">
			<!-- <div class="layui-form toolbar" id="search-box">-->
			<!-- <div class="layui-form-item">-->
			<!-- <div class="layui-inline">-->
			<!-- <div class="layui-input-inline">-->
			<!-- <input class="layui-input" type="text" name="id" placeholder="编号" autocomplete="off">-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- <div class="layui-inline">&emsp;-->
			<!-- <button class="layui-btn icon-btn" lay-filter="search" lay-submit>-->
			<!-- <i class="layui-icon"></i>刷新-->
			<!-- </button>-->
			<!-- <button class="layui-btn icon-btn" lay-filter="reset" lay-submit>-->
			<!-- <i class="layui-icon"></i>重置-->
			<!-- </button>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- </div>-->
			<table class="layui-hide" id="crn" lay-filter="crn"></table>
			</div>
			</div>
			</div>

			<script type="text/html" id="toolbar">
			<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData" style="visibility: hidden">新增</button>
			<button class="layui-btn layui-btn-sm layui-btn-danger" id="btn-delete" lay-event="deleteData" style="visibility: hidden">删除</button>
			<button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData" style="float: right;visibility: hidden">导出</button>
			</div>
			</script>

			<script type="text/html" id="operate">
			<a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs btn-edit" lay-event="del">删除</a>
			</script>

			<script type="text/javascript" src="../../static/wms/js/jquery/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../../static/wms/layui/layui.js" charset="utf-8"></script>
			<script type="text/javascript" src="../../static/wms/js/common.js" charset="utf-8"></script>
			<script type="text/javascript" src="../../static/wms/js/cool.js" charset="utf-8"></script>
			<script type="text/javascript" src="../../static/wms/js/realtimeWatch/crn.js" charset="utf-8"></script>
			</body>
			<script>
			// 空白行数
			var crnStateTableBlankRows = 0;
			var crnMsgTableBlankRows = 0;
			// 实际行数
			var crnStateTableFullRows = 0;
			var crnMsgTableFullRows = 0;
			// 初始化
			var crnOutputDom = document.getElementById("crn-output");
			$(document).ready(function() {
			getCommandLog();
			initCrnStateTable();
			getCrnStateInfo();
			initCrnMsgTable();
			getCrnMsgInfo();
			operatorBlockShow();
			});
			// 数据更新
			setInterval(function () {
			getCrnStateInfo();
			getCrnMsgInfo();
			getCommandLog();
			},1000);
			setInterval(function () {
			getCrnOutput();
			operatorBlockShow();
			initDemo();
			},500);
			<!-- 表单弹窗 -->
			<script type="text/html" id="editDialog">
			<form id="detail" lay-filter="detail" class="layui-form admin-form model-form">
			<input name="id" type="hidden">
			<div class="layui-row">
			<div class="layui-col-md12">
			<div class="layui-form-item">
			<label class="layui-form-label">api地址: </label>
			<div class="layui-input-block">
			<input class="layui-input" name="url" placeholder="请输入api地址">
			</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label">状态: </label>
			<div class="layui-input-block">
			<select name="status">
			<option value="">请选择状态</option>
			<option value="0">正常</option>
			<option value="1">禁用</option>
			</select>
			</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label">备注: </label>
			<div class="layui-input-block">
			<input class="layui-input" name="memo" placeholder="请输入备注">
			</div>
			</div>

			// 判断手动操作模块是否可用
			function operatorBlockShow() {
			if (parent.systemRunning) {
			$('.crn-operation').css("opacity", "0.5");
			$('.crn-operation-shade').show();
			$('.crn-operation-shade-span').show();
			} else {
			$('.crn-operation').css("opacity", "1");
			$('.crn-operation-shade').hide();
			$('.crn-operation-shade-span').hide();
			}
			}

			// 获取堆垛机执行中的命令
			function getCommandLog() {
			$.ajax({
			url: baseUrl + "/crn/command/ongoing",
			headers: {'token': localStorage.getItem('token')},
			method: 'POST',
			success: function (res) {
			if (res.code === 200) {
			var commands = res.data;
			for (var i=0; i<commands.length;i++){
			$("#crn"+commands[i].crnNo).val(commands[i].command);
			}
			} else if (res.code === 403) {
			window.location.href = baseUrl + "/login";
			} else {
			console.log(res.msg);
			}
			}
			})
			}

			// 堆垛机信息表获取 ---- 表一
			function getCrnStateInfo() {
			var tableEl = $('#crn-state-table');
			$.ajax({
			url: baseUrl+ "/crn/table/crn/state",
			headers: {'token': localStorage.getItem('token')},
			method: 'POST',
			success: function (res) {
			if (res.code === 200){
			var table = res.data;
			if (table.length > crnStateTableBlankRows && table.length !== crnStateTableFullRows) {
			initCrnStateTable(table.length-crnStateTableBlankRows);
			crnStateTableFullRows = 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].crnNo);
			setVal(tr.children("td").eq(1), table[i-1].statusType);
			setVal(tr.children("td").eq(2), table[i-1].status);
			setVal(tr.children("td").eq(3), table[i-1].loading);
			setVal(tr.children("td").eq(4), table[i-1].bay);
			setVal(tr.children("td").eq(5), table[i-1].lev);
			setVal(tr.children("td").eq(6), table[i-1].forkOffset);
			setVal(tr.children("td").eq(7), table[i-1].liftPos);
			setVal(tr.children("td").eq(8), table[i-1].walkPos);
			setVal(tr.children("td").eq(9), table[i-1].warnCode);
			setVal(tr.children("td").eq(10), table[i-1].alarm);
			}
			} else if (res.code === 403){
			window.location.href = baseUrl+"/login";
			} else {
			console.log(res.msg);
			}
			}
			});
			}

			// 堆垛机数据表获取 ---- 表二
			function getCrnMsgInfo() {
			var tableEl = $('#crn-msg-table');
			$.ajax({
			url: baseUrl+ "/crn/table/crn/msg",
			headers: {'token': localStorage.getItem('token')},
			method: 'POST',
			success: function (res) {
			if (res.code === 200){
			var table = res.data;
			if (table.length > crnStateTableBlankRows && table.length !== crnMsgTableFullRows) {
			initCrnStateTable(table.length-crnStateTableBlankRows);
			crnMsgTableFullRows = 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].crnNo);
			setVal(tr.children("td").eq(1), table[i-1].workNo);
			setVal(tr.children("td").eq(2), table[i-1].status);
			setVal(tr.children("td").eq(3), table[i-1].sourceStaNo);
			setVal(tr.children("td").eq(4), table[i-1].staNo);
			setVal(tr.children("td").eq(5), table[i-1].sourceLocNo);
			setVal(tr.children("td").eq(6), table[i-1].locNo);
			setVal(tr.children("td").eq(7), table[i-1].xspeed);
			setVal(tr.children("td").eq(8), table[i-1].yspeed);
			setVal(tr.children("td").eq(9), table[i-1].zspeed);
			setVal(tr.children("td").eq(10), table[i-1].xdistance);
			setVal(tr.children("td").eq(11), table[i-1].ydistance);
			setVal(tr.children("td").eq(12), table[i-1].xduration);
			setVal(tr.children("td").eq(13), table[i-1].yduration);
			}
			} else if (res.code === 403){
			window.location.href = baseUrl+"/login";
			} else {
			console.log(res.msg);
			}
			}
			});
			}

			// 堆垛机手动操作区 -----------------------------------------------------------------------

			function getReqParam() {
			var crnNo = $('input[name="crnSelect"]:checked').val();
			var sourceStaNo = $('#sourceStaNo').val();
			var sourceRow = $('#sourceRow').val();
			var sourceBay = $('#sourceBay').val();
			var sourceLev = $('#sourceLev').val();
			var staNo = $('#staNo').val();
			var row = $('#row').val();
			var bay = $('#bay').val();
			var lev = $('#lev').val();
			return {
			crnNo: crnNo,
			sourceStaNo: sourceStaNo,
			sourceRow: sourceRow,
			sourceBay: sourceBay,
			sourceLev: sourceLev,
			staNo: staNo,
			row: row,
			bay: bay,
			lev: lev
			};
			}

			// 入库
			function put() {
			http.post(baseUrl+"/crn/operator/put", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 出库
			function take() {
			http.post(baseUrl+"/crn/operator/take", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 库位转移
			function stockMove() {
			http.post(baseUrl+"/crn/operator/stockMove", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 站到站
			function siteMove() {
			http.post(baseUrl+"/crn/operator/siteMove", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 坐标移动
			function coorMove() {
			http.post(baseUrl+"/crn/operator/coorMove", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 回原点
			function bacOrigin() {
			http.post(baseUrl+"/crn/operator/bacOrigin", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 回原点
			function reverseOrigin() {
			http.post(baseUrl+"/crn/operator/reverseOrigin", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 任务完成
			function taskComplete() {
			http.post(baseUrl+"/crn/operator/taskComplete", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 暂停
			function pause() {
			http.post(baseUrl+"/crn/operator/pause", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 启动
			function boot() {
			http.post(baseUrl+"/crn/operator/boot", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 清除命令
			function clearCommand() {
			http.post(baseUrl+"/crn/operator/clearCommand", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 手动复位
			function handleReset() {
			http.post(baseUrl+"/crn/operator/handleReset", getReqParam(), function (res) {
			layer.msg(res.msg);
			});
			}

			// 输送设备日志输出 -----------------------------------------------------------------------
			function getCrnOutput() {
			$.ajax({
			url: baseUrl + "/crn/output/site",
			headers: {'token': localStorage.getItem('token')},
			method: 'POST',
			success: function (res) {
			console.log(res)
			if (res.code === 200) {
			crnOutput(res.data);
			} else if (res.code === 403) {
			window.location.href = baseUrl + "/login";
			} else {
			console.log(res.msg);
			}
			}
			})
			}

			// ------------------------------------------------------------------------------------------------

			// 堆垛机信息表获取 ----- 表一
			function initCrnStateTable(row) {
			var line;
			if (row === undefined){
			var one = $('#crn-state-table thead').height();
			var total = $('.crn-state').height();
			var count = total / one;
			count = parseInt(count) - 1;
			crnStateTableBlankRows = count;
			line = count;
			} else {
			line = row;
			}
			var html = "";
			for (var 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" +
			" </tr>\n";
			}
			$('#crn-state-table tbody').after(html);
			}

			// 堆垛机数据表获取 ----- 表二
			function initCrnMsgTable(row) {
			var line;
			if (row === undefined){
			var one = $('#crn-msg-table thead').height();
			var total = $('.crn-msg').height();
			var count = total / one;
			count = parseInt(count) - 1;
			crnMsgTableBlankRows = count;
			line = count;
			} else {
			line = row;
			}
			var html = "";
			for (var 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" +
			" </tr>\n";
			}
			$('#crn-msg-table tbody').after(html);
			}

			// 日志输出框
			function crnOutput(content){
			crnOutputDom.value += content;
			crnOutputDom.scrollTop = crnOutputDom.scrollHeight;
			}


			var crnDemoData;
			function initDemo() {
			$.ajax({
			url: baseUrl+"/crn/demo/status",
			async: false,
			method: 'GET',
			success: function (res) {
			if (res.code === 200) {
			crnDemoData = res.data;
			crnDemoData.forEach(function (e) {
			$("#demoBtn-"+e.crnNo).html(e.demo?'停止':'演示');
			})
			} else if (res.code === 403){
			parent.location.href = baseUrl+"/login";
			} else {
			layer.msg(res.msg, {icon: 2});
			}
			}
			})
			}

			function demoSwitch(el) {
			var crnId = el.split("-")[1];
			var opt;
			if (crnDemoData == null) {
			initDemo();
			}
			for (var i = 0; i<crnDemoData.length; i++) {
			if (Number(crnDemoData[i].crnNo) === Number(crnId)) {
			opt = !crnDemoData[i].demo;
			}
			}
			layer.confirm(crnId + ' 号堆垛机确定'+ (opt?'开始':'停止') + '演示吗？', function(){
			doDemo(crnId, 'root', opt); // 停止wcs系统
			});
			}

			function doDemo(crnId, password, opt) {
			// 加载tips
			var index = layer.load(1, {
			shade: [0.1,'#fff']
			});
			$.ajax({
			url: baseUrl+ "/crn/demo/switch",
			headers: {'token': localStorage.getItem('token')},
			// async: false,
			data: {
			crnId: Number(crnId),
			password: password,
			opt: opt
			},
			method: 'POST',
			success: function (res) {
			layer.close(index);
			if (res.code === 200){
			layer.msg(res.msg, {icon: 1});
			} else if (res.code === 403){
			window.location.href = baseUrl+"/login";
			} else {
			layer.msg(res.msg, {icon: 2});
			}
			}
			});

			}

			</div>
			</div>
			<hr class="layui-bg-gray">
			<div class="layui-form-item text-right">
			<button class="layui-btn" lay-filter="editSubmit" lay-submit="">保存</button>
			<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
			</div>
			</form>
			</script>
			</html>