G6部分整合

@@ -12,6 +12,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/g6": "^4.0.2",
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "e-icon-picker": "^1.0.7",
@@ -20,6 +21,7 @@
     "element-ui": "^2.13.2",
     "file-saver": "^2.0.2",
     "form-making": "^1.2.9",
+    "insert-css": "^2.0.0",
     "js-cookie": "^2.2.1",
     "mockjs": "^1.1.0",
     "screenfull": "^5.0.2",

+import request from "@/plugin/axios";
+
+/**
+ * 历史回溯
+ * @param data
+ * @constructor
+ */
+export function getLshs(data) {
+    return request({
+        url: "/bg/fwsxbg/lshs",
+        method: "post",
+        data: data,
+    });
+}
+

 <template>
-  <div class="">历史回溯</div>
+  <div class="">历史回溯
+    <div id="mountNode"></div>
+  </div>
 </template>
 
 <script>
+
+  import G6 from '@antv/g6';
+  import insertCss from 'insert-css';
+  import { getLshs } from "./../../../../src/api/fwsxbg";
+
 export default {
   name:"",
   components:{},
   props:{},
   data(){
+    insertCss(`
+    .g6-tooltip {
+      border-radius: 6px;
+      font-size: 12px;
+      color: #fff;
+      background-color: #000;
+      padding: 2px 8px;
+      text-align: center;
+    }
+  `);
     return {
+      data : {}
+    }
+  },
+  created(){
+
+  },
+  mounted(){
+    this.getLshsData();
+  },
+  methods: {
+    initG6() {
+      const data = this.data;
+      G6.registerNode(
+        'sql',
+        {
+          drawShape(cfg, group) {
+            const rect = group.addShape('rect', {
+              attrs: {
+                x: -75,
+                y: -25,
+                width: 150,
+                height: 50,
+                radius: 10,
+                stroke: '#5B8FF9',
+                fill: '#C6E5FF',
+                lineWidth: 1,
+              },
+              name: 'rect-shape',
+            });
+            if (cfg.name) {
+              group.addShape('text', {
+                attrs: {
+                  text: cfg.name,
+                  x: 0,
+                  y: 0,
+                  fill: '#00287E',
+                  fontSize: 14,
+                  textAlign: 'center',
+                  textBaseline: 'middle',
+                  fontWeight: 'bold',
+                },
+                name: 'text-shape',
+              });
+            }
+            return rect;
+          },
+        },
+        'single-node',
+      );
+
+      const container = document.getElementById('mountNode');
+
+      const graph = new G6.Graph({
+        container: 'mountNode',
+        width:1000,
+        height:800,
+        layout: {
+          type: 'dagre',
+          nodesepFunc: (d) => {
+            if (d.id === '3') {
+              return 500;
+            }
+            return 50;
+          },
+          ranksep: 70,
+          controlPoints: true,
+        },
+        defaultNode: {
+          type: 'sql',
+        },
+        defaultEdge: {
+          type: 'polyline',
+          style: {
+            radius: 20,
+            offset: 45,
+            endArrow: true,
+            lineWidth: 2,
+            stroke: '#C2C8D5',
+          },
+        },
+        nodeStateStyles: {
+          selected: {
+            stroke: '#d9d9d9',
+            fill: '#5394ef',
+          },
+        },
+
+        modes: {
+          default: [
+            'drag-canvas',
+            'zoom-canvas',
+            'click-select',
+            {
+              type: 'tooltip',
+              formatText(model) {
+                const cfg = model.conf;
+                const text = [];
+                cfg.forEach((row) => {
+                  text.push(row.label + ':' + row.value + '<br>');
+                });
+                return text.join('\n');
+              },
+              offset: 30,
+            },
+          ],
+        },
+        fitView: true,
+      });
+
+      graph.data(data);
+      graph.render();
+
+      if (typeof window !== 'undefined')
+        window.onresize = () => {
+          if (!graph || graph.get('destroyed')) return;
+          if (!container || !container.scrollWidth || !container.scrollHeight) return;
+          graph.changeSize(container.scrollWidth, container.scrollHeight);
+        };
+
+    },
+
+    getLshsData(){
+      let _this = this;
+      const data = {
+        "bsm": "c0818d9e4286b35b8ee9b96d90b522aa",
+        "type": "zd"
+      };
+      getLshs(data).then((res)=>{
+        if(res.code===200){
+          _this.data=res.result;
+          this.initG6();
+        }
+      })
     }
   },
-  created(){},
-  mounted(){},
-  methods:{},
   computed: {},
   watch: {},
 }
 </script>
 <style scoped  lang="less">
+
 </style>
\ No newline at end of file