topo-engine 0.1.4 → 0.1.6

package/README.md

@@ -174,7 +174,7 @@ const g6Data = buildGraphData(model, layout);   // → G6 可直接消费的 { n
 | `3303` | 低压母线 | 白色短粗线（无文字标签） |
 | `3202` / `320300000` | 电缆终端头 / 分接点 | 三角 / 红色米字（无文字标签） |
 | `310100000` | 低压导线 | 青色连接点（名称缩写为杆号区间） |
-| `3112` | 计量箱 | 黑底白框 "JX" |
+| `3112` | 计量箱 | 黑底白框 "JX"（有客户数据时显示为电能表图标 + 用户名） |
 | `3218000` | 用户接入点 | 白圈 "J"（名称缩写为户号） |
 | `32500000` | 低压配电箱（台区） | 站房 |
 
@@ -354,6 +354,48 @@ topo.off('node:click', handler); // 不传 handler 则移除该事件全部监
 - **母线 / 电缆终端头**：不渲染额外文字标签（母线不显示"母线"，电缆终端头不显示名称）
 - **站房标题**：使用独立属性 `_stationTitle` 渲染，避免 G6 默认 label 重复绘制
 
+## 计量箱客户数据
+
+计量箱（psrType `3112`）支持关联客户数据，渲染时根据客户数量自动切换显示模式：
+
+| 模式 | 条件 | 渲染效果 |
+| ---- | ---- | ---- |
+| 无客户数据 | 未传入 customerData 或无匹配 | 原始 JX 黑底白字方框 |
+| 单用户 | customerList 有 1 个用户 | 电能表图标（圆圈 + 竖线）+ 用户名 |
+| 多用户（显示名称） | customerList 2~20 个用户 | 方框内电能表网格，每个格子含图标 + 用户名（每行最多 5 个） |
+| 多用户（仅图标） | customerList >20 个用户 | 方框内电能表网格，仅显示图标（格子更紧凑） |
+
+客户数据格式（与拓扑 JSON 配套的 customer JSON）：
+
+```json
+[
+  {
+    "psrId": "4230000000109100079",
+    "consumerList": [
+      { "consId": "...", "consName": "...", "realConsName": "张三", "meterId": "..." }
+    ]
+  }
+]
+```
+
+配套文件命名规则：拓扑文件为 `XXX.json` 时，客户文件为 `XXXcustomer.json`（Demo 模式下自动加载）。
+
+### TopoGraph 新增 Props
+
+| Prop | 类型 | 默认 | 说明 |
+| ---- | ---- | ---- | ---- |
+| `customerData` | `Array` | `null` | 客户数据数组，传入后自动注入到计量箱节点 |
+
+### 工具函数
+
+```javascript
+import { buildCustomerMap, injectCustomers, getMeterBoxSize } from 'topo-engine';
+
+const customerMap = buildCustomerMap(customerJsonArray); // psrId → consumerList
+injectCustomers(model, customerMap);                     // 注入到模型的 meterBox 节点
+const size = getMeterBoxSize(node);                      // 获取动态尺寸 { w, h } | null
+```
+
 ## 布局与渲染参数
 
 `computeOrthogonalLayout(model, options)`：

package/dist/index.d.ts

@@ -108,6 +108,11 @@ export function edgeStyle(datum: any): any;
 export function calculateTopDistances(edges: any[], nodes: any[], edgeCP: Map<string, number[][]>, fishboneRibs: Set<string>, topN?: number): any[];
 export function getSymbolSpec(cat: string): { w: number, h: number };
 
+// 计量箱客户数据
+export function buildCustomerMap(customerData: Array<any>): Map<string, Array<any>>;
+export function injectCustomers(model: any, customerMap: Map<string, Array<any>>): void;
+export function getMeterBoxSize(node: any): { w: number, h: number } | null;
+
 // 常量
 export const SYMBOL_SPEC: Record<string, { w: number, h: number }>;
 export const FONT: string;

package/dist/style.css

@@ -1,6 +1,6 @@
 
 /* —— 主题变量：dark 为默认值，light 由 [data-theme='light'] 覆盖 —— */
