topo-engine 0.1.4 → 0.1.6

package/dist/topo-engine.js

@@ -52,6 +52,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 {
@@ -371,7 +378,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()) });
     }
   }
@@ -379,7 +386,7 @@ class TopoApi {
   getViewport() {
     this._assertReady();
     const zoom = this._graph.getZoom();
-    const center = this._graph.getCanvasCenter();
+    const center = this._canvasCenterXY();
     return { zoom, center };
   }
   // ============================================================
@@ -752,11 +759,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;
@@ -1214,6 +1235,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 = [];
@@ -1265,6 +1333,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 };
   };
@@ -1922,6 +1994,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 };
   };
@@ -2520,22 +2596,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
       }
     };
   });
@@ -27787,8 +27871,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 } }));
@@ -27914,8 +28035,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 }) {
@@ -28031,6 +28154,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;
@@ -28082,6 +28209,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);
@@ -28104,6 +28259,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 || {};
@@ -28116,7 +28276,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(() => {
@@ -28162,6 +28323,13 @@ const _sfc_main$2 = {
         if (lastRaw.value) render(lastRaw.value);
       }
     );
+    watch(
+      () => props.customerData,
+      () => {
+        if (lastRaw.value) render(lastRaw.value);
+      },
+      { deep: true }
+    );
     onBeforeUnmount(() => {
       if (api) {
         api.destroy();
@@ -28221,7 +28389,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 = {
@@ -28531,7 +28699,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 = "配电台区单线图拓扑成图引擎";
 export {
   DESCRIPTION,
@@ -28543,11 +28711,14 @@ export {
   TopoGraph,
   VERSION,
   assertOrthogonal,
+  buildCustomerMap,
   buildGraphData,
   calculateTopDistances,
   computeOrthogonalLayout,
   edgeStyle,
+  getMeterBoxSize,
   getSymbolSpec,
+  injectCustomers,
   parseTopo
 };
 //# sourceMappingURL=topo-engine.js.map