添加了svg样式。

layouts/basic.vue

@@ -2,13 +2,13 @@
     <Layout class="go-main">
             <Header class="header">
                 <Menu mode="horizontal" theme="light" active-name="1" class="menu">                   
-                        <MenuItem name="1">
+                        <MenuItem name="1" to="/go">
                             <Icon type="ios-navigate"></Icon>
-                            Item 1
+                            简单
                         </MenuItem>
-                        <MenuItem name="2">
+                        <MenuItem name="2" to="/go/tree">
                             <Icon type="ios-keypad"></Icon>
-                            Item 2
+                            树形
                         </MenuItem>
                         <MenuItem name="3">
                             <Icon type="ios-analytics"></Icon>

package-lock.json

@@ -18104,6 +18104,11 @@
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.0.0.tgz",
       "integrity": "sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA=="
     },
+    "vue-contextmenujs": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/vue-contextmenujs/-/vue-contextmenujs-1.3.6.tgz",
+      "integrity": "sha512-v8oCIuvjwm6tm+ereY6KY1vCBNBku+mSykdGSiWlhEA4ipdfvp/yxStwPTO13SQ+r1Hw4eUIEX3RBYFSvLMdJw=="
+    },
     "vue-echarts": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-4.1.0.tgz",

package.json

@@ -12,19 +12,23 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.3.6",
+    "@svgdotjs/svg.draggable.js": "^3.0.2",
+    "@svgdotjs/svg.js": "^3.0.16",
+    "area-data": "^5.0.6",
     "awe-dnd": "^0.3.4",
     "better-scroll": "^1.12.1",
     "cross-env": "^5.2.0",
     "dayjs": "^1.8.22",
     "echarts": "^4.7.0",
     "echarts-liquidfill": "^2.0.5",
+    "gojs": "^2.1.10",
     "iview-loader": "^1.3.0",
     "iview-pro": "file:./iview-pro",
     "js-cookie": "^2.2.1",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
-    "lodash.chunk": "^4.2.0",
     "lodash": "^4.17.15",
+    "lodash.chunk": "^4.2.0",
     "lowdb": "^1.0.0",
     "marked": "^0.3.9",
     "mockjs": "^1.0.1-beta3",
@@ -32,14 +36,10 @@
     "nuxt": "^2.10.2",
     "oidc-client": "^1.9.1",
     "qs": "^6.6.0",
-    "gojs": "^2.1.10",
     "screenfull": "^5.0.2",
-    "area-data": "^5.0.6",
-    "xlsx": "^0.15.1",
-    "@svgdotjs/svg.draggable.js": "^3.0.2",
-    "@svgdotjs/svg.js": "^3.0.16",
     "ua-parser-js": "^0.7.18",
     "view-design": "^4.1.3",
+    "vue-contextmenujs": "^1.3.6",
     "vue-echarts": "^4.0.3",
     "vue-i18n": "^8.15.5",
     "vue-json-viewer": "^2.2.8",
@@ -47,7 +47,8 @@
     "vue-ueditor-wrap": "^2.4.1",
     "vue2-editor": "^2.10.2",
     "vuedraggable": "^2.23.0",
-    "vuex-along": "^1.2.10"
+    "vuex-along": "^1.2.10",
+    "xlsx": "^0.15.1"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.2.0",

pages/go/index.vue

 <template>
-  <div id="card">
+  <div id="card" @contextmenu.prevent="onContextmenu($event,2)">
     <h1>go.js</h1>
   </div>
 </template>
@@ -50,6 +50,53 @@ export default {
         { from: "C", to: "B" }
       ];
       this.go.model = myModel;
+    },
+    onContextmenu(event,a) {
+      this.$contextmenu({
+        items: [
+          {
+            label: "返回(B)", icon: "md-add",
+            onClick: () => {
+              this.message = "返回(B)";
+              console.log("返回(B)");
+            }
+          },
+          { label: "前进(F)", disabled: true },
+          { label: "重新加载(R)", divided: true, icon: "md-add" },
+          { label: "另存为(A)..." },
+          { label: "打印(P)...", icon: "el-icon-printer" },
+          { label: "投射(C)...", divided: true },
+          {
+            label: "使用网页翻译(T)",
+            divided: true,
+            minWidth: 0,
+            children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
+          },
+          {
+            label: "截取网页(R)",
+            minWidth: 0,
+            children: [
+              {
+                label: "截取可视化区域",
+                onClick: () => {
+                  this.message = "截取可视化区域";
+                  console.log("截取可视化区域");
+                }
+              },
+              { label: "截取全屏" }
+            ]
+          },
+          { label: "查看网页源代码(V)", icon: "el-icon-view" },
+          { label: "检查(N)" }
+        ],
+        event,
+        //x: event.clientX,
+        //y: event.clientY,
+        customClass: "class-a",
+        zIndex: 3,
+        minWidth: 230
+      });
+      return false;
     }
   }
 };

