<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>四向穿梭车监控系统</title>
|
<link rel="stylesheet" href="../static/vue/element/element.css">
|
<link rel="stylesheet" href="../static/css/shuttle_page.min.css">
|
<script src="../static/js/shuttle_page.js"></script>
|
<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/vue/js/vue.min.js"></script>
|
<script type="text/javascript" src="../static/vue/element/element.js"></script>
|
<style>
|
body {
|
font-family: 'Noto Sans SC', sans-serif;
|
background-color: #0f172a;
|
color: #e2e8f0;
|
}
|
.card {
|
background-color: #1e293b;
|
border-radius: 0.75rem;
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
transition: all 0.3s ease;
|
}
|
/*.card:hover {*/
|
/* transform: translateY(-2px);*/
|
/* box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);*/
|
/*}*/
|
.btn {
|
background-color: #3b82f6;
|
color: white;
|
border-radius: 0.5rem;
|
padding: 0.5rem 1rem;
|
transition: all 0.3s ease;
|
}
|
.btn:hover {
|
background-color: #2563eb;
|
transform: translateY(-1px);
|
}
|
.status-active {
|
color: #4ade80;
|
}
|
.status-inactive {
|
color: #f87171;
|
}
|
.progress-bar {
|
height: 0.75rem;
|
border-radius: 0.375rem;
|
background-color: #334155;
|
}
|
.progress-fill {
|
height: 100%;
|
border-radius: 0.375rem;
|
background-color: #4ade80;
|
transition: width 0.5s ease;
|
}
|
.table-striped tbody tr:nth-child(odd) {
|
background-color: #1e293b;
|
}
|
.table-striped tbody tr:nth-child(even) {
|
background-color: #1a2537;
|
}
|
</style>
|
</head>
|
<body class="min-h-screen">
|
<div id="app">
|
<div class="container mx-auto px-4 py-8">
|
<!-- 顶部标题和状态栏 -->
|
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
|
<h1 class="text-3xl font-bold text-blue-400 mb-4 md:mb-0">
|
<i class="fas fa-robot mr-2"></i>四向穿梭车监控系统
|
</h1>
|
<div class="flex items-center space-x-4">
|
<div class="flex items-center">
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
|
<span>在线: {{ deviceStatusCountMap.online }}</span>
|
</div>
|
<div class="flex items-center">
|
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
|
<span>故障: {{ deviceStatusCountMap.error }}</span>
|
</div>
|
<div class="flex items-center">
|
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
|
<span>离线: {{ deviceStatusCountMap.offline }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 主要监控区域 -->
|
<div class="card p-6 mb-8">
|
<!-- 穿梭车状态表格 -->
|
<div class="card p-6">
|
<div class="flex justify-between items-center mb-4">
|
<h2 class="text-xl font-semibold text-blue-300">
|
<i class="fas fa-list-alt mr-2"></i>穿梭车状态
|
</h2>
|
<div class="relative">
|
<select v-model="selectListStatus" class="bg-slate-700 text-white rounded px-3 py-1 pr-8">
|
<option value="all">全部状态</option>
|
<option value="online">在线</option>
|
<option value="idle">空闲</option>
|
<option value="running">运行中</option>
|
<option value="offline">离线</option>
|
<option value="error">故障</option>
|
</select>
|
</div>
|
</div>
|
<div class="overflow-auto" style="height: 500px;">
|
<table class="w-full table-striped">
|
<thead>
|
<tr class="text-left text-slate-300 border-b border-slate-600 bg-slate-800 sticky top-0 z-10">
|
<th class="py-3 px-4">编号</th>
|
<th class="py-3 px-4">工作号</th>
|
<th class="py-3 px-4">任务状态</th>
|
<th class="py-3 px-4">小车状态</th>
|
<th class="py-3 px-4">模式</th>
|
<th class="py-3 px-4">库位</th>
|
<th class="py-3 px-4">坐标</th>
|
<th class="py-3 px-4">电量</th>
|
<th class="py-3 px-4">电压</th>
|
<th class="py-3 px-4">速度</th>
|
<th class="py-3 px-4">负载</th>
|
<th class="py-3 px-4">顶升</th>
|
<th class="py-3 px-4">充电</th>
|
<th class="py-3 px-4">故障码</th>
|
<!-- <th class="py-3 px-4">管制</th>-->
|
<th class="py-3 px-4">低电量</th>
|
<th class="py-3 px-4">演示模式</th>
|
<th class="py-3 px-4">标记</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item,idx) in shuttleList" :key="idx" class="hover:bg-slate-700">
|
<td class="py-3 px-4">{{ item.shuttleNo }}</td>
|
<td class="py-3 px-4">{{ item.taskNo }}</td>
|
<td class="py-3 px-4">{{ item.protocolStatus$ }}</td>
|
<td class="py-3 px-4">{{ item.deviceStatus$ }}</td>
|
<td class="py-3 px-4">{{ item.mode$ }}</td>
|
<td class="py-3 px-4">{{ item.currentLocNo }}</td>
|
<td class="py-3 px-4">{{ item.currentCode }}</td>
|
<td class="py-3 px-4">
|
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
<div v-if="item.batteryPower>=70&&item.batteryPower<=100">
|
<div class="bg-green-500 h-2.5 rounded-full" :style="{width: item.batteryPower + '%'}"></div>
|
</div>
|
<div v-else-if="item.batteryPower>=40&&item.batteryPower<70">
|
<div class="bg-yellow-500 h-2.5 rounded-full" :style="{width: item.batteryPower + '%'}"></div>
|
</div>
|
<div v-else>
|
<div class="red h-2.5 rounded-full" :style="{width: item.batteryPower + '%'}"></div>
|
</div>
|
</div>
|
<span class="text-xs text-gray-500">{{ item.batteryPower }}%</span>
|
</td>
|
<td class="py-3 px-4">{{ item.extend.voltage }}</td>
|
<td class="py-3 px-4">{{ item.speed }}</td>
|
<td class="py-3 px-4">{{ item.hasPallet$ }}</td>
|
<td class="py-3 px-4">{{ item.hasLift$ }}</td>
|
<td class="py-3 px-4">{{ item.hasCharge$ }}</td>
|
<td class="py-3 px-4">{{ item.statusErrorCode$ }}</td>
|
<!-- <td class="py-3 px-4">{{ item.suspendState }}</td>-->
|
<td class="py-3 px-4">{{ item.lowerPower }}</td>
|
<td class="py-3 px-4">{{ item.demo$ }}</td>
|
<td class="py-3 px-4">{{ item.pakMk$ }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<!-- 操作控制区域 -->
|
<div class="card p-6 mb-8">
|
<h2 class="text-xl font-semibold text-blue-300 mb-4">
|
<i class="fas fa-sliders-h mr-2"></i>控制面板
|
</h2>
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-2">
|
<div class="bg-slate-700 p-4 rounded-lg">
|
<h3 class="text-lg font-medium mb-2">车辆控制</h3>
|
<div class="flex flex-wrap gap-2" style="display: flex;justify-content: center;">
|
<div>
|
<el-input @change="changeControlShuttleNo" v-model="controlData.shuttleNo" style="width: 150px;" placeholder="车辆编号"></el-input>
|
</div>
|
<div>
|
<el-input @change="changeControlShuttleNo" v-model="controlData.taskNo" style="width: 150px;" placeholder="工作号"></el-input>
|
</div>
|
<div>
|
<el-input v-model="controlData.sourceLocNo" style="width: 200px;" placeholder="源库位"></el-input>
|
</div>
|
<div>
|
<el-input v-model="controlData.targetLocNo" style="width: 200px;" placeholder="目标库位"></el-input>
|
</div>
|
<div>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('writeTaskNo')">
|
<i class="fas fa-credit-card-alt mr-1"></i>写入工作号
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('transport')">
|
<i class="fas fa-truck mr-1"></i>搬运货物
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('move')">
|
<i class="fas fa-car mr-1"></i>移动到目标库位
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('moveTask')">
|
<i class="fas fa-car mr-1"></i>移动到目标库位(任务)
|
</button>
|
</div>
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg">
|
<h3 class="text-lg font-medium mb-2">设备指令</h3>
|
<div class="flex flex-wrap gap-2" style="display: flex;justify-content: center;">
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('palletLift')">
|
<i class="fas fa-level-up mr-1"></i>托盘顶升
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('palletDown')">
|
<i class="fas fa-level-down mr-1"></i>托盘下降
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('chargeOn')">
|
<i class="fas fa-battery-three-quarters mr-1"></i>充电-开
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('chargeOff')">
|
<i class="fas fa-battery-empty mr-1"></i>充电-关
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('reset')">
|
<i class="fas fa-home mr-1"></i>复位
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('demoOn')">
|
<i class="fas fa-hourglass-half mr-1"></i>演示-开
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('demoOff')">
|
<i class="fas fa-hourglass-empty mr-1"></i>演示-关
|
</button>
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="shuttleOperator('clearPath')">
|
<i class="fas fa-anchor mr-1"></i>清除路径
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 日志区域 -->
|
<div class="card p-6">
|
<div class="flex justify-between items-center mb-4">
|
<h2 class="text-xl font-semibold text-blue-300">
|
<i class="fas fa-history mr-2"></i>车辆信息
|
</h2>
|
</div>
|
<div class="bg-slate-800 rounded-lg p-4">
|
<div v-if="controlShuttleInfo != null" style="display: flex;flex-wrap: wrap;justify-content: space-around;">
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">车辆编号</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.shuttleNo}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">工作号</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.taskNo}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">任务状态</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.protocolStatus$}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">小车状态</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.deviceStatus$}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">模式</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.mode$}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">库位</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.currentLocNo}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">坐标</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.currentCode}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">电量</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.batteryPower}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">电压</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.extend.voltage}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">速度</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.speed}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">负载</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.hasPallet$}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">顶升</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.hasLift$}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">充电</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.hasCharge$}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">故障码</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.statusErrorCode$}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">低电量</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.lowerPower}}
|
</div>
|
</div>
|
<div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">
|
<h3 class="text-lg font-medium mb-2">演示模式</h3>
|
<div class="flex flex-wrap gap-4">
|
{{controlShuttleInfo.demo$}}
|
</div>
|
</div>
|
<!-- <div class="bg-slate-700 p-4 rounded-lg" style="width: 20%;margin-right: 10px;margin-top: 10px;">-->
|
<!-- <h3 class="text-lg font-medium mb-2">标记</h3>-->
|
<!-- <div class="flex flex-wrap gap-4">-->
|
<!-- {{controlShuttleInfo.pakMk$}}-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
|
<!-- <div class="overflow-y-auto max-h-60">-->
|
<!-- <div class="flex items-start py-2 border-b border-slate-700">-->
|
<!-- <div class="w-24 text-sm text-slate-400">14:30:22</div>-->
|
<!-- <div class="flex-1">-->
|
<!-- <span class="text-green-400">[INFO]</span> 穿梭车SC001完成任务T001-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="flex items-start py-2 border-b border-slate-700">-->
|
<!-- <div class="w-24 text-sm text-slate-400">14:28:15</div>-->
|
<!-- <div class="flex-1">-->
|
<!-- <span class="text-blue-400">[SYSTEM]</span> 系统自动备份完成-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="flex items-start py-2 border-b border-slate-700">-->
|
<!-- <div class="w-24 text-sm text-slate-400">14:25:47</div>-->
|
<!-- <div class="flex-1">-->
|
<!-- <span class="text-yellow-400">[WARNING]</span> 穿梭车SC004电量低于30%-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="flex items-start py-2 border-b border-slate-700">-->
|
<!-- <div class="w-24 text-sm text-slate-400">14:22:33</div>-->
|
<!-- <div class="flex-1">-->
|
<!-- <span class="text-green-400">[INFO]</span> 新任务T004已添加到队列-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="flex items-start py-2 border-b border-slate-700">-->
|
<!-- <div class="w-24 text-sm text-slate-400">14:20:18</div>-->
|
<!-- <div class="flex-1">-->
|
<!-- <span class="text-green-400">[INFO]</span> 穿梭车SC002开始执行任务T002-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</body>
|
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
ws: null,
|
shuttleList: [], //四向穿梭车集合
|
shuttleAllList: [],
|
selectListStatus: "all",
|
deviceStatusCountMap: {},
|
controlData: {
|
shuttleNo: "",
|
taskNo: "",
|
sourceLocNo: "",
|
targetLocNo: ""
|
},
|
controlShuttleInfo: null,
|
},
|
created() {
|
this.init()
|
},
|
watch: {
|
|
},
|
methods: {
|
init() {
|
this.consoleInterval = setInterval(() => {
|
this.websocketConnect();
|
|
this.getShuttleStateInfo() //获取四向穿梭车信息
|
}, 1000)
|
},
|
getShuttleStateInfo() {
|
this.sendWs(JSON.stringify({
|
"url": "/shuttle/table/shuttle/state",
|
"data": {}
|
}))
|
},
|
setShuttleStateInfo(res) {
|
// 四向穿梭车信息表获取
|
if (res.code == 200) {
|
let list = res.data;
|
|
let allList = []
|
let runningList = []
|
let idleList = []
|
let errorList = []
|
let offlineList = []
|
let onlineList = []
|
|
list.forEach((item) => {
|
allList.push(item)
|
|
if(item.deviceStatus == 0 && item.protocolStatusType != "OFFLINE") {
|
runningList.push(item)
|
}
|
|
if(item.deviceStatus == 1 && item.protocolStatusType != "OFFLINE") {
|
idleList.push(item)
|
}
|
|
if(parseInt(item.statusErrorCode) > 0) {
|
errorList.push(item)
|
}
|
|
if (item.protocolStatusType == "OFFLINE") {
|
offlineList.push(item)
|
}else {
|
onlineList.push(item)
|
}
|
})
|
|
if (this.selectListStatus == "all") {
|
this.shuttleList = allList;
|
}else if (this.selectListStatus == "running") {
|
this.shuttleList = runningList;
|
}else if (this.selectListStatus == "idle") {
|
this.shuttleList = idleList;
|
}else if (this.selectListStatus == "error") {
|
this.shuttleList = errorList;
|
}else if (this.selectListStatus == "offline") {
|
this.shuttleList = offlineList;
|
}else if (this.selectListStatus == "online") {
|
this.shuttleList = onlineList;
|
}
|
|
let tmpMap = {
|
idle: idleList.length,
|
running: runningList.length,
|
error: errorList.length,
|
offline: offlineList.length,
|
online: idleList.length + runningList.length,
|
}
|
this.deviceStatusCountMap = tmpMap;
|
|
this.shuttleAllList = allList;
|
if (this.controlShuttleInfo != null) {
|
allList.forEach((item) => {
|
if(item.shuttleNo == this.controlShuttleInfo.shuttleNo) {
|
this.controlShuttleInfo = item;
|
}
|
});
|
}
|
}
|
},
|
shuttleOperator(type) {
|
let that = this;
|
if (this.controlData.shuttleNo == null || this.controlData.shuttleNo == "") {
|
this.$message({
|
message: '请输入车辆编号',
|
type: 'warning'
|
});
|
return;
|
}
|
|
let requestParam = {
|
shuttleNo: this.controlData.shuttleNo
|
};
|
|
if (type == 'transport') {
|
if (this.controlData.sourceLocNo == null || this.controlData.sourceLocNo == "") {
|
this.$message({
|
message: '请输入源库位',
|
type: 'warning'
|
});
|
return;
|
}
|
|
if (this.controlData.targetLocNo == null || this.controlData.targetLocNo == "") {
|
this.$message({
|
message: '请输入目标库位',
|
type: 'warning'
|
});
|
return;
|
}
|
|
requestParam.shuttleTaskMode = 9;
|
requestParam.sourceLocNo = this.controlData.sourceLocNo;
|
requestParam.distLocNo = this.controlData.targetLocNo;
|
}else if (type == 'move') {
|
if (this.controlData.targetLocNo == null || this.controlData.targetLocNo == "") {
|
this.$message({
|
message: '请输入目标库位',
|
type: 'warning'
|
});
|
return;
|
}
|
|
requestParam.shuttleTaskMode = 4;
|
requestParam.sourceLocNo = this.controlData.targetLocNo;
|
requestParam.distLocNo = this.controlData.targetLocNo;
|
}else if (type == 'moveTask') {
|
if (this.controlData.targetLocNo == null || this.controlData.targetLocNo == "") {
|
this.$message({
|
message: '请输入目标库位',
|
type: 'warning'
|
});
|
return;
|
}
|
|
requestParam.shuttleTaskMode = 5;
|
requestParam.sourceLocNo = this.controlData.targetLocNo;
|
requestParam.distLocNo = this.controlData.targetLocNo;
|
}else if (type == 'palletLift') {
|
requestParam.shuttleTaskMode = 1;
|
}else if (type == 'palletDown') {
|
requestParam.shuttleTaskMode = 2;
|
}else if (type == 'chargeOn') {
|
requestParam.shuttleTaskMode = 15;
|
}else if (type == 'chargeOff') {
|
requestParam.shuttleTaskMode = 16;
|
}else if (type == 'reset') {
|
requestParam.shuttleTaskMode = 3;
|
}else if (type == 'demoOn') {
|
requestParam.shuttleTaskMode = 12;
|
}else if (type == 'demoOff') {
|
requestParam.shuttleTaskMode = 13;
|
}else if (type == 'clearPath') {
|
requestParam.shuttleTaskMode = 17;
|
}else if (type == 'writeTaskNo') {
|
requestParam.workNo = this.controlData.taskNo;
|
requestParam.pakMk = null;
|
|
$.ajax({
|
url: baseUrl + "/shuttle/detl/update",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: requestParam,
|
success: function (res) {
|
if (res.code === 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'warning'
|
});
|
}
|
}
|
});
|
return;
|
}
|
|
$.ajax({
|
url: baseUrl + "/shuttle/operator/shuttle",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: requestParam,
|
success: function (res) {
|
if (res.code === 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'warning'
|
});
|
}
|
}
|
});
|
},
|
changeControlShuttleNo() {
|
let shuttleNo = this.controlData.shuttleNo;
|
if (shuttleNo == null || shuttleNo == "") {
|
this.controlShuttleInfo = null
|
}
|
|
this.shuttleAllList.forEach((item) => {
|
if (item.shuttleNo == shuttleNo) {
|
this.controlShuttleInfo = item;
|
}
|
});
|
},
|
websocketConnect() {
|
if (this.ws == null) {
|
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
|
}
|
},
|
webSocketOnOpen(e) {
|
console.log("open");
|
},
|
webSocketOnError(e) {
|
this.ws = null;
|
console.log(e);
|
},
|
webSocketOnMessage(e) {
|
const result = JSON.parse(e.data);
|
if (result.url == "/shuttle/table/shuttle/state") {
|
this.setShuttleStateInfo(JSON.parse(result.data))
|
}
|
},
|
webSocketClose(e) {
|
this.ws = null;
|
console.log("close");
|
},
|
sendWs(message) {
|
if (this.ws == null) {
|
return;
|
}
|
|
if (this.ws.readyState == WebSocket.OPEN) {
|
this.ws.send(message);
|
}
|
}
|
}
|
})
|
</script>
|
</html>
|
