zy-wcs.git - Gitblit

New file
			@@ -0,0 +1,714 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>WCS控制中心</title>
			<link rel="stylesheet" href="../static/css/animate.min.css">
			<link rel="stylesheet" href="../static/vue/element/element.css">
			<link rel="stylesheet" href="../static/css/console_vue.css">
			<link rel="stylesheet" href="../static/css/toggle-switch.css">
			<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../static/layui/layui.js"></script>
			<script type="text/javascript" src="../static/js/handlebars/handlebars-v4.5.3.js"></script>
			<script type="text/javascript" src="../static/js/common.js"></script>
			<script type="text/javascript" src="../static/vue/js/vue.min.js"></script>
			<script type="text/javascript" src="../static/vue/element/element.js"></script>
			</head>
			<body>
			<div id="app">
			<div style="display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 150px;">
			<div id="mapDataId" style="zoom: 0.7;position: relative;">
			<div class="pointContainer" v-for="(row,index) in map" :key="index">
			<div v-for="(col,idx) in row" :key="idx">
			<div v-if="col.value == 0">
			<!-- 子轨道路径为穿梭车预计路径则显示穿梭车颜色和穿梭车号 -->
			<div :style="{background: checkAdvancePath(index,idx).length == 0 ? '':shuttleColorList[checkAdvancePath(index,idx)[0]]}" class="item" v-if="col.data.length > 0">{{col.data}}</div>
			<div :style="{background: checkAdvancePath(index,idx).length == 0 ? '':shuttleColorList[checkAdvancePath(index,idx)[0]]}" class="item" v-else>{{checkAdvancePath(index,idx).length == 0 ? idx:checkAdvancePath(index,idx)}}</div>
			</div>
			<div v-else-if="col.value == 3">
			<!-- 母轨道路径为穿梭车预计路径则显示穿梭车颜色和穿梭车号 -->
			<div :style="{background: checkAdvancePath(index,idx).length == 0 ? '#5af':shuttleColorList[checkAdvancePath(index,idx)[0]]}" class="item">{{checkAdvancePath(index,idx).length == 0 ? '⇅⇄':checkAdvancePath(index,idx)}}</div>
			</div>
			<div v-else-if="col.value == 4">
			<!-- 站点 -->
			<div class="site" :id="'site-' + col.data" @click="openSite(col.data)">{{col.data}}</div>
			</div>
			<div v-else-if="col.value == 5">
			<!-- 充电桩 -->
			<div class="item" style="font-size: 24px">⚡</div>
			</div>
			<div v-else-if="col.value == -999">
			<!-- 路径占用区域 -->
			<div class="item" style="background:#f83333;color: #fff;">{{idx}}</div>
			</div>
			<div v-else-if="col.value < 0">
			<!-- 禁止显示区域 -->
			<div class="item" style="visibility: hidden">{{idx}}</div>
			</div>
			<div v-else>
			<div class="item" v-if="col.data.length > 0">{{col.data}}</div>
			<div class="item" v-else>{{idx}}-{{col.value}}</div>
			</div>
			</div>

			<div>
			<!-- 显示行号 -->
			<div class="item" style="background: none;color: #000;">#{{index+1}}</div>
			</div>
			</div>

			<!--输出小车-->
			<div v-for="(car,idx) in currentLevShuttleList"
			:style="{
			left: getCarPosition(car.wcsPoint.x,car.wcsPoint.y)[1]
			,top: getCarPosition(car.wcsPoint.x,car.wcsPoint.y)[0]
			,color: shuttleColorList[car.shuttleNo]
			}"
			class="sxcar" :id="'sxcar-' + car.shuttleNo">
			{{car.shuttleNo}}
			</div>

			</div>

			<!--输出楼层-->
			<div style="height: 100%;">
			<div class="floorBtnBox" v-for="(lev,idx) in floorList">
			<el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changFloor(lev)">{{lev}}F</el-button>
			</div>
			<div>
			<el-button @click="testMove()">测试移动车</el-button>
			<el-button @click="resetMap()">重置地图</el-button>
			</div>
			</div>
			</div>

			<div class="footer">
			<!-- 总开关 -->
			<div class="line-status">
			<div class="body-head">总开关</div>
			<div class="switch" @click="systemSwitch">
			<label id="system-toggle" class="toggle-switch" style="margin-left: 20px;">
			<input id="system-toggle-checked" disabled type="checkbox">
			<div class="button">
			<div class="light"></div>
			<div class="dots"></div>
			<div class="characters"></div>
			<div class="shine"></div>
			<div class="shadow"></div>
			</div>
			</label>

			<div class="switch_r">
			<p>系统状态</p>
			<p id="system-run-desc">系统运行中</p>
			</div>
			</div>
			</div>
			<!-- 四向穿梭车状态 -->
			<div class="line-status">
			<div class="body-head">穿梭车状态</div>
			<div class="shuttle-status-box">
			<div v-for="(item,idx) in shuttleList" class="state">
			<span :style="{color: shuttleColorList[item.shuttleNo]}">四向穿梭车 {{item.shuttleNo}}</span>
			<span v-if="item.protocolStatus == 1"
			class="state-ss shuttle-idle">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 2"
			class="state-ss shuttle-working">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 3"
			class="state-ss shuttle-waiting">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 4"
			class="state-ss shuttle-charging">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 5"
			class="state-ss shuttle-charging-waiting">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 6"
			class="state-ss shuttle-fixing">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 7"
			class="state-ss shuttle-offline">{{item.protocolStatus$}}</span>
			<span v-else class="state-ss shuttle-offline">{{item.protocolStatus$}}</span>
			</div>
			</div>
			<div class="allStatus"><span>所有状态</span></div>
			<div class="allStatus item-group">
			<span class="shuttle-idle">空闲</span>
			<span class="shuttle-working">作业中</span>
			<span class="shuttle-waiting">等待确认</span>
			<span class="shuttle-charging">充电中</span>
			<span class="shuttle-charging-waiting">充电任务等待确认</span>
			<span class="shuttle-fixing">故障修复中</span>
			<span class="shuttle-offline">离线</span>
			</div>
			</div>
			<!-- 提升机状态 -->
			<div class="line-status">
			<div class="body-head">提升机状态</div>
			<div class="lift-status-box">
			<div v-for="(item,idx) in liftList" class="state states">
			<span>提升机 {{item.liftNo}}</span>
			<span v-if="item.protocolStatus == 1"
			class="state-ss lift-idle">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 2"
			class="state-ss lift-working">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 3"
			class="state-ss lift-waiting">{{item.protocolStatus$}}</span>
			<span v-else-if="item.protocolStatus == 4"
			class="state-ss lift-offline">{{item.protocolStatus$}}</span>
			<span v-else class="state-ss lift-offline">{{item.protocolStatus$}}</span>
			</div>
			</div>
			<div class="allStatus"><span>所有状态</span></div>
			<div class="allStatus item-group">
			<span class="lift-idle">空闲</span>
			<span class="lift-working">作业中</span>
			<span class="lift-waiting">等待确认</span>
			<span class="lift-offline">离线</span>
			</div>
			</div>
			<!-- 输送线状态 -->
			<div class="line-status">
			<div class="body-head">输送线状态</div>
			<div class="state states">
			<span>运输线总数</span>
			<span class="line-ss">9</span>
			</div>
			<div class="allStatus"><span>所有状态</span></div>
			<div class="allStatus item-group">
			<span class="site-auto-run-id">自动+有物+ID</span>
			<span class="site-auto-run">自动+有物</span>
			<span class="site-auto-id">自动+ID</span>
			<span class="site-auto">自动</span>
			<span class="site-unauto">非自动/手动</span>
			</div>
			</div>
			<!-- 条码表格 -->
			<div class="bar-code">
			<div class="body-head" id="code">条码扫描器</div>
			<div class="tablebox">
			<div class="table-head">
			<li><span>条码名称</span><span class="right">扫码时间</span></li>
			</div>
			<div id="barcode1" class="table-body">
			<li v-for="(item,index) in codeList1" :key="index"><span>{{item.barcode}}</span><span class="right">{{item.time}}</span></li>
			</div>
			</div>
			<div class="tablebox">
			<div class="table-head">
			<li><span>条码名称</span><span class="right">扫码时间</span></li>
			</div>
			<div id="barcode2" class="table-body">
			<li v-for="(item,index) in codeList2" :key="index"><span>{{item.barcode}}</span><span class="right">{{item.time}}</span></li>
			</div>
			</div>
			</div>
			</div>

			<!-- 输送设备弹窗 -->
			<div id="siteWindow" :style="{display:siteWindow?'block':'none'}" class="animate__animated animate__fadeIn">
			<!-- 表头 -->
			<div id="siteWindow-head">
			<div class="detailed"></div>
			<button @click="siteWindow = false"></button>
			</div>
			<!-- 表内容 -->
			<div class="siteWindow-body">
			<form>
			<!-- 设备号 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>设备号：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="siteId" value="">
			</div>
			</div>
			<!-- 工作号 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>工作号：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="workNo" value="">
			</div>
			</div>
			<!-- 工作状态 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>工作状态：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="wrkSts" value="">
			</div>
			</div>
			<div class="form-item">
			<!-- 自动 -->
			<div class="form-item-checkbox">
			<div class="form-item-label-checkbox">
			<span>自动</span>
			</div>
			<div class="form-item-input-checkbox">
			<input type="checkbox" name="autoing">
			</div>
			</div>
			<!-- 有物 -->
			<div class="form-item-checkbox">
			<div class="form-item-label-checkbox">
			<span>有物</span>
			</div>
			<div class="form-item-input-checkbox">
			<input type="checkbox" name="loading">
			</div>
			</div>
			<!-- 能入 -->
			<div class="form-item-checkbox">
			<div class="form-item-label-checkbox">
			<span>能入</span>
			</div>
			<div class="form-item-input-checkbox">
			<input type="checkbox" name="canining">
			</div>
			</div>
			<!-- 能出 -->
			<div class="form-item-checkbox">
			<div class="form-item-label-checkbox">
			<span>能出</span>
			</div>
			<div class="form-item-input-checkbox">
			<input type="checkbox" name="canouting">
			</div>
			</div>
			</div>
			<!-- 出入类型 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>出入类型：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="ioType" value="">
			</div>
			</div>
			<!-- 源站 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>源站：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="sourceStaNo" value="">
			</div>
			</div>
			<!-- 目标站 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>目标站：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="staNo" value="">
			</div>
			</div>
			<!-- 源库位 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>源库位：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="sourceLocNo" value="">
			</div>
			</div>
			<!-- 目标库位 -->
			<div class="form-item">
			<div class="form-item-label">
			<span>目标库位：</span>
			</div>
			<div class="form-item-input">
			<input type="text" name="locNo" value="">
			</div>
			</div>
			</form>
			</div>
			</div>

			</div>
			<script>
			var app = new Vue({
			el: '#app',
			data: {
			map: [],//地图数据
			currentLev: 1,//地图当前楼层
			siteWindow: false, //站点弹窗显示默认不显示
			floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //当前项目楼层
			shuttleList: [], //四向穿梭车集合
			currentLevShuttleList: [],//当前楼层四向穿梭车集合
			shuttleColorList: [],//四向穿梭车颜色集合
			liftList: [], //提升机集合
			systemStatus: true,//系统运行状态
			consoleInterval: null,//定时器存储变量
			codeList1: [],//条码List
			codeList2: [],//条码List
			ws: null,
			},
			created() {
			this.init()
			},
			watch: {

			},
			methods: {
			init() {
			this.ws = new WebSocket("ws://" + window.location.host + baseUrl + "/console/websocket");
			this.ws.onopen = this.webSocketOnOpen
			this.ws.onerror = this.webSocketOnError
			this.ws.onmessage = this.webSocketOnMessage
			this.ws.onclose = this.webSocketClose

			this.getMap(this.currentLev)
			this.getSystemRunningStatus() //获取系统运行状态

			this.consoleInterval = setInterval(() => {
			this.getShuttleStateInfo() //获取四向穿梭车信息
			this.getLiftStateInfo() //获取提升机信息
			this.getSiteInfo() //获取输送站点数据
			this.getMap(this.currentLev) //获取实时地图数据
			this.getCodeData()//获取条码
			}, 1000)
			},
			//获取地图数据
			getMap(lev) {
			this.sendWs(JSON.stringify({
			"url": "/console/map/auth",
			"data": lev
			}))
			},
			setMap(res) {
			//获取地图数据
			let data = res.data
			let tmp = []
			for (let i = 1; i < data.length - 1; i++) {
			tmp.push(data[i])
			}
			// console.log(tmp)
			this.map = tmp
			},
			openSite(id) {
			this.siteWindow = true; //打开站点信息弹窗
			$(".detailed").empty();
			$('.detailed').append(id + '站点详细信息');
			$.ajax({
			url: baseUrl + "/console/site/detail",
			headers: {
			'token': localStorage.getItem('token')
			},
			data: {
			siteId: id
			},
			method: 'post',
			success: function(res) {
			for (var val in res.data) {
			var find = $("#siteWindow").find(":input[name='" + val + "']");
			if (find[0].type === 'text') {
			find.val(res.data[val]);
			} else if (find[0].type === 'checkbox') {
			find.attr("checked", res.data[val] === 'Y');
			}
			}
			}

			})
			},
			getSiteInfo() {
			//获取输送站点数据
			this.sendWs(JSON.stringify({
			"url": "/console/latest/data/site",
			"data": {}
			}))
			},
			setSiteInfo(res) {
			//获取输送站点数据
			if (res.code === 200){
			var sites = res.data;
			for (var i = 0; i < sites.length; i++){
			var siteEl = $("#site-"+sites[i].siteId);
			siteEl.attr("class", "site " + sites[i].siteStatus);
			if (sites[i].workNo != null && sites[i].workNo>0) {
			siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]");
			} else {
			siteEl.html(sites[i].siteId);
			}
			}
			} else if (res.code === 403){
			parent.location.href = baseUrl+"/login";
			} else {
			console.log(res.msg);
			}
			},
			changFloor(lev) {
			this.currentLev = lev
			this.currentLevShuttleList = []
			this.getMap(lev)
			},
			getShuttleStateInfo() {
			this.sendWs(JSON.stringify({
			"url": "/shuttle/table/shuttle/state",
			"data": {}
			}))
			},
			setShuttleStateInfo(res) {
			// 四向穿梭车信息表获取
			let that = this
			if (res.code == 200) {
			let currentLevShuttle = []//当前楼层小车集合
			res.data.forEach((item,idx) => {
			if (item != null && item.point != undefined && item.point != null) {
			if (item.point.z == that.currentLev) {
			currentLevShuttle.push(item);
			}
			}
			})
			that.currentLevShuttleList = currentLevShuttle
			that.shuttleList = res.data

			if (that.shuttleColorList.length == 0) {
			let colorList = []//随机小车颜色
			res.data.forEach((item,idx) => {
			colorList[item.shuttleNo] = that.colorRGB()
			})
			that.shuttleColorList = colorList
			}
			}
			},
			getLiftStateInfo() {
			// 提升机信息表获取
			this.sendWs(JSON.stringify({
			"url": "/lift/table/lift/state",
			"data": {}
			}))
			},
			setLiftStateInfo(res) {
			// 提升机信息表获取
			if (res.code == 200) {
			this.liftList = res.data
			}
			},
			systemSwitch() {
			// 系统开关
			let that = this
			if (this.systemStatus) {
			this.$prompt('请输入口令，并停止WCS系统', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			}).then(({
			value
			}) => {
			that.doSwitch(0, value)
			}).catch(() => {

			});
			} else {
			this.doSwitch(1)
			}
			},
			doSwitch(operatorType, password) {
			let that = this
			$.ajax({
			url: baseUrl + "/console/system/switch",
			headers: {
			'token': localStorage.getItem('token')
			},
			data: {
			operatorType: operatorType,
			password: password
			},
			method: 'POST',
			success: function(res) {
			if (res.code === 200) {
			if (res.data.status) {
			$('#system-toggle-checked').attr("checked", true);
			$('#system-run-desc').html("系统运行中...");
			that.systemStatus = true;
			parent.systemRunning = true;
			} else {
			$('#system-toggle-checked').attr("checked", false);
			$('#system-run-desc').html("系统已停止!");
			that.systemStatus = false;
			parent.systemRunning = false;
			}
			} else if (res.code === 403) {
			parent.location.href = baseUrl + "/login";
			} else {
			that.$message({
			message: res.msg,
			type: 'error'
			});
			}
			}
			});
			},
			getSystemRunningStatus() {
			// 获取wcs系统运行状态
			let that = this
			$.ajax({
			url: baseUrl + "/console/system/running/status",
			headers: {
			'token': localStorage.getItem('token')
			},
			method: 'POST',
			success: function(res) {
			if (res.code === 200) {
			if (res.data.status) {
			$('#system-toggle-checked').attr("checked", true);
			$('#system-run-desc').html("系统运行中...");
			that.systemStatus = true;
			parent.systemRunning = true;
			} else {
			$('#system-toggle-checked').attr("checked", false);
			$('#system-run-desc').html("系统已停止!");
			that.systemStatus = false;
			parent.systemRunning = false;
			}
			} else if (res.code === 403) {
			parent.location.href = baseUrl + "/login";
			} else {
			that.$message({
			message: res.msg,
			type: 'error'
			});
			}
			}
			});
			},
			getCarPosition(x,y) {
			//计算四向穿梭车图标位置
			let top = (x * 35 - 35) + "px" //需要减去小车自己所占高度
			let left = (y * 35) + "px" //需要减去小车自己所占宽度
			return [top,left];
			},
			testMove() {
			let that = this
			clearInterval(this.consoleInterval)//清理定时器

			let shuttleList = this.currentLevShuttleList
			$.ajax({
			url: baseUrl + "/static/testMoveData.json",
			headers: {
			'token': localStorage.getItem('token')
			},
			method: 'GET',
			success: function(res) {
			shuttleList[0].moveAdvancePath = res
			that.currentLevShuttleList = shuttleList

			let index = 0
			let tmp = null
			tmp = setInterval(() => {
			if (index < res.length) {
			that.currentLevShuttleList[0].wcsPoint.y = res[index].y
			that.currentLevShuttleList[0].wcsPoint.x = res[index].x
			index++
			}else {
			clearInterval(tmp)
			that.init()
			}
			},1000)
			}
			});
			},
			colorRGB(){
			//随机颜色
			const r = Math.floor(Math.random()*256);
			const g = Math.floor(Math.random()*256);
			const b = Math.floor(Math.random()*256);
			return `rgb(${r},${g},${b})`;
			},
			checkAdvancePath(x,y) {
			//检测路径是否为穿梭车预计路径，如x和y路径是穿梭车预计路径，则返回小车号
			this.currentLevShuttleList.forEach((item,idx) => {
			if (item.moveAdvancePath != null) {
			item.moveAdvancePath.forEach((path,index) => {
			if (path.x === x && path.y === y) {
			return item.shuttleNo;
			}
			})
			}
			})
			let data = []
			let shuttleList = this.currentLevShuttleList;
			for (var i = 0; i < shuttleList.length; i++) {
			let shuttle = shuttleList[i]
			let moveAdvancePath = shuttle.moveAdvancePath
			if (moveAdvancePath != null) {
			for (var j = 0; j < moveAdvancePath.length; j++) {
			let path = moveAdvancePath[j]
			if (path.x-1 === x && path.y === y) {//路径符合
			data.push(shuttle.shuttleNo)
			continue;
			}
			}
			}
			}
			return data;//返回小车号集合
			},
			resetMap() {
			//重置地图
			let that = this
			$.ajax({
			url:baseUrl+"/console/map/resetMap/" + this.currentLev,
			headers:{
			'token': localStorage.getItem('token')
			},
			data:{},
			method:'get',
			success:function (res) {
			that.$message({
			message: that.currentLev + '层地图重置完成',
			type: 'success'
			});
			}
			})
			},
			getCodeData(){
			this.sendWs(JSON.stringify({
			"url": "/console/barcode/output/site",
			"data": {}
			}))
			},
			setCodeData(res) {
			if(res.code === 200){
			let data = JSON.parse(res.data)
			if (data.length <= 5) {
			this.codeList1 = data;
			} else {
			this.codeList1 = data.slice(0, 5);
			this.codeList2 = data.splice(5, 10);
			}
			}
			},
			webSocketOnOpen(e) {
			console.log("open");
			},
			webSocketOnError(e) {
			console.log(e);
			},
			webSocketOnMessage(e) {
			const result = JSON.parse(e.data);
			if (result.url == "/shuttle/table/shuttle/state") {
			this.setShuttleStateInfo(JSON.parse(result.data))
			}else if (result.url == "/lift/table/lift/state") {
			this.setLiftStateInfo(JSON.parse(result.data))
			}else if (result.url == "/console/latest/data/site") {
			this.setSiteInfo(JSON.parse(result.data))
			}else if (result.url == "/console/map/auth") {
			this.setMap(JSON.parse(result.data))
			}else if (result.url == "/console/barcode/output/site") {
			this.setCodeData(JSON.parse(result.data))
			}
			},
			webSocketClose(e) {
			console.log("close");
			},
			sendWs(message) {
			if (this.ws.readyState == WebSocket.OPEN) {
			this.ws.send(message)
			}
			}
			}
			})
			</script>
			</body>
			</html>

	src/main/webapp/views/console.html	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/console1.html	714 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -76,8 +76,8 @@
			<el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changFloor(lev)">{{lev}}F</el-button>
			</div>
			<div>
			<el-button @click="testMove()">测试移动车</el-button>
			<el-button @click="resetMap()">重置地图</el-button>
			<!-- <el-button @click="testMove()">测试移动车</el-button>-->
			<!-- <el-button @click="resetMap()">重置地图</el-button>-->
			</div>
			</div>
			</div>