From 44decb5d80ed18216e535ba1b9601d1d775a71a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=80=9D=E8=B1=AA?= <1437200870@qq.com>
Date: Sat, 31 Aug 2024 19:31:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=EF=BC=9A=E5=89=8D=E5=8F=B0?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E8=AE=BE=E8=AE=A1=E9=9B=8F=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/task/task.js                   |   8 +
 src/assets/svg/1开始.svg               |   1 -
 src/views/components/task/formData.vue | 317 +++++++++++
 src/views/task/task/antvX6.vue         | 351 +++---------
 src/views/task/task/antvX6FU.vue       | 733 +++++++++++++++++++++++++
 5 files changed, 1141 insertions(+), 269 deletions(-)
 delete mode 100644 src/assets/svg/1开始.svg
 create mode 100644 src/views/components/task/formData.vue
 create mode 100644 src/views/task/task/antvX6FU.vue

diff --git a/src/api/task/task.js b/src/api/task/task.js
index a38f9ec..6af774c 100644
--- a/src/api/task/task.js
+++ b/src/api/task/task.js
@@ -69,5 +69,13 @@ export function addTaskInput(data) {
   })
 }
 
+//根据节点id查询信息
+export function findByNodeId(nodeId) {
+  return request({
+    url: "/task/taskInput/findByNodeId/"+nodeId,
+    method: "get",
+  })
+}
+
 
 
diff --git a/src/assets/svg/1开始.svg b/src/assets/svg/1开始.svg
deleted file mode 100644
index 11791d5..0000000
--- a/src/assets/svg/1开始.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><defs><style>.cls-1{fill:#d8f4e9;}.cls-2{fill:#3ec791;}.cls-3{opacity:0;}.cls-4,.cls-5{fill:none;stroke:#092370;stroke-miterlimit:10;}.cls-5{stroke-width:0.83px;}</style></defs><title>1.开始</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" x="44.97" y="55.64" width="111.13" height="91.88" rx="0.87" ry="0.87"/><polygon class="cls-2" points="85.38 78 85.38 125.16 125.79 101.58 85.38 78"/><g class="cls-3"><path class="cls-4" d="M100.5.5h0a100,100,0,0,1,100,100h0a100,100,0,0,1-100,100h0a100,100,0,0,1-100-100h0A100,100,0,0,1,100.5.5Z"/><rect class="cls-4" x="33.83" y="33.83" width="133.33" height="133.33"/><rect class="cls-5" x="44.93" y="44.93" width="111.13" height="111.13"/></g></g></g></svg>
diff --git a/src/views/components/task/formData.vue b/src/views/components/task/formData.vue
new file mode 100644
index 0000000..117a4c1
--- /dev/null
+++ b/src/views/components/task/formData.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <!--    添加任务详情设计-->
+    <span v-if="taskInputForm">
+      <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.taskId" readonly></el-input>
+        </el-form-item>
+
+        <el-form-item label="数据库id">
+          <el-input v-model="tableInfo.databaseId" readonly></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select  v-model="tableInfo.tableName" placeholder="请选择数据库">
+            <el-option style="height: 100%" :value="tableInfo.tableName">
+              <el-aside width="100%">
+                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+              </el-aside>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="表别名">
+          <el-input v-model="tableInfo.tableAsName"></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>
+    </span>
+
+<!--    所选表内的字段信息-->
+    <span v-if="taskInputTable">
+      <el-table
+        ref="multipleTable"
+        :data="tableInfo.structureList"
+        style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="100%"></el-table-column>
+
+
+        <el-table-column label="字段" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="注释" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnRemark }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="是否主键" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.isPrimary }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="字段类型" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnType }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="字段长度" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnLength }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="小数" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.columnDecimals }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="非空" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.isNull }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="默认值" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.defaultValue }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="是否字典" width="100">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.isDictionary }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="处理规则" width="100">
+          <template slot-scope="scope">
+            <el-select v-model="taskInputReq.fieldAsEngineId" multiple placeholder="请选择">
+              <el-option value="">请选择</el-option>
+              <el-option
+                v-for="engine in engineList"
+                :key="engine.id"
+                :label="engine.name"
+                :value="engine.id">
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="表别名"
+          width="100">
+          <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>
+    </span>
+
+<!--    联查模块表单-->
+    <span v-if="taskInputJoin">
+      <el-form  label-width="80px" :model="joinSelect" ref="queryForm"  :inline="true" class="demo-form-inline" size="small">
+        <el-form-item label="联查方式">
+           <el-select  v-model="tableInfo.tableName" placeholder="请选择">
+              <el-option style="height: 100%" label="左联查" value="1"/>
+              <el-option style="height: 100%" label="右联查" value="2"/>
+              <el-option style="height: 100%" label="内联查" value="3"/>
+           </el-select>
+        </el-form-item>
+
+        <el-form-item label="关联字段">
+           <el-select  v-model="tableInfo.tableName" placeholder="请选择">
+              <el-option style="height: 100%" label="内联查" value="3"/>
+           </el-select>
+        </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>
+    </span>
+  </div>
+</template>
+
+<script>
+import { addTaskInput, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
+import { selectEngineList } from '@/api/engine/engine'
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+export default {
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props:['graph','nodeId','taskInputForm','tableInfo'],
+  data() {
+    //这里存放数据"
+
+    return {
+
+      taskInputJoin:false,
+      dialogFormVisible:true,
+      //任务设计添加表弹窗
+      taskInputAdd:false,
+      taskInputForm:true,
+      //选择字段弹窗
+      taskInputFieldAdd:false,
+      taskInputTable:false,
+      taskReq:{
+
+      },
+      joinSelect:{},
+      taskAddReq:{},
+      taskInputReq:{},
+      engineReq:{
+        pageNum: 1,
+        pageSize: 100
+      },
+      taskList:[],
+      //级联选择器
+      value:[],
+
+      engineList:[],
+
+      //树状图
+      data:[],
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+
+      tableList:[],
+      columnList:[],
+      structureList:[],
+      tableInfo:{
+        taskId:this.$route.params.id,
+      },
+      itemId:0,
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    //规则引擎下拉框
+    selectEngineList(){
+      selectEngineList(this.engineReq).then(res=>{
+        this.engineList = res.data.list;
+        console.log(this.engineList);
+      })
+    },
+
+    //关闭字段信息
+    cancelColumn(){
+      this.taskInputTable = false;
+      this.taskInputForm = true;
+
+    },
+
+    //确定选择的字段
+    columnAddGood(){
+      this.taskInputTable = false;
+      this.tableInfo.tableField = JSON.stringify(this.tableInfo.columnList)
+      this.tableInfo.tableAsField = "[{name:'aa',sex:'as'}]";
+      this.tableInfo.fieldAsEngineId = "[{1,3,4},{1,2,3}]";
+      this.$emit('taskInputForm', false);
+      addTaskInput({
+          "nodeId":this.nodeId,
+          "nodeName":this.nodeName,
+          "taskId":this.tableInfo.taskId,
+          "databaseId":this.tableInfo.parentId,
+          "tableName":this.tableInfo.tableName,
+          "tableAsName":this.tableInfo.tableAsName,
+          "tableField":this.tableInfo.tableField,
+          "tableAsField":this.tableInfo.tableAsField,
+          "fieldAsEngineId":this.tableInfo.fieldAsEngineId
+        }).then(res=>{
+          alert(res.msg);
+      })
+    },
+
+    //选择完下拉框的表后点击下一步
+    addTaskInput(){
+      this.taskInputForm = false;
+      this.selectEngineList();
+      this.taskInputTable = true;
+    },
+
+    //选中需要的字段后将需要的值赋在tableInfo中
+    handleSelectionChange(val) {
+      if(val.length<=0){
+        val = this.tableInfo.columnList;
+        return;
+      }
+      this.tableInfo.columnList = val;
+      console.log(this.tableInfo.columnList );
+    },
+
+    //根据树状下拉的选择赋值字段信息
+    handleNodeClick(data) {
+      this.tableInfo = data;
+      findStructureByTableId(data.id).then((res)=>{
+        this.tableInfo.structureList=res.data;
+      })
+      this.tableInfo.taskId = this.$route.params.id;
+      const cellById = this.graph.getCellById(this.nodeId)
+      cellById.setData(this.tableInfo);
+    },
+
+    //弹出选择表界面给树状下拉框赋值
+    findTAbleInfoList(){
+      findTableInfoList().then(res=>{
+        this.data=res.data;
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.findTAbleInfoList();
+    this.tableInfo.taskId = this.$route.params.id;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/task/task/antvX6.vue b/src/views/task/task/antvX6.vue
index 68a443b..9c71c1d 100644
--- a/src/views/task/task/antvX6.vue
+++ b/src/views/task/task/antvX6.vue
@@ -6,7 +6,6 @@
         <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>
@@ -19,171 +18,9 @@
     <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 title="添加表" :visible.sync="taskInputForm" width="70%">
+        <formData v-if="this.formData" :group="graph" :node-id="nodeId" :taskInputForm="taskInputForm" :tableInfo="tableInfo" @taskInputForm="findFormValue"></formData>
     </el-dialog>
 
 
@@ -193,13 +30,18 @@
 <script>
 
 import { Graph } from "@antv/x6";
-import { findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+import { addTaskInput, findByNodeId, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
+import { selectEngineList } from '@/api/engine/engine'
+import  formData from '/src/views/components/task/formData.vue'
 
 export default {
   name: "antvX6",
+  components:{
+    formData
+  },
   data() {
     return {
-      taskId:this.$route.params.id,
       dialogFormVisible:false,
       //任务设计添加表弹窗
       taskInputAdd:false,
@@ -210,37 +52,65 @@ export default {
       },
       taskAddReq:{},
       taskInputReq:{},
+      engineReq:{
+        pageNum: 1,
+        pageSize: 100
+    },
       taskList:[],
       //级联选择器
       value:[],
+
+      engineList:[],
+
+      //树状图
+      data:[],
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+
       tableList:[],
+      columnList:[],
       structureList:[],
-      tableInfo:{},
+      tableInfo:{
+        taskId:this.$route.params.id,
+      },
+      itemId:0,
       moduleList: [
         {
           id: 1,
           name: "开始",
           image: require("@/assets/img/1.png"),
+          data:{}
         },
         {
           id: 2,
           name: "表",
           image: require("@/assets/img/2.png"),
+          data:{
+            databaseId:null,
+            tableName:null,
+            zd:null,
+          }
         },
         {
           id: 3,
           name: "联查",
           image: require("@/assets/img/3.png"),
+          data:{}
         },
         {
           id: 4,
           name: "结束",
           image: require("@/assets/img/4.png"),
+          data:{}
         },
       ],
       graph:null,
-      columnList:[],
-      nodeId:0,
+      nodeId:null,
+      nodeName:null,
+      taskInputForm:false,
+      formData:false,
     };
   },
   //初始化
@@ -248,82 +118,11 @@ export default {
     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=[];
+    findFormValue(){
+      this.formData=false;
+      this.taskInputForm=false;
     },
 
-    //级联选择器改变事件
-    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");
@@ -331,18 +130,6 @@ export default {
     },
 
 
-    // 拖动后松开鼠标触发事件
-    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");
@@ -352,6 +139,24 @@ export default {
           ports[i].style.visibility = visible ? "visible" : "hidden";
         }
       };
+
+      //左键单击事件
+      this.graph.on("node:click",(evt)=>{
+        const data = evt.node.store.data;
+        const thisData = data.attrs.label.textWrap.text;
+        if(thisData == "表"){
+          this.nodeId = data.id;
+          findByNodeId(this.nodeId).then(res=>{
+            if(res.code == 200){
+              this.tableInfo = res.data;
+            }
+          })
+          //TODO man
+          this.taskInputForm = true;
+          this.formData = true;
+        }
+      });
+
       this.graph.on("node:mouseenter", () => {
         changePortsVisible(true);
       });
@@ -359,8 +164,8 @@ export default {
         changePortsVisible(false);
       });
 
-      // 节点绑定点击事件
-      this.graph.on("node:click", ({ e, x, y, node, view }) => {
+      // 节点绑定右键点击事件
+      this.graph.on("node:contextmenu", ({ e, x, y, node, view }) => {
         console.log("点击！！！", node);
         // 判断是否有选中过节点
         if (this.curSelectNode) {
@@ -425,15 +230,11 @@ export default {
         }
       });
 
-      //右击事件
-      this.graph.on("node:contextmenu",(evt)=>{
+      //双击事件
+      this.graph.on('node:dblclick', (evt) => {
         const data = evt.node.store.data;
-          if (data.name=="表"){
-            alert("a")
-          }
-        alert("b")
-        this.executeTask();
-        // var id = node.id;
+        console.log(data);
+        // this.showNodeForm(data);
       });
 
       // 连线绑定悬浮事件
@@ -473,8 +274,22 @@ export default {
       });
     },
 
+
+    // 拖动后松开鼠标触发事件
+    handleDragEnd(e, item) {
+      // console.log(e); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
+      this.addHandleNode(
+        e.pageX - 500,
+        e.pageY - 200,
+        new Date().getTime(),
+        item.image,
+        item.name,
+        item.data
+      );
+    },
+
     //添加节点到画布
-    addHandleNode(x, y, id, image, name ) {
+    addHandleNode(x, y, id, image, name ,data) {
       this.graph.addNode({
         id: id,
         shape: "image", // 指定使用何种图形，默认值为 'rect'
@@ -525,7 +340,7 @@ export default {
           ],
         },
         zIndex: 10,
-        data:null,
+        data:data,
       });
     },
 
diff --git a/src/views/task/task/antvX6FU.vue b/src/views/task/task/antvX6FU.vue
new file mode 100644
index 0000000..44d70b3
--- /dev/null
+++ b/src/views/task/task/antvX6FU.vue
@@ -0,0 +1,733 @@
+<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>
+    <el-button @click="save()">提交</el-button>
+
+
+
+
+
+
+
+    <!--    添加任务详情设计-->
+    <el-dialog title="添加表" :visible.sync="taskInputForm" width="70%">
+        <formData v-if="this.formData" :group="graph" :node-id="nodeId" :formData="taskInputForm" @taskInputAdd="taskInputAdd"></formData>
+    </el-dialog>
+
+<!--      <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.taskId"></el-input>-->
+<!--        </el-form-item>-->
+
+<!--                <el-form-item label="数据库id">-->
+<!--                  <el-input v-model="tableInfo.basicId"></el-input>-->
+<!--                </el-form-item>-->
+<!--&lt;!&ndash;        <el-form-item label="数据表">&ndash;&gt;-->
+
+<!--&lt;!&ndash;          <div class="block">&ndash;&gt;-->
+<!--&lt;!&ndash;            <span class="demonstration">选择数据表</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <el-cascader&ndash;&gt;-->
+<!--&lt;!&ndash;              v-model="value"&ndash;&gt;-->
+<!--&lt;!&ndash;              :options="tableList"&ndash;&gt;-->
+<!--&lt;!&ndash;              @change="handleChange(value)"></el-cascader>&ndash;&gt;-->
+<!--&lt;!&ndash;          </div>&ndash;&gt;-->
+
+<!--&lt;!&ndash;    <el-aside width="30%">-->
+<!--        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
+<!--      </el-aside>&ndash;&gt;-->
+<!--        <el-form-item>-->
+<!--          <el-select  v-model="tableInfo.tableName" placeholder="请选择等级">-->
+<!--            <el-option style="height: 100%" :value="tableInfo.tableName">-->
+<!--              <el-aside width="100%">-->
+<!--                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
+<!--              </el-aside>-->
+<!--            </el-option>-->
+
+<!--&lt;!&ndash;            <el-option label="请选择" value="0"></el-option>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span v-for="table in tableList">&ndash;&gt;-->
+<!--&lt;!&ndash;              <el-option  :label=table.tableName :value=table.id :key=table.id></el-option>&ndash;&gt;-->
+<!--&lt;!&ndash;            </span>&ndash;&gt;-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="表别名">-->
+<!--          <el-input v-model="tableInfo.tableAsName"></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>-->
+
+
+<!--    &lt;!&ndash;    字段选择列表&ndash;&gt;-->
+<!--    <el-dialog title="添加表" :visible.sync="taskInputFieldAdd">-->
+
+<!--      <el-table-->
+<!--        :data="tableInfo.structureList"-->
+<!--        style="width: 100%"-->
+
+<!--        @selection-change="handleSelectionChange">-->
+
+
+<!--        <el-table-column-->
+<!--          type="selection"-->
+<!--          width="100%">-->
+<!--        </el-table-column>-->
+
+
+<!--        <el-table-column-->
+<!--          label="字段"-->
+<!--          width="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <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="100">-->
+<!--          <template slot-scope="scope">-->
+
+<!--            <el-select v-model="tableInfo.fieldAsEngineId" multiple placeholder="请选择">-->
+<!--              <el-option value="">请选择</el-option>-->
+<!--              <el-option-->
+<!--                v-for="engine in engineList"-->
+<!--                :key="engine.id"-->
+<!--                :label="engine.name"-->
+<!--                :value="engine.id">-->
+<!--              </el-option>-->
+<!--            </el-select>-->
+
+
+
+
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==1 ">非空规则</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==2 ">aa规则</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==3 ">我啊规则</span>&ndash;&gt;-->
+<!--&lt;!&ndash;            <span style="margin-left: 10px" v-if="scope.row.weigh ==4 ">收到规则</span>&ndash;&gt;-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+
+<!--                <el-table-column-->
+<!--                  label="表别名"-->
+<!--                  width="100">-->
+<!--                  <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>-->
+<!--    <formData>-->
+
+<!--    </formData>-->
+
+
+  </div>
+</template>
+
+<script>
+
+import { Graph } from "@antv/x6";
+import { addTaskInput, findByTableId, findStructureList, tableInfoList } from '@/api/task/task'
+import { findStructureByTableId, findTableInfoList } from '@/api/etl/switch'
+import { selectEngineList } from '@/api/engine/engine'
+import  formData from '/src/views/components/task/formData.vue'
+
+export default {
+  name: "antvX6",
+  components:{
+    formData
+  },
+  data() {
+    return {
+      dialogFormVisible:false,
+      //任务设计添加表弹窗
+      taskInputAdd:false,
+      formData:null,
+      //选择字段弹窗
+      taskInputFieldAdd:false,
+      taskReq:{
+
+      },
+      taskAddReq:{},
+      taskInputReq:{},
+      engineReq:{
+        pageNum: 1,
+        pageSize: 100
+    },
+      taskList:[],
+      //级联选择器
+      value:[],
+
+      engineList:[],
+
+      //树状图
+      data:[],
+      defaultProps:{
+        children:"children",
+        label:'tableName'
+      },
+
+      tableList:[],
+      columnList:[],
+      structureList:[],
+      tableInfo:{
+        taskId:this.$route.params.taskId,
+      },
+      itemId:0,
+      moduleList: [
+        {
+          id: 1,
+          name: "开始",
+          image: require("@/assets/img/1.png"),
+          data:{}
+        },
+        {
+          id: 2,
+          name: "表",
+          image: require("@/assets/img/2.png"),
+          data:{
+            databaseId:null,
+            tableName:null,
+            zd:null,
+          }
+        },
+        {
+          id: 3,
+          name: "联查",
+          image: require("@/assets/img/3.png"),
+          data:{}
+        },
+        {
+          id: 4,
+          name: "结束",
+          image: require("@/assets/img/4.png"),
+          data:{}
+        },
+      ],
+      graph:null,
+      nodeId:null,
+      nodeName:null,
+      taskInputForm:false,
+    };
+  },
+  //初始化
+  created() {
+    alert(this.$route.params.taskId);
+  },
+  mounted() {
+    this.initGraph();
+  },
+  methods: {
+    taskInputForm(data){
+      this.formData=data;
+      this.taskInputForm=data;
+    },
+
+
+    // //规则引擎下拉框
+    // selectEngineList(){
+    //   selectEngineList(this.engineReq).then(res=>{
+    //     this.engineList = res.data.list;
+    //     console.log(this.engineList);
+    //   })
+    // },
+    //
+    // //根据树状下拉的选择赋值字段信息
+    // handleNodeClick(data) {
+    //   this.tableInfo = data;
+    //   findStructureByTableId(data.id).then((res)=>{
+    //     this.tableInfo.structureList=res.data;
+    //   })
+    //   const cellById = this.graph.getCellById(this.nodeId)
+    //   cellById.setData(this.tableInfo);
+    // },
+    //
+    // //弹出选择表界面给树状下拉框赋值
+    // findTAbleInfoList(){
+    //   findTableInfoList().then(res=>{
+    //     this.data=res.data;
+    //   })
+    // },
+    //
+    // //确定选择的字段
+    // columnAddGood(){
+    //   this.taskInputFieldAdd = false;
+    //   const cellById = this.graph.getCellById(this.nodeId);
+    //   this.tableInfo.tableField = JSON.stringify(this.tableInfo.columnList);
+    //   console.log(this.tableInfo.tableField);
+    //   this.tableInfo.fieldAsEngineId = "1,2,3";
+    //   this.tableInfo.nodeId = this.nodeId;
+    //   cellById.setData(this.tableInfo);
+    //   addTaskInput(this.tableInfo).then(res=>{
+    //     alert("11")
+    //     alert(res.msg);
+    //     // console.log(this.tableInfo.fieldAsEngineId)
+    //   });
+    // },
+    //
+    // //关闭字段信息
+    // cancelColumn(){
+    //   this.taskInputFieldAdd = false;
+    // },
+    //
+    // //选中字段
+    // handleSelectionChange(val) {
+    //   if(val.length<=0){
+    //     val = this.tableInfo.columnList;
+    //     return;
+    //   }
+    //   this.tableInfo.columnList = val;
+    //   console.log(this.tableInfo.columnList );
+    // },
+    //
+    // //跳转到任务设计界面
+    // toDesign(row){
+    //   this.$router.push({path:'/easyFlow'});
+    // },
+    //
+    //
+    // //打开选择数据表弹窗
+    // executeTask(){
+    //   this.findTAbleInfoList();
+    //   this.taskInputAdd = true;
+    // },
+    //
+    // //选择完下拉框的表后的下一步
+    // addTaskInput(){
+    //   this.taskInputAdd = false;
+    //   this.selectEngineList();
+    //   this.taskInputFieldAdd = true;
+    // },
+
+    //保存画布，并提交
+    save() {
+      console.log(this.graph.toJSON(), "graph");
+      console.log(this.graph.getNodes(), "node");
+    },
+
+
+    // 拖动后松开鼠标触发事件
+    handleDragEnd(e, item) {
+      // console.log(e); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
+      this.addHandleNode(
+        e.pageX - 500,
+        e.pageY - 200,
+        new Date().getTime(),
+        item.image,
+        item.name,
+        item.data
+      );
+    },
+
+    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:contextmenu", ({ 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:click",(evt)=>{
+        const data = evt.node.store.data;
+        const thisData = data.attrs.label.textWrap.text;
+        if(thisData == "表"){
+          this.nodeId = data.id;
+          const node = this.graph.getCellById(this.nodeId);
+          var data1 = node.getData();
+          this.tableInfo = data1;
+          console.log(this.tableInfo);
+          this.taskInputForm = true;
+          this.executeTask();
+        }
+      });
+
+      //双击事件
+      this.graph.on('node:dblclick', (evt) => {
+        const data = evt.node.store.data;
+        console.log(data);
+        // this.showNodeForm(data);
+      });
+
+      // 连线绑定悬浮事件
+      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 ,data) {
+      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:data,
+      });
+    },
+
+    //初始化
+    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>