diff --git a/package.json b/package.json
index db43daf..5d6457f 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,17 @@
     "url": "https://gitee.com/y_project/MuYu-Cloud.git"
   },
   "dependencies": {
+    "@antv/x6": "^2.18.1",
+    "@antv/x6-plugin-clipboard": "^2.1.6",
+    "@antv/x6-plugin-history": "^2.2.4",
+    "@antv/x6-plugin-keyboard": "^2.2.3",
+    "@antv/x6-plugin-selection": "^2.2.2",
+    "@antv/x6-plugin-snapline": "^2.1.7",
+    "@antv/x6-plugin-stencil": "^2.1.5",
+    "@antv/x6-plugin-transform": "^2.1.8",
+    "@antv/x6-vue-shape": "^2.1.2",
     "@riophae/vue-treeselect": "0.4.0",
+    "@vue/composition-api": "^1.7.2",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
@@ -45,6 +55,7 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "insert-css": "^2.0.0",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
diff --git a/src/App.vue b/src/App.vue
index 69a3716..8047d20 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@ import ThemePicker from "@/components/ThemePicker";
 
 export default {
   name: "App",
-  components: {ThemePicker},
+  components: { ThemePicker },
   metaInfo() {
     return {
       title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
@@ -25,4 +25,13 @@ export default {
 #app .theme-picker {
   display: none;
 }
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  width: 100%;
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
 </style>
diff --git a/src/api/task/task.js b/src/api/task/task.js
index 318ba9f..a38f9ec 100644
--- a/src/api/task/task.js
+++ b/src/api/task/task.js
@@ -60,4 +60,14 @@ export function findStructureList(tableId) {
   })
 }
 
+//添加节点任务记录
+export function addTaskInput(data) {
+  return request({
+    url: "/task/taskInput/addTaskInput",
+    method: "POST",
+    data:data
+  })
+}
+
+
 
diff --git a/src/assets/img/1.png b/src/assets/img/1.png
new file mode 100644
index 0000000..f135f39
Binary files /dev/null and b/src/assets/img/1.png differ
diff --git a/src/assets/img/2.png b/src/assets/img/2.png
new file mode 100644
index 0000000..3f7b32c
Binary files /dev/null and b/src/assets/img/2.png differ
diff --git a/src/assets/img/3.png b/src/assets/img/3.png
new file mode 100644
index 0000000..04bdaec
Binary files /dev/null and b/src/assets/img/3.png differ
diff --git a/src/assets/img/4.png b/src/assets/img/4.png
new file mode 100644
index 0000000..2f3d483
Binary files /dev/null and b/src/assets/img/4.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 4d9fcc1..5f3357c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,7 +47,7 @@ export const constantRoutes = [
     children: [// 父级路由下面还有子路由
       {
         path: 'index/:id',// 这个index可以自己定义
-        component: () => import('@/views/task/task/easyFlow.vue'),
+        component: () => import('@/views/task/task/antvX6.vue'),
         name: "easyFlow",
         meta: { title: '设计', icon: 'dashboard', activeMenu: '/task/task' }
       }
diff --git a/src/views/task/task/antvX6.vue b/src/views/task/task/antvX6.vue
new file mode 100644
index 0000000..68a443b
--- /dev/null
+++ b/src/views/task/task/antvX6.vue
@@ -0,0 +1,648 @@
+<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"
+             @click="pop(item)"
+             @dragend="handleDragEnd($event, item)">
+          <img :src="item.image" alt="" />
+          <p>{{ item.name }}</p>
+        </div>
+      </div>
+      <div class="canvas-card">
+        <div id="container" />
+      </div>
+    </div>
+    <el-button @click="save()">提交</el-button>
+
+
+
+
+    <!--    添加任务详情设计-->
+    <el-dialog title="添加表" :visible.sync="taskInputAdd">
+
+      <el-form  label-width="80px" :model="tableInfo" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
+        <el-form-item label="任务id">
+          <el-input v-model="tableInfo.id"></el-input>
+        </el-form-item>
+
+                <el-form-item label="数据库id">
+                  <el-input v-model="tableInfo.databaseId"></el-input>
+                </el-form-item>
+<!--        <el-form-item label="数据表">-->
+
+          <div class="block">
+            <span class="demonstration">选择数据表</span>
+            <el-cascader
+              v-model="value"
+              :options="tableList"
+              @change="handleChange(value)"></el-cascader>
+          </div>
+
+<!--          <el-select @change="changeTableName(tableInfo.tableName)" v-model="tableInfo.tableName" placeholder="请选择等级">-->
+<!--            <el-option label="请选择" value="0"></el-option>-->
+<!--            <span v-for="table in tableList">-->
+<!--              <el-option  :label=table.tableName :value=table.id :key=table.id></el-option>-->
+<!--            </span>-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+        <el-form-item label="表别名">
+          <el-input v-model="tableInfo.tableRemark"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="taskInputAdd = false">取 消</el-button>
+        <el-button type="primary" @click="addTaskInput()">下一步</el-button>
+      </div>
+
+    </el-dialog>
+
+
+    <!--    字段选择列表-->
+    <el-dialog title="添加表" :visible.sync="taskInputFieldAdd">
+
+      <el-table
+        :data="structureList"
+        style="width: 100%"
+
+        @selection-change="handleSelectionChange">
+
+
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+
+
+        <el-table-column
+          label="字段"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="注释"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="是否主键"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="字段类型"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnType }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="字段长度"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="小数"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="非空"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.isNull }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="默认值"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="是否字典"
+          width="180">
+          <template slot-scope="scope">
+            <i class="el-icon-time"></i>
+            <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
+          </template>
+        </el-table-column>
+
+                <el-table-column
+                  label="处理规则"
+                  width="180">
+                  <template slot-scope="scope">
+                    <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>
+                    <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>
+                    <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>
+                    <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  label="表别名"
+                  width="180">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.fieldAsEngineId"></el-input>
+                  </template>
+                </el-table-column>
+      </el-table>
+
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelColumn()">取 消</el-button>
+        <el-button type="primary" @click="columnAddGood()">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+  </div>
+</template>
+
+<script>
+
+import { Graph } from "@antv/x6";
+import { findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+
+export default {
+  name: "antvX6",
+  data() {
+    return {
+      taskId:this.$route.params.id,
+      dialogFormVisible:false,
+      //任务设计添加表弹窗
+      taskInputAdd:false,
+      //选择字段弹窗
+      taskInputFieldAdd:false,
+      taskReq:{
+
+      },
+      taskAddReq:{},
+      taskInputReq:{},
+      taskList:[],
+      //级联选择器
+      value:[],
+      tableList:[],
+      structureList:[],
+      tableInfo:{},
+      moduleList: [
+        {
+          id: 1,
+          name: "开始",
+          image: require("@/assets/img/1.png"),
+        },
+        {
+          id: 2,
+          name: "表",
+          image: require("@/assets/img/2.png"),
+        },
+        {
+          id: 3,
+          name: "联查",
+          image: require("@/assets/img/3.png"),
+        },
+        {
+          id: 4,
+          name: "结束",
+          image: require("@/assets/img/4.png"),
+        },
+      ],
+      graph:null,
+      columnList:[],
+      nodeId:0,
+    };
+  },
+  //初始化
+  mounted() {
+    this.initGraph();
+  },
+  methods: {
+    //确定选择的字段
+    columnAddGood(){
+      this.taskInputFieldAdd = false;
+      console.log(this.structureList)
+      const cellById = this.graph.getCellById(this.nodeId)
+      console.log(this.columnList)
+      cellById.setData(this.columnList);
+      console.log(cellById);
+      this.columnList=[];
+      this.structureList=[];
+      this.tableList=[];
+    },
+
+    //级联选择器改变事件
+    handleChange(value) {
+      console.log(value)
+      findStructureList(value[1]).then(res=>{
+        this.structureList = res.data;
+      })
+    },
+
+    //关闭字段信息
+    cancelColumn(){
+      this.taskInputFieldAdd = false;
+      this.columnList=[];
+    },
+
+    //选中字段
+    handleSelectionChange(val) {
+      this.columnList = val;
+    },
+    //弹窗
+    pop(item){
+      console.log(item)
+      if(item.id == 1){
+        this.taskInputAdd = true;
+        this.tableInfoList();
+      }
+    },
+
+    //跳转到任务设计界面
+    toDesign(row){
+      this.$router.push({path:'/easyFlow'});
+    },
+
+    //选择数据表改变数据
+    changeTableName(row){
+      findByTableId(row).then(res=>{
+        this.tableInfo = res.data;
+      })
+    },
+
+
+    //数据结构列表
+    tableInfoList(){
+      tableInfoList().then(res=>{
+        this.tableList = res.data;
+      });
+    },
+
+
+    executeTask(){
+      this.taskInputAdd = true;
+      this.tableInfoList();
+    },
+
+
+    addTaskInput(){
+      this.taskInputAdd = false;
+      if(this.structureList == null){
+        return;
+      }
+      this.taskInputFieldAdd = true;
+    },
+
+
+    //保存画布，并提交
+    save() {
+      console.log(this.graph.toJSON(), "graph");
+      console.log(this.graph.getNodes(), "node");
+    },
+
+
+    // 拖动后松开鼠标触发事件
+    handleDragEnd(e, item) {
+      console.log(e, item); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
+      this.addHandleNode(
+        e.pageX - 500,
+        e.pageY - 200,
+        new Date().getTime(),
+        item.image,
+        item.name
+      );
+    },
+
+    nodeAddEvent() {
+      const { graph } = this;
+      const container = document.getElementById("container");
+      const changePortsVisible = (visible) => {
+        const ports = container.querySelectorAll(".x6-port-body");
+        for (let i = 0, len = ports.length; i < len; i = i + 1) {
+          ports[i].style.visibility = visible ? "visible" : "hidden";
+        }
+      };
+      this.graph.on("node:mouseenter", () => {
+        changePortsVisible(true);
+      });
+      this.graph.on("node:mouseleave", () => {
+        changePortsVisible(false);
+      });
+
+      // 节点绑定点击事件
+      this.graph.on("node:click", ({ e, x, y, node, view }) => {
+        console.log("点击！！！", node);
+        // 判断是否有选中过节点
+        if (this.curSelectNode) {
+          // 移除选中状态
+          this.curSelectNode.removeTools();
+          // 判断两次选中节点是否相同
+          if (this.curSelectNode !== node) {
+            node.addTools([
+              {
+                name: "boundary",
+                args: {
+                  attrs: {
+                    fill: "#16B8AA",
+                    stroke: "#2F80EB",
+                    strokeWidth: 1,
+                    fillOpacity: 0.1,
+                  },
+                },
+              },
+              {
+                name: "button-remove",
+                args: {
+                  x: "100%",
+                  y: 0,
+                  offset: {
+                    x: 0,
+                    y: 0,
+                  },
+                },
+              },
+            ]);
+            this.curSelectNode = node;
+          } else {
+            this.curSelectNode = null;
+          }
+        } else {
+          this.curSelectNode = node;
+          node.addTools([
+            {
+              name: "boundary",
+              args: {
+                attrs: {
+                  fill: "#16B8AA",
+                  stroke: "#2F80EB",
+                  strokeWidth: 1,
+                  fillOpacity: 0.1,
+                },
+              },
+            },
+            {
+              name: "button-remove",
+              args: {
+                x: "100%",
+                y: 0,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+            },
+          ]);
+        }
+      });
+
+      //右击事件
+      this.graph.on("node:contextmenu",(evt)=>{
+        const data = evt.node.store.data;
+          if (data.name=="表"){
+            alert("a")
+          }
+        alert("b")
+        this.executeTask();
+        // var id = node.id;
+      });
+
+      // 连线绑定悬浮事件
+      this.graph.on("cell:mouseenter", ({ cell }) => {
+        if (cell.shape == "edge") {
+          cell.addTools([
+            {
+              name: "button-remove",
+              args: {
+                x: "100%",
+                y: 0,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+            },
+          ]);
+          cell.setAttrs({
+            line: {
+              stroke: "#409EFF",
+            },
+          });
+          cell.zIndex = 99; // 保证当前悬停的线在最上层，不会被遮挡
+        }
+      });
+      this.graph.on("cell:mouseleave", ({ cell }) => {
+        if (cell.shape === "edge") {
+          cell.removeTools();
+          cell.setAttrs({
+            line: {
+              stroke: "black",
+            },
+          });
+          cell.zIndex = 1; // 保证未悬停的线在下层，不会遮挡悬停的线
+        }
+      });
+    },
+
+    //添加节点到画布
+    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,
+        data:null,
+      });
+    },
+
+    //初始化
+    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, // 网格线宽度/网格点大小
+          },
+        },
+      });
+      this.nodeAddEvent();
+    },
+  },
+
+};
+</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>
diff --git a/src/views/task/task/index.vue b/src/views/task/task/index.vue
index 4eccf29..88a0afd 100644
--- a/src/views/task/task/index.vue
+++ b/src/views/task/task/index.vue
@@ -399,7 +399,7 @@ export default {
   methods: {
     //跳转到任务设计界面
     toDesign(row){
-      this.$router.push({path:'/easyFlow'});
+      this.$router.push({path:'/easyFlow/index/:'+row.id});
     },
 
     //选择数据表改变数据