新增流程功能

src/router/index.js

@@ -45,11 +45,7 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true
   },
-  {
+
-    path: '/easyFlow',
-    component: () => import('@/components/ef/panel'),
-    hidden: true
-  },
   {
     path: '/register',
     component: () => import('@/views/register'),

src/views/etl/task/taskInfo.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="dashboard-container">
+    <p>选择节点</p>
+    <div class="antvBox">
+      <div class="menu-list">
+        <div v-for="item in moduleList" :key="item.id"
+             draggable="true"
+             @dragend="handleDragEnd($event, item)">
+          <img :src="item.image" alt="" />
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
+      <div class="canvas-card">
+        <div id="container" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Graph } from "@antv/x6";
+export default {
+  name: "antvX6",
+  data() {
+    return {
+      moduleList: [
+        {
+          id: 1,
+          name: "节点1",
+          image: require("@/assets/img/1.png"),
+        },
+        {
+          id: 8,
+          name: "节点2",
+          image: require("@/assets/img/2.png"),
+        },
+        {
+          id: 2,
+          name: "节点3",
+          image: require("@/assets/img/3.png"),
+        },
+        {
+          id: 3,
+          name: "节点4",
+          image: require("@/assets/img/4.png"),
+        },
+      ],
+      graph: null
+    };
+  },
+  methods: {
+    // 拖动后松开鼠标触发事件
+    handleDragEnd(e, item) {
+      console.log(e, item); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
+      this.addHandleNode(
+        e.pageX - 500,
+        e.pageY - 200,
+        new Date().getTime(),
+        item.image,
+        item.name
+      );
+    },
+    initGraph() {
+      const container = document.getElementById("container");
+      this.graph = new Graph({
+        container: container, // 画布容器
+        width: container.offsetWidth, // 画布宽
+        height: container.offsetHeight, // 画布高
+        background: false, // 背景（透明）
+        snapline: true, // 对齐线
+        // 配置连线规则
+        connecting: {
+          snap: true, // 自动吸附
+          allowBlank: false, // 是否允许连接到画布空白位置的点
+          allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
+          allowLoop: true, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
+          highlight: true, // 拖动边时，是否高亮显示所有可用的节点
+          highlighting: {
+            magnetAdsorbed: {
+              name: "stroke",
+              args: {
+                attrs: {
+                  fill: "#5F95FF",
+                  stroke: "#5F95FF",
+                },
+              },
+            },
+          },
+          router: {
+            // 对路径添加额外的点
+            name: "orth",
+          },
+          connector: {
+            // 边渲染到画布后的样式
+            name: "rounded",
+            args: {
+              radius: 8,
+            },
+          },
+        },
+        panning: {
+          enabled: false,
+        },
+        mousewheel: {
+          enabled: true, // 支持滚动放大缩小
+          zoomAtMousePosition: true,
+          modifiers: "ctrl",
+          minScale: 0.5,
+          maxScale: 3,
+        },
+        grid: {
+          type: "dot",
+          size: 20, // 网格大小 10px
+          visible: true, // 渲染网格背景
+          args: {
+            color: "#a0a0a0", // 网格线/点颜色
+            thickness: 2, // 网格线宽度/网格点大小
+          },
+        },
+      });
+    },
+    //添加节点到画布
+    addHandleNode(x, y, id, image, name) {
+      this.graph.addNode({
+        id: id,
+        shape: "image", // 指定使用何种图形，默认值为 'rect'
+        x: x,
+        y: y,
+        width: 60,
+        height: 60,
+        imageUrl: image,
+        attrs: {
+          body: {
+            stroke: "#ffa940",
+            fill: "#ffd591",
+          },
+          label: {
+            textWrap: {
+              width: 90,
+              text: name,
+            },
+            fill: "black",
+            fontSize: 12,
+            refX: 0.5,
+            refY: "100%",
+            refY2: 4,
+            textAnchor: "middle",
+            textVerticalAnchor: "top",
+          },
+        },
+        ports: {
+          groups: {
+            group1: {
+              position: [30, 30],
+            },
+          },
+          items: [
+            {
+              group: "group1",
+              id: "port1",
+              attrs: {
+                circle: {
+                  r: 6,
+                  magnet: true,
+                  stroke: "#ffffff",
+                  strokeWidth: 2,
+                  fill: "#5F95FF",
+                },
+              },
+            },
+          ],
+        },
+        zIndex: 10,
+      });
+    },
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+    this.initGraph()
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dashboard-container {
+  .antvBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: black;
+    padding-top: 20px;
+    .menu-list {
+      height: 100%;
+      width: 300px;
+      padding: 0 10px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-content: flex-start;
+      flex-wrap: wrap;
+      > div {
+        margin-bottom: 10px;
+        border-radius: 5px;
+        padding: 0 10px;
+        box-sizing: border-box;
+        cursor: pointer;
+        color: black;
+        width: 105px;
+        display: flex;
+        flex-wrap: wrap;
+
+        justify-content: center;
+        img {
+          height: 50px;
+          width: 50px;
+        }
+        P {
+          width: 90px;
+          text-align: center;
+        }
+      }
+    }
+    .canvas-card {
+      width: 1700px;
+      height: 750px;
+      box-sizing: border-box;
+      > div {
+        width: 1400px;
+        height: 750px;
+        border: 2px dashed #2149ce;
+      }
+    }
+  }
+}
+</style>
+
+

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://21.12.0.10`,
+        target: `http://21.12.0.10/prod-api/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''