拓扑图组件，table增加表头显示，修改code传参，upload取消needCropper参数

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@antv/g6": "^3.4.8",
     "@fortawesome/fontawesome-free": "^5.8.0",
     "ace-builds": "^1.4.11",
     "babel-polyfill": "^6.26.0",

src/components/codes.vue

@@ -9,12 +9,9 @@
 <script>
 import ace from "ace-builds";
 import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
-import "ace-builds/src-noconflict/mode-yaml"; // 默认设置的语言模式
 import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
-import yaml from "json2yaml"; //json转yaml
-import json from "js-yaml"; //yaml转json
 export default {
-  props: ["items", "acemodePath"],
+  props: ["url"],
   data() {
     return {
       aceEditor: null,
@@ -33,27 +30,22 @@ export default {
       tabSize: 4,
       highlightActiveLine: false
     });
-
-    if (this.acemodePath == "ace/mode/yaml") {
-      var obj = yaml.stringify(this.items);
-      this.aceEditor.getSession().setValue(obj);
-    } else if (this.acemodePath == "ace/mode/json") {
-      this.aceEditor
-        .getSession()
-        .setValue(JSON.stringify(this.items, null, "\t"));
-    }
+    this.getValue();
   },
   watch: {},
   methods: {
-    // updatechild: function() {
-    //   json.load(this.aceEditor.getSession().getValue());
-    //   console.log(json.load(this.aceEditor.getSession().getValue()));
-    // },
-    parentHandleclick: function() {
-      this.$emit(
-        "jsonyamlvalue",
-        json.load(this.aceEditor.getSession().getValue())
-      );
+    getValue() {
+      this.$http
+        .get(this.url)
+        .then(response => {
+          this.aceEditor.setValue(JSON.stringify(response.data, null, "\t"));
+        })
+        .catch(function(response) {
+          console.log(response);
+        });
+    },
+    parentHandleclick() {
+      this.$emit("getEditValue", this.aceEditor.getValue());
     }
   }
 };

src/components/table-um.vue

@@ -33,6 +33,7 @@
         :empty-text="emptyText"
         :stripe="stripe"
         row-key="id"
+        :show-header="showHeader"
         default-expand-all
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
         ref="cesTable"
@@ -270,6 +271,10 @@ export default {
     headerCellClassName: {
       type: String,
       default: ""
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

src/components/upload_file.vue

 <template>
   <div>
-    <div v-if="!needCropper">
+    <div v-if="type != 'copper'">
       <el-upload
         action="ssurl"
         :file-list="fileArray"
@@ -53,10 +53,6 @@ export default {
       type: Number,
       default: 1
     },
-    needCropper: {
-      type: Boolean,
-      default: false
-    },
     list: {
       type: Array,
       default: []

src/pages/example_code.vue

 <template>
   <div class="code-main">
-    <v-apaas-code></v-apaas-code>
+    <v-apaas-code url="/static/data.json"></v-apaas-code>
   </div>
 </template>
 
@@ -36,4 +36,7 @@ export default {
 </script>
 
 <style scoped>
+.code-main {
+  margin-top: 100px;
+}
 </style>
\ No newline at end of file

src/pages/example_topology.vue

+<template>
+  <div class="topo_ex">
+    <Topology :datas="datas" />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Topology from "@/components/topology.vue";
+
+export default {
+  components: {
+    Topology
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      let url = "./static/antv.json";
+      this.$http
+        .get(url)
+        .then(response => {
+          this.datas = response.data.elements;
+        })
+        .catch(function(response) {
+          this.error = true;
+        });
+    },
+  }
+};
+</script>
+<style scoped>
+.topo_ex {
+    margin-top: 100px;
+}
+</style>
\ No newline at end of file

src/pages/example_upload.vue

@@ -4,7 +4,6 @@
     <upload-file
       :multiple="false"
       :max="4"
-      :needCropper="true"
       type="cropper"
       :readOnly="false"
       :list="imgList"
@@ -14,7 +13,6 @@
     <upload-file
       :multiple="false"
       :max="4"
-      :needCropper="false"
       type="picture"
       :readOnly="false"
       fit="fill"
@@ -25,7 +23,6 @@
     <upload-file
       :multiple="false"
       :max="4"
-      :needCropper="false"
       type="mp3"
       :readOnly="false"
       fit="fill"

src/router/index.js

@@ -55,6 +55,11 @@ export default new Router({
       path: "/example_icon", // svg 实例
       name: "example_icon",
       component: () => import("@/pages/example_icon")
+    },
+    {
+      path: "/example_topology", // 拓扑图实例
+      name: "example_topology",
+      component: () => import("@/pages/example_topology")
     }
   ]
 });

static/topology_ic_ganzhifw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 17</title><rect class="cls-1" x="4.22" y="4.22" width="13.56" height="13.56" transform="translate(-4.56 11) rotate(-45)"/><path class="cls-2" d="M11,2.83,19.17,11,11,19.17,2.83,11,11,2.83M11,0,0,11,11,22,22,11,11,0Z"/></svg>
\ No newline at end of file

static/topology_ic_shikongfw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 15</title><path class="cls-1" d="M10,19a9,9,0,1,1,9-9A9,9,0,0,1,10,19Z"/><path class="cls-2" d="M10,2a8,8,0,1,1-8,8,8,8,0,0,1,8-8m0-2A10,10,0,1,0,20,10,10,10,0,0,0,10,0Z"/></svg>
\ No newline at end of file

static/topology_ic_shipinfw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 19.05"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 16</title><polygon class="cls-1" points="1.73 18.05 11 2 20.27 18.05 1.73 18.05"/><path class="cls-2" d="M11,4l7.54,13.05H3.46L11,4m0-4L0,19.05H22L11,0Z"/></svg>
\ No newline at end of file

static/topology_ic_shujufw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 14</title><rect class="cls-1" x="1" y="1" width="16" height="16"/><path class="cls-2" d="M16,2V16H2V2H16m2-2H0V18H18V0Z"/></svg>
\ No newline at end of file

static/topology_ic_zonghefw.svg

+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20.92"><defs><style>.cls-1{fill:#a1b1f6;}.cls-2{fill:#495feb;}</style></defs><title>ic_画板 18</title><polygon class="cls-1" points="4.93 19.92 1.18 8.37 11 1.24 20.82 8.37 17.07 19.92 4.93 19.92"/><path class="cls-2" d="M11,2.47l8.65,6.28-3.3,10.17H5.65L2.35,8.76,11,2.47M11,0,0,8,4.2,20.92H17.8L22,8,11,0Z"/></svg>
\ No newline at end of file