| | |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <div class="overflow-x-auto" style="height: 500px;"> |
| | | <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"> |
| | | <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> |
| | |
| | | </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> |
| | | <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> |
| | | <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> |
| | | <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="bg-slate-700 p-4 rounded-lg"> |
| | | <h3 class="text-lg font-medium mb-2">设备维护</h3> |
| | | <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>托盘顶升 |
| | |
| | | }, |
| | | methods: { |
| | | init() { |
| | | this.websocketConnect(); |
| | | |
| | | this.consoleInterval = setInterval(() => { |
| | | this.websocketConnect(); |
| | | |
| | | this.getShuttleStateInfo() //获取四向穿梭车信息 |
| | | }, 1000) |
| | | }, |
| | |
| | | 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') { |
| | |
| | | }); |
| | | }, |
| | | websocketConnect() { |
| | | 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 |
| | | 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); |
| | | this.websocketConnect(); |
| | | }, |
| | | webSocketOnMessage(e) { |
| | | const result = JSON.parse(e.data); |
| | |
| | | } |
| | | }, |
| | | webSocketClose(e) { |
| | | this.ws = null; |
| | | console.log("close"); |
| | | this.websocketConnect(); |
| | | }, |
| | | sendWs(message) { |
| | | if (this.ws == null) { |
| | | return; |
| | | } |
| | | |
| | | if (this.ws.readyState == WebSocket.OPEN) { |
| | | this.ws.send(message) |
| | | this.ws.send(message); |
| | | } |
| | | } |
| | | } |