topo-engine 0.1.4 → 0.1.5

package/dist/topo-engine.umd.cjs

@@ -1216,6 +1216,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 +1314,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 +1975,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 +2577,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 +27852,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 +28016,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 +28135,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;
@@ -28164,6 +28270,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 +28336,7 @@
       };
     }
   };
-  const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-562b2247"]]);
+  const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c213df91"]]);
   const _hoisted_1$1 = ["data-theme"];
   const _hoisted_2$1 = { class: "panel-head" };
   const _hoisted_3$1 = {
@@ -28533,7 +28646,7 @@
     }
   };
   const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
-  const VERSION = "0.1.4";
+  const VERSION = "0.1.5";
   const DESCRIPTION = "配电台区单线图拓扑成图引擎";
   exports2.DESCRIPTION = DESCRIPTION;
   exports2.DistanceTop10 = DistanceTop10;
@@ -28544,11 +28657,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" });
 });