topo-engine 0.1.10 → 0.1.11

package/dist/topo-engine.cjs

@@ -29720,10 +29720,58 @@ const _hoisted_4$2 = { class: "topo-meta" };
 const _hoisted_5$2 = ["title"];
 const _hoisted_6$2 = {
   key: 1,
+  class: "topo-legend"
+};
+const _hoisted_7$2 = { class: "topo-legend-body" };
+const _hoisted_8$2 = {
+  class: "topo-legend-icon",
+  viewBox: "0 0 32 20",
+  width: "32",
+  height: "20",
+  "aria-hidden": "true"
+};
+const _hoisted_9$2 = ["stroke"];
+const _hoisted_10$2 = ["fill", "stroke"];
+const _hoisted_11$2 = ["stroke"];
+const _hoisted_12$2 = ["stroke"];
+const _hoisted_13$2 = ["stroke"];
+const _hoisted_14$2 = ["fill"];
+const _hoisted_15$1 = ["stroke"];
+const _hoisted_16$1 = ["stroke"];
+const _hoisted_17$1 = ["stroke"];
+const _hoisted_18$1 = ["fill"];
+const _hoisted_19$1 = ["fill"];
+const _hoisted_20$1 = ["fill", "stroke"];
+const _hoisted_21$1 = ["stroke"];
+const _hoisted_22$1 = ["fill"];
+const _hoisted_23$1 = ["stroke"];
+const _hoisted_24$1 = ["stroke"];
+const _hoisted_25$1 = ["stroke"];
+const _hoisted_26$1 = ["stroke"];
+const _hoisted_27$1 = ["fill", "stroke"];
+const _hoisted_28$1 = ["fill"];
+const _hoisted_29$1 = ["stroke"];
+const _hoisted_30$1 = ["fill"];
+const _hoisted_31$1 = ["fill", "stroke"];
+const _hoisted_32$1 = ["fill"];
+const _hoisted_33$1 = ["stroke"];
+const _hoisted_34$1 = ["fill"];
+const _hoisted_35$1 = ["fill"];
+const _hoisted_36$1 = ["fill", "stroke"];
+const _hoisted_37$1 = ["stroke", "stroke-width"];
+const _hoisted_38$1 = ["fill"];
+const _hoisted_39 = ["stroke"];
+const _hoisted_40 = ["fill"];
+const _hoisted_41 = ["stroke"];
+const _hoisted_42 = ["fill"];
+const _hoisted_43 = ["fill"];
+const _hoisted_44 = { class: "topo-legend-label" };
+const _hoisted_45 = {
+  key: 2,
   class: "topo-loading"
 };
