流程图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;
      }
    }
  }
}

__EOF__

本文作者：一抹红
本文链接：https://www.cnblogs.com/wangliko/p/16164206.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！