hanst
/
wms-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

真实数据

master
han\hanst 3 months ago
parent
d05b6f3dc4
commit
692bac93d5
2 changed files with 212 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 216
      src/views/modules/dashboard/finished-product-board.vue
  2. 206
      src/views/modules/dashboard/material-receiving-board.vue

216
src/views/modules/dashboard/finished-product-board.vue
View File

@ -63,8 +63,8 @@
<td class="text-center">{{ item.storageLocation }}</td> <td class="text-center">{{ item.storageLocation }}</td>
<td class="text-center">{{ item.palletCode }}</td> <td class="text-center">{{ item.palletCode }}</td>
<td class="text-center">{{ item.pickingLocation }}</td> <td class="text-center">{{ item.pickingLocation }}</td>
<td class="text-left">{{ item.materialName }}</td>
<td class="text-right">{{ item.quantity }}</td>
<td class="text-center">{{ item.materialName }}</td>
<td class="text-center">{{ item.quantity }}</td>
<td class="text-center"> <td class="text-center">
<span :class="['status-badge', getStatusClass(item.status)]"> <span :class="['status-badge', getStatusClass(item.status)]">
{{ item.status }} {{ item.status }}
@ -127,6 +127,7 @@
<script> <script>
import {finishedProductBoard} from '@/api/dashboard/dashboard.js' import {finishedProductBoard} from '@/api/dashboard/dashboard.js'
import WebSocketClient from '@/utils/websocket'
export default { export default {
name: 'FinishedProductBoard', name: 'FinishedProductBoard',
@ -135,143 +136,138 @@ export default {
return { return {
currentTime: '', currentTime: '',
timeInterval: null, timeInterval: null,
dataInterval: null,
// WebSocket相关
useWebSocket: true, // 是否使用WebSocket（可切换为false降级到轮询）
wsConnected: false, // WebSocket连接状态
wsSubscription: null, // WebSocket订阅ID
// 成品包装区数据 // 成品包装区数据
packagingList: [
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '2-1',
materialName: '80501234',
quantity: '1,000',
status: '已到达'
},
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '1-2',
materialName: '80501235',
quantity: '5000',
status: '已到达'
},
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '1-2',
materialName: '80501236',
quantity: '1000',
status: '已到达'
},
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '1-3',
materialName: '80501237',
quantity: '1000',
status: '已到达'
},
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '1-4',
materialName: '80501238',
quantity: '5000',
status: '已到达'
},
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '2-2',
materialName: '80501239',
quantity: '1000',
status: '已到达'
},
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '2-3',
materialName: '80501240',
quantity: '2000',
status: '已到达'
},
{
storageLocation: 'CP04',
palletCode: 'P00001',
pickingLocation: '2-4',
materialName: '80501241',
quantity: '123',
status: '已到达'
}
],
packagingList: [],
// 成品入库区数据 // 成品入库区数据
inboundList: [
{
storageLocation: 'CP01',
palletCode: 'P00002',
taskType: '入库',
status: 'AGV运送中'
},
{
storageLocation: 'CP02',
palletCode: 'P00003',
taskType: '入库',
status: '已组盘'
},
{
storageLocation: 'CP03',
palletCode: 'P00004',
taskType: '入库',
status: '已组盘'
},
{
storageLocation: 'CP04',
palletCode: 'P00010',
taskType: '生产送货',
status: '已到达'
}
]
inboundList: []
} }
}, },
mounted() { mounted() {
// 启动时钟
this.updateTime() this.updateTime()
this.timeInterval = setInterval(() => { this.timeInterval = setInterval(() => {
this.updateTime() this.updateTime()
}, 1000) }, 1000)
// 首次加载数据
this.getDataList()
// 每10秒刷新一次数据
this.dataInterval = setInterval(() => {
this.getDataList()
}, 10000)
// 根据配置选择使用WebSocket或轮询
if (this.useWebSocket) {
this.initWebSocket()
}
}, },
beforeDestroy() { beforeDestroy() {
// 清理时钟
if (this.timeInterval) { if (this.timeInterval) {
clearInterval(this.timeInterval) clearInterval(this.timeInterval)
} }
if (this.dataInterval) {
clearInterval(this.dataInterval)
}
// 断开WebSocket连接
this.disconnectWebSocket()
}, },
methods: { methods: {
/**
* 初始化WebSocket连接
*/
initWebSocket() {
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
// 连接WebSocket服务器
const wsUrl = apiServer + '/ws/dashboard'
WebSocketClient.connect(
wsUrl,
() => {
this.wsConnected = true
// 订阅成品入库出库区看板主题
this.wsSubscription = WebSocketClient.subscribe(
'/topic/dashboard/finished-product-board',
this.handleWebSocketMessage
)
},
(error) => {
// 连接失败回调
console.error('[成品入库出库区看板] WebSocket连接失败，降级到轮询模式', error)
this.wsConnected = false
this.fallbackToPolling()
}
)
},
/**
* 处理WebSocket推送的消息
*
* @param {object} message WebSocket推送的消息
*/
handleWebSocketMessage(message) {
if (message && message.code === 0) {
this.packagingList = message.data.packagingList || []
this.inboundList = message.data.inboundList || []
}
},
/**
* 断开WebSocket连接
*/
disconnectWebSocket() {
if (this.wsSubscription) {
WebSocketClient.unsubscribe(this.wsSubscription)
this.wsSubscription = null
}
if (this.wsConnected) {
WebSocketClient.disconnect()
this.wsConnected = false
console.log('[成品入库出库区看板] WebSocket已断开')
}
},
/**
* 降级到轮询模式
*/
fallbackToPolling() {
this.getDataList()
},
/** /**
* 获取数据列表 * 获取数据列表
*
* <p><b>功能说明：</b>从后端API获取成品入库出库区看板实时数据</p>
* <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
*/ */
getDataList() { getDataList() {
finishedProductBoard({}).then(({data}) => { finishedProductBoard({}).then(({data}) => {
if (data && data.code === 200) { if (data && data.code === 200) {
console.log('获取成品入库出库区数据成功:', data.data) console.log('获取成品入库出库区数据成功:', data.data)
// TODO: 处理返回的数据，覆盖而非追加，避免内存累积
// if (data.data) {
// this.packagingList = data.data.packagingList || []
// this.inboundList = data.data.inboundList || []
// }
// 处理返回的数据
if (data.data) {
// 成品包装区数据
if (data.data.packagingList && data.data.packagingList.length > 0) {
this.packagingList = data.data.packagingList
console.log('成品包装区数据已更新，共', this.packagingList.length, '条')
} else {
console.log('暂无成品包装区数据')
}
// 成品入库区数据
if (data.data.inboundList && data.data.inboundList.length > 0) {
this.inboundList = data.data.inboundList
console.log('成品入库区数据已更新，共', this.inboundList.length, '条')
} else {
console.log('暂无成品入库区数据')
}
}
} else {
console.error('获取成品入库出库区数据失败: 返回码不正确')
} }
}).catch(error => { }).catch(error => {
console.error('获取成品入库出库区数据失败:', error) console.error('获取成品入库出库区数据失败:', error)

206
src/views/modules/dashboard/material-receiving-board.vue
View File

@ -125,6 +125,7 @@
<script> <script>
import {materialReceivingBoard} from '@/api/dashboard/dashboard.js' import {materialReceivingBoard} from '@/api/dashboard/dashboard.js'
import WebSocketClient from '@/utils/websocket'
export default { export default {
name: 'MaterialReceivingBoard', name: 'MaterialReceivingBoard',
@ -133,135 +134,140 @@ export default {
return { return {
currentTime: '', currentTime: '',
timeInterval: null, timeInterval: null,
dataInterval: null,
// WebSocket相关
useWebSocket: true, // 是否使用WebSocket（可切换为false降级到轮询）
wsConnected: false, // WebSocket连接状态
wsSubscription: null, // WebSocket订阅ID
// 原材收货区数据 // 原材收货区数据
receivingList: [
{
arrivalTime: '2025/10/15',
materialName: '80501234',
quantity: '1,000',
location: 'FMQ',
status: '待检验'
},
{
arrivalTime: '2025/10/15',
materialName: '80501235',
quantity: '5000',
location: 'FMQ',
status: '待检验'
},
{
arrivalTime: '2025/10/15',
materialName: '80501236',
quantity: '1000',
location: 'FMQ',
status: '检验OK'
},
{
arrivalTime: '2025/10/15',
materialName: '80501237',
quantity: '1000',
location: 'FMQ',
status: '检验OK'
},
{
arrivalTime: '2025/10/15',
materialName: '80501238',
quantity: '5000',
location: 'FMQ',
status: '检验NG'
},
{
arrivalTime: '1902/10/10',
materialName: '80501239',
quantity: '1000',
location: 'YCHC01',
status: '待入库'
},
{
arrivalTime: '1902/10/10',
materialName: '80501240',
quantity: '2000',
location: 'YCHC01',
status: '待入库'
},
{
arrivalTime: '1902/10/10',
materialName: '80501241',
quantity: '123',
location: 'YCHC01',
status: '待入库'
}
],
receivingList: [],
// 原材入库区数据 // 原材入库区数据
inboundList: [
{
storageLocation: 'YC01',
palletCode: 'G00002',
taskType: '入库',
status: 'AGV运送中'
},
{
storageLocation: 'YC02',
palletCode: 'G00003',
taskType: '入库',
status: '已组盘'
},
{
storageLocation: 'YC03',
palletCode: 'G00004',
taskType: '入库',
status: '已组盘'
},
{
storageLocation: 'YC04',
palletCode: 'G00010',
taskType: '退料',
status: '已到达'
}
]
inboundList: []
} }
}, },
mounted() { mounted() {
// 启动时钟
this.updateTime() this.updateTime()
this.timeInterval = setInterval(() => { this.timeInterval = setInterval(() => {
this.updateTime() this.updateTime()
}, 1000) }, 1000)
// 首次加载数据
this.getDataList()
// 每10秒刷新一次数据
this.dataInterval = setInterval(() => {
this.getDataList()
}, 10000)
// 根据配置选择使用WebSocket或轮询
if (this.useWebSocket) {
this.initWebSocket()
}
}, },
beforeDestroy() { beforeDestroy() {
// 清理时钟
if (this.timeInterval) { if (this.timeInterval) {
clearInterval(this.timeInterval) clearInterval(this.timeInterval)
} }
if (this.dataInterval) {
clearInterval(this.dataInterval)
}
// 断开WebSocket连接
this.disconnectWebSocket()
}, },
methods: { methods: {
/**
* 初始化WebSocket连接
*/
initWebSocket() {
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
// 连接WebSocket服务器
const wsUrl = apiServer + '/ws/dashboard'
WebSocketClient.connect(
wsUrl,
() => {
this.wsConnected = true
// 订阅原材收货区看板主题
this.wsSubscription = WebSocketClient.subscribe(
'/topic/dashboard/material-receiving-board',
this.handleWebSocketMessage
)
},
(error) => {
// 连接失败回调
console.error('[原材收货区看板] WebSocket连接失败，降级到轮询模式', error)
this.wsConnected = false
this.fallbackToPolling()
}
)
},
/**
* 处理WebSocket推送的消息
*
* @param {object} message WebSocket推送的消息
*/
handleWebSocketMessage(message) {
if (message && message.code === 0) {
this.receivingList = message.data.receivingList || []
this.inboundList = message.data.inboundList || []
}
},
/**
* 断开WebSocket连接
*/
disconnectWebSocket() {
if (this.wsSubscription) {
WebSocketClient.unsubscribe(this.wsSubscription)
this.wsSubscription = null
}
if (this.wsConnected) {
WebSocketClient.disconnect()
this.wsConnected = false
console.log('[原材收货区看板] WebSocket已断开')
}
},
/**
* 降级到轮询模式
*/
fallbackToPolling() {
console.log('[原材收货区看板] 启动轮询模式，每10秒刷新一次')
// 首次立即获取数据
this.getDataList()
},
/** /**
* 获取数据列表 * 获取数据列表
*
* <p><b>功能说明：</b>从后端API获取原材收货区看板实时数据</p>
* <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
*/ */
getDataList() { getDataList() {
materialReceivingBoard({}).then(({data}) => { materialReceivingBoard({}).then(({data}) => {
if (data && data.code === 200) { if (data && data.code === 200) {
console.log('获取原材收货区数据成功:', data.data) console.log('获取原材收货区数据成功:', data.data)
// TODO: 处理返回的数据，覆盖而非追加，避免内存累积
// if (data.data) {
// this.receivingList = data.data.receivingList || []
// this.inboundList = data.data.inboundList || []
// }
// 处理返回的数据
if (data.data) {
// 原材收货区数据
if (data.data.receivingList && data.data.receivingList.length > 0) {
this.receivingList = data.data.receivingList
console.log('原材收货区数据已更新，共', this.receivingList.length, '条')
} else {
console.log('暂无原材收货区数据')
}
// 原材入库区数据
if (data.data.inboundList && data.data.inboundList.length > 0) {
this.inboundList = data.data.inboundList
console.log('原材入库区数据已更新，共', this.inboundList.length, '条')
} else {
console.log('暂无原材入库区数据')
}
}
} else {
console.error('获取原材收货区数据失败: 返回码不正确')
} }
}).catch(error => { }).catch(error => {
console.error('获取原材收货区数据失败:', error) console.error('获取原材收货区数据失败:', error)

Write Preview
Loading…
Cancel
Save