src/api/etl/etl.js

@@ -31,4 +31,11 @@ export function updTask(params) {
   })
 }
 
+export function extractDataName() {
+  return request({
+    url: '/integration/task/extractDataName',
+    method: 'post',
+  })
+}
+
 

src/router/index.js

@@ -45,7 +45,11 @@ 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/index.vue

@@ -24,65 +24,65 @@
       </el-form-item>
     </el-form>
     <el-table :data="tableData" style="width: 100%">
-      <el-table-column label="编号" width="180">
+      <el-table-column label="编号" width="50">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="任务名称" width="180">
+      <el-table-column label="任务名称" width="120">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="任务权重级别" width="180">
+      <el-table-column label="任务权重级别" width="120">
         <template slot-scope="scope">
           <span style="margin-left: 10px" v-if="scope.row.weight == 1">紧急</span>
           <span style="margin-left: 10px" v-if="scope.row.weight == 2">正常</span>
         </template>
       </el-table-column>
-      <el-table-column label="任务执行状态" width="180">
+      <el-table-column label="任务执行状态" width="120">
         <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.processTotal }}</span>
+          <span style="margin-left: 10px">{{ scope.row.processStatus }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="最终执行结果" width="180">
+      <el-table-column label="最终执行结果" width="120">
         <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.status }}</span>
+          <span style="margin-left: 10px" v-if="scope.row.status == 1">有错误</span>
+          <span style="margin-left: 10px" v-if="scope.row.status == 0">无错误</span>
         </template>
       </el-table-column>
-      <el-table-column label="总处理条数" width="180">
+      <el-table-column label="总处理条数" width="120">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.total }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建人" width="180">
+      <el-table-column label="创建人" width="60">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.createBy }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" width="180">
+      <el-table-column label="创建时间" width="150">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="修改人" width="180">
+      <el-table-column label="修改人" width="60">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.updateBy }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="修改时间" width="180">
+      <el-table-column label="修改时间" width="150">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
         </template>
       </el-table-column>
 
 
-      <el-table-column label="操作">
+      <el-table-column label="操作" width="300">
         <template slot-scope="scope">
           <el-button
               size="mini"
               @click="handleEdit(scope.$index, scope.row)">编辑节点</el-button>
-          <br>
           <el-button
               size="mini"
               type="danger"

src/views/etl/task/taskInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="dashboard-container">
+    <el-button @click="saveActive" icon="el-icon-position" style="margin-right: 20px;float :right">保存</el-button>
     <p>选择节点</p>
     <div class="antvBox">
       <div class="menu-list">
@@ -14,29 +15,71 @@
         <div id="container" />
       </div>
     </div>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      >
+      <span>
+          <el-radio-group v-model="labelPosition" size="small">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+          <el-radio-button label="top">顶部对齐</el-radio-button>
+        </el-radio-group>
+        <div style="margin: 20px;"></div>
+        <el-form :label-position="labelPosition" label-width="80px" :model="tableMsg">
+          <el-form-item label="任务id">
+            <el-input v-model="tableMsg.id" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item label="数据库id">
+            <el-input v-model="tableMsg.databaseId" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item label="数据表">
+                  <el-cascader
+                    v-model="tableMsg.tableName"
+                    :options="tables"
+                    :props="{ expandTrigger: 'hover',value:'name',label:'name',children:'tableNames' }"
+                    @change="handleChange"></el-cascader>
+          </el-form-item>
+          <el-form-item label="表别名">
+            <el-input v-model="tableMsg.tableAsField"></el-input>
+          </el-form-item>
+        </el-form>
+      </span>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { Graph } from "@antv/x6";
+import {extractDataName} from "../../../api/etl/etl";
 export default {
   name: "antvX6",
   data() {
     return {
+      tables:{},
+      tableMsg:{},
+      labelPosition: 'right',
+      dialogVisible:false,
+      curSelectNode: "",
       moduleList: [
         {
           id: 1,
-          name: "节点1",
+          name: "表1",
           image: require("@/assets/img/1.png"),
         },
         {
           id: 8,
-          name: "节点2",
+          name: "表2",
           image: require("@/assets/img/2.png"),
         },
         {
           id: 2,
-          name: "节点3",
+          name: "联查",
           image: require("@/assets/img/3.png"),
         },
         {
@@ -49,9 +92,139 @@ export default {
     };
   },
   methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+    getDatabaseMessage(){
+        this.dialogVisible = true
+        extractDataName().then(response => {
+            this.tables = response.data
+        })
+    },
+    //todo 鼠标划过节点在显示连接桩
+    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:dblclick",() =>{
+          this.getDatabaseMessage()
+      })
+      //todo 节点绑定点击事件
+      this.graph.on("node:click", ({ e, x, y, node, view }) => {
+
+        // 判断是否有选中过节点
+        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,
+                },
+              },
+            },
+          ]);
+        }
+      });
+
+      //todo 连线绑定悬浮事件
+      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; // 保证未悬停的线在下层，不会遮挡悬停的线
+        }
+      });
+    },
     // 拖动后松开鼠标触发事件
     handleDragEnd(e, item) {
-      console.log(e, item); // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
+      // 可以获取到最后拖动后松开鼠标时的坐标和拖动的节点相关信息
       this.addHandleNode(
         e.pageX - 500,
         e.pageY - 200,
@@ -118,6 +291,7 @@ export default {
           },
         },
       });
+      this.nodeAddEvent()
     },
     //添加节点到画布
     addHandleNode(x, y, id, image, name) {
@@ -173,6 +347,11 @@ export default {
         zIndex: 10,
       });
     },
+    //todo 保存画布，并提交
+    saveActive() {
+      console.log(this.graph.toJSON(), "graph");
+      console.log(this.graph.getNodes(), "node");
+    },
   },
   //生命周期 - 挂载完成（可以访问DOM元素）",
   mounted() {