我这里使用的是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;
}
}
}
}