topo-engine 0.1.10 → 0.1.12
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 +48 -8
- package/dist/index.d.ts +14 -0
- package/dist/style.css +63 -11
- package/dist/topo-engine.cjs +826 -80
- package/dist/topo-engine.cjs.map +1 -1
- package/dist/topo-engine.js +827 -81
- package/dist/topo-engine.js.map +1 -1
- package/dist/topo-engine.umd.cjs +826 -80
- package/dist/topo-engine.umd.cjs.map +1 -1
- package/docs/API.md +48 -2
- package/package.json +1 -1
package/docs/API.md
CHANGED
|
@@ -1404,7 +1404,9 @@ destroy(): void
|
|
|
1404
1404
|
| `dataUrl` | `String` | `''` | 数据地址，内部 `fetch` 加载 |
|
|
1405
1405
|
| `customerData` | `Array` | `null` | 客户数据（计量箱关联用户），见下 |
|
|
1406
1406
|
| `theme` | `'dark' \| 'light'` | `'light'` | 画布/图元/导线主题，支持 `v-model:theme` |
|
|
1407
|
-
| `toolbar` | `Boolean` | `false` |
|
|
1407
|
+
| `toolbar` | `Boolean` | `false` | 是否显示左上工具条（标题/统计/主题/图例/适应画布/导出 PNG），默认隐藏 |
|
|
1408
|
+
| `legend` | `Boolean` | `false` | **是否显示右下角图例面板，默认否**；支持 `v-model:legend` |
|
|
1409
|
+
| `legendItems` | `Array` | `null` | 自定义图例项（覆盖自动生成），见下 |
|
|
1408
1410
|
|
|
1409
1411
|
### Events（Vue 组件事件）
|
|
1410
1412
|
|
|
@@ -1415,12 +1417,56 @@ destroy(): void
|
|
|
1415
1417
|
| `loaded` | 渲染完成 | `{ stats, title }` |
|
|
1416
1418
|
| `top-distances` | Top10 距离计算完成 | `Array` |
|
|
1417
1419
|
| `update:theme` | 点击主题切换 | 新主题值 |
|
|
1420
|
+
| `update:legend` | 点击工具条 🗺 图例按钮 | 新布尔值（配合 `v-model:legend`） |
|
|
1421
|
+
|
|
1422
|
+
### 图例（legend）
|
|
1423
|
+
|
|
1424
|
+
```ts
|
|
1425
|
+
legend: boolean // 默认 false（不显示）
|
|
1426
|
+
legendItems?: LegendItem[] // 自定义项，覆盖自动生成
|
|
1427
|
+
```
|
|
1428
|
+
|
|
1429
|
+
**自动图例**（不传 `legendItems` 时）：按当前图**实际出现的设备类别**生成条目
|
|
1430
|
+
（配电变压器 / 开关 / 熔丝 / 低压母线 / 电缆终端头 / 密母分接点 / 计量箱 / 用户接入点 /
|
|
1431
|
+
低压导线点 / 低压配电箱 / 其它设备），末尾固定追加 **主干导线 / 分支导线**；
|
|
1432
|
+
若图中计量箱注入了客户数据，再追加 **客户电表**。图例颜色取自当前主题色板（与图元同源），
|
|
1433
|
+
切换主题自动同步；点击图例标题可折叠。
|
|
1434
|
+
|
|
1435
|
+
```ts
|
|
1436
|
+
interface LegendItem {
|
|
1437
|
+
key?: string; // 唯一键（可选）
|
|
1438
|
+
label: string; // 显示文字
|
|
1439
|
+
shape?: 'transformer' | 'switch' | 'fuse' | 'bus' | 'cableTerminal' | 'junction'
|
|
1440
|
+
| 'meterBox' | 'consumer' | 'line' | 'meterUser' | 'station' | 'edge'
|
|
1441
|
+
| 'square' | 'ring' | 'triangle' | 'hline' | 'text' | 'dot'; // 默认 dot
|
|
1442
|
+
color?: string; // 覆盖色（不传用主题色）
|
|
1443
|
+
text?: string; // shape='text' 时显示的文字（默认 'JX'）
|
|
1444
|
+
}
|
|
1445
|
+
```
|
|
1446
|
+
|
|
1447
|
+
**示例：**
|
|
1448
|
+
```vue
|
|
1449
|
+
<!-- 开启自动图例 -->
|
|
1450
|
+
<TopoGraph :data-url="url" legend />
|
|
1451
|
+
|
|
1452
|
+
<!-- 自定义图例 -->
|
|
1453
|
+
<TopoGraph
|
|
1454
|
+
:data-url="url"
|
|
1455
|
+
legend
|
|
1456
|
+
:legend-items="[
|
|
1457
|
+
{ label: '正常设备', shape: 'square', color: '#22C55E' },
|
|
1458
|
+
{ label: '告警设备', shape: 'ring', color: '#EF4444' },
|
|
1459
|
+
{ label: '客户电表', shape: 'meterUser' },
|
|
1460
|
+
]"
|
|
1461
|
+
/>
|
|
1462
|
+
```
|
|
1418
1463
|
|
|
1419
1464
|
### 组件 ref 上的快捷方法
|
|
1420
1465
|
|
|
1421
|
-
`resetView()`、`exportPng()`、`selectNode(
|
|
1466
|
+
`resetView()`、`exportPng()`、`selectNode(ref)`、`selectCustomer(nodeRef, index)`、
|
|
1422
1467
|
`getSelectedCustomer()`（`{ nodeId, index, customer, node } \| null`）；
|
|
1423
1468
|
其余 `TopoApi` 方法（查询/样式/高亮/动画/卡片/连接线…）全部直接可用。
|
|
1469
|
+
其中 `ref` 支持节点 id / psrId / 资产编号 assetNo（见[引用规则](#引用规则id--psrid--assetno-统一)）。
|
|
1424
1470
|
|
|
1425
1471
|
### 计量箱客户数据 → 渲染与交互
|
|
1426
1472
|
|