topo-engine 0.1.4 → 0.1.6

package/dist/topo-engine.umd.cjs

@@ -54,6 +54,13 @@
     _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 @@
       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 @@
     getViewport() {
       this._assertReady();
       const zoom = this._graph.getZoom();
-      const center = this._graph.getCanvasCenter();
+      const center = this._canvasCenterXY();
       return { zoom, center };
     }
     // ============================================================
@@ -754,11 +761,25 @@
       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 @@
   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 @@
     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 s = getSymbolSpec(n ? n.cat : "other");
       return { w: s.w, h: s.h };
     };
@@ -1924,6 +1996,10 @@
     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 @@
     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 @@
     group.appendChild(new Polygon({ style: { points: [[0, -5], [0, 5], [9, 0]], fill: "none", stroke: C.red, lineWidth: 1.4 } }));
   }
   function drawMeterBox(attributes, group) {
-    group.appendChild(new Rect({ style: { x: -9.5, y: -9.5, width: 19, height: 19, fill: C.meterFill, stroke: C.meterText, lineWidth: 0.9 } }));
-    text(attributes, group, "JX", 0, 0.5, 7.5, C.meterText);
+    const [w, h] = attributes.size;
+    if (attributes._meterBoxMode === "single") {
+      group.appendChild(new Circle({ style: { cx: 0, cy: -3, r: 11, fill: "none", stroke: C.white, lineWidth: 1.6 } }));
+      group.appendChild(new Line({ style: { x1: 0, y1: -14, x2: 0, y2: -7, stroke: C.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: C.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: C.meterFill, stroke: C.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 i2 = 0; i2 < customers.length; i2++) {
+        const row2 = Math.floor(i2 / cols);
+        const col = i2 % 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: C.meterText, lineWidth: 0.8 } }));
+        group.appendChild(new Line({ style: { x1: cx, y1: cy - meterR, x2: cx, y2: cy - meterR + 4, stroke: C.meterText, lineWidth: 0.8 } }));
+        if (showName) {
+          const name = customers[i2].realConsName || customers[i2].consName || "";
+          if (name) {
+            group.appendChild(new Text({ style: { text: name, x: cx, y: cy + meterR + 6, fontSize: 7, fill: C.meterText, fontFamily: FONT, textAlign: "center", textBaseline: "middle" } }));
+          }
+        }
+      }
+    } else {
+      group.appendChild(new Rect({ style: { x: -9.5, y: -9.5, width: 19, height: 19, fill: C.meterFill, stroke: C.meterText, lineWidth: 0.9 } }));
+      text(attributes, group, "JX", 0, 0.5, 7.5, C.meterText);
+    }
   }
   function drawConsumer(attributes, group) {
     group.appendChild(new Circle({ style: { cx: 0, cy: 0, r: 12.5, fill: "none", stroke: C.white, lineWidth: 1.8 } }));
@@ -27916,8 +28037,10 @@
     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 @@
         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 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 d = Math.abs(cx - st.x) + Math.abs(cy - st.y);
+              if (d < bestD) {
+                bestD = d;
+                best = nd.id;
+              }
+            }
+          }
+          return best;
+        }
         graph.on("node:pointerenter", (evt) => {
           const id2 = evt.target.id;
           const data3 = graph.getNodeData(id2);
@@ -28106,6 +28261,11 @@
           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 @@
         });
         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 @@
           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 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 DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
-  const VERSION = "0.1.4";
+  const VERSION = "0.1.6";
   const DESCRIPTION = "配电台区单线图拓扑成图引擎";
   exports2.DESCRIPTION = DESCRIPTION;
   exports2.DistanceTop10 = DistanceTop10;
@@ -28544,11 +28712,14 @@
   exports2.TopoGraph = TopoGraph;
   exports2.VERSION = VERSION;
   exports2.assertOrthogonal = assertOrthogonal;
+  exports2.buildCustomerMap = buildCustomerMap;
   exports2.buildGraphData = buildGraphData;
   exports2.calculateTopDistances = calculateTopDistances;
   exports2.computeOrthogonalLayout = computeOrthogonalLayout;
   exports2.edgeStyle = edgeStyle;
+  exports2.getMeterBoxSize = getMeterBoxSize;
   exports2.getSymbolSpec = getSymbolSpec;
+  exports2.injectCustomers = injectCustomers;
   exports2.parseTopo = parseTopo;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });