TreeData
/
cloud-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

测试：前台任务设计雏形

master
陈思豪 2024-08-31 19:31:20 +08:00
parent 5d9df94177
commit 44decb5d80
5 changed files with 1141 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/task/task.js
View File

@ -69,5 +69,13 @@ export function addTaskInput(data) {
})
}
//根据节点id查询信息
export function findByNodeId(nodeId) {
return request({
url: "/task/taskInput/findByNodeId/"+nodeId,
method: "get",
})
}

1
src/assets/svg/1开始.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 820 B

317
src/views/components/task/formData.vue 100644
View File

@ -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>

351
src/views/task/task/antvX6.vue
View File

@ -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,
});
},

733
src/views/task/task/antvX6FU.vue 100644
View File

@ -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>