From 0ced7e5a9f10c0d3697906aad71d1fe009ae96d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Mon, 22 Dec 2025 10:18:58 +0800 Subject: [PATCH] =?UTF-8?q?feat(api):=20=E4=B8=BAL2=20API=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0HTTP=E5=8D=8F=E8=AE=AE=E5=89=8D=E7=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor(warehouse): 重构仓库管理页面为卡片布局并优化交互 - 移除树形表格改用卡片布局 - 添加启用/禁用快捷开关 - 优化备注显示样式 - 简化表单逻辑 feat(utils): 新增WebSocket管理器类 - 支持多连接管理 - 自动重连机制 - 状态监控功能 style(views): 清理注释掉的代码和未使用的组件 --- klp-ui/src/api/l2/pdo.js | 2 +- klp-ui/src/api/l2/plan.js | 2 +- klp-ui/src/api/l2/report.js | 2 +- klp-ui/src/api/l2/roller.js | 2 +- klp-ui/src/api/l2/steelGrade.js | 2 +- klp-ui/src/api/l2/stop.js | 2 +- klp-ui/src/api/l2/track.js | 2 +- klp-ui/src/utils/websocketManager.js | 137 + klp-ui/src/views/lines/index.vue | 5 +- klp-ui/src/views/lines/panels/track/index.vue | 2311 +++++++++++++++-- .../components/WarehouseInterlaced.vue | 13 +- klp-ui/src/views/wms/warehouse/index.vue | 326 +-- 12 files changed, 2429 insertions(+), 377 deletions(-) create mode 100644 klp-ui/src/utils/websocketManager.js diff --git a/klp-ui/src/api/l2/pdo.js b/klp-ui/src/api/l2/pdo.js index f621540d..823b4a09 100644 --- a/klp-ui/src/api/l2/pdo.js +++ b/klp-ui/src/api/l2/pdo.js @@ -2,7 +2,7 @@ import axios from 'axios' export default function createFetch(url) { const l2Request = axios.create({ - baseURL: url, + baseURL: 'http://' + url, headers: { 'Content-Type': 'application/json' }, diff --git a/klp-ui/src/api/l2/plan.js b/klp-ui/src/api/l2/plan.js index e1fef910..0db59892 100644 --- a/klp-ui/src/api/l2/plan.js +++ b/klp-ui/src/api/l2/plan.js @@ -44,7 +44,7 @@ function formatDateFields(data) { export default function createFetch(url) { const l2Request = axios.create({ - baseURL: url, + baseURL: 'http://' + url, headers: { 'Content-Type': 'application/json' }, diff --git a/klp-ui/src/api/l2/report.js b/klp-ui/src/api/l2/report.js index c425a27a..cdbea23d 100644 --- a/klp-ui/src/api/l2/report.js +++ b/klp-ui/src/api/l2/report.js @@ -2,7 +2,7 @@ import axios from 'axios' export default function createFetch(url) { const l2Request = axios.create({ - baseURL: url, + baseURL: 'http://' + url, headers: { 'Content-Type': 'application/json' }, diff --git a/klp-ui/src/api/l2/roller.js b/klp-ui/src/api/l2/roller.js index c672f2b8..f356b56d 100644 --- a/klp-ui/src/api/l2/roller.js +++ b/klp-ui/src/api/l2/roller.js @@ -2,7 +2,7 @@ import axios from 'axios' export default function createFetch(url) { const l2Request = axios.create({ - baseURL: url, + baseURL: 'http://' + url, headers: { 'Content-Type': 'application/json' }, diff --git a/klp-ui/src/api/l2/steelGrade.js b/klp-ui/src/api/l2/steelGrade.js index 08169fcf..68de1c8c 100644 --- a/klp-ui/src/api/l2/steelGrade.js +++ b/klp-ui/src/api/l2/steelGrade.js @@ -2,7 +2,7 @@ import axios from 'axios' export default function createFetch(url) { const l2Request = axios.create({ - baseURL: url, + baseURL: 'http://' + url, headers: { 'Content-Type': 'application/json' }, diff --git a/klp-ui/src/api/l2/stop.js b/klp-ui/src/api/l2/stop.js index 43e430cc..fac87984 100644 --- a/klp-ui/src/api/l2/stop.js +++ b/klp-ui/src/api/l2/stop.js @@ -2,7 +2,7 @@ import axios from 'axios' export default function createFetch(url) { const l2Request = axios.create({ - baseURL: url, + baseURL: 'http://' + url, headers: { 'Content-Type': 'application/json' }, diff --git a/klp-ui/src/api/l2/track.js b/klp-ui/src/api/l2/track.js index 856e87dc..d1bd59d3 100644 --- a/klp-ui/src/api/l2/track.js +++ b/klp-ui/src/api/l2/track.js @@ -2,7 +2,7 @@ import axios from 'axios' export default function createFetch(url) { const l2Request = axios.create({ - baseURL: url, + baseURL: 'http://' + url, headers: { 'Content-Type': 'application/json' }, diff --git a/klp-ui/src/utils/websocketManager.js b/klp-ui/src/utils/websocketManager.js new file mode 100644 index 00000000..5352f380 --- /dev/null +++ b/klp-ui/src/utils/websocketManager.js @@ -0,0 +1,137 @@ +/** + * WebSocket 管理器 + * 用于管理多个 WebSocket 连接 + */ + +class WebSocketManager { + constructor(url) { + this.connections = new Map() + this.baseUrl = url + } + + /** + * 创建 WebSocket 连接 + * @param {String} type - WebSocket 类型 (track_measure, track_position, track_signal, track_matmap, calc_setup_result) + * @param {Function} onMessage - 接收消息的回调函数 + * @param {Function} onOpen - 连接打开的回调函数 + * @param {Function} onError - 错误回调函数 + * @param {Function} onClose - 关闭回调函数 + */ + connect(type, { onMessage, onOpen, onError, onClose } = {}) { + // 如果已存在连接，先断开 + if (this.connections.has(type)) { + this.disconnect(type) + } + + const url = `${this.baseUrl}?type=${type}` + console.log(`[WebSocket] 正在连接: ${type}`) + + try { + const socket = new WebSocket(url) + + socket.onopen = (event) => { + console.log(`[WebSocket] 连接成功: ${type}`) + if (onOpen) onOpen(event) + } + + socket.onmessage = (event) => { + try { + const data = JSON.parse(event.data) + if (onMessage) onMessage(data) + } catch (error) { + console.error(`[WebSocket] 数据解析失败 (${type}):`, error) + // 如果不是 JSON，直接传递原始数据 + if (onMessage) onMessage(event.data) + } + } + + socket.onerror = (error) => { + console.error(`[WebSocket] 连接错误 (${type}):`, error) + if (onError) onError(error) + } + + socket.onclose = (event) => { + console.log(`[WebSocket] 连接关闭 (${type}):`, event.code, event.reason) + this.connections.delete(type) + + if (onClose) { + onClose(event) + } else if (event.code !== 1000) { + // 非正常关闭，3秒后自动重连 + console.log(`[WebSocket] 3秒后尝试重连: ${type}`) + setTimeout(() => { + this.connect(type, { onMessage, onOpen, onError, onClose }) + }, 3000) + } + } + + this.connections.set(type, socket) + return socket + } catch (error) { + console.error(`[WebSocket] 创建连接失败 (${type}):`, error) + // 失败后3秒重试 + setTimeout(() => { + this.connect(type, { onMessage, onOpen, onError, onClose }) + }, 3000) + } + } + + /** + * 断开指定类型的连接 + */ + disconnect(type) { + const socket = this.connections.get(type) + if (socket) { + console.log(`[WebSocket] 主动断开: ${type}`) + socket.close(1000, '主动关闭') + this.connections.delete(type) + } + } + + /** + * 断开所有连接 + */ + disconnectAll() { + console.log('[WebSocket] 断开所有连接') + this.connections.forEach((socket, type) => { + this.disconnect(type) + }) + } + + /** + * 获取指定类型的连接状态 + */ + isConnected(type) { + const socket = this.connections.get(type) + return socket && socket.readyState === WebSocket.OPEN + } + + /** + * 获取所有连接状态 + */ + getAllStatus() { + const status = {} + this.connections.forEach((socket, type) => { + status[type] = socket.readyState === WebSocket.OPEN + }) + return status + } + + /** + * 发送消息（如果需要） + */ + send(type, message) { + const socket = this.connections.get(type) + if (socket && socket.readyState === WebSocket.OPEN) { + const data = typeof message === 'string' ? message : JSON.stringify(message) + socket.send(data) + return true + } + console.warn(`[WebSocket] 无法发送消息，连接未打开: ${type}`) + return false + } +} + +// 导出单例 +export default WebSocketManager + diff --git a/klp-ui/src/views/lines/index.vue b/klp-ui/src/views/lines/index.vue index fcd16480..42a521dc 100644 --- a/klp-ui/src/views/lines/index.vue +++ b/klp-ui/src/views/lines/index.vue @@ -1,14 +1,13 @@