pages/go/tree/index.vue

+<template>
+  <div>
+    <Button @click="svg">svg</Button>
+    <!-- <div id="card" @contextmenu.prevent="onContextmenu($event,2)"> -->
+    <div id="card">
+      <h1>go.js</h1>
+    </div>
+    <div id="svg" ref="svg" v-if="show">222222222222222222222222</div>
+  </div>
+</template>
+
+<script>
+import go from "gojs";
+export default {
+  layout: "basic",
+  name: "",
+  data() {
+    return {
+      go: null,
+      show: true,
+      data: [
+        { key: 39, name: "增材制造中心", parent: 0 },
+        { key: 40, name: "北京星驰恒动工厂", parent: 39 },
+        { key: 41, name: "市场处", parent: 40 },
+        { key: 42, name: "调度组", parent: 40 },
+        { key: 43, name: "工程技术部", parent: 40 },
+        { key: 44, name: "质检组", parent: 40 },
+        { key: 45, name: "物料管理组", parent: 40 },
+        { key: 47, name: "山东新泰工厂", parent: 39 },
+        { key: 51, name: "CCC", parent: 0 },
+        { key: 52, name: "DDD", parent: 51 },
+        { key: 53, name: "EEE", parent: 52 },
+        { key: 55, name: "新泰3D打印工厂", parent: 39 },
+        { key: 56, name: "北京生产车间", parent: 40 },
+        { key: 57, name: "产品研发部", parent: 40 },
+        { key: 58, name: "DDD", parent: 51 },
+        { key: 59, name: "过分的", parent: 39 },
+        { key: 60, name: "发电机房", parent: 51 },
+        { key: 61, name: "范德萨", parent: 39 },
+        { key: 62, name: "测试部门", parent: 39 },
+        { key: 63, name: "测试部门011", parent: 40 },
+        { key: 64, name: "llllll---", parent: 0 },
+        { key: 65, name: "部门9999", parent: 0 },
+        { key: 66, name: "测试部门", parent: 0 },
+        { key: 67, name: "测44444444", parent: 0 },
+        { key: 68, name: "测试2020202", parent: 0 },
+        { key: 69, name: "测试部门", parent: 51 },
+        { key: 70, name: "测试一级部门", parent: 0 },
+        { key: 71, name: "测试二级部门", parent: 70 },
+        { key: 72, name: "发电机房二级部门", parent: 60 },
+        { key: 73, name: "测试三级部门022", parent: 71 },
+        { key: 74, name: "测试二级部门3333", parent: 70 },
+        { key: 75, name: "测试三级部门", parent: 74 },
+        { key: 76, name: "测试部门11", parent: 0 },
+        { key: 77, name: "测试部门2233322222", parent: 76 },
+        { key: 78, name: "测试部门333", parent: 77 },
+        { key: 79, name: "打上断点多", parent: 76 },
+        { key: 80, name: "鹅鹅鹅鹅鹅鹅饿时", parent: 79 },
+        { key: 81, name: "山东新泰", parent: 0 },
+        { key: 82, name: "新泰金属3d打印车间", parent: 81 },
+        { key: 83, name: "新泰生产班组", parent: 82 },
+        { key: 84, name: "操作组", parent: 56 },
+        { key: 85, name: "库房组", parent: 56 },
+        { key: 86, name: "新泰库房组", parent: 0 },
+        { key: 87, name: "新泰库房组", parent: 82 },
+        { key: 88, name: "测试部门", parent: 0 },
+        { key: 89, name: "车间A", parent: 88 },
+        { key: 90, name: "工艺部门", parent: 88 },
+        { key: 91, name: "车间A班组1", parent: 89 },
+        { key: 92, name: "车间A班组2", parent: 89 },
+        { key: 93, name: "b1", parent: 90 },
+        { key: 94, name: "LXG_新增工厂_0309", parent: 0 },
+        { key: 95, name: "LXG_新增车间_0309", parent: 94 },
+        { key: 96, name: "LXG_新增保卫科", parent: 94 },
+        { key: 97, name: "LXG_新增保安组", parent: 96 },
+        { key: 98, name: "信息部", parent: 40 },
+        { key: 99, name: "北京生产车间", parent: 0 },
+        { key: 100, name: "工艺组", parent: 56 }
+      ]
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let $ = go.GraphObject.make;
+      this.go = $(go.Diagram, "card", {
+        "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
+        layout: $(
+          go.TreeLayout, // specify a Diagram.layout that arranges trees
+          { angle: 90, layerSpacing: 35 }
+        )
+      });
+      var myModel = $(go.TreeModel);
+      // in the model data, each node is represented by a JavaScript object:
+
+      this.go.nodeTemplate = $(
+        go.Node,
+        "Horizontal",
+        { background: "blue" },
+        $(
+          go.TextBlock,
+          "Hi,henq",
+          { margin: 12, stroke: "#fff", font: "bold 16px '宋体'" },
+          new go.Binding("text", "name")
+        )
+      );
+      this.go.linkTemplate = $(
+        go.Link,
+        { routing: go.Link.Orthogonal, corner: 3 },
+        $(go.Shape, { strokeWidth: 1, stroke: "#ddd" })
+      ); // the link shape
+
+      myModel.nodeDataArray = this.data;
+      this.go.model = myModel;
+    },
+    svg() {
+      this.show = !this.show;
+      if (this.show) {
+        var svg = this.go.makeSvg({
+          document: window.document, // create SVG DOM in new document context
+          scale: 1,
+          maxSize: new go.Size(1200, NaN)
+        });
+        console.log(this.$refs.svg);
+       setTimeout(()=>{
+          document.getElementById("svg").appendChild(svg);
+       },300)
+       
+      }
+    },
+    onContextmenu(event, a) {
+      this.$contextmenu({
+        items: [
+          {
+            label: "返回(B)",
+            icon: "md-add",
+            onClick: () => {
+              this.message = "返回(B)";
+              console.log("返回(B)");
+            }
+          },
+          { label: "前进(F)", disabled: true },
+          { label: "重新加载(R)", divided: true, icon: "md-add" },
+          { label: "另存为(A)..." },
+          { label: "打印(P)...", icon: "el-icon-printer" },
+          { label: "投射(C)...", divided: true },
+          {
+            label: "使用网页翻译(T)",
+            divided: true,
+            minWidth: 0,
+            children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
+          },
+          {
+            label: "截取网页(R)",
+            minWidth: 0,
+            children: [
+              {
+                label: "截取可视化区域",
+                onClick: () => {
+                  this.message = "截取可视化区域";
+                  console.log("截取可视化区域");
+                }
+              },
+              { label: "截取全屏" }
+            ]
+          },
+          { label: "查看网页源代码(V)", icon: "el-icon-view" },
+          { label: "检查(N)" }
+        ],
+        event,
+        //x: event.clientX,
+        //y: event.clientY,
+        customClass: "class-a",
+        zIndex: 3,
+        minWidth: 230
+      });
+      return false;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+#card {
+  height: 80vh;
+  width: 100%;
+  canvas {
+    outline: none;
+  }
+  z-index: 5;
+}
+#svg {
+  height: 90vh;
+  width: 100%;
+  z-index: 99;
+  position: fixed;
+  background-color: white;
+  top: 150px;
+  left: 0;
+  rect{
+    // fill:wheat;
+    cursor: pointer;
+  }
+  rect:hover{
+    fill: tomato;
+  }
+}
+</style>
\ No newline at end of file

plugins/iview.js

@@ -14,6 +14,7 @@ import iViewPro from '../iview-pro/src/index.js';
 import '@/libs/iview-pro/iview-pro.css';
 import '@/styles/index.less';
 
+import Contextmenu from "vue-contextmenujs"
 import Tools from '@/components/page/tool.vue'
 import State from '@/components/page/state.vue'
 import Dictionary from '@/components/page/dictionary.vue'
@@ -114,7 +115,7 @@ export default ({
     i18n: (key, value) => app.i18n.t(key, value)
   })
   Vue.use(iViewPro);
-
+  Vue.use(Contextmenu);
   Vue.prototype.$log = {
     ...util.log,
     push(data) {