warehouse-map-sdk 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +153 -2
- package/dist/warehouse-map-sdk.esm.js +5954 -0
- package/package.json +38 -3
package/README.md
CHANGED
|
@@ -1,3 +1,154 @@
|
|
|
1
|
-
#
|
|
1
|
+
# warehouse-map-sdk
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
仓库地图 SDK（Vue 2 组件）：Canvas 渲染、沿道路 A* 路径导航、点击货位联动库存、**内置绘制工具面板**的可视化编辑（画货位/装卸口/墙体/边界/道路、批量选货位、撤销重做、导入导出 JSON）。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install warehouse-map-sdk
|
|
9
|
+
# 或
|
|
10
|
+
pnpm add warehouse-map-sdk
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
要求宿主 Vue 2.6 / 2.7。
|
|
14
|
+
|
|
15
|
+
## 一体化编辑器（推荐）
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
<template>
|
|
19
|
+
<WarehouseMapEditor
|
|
20
|
+
ref="editor"
|
|
21
|
+
:layout="layout"
|
|
22
|
+
:api="mapApi"
|
|
23
|
+
@model-change="onModelChange"
|
|
24
|
+
/>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script>
|
|
28
|
+
export default {
|
|
29
|
+
data() {
|
|
30
|
+
return {
|
|
31
|
+
layout: null,
|
|
32
|
+
// 批量选货位/批量选装卸口的清单服务（不传则对应工具按钮自动隐藏）
|
|
33
|
+
mapApi: {
|
|
34
|
+
fetchBizSlots: () => this.$http.get('/api/warehouse/biz-slots').then(r => r.data),
|
|
35
|
+
fetchBizDocks: () => this.$http.get('/api/warehouse/biz-docks').then(r => r.data)
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
},
|
|
39
|
+
async created() {
|
|
40
|
+
const res = await this.$http.get('/api/warehouse/layout');
|
|
41
|
+
this.layout = res.data;
|
|
42
|
+
},
|
|
43
|
+
methods: {
|
|
44
|
+
// 任何编辑（画/改/删/撤销/导入）后抛完整契约 JSON → 业务自行存储
|
|
45
|
+
onModelChange(json) { /* 存业务表 */ }
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
</script>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
全局注册方式（可选）：
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
import WarehouseMapSdk from 'warehouse-map-sdk';
|
|
55
|
+
Vue.use(WarehouseMapSdk); // 注册 <WarehouseMap> 与 <WarehouseMapEditor>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## 只读地图（导航 + 库存联动）
|
|
59
|
+
|
|
60
|
+
```vue
|
|
61
|
+
<template>
|
|
62
|
+
<div>
|
|
63
|
+
<WarehouseMap
|
|
64
|
+
:layout="layout"
|
|
65
|
+
:slot-status="slotStatus"
|
|
66
|
+
:path="pathPoints"
|
|
67
|
+
:night="night"
|
|
68
|
+
@shape-click="onShapeClick"
|
|
69
|
+
/>
|
|
70
|
+
<!-- 库存弹窗等 UI 由业务自己渲染 -->
|
|
71
|
+
</div>
|
|
72
|
+
</template>
|
|
73
|
+
|
|
74
|
+
<script>
|
|
75
|
+
export default {
|
|
76
|
+
data() {
|
|
77
|
+
return { layout: null, slotStatus: {}, pathPoints: [], night: false };
|
|
78
|
+
},
|
|
79
|
+
methods: {
|
|
80
|
+
onShapeClick(shape) {
|
|
81
|
+
// shape.type: 'slot' | 'dock' | 'node'；shape.id 即货位编码
|
|
82
|
+
if (shape.type === 'slot') this.$emit('query-inventory', shape.id);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
</script>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## 组件 API
|
|
90
|
+
|
|
91
|
+
### `<WarehouseMapEditor>`
|
|
92
|
+
|
|
93
|
+
| Prop | 类型 | 说明 |
|
|
94
|
+
| --- | --- | --- |
|
|
95
|
+
| `layout` | Object | 布局契约 JSON（必传，创建时读取） |
|
|
96
|
+
| `api` | Object | `{ fetchBizSlots?, fetchBizDocks? }`，返回 `Promise<[{code, name, row?, col?}]>` |
|
|
97
|
+
| `night` | Boolean | 夜间主题 |
|
|
98
|
+
| `tools` | Array | 工具白名单（value 数组），缺省全部 |
|
|
99
|
+
| `showPanel` | Boolean | 是否显示右侧面板，默认 `true` |
|
|
100
|
+
| `gridSnap` / `roadSnap` / `roadFillStep` | Number | 初始吸附参数（米），默认 0.1 / 0.8 / 5 |
|
|
101
|
+
|
|
102
|
+
**Events**
|
|
103
|
+
|
|
104
|
+
| 事件 | 参数 | 说明 |
|
|
105
|
+
| --- | --- | --- |
|
|
106
|
+
| `model-change` | `json` | 任何模型变更后抛完整契约 JSON |
|
|
107
|
+
| `selection-change` | `{kind,id}` \| null | 选中变化 |
|
|
108
|
+
| `tool-change` | `tool` | 绘制工具切换 |
|
|
109
|
+
| `notice` | `{text,level}` | 面板内 toast 同时抛出（level: info/success/warning/error） |
|
|
110
|
+
|
|
111
|
+
**Methods**（`this.$refs.editor.xxx`）
|
|
112
|
+
|
|
113
|
+
| 方法 | 说明 |
|
|
114
|
+
| --- | --- |
|
|
115
|
+
| `exportJSON()` | 返回契约 JSON 字符串 |
|
|
116
|
+
| `importJSON(text)` | 粘贴 JSON 整体替换布局（可撤销） |
|
|
117
|
+
|
|
118
|
+
### `<WarehouseMap>`
|
|
119
|
+
|
|
120
|
+
| Prop | 类型 | 说明 |
|
|
121
|
+
| --- | --- | --- |
|
|
122
|
+
| `layout` | Object | 布局契约 JSON |
|
|
123
|
+
| `slotStatus` | Object | `{ [slotId]: { state: 'empty'\|'partial'\|'full', qty, capacity } }` 着色 |
|
|
124
|
+
| `path` / `selectedId` | — | 导航路径点、选中元素 |
|
|
125
|
+
| `night` | Boolean | 夜间主题 |
|
|
126
|
+
| `mode` | String | `view`（点击抛事件）\| `select`（点选/拖动）等，编辑器组件内部管理 |
|
|
127
|
+
|
|
128
|
+
**Events**：`shape-click`（点击货位/装卸口，`payload.type`/`payload.id`）。
|
|
129
|
+
|
|
130
|
+
**方法**：通过 ref 调用 `findPath(fromId, toId)` 返回 `{ok, points, length}`。
|
|
131
|
+
|
|
132
|
+
## 数据契约
|
|
133
|
+
|
|
134
|
+
```jsonc
|
|
135
|
+
// 布局（GET /api/warehouse/layout，导出 JSON 同结构）
|
|
136
|
+
{
|
|
137
|
+
"size": { "width": 60, "height": 40 },
|
|
138
|
+
"slots": [{ "id": "0001", "name": "D1·1", "points": [[10,2],[13,2],[13,6.5],[10,6.5]], "entry": { "x": 11.5, "y": 6.5 } }],
|
|
139
|
+
"docks": [{ "id": "DOCK-01", "name": "1号装卸口", "points": [[8,36],[14,36],[14,40],[8,40]], "entry": { "x": 11, "y": 36 } }],
|
|
140
|
+
"walls": [{ "id": "W1", "label": "设备区", "points": [[56,12],[60,12],[60,20],[56,20]] }],
|
|
141
|
+
"roadNodes": [{ "id": "P1", "x": 6, "y": 8 }],
|
|
142
|
+
"roadEdges": [{ "from": "P1", "to": "P2" }],
|
|
143
|
+
"roadWidth": 4
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// 货位着色概览（GET /api/inventory/summary，须返回全部货位，含 qty=0）
|
|
147
|
+
{ "capacity": 250, "slots": [{ "slotCode": "0001", "qty": 118 }] }
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
坐标单位为**米**，原点在仓库左下角、x 向右、y 向上。
|
|
151
|
+
|
|
152
|
+
## License
|
|
153
|
+
|
|
154
|
+
MIT
|