topo-engine 0.1.3 → 0.1.5

package/README.md

@@ -7,7 +7,7 @@
 ## 功能特性
 
 - 🧩 **Vue 3 组件** — `TopoGraph`（画布，含标题栏 / 统计 / 适应画布 / 导出 PNG 按钮）、`SidePanel`（设备详情与上下游）、`DistanceTop10`（父子连线距离 Top10 面板）
-- 🎨 **深色 / 浅色双主题** — 黑底 SCADA 或白底两种画布风格，图元 / 导线 / 文字随之配套适配，可随时切换（`theme` prop 或工具栏按钮）
+- 🎨 **深色 / 浅色双主题** — 黑底 SCADA 或白底两种画布风格，图元 / 导线 / 文字随之配套适配，可随时切换（`theme` prop 或工具栏按钮）。默认浅色主题
 - 📐 **自研正交布局** — 主干沿最长路径横向铺开 + 分支带垂直直走，整图**横平竖直、0 交叉、0 重叠**，边缘路由为直线 / L 形折线
 - 🔍 **拓扑查询 API** — 节点 / 边 / 邻居 / 子树 / 主干链 / 路径 / 坐标 查询
 - 🎨 **样式控制** — 节点、边样式覆盖与批量重置
@@ -171,10 +171,10 @@ const g6Data = buildGraphData(model, layout);   // → G6 可直接消费的 { n
 | ------- | ---- | ---- |
 | `0302` | 配电变压器 | 橙色圆 + 红圈 |
 | `3301` | 开关 / 熔丝 | 红色矩形（开关名自动缩写为 K 编号） |
-| `3303` | 低压母线 | 白色短粗线 |
-| `3202` / `320300000` | 电缆终端头 / 分接点 | 三角 / 红色米字 |
+| `3303` | 低压母线 | 白色短粗线（无文字标签） |
+| `3202` / `320300000` | 电缆终端头 / 分接点 | 三角 / 红色米字（无文字标签） |
 | `310100000` | 低压导线 | 青色连接点（名称缩写为杆号区间） |
-| `3112` | 计量箱 | 黑底白框 "JX" |
+| `3112` | 计量箱 | 黑底白框 "JX"（有客户数据时显示为电能表图标 + 用户名） |
 | `3218000` | 用户接入点 | 白圈 "J"（名称缩写为户号） |
 | `32500000` | 低压配电箱（台区） | 站房 |
 
@@ -186,7 +186,7 @@ const g6Data = buildGraphData(model, layout);   // → G6 可直接消费的 { n
 | ---- | ---- | ---- | ---- |
 | `dataUrl` | `String` | `''` | 拓扑 JSON 的 URL（内部 `fetch` 加载）。变化后自动重新加载 |
 | `data` | `Object` | `null` | 直接传入 JSON 对象；优先级高于 `dataUrl`；深度 watch，变化自动重绘 |
-| `theme` | `'dark' \| 'light'` | `'dark'` | 画布主题：`dark`（黑底 SCADA，默认）/ `light`（白底，图元配套加深）。支持 `v-model:theme`，也可点内置工具栏 ☀️/🌙 按钮切换 |
+| `theme` | `'dark' \| 'light'` | `'light'` | 画布主题：`dark`（黑底 SCADA）/ `light`（白底，图元配套加深，默认）。支持 `v-model:theme`，也可点内置工具栏 ☀️/🌙 按钮切换 |
 
 ### Emits
 
@@ -218,7 +218,7 @@ const g6Data = buildGraphData(model, layout);   // → G6 可直接消费的 { n
 
 ### 主题切换（深色 / 浅色）
 
-引擎内置两套主题，**深色为默认**（黑底 SCADA 风格，与历史版本一致）；浅色为**白底**，图元（变压器 / 开关 / 计量箱 / 用户圈…）、导线（干线深灰 / 支线浅灰）、节点文字都已配套加深，适合打印或嵌入浅色页面。
+引擎内置两套主题，**浅色为默认**（白底，图元配套深色，适合打印或嵌入浅色页面）；深色为**黑底 SCADA 风格**。
 
 - `TopoGraph`：`:theme` 取值 `'dark'`（默认）或 `'light'`，推荐 `v-model:theme` 双向绑定；组件左上工具栏内置 ☀️ / 🌙 切换按钮（点击 emit `update:theme`）。
 - `SidePanel` / `DistanceTop10`：同样接收 `theme` prop，与画布保持一致观感。
@@ -230,7 +230,7 @@ import { ref } from 'vue';
 import { TopoGraph } from 'topo-engine';
 import 'topo-engine/style.css';
 
-const theme = ref('dark');          // 初始深色，可在运行时切换
+const theme = ref('light');          // 初始浅色（默认），可在运行时切换
 const dataUrl = ref('/data/topology.json');
 </script>
 
@@ -347,6 +347,55 @@ topo.off('node:click', handler); // 不传 handler 则移除该事件全部监
 
 `exportPng(filename?)`（整图下载）、`toDataURL(opts?)`、`getGraphData()`、`getGraphInstance()`（原始 G6 Graph）、`getModel()`、`getLayoutData()`、`getNodeByIdMap()`、`update(graph, model, layout, map)`、`destroy()`
 
+## 文字渲染
+
+- **设备标签自动换行**：开关标签、站房标题、下方名称标签等文字根据设备宽度自动换行，避免文字重叠
+- **站房标题自适应高度**：站房框高度会根据标题换行行数自动扩展，确保多行标题完整显示在框内
+- **母线 / 电缆终端头**：不渲染额外文字标签（母线不显示"母线"，电缆终端头不显示名称）
+- **站房标题**：使用独立属性 `_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-c213df91] {
   --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-c213df91] {
   --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-c213df91] {
   width: 100%;
   height: 100%;
 }
-.topo-toolbar[data-v-562b2247] {
+.topo-toolbar[data-v-c213df91] {
   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-c213df91] {
   color: var(--tp-title);
   font-weight: 600;
 }
-.topo-meta[data-v-562b2247] {
+.topo-meta[data-v-c213df91] {
   color: var(--tp-meta);
 }
-.btn[data-v-562b2247] {
+.btn[data-v-c213df91] {
   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-c213df91]:hover {
   border-color: var(--tp-accent);
   color: var(--tp-accent);
 }
-.topo-loading[data-v-562b2247],
-.topo-error[data-v-562b2247] {
+.topo-loading[data-v-c213df91],
+.topo-error[data-v-c213df91] {
   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-c213df91] {
   color: var(--tp-error);
 }
 

package/dist/topo-engine.cjs

@@ -1216,6 +1216,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 +1314,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 +1975,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 +2577,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 +27852,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 +28016,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 +28135,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;
@@ -28164,6 +28270,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 +28336,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 = {
@@ -28533,7 +28646,7 @@ const _sfc_main = {
   }
 };
 const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
-const VERSION = "0.1.3";
+const VERSION = "0.1.5";
 const DESCRIPTION = "配电台区单线图拓扑成图引擎";
 exports.DESCRIPTION = DESCRIPTION;
 exports.DistanceTop10 = DistanceTop10;
@@ -28544,10 +28657,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