Merge pull request 'dev' (#2) from dev into master

Reviewed-on: #2

package.json

@@ -12,7 +12,6 @@
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src"
   },
-
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -38,6 +37,7 @@
     "url": "https://gitee.com/y_project/MuYu-Cloud.git"
   },
   "dependencies": {
+    "@antv/x6": "^2.18.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
@@ -50,19 +50,19 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "lodash": "4.17.15",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0",
+    "vuex": "3.6.0"
-    "lodash": "4.17.15",
-    "vue-codemirror": "^4.0.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/api/etl/etl.js

@@ -1,17 +1,18 @@
 import request from "@/utils/request";
 
-export function showTask() {
+export function showTask(params) {
   return request({
     url: '/integration/task/selectAll',
     method: 'get',
+    params
   })
 }
 
-export function addTask(params) {
+export function addTask(data) {
   return request({
     url: '/integration/task/addTask',
     method: 'post',
-    params
+    data
   })
 }
 

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/index.vue

@@ -1,6 +1,28 @@
 <template>
   <div>
     <h1 style="color: #00afff" align="center">发布任务</h1>
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="任务名称">
+        <el-input v-model="formInline.name" placeholder="请输入任务名称"></el-input>
+      </el-form-item>
+      <el-form-item label="任务权重">
+        <el-select v-model="formInline.weight" placeholder="任务权重">
+          <el-option label="紧急" value="1"></el-option>
+          <el-option label="正常" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="任务执行状态">
+        <el-select v-model="formInline.processStatus" placeholder="任务执行状态">
+          <el-option label="待执行" value="1"></el-option>
+          <el-option label="已就绪" value="2"></el-option>
+          <el-option label="执行中" value="3"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
     <el-table :data="tableData" style="width: 100%">
       <el-table-column label="编号" width="180">
         <template slot-scope="scope">
@@ -14,7 +36,8 @@
       </el-table-column>
       <el-table-column label="任务权重级别" width="180">
         <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.weight }}</span>
+          <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">
@@ -58,7 +81,8 @@
         <template slot-scope="scope">
           <el-button
               size="mini"
-              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              @click="handleEdit(scope.$index, scope.row)">编辑节点</el-button>
+          <br>
           <el-button
               size="mini"
               type="danger"
@@ -78,12 +102,12 @@
           <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="formLabelAlign">
+        <el-form :label-position="labelPosition" label-width="80px" :model="task">
           <el-form-item label="任务名称">
-            <el-input v-model="formLabelAlign.name"></el-input>
+            <el-input v-model="task.name"></el-input>
           </el-form-item>
           <el-form-item label="任务权重">
-            <el-input v-model="formLabelAlign.weight"></el-input>
+            <el-input v-model="task.weight"></el-input>
           </el-form-item>
         </el-form>
           <span slot="footer" class="dialog-footer">
@@ -108,10 +132,14 @@ export default {
     //这里存放数据"
 
     return {
-      formLabelAlign:{},
+      formInline:{
+        name : "",
+        weight : "",
+        processStatus : ""
+      },
+      task:{},
       labelPosition: 'right',
       tableData:[],
-      task:{},
       dialogVisible: false
     };
   },
@@ -121,6 +149,9 @@ export default {
   watch: {},
   //方法集合",
   methods: {
+    onSubmit(){
+       this.getData()
+    },
     toAdd(){
        this.dialogVisible = true
     },
@@ -136,12 +167,13 @@ export default {
       })
     },
     getData(){
-       showTask().then(res => {
+       showTask(this.formInline).then(res => {
          this.tableData = res.data
        })
     },
     handleEdit(index, row) {
-      console.log(index, row);
+        let url = `http://21.12.0.10/easyFlow`
+       window.open(url,"_blank")
     },
     handleDelete(index, row) {
       console.log(index, row);

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/prod-api`,
+        target: `http://21.12.0.10/prod-api/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''