wcs
/
agv-summoner


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>森之洋</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" type="text/css" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			.mui-btn-block {
				margin-bottom: 0;
			}

			.mui-content-padded {
				margin: 2px;
			}

			.mui-col {
				display: inline-block;
				padding: 2px;
			}

			/*滚动条样式*/
			::-webkit-scrollbar {
				width: 10px;
				background-color: #F5F5F5;
			}

			/*定义滚动条轨道 内阴影+圆角*/
			::-webkit-scrollbar-track {
				background-color: #103643;
			}

			/*定义滑块 内阴影+圆角*/
			::-webkit-scrollbar-thumb {
				background-color: #0b6d78;
			}

			.mui-btn-royal {
				background-color: rgba(141, 157, 199, 0.5);
				border: 1px solid rgba(141, 157, 199, 0.5)
			}

			.active {
				background-color: #d4d4d4;
				color: white;
			}

			.up {
				background: #0087c5 url(img/top.svg) no-repeat 50% 10%;
			}

			.down {
				background: #0087c5 url(img/bottom.svg) no-repeat 50% 10%;
			}

			.text-success {
				color: #27c24c
			}

			.mui-col-xs-3 {
				width: 23%;
			}

			.mui-col-xs-2 {
				width: 23%;
			}
		</style>
	</head>
	<body style="background: url(img/bg.png) no-repeat 0px 0px">
		<div class="mui-content" style="background: #2e3342;background-color: rgba(255,255,255,0)">
			<div class="mui-content-padded">
				<div class="mui-row">
					<div class="mui-col mui-col-xs-12">
						<span id="agvstatus" style="position: fixed;">·</span>
						<div id="title"
							style="text-align: center;padding-bottom: 2px;background: url(img/title_bg.png) no-repeat 0 7px;background-size:100%;">
							<a style="color: #FFFFFF;font-size: 20px;">森之洋</a>
						</div>
					</div>
					<div class="mui-col mui-col-xs-12" id="btt"
						style="min-height:490px;overflow-y:auto;max-height:490px;">
						<div class="mui-col mui-col-xs-12"
							style="height: 235px;text-align: center;background: url(img/top_bg2.png) no-repeat 0 -10px;background-size:100%;">
							<!-- <div class="mui-col mui-col-xs-12" style="height: 235px;text-align: center;background: url(img/top_bg2.png) no-repeat 0 0;background-size:100%;"> -->
							<div class="mui-col mui-col-xs-12" style="padding-top: 10px;height: 30px;">
								<div style=" width: 50%;float: left;">
									<img id="speed" src="" style="margin-left: -80px;width: 13%;">
								</div>
								<div style=" width: 50%;float: left;">
									<img id="battery" src="img/battery-100.png" style="margin-right: -80px;width: 23%;">
								</div>
							</div>
							<div class="mui-col mui-col-xs-12" style="margin-top: -5px;">
								<div id="tgts"
									style="width: 120px;height:90px;border-radius: 12px;border: 2px solid #298890;float: left;margin-left: 23px;">
									<div style="margin-left: -60px;margin-top: 15px;">
										<a style="color: #FFFFFF;font-size: 18px;">目标</a><br>
									</div>
									<div style="margin-left: -60px;margin-top: 10px;">
										<a style="color: #FFFFFF;font-size: 18px;">站点</a><br>
									</div>
									<div style="margin-left: 40px;margin-top: -35px;">
										<a id="tgtstation" style="color: #FFFFFF;font-size: 50px;"></a><br>
									</div>
								</div>
								<div id="jack"
									style="width: 120px;height:90px;border-radius: 12px;border: 2px solid #298890;float: right;margin-right: 20px;">
									<div style="margin-left: -60px;margin-top: 15px;">
										<a style="color: #FFFFFF;font-size: 18px;">顶升</a><br>
									</div>
									<div style="margin-left: -60px;margin-top: 10px;">
										<a style="color: #FFFFFF;font-size: 18px;">状态</a><br>
									</div>
									<div style="margin-left: 50px;margin-top: -53px;">
										<img id="liftstatus" src="img/liftstatus.png" width="60%">
									</div>
								</div>
							</div>
							<div class="mui-col mui-col-xs-12"
								style="height: 40px;padding-left: 15px;margin-top: -5px;">
								<div id="stop"
									style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">
									停止</div>
								<div id="run"
									style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">
									运行</div>
								<div id="warning"
									style="width: 30%;height: 40px;line-height:40px;float: left;margin-left: 5px;background: url(img/btn4_bg.png);color: #FFFFFF;text-align: center;">
									注意</div>
							</div>
							<div class="mui-col mui-col-xs-12">
								<div id="info"
									style="width: 89%;height: 30px;margin-left: 19px;color:#fff;font-size:15px;line-height: 30px;background-color: #0b6d78;border-radius: 3px;text-align: center;padding-left: 5px;">
								</div>
							</div>
						</div>

						<div class="mui-col mui-col-xs-12" style="margin-top: -5px;">
							<div class="mui-col mui-col-xs-12">
								<div id="workstatus"
									style="margin-top: -15px;width: 89%;height: 55px;line-height: 55px;margin-left: 19px;color:#fff;font-size:15px;background-color: #0b6d78;border-radius: 3px;text-align: center;padding-left: 5px;">
									前序工作状态：<span id="status"></span>
								</div>
							</div>
							<div id="btlist" style="padding-left: 15px;padding-right: 15px;height:175px">
								<div class="mui-col mui-col-xs-12 client" style="padding-top:10px">
									<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-hidden"
										id="Call"></button>
								</div>
								<div id="Caches" class="mui-col mui-col-xs-12 client mui-hidden" style="padding-top:10px">
									<button type="button" class="mui-btn mui-btn-primary mui-btn-block"
										id="Cache">缓存工位</button>
								</div>
								<div class="mui-col mui-col-xs-12 client" style="padding-top:10px">
									<button type="button" class="mui-btn mui-btn-success mui-btn-block mui-hidden"
										id="Finish">完成</button>
								</div>
							</div>
						</div>
					</div>
					<div class="mui-col mui-col-xs-12" style="text-align:center;margin-top: 5px;">
						<div class="mui-col mui-col-xs-2">
							<a href="settings.html" style="color: #9fb3b4;"><span
									class="mui-icon mui-icon-settings"></span></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/msg.js"></script>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript">
		var $btlist = $('#btlist');
		let ip, url, agvid, mapid, site, AcceptId, msgAcceptId;
		$(function() {
			//获取保存的ip、agvid、mapid等,如果没有数据，则设置为默认
			if (localStorage.getItem("ip") == "" || localStorage.getItem("ip") == null) {
				ip = "192.168.111.240:8888";
				url = "http://192.168.111.240:8888"
			} else {
				ip = localStorage.getItem("ip") + ":8888";
				url = "http://" + localStorage.getItem("ip") + ":8888";
			}
			if (localStorage.getItem("agvid") == "" || localStorage.getItem("agvid") == null) {
				agvid = 1;
			} else {
				agvid = parseInt(localStorage.getItem("agvid"))
			}
			if (localStorage.getItem("mapid") == "" || localStorage.getItem("mapid") == null) {
				mapid = "2020032608412704";
			} else {
				mapid = localStorage.getItem("mapid")
			}
			if (localStorage.getItem("site") == "" || localStorage.getItem("site") == null) {
				site = ""
				$("#Call").addClass("mui-hidden");
			} else {
				site = localStorage.getItem("site");
				$("#Call").removeClass("mui-hidden");
				$("#Call").html(site);
				if (site == "下料工位") {
					// 缓存工位按钮
					$("#Caches").removeClass("mui-hidden")
				} else {
					$("#Caches").addClass("mui-hidden")
				}
			}
			AcceptId = localStorage.getItem("AcceptId")
			$("#Finish").attr("disabled", true);
			startLog();
			setInterval(function() {
				if (ws.readyState === 3) {
					startLog();
				}
			}, 1000);
		})

		//完成按钮
		$("#Finish").click(function() {
			DoneTermTask(agvid, AcceptId, function(d) {
				if (d == "ok") {
					mui.toast("任务发送成功...")
				} else {
					if (d == "") {
						if (msgAcceptId === AcceptId) {
							mui.toast("当前工位任务执行中...")
						}
						if (msgAcceptId == (AcceptId - 1)) {
							mui.toast("前序工位任务执行中...")
						}
					}
					mui.toast("请稍后重试...")
				}
			})
		})

		//缓存工位
		$("#Cache").click(function() {
			let from, to;
			from = 3;
			to = 4;
			AddTermTask(agvid, AcceptId, from, to, function(d) {
				if (d == "ok") {
					mui.toast("任务发送成功...")
				} else {
					mui.toast("请稍后重试...")
				}
			})
		});

		//上下箱工位、清扫工位、下料工位
		$("#Call").click(function() {
			let from, to;
			if (site === "上下箱工位") {
				from = 4;
				to = 1;
			}
			if (site === "清扫工位") {
				from = 1;
				to = 2;
			}
			if (site === "下料工位") {
				from = 2;
				to = 3;
			}
			AddTermTask(agvid, AcceptId, from, to, function(d) {
				if (d == "ok") {
					mui.toast("任务发送成功...")
				} else {

					mui.toast("请稍后重试...")
				}
			})
		});

		function DoneTermTask(agvid, AcceptId, callback) {
			$.post(url + "/task/term/done", {
				id: agvid,
				acceptId: AcceptId
			}, callback);
		};

		function AddTermTask(agvid, AcceptId, from, to, callback) {
			$.post(url + "/task/term/send", {
				id: agvid,
				acceptId: AcceptId,
				from: from,
				to: to
			}, callback);
		};
		//新建ws连接，获取agv的状态
		let ws;
		function startLog() {
			ws = new WebSocket("ws://" + ip + "/ws/msg/" + agvid);
			ws.onmessage = function(e) {
				let result;
				let msg = JSON.parse(e.data);
				// console.log("msg",msg)
				switch (msg.type) {
					case msgTypeStatus:
						// 每秒一次状态
						let stMap = JSON.parse(msg.data);
						//根据状态设置图标等
						showStatusValue(stMap);
						//当前站点按钮文字闪烁
						if (agvid == msg.id) {
							let stMap = JSON.parse(msg.data);
							$("#agvstatus").toggleClass("text-success");
						}
						// 当前工作站点id
						msgAcceptId = stMap.AcceptId;
						if (msgAcceptId == AcceptId) {
							$("#Finish").removeClass("mui-hidden");
							$("#Finish").attr("disabled", false);
						} else {
							$("#Finish").addClass("mui-hidden");
							$("#Finish").attr("disabled", true);
						}
						if ((msgAcceptId == 1 && AcceptId == 2) || (msgAcceptId == 2 && AcceptId == 3) || (msgAcceptId ==
								3 && AcceptId == 1)) {
							$("#status").html("工作中", +msgAcceptId);
							document.getElementById("workstatus").style.backgroundColor = "red"; // "#9C9C9C" ;// ;
						} else {
							$("#status").html("未工作");
							document.getElementById("workstatus").style.backgroundColor = "green"; // "#9C9C9C" ;//
						}
						break;
						//读取设置状态，可以获得电池伏数
					case msgTypeGetCfg:
						//console.log(msg.type, msg.data);
						break;
					default:
						//console.log(msg.type, msg.data);
				}
			}
		}
		//根据获取到的agv状态，设置速度、电量、站点、顶升、提示信息、运行按钮等的颜色和文字显示
		function showStatusValue(status) {
			for (let k in status) {
				let v = status[k];
				//电量显示
				if (k == "BatteryVolt") {
					if (v >= 5200) { //BatteryVoltFull
						document.getElementById("battery").src = "img/battery-100.png";
					}
					if (5000 <= v && v < 5200) { //BatteryVoltHigh
						document.getElementById("battery").src = "img/battery-80.png";
					}
					if (4800 <= v && v < 5000) { //BatteryVoltMid
						document.getElementById("battery").src = "img/battery-60.png";
					}
					if (4700 <= v && v < 4800) { //BatteryVoltLow
						document.getElementById("battery").src = "img/battery-40.png";
					}
					if (4500 <= v && v < 4700) { //BatteryVoltWarn
						document.getElementById("battery").src = "img/battery-20.png";
					}
					if (v <= 4500) { //BatteryVoltStop
						document.getElementById("battery").src = "img/battery-0.png";
					}
				}
				//目标站点
				if (k == "TgtStation") {
					if (v == "65535") {
						$("#tgtstation").text("0");
					} else {
						$("#tgtstation").text(v);
					}
				}
				//顶升状态
				if (k == "LiftStatus") {
					if (v == 1 || v == 3 || v == 5 || v == 7) {
						document.getElementById("liftstatus").src = "img/liftstatus-up.png";
					} else if (v == 0) {
						document.getElementById("liftstatus").src = "img/liftstatus.png";
					} else {
						if (status.Status == "1") {
							document.getElementById("liftstatus").src = "img/liftstatus.png";
						} else {
							document.getElementById("liftstatus").src = "img/liftstatus-down.png";
						}
					}
				}
				//停止运行注意按钮及信息提示框
				if (k == "Status") {
					document.getElementById("speed").src = "";
					if (v == 0) {
						$("#info").text("未设置");
					}
					if (v == 1) {
						$("#info").text("就绪");
					}
					if (v == 2) {
						$("#info").text("运行");
						document.getElementById("speed").src = "img/speed-high.png";
						document.getElementById("run").style.backgroundImage = "url('img/btn2_bg.png')";
					} else {
						document.getElementById("run").style.backgroundImage = "url('img/btn4_bg.png')";
					}
					if (v == 3 || v == 4 || (v == 5)) {
						if (v == 3) {
							$("#info").text("停止");
						}
						if (v == 4) {
							$("#info").text("急停");
						}
						if (v == 5) {
							$("#info").text("防撞停止");
						}
						document.getElementById("stop").style.backgroundImage = "url('img/btn3_bg.png')";
					} else {
						document.getElementById("stop").style.backgroundImage = "url('img/btn4_bg.png')";
					}
					if (v == 6) {
						$("#info").text("驱动器错误");
					}
					if (v == 7) {
						$("#info").text("导航错误");
					}
					if (v == 8) {
						$("#info").text("任务错误");
					}
					if (v == 9) {
						document.getElementById("speed").src = "img/speed-medium.png";
						$("#info").text("手动控制");
					}
					if (v == 11 || v == 22) {
						if (v == 11) {
							document.getElementById("speed").src = "img/speed-medium.png";
							$("#info").text("前方障碍");
						}
						if (v == 22) {
							document.getElementById("speed").src = "img/speed-medium.png";
							$("#info").text("障碍减速");
						}
						document.getElementById("warning").style.backgroundImage = "url('img/btn1_bg.png')";
					} else {
						document.getElementById("warning").style.backgroundImage = "url('img/btn4_bg.png')";
					}
					if (v == 12) {
						$("#info").text("防撞停止");
					}
					if (v == 15) {
						$("#info").text("低电压停止");
					}
					if (v == 21) {
						$("#info").text("低电压运行");
					}
					if (v == 31) {
						$("#info").text("前磁导脱线");
					}
					if (v == 32) {
						$("#info").text("后磁导脱线");
					}
					if (v == 33) {
						$("#info").text("左磁导脱线");
					}
					if (v == 34) {
						$("#info").text("右磁导脱线");
					}
					if (v == 71) {
						$("#info").text("取货失败1");
					}
					if (v == 72) {
						$("#info").text("取货失败2");
					}
					if (v == 73) {
						$("#info").text("放货失败");
					}
				}
			}
			if (status.Status == "9" && status.FWlkRpm != "0") {
				document.getElementById("run").style.backgroundImage = "url('img/btn2_bg.png')";
				document.getElementById("stop").style.backgroundImage = "url('img/btn4_bg.png')";
			}
			if (status.Status == "9" && status.FWlkRpm == "0") {
				document.getElementById("run").style.backgroundImage = "url('img/btn4_bg.png')";
				document.getElementById("stop").style.backgroundImage = "url('img/btn3_bg.png')";
			}
		};
		$(function() {
			GetTermTask(agvid, function(d) {
				console.log("GetTermTask: ", d)
			})
		})

		function GetTermTask(agvid, callback) {
			$.post(url + "/task/term/get", {
				id: agvid,
			}, callback);
		}
	</script>
</html>