okk

layouts/basic.vue

@@ -18,7 +18,10 @@
                             <Icon type="ios-analytics"></Icon>
                             墙
                         </MenuItem>
-                     
+                       <MenuItem name="5" to="/go/flow">
+                            <Icon type="ios-analytics"></Icon>
+                            工作流
+                        </MenuItem>
                 </Menu>
             </Header>
             <Content >

pages/go/flow/index.vue

+<template>
+  <div id="drag">
+    <div class="left" slot="left" id="left">
+      <Button type="primary" @click="add">添加</Button>
+    </div>
+    <div class="right" slot="right" id="right">33333333333333</div>
+  </div>
+</template>
+
+<script>
+import go from "gojs";
+let $ = go.GraphObject.make;
+export default {
+  layout: "basic",
+  name: "",
+  data() {
+    return {
+      split: 0.2,
+      go: null,
+      right: null
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.go = $(go.Diagram, "right");
+      this.right = $(go.Palette, "left", {
+        model: new go.GraphLinksModel([
+          // specify the contents of the Palette
+          { key: "A", name: "henq" },
+          { key: "B", name: "lily" },
+          { key: "C", name: "miaomiao" }
+        ])
+      });
+      var myModel = $(go.GraphLinksModel);
+      // in the model data, each node is represented by a JavaScript object:
+
+      this.go.nodeTemplate = $(
+        go.Node,
+        "Horizontal",
+        // { background: "blue" },
+        $(
+          go.Panel,
+          "Spot",
+          $(go.Shape, "Circle", {
+            // desiredSize: new go.Size(60, 60),
+            fill: "orange",
+            stroke: "#eee",
+            strokeWidth: 3.5,
+            portId: "A",
+            toSpot: go.Spot.LeftCenter,
+            toLinkable: true,
+            fromLinkable: true,
+            // toMaxLinks: 1,
+            // fromMaxLinks:1
+          }),
+          $(
+            go.TextBlock,
+            "Hi,henq",
+            { margin: 12, stroke: "#fff", font: "bold 16px '宋体'" },
+            new go.Binding("text", "name")
+          )
+        )
+      );
+      this.go.linkTemplate = $(
+        go.Link,
+        // $(go.Shape),
+        // $(
+        //   go.Shape, // the "from" end arrowhead
+        //   { fromArrow: "Chevron" }
+        // ),
+        $(
+          go.Shape, // the "to" end arrowhead         
+           { toArrow: "StretchedDiamond", fill: "red" }
+        ),
+         $(go.TextBlock,"Hi,henq", { textAlign: "center" ,segmentOffset: new go.Point(0, -10) })
+      );
+      myModel.nodeDataArray = [
+        { key: "A", name: "henq" },
+        { key: "B", name: "lily" },
+        { key: "C", name: "miaomiao" }
+      ];
+      //   myModel.linkDataArray = [
+      //     {
+      //       from: "A",
+      //       to: "C"
+      //     },
+      //     { from: "B", to: "C" },
+      //     { from: "C", to: "A" },
+      //     { from: "C", to: "B" }
+      //   ];
+      this.go.model = myModel;
+      //   this.right.model=myModel;
+      //   this.right.nodeTemplate=this.go.nodeTemplate;
+    },
+    add() {
+      var node = new go.Node(go.Panel.Auto);
+      var shape = new go.Shape();
+      //  shape.figure = "RoundedRectangle";
+      shape.figure = "Ellipse";
+      shape.fill = "lightblue";
+      var text = new go.TextBlock();
+      text.text = "hello,henq!";
+      text.margin = 5;
+      node.add(shape);
+      node.add(text);
+      this.go.add(node);
+    },
+    henq(params) {},
+    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">
+#drag {
+  //   height: calc(100vh - 60px);
+  width: 100%;
+  height: 800px;
+  display: flex;
+  flex-direction: column;
+  canvas {
+    outline: none;
+  }
+  #left {
+    height: 50px;
+    background: #ddd;
+  }
+  //   #left,#right{
+  //     //   height: 100%;
+  //   }
+  #right {
+    background: #f7f7f7;
+    flex-grow: 1;
+  }
+}
+</style>
\ No newline at end of file