Skip to content

E
ETL-admin
Commit 36ad693a by 莫晓莉
Options

画布

parent 069bceae
Showing with 554 additions and 0 deletions
src/views/dashboard-kettle/components/designer/config/mixins.js 0 → 100644
export const easyFlowMixin = {
data() {
return {
jsplumbSetting: {
// 动态锚点、位置自适应
Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
// 容器ID
Container: 'efContainer',
// 连线的样式，直线或者曲线等，可选值: StateMachine、Flowchart，Bezier、Straight
Connector: ['Bezier', {
gap: 5,
cornerRadius: 8,
alwaysRespectStubs: true,
curviness: 63
}],
// Connector: ['Straight', {stub: 20, gap: 1}],
// Connector: ['Flowchart', {stub: 30, gap: 1, alwaysRespectStubs: false, midpoint: 0.5, cornerRadius: 10}],
// Connector: ['StateMachine', {margin: 5, curviness: 10, proximityLimit: 80}],
// 鼠标不能拖动删除线
ConnectionsDetachable: false,
// 删除线的时候节点不删除
DeleteEndpointsOnDetach: false,
/**
* 连线的两端端点类型：圆形
* radius: 圆的半径，越大圆越大
*/
// Endpoint: ['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}],
/**
* 连线的两端端点类型：矩形
* height: 矩形的高
* width: 矩形的宽
*/
// Endpoint: ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}],
/**
* 图像端点
*/
// Endpoint: ['Image', {src: 'https://www.easyicon.net/api/resizeApi.php?id=1181776&size=32', cssClass: 'ef-img', hoverClass: 'ef-img-hover'}],
/**
* 空白端点
*/
Endpoint: ['Blank', {Overlays: ''}],
// Endpoints: [['Dot', {radius: 5, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover'}], ['Rectangle', {height: 20, width: 20, cssClass: 'ef-rectangle', hoverClass: 'ef-rectangle-hover'}]],
/**
* 连线的两端端点样式
* fill: 颜色值，如：#12aabb，为空不显示
* outlineWidth: 外边线宽度
*/
EndpointStyle: {fill: '#1879ffa1', outlineWidth: 1},
// 是否打开jsPlumb的内部日志记录
LogEnabled: true,
/**
* 连线的样式
*/
PaintStyle: {
// 线的颜色
stroke: '#2a2929',
// 线的粗细，值越大线越粗
strokeWidth: 1,
// 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
outlineStroke: 'transparent',
// 线外边的宽，值越大，线的点击范围越大
outlineWidth: 10
},
DragOptions: {cursor: 'pointer', zIndex: 2000},
/**
* 叠加 参考： https://www.jianshu.com/p/d9e9918fd928
*/
Overlays: [
// 箭头叠加
['Arrow', {
width: 10, // 箭头尾部的宽度
length: 8, // 从箭头的尾部到头部的距离
location: 1, // 位置，建议使用0～1之间
direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
foldback: 0.623 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
}],
// ['Diamond', {
// events: {
// dblclick: function (diamondOverlay, originalEvent) {
// console.log('double click on diamond overlay for : ' + diamondOverlay.component)
// }
// }
// }],
['Label', {
label: '',
location: 0.1,
cssClass: 'aLabel'
}]
],
// 绘制图的模式 svg、canvas
RenderMode: 'svg',
// 鼠标滑过线的样式
HoverPaintStyle: {stroke: '#409EFF', strokeWidth: 1},
// 滑过锚点效果
// EndpointHoverStyle: {fill: 'red'}
Scope: 'jsPlumb_DefaultScope' // 范围，具有相同scope的点才可连接
},
/**
* 连线参数
*/
jsplumbConnectOptions: {
isSource: true,
isTarget: true,
// 动态锚点、提供了4个方向 Continuous、AutoDefault
anchor: 'Continuous',
// 设置连线上面的label样式
labelStyle: {
cssClass: 'flowLabel'
},
// 修改了jsplumb 源码，支持label 为空传入自定义style
emptyLabelStyle: {
cssClass: 'emptyFlowLabel'
}
},
/**
* 源点配置参数
*/
jsplumbSourceOptions: {
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
filter: '.flow-node-drag',
filterExclude: false,
anchor: 'Continuous',
allowLoopback: false,
maxConnections: -1,
onMaxConnections: function (info, e) {
console.log(`超过了最大值连线: ${info.maxConnections}`)
}
},
// 参考 https://www.cnblogs.com/mq0036/p/7942139.html
jsplumbSourceOptions2: {
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
filter: '.flow-node-drag',
filterExclude: false,
// anchor: 'Continuous',
allowLoopback: false,
connector: ['Flowchart', {curviness: 50}],
connectorStyle: {
// 线的颜色
stroke: 'red',
// 线的粗细，值越大线越粗
strokeWidth: 1,
// 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击，参考 https://blog.csdn.net/roymno2/article/details/72717101
outlineStroke: 'transparent',
// 线外边的宽，值越大，线的点击范围越大
outlineWidth: 10
},
connectorHoverStyle: {stroke: 'red', strokeWidth: 1}
},
jsplumbTargetOptions: {
// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
filter: '.flow-node-drag',
filterExclude: false,
anchor: 'Continuous',
allowLoopback: false,
dropOptions: {hoverClass: 'ef-drop-hover'}
}
}
}
}
src/views/dashboard-kettle/components/designer/modules/node.vue 0 → 100644
<template>
<div
ref="node"
:style="nodeContainerStyle"
@click="clickNode"
@mouseup="changeNodeSite"
:class="nodeContainerClass"
>
<!-- 最左侧的那条竖线 -->
<!-- <div class="ef-node-left"></div> -->
<!-- 节点类型的图标 -->
<div class="el-node-icon ef-node-left-ico flow-node-drag">
<i :class="nodeIcoClass"></i>
</div>
<!-- 节点名称 -->
<div class="ef-node-text" :show-overflow-tooltip="true">
{{node.name}}
</div>
<!-- 节点状态图标 -->
<!-- <div class="ef-node-right-ico">
<i class="el-icon-circle-check el-node-state-success" v-show="node.state === 'success'"></i>
<i class="el-icon-circle-close el-node-state-error" v-show="node.state === 'error'"></i>
<i class="el-icon-warning-outline el-node-state-warning" v-show="node.state === 'warning'"></i>
<i class="el-icon-loading el-node-state-running" v-show="node.state === 'running'"></i>
</div> -->
</div>
</template>
<script>
export default {
props: {
node: Object,
activeElement: Object
},
data() {
return {}
},
computed: {
nodeContainerClass() {
return {
'ef-node-container': true,
'ef-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.id : false
}
},
// 节点容器样式
nodeContainerStyle() {
return {
top: this.node.top,
left: this.node.left
}
},
nodeIcoClass() {
var nodeIcoClass = {}
nodeIcoClass[this.node.ico] = true
// 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
nodeIcoClass['flow-node-drag'] = this.node.viewOnly ? false : true
return nodeIcoClass
}
},
methods: {
// 点击节点
clickNode() {
this.$emit('clickNode', this.node.id)
},
// 鼠标移动后抬起
changeNodeSite() {
// 避免抖动
if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
return;
}
this.$emit('changeNodeSite', {
nodeId: this.node.id,
left: this.$refs.node.style.left,
top: this.$refs.node.style.top,
})
}
}
}
</script>
src/views/dashboard-kettle/components/designer/style/index.css 0 → 100644
/*flex布局*/
.ef-flow-box {
background-image: -webkit-gradient(linear, left top, right top, color-stop(5%, #ebebeb), color-stop(5%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ebebeb), color-stop(5%, rgba(0, 0, 0, 0)));
background-size: 1rem 1rem;
/*height: calc(86vh);*/
display: flex;
/* min-height: 86vh; */
min-height: 81vh;
flex-direction: column;
}
/*头部布局*/
.ef-flow-header {
height: 30px;
}
/*main是box的flex布局下的项目，然后main本身又是一个flex布局*/
.ef-flow-main {
/*height: calc(100% - 47px);*/
margin-top: 12px;
display: flex;
flex: 1; /*让main的内容放大，垂直方向铺满整个屏幕*/
}
.ef-flow-content {
position: relative;
overflow: scroll;
flex: 1; /*让content的内容放大，水平方向铺满整个屏幕*/
}
.ef-content-switch{
position: absolute;
top: 50%;
/*left: 225px;*/
margin-top: -9px;
width: 18px;
height: 36px;
line-height: 36px;
background-color: #F1F3F4;
z-index: 999;
cursor: pointer;
border-radius: 0 6px 6px 0;
border-bottom: 1px solid #dce3e8;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08)
}
/*左边框*/
.ef-left-box {
flex: 0 0 180px;
background-color: #FFFFFF;
border-right: 1px solid #dce3e8;
position: relative;
}
.ef-left-switch {
position: absolute;
top: 50%;
left: 225px;
margin-top: -9px;
width: 18px;
height: 36px;
line-height: 36px;
background-color: #F1F3F4;
z-index: 999;
cursor: pointer;
border-radius: 0 6px 6px 0;
border-bottom: 1px solid #dce3e8;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08)
}
/*右边框*/
.ef-right-box {
flex: 0 0 285px;
border-left: 1px solid #dce3e8;
background-color: #FBFBFB
}
/*画布*/
.ef-flow-canvas {
position: absolute;
top: 1600px;
left: 1600px;
}
/*顶部工具栏*/
.ef-tooltar {
background-color: #FFFFFF;
padding-left: 10px;
box-sizing: border-box;
height: 42px;
line-height: 42px;
z-index: 3;
border-bottom: 1px solid #DADCE0;
}
.jtk-overlay {
cursor: pointer;
color: #4A4A4A;
}
/*节点菜单*/
.ef-node-pmenu {
cursor: pointer;
height: 32px;
line-height: 32px;
width: 225px;
display: block;
font-weight: bold;
color: #4A4A4A;
padding-left: 5px;
}
.ef-node-pmenu:hover {
background-color: #E0E0E0;
}
.ef-node-menu-li {
color: #565758;
width: 150px;
border: 1px dashed #E0E3E7;
margin: 5px 0 5px 0;
padding: 5px;
border-radius: 5px;
padding-left: 8px;
}
.ef-node-menu-li:hover {
/* 设置移动样式*/
cursor: move;
background-color: #F0F7FF;
border: 1px dashed #1879FF;
border-left: 4px solid #1879FF;
padding-left: 5px;
}
.ef-node-menu-ul {
list-style: none;
padding-left: 20px
}
/*节点的最外层容器*/
.ef-node-container {
position: absolute;
/* display: flex;
width: 170px;
height: 32px; */
/* border: 1px solid #7B7B7B; */
/* border-left-color:#E0E3E7 ; */
/* border-radius: 5px;
background-color: #fff; */
padding:5px;
}
.el-node-icon{
border-radius: 7px;
background-color: #fff;
padding:5px 12px;
width:fit-content;
border: 1px solid #7B7B7B;
margin:0 auto;
}
.ef-node-container:hover {
/* 设置移动样式*/
cursor: move;
background-color: #F0F7FF;
/*box-shadow: #1879FF 0px 0px 12px 0px;*/
background-color: #F0F7FF;
border: 1px dashed #1879FF;
}
/*节点激活样式*/
.ef-node-active {
background-color: #F0F7FF;
/*box-shadow: #1879FF 0px 0px 12px 0px;*/
background-color: #F0F7FF;
border: 1px solid #5d77ff;
}
/*节点左侧的竖线*/
.ef-node-left {
width: 4px;
background-color: #5d77ff;
border-radius: 4px 0 0 4px;
}
/*节点左侧的图标*/
/* .ef-node-left-ico {
line-height: 32px;
margin-left: 8px;
} */
.ef-node-left-ico {
line-height: 32px;
/* margin-left: 8px; */
}
.ef-node-left-ico:hover {
/* 设置拖拽的样式 */
cursor: crosshair;
}
/*节点显示的文字*/
.ef-node-text {
color: #565758;
font-size: 12px;
line-height: 32px;
margin-left: 8px;
/* width: 100px; */
/* 设置超出宽度文本显示方式*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
/*节点右侧的图标*/
.ef-node-right-ico {
line-height: 32px;
position: absolute;
right: 5px;
color: #84CF65;
cursor: default;
}
/*节点的几种状态样式*/
.el-node-state-success {
line-height: 32px;
position: absolute;
right: 5px;
color: #84CF65;
cursor: default;
}
.el-node-state-error {
line-height: 32px;
position: absolute;
right: 5px;
color: #F56C6C;
cursor: default;
}
.el-node-state-warning {
line-height: 32px;
position: absolute;
right: 5px;
color: #E6A23C;
cursor: default;
}
.el-node-state-running {
line-height: 32px;
position: absolute;
right: 5px;
color: #84CF65;
cursor: default;
}
/*node-form*/
.ef-node-form-header {
height: 32px;
border-top: 1px solid #dce3e8;
border-bottom: 1px solid #dce3e8;
background: #F1F3F4;
color: #000;
line-height: 32px;
padding-left: 12px;
font-size: 14px;
}
.ef-node-form-body {
margin-top: 10px;
padding-right: 10px;
padding-bottom: 20px;
}
/* 连线中的label 样式*/
.jtk-overlay.flowLabel:not(.aLabel) {
padding: 4px 10px;
background-color: white;
color: #565758 !important;
border: 1px solid #E0E3E7;
border-radius: 5px;
}
/* label 为空的样式 */
.emptyFlowLabel {
}
.ef-dot {
background-color: #1879FF;
border-radius: 10px;
}
.ef-dot-hover {
background-color: red;
}
.ef-rectangle {
background-color: #1879FF;
}
.ef-rectangle-hover {
background-color: red;
}
.ef-img {
}
.ef-img-hover {
}
.ef-drop-hover {
border: 1px dashed #1879FF;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment