SuZhouGuanHong/ShanMeiXinNengYuan.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,233 @@
			# åºå3Dæ¥çå¨ (stockChat) è®¾è®¡ææ¡£

			## 1. æ¦è¿°

			- åè½åç§°ï¼åºå3Dä»åºæ¥çå¨ (stockChat)
			- æä»¶è·¯å¾ï¼`WIDESEA_WMSClient/src/views/stock/stockChat.vue`
			- æ ¸å¿åè½ï¼ä½¿ç¨ Three.js + WebGL å®ç°ä»åº3Då¯è§åï¼ç¨æ·å¯å¨3Dåºæ¯ä¸å·¡è§ä»åºãæ¥çè´§ä½ç¶æãç¹å»è´§ä½æ¥çåºåè¯¦æ
			- ç®æ ç¨æ·ï¼ä»åºç®¡çåãè°åº¦äººåãè´¨æ£äººå

			## 2. ææ¯éå

			\| ææ¯ \| éå \| è¯´æ \|
			\|------\|------\|------\|
			\| 3Då¼æ \| Three.js \| WebGL ä¸»æµåºï¼Vue 3 åå¥½ \|
			\| æ¸²æçç¥ \| InstancedMesh \| æ¹éæ¸²æå¤§éè´§ä½ï¼åæ¬¡ drawcall \|
			\| ç¶æç®¡ç \| Vue 3 Composition API \| `ref/reactive` \|
			\| UIç»ä»¶ \| Element Plus \| ä¸é¡¹ç®ç°æææ¯æ ä¸è´ \|
			\| å®æ¶éä¿¡ \| SignalR \| ä¸åç«¯ WebSocket éåå®ç°åºåå¨ææ´æ° \|

			## 3. åè½éæ±

			### 3.1 æ ¸å¿åè½

			1. ä»åº3Då¸å±å±ç¤º
			- å¨é¨è´§ä½åæ¸²æï¼æç¶æçè²
			- è´§æ¶å¼æåï¼åå«å··é
			- å°é¢ç½æ ¼èæ¯

			2. å¤ä»åº Tab åæ¢
			- Element Plus Tabs ç»ä»¶
			- æ¯ä¸ªä»åºç¬ç«å è½½æ°æ®
			- Tab åæ¢æ¶éç½®3Dåºæ¯

			3. è´§ä½ç¹å»è¯¦æå¼¹çª
			- å¨å± Dialog å±ç¤º
			- æ¾ç¤ºï¼è´§ä½ä¿¡æ¯ãåºåç¶æãæçç¼å·ãç©ææç»åè¡¨
			- æ¯ææ¥çæ¹æ¬¡ãä¿è´¨æé¢è¦

			4. 3Dåºæ¯äº¤äº
			- é¼ æ æè½¬ï¼OrbitControlsï¼
			- æ»è½®ç¼©æ¾
			- ä¸é®å¹³ç§»
			- ç¹å»è´§ä½é«äº® + ç¸æºèç¦

			5. å®æ¶åºåç¶ææ´æ°
			- SignalR çå¬åºååå
			- è´§ä½é¢è²å¨ææ´æ°

			6. çéè¿æ»¤
			- æç©æç±»å/æ¹æ¬¡/åºåç¶æè¿æ»¤
			- é«äº®æ¾ç¤ºå¹éè´§ä½

			7. ç¶æå¾ä¾
			- å³ä¸è§/åºé¨é¢è²å¾ä¾
			- è¯´ææ¯ç§é¢è²ä»£è¡¨çè´§ä½ç¶æ

			### 3.2 è´§ä½ç¶æé¢è²ç¼ç

			\| ç¶æ \| é¢è² \| Hex \|
			\|------\|------\|-----\|
			\| ç©ºè´§ä½ \| æç° \| `#4a4a4a` \|
			\| æåºå \| èè² \| `#409EFF` \|
			\| åºåç´§å¼ (<10%) \| æ©è² \| `#E6A23C` \|
			\| å·²æ»¡ \| ç»¿è² \| `#67C23A` \|
			\| éå®/å»ç» \| çº¢è² \| `#F56C6C` \|
			\| ç¦ç¨ \| æ·±ç° \| `#2d2d2d` \|

			## 4. åç«¯ API

			### 4.1 æ°å¢æ¥å£

			```
			GET /api/StockInfo/Get3DLayout?warehouseId={id}
			```

			ååºç»æï¼
			```json
			{
			"status": true,
			"data": {
			"warehouseId": 1,
			"warehouseName": "ä¸»ä»åº",
			"maxRow": 10,
			"maxColumn": 20,
			"maxLayer": 5,
			"locations": [
			{
			"locationId": 1,
			"locationCode": "A-01-02-03",
			"row": 1,
			"column": 2,
			"layer": 3,
			"locationStatus": 0,
			"stockStatus": 2,
			"stockQuantity": 50,
			"maxCapacity": 100,
			"palletCode": "PLT-001",
			"materielCode": "M001",
			"materielName": "ç©æA",
			"batchNo": "B20260301"
			}
			]
			}
			}
			```

			è¯´æï¼
			- `locationStatus`: 0=ç©º, 1=å ç¨, 2=éå®, 3=ç¦ç¨
			- `stockStatus`: 0=æ è´§, 1=æè´§, 2=åºåç´§å¼ , 3=å·²æ»¡
			- `maxCapacity`: è´§ä½æå¤§å®¹éï¼ç¨äºè®¡ç®å¡«åçï¼

			### 4.2 SignalR å®æ¶æ¨é

			Hub è·¯å¾ï¼`/stockHub`

			æ¨éäºä»¶ï¼
			```javascript
			// åºåååäºä»¶
			stockUpdated: { locationId, warehouseId, stockQuantity, stockStatus }
			```

			## 5. åç«¯æä»¶ç»æ

			```
			WIDESEA_WMSClient/src/
			âââ views/stock/
			â âââ stockChat.vue # ä¸»é¡µé¢ç»ä»¶
			âââ extension/stock/
			â âââ stockChat.js # ViewGrid æ©å±éç½®
			âââ api/
			âââ http.js # å¤ç¨ç°æ http å°è£
			```

			## 6. ç»ä»¶ç»æ (stockChat.vue)

			```vue
			<template>
			<div class="stock-chat-container">
			<!-- ä»åº Tabs -->
			<el-tabs v-model="activeWarehouse" @tab-change="onWarehouseChange">
			<el-tab-pane
			v-for="wh in warehouseList"
			:key="wh.warehouseId"
			:label="wh.warehouseName"
			:name="wh.warehouseId"
			/>
			</el-tabs>

			<!-- å·¥å·æ -->
			<div class="toolbar">
			<el-select v-model="filterStatus" placeholder="åºåç¶æçé" clearable />
			<el-select v-model="filterMateriel" placeholder="ç©æçé" clearable />
			<el-button @click="resetCamera">éç½®è§è§</el-button>
			</div>

			<!-- 3D Canvas -->
			<div ref="canvasContainer" class="canvas-container" />

			<!-- ç¶æå¾ä¾ -->
			<div class="legend">
			<div v-for="item in legendItems" :key="item.status" class="legend-item">
			<span class="color-box" :style="{ background: item.color }" />
			<span>{{ item.label }}</span>
			</div>
			</div>

			<!-- è¯¦æå¼¹çª -->
			<el-dialog v-model="detailDialogVisible" title="åºåè¯¦æ" fullscreen>
			<!-- è¯¦æåå®¹ -->
			</el-dialog>
			</div>
			</template>
			```

			## 7. Three.js åºæ¯è®¾è®¡

			### 7.1 åå§åæµç¨

			1. åå»º `WebGLRenderer`ï¼æè½½å° `canvasContainer`
			2. åå»º `PerspectiveCamera`ï¼éè§ç¸æºï¼
			3. åå»º `Scene` åºæ¯
			4. æ·»å åç§ï¼ç¯å¢å + å®ååï¼
			5. åå»ºå°é¢ï¼`PlaneGeometry` + ç½æ ¼æè´¨ï¼
			6. åå»ºè´§æ¶è´§ä½ï¼`InstancedMesh`ï¼
			7. æ·»å `OrbitControls` æ§å¶å¨
			8. å¯å¨æ¸²æå¾ªç¯

			### 7.2 è´§ä½å®ä½ç®æ³

			```
			x = (column - maxColumn/2) * CELL_SIZE_X
			y = layer * CELL_SIZE_Y
			z = (row - maxRow/2) * CELL_SIZE_Z
			```

			### 7.3 ç¹å»æ¾å

			- ä½¿ç¨ `Raycaster` è¿è¡å°çº¿æ£æµ
			- éè¿ `instanceId` è¯å«è¢«ç¹å»çè´§ä½å®ä¾
			- é«äº®ï¼ä¸´æ¶æ¿æ¢æè´¨é¢è²

			### 7.4 ç¸æºèç¦å¨ç»

			- ä½¿ç¨ `TWEEN` ææå¨æå¼å¹³æ»ç§»å¨ç¸æº
			- ç®æ ä½ç½®ï¼è´§ä½åæ + åç§»é

			## 8. æ§è½ä¼å

			\| çç¥ \| è¯´æ \|
			\|------\|------\|
			\| InstancedMesh \| åæ¬¡ drawcall æ¸²æææè´§ä½ \|
			\| è§é¥ä½åé¤ \| ç¸æºå¤çè´§ä½ä¸æ¸²æ \|
			\| é¢è²ç¼å \| æè´¨å¤ç¨ï¼é¿åé¢ç¹åå»º \|
			\| requestAnimationFrame \| æ¸²æå¾ªç¯ä½¿ç¨ RAF \|
			\| æ°æ®åé¡µ \| å¤§ä»åºå¯èèæåºååçå è½½ \|

			## 9. è·¯ç±æ³¨å

			å¨ `viewGird.js` ä¸æ³¨åè·¯ç±ï¼
			```javascript
			{
			path: '/stockChat',
			name: 'stockChat',
			component: () => import('@/views/stock/stockChat.vue')
			}
			```

			## 10. å¾è¡¥å

			- [ ] åç«¯ `Get3DLayout` API å®ç°
			- [ ] SignalR Hub éç½®
			- [ ] è´§ä½é¢è²ä¸åç«¯ç¶ææä¸¾å¯¹é½
			- [ ] çéåè½å·ä½åæ®µç¡®è®¤