流程图gojs 简单使用
我这里使用的是vue脚手架的应用的gojs,用的版本为"gojs": "^2.2.5",
第一步，将"gojs": "^2.2.5" 添加到package中，下载 npm install
第二步，将gojs的水印去掉，需要我们将 node_modules/gojs/release 下的go.js文件拷贝出来，放到自己工程对应的js 中,将拷贝出来的Js中搜索5da73c80a36455d5038e4972187c3cae51fd22 这个字符串，以这个字符串以for开始到Cd=sd.prototype.Yx;结尾，这段代码注释掉，也就是这段代码，即可取出水印
/*for(var d=["5da73c80a36455d5038e4972187c3cae51fd22",qa.Dx+"4ae6247590da4bb21c324ba3a84e385776",sd.xF+"fb236cdfda5de14c134ba1a95a2d4c7cc6f93c1387",K.za],e=1;5>e;e++)b[Ra("7ca11abfd7330390")](Ra(d[e-1]),10,15*e);b[c]=Ra("39f046ebb36e4b");for(c=1;5>c;c++)b[Ra("7ca11abfd7330390")](Ra(d[c-1]),10,15*c);if(4!==d.length||"5"!==d[0][0]||"7"!==d[3][0])sd.prototype.Cd=sd.prototype.Yx;*/
第三步，我们注释掉的这个Js文件，这个时候可能找不到import，可以换成require引入 ，引入go.js
import go from './js/go.js';
const $ = go.GraphObject.make; //引入正确，就不会报错，引入找不到就会报错这里找不到对应的GraphObject
第四步 下面我直接上代码了哈，html js .css分开上代码
1、html,我这里是表格的英文名这列可有拖动 ，这句代码是重点哈
<el-table
ref="tableData"
:data="tableList"
highlight-current-row
stripe
border
:height="'100%'"
style="width: 100%" >
<el-table-column prop="tabName" show-overflow-tooltip >
<template slot="header" slot-scope="scope">
<span>表名</span>
<el-tooltip class="item" effect="dark" content="可拖拽" placement="right" >
<span class="uex-icon-help"></span>
</el-tooltip>
</template>
<template slot-scope="scope">
<span class="draggable" draggable="true" :rowid="scope.row.tabId" :tabLabel="scope.row.tabLabel">
{{scope.row.tabName}}
</span>
</template>
</el-table-column>
<el-table-column prop="tabLabel" label="中文名" show-overflow-tooltip>
<!--<template slot-scope="scope">
<div>
{{scope.row.label}}
</div>
</template>-->
</el-table-column>
</el-table>
1.1展示流程图的html代码
<div class="right-container-gram" >
<div :id="'myDiagramDiv'+diagramId" class="myDiagramDiv">
<canvas tabindex="0" width="742" height="398" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 742px; height: 398px; cursor: auto;">
</canvas>
<div style="position: absolute; overflow: auto; width: 742px; height: 398px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
</div>
<!-- <div class="empty-set" v-if="isNodeData">拖入左侧表配置</div> -->
<ul :id="'contextMenu'+diagramId" class="ctxmenu">
<li id="delete" class="menu-item" @click="cxcommand('delete')">删除</li>
<li id="deleteLink" class="menu-item" @click="cxcommand('deleteLink')">删除线</li>
</ul>
</div>
2 Js 代码
data() {
return {
cxElement: null,
makeImage: null,
myDiagram: null,
diagramId: new Date().getTime(),
linkFrom: {
linkData: {
from: '',
to: '',
LinkLabel: 'LEFT JOIN'
},
model: null
},
tableList: [
{
id: '1',
name: 'table1',
label: '表名1'
},
{
id: '2',
name: 'table2table2table2table2',
label: '表名2'
},
{
id: '3',
name: 'table3',
label: '表名3'
}
],
}
},
methods: {
init() {
const self = this;
let dragged = null; // A reference to the element currently being dragged
function highlight(node) { // may be null
const oldskips = myDiagram.skipsUndoManager;
myDiagram.skipsUndoManager = true;
myDiagram.startTransaction('highlight');
if (node !== null) {
myDiagram.highlight(node);
} else {
myDiagram.clearHighlighteds();
}
myDiagram.commitTransaction('highlight');
myDiagram.skipsUndoManager = oldskips;
}
const $table = document.getElementById(`table${self.diagramId}`);
$table.addEventListener('dragstart', (event) => {
if (event.target.className !== 'draggable') return;
// myDiagram.findNodesByExample({"category":"nodeStyleOne"})
// 修改后的
const res = self.myDiagram.findNodesByExample({ key: event.target.attributes.rowid.nodeValue });
if (res.count !== 0) { // 已经有节点内容了
console.log('find',);
self.$message({
message: '该节点已经存在了，不能重复',
type: 'warning'
});
return;
}
// event.target.textContet
event.dataTransfer.setData('text', event.target.innerText);
event.dataTransfer.setData('rowid', event.target.attributes.rowid.nodeValue);
event.dataTransfer.setData('tabLabel', event.target.attributes.tabLabel.nodeValue);
dragged = event.target;
dragged.offsetX = event.offsetX - dragged.clientWidth / 2;
dragged.offsetY = event.offsetY - dragged.clientHeight / 2;
}, false);
document.addEventListener('dragend', (event) => {
dragged.style.border = '';
highlight(null);
}, false);
const div = document.getElementById(`myDiagramDiv${self.diagramId}`);
div.addEventListener('dragenter', (event) => {
event.preventDefault();
}, false);
div.addEventListener('dragover', function (event) {
if (this === myDiagram.div) {
const can = event.target;
const pixelratio = window.PIXELRATIO;
if (!(can instanceof HTMLCanvasElement)) return;
const bbox = can.getBoundingClientRect();
let bbw = bbox.width;
if (bbw === 0) bbw = 0.001;
let bbh = bbox.height;
if (bbh === 0) bbh = 0.001;
const mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw);
const my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh);
const point = myDiagram.transformViewToDoc(new go.Point(mx, my));
const curnode = myDiagram.findPartAt(point, true);
if (curnode instanceof go.Node) {
highlight(curnode);
} else {
highlight(null);
}
}
if (event.target.className === 'dropzone') {
return;
}
event.preventDefault();
}, false);
div.addEventListener('dragleave', (event) => {
if (event.target.className == 'dropzone') {
event.target.style.background = '';
}
highlight(null);
}, false);
div.addEventListener('drop', function (event) {
// prevent default action
// (open as link for some elements in some browsers)
event.preventDefault();
// Dragging onto a Diagram
if (this === myDiagram.div) {
const can = event.target;
const pixelratio = window.PIXELRATIO;
// if the target is not the canvas, we may have trouble, so just quit:
if (!(can instanceof HTMLCanvasElement)) return;
const bbox = can.getBoundingClientRect();
let bbw = bbox.width;
if (bbw === 0) bbw = 0.001;
let bbh = bbox.height;
if (bbh === 0) bbh = 0.001;
const mx = event.clientX - bbox.left * ((can.width / pixelratio) / bbw) - dragged.offsetX;
const my = event.clientY - bbox.top * ((can.height / pixelratio) / bbh) - dragged.offsetY;
const point = myDiagram.transformViewToDoc(new go.Point(mx, my));
myDiagram.startTransaction('new node');
console.log('point', point, go.Point.stringify(point), `${mx} ${my}`);
// go.Point.stringify(point);
if (event.dataTransfer.getData('text')) { // 已经有节点内容了
myDiagram.model.addNodeData({
location: go.Point.stringify(point),
id: event.dataTransfer.getData('rowid'),
tabLabel: event.dataTransfer.getData('tabLabel'),
// key: event.dataTransfer.getData('text')
key: event.dataTransfer.getData('rowid'),
text: event.dataTransfer.getData('text')
});
// 查询新增节点的测试项
self.addNodeTestColumn(event.dataTransfer.getData('rowid'));
}
myDiagram.commitTransaction('new node');
// remove dragged element from its old location
// if (remove.checked) dragged.parentNode.removeChild(dragged);
}
// If we were using drag data, we could get it here, ie:
// var data = event.dataTransfer.getData('text');
}, false);
// *********************************************************
// Second, set up a GoJS Diagram
// *********************************************************
const myDiagram = $(go.Diagram, `myDiagramDiv${self.diagramId}`, // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
scale: 1.0, // 初始视图大小比例
'undoManager.isEnabled': false, // 支持 Ctrl-Z 和 Ctrl-Y 操作 （撤回和复原）
'toolManager.hoverDelay': 100, // tooltip提示显示延时
'toolManager.toolTipDuration': 10000,
'grid.visible': true, // 显示网格
grid: $(go.Panel, go.Panel.Grid, // 显示网格配置
{ gridCellSize: new go.Size(15, 15) },
$(go.Shape, 'LineH', { stroke: '#F8F8F8' }),
$(go.Shape, 'LineV', { stroke: '#F8F8F8' }))
});
self.myDiagram = myDiagram;
const cxElement = document.getElementById(`contextMenu${this.diagramId}`);
self.cxElement = cxElement;
const myContextMenu = $(go.HTMLInfo, {
show: self.showContextMenu,
hide: self.hideContextMenu
});
myDiagram.contextMenu = myContextMenu;
cxElement.addEventListener('contextmenu', (e) => {
e.preventDefault();
return false;
}, false);
window.PIXELRATIO = myDiagram.computePixelRatio(); // constant needed to determine mouse coordinates on the canvas
// define a simple Node template
myDiagram.nodeTemplate = $(go.Node, 'Auto',
{ toolTip: $(
'ToolTip',
$(
go.Panel,
'Vertical',
$(
go.TextBlock,
{
margin: 3,
font: '10px PingFangSC, PingFangSC-Medium'
},
new go.Binding('text', '', ((e, obj) => {
const { data } = obj.part;
const { tabLabel } = data;
const { text } = data;
return `表名：${text}\n中文名:${tabLabel}`;
}))
)
)
)
},
{ contextMenu: myContextMenu },
{ locationSpot: go.Spot.Center },
{
locationSpot: go.Spot.TopCenter,
isShadowed: true,
shadowBlur: 1,
shadowOffset: new go.Point(0, 1),
shadowColor: 'rgba(0, 0, 0, .14)',
selectionAdornmentTemplate: // selection adornment to match shape of nodes
$(go.Adornment, 'Auto',
$(go.Shape, 'RoundedRectangle', { parameter1: 2, // set the rounded corner
// spot1: go.Spot.TopLeft,
// spot2: go.Spot.BottomRight,
spot1: new go.Spot(0, 0, 0.1, 0.1),
spot2: new go.Spot(1, 1, 0.1, 0.1),
strokeWidth: 1
},
{ fill: null, stroke: '#DADFE6', strokeWidth: 0 }), // 鼠标选中的颜色
$(go.Placeholder)) // end Adornment
},
// new go.Binding('location'),
new go.Binding('location', 'location', go.Point.parse).makeTwoWay(go.Point.stringify), // 保留节点的位置
$(go.Shape, 'RoundedRectangle',
{ parameter1: 2, // set the rounded corner
// spot1: go.Spot.TopLeft,
// spot2: go.Spot.BottomRight
spot1: new go.Spot(0, 0, 0.1, 0.1),
spot2: new go.Spot(1, 1, 0.1, 0.1)
},
{ name: 'SHAPE', fill: '#ffffff', strokeWidth: 1, stroke: '#2D84FB' }, // 边框样式
// bluish if highlighted, white otherwise
new go.Binding('fill', 'isHighlighted', ((h) => { return h ? '#e8eaf6' : '#ffffff'; })).ofObject()),
$(go.Panel, 'Vertical', // RoundedRectangle Vertical
$(go.Panel, 'Horizontal',
{ width: 200, background: '#2e83f6' }, // 蓝色背景
$(go.Picture, // flag image, only visible if a nation is specified
{ margin: 7, desiredSize: new go.Size(15, 15) },
new go.Binding('source', '', (() => {
return require('./images/table.png');
})),),
$(go.Panel, 'Table',
$(go.TextBlock,
{
row: 0,
alignment: go.Spot.Left,
font: '12px PingFangSC, PingFangSC-Medium',
stroke: '#ffffff',
maxSize: new go.Size(160, NaN)
},
{
width: 120,
textAlign: 'left',
wrap: go.TextBlock.None,
overflow: go.TextBlock.OverflowEllipsis,
shadowVisible: false
},
new go.Binding('text', 'text')),),),
$(go.Panel, 'Vertical',
{
name: 'INFO', // identify to the PanelExpanderButton
stretch: go.GraphObject.Horizontal, // take up whole available width
margin: 8,
defaultAlignment: go.Spot.Left // thus no need to specify alignment on each element
},
$(go.TextBlock,
{
font: '12px PingFangSC, PingFangSC-Regular',
stroke: '#495465',
width: 120,
textAlign: 'left',
wrap: go.TextBlock.None,
overflow: go.TextBlock.OverflowEllipsis,
shadowVisible: false
}, // chinaName
new go.Binding('text', 'tabLabel', ((head) => { return `中文名: ${head}`; }))),)),
self.makePort('T', go.Spot.Top, false, true),
self.makePort('L', go.Spot.Left, true, true),
self.makePort('R', go.Spot.Right, true, true),
self.makePort('B', go.Spot.Bottom, true, false),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter(e, node) { self.showSmallPorts(node, true); },
mouseLeave(e, node) { self.showSmallPorts(node, false); }
},);
myDiagram.linkTemplate =
$(go.Link, // the whole link panel //DraggingTool.dragsLink 线条可以拖动
{
selectable: false
// cursor: 'pointer'
},
{ contextMenu: myContextMenu },
{ routing: go.Link.Orthogonal, corner: 5, selectable: false }, // the link style
$(go.Shape, {
strokeWidth: 1, // 节点连线宽度
stroke: '#AAB0BD' // 节点连线颜色
},),
$(go.Shape, { toArrow: 'Triangle', stroke: '#AAB0BD', fill: '#AAB0BD' }),
$(go.Shape, { fromArrow: 'BackwardTriangle', stroke: '#AAB0BD', fill: '#AAB0BD' }),
$(go.Panel, go.Panel.Vertical,
{ margin: 5, cursor: 'pointer' },
{ click: self.textDialogClick },
$(go.Picture,
{
background: '#ffffff',
desiredSize: new go.Size(30, 20),
margin: new go.Margin(10, 0, 0, 0)
},
new go.Binding('source', '', ((e, obj) => {
const { data } = obj.part;
let img = '';
console.log('data.img', data.img);
if (data.img) {
img = data.img;
console.log('data.img', data.img);
return require(`./images/${img}`);
} else {
img = './images/add-line.png';// 默认左关联
return require(`${img}`);
}
}))),
$(go.TextBlock,
{
font: '10px PingFangSC, PingFangSC-Regular',
textAlign: 'center',
margin: new go.Margin(0, 0, 0, 0),
stroke: '#AAB0BD'
}, // centered multi-line text
new go.Binding('text', '', ((e, obj) => {
const { data } = obj.part;
let str = '';
if (data.LinkLable) {
str = self.getLinkLableText(data.LinkLable);
} else {
str = '添加连接';
}
return str;
}))),),);
// 放大缩小
// const myOverview =
// $(go.Overview, `myOverviewDiv${self.diagramId}`,
// {
// // drawsTemporaryLayers:true,
// observed: myDiagram
// // contentAlignment: go.Spot.Center
// });
// create the model data that will be represented by Nodes and Links
//如果是编辑的赋值数据 tableRela数据格式和graphData格式一模一样
this.$nextTick(() => {
this.myDiagram.model = go.Model.fromJson(JSON.parse(tableRela));
});
// 初始化的数据
const graphData = {
class: 'GraphLinksModel',
modelData: {
position: '-550.1 -90'
},
nodeDataArray: [
{
location: '-170.10000000000002 -85',
id: 'CMZJTB2022041401321',
tabLabel: '指标组测试表',
key: 'CMZJTB2022041401321',
text: 'HX_AGCFFUNCTION_15M'
},
{
location: '234.89999999999998 -63',
id: 'CMZJTB2100491010',
tabLabel: '业务编排平台数据苏研（云网专线）（日)',
key: 'CMZJTB2100491010',
text: 'TO_O_D_YWBP_BDAS_KSHLW'
}
],
linkDataArray: [
{
from: 'CMZJTB2022041401321',
to: 'CMZJTB2100491010'
}
]
};
const { linkDataArray } = graphData;
const { nodeDataArray } = graphData;
myDiagram.model = new go.GraphLinksModel(
nodeDataArray,
linkDataArray
);
},
makePort(name, spot, output, input) {
// the port is basically just a small transparent square
return $(go.Shape, 'Circle',
{
fill: null, // not seen, by default; set to a translucent gray by showSmallPorts, defined below
stroke: null,
desiredSize: new go.Size(7, 7),
alignment: spot, // align the port on the main Shape
alignmentFocus: spot, // just inside the Shape
portId: name, // declare this object to be a "port"
fromSpot: spot,
toSpot: spot, // declare where links may connect at this port
fromLinkable: output,
toLinkable: input, // declare whether the user may draw links to/from here
cursor: 'pointer' // show a different cursor to indicate potential link point
});
},
showSmallPorts(node, show) {
node.ports.each((port) => {
if (port.portId !== '') { // don't change the default port, which is the big shape
port.fill = show ? 'rgba(0,0,0,.3)' : null;
}
});
},
showContextMenu(obj, diagram, tool) {
// Show only the relevant buttons given the current state.
const cmd = diagram.commandHandler;
const { cxElement } = this;
let hasMenuItem = false;
if (obj && obj.part && obj.part.data.from) {
console.log('link');
hasMenuItem = true;
this.delLinkData = obj.part.data;
maybeShowItem(document.getElementById('deleteLink'), true, 'link');
} else if (obj) {
maybeShowItem(document.getElementById('delete'), cmd.canDeleteSelection());
}
function maybeShowItem(elt, pred, type) {
console.log('maybeShowItem', elt, pred);
if (type === 'link') {
const link = document.getElementById('delete');
link.style.display = 'none';
elt.style.display = 'block';
hasMenuItem = true;
} else {
const link = document.getElementById('deleteLink');
link.style.display = 'none';
elt.style.display = 'block';
hasMenuItem = true;
}
}
if (hasMenuItem) {
cxElement.classList.add('show-menu');
// we don't bother overriding positionContextMenu, we just do it here:
const mousePt = diagram.lastInput.viewPoint;
cxElement.style.left = `${mousePt.x + 5}px`;
cxElement.style.top = `${mousePt.y}px`;
}
// Optional: Use a `window` click listener with event capture to
// remove the context menu if the user clicks elsewhere on the page
window.addEventListener('click', this.hideCX, true);
},
hideCX() {
const { myDiagram } = this;
if (myDiagram.currentTool instanceof go.ContextMenuTool) {
myDiagram.currentTool.doCancel();
}
},
hideContextMenu() {
const { cxElement } = this;
cxElement.classList.remove('show-menu');
// Optional: Use a `window` click listener with event capture to
// remove the context menu if the user clicks elsewhere on the page
window.removeEventListener('click', this.hideCX, true);
},
cxcommand(val) {
const self = this;
// if (val === undefined) let val = event.currentTarget.id;
const diagram = this.myDiagram;
console.log('diagram', val, diagram);
switch (val) {
case 'cut':
diagram.commandHandler.cutSelection();
break;
case 'copy':
diagram.commandHandler.copySelection();
break;
case 'paste':
diagram.commandHandler.pasteSelection(diagram.toolManager.contextMenuTool.mouseDownPoint);
break;
case 'delete':
diagram.selection.each((node) => {
if (node instanceof go.Node) {
// ignore any selected Links and simple Parts
// Examine and modify the data, not the Node directly.
const { data } = node;
self.deleteNodeTestData(data.key);
}
});
diagram.commandHandler.deleteSelection();
break;
case 'deleteLink':
diagram.model.removeLinkData(self.delLinkData);
break;
}
diagram.currentTool.stopTool();
},
//根据需要过滤文字
getLinkLableText(relationType) {
let LinkLableText = '左连接';
switch (relationType) {
case 'LEFT JOIN':
LinkLableText = '左连接';
break;
case 'RIGHT JOIN':
LinkLableText = '右连接';
break;
case 'INNER JOIN':
LinkLableText = '内连接';
break;
case 'OUTER JOIN':
LinkLableText = '外连接';
break;
}
return LinkLableText;
}
//保存按钮方法，获取流程图的数据及连线的数据
save() {
this.saveDiagramProperties();// 获取位置
this.getmyDiagramMakeImage(); // 获取流程图图片
const { myDiagram } = this;
const goData = myDiagram.model.toJson();
const saveData = JSON.parse(goData);
console.log('goData', goData);
console.log('goData', saveData);
},
// this.linkFrom.model.setDataProperty(this.linkFrom.linkData, 'LinkLable', relationType); 需要改变连线的图片及文字信息
}
mounted() {
this.init();
}
3css
<style scoped>
@import "./styles/right-edit.scss";
</style>
根据需要增删些样式哈，我这里是我这个页面的全部样式
.elx-test-bar{
position: relative;
.empty-set{
position: absolute;
left: 50%;
top: 50%;
font-size: 16px;
z-index: 100;
color: #DADFE6;
}
/deep/:focus-visible{
outline:none!important;
}
}
.left-div{
border: 1px solid #DADFE6;
.left-grap-top{
height: 28px;
padding-left: 10px;
line-height: 28px;
font-size: 12px;
font-weight: 400;
border-bottom: 1px solid #DADFE6;
span{
color: #202d40;
}
}
}
.left-div{
height: 100%;
border: 1px solid #DADFE6;
.left-grap-top{
height: 28px;
padding-left: 10px;
line-height: 28px;
font-size: 12px;
font-weight: 400;
border-bottom: 1px solid #DADFE6;
}
.elx-row-resize-layout{
position: absolute;
bottom: 0;
/deep/ .row-resize-split.narrow{
z-index: 100;
}
/deep/ .elx-layout-bottom{
z-index: 10;
}
.config-edit-body{
height: calc(100% - 32px);
.elx-codemirror{
height: 100% !important;
}
}
}
}
.right-container{
//border-top: 1px solid #e8ecf1;
//display: flex;
flex-direction: column;
height: 100%;
}
.scale-container {
position: absolute;
top: 15px;
left: 15px;
z-index: 1000;
/deep/ .el-input-number--mini {
width: 26px;
height: 48px;
border: 1px solid #DADFE6;
background: #F5F7FA;
border-radius: 2px;
.el-input-number__decrease,
.el-input-number__increase {
display: block;
background: #FFFFFF;
}
.el-input {
display: none;
}
.el-input-number__increase {
top: 0px;
left: 0px;
right: auto;
border-left: 0px;
border-bottom: 1px solid #DADFE6;
}
.el-input-number__decrease {
top: 24px;
left: 0px;
right: auto;
border-right: 0px;
}
}
}
.myOverviewDiv{
position: relative;
}
/*
.diagramStyling{
position: relative;
bottom: 0px;
left: 5px;
background: rgb(245, 247, 250);
!* border: 1px solid; *!
}
*/
.diagramStyling{
position: absolute;
bottom: 0px;
left: 5px;
background: rgb(245, 247, 250);
z-index: 1000;
/* border: 1px solid; */
}
.lay-right>div{
height: 100%;
width: 100%;
}
.right-container{
height: 100%;
width: 100%;
/deep/ .el-dialog{
min-width: 600px!important;
}
}
.right-container-gram{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
.myDiagramDiv{
flex-grow: 1;
height: 100%;
width: 100%;
/* height: 400px; */
position: relative;
// border: 1px solid #8A929F;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
cursor: auto;
}
/* 修改后的结束 */
.ctxmenu {
display: none;
position: absolute;
opacity: 0;
margin: 0;
padding: 8px 0;
z-index: 999;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
list-style: none;
background-color: #ffffff;
border-radius: 4px;
}
.menu-item {
display: block;
position: relative;
min-width: 60px;
margin: 0;
padding: 6px 16px;
font: bold 12px sans-serif;
color: rgba(0, 0, 0, .87);
cursor: pointer;
}
.menu-item::before {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
content: "";
width: 100%;
height: 100%;
background-color: #000000;
}
.menu-item:hover::before {
opacity: .04;
}
.menu .menu {
top: -8px;
left: 100%;
}
.show-menu, .menu-item:hover .ctxmenu {
display: block;
opacity: 1;
}
/deep/ .el-table{
.el-table__header-wrapper{
color: #ccd5e0;
.item{
color: #ccd5e0;
}
}
}
.test-items-container{
/* position: absolute;
bottom: 0px;*/
flex: 1;
height: 100%;
overflow: hidden;
width: 100%;
/deep/ .el-table {
border-radius: unset;
border-left: none;
th {
font-weight: 400;
background: #f5f7fa;
}
.el-table-column--selection.is-leaf .cell{
padding-left: 6px;
}
}
.test-opers{
/*height: 40px;*/
line-height: 30px;
border-right: 1px solid #E0E6ED;
.test-oper{
display: inline-block;
width: 110px;
padding: 0 10px;
border-right: 1px solid #E0E6ED;
cursor: pointer;
color: #202d40;
&.active{
border-bottom: 2px solid #165DFF;
// color: #20a0ff;
}
}
.test-oper-icon{
float: right;
// height: 40px;
line-height: 30px;
margin-right: 20px;
font-size: 14px;
cursor: pointer;
span{
font-size: 12px;
}
&.active{
color: #165DFF;
}
&:hover{
color: #165DFF;
}
}
}
.test-body{
height: calc(100% - 32px);
// height: 258px;
.search-icon{
position: absolute;
right: 12px;
height: 100%;
line-height: inherit;
margin-right: 5px;
cursor: pointer;
font-weight: 700;
&:hover{
color: #165DFF;
}
&.is-active{
color: #165DFF;
}
}
.header-search{
width: calc(100% - 100px);
min-width: 100px;
position: absolute;
right: 0;
height: calc(100% - 1px);
margin-right: 5px;
/deep/ .el-input__inner {
line-height: inherit;
height: 22px;
background: none;
&:focus{
background-color: #fff;
}
}
}
.filter-opers{
position: absolute;
height: 40px;
line-height: 40px;
z-index: 1;
left: 127px;
}
.select-test,.config-rule{
position: relative;
height: 100%;
display: flex;
flex-direction: row;
overflow: hidden;
}
.config-rule{
border-top: 1px solid #E0E6ED;
}
.comb-select{
width: 120px;
}
.test-list{
width: 300px;
display: inline-block;
float: left;
}
.code-editor{
flex: 1;
.config-edit-header{
border-left: 1px solid #DADFE6;
border-right: 1px solid #DADFE6;
line-height: 32px;
padding-left: 10px;
background: #f5f7fa;
.tip-info{
color: #8592A6;
float: right;
margin-right: 14px;
span{
margin-left: 5px;
}
}
}
}
}
}
.relation-container{
span.relation-filed::before {
content: '*';
color: #F24C3D;
margin-right: 4px;
}
.elx-radio-group{
display: flex;
.elx-radio{
flex: 1;
.elx-radio-item{
img{
height: 16px;
}
}
&:last-of-type{
margin-right: 0;
}
}
}
.dialog-buttons {
/deep/ .el-button{
border: none;
&.el-button--default{
background-color: #F2F3F5;
}
&.el-button--primary{
border-color: #165DFF;
background: #165DFF ;
}
}
}
.relation-buttons{
height: 30px;
text-align: center;
.relation-button{
padding: 0 10px;
img{
height: 28px;
}
}
}
.operate-button{
text-align: right;
margin-bottom: 5px;
margin-right: 5px;
}
img.relation-img{
height: 15px;
}
.rela-table-head.item {
/* display: inline; */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #8592A6;
font-weight: 400;
}
.table-oper-plus{
font-size: 14px;
color: #165DFF;
}
.table-oper-minus{
font-size: 14px;
color: #CAD1DE;
&:hover{
color: #F24C3D;
}
}
.relation-table1.el-table{
/deep/ th{
.cell{
color: #8592A6;
font-weight: 400;
}
}
/deep/ tbody .cell{
padding: 0px;
.el-select{
input{
border: 0;
}
.el-input__inner{
background-color: #fff;
}
}
.rela-td{
display: inline-block;
width: 100%;
background-color: #F5F7FA;
color: #cad1de;
}
}
}
}
