标签：const 流程图 height myDiagram 简单 go new gojs event

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

    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;
      }
    }
  }
}

标签：const,流程图,height,myDiagram,简单,go,new,gojs,event
来源： https://www.cnblogs.com/wangliko/p/16164206.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。