拓扑图-GoJs使用说明

1. 准备工作

• 拷贝gojs破解包到自己的项目中。（注意，要用破解版，免费版会有水印）

• 在项目中引入

  Vue2项目中，一般在main.js引入，如

import gojs from "@/utils/topologyUtils/gojs";

2. 使用

html

 <div class="flowChart" id="flowChart"></div>

js

// 引入GoJs的包装插件js
import YatongTopology from "@/utils/topologyUtils/yatongTopology.js";
// 创建GoJs对象
let topology = new YatongTopology("flowChart");
// 调用 render 方法传入数据进行渲染，data格式见下附
topology.render(data);

json

[
  {
    "busbarId": "20230907230111000271",
    "busbarName": "电网",
    "deviceType": "2",
    "icon": "elec_network",
    "children": [
      {
        "busbarId": "20230807230111000272",
        "busbarName": "变压器",
        "deviceType": "2",
        "icon": "elec_tranformation",
        "attribute": {
          "capacity": "容量:630kVA",
          "averageLoad": "平均负荷:300kW",
          "loadRate": "负载率:47.62%"
        },
        "children": [
          {
            "busbarId": "20230807230520000552",
            "deviceType": "2",
            "busbarName": "AC/DC",
            "icon": "ac2dc",
            "children": [
              {
                "busbarId": "20230807230734000373",
                "busbarName": "750V",
                "deviceType": "1",
                "children": [
                  {
                    "busbarId": "20230807230734000374",
                    "busbarName": "开关",
                    "icon": "switch",
                    "deviceType": "2",
                    "children": [
                      {
                        "busbarId": "20230807230734000375",
                        "busbarName": "AC/DC",
                        "icon": "ac2dc",
                        "deviceType": "2",
                        "children": [
                          {
                            "busbarId": "20230807230734000376",
                            "busbarName": "开关",
                            "deviceType": "2",
                            "icon": "switch",
                            "children": [
                              {
                                "busbarId": "20230807230734000377",
                                "busbarName": "光伏",
                                "deviceType": "2",
                                "icon": "photovoltaic",
                                "attribute": {
                                  "power": "150kW"
                                },
                                "children": []
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "busbarId": "20230807230734000314",
                    "busbarName": "开关",
                    "icon": "switch",
                    "deviceType": "2",
                    "children": [
                      {
                        "busbarId": "20230807230734000315",
                        "busbarName": "AC/DC",
                        "icon": "ac2dc",
                        "deviceType": "2",
                        "children": [
                          {
                            "busbarId": "20230807230734000316",
                            "busbarName": "开关",
                            "icon": "switch",
                            "deviceType": "2",
                            "children": [
                              {
                                "busbarId": "20230807230734000317",
                                "busbarName": "储能",
                                "icon": "elec_storage",
                                "deviceType": "2",
                                "attribute": {
                                  "power": "70kW",
                                  "power_out": "215kWh"
                                },
                                "children": []
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "busbarId": "20230807230734000327",
                    "busbarName": "充电桩",
                    "icon": "charging_station",
                    "deviceType": "2",
                    "attribute": {
                      "power": "200.00kW",
                    },
                    "children": [],
                  },
                  {
                    "busbarId": "20230807230734000337",
                    "busbarName": "空调",
                    "icon": "air_conditioning",
                    "deviceType": "2",
                    "attribute": {
                      "power": "350.00kW"
                    },
                    "children": []
                  },
                  {
                    "busbarId": "20230807230734000137",
                    "busbarName": "DC/DC",
                    "icon": "dc2dc",
                    "deviceType": "2",
                    "children": [
                      {
                        "busbarId": "20230807230734001337",
                        "busbarName": "375V",
                        "deviceType": "1",
                        "children": [
                          {
                            "busbarId": "20230807230734003337",
                            "busbarName": "水泵",
                            "icon": "water_pump",
                            "deviceType": "2",
                            "attribute": {
                              "power": "480.00kW"
                            },
                            "children": []
                          },
                          {
                            "busbarId": "20230807230734000138",
                            "busbarName": "DC/DC",
                            "icon": "dc2dc",
                            "deviceType": "2",
                            "children": [
                              {
                                "busbarId": "20230807230734001339",
                                "busbarName": "48V",
                                "deviceType": "1",
                                "children": [
                                  {
                                    "busbarId": "20230807230734002337",
                                    "busbarName": "照明",
                                    "icon": "lighting",
                                    "deviceType": "2",
                                    "attribute": {
                                      "power": "80.00kW"
                                    },
                                    "children": []
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

[
  {
    "busbarId": "20230907230111000271",
    "busbarName": "电网",
    "deviceType": "2",
    "icon": "elec_network",
    "children": [
      {
        "busbarId": "20230807230111000272",
        "busbarName": "变压器",
        "deviceType": "2",
        "icon": "elec_tranformation",
        "attribute": {
          "capacity": "容量:630kVA",
          "averageLoad": "平均负荷:300kW",
          "loadRate": "负载率:47.62%"
        },
        "children": [
          {
            "busbarId": "20230807230520000552",
            "deviceType": "2",
            "busbarName": "AC/DC",
            "icon": "ac2dc",
            "children": [
              {
                "busbarId": "20230807230734000373",
                "busbarName": "750V",
                "deviceType": "1",
                "children": [
                  {
                    "busbarId": "20230807230734000374",
                    "busbarName": "开关",
                    "icon": "switch",
                    "deviceType": "2",
                    "children": [
                      {
                        "busbarId": "20230807230734000375",
                        "busbarName": "AC/DC",
                        "icon": "ac2dc",
                        "deviceType": "2",
                        "children": [
                          {
                            "busbarId": "20230807230734000376",
                            "busbarName": "开关",
                            "deviceType": "2",
                            "icon": "switch",
                            "children": [
                              {
                                "busbarId": "20230807230734000377",
                                "busbarName": "光伏",
                                "deviceType": "2",
                                "icon": "photovoltaic",
                                "attribute": {
                                  "power": "150kW"
                                },
                                "children": []
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "busbarId": "20230807230734000314",
                    "busbarName": "开关",
                    "icon": "switch",
                    "deviceType": "2",
                    "children": [
                      {
                        "busbarId": "20230807230734000315",
                        "busbarName": "AC/DC",
                        "icon": "ac2dc",
                        "deviceType": "2",
                        "children": [
                          {
                            "busbarId": "20230807230734000316",
                            "busbarName": "开关",
                            "icon": "switch",
                            "deviceType": "2",
                            "children": [
                              {
                                "busbarId": "20230807230734000317",
                                "busbarName": "储能",
                                "icon": "elec_storage",
                                "deviceType": "2",
                                "attribute": {
                                  "power": "70kW",
                                  "power_out": "215kWh"
                                },
                                "children": []
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "busbarId": "20230807230734000337",
                    "busbarName": "空调",
                    "icon": "air_conditioning",
                    "deviceType": "2",
                    "attribute": {
                      "power": "350.00kW"
                    },
                    "children": []
                  },
                  {
                    "busbarId": "20230807230734000137",
                    "busbarName": "DC/DC",
                    "icon": "dc2dc",
                    "deviceType": "2",
                    "children": [
                      {
                        "busbarId": "20230807230734001337",
                        "busbarName": "375V",
                        "deviceType": "1",
                        "children": [
                          {
                            "busbarId": "20230807230734003337",
                            "busbarName": "水泵",
                            "icon": "water_pump",
                            "deviceType": "2",
                            "attribute": {
                              "power": "480.00kW"
                            },
                            "children": []
                          },
                          {
                            "busbarId": "20230807230734000138",
                            "busbarName": "DC/DC",
                            "icon": "dc2dc",
                            "deviceType": "2",
                            "children": [
                              {
                                "busbarId": "20230807230734001339",
                                "busbarName": "48V",
                                "deviceType": "1",
                                "children": [
                                  {
                                    "busbarId": "20230807230734002337",
                                    "busbarName": "照明",
                                    "icon": "lighting",
                                    "deviceType": "2",
                                    "attribute": {
                                      "power": "80.00kW"
                                    },
                                    "children": []
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

3. 一些补充

• yatongTopology.js 这个文件为GoJs的包装插件js，可在此js基础上进行扩展。目前使用的是link组件。
• 目前已实现宽高自适应父级Div元素。
• images文件夹中为拓扑图用到节点图片，具体如何嵌入的可以查看yatongTopology.js的操作代码。
• 一定不要npm install gojs ，那样会覆盖破解gojs导致其无法引入，而且会在开发中出现莫名其妙的调用（即使删掉了node_models）。