-const _hoisted_7$2 = {
-  key: 2,
+const _hoisted_46 = {
+  key: 3,
   class: "topo-error"
 };
 const _sfc_main$2 = {
@@ -29735,10 +29783,14 @@ const _sfc_main$2 = {
     customerData: { type: Array, default: null },
     /** 主题：'dark'（默认，黑底 SCADA 风）| 'light'（白底）；支持 v-model:theme 双向绑定 */
     theme: { type: String, default: "light" },
-    /** 左上角工具条（标题/统计/主题/适应/导出）是否显示，默认不显示 */
-    toolbar: { type: Boolean, default: false }
+    /** 左上角工具条（标题/统计/主题/图例/适应/导出）是否显示，默认不显示 */
+    toolbar: { type: Boolean, default: false },
+    /** 是否显示左下角图例面板，默认 false（关闭）；支持 v-model:legend */
+    legend: { type: Boolean, default: false },
+    /** 自定义图例项（可选）：[{ label, shape, color?, text?, key? }]；不传则按当前图内容自动生成 */
+    legendItems: { type: Array, default: null }
   },
-  emits: ["node-select", "customer-select", "loaded", "top-distances", "update:theme"],
+  emits: ["node-select", "customer-select", "loaded", "top-distances", "update:theme", "update:legend"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -29748,6 +29800,49 @@ const _sfc_main$2 = {
     const title = vue.ref("");
     const stats = vue.ref({ total: 0, depth: 0, leaves: 0, byCat: {} });
     const edgeCount = vue.ref(0);
+    const legendCollapsed = vue.ref(false);
+    const hasCustomerData = vue.ref(false);
+    const hasSwitch = vue.ref(false);
+    const hasFuse = vue.ref(false);
+    const LEGEND_DEFS = [
+      { cat: "transformer", label: "配电变压器", shape: "transformer" },
+      { cat: "switch", label: "开关 / 断路器", shape: "switch" },
+      { cat: "fuse", label: "低压熔丝", shape: "fuse" },
+      { cat: "bus", label: "低压母线", shape: "bus" },
+      { cat: "cableTerminal", label: "电缆终端头", shape: "cableTerminal" },
+      { cat: "junction", label: "密母分接点", shape: "junction" },
+      { cat: "meterBox", label: "计量箱", shape: "meterBox" },
+      { cat: "consumer", label: "用户接入点", shape: "consumer" },
+      { cat: "line", label: "低压导线点", shape: "line" },
+      { cat: "station", label: "低压配电箱", shape: "station" },
+      { cat: "other", label: "其它设备", shape: "other" }
+    ];
+    const legendPalette = vue.computed(() => THEMES[themeName()] || THEMES.dark);
+    function legendColor(item, role) {
+      if (item && item.color) return item.color;
+      return legendPalette.value[role] || "#888888";
+    }
+    const legendEntries = vue.computed(() => {
+      const custom = props.legendItems;
+      if (Array.isArray(custom) && custom.length) {
+        return custom.map((it, i) => ({ key: it.key || `custom-${i}`, ...it }));
+      }
+      const byCat = stats.value.byCat || {};
+      const include = (d2) => {
+        if (d2.cat === "switch") return hasSwitch.value;
+        if (d2.cat === "fuse") return hasFuse.value;
+        return !!byCat[d2.cat];
+      };
+      const list = LEGEND_DEFS.filter(include).map((d2) => ({ ...d2, key: d2.cat }));
+      if (list.length) {
+        list.push({ key: "edge-trunk", label: "主干导线", shape: "edge", role: "trunkEdge" });
+        list.push({ key: "edge-branch", label: "分支导线", shape: "edge", role: "branchEdge" });
+      }
+      if (hasCustomerData.value) {
+        list.push({ key: "meterUser", label: "客户电表", shape: "meterUser" });
+      }
+      return list;
+    });
     let graph = null;
     let model = null;
     let selectedId = null;
@@ -30037,6 +30132,9 @@ const _sfc_main$2 = {
       title.value = String(model.title || "").replace(/\.+$/, "");
       stats.value = model.stats;
       edgeCount.value = model.edges.length;
+      hasCustomerData.value = model.nodes.some((n) => Array.isArray(n._customers) && n._customers.length);
+      hasSwitch.value = model.nodes.some((n) => n.cat === "switch" && !n.isFuse);
+      hasFuse.value = model.nodes.some((n) => n.cat === "switch" && n.isFuse);
       layoutData = computeOrthogonalLayout(model, {
         nodeGap: 26,
         // 主干相邻节点边界间距
@@ -30302,6 +30400,11 @@ const _sfc_main$2 = {
             title: __props.theme === "light" ? "切换到深色主题" : "切换到浅色主题",
             onClick: _cache[0] || (_cache[0] = ($event) => emit("update:theme", __props.theme === "light" ? "dark" : "light"))
           }, vue.toDisplayString(__props.theme === "light" ? "🌙 深色" : "☀️ 浅色"), 9, _hoisted_5$2),
+          vue.createElementVNode("button", {
+            class: "btn",
+            title: "显示 / 隐藏图例",
+            onClick: _cache[1] || (_cache[1] = ($event) => emit("update:legend", !__props.legend))
+          }, vue.toDisplayString(__props.legend ? "🗺 图例 ✓" : "🗺 图例"), 1),
           vue.createElementVNode("button", {
             class: "btn",
             onClick: resetView
@@ -30311,12 +30414,334 @@ const _sfc_main$2 = {
             onClick: exportPng
           }, "导出 PNG")
         ])) : vue.createCommentVNode("", true),
-        loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, "正在解析台区拓扑…")) : error.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, vue.toDisplayString(error.value), 1)) : vue.createCommentVNode("", true)
+        __props.legend && !loading.value && !error.value && legendEntries.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [
+          vue.createElementVNode("div", {
+            class: "topo-legend-title",
+            onClick: _cache[2] || (_cache[2] = ($event) => legendCollapsed.value = !legendCollapsed.value)
+          }, [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass(["topo-legend-arrow", { open: !legendCollapsed.value }])
+            }, "▸", 2),
+            _cache[3] || (_cache[3] = vue.createTextVNode(" 图例 ", -1))
+          ]),
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_7$2, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(legendEntries.value, (it) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: it.key || it.label,
+                class: "topo-legend-row"
+              }, [
+                (vue.openBlock(), vue.createElementBlock("svg", _hoisted_8$2, [
+                  it.shape === "transformer" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    vue.createElementVNode("line", {
+                      x1: "2",
+                      y1: "10",
+                      x2: "8",
+                      y2: "10",
+                      stroke: legendColor(it, "trunkLine"),
+                      "stroke-width": "1.6",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_9$2),
+                    vue.createElementVNode("circle", {
+                      cx: "12",
+                      cy: "10",
+                      r: "5",
+                      fill: legendColor(it, "orange"),
+                      stroke: legendColor(it, "trunkLine"),
+                      "stroke-width": "1.2"
+                    }, null, 8, _hoisted_10$2),
+                    vue.createElementVNode("circle", {
+                      cx: "22",
+                      cy: "10",
+                      r: "5",
+                      fill: "none",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "2"
+                    }, null, 8, _hoisted_11$2),
+                    vue.createElementVNode("line", {
+                      x1: "27",
+                      y1: "10",
+                      x2: "31",
+                      y2: "10",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.6",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_12$2)
+                  ], 64)) : it.shape === "switch" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                    vue.createElementVNode("line", {
+                      x1: "2",
+                      y1: "10",
+                      x2: "7",
+                      y2: "10",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.6",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_13$2),
+                    vue.createElementVNode("rect", {
+                      x: "7",
+                      y: "5",
+                      width: "18",
+                      height: "10",
+                      rx: "2",
+                      fill: legendColor(it, "red")
+                    }, null, 8, _hoisted_14$2),
+                    vue.createElementVNode("line", {
+                      x1: "25",
+                      y1: "10",
+                      x2: "30",
+                      y2: "10",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.6",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_15$1)
+                  ], 64)) : it.shape === "fuse" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                    vue.createElementVNode("line", {
+                      x1: "2",
+                      y1: "10",
+                      x2: "6",
+                      y2: "10",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.6",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_16$1),
+                    vue.createElementVNode("rect", {
+                      x: "6",
+                      y: "5",
+                      width: "20",
+                      height: "10",
+                      rx: "2",
+                      fill: "none",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.6"
+                    }, null, 8, _hoisted_17$1),
+                    vue.createElementVNode("circle", {
+                      cx: "12",
+                      cy: "10",
+                      r: "2.2",
+                      fill: legendColor(it, "red")
+                    }, null, 8, _hoisted_18$1),
+                    vue.createElementVNode("rect", {
+                      x: "16",
+                      y: "7",
+                      width: "7",
+                      height: "6",
+                      fill: legendColor(it, "red")
+                    }, null, 8, _hoisted_19$1)
+                  ], 64)) : it.shape === "bus" ? (vue.openBlock(), vue.createElementBlock("rect", {
+                    key: 3,
+                    x: "5",
+                    y: "8",
+                    width: "22",
+                    height: "4",
+                    rx: "2",
+                    fill: legendColor(it, "white"),
+                    "fill-opacity": "0.5",
+                    stroke: legendColor(it, "white"),
+                    "stroke-width": "1.2"
+                  }, null, 8, _hoisted_20$1)) : it.shape === "cableTerminal" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 4 }, [
+                    vue.createElementVNode("line", {
+                      x1: "3",
+                      y1: "10",
+                      x2: "9",
+                      y2: "10",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.6",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_21$1),
+                    vue.createElementVNode("polygon", {
+                      points: "9,4 20,10 9,16",
+                      fill: legendColor(it, "red")
+                    }, null, 8, _hoisted_22$1)
+                  ], 64)) : it.shape === "junction" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 5 }, [
+                    vue.createElementVNode("line", {
+                      x1: "10",
+                      y1: "10",
+                      x2: "22",
+                      y2: "10",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.8",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_23$1),
+                    vue.createElementVNode("line", {
+                      x1: "16",
+                      y1: "4",
+                      x2: "16",
+                      y2: "16",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.8",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_24$1),
+                    vue.createElementVNode("line", {
+                      x1: "11",
+                      y1: "5",
+                      x2: "21",
+                      y2: "15",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.8",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_25$1),
+                    vue.createElementVNode("line", {
+                      x1: "21",
+                      y1: "5",
+                      x2: "11",
+                      y2: "15",
+                      stroke: legendColor(it, "red"),
+                      "stroke-width": "1.8",
+                      "stroke-linecap": "round"
+                    }, null, 8, _hoisted_26$1)
+                  ], 64)) : it.shape === "meterBox" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 6 }, [
+                    vue.createElementVNode("rect", {
+                      x: "10",
+                      y: "2",
+                      width: "16",
+                      height: "16",
+                      rx: "3",
+                      fill: legendColor(it, "meterFill"),
+                      stroke: legendColor(it, "meterText"),
+                      "stroke-width": "1.4"
+                    }, null, 8, _hoisted_27$1),
+                    vue.createElementVNode("text", {
+                      x: "18",
+                      y: "13.5",
+                      "text-anchor": "middle",
+                      "font-size": "8",
+                      "font-weight": "700",
+                      fill: legendColor(it, "meterText")
+                    }, "JX", 8, _hoisted_28$1)
+                  ], 64)) : it.shape === "consumer" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 7 }, [
+                    vue.createElementVNode("circle", {
+                      cx: "16",
+                      cy: "10",
+                      r: "7",
+                      fill: "none",
+                      stroke: legendColor(it, "white"),
+                      "stroke-width": "2"
+                    }, null, 8, _hoisted_29$1),
+                    vue.createElementVNode("text", {
+                      x: "16",
+                      y: "13",
+                      "text-anchor": "middle",
+                      "font-size": "9",
+                      "font-weight": "700",
+                      fill: legendColor(it, "white")
+                    }, "J", 8, _hoisted_30$1)
+                  ], 64)) : it.shape === "line" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 8 }, [
+                    vue.createElementVNode("circle", {
+                      cx: "16",
+                      cy: "10",
+                      r: "4.6",
+                      fill: legendColor(it, "dotFill"),
+                      stroke: legendColor(it, "cyan"),
+                      "stroke-width": "1.6"
+                    }, null, 8, _hoisted_31$1),
+                    vue.createElementVNode("circle", {
+                      cx: "16",
+                      cy: "10",
+                      r: "1.5",
+                      fill: legendColor(it, "cyan")
+                    }, null, 8, _hoisted_32$1)
+                  ], 64)) : it.shape === "meterUser" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 9 }, [
+                    vue.createElementVNode("rect", {
+                      x: "12",
+                      y: "2",
+                      width: "8",
+                      height: "15",
+                      rx: "2",
+                      fill: "none",
+                      stroke: legendColor(it, "meterText"),
+                      "stroke-width": "1.2"
+                    }, null, 8, _hoisted_33$1),
+                    vue.createElementVNode("rect", {
+                      x: "13.5",
+                      y: "4",
+                      width: "5",
+                      height: "2.2",
+                      rx: "1",
+                      fill: legendColor(it, "meterText"),
+                      "fill-opacity": "0.6"
+                    }, null, 8, _hoisted_34$1),
+                    vue.createElementVNode("circle", {
+                      cx: "16",
+                      cy: "11",
+                      r: "1.4",
+                      fill: legendColor(it, "meterText")
+                    }, null, 8, _hoisted_35$1)
+                  ], 64)) : it.shape === "station" ? (vue.openBlock(), vue.createElementBlock("rect", {
+                    key: 10,
+                    x: "6",
+                    y: "4",
+                    width: "20",
+                    height: "12",
+                    rx: "2",
+                    fill: legendColor(it, "stationFill"),
+                    stroke: legendColor(it, "white"),
+                    "stroke-width": "1.4"
+                  }, null, 8, _hoisted_36$1)) : it.shape === "edge" ? (vue.openBlock(), vue.createElementBlock("line", {
+                    key: 11,
+                    x1: "3",
+                    y1: "10",
+                    x2: "29",
+                    y2: "10",
+                    stroke: legendColor(it, it.role || "trunkEdge"),
+                    "stroke-width": it.role === "branchEdge" ? 1.2 : 2.4,
+                    "stroke-linecap": "round"
+                  }, null, 8, _hoisted_37$1)) : it.shape === "square" ? (vue.openBlock(), vue.createElementBlock("rect", {
+                    key: 12,
+                    x: "10",
+                    y: "4",
+                    width: "12",
+                    height: "12",
+                    rx: "2",
+                    fill: it.color || legendColor(it, "cyan")
+                  }, null, 8, _hoisted_38$1)) : it.shape === "ring" ? (vue.openBlock(), vue.createElementBlock("circle", {
+                    key: 13,
+                    cx: "16",
+                    cy: "10",
+                    r: "6",
+                    fill: "none",
+                    stroke: it.color || legendColor(it, "cyan"),
+                    "stroke-width": "2.4"
+                  }, null, 8, _hoisted_39)) : it.shape === "triangle" ? (vue.openBlock(), vue.createElementBlock("polygon", {
+                    key: 14,
+                    points: "10,16 22,16 16,4",
+                    fill: it.color || legendColor(it, "red")
+                  }, null, 8, _hoisted_40)) : it.shape === "hline" ? (vue.openBlock(), vue.createElementBlock("line", {
+                    key: 15,
+                    x1: "3",
+                    y1: "10",
+                    x2: "29",
+                    y2: "10",
+                    stroke: it.color || legendColor(it, "cyan"),
+                    "stroke-width": "2.4",
+                    "stroke-linecap": "round"
+                  }, null, 8, _hoisted_41)) : it.shape === "text" ? (vue.openBlock(), vue.createElementBlock("text", {
+                    key: 16,
+                    x: "16",
+                    y: "14",
+                    "text-anchor": "middle",
+                    "font-size": "11",
+                    "font-weight": "700",
+                    fill: it.color || legendColor(it, "white")
+                  }, vue.toDisplayString(it.text || "JX"), 9, _hoisted_42)) : (vue.openBlock(), vue.createElementBlock("circle", {
+                    key: 17,
+                    cx: "16",
+                    cy: "10",
+                    r: "5",
+                    fill: it.color || legendColor(it, "cyan")
+                  }, null, 8, _hoisted_43))
+                ])),
+                vue.createElementVNode("span", _hoisted_44, vue.toDisplayString(it.label), 1)
+              ]);
+            }), 128))
+          ], 512), [
+            [vue.vShow, !legendCollapsed.value]
+          ])
+        ])) : vue.createCommentVNode("", true),
+        loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_45, "正在解析台区拓扑…")) : error.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_46, vue.toDisplayString(error.value), 1)) : vue.createCommentVNode("", true)
       ], 8, _hoisted_1$2);
     };
   }
 };
-const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a4a4c398"]]);
+const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0736fa17"]]);
 const _hoisted_1$1 = ["data-theme"];
 const _hoisted_2$1 = { class: "panel-head" };
 const _hoisted_3$1 = {
@@ -30689,7 +31114,7 @@ const _sfc_main = {
   }
 };
 const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
-const VERSION = "0.1.10";
+const VERSION = "0.1.11";
 const DESCRIPTION = "配电台区单线图拓扑成图引擎";
 exports.DESCRIPTION = DESCRIPTION;
 exports.DistanceTop10 = DistanceTop10;