| | |
| | | 'mk-rect', |
| | | { |
| | | inherit: 'rect', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-polygon', |
| | | { |
| | | inherit: 'polygon', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-paral', |
| | | { |
| | | inherit: 'polygon', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-ellipse', |
| | | { |
| | | inherit: 'ellipse', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 32, |
| | | attrs: { |
| | | body: { |
| | | strokeWidth: 1, |
| | |
| | | 'mk-text', |
| | | { |
| | | inherit: 'text-block', |
| | | width: 66, |
| | | height: 40, |
| | | width: 100, |
| | | height: 50, |
| | | text: '文本域', |
| | | attrs: { |
| | | body: { |
| | |
| | | const stencil = new Stencil({ |
| | | title: '流程图', |
| | | target: graph, |
| | | stencilGraphWidth: 180, |
| | | stencilGraphWidth: 230, |
| | | stencilGraphHeight: 180, |
| | | groups: [ |
| | | { |
| | | title: '通用节点', |
| | | name: 'group1', |
| | | graphHeight: 240 |
| | | graphHeight: 150 |
| | | }, |
| | | { |
| | | title: '自定义', |
| | | name: 'group2', |
| | | graphHeight: 150, |
| | | graphHeight: 300, |
| | | layoutOptions: { |
| | | rowHeight: 70 |
| | | } |
| | |
| | | ], |
| | | layoutOptions: { |
| | | columns: 2, |
| | | columnWidth: 80, |
| | | columnWidth: 110, |
| | | rowHeight: 55 |
| | | } |
| | | }) |
| | |
| | | mkdata: {status: 0, statusName: '未提交'}, |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#52c41a', |
| | | stroke: '#52c41a' |
| | | rx: 0, |
| | | ry: 0, |
| | | fill: '#000000', |
| | | stroke: '#000000' |
| | | }, |
| | | text: { |
| | | fill: '#ffffff', |
| | |
| | | } |
| | | } |
| | | }) |
| | | const r2 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#e6f4ff', |
| | | stroke: '#1890ff' |
| | | }, |
| | | text: { |
| | | text: '过程' |
| | | } |
| | | } |
| | | }) |
| | | const r3 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 6, |
| | | ry: 6, |
| | | fill: '#fff7e6', |
| | | stroke: '#fa8c16' |
| | | }, |
| | | text: { |
| | | text: '可选过程' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | const r4 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 0, |
| | | ry: 0, |
| | | fill: '#fff7e6', |
| | | stroke: '#fa8c16' |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '节点' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | const r5 = graph.createNode({ |
| | | shape: 'mk-polygon', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '0,10 10,0 20,10 10,20', |
| | | fill: '#f9f0ff', |
| | | stroke: '#722ed1' |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '决策' |
| | | } |
| | | } |
| | | }) |
| | | const r6 = graph.createNode({ |
| | | shape: 'mk-paral', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '10,0 40,0 30,20 0,20', |
| | | fill: '#e6fffb', |
| | | stroke: '#13c2c2' |
| | | }, |
| | | text: { |
| | | text: '数据' |
| | | } |
| | | } |
| | | }) |
| | | const r7 = graph.createNode({ |
| | | shape: 'mk-circle', |
| | | attrs: { |
| | | body: { |
| | | fill: '#e6f4ff', |
| | | stroke: '#1890ff' |
| | | }, |
| | | text: { |
| | | text: '连接' |
| | | } |
| | | } |
| | | }) |
| | |
| | | mkdata: {status: 888, statusName: '已完成'}, |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#fa8c16', |
| | | stroke: '#fa8c16' |
| | | rx: 0, |
| | | ry: 0, |
| | | fill: '#000000', |
| | | stroke: '#000000' |
| | | }, |
| | | text: { |
| | | fill: '#ffffff', |
| | |
| | | } |
| | | }) |
| | | |
| | | stencil.load([r1, r2, r3, r4, r5, r6, r7, r8], 'group1') |
| | | stencil.load([r1, r4, r5, r8], 'group1') |
| | | |
| | | const r2 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 20, |
| | | ry: 26, |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '过程' |
| | | } |
| | | } |
| | | }) |
| | | const r3 = graph.createNode({ |
| | | shape: 'mk-rect', |
| | | attrs: { |
| | | body: { |
| | | rx: 6, |
| | | ry: 6, |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '可选过程' |
| | | } |
| | | } |
| | | }) |
| | | const r6 = graph.createNode({ |
| | | shape: 'mk-paral', |
| | | attrs: { |
| | | body: { |
| | | refPoints: '10,0 40,0 30,20 0,20', |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '数据' |
| | | } |
| | | } |
| | | }) |
| | | const r7 = graph.createNode({ |
| | | shape: 'mk-circle', |
| | | attrs: { |
| | | body: { |
| | | fill: '#ffffff', |
| | | stroke: '#757575' |
| | | }, |
| | | text: { |
| | | fill: '#000000', |
| | | text: '连接' |
| | | } |
| | | } |
| | | }) |
| | | |
| | | const p1 = graph.createNode({ |
| | | shape: 'mk-ellipse', |
| | |
| | | shape: 'mk-text' |
| | | }) |
| | | |
| | | stencil.load([p1, p2, p3], 'group2') |
| | | stencil.load([r2, r3, r6, r7, p1, p2, p3], 'group2') |
| | | |
| | | if (this.cells.length > 0) { |
| | | let cells = [] |
| | |
| | | const stencil = new Stencil({ |
| | | title: '流程图', |
| | | target: graph, |
| | | stencilGraphWidth: 180, |
| | | stencilGraphWidth: 230, |
| | | stencilGraphHeight: 180, |
| | | groups: [ |
| | | { |
| | |
| | | ], |
| | | layoutOptions: { |
| | | columns: 2, |
| | | columnWidth: 80, |
| | | columnWidth: 110, |
| | | rowHeight: 55 |
| | | } |
| | | }) |