<!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>
|
</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
|
},
|
created() {
|
this.init()
|
},
|
watch: {
|
|
},
|
methods: {
|
init() {
|
this.getMap(this.currentLev)
|
this.getSystemRunningStatus() //获取系统运行状态
|
|
this.consoleInterval = setInterval(() => {
|
this.getShuttleStateInfo() //获取四向穿梭车信息
|
this.getLiftStateInfo() //获取提升机信息
|
this.getSiteInfo() //获取输送站点数据
|
this.getMap(this.currentLev) //获取实时地图数据
|
this.getCodeData()//获取条码
|
}, 1000)
|
},
|
//获取地图数据
|
getMap(lev) {
|
$.ajax({
|
type: "get",
|
url: baseUrl + "/console/plc2/auth",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
success: (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() {
|
//获取输送站点数据
|
$.ajax({
|
url: baseUrl+ "/console/latest/data/site",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (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() {
|
// 四向穿梭车信息表获取
|
let that = this
|
$.ajax({
|
url: baseUrl + "/shuttle/table/shuttle/state",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
method: 'POST',
|
success: function(res) {
|
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() {
|
// 提升机信息表获取
|
let that = this
|
$.ajax({
|
url: baseUrl + "/lift/table/lift/state",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
method: 'POST',
|
success: function(res) {
|
if (res.code == 200) {
|
that.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/auth",
|
headers:{
|
'token': localStorage.getItem('token')
|
},
|
data:{},
|
method:'get',
|
success:function (res) {
|
that.$message({
|
message: '重置完成',
|
type: 'success'
|
});
|
}
|
})
|
},
|
getCodeData(){
|
let that = this
|
$.ajax({
|
url:baseUrl +'/console/barcode/output/site',
|
method:'GET',
|
success:function (res) {
|
if(res.code === 200){
|
let data = JSON.parse(res.data)
|
if(data.length<=5){
|
that.codeList1 = data
|
} else {
|
tData1 = data.slice(0,5)
|
tData2 = data.splice(5,10)
|
}
|
}
|
}
|
})
|
}
|
}
|
})
|
</script>
|
</body>
|
</html>
|
