mxGraph使用(vue)

mxGraph使用(vue)

1. 安装
   npm install mxgraph --save
2. 新建mxGraph.js

   import mx from 'mxgraph'
   const mxgraph = mx({
        
     mxImageBasePath: './src/images',
     mxBasePath: './src'
   })
   window.mxGraph = mxgraph.mxGraph
   window.mxGraphModel = mxgraph.mxGraphModel
   window.mxEditor = mxgraph.mxEditor
   window.mxGeometry = mxgraph.mxGeometry
   window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler
   window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu
   window.mxStylesheet = mxgraph.mxStylesheet
   window.mxDefaultToolbar = mxgraph.mxDefaultToolbar
   window.mxToolbar = mxgraph.mxToolbar
   window.mxCell = mxgraph.mxCell
   window.mxCodec = mxgraph.mxCodec
   window.mxEvent = mxgraph.mxEvent
   window.mxUtils = mxgraph.mxUtils
   window.mxConstants = mxgraph.mxConstants
   
   export default mxgraph
   

3. 页面引入, 定义元素,可以使用id,也可以使用ref
```html
<div id="graph_container" class="svg-container" style="width: 100%; height: 100%;padding: 10px;"></div>

4. 根据数据渲染流程图 (数据定义)

graphData: [
        {
   
            "name": "年度审计计划",
            "state": 3,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 1
                }
            ]
        },
        {
   
            "name": "项目开始",
            "state": 3,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 2
                }
            ]
        },
        {
   
            "name": "项目审前符合性调查",
            "state": 3,
            "userName": "zbb",
            "time": null,
            "target": [
                {
   
                    "solidLine": 0,
                    "targetIndex": 3
                },
                {
   
                    "solidLine": 1,
                    "targetIndex": 4
                }
            ]
        },
        {
   
            "name": "协审招选结果",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 4
                }
            ]
        },
        {
   
            "name": "组成审计组",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 5
                }
            ]
        },
        {
   
            "name": "代拟审计通知书",
            "state": 3,
            "userName": "cqj",
            "time": "2021-11-05 17:46:13",
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 6
                }
            ]
        },
        {
   
            "name": "调查了解情况",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 0,
                    "targetIndex": 7
                },
                {
   
                    "solidLine": 1,
                    "targetIndex": 8
                }
            ],
            divider: 1
        },
        {
   
            "name": "审计工作方案",
            "state": 3,
            "userName": "zbb",
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 8
                }
            ]
        },
        {
   
            "name": "审计实施方案",
            "state": 3,
            "userName": "www",
            "time": null,
            "target": [
                {
   
                    "solidLine": 0,
                    "targetIndex": 9
                },
                {
   
                    "solidLine": 1,
                    "targetIndex": 10
                }
            ]
        },
        {
   
            "name": "审计进点会",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 10
                }
            ]
        },
        {
   
            "name": "现场审计",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 11
                }
            ]
        },
        {
   
            "name": "内控质量交叉复合",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 0,
                    "targetIndex": 12
                },
                {
   
                    "solidLine": 1,
                    "targetIndex": 13
                }
            ]
        },
        {
   
            "name": "外聘中介服务考核",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 13
                }
            ],
            divider: 2
        },
        {
   
            "name": "审计资料整理",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 14
                }
            ]
        },
        {
   
            "name": "法规处网上审查",
            "state": 0,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 15
                }
            ]
        },
        {
   
            "name": "草拟审计报告(征求意见稿)",
            "state": 1,
            "userName": null,
            "time": null,
            "target": [
                {
   
                    "solidLine": 1,
                    "targetIndex": 16
                }
            ]