topo-engine 0.1.7 → 0.1.9

package/README.md

@@ -11,7 +11,8 @@
 - 📐 **自研正交布局** — 主干沿最长路径横向铺开 + 分支带垂直直走，整图**横平竖直、0 交叉、0 重叠**，边缘路由为直线 / L 形折线
 - 🔍 **拓扑查询 API** — 节点 / 边 / 邻居 / 子树 / 主干链 / 路径 / 坐标 查询
 - 🎨 **样式控制** — 节点、边样式覆盖与批量重置
-- ✨ **动画与高亮** — 节点脉动、边流动、路径高亮、其余变暗、异常标注
+- 🎨 **节点 / 电表染色** — 按 **psrId（设备编码）** 染普通节点、按 **assetNo（资产编号）** 染计量箱内电表户（状态色、告警色场景）
+- ✨ **动画与高亮** — 节点脉动、节点光晕（发光环，颜色可设）、边流动、路径高亮、其余变暗、异常标注
 - 📝 **文字标注** — 附加文字、用户名 full / short / hidden 切换
 - 🃏 **卡片盒** — 节点信息卡片（字段 + 按钮），适配"运行曲线/工单跳转"类场景
 - 🔗 **连接线 / 拓扑线** — 任意两节点动态连接线、路径拓扑高亮线
@@ -256,6 +257,25 @@ const dataUrl = ref('/data/topology.json');
 
 > 也可自行 `import { TopoApi }`，按 `new TopoApi(graph, model, layout, nodeByIdMap)` 构造后调用同一套方法；事件与查询见下。使用组件时无需关心内部构造。
 
+> 📌 **引用统一（id / psrId / assetNo）**：所有目标入参（查询/定位/样式/高亮/动画/文字/卡片/连线…）都可传
+> **节点内部 id**、**psrId（设备编码）** 或 **客户 assetNo（资产编号，兼容 consNo/consId）**：
+> - 命中普通节点 → 作用在该节点；
+> - 命中**箱内电表户** → 视觉/定位/动画**精确作用在该户表位**（光环/高亮环/脉动/文字/染色/卡片），
+>   查询/拓扑按所在计量箱参与（`getNode(assetNo)` 返回箱节点并附 `customer` 信息），
+>   定位聚焦表位中心（`locateNode(assetNo)`、`getNodePosition(assetNo)`）。
+>
+> ```js
+> topo.locateNode(assetNo);                                  // 定位到某户表位中心
+> topo.highlightNode(assetNo, { color: '#FF0000' });          // 该户表位高亮环
+> topo.setNodeGlow(assetNo, { color: '#FF6600' });            // 该户表位光晕
+> topo.setNodePulse(assetNo);                                 // 该户电表格脉动
+> topo.setText(assetNo, '异常');                              // 表位上方标注
+> topo.showCard(assetNo);                                     // 客户档案卡片（定位在表位旁）
+> topo.selectNode(assetNo);                                   // 编程选中该户（联动 customer-select）
+> topo.getNode(assetNo);          // → 所在箱节点副本 { …, customer, customerIndex, targetKind:'customer' }
+> topo.resolveRef(assetNo);       // → { kind:'customer', boxId, index, customer, … } | null
+> ```
+
 ### 查询
 
 | 方法 | 说明 |
@@ -282,6 +302,24 @@ const dataUrl = ref('/data/topology.json');
 `setNodeStyle(id, style)`、`batchSetNodeStyle(ids, style)`、`resetNodeStyle(id)`、`resetAllNodeStyles()`
 `setEdgeStyle(src, tgt, style)`、`batchSetEdgeStyle([[src,tgt],…], style)`、`resetEdgeStyle(src, tgt)`
 
