topo-engine 0.1.4 → 0.1.5

package/dist/topo-engine.js

@@ -1214,6 +1214,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 +1312,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 +1973,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 +2575,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 +27850,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 +28014,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 +28133,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;
@@ -28162,6 +28268,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 +28334,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-c213df91"]]);
 const _hoisted_1$1 = ["data-theme"];
 const _hoisted_2$1 = { class: "panel-head" };
 const _hoisted_3$1 = {
@@ -28531,7 +28644,7 @@ const _sfc_main = {
   }
 };
 const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
-const VERSION = "0.1.4";
+const VERSION = "0.1.5";
 const DESCRIPTION = "配电台区单线图拓扑成图引擎";
 export {
   DESCRIPTION,
@@ -28543,11 +28656,14 @@ export {
   TopoGraph,
   VERSION,
   assertOrthogonal,
+  buildCustomerMap,
   buildGraphData,
   calculateTopDistances,
   computeOrthogonalLayout,
   edgeStyle,
+  getMeterBoxSize,
   getSymbolSpec,
+  injectCustomers,
   parseTopo
 };
 //# sourceMappingURL=topo-engine.js.map