feat(stockChat): 集成 SignalR 实现实时库存更新

wanshenmean

2026-03-30 715cf4c8b9e097aae6c4bcaf00bdd67a763529c4

 Code/WMS/WIDESEA_WMSClient/src/views/stock/stockChat.vue

@@ -59,8 +59,12 @@
import { ref, reactive, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as signalR from '@microsoft/signalr'

const { proxy } = getCurrentInstance()

// SignalR 连接
let connection = null

// 颜色常量
const COLOR_MAP = {
@@ -101,6 +105,39 @@
let locationMesh = null
let locationData = []
let animationId = null

// SignalR 初始化
function initSignalR() {
  proxy.http.post('api/User/GetCurrentUserInfo').then((result) => {
    connection = new signalR.HubConnectionBuilder()
      .withAutomaticReconnect()
      .withUrl(`${proxy.http.ipAddress}stockHub?userName=${result.data.userName}`)
      .build();

    connection.start().catch((err) => console.log('SignalR连接失败:', err));

    connection.on('StockUpdated', (update) => {
      // 更新对应货位的数据
      const idx = locationData.findIndex(x => x.locationId === update.locationId);
      if (idx !== -1) {
        locationData[idx].stockQuantity = update.stockQuantity;
        locationData[idx].stockStatus = update.stockStatus;
        // 重新渲染单个货位颜色
        updateInstanceColor(idx, update.stockStatus);
      }
    });
  });
}

// 更新单个货位颜色
function updateInstanceColor(instanceId, stockStatus) {
  if (!locationMesh) return;
  const loc = locationData[instanceId];
  if (!loc) return;
  const color = getLocationColor(loc);
  locationMesh.setColorAt(instanceId, new THREE.Color(color));
  locationMesh.instanceColor.needsUpdate = true;
}

// 获取货位颜色
function getLocationColor(location) {
@@ -386,6 +423,7 @@
onMounted(() => {
  initThreeJS()
  loadWarehouseList()
  initSignalR()
  window.addEventListener('resize', onWindowResize)
})

@@ -401,6 +439,9 @@
  if (renderer) {
    renderer.dispose()
  }
  if (connection) {
    connection.stop()
  }
})
</script>