+### 节点 / 箱内电表户染色（psrId / 资产编号）
+
+```javascript
+// 普通节点：按 psrId（设备编码）整图单色换装（主体/引线/描边换成该色，白字细节保留）
+topo.setNodeColor('8ff4786d548a7073a2517297e801518ff456732f4d', '#FF0000');
+// 箱内电表户：按资产编号（assetNo，兼容 consNo/consId）染该户电表图标 + 户名
+topo.setNodeColor('4230010007008084768', '#FF6600');
+// 批量（数组 / 对象数组 / ref→color 对象均可）
+topo.batchSetNodeColor({ '8ff4…': '#FF0000', '4230…': '#FF6600' });
+// 清除 / 查询
+topo.resetNodeColor('4230010007008084768');
+topo.resetAllNodeColors();
+topo.getNodeColor('4230010007008084768'); // → { kind, id, color } | null
+```
+
+> 引用规则与 `addConnection` 一致：节点 id / **psrId** 命中普通节点；**assetNo** 命中计量箱内某户电表。
+> 染色记录随主题切换 / 数据重渲染自动保留并重放（无需重新设置）。详见 [docs/API.md](docs/API.md)。
+
 ### 高亮 / 变暗
 
 ```javascript
@@ -299,6 +337,8 @@ topo.unhighlightAll();
 
 ```javascript
 topo.setNodePulse('2', { color: '#00C8FF', duration: 1500 });   // 节点脉动
+topo.setNodeGlow('2', { color: '#FF0000', spread: 18 });         // 节点光晕（发光环，颜色可设；ref 支持 psrId）
+topo.removeNodeGlow('2');
 topo.setEdgeFlow('1', '2', { color: '#00C8FF', duration: 2000 }); // 边流动
 topo.removeAnimation('2');
 topo.removeAllAnimations();

package/dist/index.d.ts

@@ -8,78 +8,96 @@
 /// <reference lib="es2015.promise" />
 
 // 核心 API