-.topo-wrap[data-v-562b2247] {
+.topo-wrap[data-v-b02bff98] {
   --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-562b2247] {
+.topo-wrap[data-theme='light'][data-v-b02bff98] {
   --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-562b2247] {
+.topo-container[data-v-b02bff98] {
   width: 100%;
   height: 100%;
 }
-.topo-toolbar[data-v-562b2247] {
+.topo-toolbar[data-v-b02bff98] {
   position: absolute;
   top: 10px;
   left: 12px;
@@ -52,14 +52,14 @@
   color: var(--tp-text);
   z-index: 10;
 }
-.topo-title[data-v-562b2247] {
+.topo-title[data-v-b02bff98] {
   color: var(--tp-title);
   font-weight: 600;
 }
-.topo-meta[data-v-562b2247] {
+.topo-meta[data-v-b02bff98] {
   color: var(--tp-meta);
 }
-.btn[data-v-562b2247] {
+.btn[data-v-b02bff98] {
   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-562b2247]:hover {
+.btn[data-v-b02bff98]:hover {
   border-color: var(--tp-accent);
   color: var(--tp-accent);
 }
-.topo-loading[data-v-562b2247],
-.topo-error[data-v-562b2247] {
+.topo-loading[data-v-b02bff98],
+.topo-error[data-v-b02bff98] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -85,7 +85,7 @@
   z-index: 5;
   background: var(--tp-overlay-bg);
 }
-.topo-error[data-v-562b2247] {
+.topo-error[data-v-b02bff98] {
   color: var(--tp-error);
 }
 

package/dist/topo-engine.cjs

@@ -54,6 +54,13 @@ class TopoApi {
   _assertReady() {
     if (!this._graph) throw new Error("[TopoApi] 图实例未就绪，请等待渲染完成");
   }
+  /** 画布中心兼容取值：G6 v5 getCanvasCenter 返回数组 [x,y,z]，历史代码按 {x,y} 对象使用 */
+  _canvasCenterXY() {
+    const c = this._graph.getCanvasCenter();
+    if (Array.isArray(c)) return { x: c[0], y: c[1] };
+    if (c && typeof c === "object") return { x: c.x || 0, y: c.y || 0 };
+    return { x: 0, y: 0 };
+  }
   /** 安全合并 style：保留现有字段，只覆盖传入字段 */
   _safeNodeStyle(nodeId, style) {
     try {
@@ -373,7 +380,7 @@ class TopoApi {
     try {
       this._graph.focusElement(nodeId);
     } catch {
-      const center = this._graph.getCanvasCenter();
+      const center = this._canvasCenterXY();
       this._graph.translateTo({ x: center.x - p.x * (zoom || this._graph.getZoom()), y: center.y - p.y * (zoom || this._graph.getZoom()) });
     }
   }
@@ -381,7 +388,7 @@ class TopoApi {
   getViewport() {
     this._assertReady();
     const zoom = this._graph.getZoom();
-    const center = this._graph.getCanvasCenter();
+    const center = this._canvasCenterXY();
     return { zoom, center };
   }
   // ============================================================
@@ -754,11 +761,25 @@ class TopoApi {
     if (!container) return;
     const pos = this._layout.pos.get(nodeId);
     if (!pos) return;
-    const zoom = this._graph.getZoom();
-    const canvasCenter = this._graph.getCanvasCenter();
-    const containerRect = container.getBoundingClientRect();
-    const screenX = containerRect.left + canvasCenter.x + pos.x * zoom;
-    const screenY = containerRect.top + canvasCenter.y + pos.y * zoom;
+    let client = null;
+    try {
+      if (typeof this._graph.getClientByCanvas === "function") {
+        const r = this._graph.getClientByCanvas([pos.x, pos.y]);
+        client = Array.isArray(r) ? { x: r[0], y: r[1] } : r;
+      }
+    } catch (e2) {
+    }
+    let screenX, screenY;
+    if (client && isFinite(client.x)) {
+      screenX = client.x;
+      screenY = client.y;
+    } else {
+      const zoom = this._graph.getZoom();
+      const canvasCenter = this._canvasCenterXY();
+      const containerRect = container.getBoundingClientRect();
+      screenX = containerRect.left + canvasCenter.x + pos.x * zoom;
+      screenY = containerRect.top + canvasCenter.y + pos.y * zoom;
+    }
     const el = document.createElement("div");
     el.className = "topo-card";
     el.dataset.nodeId = nodeId;
@@ -1216,6 +1237,53 @@ const SYMBOL_SPEC = {
 function getSymbolSpec(cat) {
   return SYMBOL_SPEC[cat] || SYMBOL_SPEC.other;
 }
+function buildCustomerMap(customerData) {
+  const map = /* @__PURE__ */ new Map();
+  if (!Array.isArray(customerData)) return map;
+  for (const entry of customerData) {
+    if (entry && entry.psrId && Array.isArray(entry.consumerList)) {
+      map.set(String(entry.psrId), entry.consumerList);
+    }
+  }
+  return map;
+}
+const METER_CELL_W = 26;
+const METER_CELL_H = 38;
+const METER_GAP = 4;
+const METER_PAD = 6;
+const MAX_COLS = 5;
+const SHOW_NAME_LIMIT = 20;
+function injectCustomers(model, customerMap) {
+  for (const node of model.nodes) {
+    if (node.cat !== "meterBox") continue;
+    const customers = customerMap.get(node.psrId);
+    if (!customers || customers.length === 0) continue;
+    node._customers = customers;
+    if (customers.length === 1) {
+      node._meterBoxMode = "single";
+      node._meterBoxW = 30;
+      node._meterBoxH = 38;
+    } else {
+      const showName = customers.length <= SHOW_NAME_LIMIT;
+      const cols = Math.min(customers.length, MAX_COLS);
+      const rows = Math.ceil(customers.length / cols);
+      const cellW = METER_CELL_W;
+      const cellH = showName ? METER_CELL_H : METER_CELL_W;
+      node._meterBoxMode = "grid";
+      node._meterBoxCols = cols;
+      node._meterBoxRows = rows;
+      node._meterBoxShowName = showName;
+      node._meterBoxW = METER_PAD * 2 + cols * cellW + (cols - 1) * METER_GAP;
+      node._meterBoxH = METER_PAD * 2 + rows * cellH + (rows - 1) * METER_GAP;
+    }
+  }
+}
+function getMeterBoxSize(node) {
+  if (node._meterBoxW != null && node._meterBoxH != null) {
+    return { w: node._meterBoxW, h: node._meterBoxH };
+  }
+  return null;
+}
 function stationPlans(model) {
   const nodesById = new Map(model.nodes.map((n) => [n.id, n]));
   const plans = [];
@@ -1267,6 +1335,10 @@ function stationInner(plan, model, band = 50, nodeMap) {
   const nmap = nodeMap || new Map(model.nodes.map((n) => [n.id, n]));
   const specOf = (id2) => {
     const n = nmap.get(id2);
+    if (n && n.cat === "meterBox") {
+      const dim = getMeterBoxSize(n);
+      if (dim) return dim;
+    }
     const s2 = getSymbolSpec(n ? n.cat : "other");
     return { w: s2.w, h: s2.h };
   };
@@ -1924,6 +1996,10 @@ function computeOrthogonalLayout(model, opts = {}) {
   const sz = (id2) => {
     const n = extNodeMap.get(id2);
     if (n && n._size) return n._size;
+    if (n && n.cat === "meterBox") {
+      const dim = getMeterBoxSize(n);
+      if (dim) return dim;
+    }
     const spec = getSymbolSpec(n ? n.cat : "other");
     return { w: spec.w, h: spec.h };
   };
@@ -2522,22 +2598,30 @@ function buildGraphData(model, layout) {
   const nodes = model.nodes.map((n) => {
     const spec = getSymbolSpec(n.cat);
     const busW = layout.stationBusWidth && layout.stationBusWidth.get(n.id);
-    const w = busW || spec.w;
+    const meterBoxDim = n.cat === "meterBox" ? getMeterBoxSize(n) : null;
+    const w = busW || (meterBoxDim ? meterBoxDim.w : spec.w);
+    const h = meterBoxDim ? meterBoxDim.h : spec.h;
     const p = layout.pos.get(n.id) || { x: 0, y: 0 };
     return {
       id: n.id,
-      data: { ...n, width: w, height: spec.h },
+      data: { ...n, width: w, height: h },
       style: {
         x: p.x,
         y: p.y,
-        size: [w, spec.h],
+        size: [w, h],
         // 自定义字段（进 attributes，供 svg-symbol 节点绘制使用）
         cat: n.cat,
-        labelText: n.cat === "bus" || n.cat === "cableTerminal" ? "" : n.shortName || "",
+        labelText: n.cat === "bus" || n.cat === "cableTerminal" || n.cat === "consumer" ? "" : n.shortName || "",
         rotate: layout.stationRotate && layout.stationRotate.get(n.id) || 0,
         highlight: 0,
         cursor: "pointer",
-        _nodeId: n.id
+        _nodeId: n.id,
+        // 计量箱客户数据
+        _meterBoxMode: n._meterBoxMode || null,
+        _meterBoxCols: n._meterBoxCols || 0,
+        _meterBoxRows: n._meterBoxRows || 0,
+        _meterBoxShowName: n._meterBoxShowName || false,
+        _customers: n._customers || null
       }
     };
   });
@@ -27789,8 +27873,45 @@ function drawStationTerminal(attributes, group) {
   group.appendChild(new Polygon({ style: { points: [[0, -5], [0, 5], [9, 0]], fill: "none", stroke: C2.red, lineWidth: 1.4 } }));
 }
 function drawMeterBox(attributes, group) {
-  group.appendChild(new Rect({ style: { x: -9.5, y: -9.5, width: 19, height: 19, fill: C2.meterFill, stroke: C2.meterText, lineWidth: 0.9 } }));
-  text(attributes, group, "JX", 0, 0.5, 7.5, C2.meterText);
+  const [w, h] = attributes.size;
+  if (attributes._meterBoxMode === "single") {
+    group.appendChild(new Circle({ style: { cx: 0, cy: -3, r: 11, fill: "none", stroke: C2.white, lineWidth: 1.6 } }));
+    group.appendChild(new Line({ style: { x1: 0, y1: -14, x2: 0, y2: -7, stroke: C2.white, lineWidth: 1.6 } }));
+    const name = attributes._customers && attributes._customers[0] ? attributes._customers[0].realConsName || attributes._customers[0].consName || "" : "";
+    if (name) {
+      group.appendChild(new Text({ style: { text: name, x: 0, y: 12, fontSize: 8, fill: C2.white, fontFamily: FONT, textAlign: "center", textBaseline: "middle" } }));
+    }
+  } else if (attributes._meterBoxMode === "grid" && attributes._customers) {
+    group.appendChild(new Rect({ style: { x: -w / 2, y: -h / 2, width: w, height: h, fill: C2.meterFill, stroke: C2.meterText, lineWidth: 0.9, radius: 2 } }));
+    const cols = attributes._meterBoxCols || 5;
+    const customers = attributes._customers;
+    const showName = attributes._meterBoxShowName;
+    const cellW = METER_CELL_W;
+    const cellH = showName ? METER_CELL_H : METER_CELL_W;
+    const gridW = cols * cellW + (cols - 1) * METER_GAP;
+    const rows = attributes._meterBoxRows || Math.ceil(customers.length / cols);
+    const gridH = rows * cellH + (rows - 1) * METER_GAP;
+    const startX = -gridW / 2;
+    const startY = -gridH / 2;
+    const meterR = 9;
+    for (let i = 0; i < customers.length; i++) {
+      const row2 = Math.floor(i / cols);
+      const col = i % cols;
+      const cx = startX + col * (cellW + METER_GAP) + cellW / 2;
+      const cy = startY + row2 * (cellH + METER_GAP) + cellW / 2;
+      group.appendChild(new Circle({ style: { cx, cy, r: meterR, fill: "none", stroke: C2.meterText, lineWidth: 0.8 } }));
+      group.appendChild(new Line({ style: { x1: cx, y1: cy - meterR, x2: cx, y2: cy - meterR + 4, stroke: C2.meterText, lineWidth: 0.8 } }));
+      if (showName) {
+        const name = customers[i].realConsName || customers[i].consName || "";
+        if (name) {
+          group.appendChild(new Text({ style: { text: name, x: cx, y: cy + meterR + 6, fontSize: 7, fill: C2.meterText, fontFamily: FONT, textAlign: "center", textBaseline: "middle" } }));
+        }
+      }
+    }
+  } else {
+    group.appendChild(new Rect({ style: { x: -9.5, y: -9.5, width: 19, height: 19, fill: C2.meterFill, stroke: C2.meterText, lineWidth: 0.9 } }));
+    text(attributes, group, "JX", 0, 0.5, 7.5, C2.meterText);
+  }
 }
 function drawConsumer(attributes, group) {
   group.appendChild(new Circle({ style: { cx: 0, cy: 0, r: 12.5, fill: "none", stroke: C2.white, lineWidth: 1.8 } }));
@@ -27916,8 +28037,10 @@ const _sfc_main$2 = {
   props: {
     dataUrl: { type: String, default: "" },
     data: { type: Object, default: null },
+    /** 客户数据（计量箱关联的用户列表），直接传入 JSON 数组 */
+    customerData: { type: Array, default: null },
     /** 主题：'dark'（默认，黑底 SCADA 风）| 'light'（白底）；支持 v-model:theme 双向绑定 */
-    theme: { type: String, default: "dark" }
+    theme: { type: String, default: "light" }
   },
   emits: ["node-select", "loaded", "top-distances", "update:theme"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -28033,6 +28156,10 @@ const _sfc_main$2 = {
       lastRaw.value = raw;
       const theme = applyTheme();
       model = parseTopo(raw);
+      if (props.customerData && props.customerData.length) {
+        const customerMap = buildCustomerMap(props.customerData);
+        injectCustomers(model, customerMap);
+      }
       nodeByIdMap = new Map(model.nodes.map((n) => [n.id, n]));
       title.value = String(model.title || "").replace(/\.+$/, "");
       stats.value = model.stats;
@@ -28084,6 +28211,34 @@ const _sfc_main$2 = {
         const id2 = evt.target.id;
         selectNodeWithInfo(id2);
       });
+      function hitTestNodeAtCanvas(evt) {
+        const c = evt && (evt.canvas || evt.viewport) || {};
+        const cx = c.x, cy = c.y;
+        if (cx == null || cy == null) return null;
+        let best = null, bestD = Infinity;
+        let all = [];
+        try {
+          all = graph.getNodeData();
+        } catch {
+          return null;
+        }
+        for (const nd of all || []) {
+          if (nd && nd.data && nd.data.isStationFrame) continue;
+          const st = nd && nd.style;
+          if (!st || st.x == null || st.y == null) continue;
+          const size = st.size || [0, 0];
+          const w = size[0] || 0, h = size[1] || 0;
+          if (w <= 0 || h <= 0) continue;
+          if (cx >= st.x - w / 2 && cx <= st.x + w / 2 && cy >= st.y - h / 2 && cy <= st.y + h / 2) {
+            const d2 = Math.abs(cx - st.x) + Math.abs(cy - st.y);
+            if (d2 < bestD) {
+              bestD = d2;
+              best = nd.id;
+            }
+          }
+        }
+        return best;
+      }
       graph.on("node:pointerenter", (evt) => {
         const id2 = evt.target.id;
         const data3 = graph.getNodeData(id2);
@@ -28106,6 +28261,11 @@ const _sfc_main$2 = {
         api._emit("edge:click", { edgeId: id2, source: src, target: tgt });
       });
       graph.on("canvas:click", (evt) => {
+        const hitId = hitTestNodeAtCanvas(evt);
+        if (hitId) {
+          selectNodeWithInfo(hitId);
+          return;
+        }
         if (selectedId) {
           const data3 = graph.getNodeData(selectedId);
           const existing = data3 && data3.style || {};
@@ -28118,7 +28278,8 @@ const _sfc_main$2 = {
       });
       graph.on("viewportchange", (evt) => {
         const zoom = graph.getZoom();
-        const center = graph.getCanvasCenter();
+        const raw2 = graph.getCanvasCenter();
+        const center = Array.isArray(raw2) ? { x: raw2[0], y: raw2[1] } : raw2;
         api._emit("viewport:change", { zoom, center });
       });
       graph.render().then(() => {
@@ -28164,6 +28325,13 @@ const _sfc_main$2 = {
         if (lastRaw.value) render(lastRaw.value);
       }
     );
+    vue.watch(
+      () => props.customerData,
+      () => {
+        if (lastRaw.value) render(lastRaw.value);
+      },
+      { deep: true }
+    );
     vue.onBeforeUnmount(() => {
       if (api) {
         api.destroy();
@@ -28223,7 +28391,7 @@ const _sfc_main$2 = {
     };
   }
 };
-const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-562b2247"]]);
+const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b02bff98"]]);
 const _hoisted_1$1 = ["data-theme"];
 const _hoisted_2$1 = { class: "panel-head" };
 const _hoisted_3$1 = {
@@ -28533,7 +28701,7 @@ const _sfc_main = {
   }
 };
 const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
-const VERSION = "0.1.4";
+const VERSION = "0.1.6";
 const DESCRIPTION = "配电台区单线图拓扑成图引擎";
 exports.DESCRIPTION = DESCRIPTION;
 exports.DistanceTop10 = DistanceTop10;
@@ -28544,10 +28712,13 @@ exports.TopoApi = TopoApi;
 exports.TopoGraph = TopoGraph;
 exports.VERSION = VERSION;
 exports.assertOrthogonal = assertOrthogonal;
+exports.buildCustomerMap = buildCustomerMap;
 exports.buildGraphData = buildGraphData;
 exports.calculateTopDistances = calculateTopDistances;
 exports.computeOrthogonalLayout = computeOrthogonalLayout;
 exports.edgeStyle = edgeStyle;
+exports.getMeterBoxSize = getMeterBoxSize;
 exports.getSymbolSpec = getSymbolSpec;
+exports.injectCustomers = injectCustomers;
 exports.parseTopo = parseTopo;
 //# sourceMappingURL=topo-engine.cjs.map