+// ref：全库统一引用 —— 节点内部 id / psrId（设备编码）命中普通节点；
+//      客户 assetNo（资产编号，兼容 consNo/consId）命中「计量箱内电表户」。
 export class TopoApi {
   constructor(graph: any, model: any, layout: any, nodeByIdMap: Map<string, any>);
-  
-  // 查询 API
-  getNode(nodeId: string): any;
+
+  // 统一引用解析
+  resolveRef(ref: string): any; // { kind:'node', id, node } | { kind:'customer', boxId, boxNode, index, customer, key, assetNo, name } | null
+  getCustomer(ref: string): { node: any, customer: any, index: number, count: number, boxId: string } | null;
+
+  // 查询 API（目标参数均支持 id/psrId/assetNo；assetNo 命中后按确认语义返回）
+  getNode(ref: string): any; // 电表户 → 所在计量箱节点副本（附 customer/customerIndex/customerCount/targetKind）
   getAllNodes(): any[];
   findNodes(filter: object): any[];
   getSelectedId(): string | null;
-  getNeighbors(nodeId: string): { upstream: any[], downstream: any[] };
-  getStreamNodes(nodeId: string, direction: 'upstream' | 'downstream'): any[];
+  getNeighbors(ref: string): { upstream: any[], downstream: any[] };
+  getStreamNodes(ref: string, direction: 'upstream' | 'downstream'): any[];
   getTrunkNodes(): any[];
-  getSubtreeNodes(nodeId: string): any[];
-  getPath(fromId: string, toId: string): any[] | null;
-  getEdge(srcId: string, tgtId: string): any;
+  getSubtreeNodes(ref: string): any[];
+  getPath(fromRef: string, toRef: string): any[] | null;
+  getEdge(srcRef: string, tgtRef: string): any;
   getEdges(): any[];
-  getStreamEdges(nodeId: string, direction: 'upstream' | 'downstream'): any[];
+  getStreamEdges(ref: string, direction: 'upstream' | 'downstream'): any[];
   getMainEdge(): any[];
-  getNodePosition(nodeId: string): { x: number, y: number } | null;
-  getEdgePath(srcId: string, tgtId: string): number[][] | null;
+  getNodePosition(ref: string): { x: number, y: number } | null; // assetNo → 表位中心
+  getEdgePath(srcRef: string, tgtRef: string): number[][] | null;
   getGraphBounds(): { minX: number, minY: number, maxX: number, maxY: number };
   getStats(): any;
-  
+
   // 视图控制
   fitView(padding?: number): void;
   zoomTo(ratio: number, center?: { x: number, y: number }): void;
   zoomIn(step?: number): void;
   zoomOut(step?: number): void;
-  locateNode(nodeId: string, zoom?: number): void;
+  locateNode(ref: string, zoom?: number): void; // assetNo → 聚焦表位
   getViewport(): { zoom: number, center: { x: number, y: number } };
-  
-  // 节点样式
-  setNodeStyle(nodeId: string, style: object): void;
-  batchSetNodeStyle(nodeIds: string[], style: object): void;
-  resetNodeStyle(nodeId: string): void;
+
+  // 节点样式（assetNo → 作用于所在计量箱节点）
+  setNodeStyle(ref: string, style: object): void;
+  batchSetNodeStyle(refs: string[], style: object): void;
+  resetNodeStyle(ref: string): void;
   resetAllNodeStyles(): void;
-  
-  // 边样式
-  setEdgeStyle(srcId: string, tgtId: string, style: object): void;
-  batchSetEdgeStyle(edgeIds: [string, string][], style: object): void;
-  resetEdgeStyle(srcId: string, tgtId: string): void;
-  
-  // 高亮与标注
-  highlightNode(nodeId: string, opts?: object): void;
-  unhighlightNode(nodeId: string): void;
-  highlightPath(nodeIds: string[], opts?: object): void;
+
+  // 节点 / 箱内电表户染色（ref：节点 id 或 psrId；电表户用客户 assetNo/consNo/consId）
+  setNodeColor(ref: string, color: string | null): boolean;
+  batchSetNodeColor(entries: any, color?: string): { total: number, ok: number, failed: Array<{ ref: string, reason: string }> };
+  resetNodeColor(ref: string): boolean;
+  resetAllNodeColors(): void;
+  getNodeColor(ref: string): { kind: 'node' | 'customer', id: string, index?: number, color: string | null } | null;
+
+  // 边样式（端点均可传节点 id / psrId / assetNo）
+  setEdgeStyle(srcRef: string, tgtRef: string, style: object): void;
+  batchSetEdgeStyle(edgeRefs: [string, string][], style: object): void;
+  resetEdgeStyle(srcRef: string, tgtRef: string): void;
+
+  // 高亮与标注（assetNo → 该户表位高亮环 + 可选文字）
+  highlightNode(ref: string, opts?: object): void;
+  unhighlightNode(ref: string): void;
+  highlightPath(refs: string[], opts?: object): void;
   unhighlightAll(): void;
-  dimOthers(keepIds: string[], opacity?: number): void;
-  
-  // 动画
-  setNodePulse(nodeId: string, opts?: object): void;
-  setEdgeFlow(srcId: string, tgtId: string, opts?: object): void;
-  removeAnimation(targetId: string): void;
+  dimOthers(keepRefs: string[], opacity?: number): void;
+
+  // 动画（ref 支持节点 id/psrId；assetNo → 该户电表格）
+  setNodePulse(ref: string, opts?: { duration?: number; min?: number; max?: number }): void;
+  setEdgeFlow(srcRef: string, tgtRef: string, opts?: object): void;
+  removeAnimation(ref: string): void;
   removeAllAnimations(): void;
-  
-  // 文字标注
-  setText(nodeId: string, text: string, opts?: object): void;
-  removeText(nodeId: string): void;
+
+  // 节点光晕动画（ref 支持节点 id / psrId / assetNo）
+  setNodeGlow(ref: string, opts?: { color?: string; spread?: number; radius?: number; duration?: number; opacity?: number }): boolean;
+  removeNodeGlow(ref: string): boolean;
+  removeAllNodeGlows(): void;
+
+  // 文字标注（assetNo → 该户表位旁小标注）
+  setText(ref: string, text: string, opts?: object): void;
+  removeText(ref: string): void;
   removeAllTexts(): void;
   setDeviceText(cat: string, fontSize: number): void;
   changeUserName(mode: 'full' | 'short' | 'hidden'): void;
-  
-  // 卡片盒
-  showCard(nodeId: string, content: object): void;
-  hideCard(nodeId: string): void;
+
+  // 卡片盒（content 可省略：自动按设备/客户档案生成；assetNo 卡片定位在该户表位旁）
+  showCard(ref: string, content?: object): void;
+  hideCard(ref: string): void;
   hideAllCards(): void;
   
-  // 连接线与拓扑线（端点支持节点 id 或箱内用户的客户档案编号 consNo/consId）
+  // 连接线与拓扑线（端点/路径点支持节点 id、psrId 或箱内用户的客户编号 assetNo）
   resolveUserRef(ref: string): string | null;
   addConnection(fromId: string, toId: string, opts?: object): string | false;
   removeConnection(fromId: string, toId: string): void;
   removeAllConnections(): void;
-  addTopoLine(nodeIds: string[], opts?: object): string;
+  addTopoLine(refs: string[], opts?: object): string;
   removeTopoLine(lineId: string): void;
   removeAllTopoLines(): void;
   

package/dist/style.css

@@ -1,6 +1,6 @@
 
 /* —— 主题变量：dark 为默认值，light 由 [data-theme='light'] 覆盖 —— */
-.topo-wrap[data-v-c2cd8b2c] {
+.topo-wrap[data-v-d3774ed5] {
   --tp-bg: #050505;
   --tp-toolbar-bg: rgba(20, 20, 20, 0.88);
   --tp-toolbar-border: #333;
@@ -19,7 +19,7 @@
   overflow: hidden;
   background: var(--tp-bg);
 }
-.topo-wrap[data-theme='light'][data-v-c2cd8b2c] {
+.topo-wrap[data-theme='light'][data-v-d3774ed5] {
   --tp-bg: #ffffff;
   --tp-toolbar-bg: rgba(255, 255, 255, 0.92);
   --tp-toolbar-border: #d9d9d9;
@@ -33,11 +33,11 @@
   --tp-text: #555;
   --tp-error: #d32f2f;
 }
-.topo-container[data-v-c2cd8b2c] {
+.topo-container[data-v-d3774ed5] {
   width: 100%;
   height: 100%;
 }
-.topo-toolbar[data-v-c2cd8b2c] {
+.topo-toolbar[data-v-d3774ed5] {
   position: absolute;
   top: 10px;
   left: 12px;
@@ -52,14 +52,14 @@
   color: var(--tp-text);
   z-index: 10;
 }
-.topo-title[data-v-c2cd8b2c] {
+.topo-title[data-v-d3774ed5] {
   color: var(--tp-title);
   font-weight: 600;
 }
-.topo-meta[data-v-c2cd8b2c] {
+.topo-meta[data-v-d3774ed5] {
   color: var(--tp-meta);
 }
-.btn[data-v-c2cd8b2c] {
+.btn[data-v-d3774ed5] {
   margin-left: 4px;
   padding: 3px 10px;
   border: 1px solid var(--tp-btn-border);
@@ -69,12 +69,12 @@
   cursor: pointer;
   font-size: 12px;
 }
-.btn[data-v-c2cd8b2c]:hover {
+.btn[data-v-d3774ed5]:hover {
   border-color: var(--tp-accent);
   color: var(--tp-accent);
 }
-.topo-loading[data-v-c2cd8b2c],
-.topo-error[data-v-c2cd8b2c] {
+.topo-loading[data-v-d3774ed5],
+.topo-error[data-v-d3774ed5] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -85,7 +85,7 @@
   z-index: 5;
   background: var(--tp-overlay-bg);
 }
-.topo-error[data-v-c2cd8b2c] {
+.topo-error[data-v-d3774ed5] {
   color: var(--tp-error);
 }