Commit 2576735adeb42ddd39bbaae6f4f5662df781b83a
Committed by
GitHub
1 parent
a863ad46
feat: add flowChart Component (#488)
Showing
33 changed files
with
1180 additions
and
0 deletions
package.json
... | ... | @@ -33,6 +33,8 @@ |
33 | 33 | }, |
34 | 34 | "dependencies": { |
35 | 35 | "@iconify/iconify": "^2.0.0-rc.6", |
36 | + "@logicflow/core": "^0.3.0", | |
37 | + "@logicflow/extension": "^0.3.0", | |
36 | 38 | "@vueuse/core": "^4.8.1", |
37 | 39 | "@zxcvbn-ts/core": "^0.3.0", |
38 | 40 | "ant-design-vue": "^2.1.2", |
... | ... | @@ -52,6 +54,7 @@ |
52 | 54 | "vditor": "^3.8.4", |
53 | 55 | "vue": "3.0.11", |
54 | 56 | "vue-i18n": "9.0.0", |
57 | + "vue-json-pretty": "^2.0.2", | |
55 | 58 | "vue-router": "^4.0.6", |
56 | 59 | "vue-types": "^3.0.2", |
57 | 60 | "xlsx": "^0.16.9" | ... | ... |
src/components/FlowChart/index.ts
0 → 100644
1 | +import { App } from 'vue'; | |
2 | +import control from './src/Control.vue'; | |
3 | +import nodePanel from './src/NodePanel.vue'; | |
4 | +import dataDialog from './src/DataDialog.vue'; | |
5 | + | |
6 | +export const Control = Object.assign(control, { | |
7 | + install(app: App) { | |
8 | + app.component(control.name, control); | |
9 | + }, | |
10 | +}); | |
11 | + | |
12 | +export const NodePanel = Object.assign(nodePanel, { | |
13 | + install(app: App) { | |
14 | + app.component(nodePanel.name, nodePanel); | |
15 | + }, | |
16 | +}); | |
17 | + | |
18 | +export const DataDialog = Object.assign(dataDialog, { | |
19 | + install(app: App) { | |
20 | + app.component(dataDialog.name, dataDialog); | |
21 | + }, | |
22 | +}); | ... | ... |
src/components/FlowChart/src/Control.vue
0 → 100644
1 | +<template> | |
2 | + <div class="control-container"> | |
3 | + <!-- 功能按钮 --> | |
4 | + <ul> | |
5 | + <li | |
6 | + v-for="(item, key) in titleLists" | |
7 | + :key="key" | |
8 | + :title="item.text" | |
9 | + @mouseenter.prevent="onEnter(key)" | |
10 | + @mouseleave.prevent="focusIndex = -1" | |
11 | + > | |
12 | + <a-button | |
13 | + :disabled="item.disabled" | |
14 | + :style="{ cursor: item.disabled === false ? 'pointer' : 'not-allowed' }" | |
15 | + @click="onControl(item, key)" | |
16 | + > | |
17 | + <span :class="'iconfont ' + item.icon"></span> | |
18 | + <p>{{ item.text }}</p> | |
19 | + </a-button> | |
20 | + </li> | |
21 | + </ul> | |
22 | + </div> | |
23 | +</template> | |
24 | + | |
25 | +<script lang="ts"> | |
26 | + import { defineComponent, ref, unref, onMounted } from 'vue'; | |
27 | + | |
28 | + export default defineComponent({ | |
29 | + name: 'Control', | |
30 | + props: { | |
31 | + lf: Object || String, | |
32 | + catTurboData: Boolean, | |
33 | + }, | |
34 | + emits: ['catData'], | |
35 | + setup(props, { emit }) { | |
36 | + let focusIndex = ref(-1); | |
37 | + let titleLists = ref([ | |
38 | + { | |
39 | + icon: 'icon-zoom-out-hs', | |
40 | + text: '缩小', | |
41 | + disabled: false, | |
42 | + }, | |
43 | + { | |
44 | + icon: 'icon-enlarge-hs', | |
45 | + text: '放大', | |
46 | + disabled: false, | |
47 | + }, | |
48 | + { | |
49 | + icon: 'icon-full-screen-hs', | |
50 | + text: '适应', | |
51 | + disabled: false, | |
52 | + }, | |
53 | + { | |
54 | + icon: 'icon-previous-hs', | |
55 | + text: '上一步', | |
56 | + disabled: true, | |
57 | + }, | |
58 | + { | |
59 | + icon: 'icon-next-step-hs', | |
60 | + text: '下一步', | |
61 | + disabled: true, | |
62 | + }, | |
63 | + { | |
64 | + icon: 'icon-download-hs', | |
65 | + text: '下载图片', | |
66 | + disabled: false, | |
67 | + }, | |
68 | + { | |
69 | + icon: 'icon-watch-hs', | |
70 | + text: '查看数据', | |
71 | + disabled: false, | |
72 | + }, | |
73 | + ]); | |
74 | + | |
75 | + const onControl = (item, key) => { | |
76 | + ['zoom', 'zoom', 'resetZoom', 'undo', 'redo', 'getSnapshot'].forEach((v, i) => { | |
77 | + let domControl = props.lf; | |
78 | + if (key === 1) { | |
79 | + domControl.zoom(true); | |
80 | + } | |
81 | + if (key === 6) { | |
82 | + emit('catData'); | |
83 | + } | |
84 | + if (key === i) { | |
85 | + domControl[v](); | |
86 | + } | |
87 | + }); | |
88 | + }; | |
89 | + | |
90 | + const onEnter = (key) => { | |
91 | + focusIndex.value = key; | |
92 | + }; | |
93 | + | |
94 | + onMounted(() => { | |
95 | + props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => { | |
96 | + unref(titleLists)[3].disabled = !undoAble; | |
97 | + unref(titleLists)[4].disabled = !redoAble; | |
98 | + }); | |
99 | + }); | |
100 | + | |
101 | + return { | |
102 | + focusIndex, | |
103 | + titleLists, | |
104 | + onControl, | |
105 | + onEnter, | |
106 | + }; | |
107 | + }, | |
108 | + }); | |
109 | +</script> | |
110 | + | |
111 | +<style scoped> | |
112 | + @import './assets/iconfont/iconfont.css'; | |
113 | + | |
114 | + .control-container { | |
115 | + position: absolute; | |
116 | + right: 20px; | |
117 | + background: hsla(0, 0%, 100%, 0.8); | |
118 | + box-shadow: 0 1px 4px rgb(0 0 0 / 30%); | |
119 | + } | |
120 | + | |
121 | + .iconfont { | |
122 | + font-size: 25px; | |
123 | + } | |
124 | + | |
125 | + .control-container p { | |
126 | + margin: 0; | |
127 | + font-size: 12px; | |
128 | + } | |
129 | + | |
130 | + .control-container ul { | |
131 | + display: flex; | |
132 | + justify-content: space-around; | |
133 | + align-items: center; | |
134 | + margin: 2px; | |
135 | + } | |
136 | + | |
137 | + .control-container ul li { | |
138 | + width: 60px; | |
139 | + text-align: center; | |
140 | + } | |
141 | + | |
142 | + .control-container ul li button { | |
143 | + width: 100%; | |
144 | + height: 60px; | |
145 | + padding: 0; | |
146 | + background-color: transparent; | |
147 | + border: none; | |
148 | + outline: none; | |
149 | + } | |
150 | +</style> | ... | ... |
src/components/FlowChart/src/DataDialog.vue
0 → 100644
1 | +<template> | |
2 | + <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="graphData" /> | |
3 | +</template> | |
4 | + | |
5 | +<script lang="ts"> | |
6 | + import VueJsonPretty from 'vue-json-pretty'; | |
7 | + import 'vue-json-pretty/lib/styles.css'; | |
8 | + import { defineComponent } from 'vue'; | |
9 | + export default defineComponent({ | |
10 | + name: 'DataDialog', | |
11 | + components: { | |
12 | + VueJsonPretty, | |
13 | + }, | |
14 | + props: { | |
15 | + graphData: Object, | |
16 | + }, | |
17 | + }); | |
18 | +</script> | ... | ... |
src/components/FlowChart/src/NodePanel.vue
0 → 100644
1 | +<template> | |
2 | + <!-- 左侧bpmn元素选择器 --> | |
3 | + <div class="node-panel"> | |
4 | + <div | |
5 | + class="node-item" | |
6 | + v-for="item in nodeList" | |
7 | + :key="item.text" | |
8 | + @mousedown="nodeDragNode(item)" | |
9 | + > | |
10 | + <div class="node-item-icon" :class="item.class"> | |
11 | + <div v-if="item.type === 'user' || item.type === 'time'" class="shape"></div> | |
12 | + </div> | |
13 | + <span class="node-label">{{ item.text }}</span> | |
14 | + </div> | |
15 | + </div> | |
16 | +</template> | |
17 | + | |
18 | +<script lang="ts"> | |
19 | + import { defineComponent, ref, unref } from 'vue'; | |
20 | + export default defineComponent({ | |
21 | + name: 'NodePanel', | |
22 | + props: { | |
23 | + lf: Object, | |
24 | + nodeList: Array, | |
25 | + }, | |
26 | + setup(props) { | |
27 | + let node = ref({ | |
28 | + type: 'rect', | |
29 | + property: { | |
30 | + a: 'efrwe', | |
31 | + b: 'wewe', | |
32 | + }, | |
33 | + }); | |
34 | + let properties = ref({ | |
35 | + a: 'efrwe', | |
36 | + b: 'wewe', | |
37 | + }); | |
38 | + | |
39 | + const nodeDragNode = (item) => { | |
40 | + props.lf.dnd.startDrag({ | |
41 | + type: item.type, | |
42 | + properties: unref(properties), | |
43 | + }); | |
44 | + }; | |
45 | + | |
46 | + return { | |
47 | + node, | |
48 | + properties, | |
49 | + nodeDragNode, | |
50 | + }; | |
51 | + }, | |
52 | + }); | |
53 | +</script> | |
54 | + | |
55 | +<style scoped> | |
56 | + .node-panel { | |
57 | + position: absolute; | |
58 | + top: 100px; | |
59 | + left: 50px; | |
60 | + z-index: 101; | |
61 | + width: 70px; | |
62 | + padding: 20px 10px; | |
63 | + text-align: center; | |
64 | + background-color: white; | |
65 | + border-radius: 6px; | |
66 | + box-shadow: 0 0 10px 1px rgb(228, 224, 219); | |
67 | + } | |
68 | + | |
69 | + .node-item { | |
70 | + margin-bottom: 20px; | |
71 | + } | |
72 | + | |
73 | + .node-item-icon { | |
74 | + display: flex; | |
75 | + height: 30px; | |
76 | + background-size: cover; | |
77 | + flex-wrap: wrap; | |
78 | + justify-content: center; | |
79 | + } | |
80 | + | |
81 | + .node-label { | |
82 | + margin-top: 5px; | |
83 | + font-size: 12px; | |
84 | + user-select: none; | |
85 | + } | |
86 | + | |
87 | + .node-start { | |
88 | + background: url('./background/start.png') no-repeat; | |
89 | + background-size: cover; | |
90 | + } | |
91 | + | |
92 | + .node-rect { | |
93 | + border: 1px solid black; | |
94 | + } | |
95 | + | |
96 | + .node-user { | |
97 | + background: url('./background/user.png') no-repeat; | |
98 | + background-size: cover; | |
99 | + } | |
100 | + | |
101 | + .node-time { | |
102 | + background: url('./background/time.png') no-repeat; | |
103 | + background-size: cover; | |
104 | + } | |
105 | + | |
106 | + .node-push { | |
107 | + background: url('./background/push.png') no-repeat; | |
108 | + background-size: cover; | |
109 | + } | |
110 | + | |
111 | + .node-download { | |
112 | + background: url('./background/download.png') no-repeat; | |
113 | + background-size: cover; | |
114 | + } | |
115 | + | |
116 | + .node-click { | |
117 | + background: url('./background/click.png') no-repeat; | |
118 | + background-size: cover; | |
119 | + } | |
120 | + | |
121 | + .node-end { | |
122 | + background: url('./background/end.png') no-repeat; | |
123 | + background-size: cover; | |
124 | + } | |
125 | + | |
126 | + .bpmn-start { | |
127 | + cursor: grab; | |
128 | + background: url('./assets/background/bpmn-start.png') center center no-repeat; | |
129 | + } | |
130 | + | |
131 | + .bpmn-end { | |
132 | + cursor: grab; | |
133 | + background: url('./assets/background/bpmn-end.png') center center no-repeat; | |
134 | + } | |
135 | + | |
136 | + .bpmn-user { | |
137 | + cursor: grab; | |
138 | + background: url('./assets/background/bpmn-user.png') center center no-repeat; | |
139 | + } | |
140 | + | |
141 | + .bpmn-exclusiveGateway { | |
142 | + cursor: grab; | |
143 | + background: url('./assets/background/bpmn-exclusiveGateway.png') center center no-repeat; | |
144 | + } | |
145 | +</style> | ... | ... |
src/components/FlowChart/src/adpterForTurbo.ts
0 → 100644
1 | +const TurboType = { | |
2 | + SEQUENCE_FLOW: 1, | |
3 | + START_EVENT: 2, | |
4 | + END_EVENT: 3, | |
5 | + USER_TASK: 4, | |
6 | + SERVICE_TASK: 5, | |
7 | + EXCLUSIVE_GATEWAY: 6, | |
8 | +}; | |
9 | + | |
10 | +function getTurboType(type) { | |
11 | + switch (type) { | |
12 | + case 'bpmn:sequenceFlow': | |
13 | + return TurboType.SEQUENCE_FLOW; | |
14 | + case 'bpmn:startEvent': | |
15 | + return TurboType.START_EVENT; | |
16 | + case 'bpmn:endEvent': | |
17 | + return TurboType.END_EVENT; | |
18 | + case 'bpmn:userTask': | |
19 | + return TurboType.USER_TASK; | |
20 | + case 'bpmn:serviceTask': | |
21 | + return TurboType.SERVICE_TASK; | |
22 | + case 'bpmn:exclusiveGateway': | |
23 | + return TurboType.EXCLUSIVE_GATEWAY; | |
24 | + default: | |
25 | + return type; | |
26 | + } | |
27 | +} | |
28 | + | |
29 | +function convertNodeToTurboElement(node) { | |
30 | + const { id, type, x, y, text = '', properties } = node; | |
31 | + return { | |
32 | + incoming: [], | |
33 | + outgoing: [], | |
34 | + dockers: [], | |
35 | + type: getTurboType(node.type), | |
36 | + properties: { | |
37 | + ...properties, | |
38 | + name: (text && text.value) || '', | |
39 | + x: x, | |
40 | + y: y, | |
41 | + text, | |
42 | + logicFlowType: type, | |
43 | + }, | |
44 | + key: id, | |
45 | + }; | |
46 | +} | |
47 | + | |
48 | +function convertEdgeToTurboElement(edge) { | |
49 | + const { | |
50 | + id, | |
51 | + type, | |
52 | + sourceNodeId, | |
53 | + targetNodeId, | |
54 | + startPoint, | |
55 | + endPoint, | |
56 | + pointsList, | |
57 | + text = '', | |
58 | + properties, | |
59 | + } = edge; | |
60 | + return { | |
61 | + incoming: [sourceNodeId], | |
62 | + outgoing: [targetNodeId], | |
63 | + type: getTurboType(type), | |
64 | + dockers: [], | |
65 | + properties: { | |
66 | + ...properties, | |
67 | + name: (text && text.value) || '', | |
68 | + text, | |
69 | + startPoint, | |
70 | + endPoint, | |
71 | + pointsList, | |
72 | + logicFlowType: type, | |
73 | + }, | |
74 | + key: id, | |
75 | + }; | |
76 | +} | |
77 | + | |
78 | +export function toTurboData(data) { | |
79 | + const nodeMap = new Map(); | |
80 | + const turboData = { | |
81 | + flowElementList: [], | |
82 | + }; | |
83 | + data.nodes.forEach((node) => { | |
84 | + const flowElement = convertNodeToTurboElement(node); | |
85 | + turboData.flowElementList.push(flowElement); | |
86 | + nodeMap.set(node.id, flowElement); | |
87 | + }); | |
88 | + data.edges.forEach((edge) => { | |
89 | + const flowElement = convertEdgeToTurboElement(edge); | |
90 | + const sourceElement = nodeMap.get(edge.sourceNodeId); | |
91 | + sourceElement.outgoing.push(flowElement.key); | |
92 | + const targetElement = nodeMap.get(edge.targetNodeId); | |
93 | + targetElement.incoming.push(flowElement.key); | |
94 | + turboData.flowElementList.push(flowElement); | |
95 | + }); | |
96 | + return turboData; | |
97 | +} | |
98 | + | |
99 | +function convertFlowElementToEdge(element) { | |
100 | + const { incoming, outgoing, properties, key } = element; | |
101 | + const { text, startPoint, endPoint, pointsList, logicFlowType } = properties; | |
102 | + const edge = { | |
103 | + id: key, | |
104 | + type: logicFlowType, | |
105 | + sourceNodeId: incoming[0], | |
106 | + targetNodeId: outgoing[0], | |
107 | + text, | |
108 | + startPoint, | |
109 | + endPoint, | |
110 | + pointsList, | |
111 | + properties: {}, | |
112 | + }; | |
113 | + const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType']; | |
114 | + Object.keys(element.properties).forEach((property) => { | |
115 | + if (excludeProperties.indexOf(property) === -1) { | |
116 | + edge.properties[property] = element.properties[property]; | |
117 | + } | |
118 | + }); | |
119 | + return edge; | |
120 | +} | |
121 | + | |
122 | +function convertFlowElementToNode(element) { | |
123 | + const { properties, key } = element; | |
124 | + const { x, y, text, logicFlowType } = properties; | |
125 | + const node = { | |
126 | + id: key, | |
127 | + type: logicFlowType, | |
128 | + x, | |
129 | + y, | |
130 | + text, | |
131 | + properties: {}, | |
132 | + }; | |
133 | + const excludeProperties = ['x', 'y', 'text', 'logicFlowType']; | |
134 | + Object.keys(element.properties).forEach((property) => { | |
135 | + if (excludeProperties.indexOf(property) === -1) { | |
136 | + node.properties[property] = element.properties[property]; | |
137 | + } | |
138 | + }); | |
139 | + return node; | |
140 | +} | |
141 | + | |
142 | +export function toLogicflowData(data) { | |
143 | + const lfData = { | |
144 | + nodes: [], | |
145 | + edges: [], | |
146 | + }; | |
147 | + const list = data.flowElementList; | |
148 | + list && | |
149 | + list.length > 0 && | |
150 | + list.forEach((element) => { | |
151 | + if (element.type === TurboType.SEQUENCE_FLOW) { | |
152 | + const edge = convertFlowElementToEdge(element); | |
153 | + lfData.edges.push(edge); | |
154 | + } else { | |
155 | + const node = convertFlowElementToNode(element); | |
156 | + lfData.nodes.push(node); | |
157 | + } | |
158 | + }); | |
159 | + return lfData; | |
160 | +} | ... | ... |
src/components/FlowChart/src/assets/background/bpmn-end.png
0 → 100644
921 Bytes
src/components/FlowChart/src/assets/background/bpmn-exclusiveGateway.png
0 → 100644
830 Bytes
src/components/FlowChart/src/assets/background/bpmn-start.png
0 → 100644
697 Bytes
src/components/FlowChart/src/assets/background/bpmn-user.png
0 → 100644
754 Bytes
src/components/FlowChart/src/assets/background/click.png
0 → 100644
2.6 KB
src/components/FlowChart/src/assets/background/download.png
0 → 100644
1.98 KB
src/components/FlowChart/src/assets/background/end.png
0 → 100644
4.77 KB
src/components/FlowChart/src/assets/background/push.png
0 → 100644
2.23 KB
src/components/FlowChart/src/assets/background/start.png
0 → 100644
3.86 KB
src/components/FlowChart/src/assets/background/time.png
0 → 100644
2.92 KB
src/components/FlowChart/src/assets/background/user.png
0 → 100644
39.8 KB
src/components/FlowChart/src/assets/iconfont/iconfont.css
0 → 100644
1 | +@font-face { | |
2 | + font-family: 'iconfont'; | |
3 | + src: url('iconfont.eot?t=1618544337340'); /* IE9 */ | |
4 | + src: url('iconfont.eot?t=1618544337340#iefix') format('embedded-opentype'), | |
5 | + /* IE6-IE8 */ | |
6 | + url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAZ0AAsAAAAADKgAAAYmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDZAqLQIldATYCJAMgCxIABCAFhG0HgQkb6ApRlA9Sk+xngd1wXQyjTXRCW7pkEvLB0N9/pZhyo7nvIIK1Nisnipg3omjUREiURDXNNEL/jDRCI5H/riTu/9q0D5OakT05VaM3E4kMJI2QhanZillesmYnVT0pD5+399suTrCEkjDhqLtAxyURhIU6Ser/1tp8aDPgI2g7ex2ah+Q7i0rI+Gy9rSNYOtEEdPFQVkrlj/1c3oZFk6Sv/bYQqWUunsgkk8QRkrgkCJEKpUcO8zx0cFLQr+x6CEiNi0BN2YWV4MwJhmDEqhdU4BwR8oIOEXPCjGMzcoKDuLmnLwLw6vy9vMCFM6ggIW50umRpIbVW14U29L/QmIZgqDs5cD0JDKwCHFIylReQ51yFpO+XKBwDcjHltbq9801mxdeFzX8inbguoAq1yCWzpH95JuRUJIC0EDPH5nNGtIkkA4GgvROBocpEEKLCCBwVj0BRF/CJHFYhEo9WCbF1TCdgEEgF0A0Ee8NxioIeN97QzQqFMd2tdfIJC3KeK0T3eJYu0J07g6BVbCB0IiDVDNsQ1mFcbNxDCTk6IWEb2ShHfHxUlvAjkfj0mHDhC56GAL4CWMUgQXgEywDxuH0TBAD7gDZuRqtx7KWpnyTbushlJUpytdfnUvoS/pXG880npIYe3wueUdIJoa9HlRgdsYiF5QJv8C2zjIbzXERGQmwH0QylmjJfC4evBB8UUKQZMsAMG2aWMU6nc6s9m7X4Thn0gTfomgnm5d0qwX4v0rQH3GZn4Ajp8F2VeUcTTARpA+FfyLcpc+T05bOemT2fny8EH8Vn4LPFh3htyOtB3jDSJj34IpEQ3HNboUdasWNDQifcA8BfPPkTe6YaWp0nF/IrhQHGW2D5HTO7O2zfTH3+gxip/NioTs9VwUXL7T3AbzTxHa3qSu1e4EZTfZl/QiC2c7UI5jZ/ET938pSH8Z8IPBwU0NopeLgB7h6Kvp0GVCOw72KAjKFA71sPKX7/9g+Js/AmNfj8/o28sqNVdSTVI93p08F3v/75zqw8W79vb0RVaCTrw6aNntrQwCtbzzDKosTRFMjp/WFqtpZUEGxsi6P8L09byvlyrrvUJ6/ZFJR/X32mbUmndlduWjbdnwnY2ZBHo8OIKIVDUJah62hi4aKdSoqZsWypN7d0w6nsAzb12tWrqZOl12+W/W7YyLFxDy/7U369cgFF85PUVevYahz8y/HS9ZGrbv7saR0sn5MfEzhinC2Dizcv5xHycyChG33pcskigbRkvXnDaurRjRuIeDdu4rnSgPQ/L196FHQg6FGs7266c82aTtDT1jU0CqzWoG2Ndf91wRo1g/0wo9b4VPtV+2iwl/fjvxq4f83CBZeYgx6njp8mb7jzou9FfPdwBBpffvyUx6XARoc/1umGwtrl034lryLH/YCEwly/XrrckYHsd+/YWY/u3EGI085rV6RD5+Bw7dqnoAvBjzifw3S3zdaNZL/dRnfz7XZup232DX4VtD6Cn+AzkqFgBq6unr/gwtCDuydN51fk76ocHS/nN25Y/WqMe1fzBRgEQHPEjqE0gIbkR1CKM/zYUukn9ItRVMHwLfuO1kaP2mlUivpAUpbb8f5wZS1eib+cs3/qlD9r8DU2NEccqhPVFos3SRGSKtb4hyJEcX6VZhArj8Y+edgVpHICKD9tt8ddsvuYpNLZfQGoyBiY2CzKm1chkFmHUGwbUityTs70kCCSE2DZZADRaSeo0heYTpdQ3vwIAv0+QagzEKTOQnnOzHzoXTMkrCJYy6q7Wb1GNPO6hLi6keVYaDeqpDDFGarGkqy3sLFRMXFPDjZjqYsD5A6BI4RneUk0sdlwM2w0iqxFEtuwhkTpCLHER0fzWQ+I0ogmcLVPgqkQmBZLrdvC1tMQmfGTE66J3y+HCdoZqUgFBd/Y1TCJTL92VqwoMRVQOUxzpYJTiZd1EHAIyXmskS4RmbCySY4ZpVPEsmRv1QbTIKLoGtgt4kVTI74qM2p4tulMzwFS4qPiUDFxCSSUSGJJKJd2ozFS1kgYmyN1snOnimh0brybVuw0G0WV9iF3xeYjFAg4LcEi4Q692C7TUI8omiJRZAN3M+4ikTLBlosAAAA=') | |
7 | + format('woff2'), | |
8 | + url('iconfont.woff?t=1618544337340') format('woff'), | |
9 | + url('iconfont.ttf?t=1618544337340') format('truetype'), | |
10 | + /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ | |
11 | + url('iconfont.svg?t=1618544337340#iconfont') format('svg'); /* iOS 4.1- */ | |
12 | +} | |
13 | + | |
14 | +.iconfont { | |
15 | + font-family: 'iconfont' !important; | |
16 | + font-size: 16px; | |
17 | + font-style: normal; | |
18 | + -webkit-font-smoothing: antialiased; | |
19 | + -moz-osx-font-smoothing: grayscale; | |
20 | +} | |
21 | + | |
22 | +.icon-full-screen-hs:before { | |
23 | + content: '\e656'; | |
24 | +} | |
25 | + | |
26 | +.icon-watch-hs:before { | |
27 | + content: '\e766'; | |
28 | +} | |
29 | + | |
30 | +.icon-download-hs:before { | |
31 | + content: '\e6af'; | |
32 | +} | |
33 | + | |
34 | +.icon-enlarge-hs:before { | |
35 | + content: '\e765'; | |
36 | +} | |
37 | + | |
38 | +.icon-previous-hs:before { | |
39 | + content: '\e84c'; | |
40 | +} | |
41 | + | |
42 | +.icon-zoom-out-hs:before { | |
43 | + content: '\e744'; | |
44 | +} | |
45 | + | |
46 | +.icon-next-step-hs:before { | |
47 | + content: '\e84b'; | |
48 | +} | ... | ... |
src/components/FlowChart/src/assets/iconfont/iconfont.eot
0 → 100644
No preview for this file type
src/components/FlowChart/src/assets/iconfont/iconfont.js
0 → 100644
1 | +!(function (c) { | |
2 | + var t, | |
3 | + e, | |
4 | + o, | |
5 | + a, | |
6 | + n, | |
7 | + l, | |
8 | + i = | |
9 | + '<svg><symbol id="icon-full-screen-hs" viewBox="0 0 1024 1024"><path d="M960.605 932.345v-240.231c0.045-7.2-2.723-14.445-8.213-19.98-11.115-11.047-29.002-11.047-40.071 0-5.535 5.535-8.303 12.757-8.303 19.98v171.923l-351.99-352.035 351.99-352.013v171.855c0 7.245 2.767 14.49 8.303 20.002 11.070 11.070 28.957 11.070 40.071 0 5.49-5.511 8.257-12.78 8.213-20.002v-240.187c0.045-7.223-2.723-14.468-8.213-20.003-5.58-5.511-12.803-8.279-20.025-8.302h-240.233c-7.222 0-14.467 2.79-19.98 8.302-11.115 11.049-11.115 28.957 0 40.050 5.511 5.535 12.735 8.302 19.98 8.279h171.9l-352.013 352.013-352.012-352.035h171.855c7.268 0.022 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.49-5.511-12.758-8.279-20.025-8.303h-240.187c-7.268 0-14.513 2.79-20.025 8.303-5.513 5.558-8.279 12.803-8.279 20.048v240.165c0 7.245 2.79 14.512 8.279 20.002 11.070 11.070 28.98 11.070 40.028 0 5.513-5.511 8.279-12.713 8.279-20.002v-171.855l352.058 352.012-352.035 352.035v-171.922c0-7.2-2.745-14.445-8.279-19.98-11.070-11.047-29.002-11.047-40.028 0-5.558 5.535-8.279 12.757-8.279 19.98v240.231c0 7.223 2.79 14.468 8.279 20.048 5.535 5.468 12.757 8.279 20.025 8.279h240.188c7.268 0 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.535-5.535-12.78-8.257-20.025-8.257h-171.877l352.012-352.035 352.013 352.035h-171.9c-7.222 0-14.467 2.768-19.98 8.257-11.115 11.049-11.115 29.002 0 40.050 5.511 5.468 12.735 8.279 19.98 8.279h240.255c7.2 0 14.445-2.813 20.025-8.279 5.467-5.602 8.19-12.825 8.19-20.048z" ></path></symbol><symbol id="icon-watch-hs" viewBox="0 0 1024 1024"><path d="M511.08 630.42c0.39-0.09 0.8-0.14 1.2-0.2h-0.52zM651 490.5c0 0.2-0.09 0.4-0.13 0.59s0 0.14 0 0.2c0.03-0.29 0.07-0.53 0.13-0.79zM471.17 630.42l-0.84-0.18h-0.31c0.38 0.03 0.77 0.1 1.15 0.18zM331.49 449v0.36c0.08-0.51 0.16-1 0.23-1.52-0.12 0.37-0.19 0.78-0.23 1.16zM468.88 630.1l1.14 0.11c-0.83-0.13-1.67-0.23-2.5-0.36a10 10 0 0 0 1.36 0.25zM331.57 492.78a11.92 11.92 0 0 0 0.24 1.36c-0.13-0.87-0.24-1.76-0.38-2.64 0.05 0.43 0.09 0.86 0.14 1.28zM331.25 490.5c0.07 0.33 0.13 0.66 0.18 1v-0.23zM331.25 450.58c0.05-0.26 0.1-0.5 0.15-0.73s0-0.34 0.05-0.51c-0.06 0.42-0.12 0.84-0.2 1.24zM650.84 491.41v-0.12c-0.07 0.41-0.13 0.83-0.19 1.24 0.09-0.4 0.15-0.8 0.19-1.12z" ></path><path d="M512 65C264.66 65 65 264.66 65 512s199.66 447 447 447 447-199.66 447-447S759.34 65 512 65z m213.38 684.87c-8.76 9.55-25 8.88-33.91 0l-12.3-12.3q-42.64-42.63-85.28-85.28a200 200 0 0 1-59.3 22.52 214 214 0 0 1-131.48-14.95c-37.52-16.92-69.56-46.36-90.86-81.46-22-36.33-32.73-80.15-29.4-122.54a213.12 213.12 0 0 1 48.3-119.42c54.37-66.3 150.16-92.22 230.58-62.43a214.42 214.42 0 0 1 100.68 77.16c24.62 34.5 37.4 77.11 37.56 119.37a235.67 235.67 0 0 1-2.92 34.06c-6.88 45.84-30.52 87.73-64.1 118.92l5.81 5.81L725.38 716c9.48 9.43 8.79 24.3 0 33.87z" ></path><path d="M635.31 542.1c1.2-2.36 2.34-4.74 3.44-7.15 0.28-0.61 0.54-1.22 0.81-1.83 1.5-3.86 3-7.72 4.25-11.67a183.83 183.83 0 0 0 6.56-26.9c0.11-0.66 0.2-1.34 0.29-2-0.35 1.85-0.91 3.8 0.21-1.44 0.24-2.18 0.45-4.37 0.61-6.56 0.35-4.66 0.51-9.32 0.52-14s-0.17-9.33-0.52-14q-0.26-3.45-0.64-6.88v-0.08c-1-6-0.2-1.67 0 0 0 0.31 0.11 0.63 0.17 1-0.16-0.89-0.27-1.8-0.41-2.7a182.65 182.65 0 0 0-6.6-27.62c-1.38-4.27-3-8.41-4.59-12.61-0.32-0.71-0.63-1.42-1-2.13-0.92-2-1.87-4-2.87-6a184.55 184.55 0 0 0-13.85-23.12c-1.11-1.58-7-8.66-1.71-2.52-1.42-1.65-2.72-3.42-4.12-5.09q-4.2-5-8.75-9.73c-6.1-6.32-12.78-11.79-19.44-17.49 6.14 5.26-0.94-0.6-2.52-1.71-1.79-1.26-3.6-2.48-5.43-3.68q-5.52-3.59-11.27-6.78-6.07-3.36-12.38-6.26c-0.75-0.35-1.51-0.68-2.26-1-1.64-0.62-3.25-1.3-4.9-1.9a181.3 181.3 0 0 0-27.13-7.74c-2.67-0.55-5.36-1-8.05-1.46-0.9-0.14-1.81-0.25-2.71-0.41l1 0.17c1.67 0.2 6 1 0 0H512q-6.56-0.75-13.15-1a188.34 188.34 0 0 0-28.4 1c-1.1 0.2-2.25 0.31-3.34 0.49-2.24 0.37-4.48 0.78-6.7 1.24q-6.63 1.35-13.14 3.18c-4.29 1.21-8.55 2.58-12.75 4.1-2 0.72-4 1.51-6 2.28l-1.84 0.82a185.92 185.92 0 0 0-24.25 13.32q-3.3 2.16-6.51 4.44c-0.74 0.53-3.82 2.89-3.93 2.93-0.71 0.57-1.41 1.14-2.1 1.72q-2.52 2.1-5 4.27a186.27 186.27 0 0 0-18.65 19.25c-1.32 1.58-6.2 9-2 2.31-1.16 1.83-2.62 3.53-3.86 5.3q-3.78 5.37-7.17 11T346.94 399q-1.5 3-2.89 5.95c-0.86 1.86-3.23 8.91-0.78 1.56-3 8.94-6.46 17.52-8.69 26.72q-1.68 6.94-2.82 14c0 0.21-0.05 0.42-0.08 0.62 0.29-1.51 0.67-2.55-0.28 2-0.2 1.77-0.38 3.54-0.53 5.32a188.09 188.09 0 0 0-0.11 29.36c0.17 2.25 0.41 4.49 0.65 6.74 0.8 3.86 0.63 3.81 0.4 2.87l0.06 0.41q1.06 6.38 2.56 12.66a200.32 200.32 0 0 0 8.27 26c0.46 1 0.89 2 1.35 3q1.4 3 2.89 6 3 5.86 6.39 11.53 3.56 5.89 7.54 11.54c1.13 1.59 2.44 3.11 3.49 4.76-4.09-6.45-0.21-0.31 1.12 1.3a185.34 185.34 0 0 0 19 19.82q2.92 2.63 5.95 5.13c1.62 1.33 7.76 5.22 1.31 1.12 3.49 2.22 6.72 4.91 10.18 7.19a184.79 184.79 0 0 0 23.59 13.12c1 0.48 2.06 0.93 3.09 1.4 2 0.76 3.94 1.54 5.92 2.26 4.2 1.52 8.46 2.89 12.75 4.1s8.72 2.29 13.14 3.18c2.22 0.46 4.46 0.87 6.7 1.24l0.41 0.06c-0.93-0.22-1-0.39 2.81 0.39a200.31 200.31 0 0 0 27.82 1q6.83-0.25 13.61-1c4.64-1 3.6-0.58 2.08-0.28l0.62-0.09c2-0.33 4-0.69 6-1.08a183.29 183.29 0 0 0 27.22-7.55c2.26-0.81 4.49-1.87 6.76-2.64 0.75-0.34 1.51-0.67 2.25-1q5.7-2.64 11.2-5.66c7.94-4.37 15-9.82 22.58-14.65-6.69 4.25 0.74-0.64 2.31-2s3.32-2.83 4.95-4.29q4.86-4.38 9.4-9.08 4.79-5 9.17-10.23c1.26-1.51 2.43-3.1 3.7-4.59-5.06 5.91-0.2 0.17 1-1.45a185.86 185.86 0 0 0 14.31-23.66z" ></path><path d="M512.68 630.18l1.16-0.19-1.56 0.23z" ></path></symbol><symbol id="icon-download-hs" viewBox="0 0 1024 1024"><path d="M200 834h632v88a8 8 0 0 1-8 8H192v-88a8 8 0 0 1 8-8z m239-262.037V185c0-13.255 10.745-24 24-24h104v401.473l141.997-137.148c9.534-9.209 24.728-8.945 33.936 0.59l0.004 0.003 72.205 74.799-304.959 294.546c-9.534 9.208-24.728 8.944-33.936-0.59l-0.003-0.004-71.859-74.44-0.063 0.062-205.587-212.927c-9.206-9.534-8.941-24.724 0.59-33.932l74.782-72.246L439 571.963z" ></path></symbol><symbol id="icon-enlarge-hs" viewBox="0 0 1024 1024"><path d="M945.159 867.61l-206.543-206.538c49.578-63.772 79.108-143.903 79.108-230.953 0-207.97-168.58-376.547-376.639-376.547-207.97 0-376.547 168.577-376.547 376.547 0 208.038 168.577 376.614 376.547 376.614 87.059 0 167.197-29.532 230.973-79.108l206.543 206.544c9.171 9.17 21.227 13.802 33.278 13.802s24.106-4.629 33.28-13.802c18.431-18.43 18.431-48.215 0-66.559v0zM158.701 430.119c0-155.737 126.65-282.39 282.39-282.39 155.826 0 282.477 126.65 282.477 282.39 0 155.805-126.65 282.458-282.477 282.458-155.739 0-282.39-126.65-282.39-282.458v0z" ></path><path d="M579.708 389.853h-98.352v-98.352c0-22.272-17.991-40.268-40.268-40.352-22.185 0.086-40.267 18.078-40.267 40.352v98.352h-98.352c-22.272 0-40.268 17.991-40.268 40.179 0 22.272 17.991 40.352 40.268 40.352h98.352v98.352c0 22.252 18.080 40.246 40.267 40.333 22.274-0.086 40.268-18.080 40.268-40.333v-98.352h98.352c22.272 0 40.355-18.079 40.267-40.352 0-22.187-17.991-40.179-40.267-40.179v0z" ></path></symbol><symbol id="icon-previous-hs" viewBox="0 0 1024 1024"><path d="M814.933333 482.133333C716.8 384 597.333333 328.533333 460.8 315.733333V128c0-17.066667-8.533333-34.133333-25.6-38.4-17.066667-8.533333-34.133333-4.266667-46.933333 8.533333L29.866667 473.6c-17.066667 17.066667-17.066667 42.666667 0 59.733333l358.4 392.533334c8.533333 8.533333 21.333333 12.8 34.133333 12.8 4.266667 0 8.533333 0 17.066667-4.266667 17.066667-4.266667 25.6-21.333333 25.6-38.4v-204.8c68.266667-8.533333 128-4.266667 192 12.8 76.8 21.333333 170.666667 93.866667 273.066666 213.333333 12.8 12.8 29.866667 21.333333 51.2 12.8 17.066667-8.533333 29.866667-25.6 25.6-42.666666-21.333333-162.133333-85.333333-298.666667-192-405.333334z" ></path></symbol><symbol id="icon-zoom-out-hs" viewBox="0 0 1024 1024"><path d="M951.643 877.547l-210.337-210.335c50.487-64.946 80.56-146.547 80.56-235.199 0-211.793-171.681-383.472-383.563-383.472-211.792 0-383.471 171.679-383.471 383.472 0 211.862 171.679 383.538 383.471 383.538 88.661 0 170.271-30.075 235.218-80.56l210.337 210.339c9.34 9.339 21.614 14.055 33.89 14.055s24.551-4.716 33.892-14.055c18.77-18.77 18.77-49.101 0-67.781v0zM150.725 432.011c0-158.601 128.978-287.58 287.58-287.58 158.691 0 287.671 128.978 287.671 287.58 0 158.668-128.978 287.651-287.671 287.651-158.601 0-287.58-128.978-287.58-287.651v0z" ></path><path d="M397.297 391.004h-100.16c-22.683 0-41.008 18.324-41.008 40.919 0 22.683 18.324 41.094 41.008 41.094h282.333c22.683 0 41.095-18.412 41.007-41.094 0-22.595-18.324-40.919-41.007-40.919v0h-182.173z" ></path></symbol><symbol id="icon-next-step-hs" viewBox="0 0 1024 1024"><path d="M209.066667 482.133333c98.133333-98.133333 213.333333-153.6 349.866666-166.4V128c0-17.066667 8.533333-34.133333 25.6-38.4 17.066667-8.533333 34.133333-4.266667 46.933334 8.533333l358.4 375.466667c17.066667 17.066667 17.066667 42.666667 0 59.733333l-358.4 392.533334c-8.533333 8.533333-21.333333 12.8-29.866667 12.8-4.266667 0-8.533333 0-17.066667-4.266667-17.066667-4.266667-25.6-21.333333-25.6-38.4v-204.8c-68.266667-8.533333-128-4.266667-192 12.8-76.8 21.333333-170.666667 93.866667-273.066666 213.333333-8.533333 17.066667-29.866667 21.333333-46.933334 12.8-17.066667-8.533333-29.866667-25.6-25.6-42.666666 17.066667-162.133333 81.066667-298.666667 187.733334-405.333334z" ></path></symbol></svg>', | |
10 | + s = (s = document.getElementsByTagName('script'))[s.length - 1].getAttribute('data-injectcss'); | |
11 | + if (s && !c.__iconfont__svg__cssinject__) { | |
12 | + c.__iconfont__svg__cssinject__ = !0; | |
13 | + try { | |
14 | + document.write( | |
15 | + '<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>' | |
16 | + ); | |
17 | + } catch (c) { | |
18 | + console && console.log(c); | |
19 | + } | |
20 | + } | |
21 | + function h() { | |
22 | + n || ((n = !0), o()); | |
23 | + } | |
24 | + (t = function () { | |
25 | + var c, t, e, o; | |
26 | + ((o = document.createElement('div')).innerHTML = i), | |
27 | + (i = null), | |
28 | + (e = o.getElementsByTagName('svg')[0]) && | |
29 | + (e.setAttribute('aria-hidden', 'true'), | |
30 | + (e.style.position = 'absolute'), | |
31 | + (e.style.width = 0), | |
32 | + (e.style.height = 0), | |
33 | + (e.style.overflow = 'hidden'), | |
34 | + (c = e), | |
35 | + (t = document.body).firstChild | |
36 | + ? ((o = c), (e = t.firstChild).parentNode.insertBefore(o, e)) | |
37 | + : t.appendChild(c)); | |
38 | + }), | |
39 | + document.addEventListener | |
40 | + ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) | |
41 | + ? setTimeout(t, 0) | |
42 | + : ((e = function () { | |
43 | + document.removeEventListener('DOMContentLoaded', e, !1), t(); | |
44 | + }), | |
45 | + document.addEventListener('DOMContentLoaded', e, !1)) | |
46 | + : document.attachEvent && | |
47 | + ((o = t), | |
48 | + (a = c.document), | |
49 | + (n = !1), | |
50 | + (l = function () { | |
51 | + try { | |
52 | + a.documentElement.doScroll('left'); | |
53 | + } catch (c) { | |
54 | + return void setTimeout(l, 50); | |
55 | + } | |
56 | + h(); | |
57 | + })(), | |
58 | + (a.onreadystatechange = function () { | |
59 | + 'complete' == a.readyState && ((a.onreadystatechange = null), h()); | |
60 | + })); | |
61 | +})(window); | ... | ... |
src/components/FlowChart/src/assets/iconfont/iconfont.json
0 → 100644
1 | +{ | |
2 | + "id": "2491438", | |
3 | + "name": "liu'c'tu", | |
4 | + "font_family": "iconfont", | |
5 | + "css_prefix_text": "icon-", | |
6 | + "description": "", | |
7 | + "glyphs": [ | |
8 | + { | |
9 | + "icon_id": "755619", | |
10 | + "name": "自适应图标", | |
11 | + "font_class": "full-screen-hs", | |
12 | + "unicode": "e656", | |
13 | + "unicode_decimal": 58966 | |
14 | + }, | |
15 | + { | |
16 | + "icon_id": "14445801", | |
17 | + "name": "查看", | |
18 | + "font_class": "watch-hs", | |
19 | + "unicode": "e766", | |
20 | + "unicode_decimal": 59238 | |
21 | + }, | |
22 | + { | |
23 | + "icon_id": "9712640", | |
24 | + "name": "下载", | |
25 | + "font_class": "download-hs", | |
26 | + "unicode": "e6af", | |
27 | + "unicode_decimal": 59055 | |
28 | + }, | |
29 | + { | |
30 | + "icon_id": "1029099", | |
31 | + "name": "放大", | |
32 | + "font_class": "enlarge-hs", | |
33 | + "unicode": "e765", | |
34 | + "unicode_decimal": 59237 | |
35 | + }, | |
36 | + { | |
37 | + "icon_id": "20017362", | |
38 | + "name": "上一步", | |
39 | + "font_class": "previous-hs", | |
40 | + "unicode": "e84c", | |
41 | + "unicode_decimal": 59468 | |
42 | + }, | |
43 | + { | |
44 | + "icon_id": "1010015", | |
45 | + "name": "缩小", | |
46 | + "font_class": "zoom-out-hs", | |
47 | + "unicode": "e744", | |
48 | + "unicode_decimal": 59204 | |
49 | + }, | |
50 | + { | |
51 | + "icon_id": "20017363", | |
52 | + "name": "下一步", | |
53 | + "font_class": "next-step-hs", | |
54 | + "unicode": "e84b", | |
55 | + "unicode_decimal": 59467 | |
56 | + } | |
57 | + ] | |
58 | +} | ... | ... |
src/components/FlowChart/src/assets/iconfont/iconfont.svg
0 → 100644
1 | +<?xml version="1.0" standalone="no"?> | |
2 | +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > | |
3 | +<!-- | |
4 | +2013-9-30: Created. | |
5 | +--> | |
6 | +<svg> | |
7 | +<metadata> | |
8 | +Created by iconfont | |
9 | +</metadata> | |
10 | +<defs> | |
11 | + | |
12 | +<font id="iconfont" horiz-adv-x="1024" > | |
13 | + <font-face | |
14 | + font-family="iconfont" | |
15 | + font-weight="500" | |
16 | + font-stretch="normal" | |
17 | + units-per-em="1024" | |
18 | + ascent="896" | |
19 | + descent="-128" | |
20 | + /> | |
21 | + <missing-glyph /> | |
22 | + | |
23 | + <glyph glyph-name="full-screen-hs" unicode="" d="M960.605-36.34500000000003v240.231c0.045 7.2-2.723 14.445-8.213 19.98-11.115 11.047-29.002 11.047-40.071 0-5.535-5.535-8.303-12.757-8.303-19.98v-171.923l-351.99 352.035 351.99 352.013v-171.855c0-7.245 2.767-14.49 8.303-20.002 11.07-11.07 28.957-11.07 40.071 0 5.49 5.511 8.257 12.78 8.213 20.002v240.187c0.045 7.223-2.723 14.468-8.213 20.003-5.58 5.511-12.803 8.279-20.025 8.302h-240.233c-7.222 0-14.467-2.79-19.98-8.302-11.115-11.049-11.115-28.957 0-40.05 5.511-5.535 12.735-8.302 19.98-8.279h171.9l-352.013-352.013-352.012 352.035h171.855c7.268-0.022 14.49 2.745 20.025 8.279 11.07 11.047 11.07 29.002 0 40.05-5.49 5.511-12.758 8.279-20.025 8.303h-240.187c-7.268 0-14.513-2.79-20.025-8.303-5.513-5.558-8.279-12.803-8.279-20.048v-240.165c0-7.245 2.79-14.512 8.279-20.002 11.07-11.07 28.98-11.07 40.028 0 5.513 5.511 8.279 12.713 8.279 20.002v171.855l352.058-352.012-352.035-352.035v171.922c0 7.2-2.745 14.445-8.279 19.98-11.07 11.047-29.002 11.047-40.028 0-5.558-5.535-8.279-12.757-8.279-19.98v-240.231c0-7.223 2.79-14.468 8.279-20.048 5.535-5.468 12.757-8.279 20.025-8.279h240.188c7.268 0 14.49 2.745 20.025 8.279 11.07 11.047 11.07 29.002 0 40.05-5.535 5.535-12.78 8.257-20.025 8.257h-171.877l352.012 352.035 352.013-352.035h-171.9c-7.222 0-14.467-2.768-19.98-8.257-11.115-11.049-11.115-29.002 0-40.05 5.511-5.468 12.735-8.279 19.98-8.279h240.255c7.2 0 14.445 2.813 20.025 8.279 5.467 5.602 8.19 12.825 8.19 20.048z" horiz-adv-x="1024" /> | |
24 | + | |
25 | + | |
26 | + <glyph glyph-name="watch-hs" unicode="" d="M511.08 265.58000000000004c0.39 0.09 0.8 0.14 1.2 0.2h-0.52zM651 405.5c0-0.2-0.09-0.4-0.13-0.59s0-0.14 0-0.2c0.03 0.29 0.07 0.53 0.13 0.79zM471.17 265.58000000000004l-0.84 0.18h-0.31c0.38-0.03 0.77-0.1 1.15-0.18zM331.49 447v-0.36c0.08 0.51 0.16 1 0.23 1.52-0.12-0.37-0.19-0.78-0.23-1.16zM468.88 265.9l1.14-0.11c-0.83 0.13-1.67 0.23-2.5 0.36a10 10 0 0 1 1.36-0.25zM331.57 403.22a11.92 11.92 0 0 1 0.24-1.36c-0.13 0.87-0.24 1.76-0.38 2.64 0.05-0.43 0.09-0.86 0.14-1.28zM331.25 405.5c0.07-0.33 0.13-0.66 0.18-1v0.23zM331.25 445.42c0.05 0.26 0.1 0.5 0.15 0.73s0 0.34 0.05 0.51c-0.06-0.42-0.12-0.84-0.2-1.24zM650.84 404.59v0.12c-0.07-0.41-0.13-0.83-0.19-1.24 0.09 0.4 0.15 0.8 0.19 1.12zM512 831C264.66 831 65 631.3399999999999 65 384s199.66-447 447-447 447 199.66 447 447S759.34 831 512 831z m213.38-684.87c-8.76-9.55-25-8.88-33.91 0l-12.3 12.3q-42.64 42.63-85.28 85.28a200 200 0 0 0-59.3-22.52 214 214 0 0 0-131.48 14.95c-37.52 16.92-69.56 46.36-90.86 81.46-22 36.33-32.73 80.15-29.4 122.54a213.12 213.12 0 0 0 48.3 119.42c54.37 66.3 150.16 92.22 230.58 62.43a214.42 214.42 0 0 0 100.68-77.16c24.62-34.5 37.4-77.11 37.56-119.37a235.67 235.67 0 0 0-2.92-34.06c-6.88-45.84-30.52-87.73-64.1-118.92l5.81-5.81L725.38 180c9.48-9.43 8.79-24.3 0-33.87zM635.31 353.9c1.2 2.36 2.34 4.74 3.44 7.15 0.28 0.61 0.54 1.22 0.81 1.83 1.5 3.86 3 7.72 4.25 11.67a183.83 183.83 0 0 1 6.56 26.9c0.11 0.66 0.2 1.34 0.29 2-0.35-1.85-0.91-3.8 0.21 1.44 0.24 2.18 0.45 4.37 0.61 6.56 0.35 4.66 0.51 9.32 0.52 14s-0.17 9.33-0.52 14q-0.26 3.45-0.64 6.88v0.08c-1 6-0.2 1.67 0 0 0-0.31 0.11-0.63 0.17-1-0.16 0.89-0.27 1.8-0.41 2.7a182.65 182.65 0 0 1-6.6 27.62c-1.38 4.27-3 8.41-4.59 12.61-0.32 0.71-0.63 1.42-1 2.13-0.92 2-1.87 4-2.87 6a184.55 184.55 0 0 1-13.85 23.12c-1.11 1.58-7 8.66-1.71 2.52-1.42 1.65-2.72 3.42-4.12 5.09q-4.2 5-8.75 9.73c-6.1 6.32-12.78 11.79-19.44 17.49 6.14-5.26-0.94 0.6-2.52 1.71-1.79 1.26-3.6 2.48-5.43 3.68q-5.52 3.59-11.27 6.78-6.07 3.36-12.38 6.26c-0.75 0.35-1.51 0.68-2.26 1-1.64 0.62-3.25 1.3-4.9 1.9a181.3 181.3 0 0 1-27.13 7.74c-2.67 0.55-5.36 1-8.05 1.46-0.9 0.14-1.81 0.25-2.71 0.41l1-0.17c1.67-0.2 6-1 0 0H512q-6.56 0.75-13.15 1a188.34 188.34 0 0 1-28.4-1c-1.1-0.2-2.25-0.31-3.34-0.49-2.24-0.37-4.48-0.78-6.7-1.24q-6.63-1.35-13.14-3.18c-4.29-1.21-8.55-2.58-12.75-4.1-2-0.72-4-1.51-6-2.28l-1.84-0.82a185.92 185.92 0 0 1-24.25-13.32q-3.3-2.16-6.51-4.44c-0.74-0.53-3.82-2.89-3.93-2.93-0.71-0.57-1.41-1.14-2.1-1.72q-2.52-2.1-5-4.27a186.27 186.27 0 0 1-18.65-19.25c-1.32-1.58-6.2-9-2-2.31-1.16-1.83-2.62-3.53-3.86-5.3q-3.78-5.37-7.17-11T346.94 497q-1.5-3-2.89-5.95c-0.86-1.86-3.23-8.91-0.78-1.56-3-8.94-6.46-17.52-8.69-26.72q-1.68-6.94-2.82-14c0-0.21-0.05-0.42-0.08-0.62 0.29 1.51 0.67 2.55-0.28-2-0.2-1.77-0.38-3.54-0.53-5.32a188.09 188.09 0 0 1-0.11-29.36c0.17-2.25 0.41-4.49 0.65-6.74 0.8-3.86 0.63-3.81 0.4-2.87l0.06-0.41q1.06-6.38 2.56-12.66a200.32 200.32 0 0 1 8.27-26c0.46-1 0.89-2 1.35-3q1.4-3 2.89-6 3-5.86 6.39-11.53 3.56-5.89 7.54-11.54c1.13-1.59 2.44-3.11 3.49-4.76-4.09 6.45-0.21 0.31 1.12-1.3a185.34 185.34 0 0 1 19-19.82q2.92-2.63 5.95-5.13c1.62-1.33 7.76-5.22 1.31-1.12 3.49-2.22 6.72-4.91 10.18-7.19a184.79 184.79 0 0 1 23.59-13.12c1-0.48 2.06-0.93 3.09-1.4 2-0.76 3.94-1.54 5.92-2.26 4.2-1.52 8.46-2.89 12.75-4.1s8.72-2.29 13.14-3.18c2.22-0.46 4.46-0.87 6.7-1.24l0.41-0.06c-0.93 0.22-1 0.39 2.81-0.39a200.31 200.31 0 0 1 27.82-1q6.83 0.25 13.61 1c4.64 1 3.6 0.58 2.08 0.28l0.62 0.09c2 0.33 4 0.69 6 1.08a183.29 183.29 0 0 1 27.22 7.55c2.26 0.81 4.49 1.87 6.76 2.64 0.75 0.34 1.51 0.67 2.25 1q5.7 2.64 11.2 5.66c7.94 4.37 15 9.82 22.58 14.65-6.69-4.25 0.74 0.64 2.31 2s3.32 2.83 4.95 4.29q4.86 4.38 9.4 9.08 4.79 5 9.17 10.23c1.26 1.51 2.43 3.1 3.7 4.59-5.06-5.91-0.2-0.17 1 1.45a185.86 185.86 0 0 1 14.31 23.66zM512.68 265.82000000000005l1.16 0.19-1.56-0.23z" horiz-adv-x="1024" /> | |
27 | + | |
28 | + | |
29 | + <glyph glyph-name="download-hs" unicode="" d="M200 62h632v-88a8 8 0 0 0-8-8H192v88a8 8 0 0 0 8 8z m239 262.037V711c0 13.255 10.745 24 24 24h104v-401.473l141.997 137.148c9.534 9.209 24.728 8.945 33.936-0.59l0.004-0.003 72.205-74.799-304.959-294.546c-9.534-9.208-24.728-8.944-33.936 0.59l-0.003 0.004-71.859 74.44-0.063-0.062-205.587 212.927c-9.206 9.534-8.941 24.724 0.59 33.932l74.782 72.246L439 324.03700000000003z" horiz-adv-x="1024" /> | |
30 | + | |
31 | + | |
32 | + <glyph glyph-name="enlarge-hs" unicode="" d="M945.159 28.389999999999986l-206.543 206.538c49.578 63.772 79.108 143.903 79.108 230.953 0 207.97-168.58 376.547-376.639 376.547-207.97 0-376.547-168.577-376.547-376.547 0-208.038 168.577-376.614 376.547-376.614 87.059 0 167.197 29.532 230.973 79.108l206.543-206.544c9.171-9.17 21.227-13.802 33.278-13.802s24.106 4.629 33.28 13.802c18.431 18.43 18.431 48.215 0 66.559v0zM158.701 465.881c0 155.737 126.65 282.39 282.39 282.39 155.826 0 282.477-126.65 282.477-282.39 0-155.805-126.65-282.458-282.477-282.458-155.739 0-282.39 126.65-282.39 282.458v0zM579.708 506.147h-98.352v98.352c0 22.272-17.991 40.268-40.268 40.352-22.185-0.086-40.267-18.078-40.267-40.352v-98.352h-98.352c-22.272 0-40.268-17.991-40.268-40.179 0-22.272 17.991-40.352 40.268-40.352h98.352v-98.352c0-22.252 18.08-40.246 40.267-40.333 22.274 0.086 40.268 18.08 40.268 40.333v98.352h98.352c22.272 0 40.355 18.079 40.267 40.352 0 22.187-17.991 40.179-40.267 40.179v0z" horiz-adv-x="1024" /> | |
33 | + | |
34 | + | |
35 | + <glyph glyph-name="previous-hs" unicode="" d="M814.933333 413.866667C716.8 512 597.333333 567.4666669999999 460.8 580.266667V768c0 17.066667-8.533333 34.133333-25.6 38.4-17.066667 8.533333-34.133333 4.266667-46.933333-8.533333L29.866667 422.4c-17.066667-17.066667-17.066667-42.666667 0-59.733333l358.4-392.533334c8.533333-8.533333 21.333333-12.8 34.133333-12.8 4.266667 0 8.533333 0 17.066667 4.266667 17.066667 4.266667 25.6 21.333333 25.6 38.4v204.8c68.266667 8.533333 128 4.266667 192-12.8 76.8-21.333333 170.666667-93.866667 273.066666-213.333333 12.8-12.8 29.866667-21.333333 51.2-12.8 17.066667 8.533333 29.866667 25.6 25.6 42.666666-21.333333 162.133333-85.333333 298.666667-192 405.333334z" horiz-adv-x="1024" /> | |
36 | + | |
37 | + | |
38 | + <glyph glyph-name="zoom-out-hs" unicode="" d="M951.643 18.452999999999975l-210.337 210.335c50.487 64.946 80.56 146.547 80.56 235.199 0 211.793-171.681 383.472-383.563 383.472-211.792 0-383.471-171.679-383.471-383.472 0-211.862 171.679-383.538 383.471-383.538 88.661 0 170.271 30.075 235.218 80.56l210.337-210.339c9.34-9.339 21.614-14.055 33.89-14.055s24.551 4.716 33.892 14.055c18.77 18.77 18.77 49.101 0 67.781v0zM150.725 463.989c0 158.601 128.978 287.58 287.58 287.58 158.691 0 287.671-128.978 287.671-287.58 0-158.668-128.978-287.651-287.671-287.651-158.601 0-287.58 128.978-287.58 287.651v0zM397.297 504.996h-100.16c-22.683 0-41.008-18.324-41.008-40.919 0-22.683 18.324-41.094 41.008-41.094h282.333c22.683 0 41.095 18.412 41.007 41.094 0 22.595-18.324 40.919-41.007 40.919v0h-182.173z" horiz-adv-x="1024" /> | |
39 | + | |
40 | + | |
41 | + <glyph glyph-name="next-step-hs" unicode="" d="M209.066667 413.866667c98.133333 98.133333 213.333333 153.6 349.866666 166.4V768c0 17.066667 8.533333 34.133333 25.6 38.4 17.066667 8.533333 34.133333 4.266667 46.933334-8.533333l358.4-375.466667c17.066667-17.066667 17.066667-42.666667 0-59.733333l-358.4-392.533334c-8.533333-8.533333-21.333333-12.8-29.866667-12.8-4.266667 0-8.533333 0-17.066667 4.266667-17.066667 4.266667-25.6 21.333333-25.6 38.4v204.8c-68.266667 8.533333-128 4.266667-192-12.8-76.8-21.333333-170.666667-93.866667-273.066666-213.333333-8.533333-17.066667-29.866667-21.333333-46.933334-12.8-17.066667 8.533333-29.866667 25.6-25.6 42.666666 17.066667 162.133333 81.066667 298.666667 187.733334 405.333334z" horiz-adv-x="1024" /> | |
42 | + | |
43 | + | |
44 | + | |
45 | + | |
46 | + </font> | |
47 | +</defs></svg> | ... | ... |
src/components/FlowChart/src/assets/iconfont/iconfont.ttf
0 → 100644
No preview for this file type
src/components/FlowChart/src/assets/iconfont/iconfont.woff
0 → 100644
No preview for this file type
src/components/FlowChart/src/assets/iconfont/iconfont.woff2
0 → 100644
No preview for this file type
src/components/FlowChart/src/config.ts
0 → 100644
1 | +export const nodeList = [ | |
2 | + { | |
3 | + text: '开始', | |
4 | + type: 'start', | |
5 | + class: 'node-start', | |
6 | + }, | |
7 | + { | |
8 | + text: '矩形', | |
9 | + type: 'rect', | |
10 | + class: 'node-rect', | |
11 | + }, | |
12 | + { | |
13 | + type: 'user', | |
14 | + text: '用户', | |
15 | + class: 'node-user', | |
16 | + }, | |
17 | + { | |
18 | + type: 'push', | |
19 | + text: '推送', | |
20 | + class: 'node-push', | |
21 | + }, | |
22 | + { | |
23 | + type: 'download', | |
24 | + text: '位置', | |
25 | + class: 'node-download', | |
26 | + }, | |
27 | + { | |
28 | + type: 'end', | |
29 | + text: '结束', | |
30 | + class: 'node-end', | |
31 | + }, | |
32 | +]; | |
33 | + | |
34 | +export const BpmnNode = [ | |
35 | + { | |
36 | + type: 'bpmn:startEvent', | |
37 | + text: '开始', | |
38 | + class: 'bpmn-start', | |
39 | + }, | |
40 | + { | |
41 | + type: 'bpmn:endEvent', | |
42 | + text: '结束', | |
43 | + class: 'bpmn-end', | |
44 | + }, | |
45 | + { | |
46 | + type: 'bpmn:exclusiveGateway', | |
47 | + text: '网关', | |
48 | + class: 'bpmn-exclusiveGateway', | |
49 | + }, | |
50 | + { | |
51 | + type: 'bpmn:userTask', | |
52 | + text: '用户', | |
53 | + class: 'bpmn-user', | |
54 | + }, | |
55 | +]; | ... | ... |
src/locales/lang/en/routes/demo/comp.ts
src/locales/lang/zh_CN/routes/demo/comp.ts
src/router/menus/modules/demo/comp.ts
... | ... | @@ -124,6 +124,13 @@ const menu: MenuModule = { |
124 | 124 | }, |
125 | 125 | }, |
126 | 126 | { |
127 | + path: 'flowChart', | |
128 | + name: t('routes.demo.comp.flowChart'), | |
129 | + tag: { | |
130 | + content: 'new', | |
131 | + }, | |
132 | + }, | |
133 | + { | |
127 | 134 | path: 'countTo', |
128 | 135 | name: t('routes.demo.comp.countTo'), |
129 | 136 | }, | ... | ... |
src/router/routes/modules/demo/comp.ts
... | ... | @@ -241,6 +241,14 @@ const comp: AppRouteModule = { |
241 | 241 | }, |
242 | 242 | }, |
243 | 243 | { |
244 | + path: 'flowChart', | |
245 | + name: 'flowChartDemo', | |
246 | + component: () => import('/@/views/demo/comp/flow-chart/index.vue'), | |
247 | + meta: { | |
248 | + title: t('routes.demo.comp.flowChart'), | |
249 | + }, | |
250 | + }, | |
251 | + { | |
244 | 252 | path: 'timestamp', |
245 | 253 | name: 'TimeDemo', |
246 | 254 | component: () => import('/@/views/demo/comp/time/index.vue'), | ... | ... |
src/views/demo/comp/flow-chart/dataTurbo.json
0 → 100644
1 | +{ | |
2 | + "flowElementList": [ | |
3 | + { | |
4 | + "incoming": [], | |
5 | + "outgoing": ["Flow_33inf2k"], | |
6 | + "dockers": [], | |
7 | + "type": 2, | |
8 | + "properties": { | |
9 | + "a": "efrwe", | |
10 | + "b": "wewe", | |
11 | + "name": "开始", | |
12 | + "x": 280, | |
13 | + "y": 200, | |
14 | + "text": { | |
15 | + "x": 280, | |
16 | + "y": 200, | |
17 | + "value": "开始" | |
18 | + }, | |
19 | + "logicFlowType": "bpmn:startEvent" | |
20 | + }, | |
21 | + "key": "Event_1d42u4p" | |
22 | + }, | |
23 | + { | |
24 | + "incoming": ["Flow_379e0o9"], | |
25 | + "outgoing": [], | |
26 | + "dockers": [], | |
27 | + "type": 3, | |
28 | + "properties": { | |
29 | + "a": "efrwe", | |
30 | + "b": "wewe", | |
31 | + "name": "结束", | |
32 | + "x": 920, | |
33 | + "y": 200, | |
34 | + "text": { | |
35 | + "x": 920, | |
36 | + "y": 200, | |
37 | + "value": "结束" | |
38 | + }, | |
39 | + "logicFlowType": "bpmn:endEvent" | |
40 | + }, | |
41 | + "key": "Event_08p8i6q" | |
42 | + }, | |
43 | + { | |
44 | + "incoming": ["Flow_0pfouf0"], | |
45 | + "outgoing": ["Flow_3918lhh"], | |
46 | + "dockers": [], | |
47 | + "type": 6, | |
48 | + "properties": { | |
49 | + "a": "efrwe", | |
50 | + "b": "wewe", | |
51 | + "name": "网关", | |
52 | + "x": 580, | |
53 | + "y": 200, | |
54 | + "text": { | |
55 | + "x": 580, | |
56 | + "y": 200, | |
57 | + "value": "网关" | |
58 | + }, | |
59 | + "logicFlowType": "bpmn:exclusiveGateway" | |
60 | + }, | |
61 | + "key": "Gateway_1fngqgj" | |
62 | + }, | |
63 | + { | |
64 | + "incoming": ["Flow_33inf2k"], | |
65 | + "outgoing": ["Flow_0pfouf0"], | |
66 | + "dockers": [], | |
67 | + "type": 4, | |
68 | + "properties": { | |
69 | + "a": "efrwe", | |
70 | + "b": "wewe", | |
71 | + "name": "用户", | |
72 | + "x": 420, | |
73 | + "y": 200, | |
74 | + "text": { | |
75 | + "x": 420, | |
76 | + "y": 200, | |
77 | + "value": "用户" | |
78 | + }, | |
79 | + "logicFlowType": "bpmn:userTask" | |
80 | + }, | |
81 | + "key": "Activity_2mgtaia" | |
82 | + }, | |
83 | + { | |
84 | + "incoming": ["Flow_3918lhh"], | |
85 | + "outgoing": ["Flow_379e0o9"], | |
86 | + "dockers": [], | |
87 | + "type": 5, | |
88 | + "properties": { | |
89 | + "a": "efrwe", | |
90 | + "b": "wewe", | |
91 | + "name": "服务", | |
92 | + "x": 760, | |
93 | + "y": 200, | |
94 | + "text": { | |
95 | + "x": 760, | |
96 | + "y": 200, | |
97 | + "value": "服务" | |
98 | + }, | |
99 | + "logicFlowType": "bpmn:serviceTask" | |
100 | + }, | |
101 | + "key": "Activity_1sp8qc8" | |
102 | + }, | |
103 | + { | |
104 | + "incoming": ["Event_1d42u4p"], | |
105 | + "outgoing": ["Activity_2mgtaia"], | |
106 | + "type": 1, | |
107 | + "dockers": [], | |
108 | + "properties": { | |
109 | + "name": "边", | |
110 | + "text": { | |
111 | + "x": 331, | |
112 | + "y": 200, | |
113 | + "value": "边" | |
114 | + }, | |
115 | + "startPoint": { | |
116 | + "x": 298, | |
117 | + "y": 200 | |
118 | + }, | |
119 | + "endPoint": { | |
120 | + "x": 370, | |
121 | + "y": 200 | |
122 | + }, | |
123 | + "pointsList": [ | |
124 | + { | |
125 | + "x": 298, | |
126 | + "y": 200 | |
127 | + }, | |
128 | + { | |
129 | + "x": 370, | |
130 | + "y": 200 | |
131 | + } | |
132 | + ], | |
133 | + "logicFlowType": "bpmn:sequenceFlow" | |
134 | + }, | |
135 | + "key": "Flow_33inf2k" | |
136 | + }, | |
137 | + { | |
138 | + "incoming": ["Activity_2mgtaia"], | |
139 | + "outgoing": ["Gateway_1fngqgj"], | |
140 | + "type": 1, | |
141 | + "dockers": [], | |
142 | + "properties": { | |
143 | + "name": "边2", | |
144 | + "text": { | |
145 | + "x": 507, | |
146 | + "y": 200, | |
147 | + "value": "边2" | |
148 | + }, | |
149 | + "startPoint": { | |
150 | + "x": 470, | |
151 | + "y": 200 | |
152 | + }, | |
153 | + "endPoint": { | |
154 | + "x": 555, | |
155 | + "y": 200 | |
156 | + }, | |
157 | + "pointsList": [ | |
158 | + { | |
159 | + "x": 470, | |
160 | + "y": 200 | |
161 | + }, | |
162 | + { | |
163 | + "x": 555, | |
164 | + "y": 200 | |
165 | + } | |
166 | + ], | |
167 | + "logicFlowType": "bpmn:sequenceFlow" | |
168 | + }, | |
169 | + "key": "Flow_0pfouf0" | |
170 | + }, | |
171 | + { | |
172 | + "incoming": ["Gateway_1fngqgj"], | |
173 | + "outgoing": ["Activity_1sp8qc8"], | |
174 | + "type": 1, | |
175 | + "dockers": [], | |
176 | + "properties": { | |
177 | + "name": "边3", | |
178 | + "text": { | |
179 | + "x": 664, | |
180 | + "y": 200, | |
181 | + "value": "边3" | |
182 | + }, | |
183 | + "startPoint": { | |
184 | + "x": 605, | |
185 | + "y": 200 | |
186 | + }, | |
187 | + "endPoint": { | |
188 | + "x": 710, | |
189 | + "y": 200 | |
190 | + }, | |
191 | + "pointsList": [ | |
192 | + { | |
193 | + "x": 605, | |
194 | + "y": 200 | |
195 | + }, | |
196 | + { | |
197 | + "x": 710, | |
198 | + "y": 200 | |
199 | + } | |
200 | + ], | |
201 | + "logicFlowType": "bpmn:sequenceFlow" | |
202 | + }, | |
203 | + "key": "Flow_3918lhh" | |
204 | + }, | |
205 | + { | |
206 | + "incoming": ["Activity_1sp8qc8"], | |
207 | + "outgoing": ["Event_08p8i6q"], | |
208 | + "type": 1, | |
209 | + "dockers": [], | |
210 | + "properties": { | |
211 | + "name": "边4", | |
212 | + "text": { | |
213 | + "x": 871, | |
214 | + "y": 200, | |
215 | + "value": "边4" | |
216 | + }, | |
217 | + "startPoint": { | |
218 | + "x": 810, | |
219 | + "y": 200 | |
220 | + }, | |
221 | + "endPoint": { | |
222 | + "x": 902, | |
223 | + "y": 200 | |
224 | + }, | |
225 | + "pointsList": [ | |
226 | + { | |
227 | + "x": 810, | |
228 | + "y": 200 | |
229 | + }, | |
230 | + { | |
231 | + "x": 902, | |
232 | + "y": 200 | |
233 | + } | |
234 | + ], | |
235 | + "logicFlowType": "bpmn:sequenceFlow" | |
236 | + }, | |
237 | + "key": "Flow_379e0o9" | |
238 | + } | |
239 | + ] | |
240 | +} | ... | ... |
src/views/demo/comp/flow-chart/index.vue
0 → 100644
1 | +<template> | |
2 | + <div class="logic-flow-view"> | |
3 | + <!-- 辅助工具栏 --> | |
4 | + <Control class="demo-control" v-if="lf" :lf="lf" :catTurboData="false" @catData="catData" /> | |
5 | + <!-- 节点面板 --> | |
6 | + <NodePanel :lf="lf" :nodeList="nodeList" /> | |
7 | + <!-- 画布 --> | |
8 | + <div id="LF-Turbo"></div> | |
9 | + <!-- 数据查看面板 --> | |
10 | + <BasicModal @register="register" title="数据"> | |
11 | + <DataDialog :graphData="graphData" /> | |
12 | + </BasicModal> | |
13 | + </div> | |
14 | +</template> | |
15 | + | |
16 | +<script lang="ts"> | |
17 | + import { ref, unref, onMounted } from 'vue'; | |
18 | + import LogicFlow from '@logicflow/core'; | |
19 | + import { Snapshot, BpmnElement, Menu } from '@logicflow/extension'; | |
20 | + import '@logicflow/core/dist/style/index.css'; | |
21 | + import '@logicflow/extension/lib/style/index.css'; | |
22 | + import { Control, NodePanel, DataDialog } from '/@/components/FlowChart'; | |
23 | + | |
24 | + import { toLogicflowData } from '/@/components/FlowChart/src/adpterForTurbo'; | |
25 | + import { BpmnNode } from '/@/components/FlowChart/src/config'; | |
26 | + import demoData from './dataTurbo.json'; | |
27 | + | |
28 | + import { BasicModal, useModal } from '/@/components/Modal'; | |
29 | + export default { | |
30 | + components: { NodePanel, Control, DataDialog, BasicModal }, | |
31 | + setup() { | |
32 | + let lf = ref(null); | |
33 | + let graphData = ref(null); | |
34 | + let config = ref({ | |
35 | + grid: true, | |
36 | + background: { | |
37 | + color: '#f7f9ff', | |
38 | + }, | |
39 | + keyboard: { | |
40 | + enabled: true, | |
41 | + }, | |
42 | + }); | |
43 | + let nodeList = BpmnNode; | |
44 | + | |
45 | + const [register, { openModal }] = useModal(); | |
46 | + | |
47 | + function initLf() { | |
48 | + // 画布配置 | |
49 | + LogicFlow.use(Snapshot); | |
50 | + // 使用bpmn插件,引入bpmn元素,这些元素可以在turbo中转换后使用 | |
51 | + LogicFlow.use(BpmnElement); | |
52 | + // 启动右键菜单 | |
53 | + LogicFlow.use(Menu); | |
54 | + const domLf = new LogicFlow({ | |
55 | + ...unref(config), | |
56 | + container: document.querySelector('#LF-Turbo'), | |
57 | + }); | |
58 | + lf.value = domLf; | |
59 | + // 设置边类型bpmn:sequenceFlow为默认类型 | |
60 | + unref(lf).setDefaultEdgeType('bpmn:sequenceFlow'); | |
61 | + onRender(); | |
62 | + } | |
63 | + | |
64 | + function onRender() { | |
65 | + // Turbo数据转换为LogicFlow内部识别的数据结构 | |
66 | + const lFData = toLogicflowData(demoData); | |
67 | + lf.value.render(lFData); | |
68 | + } | |
69 | + | |
70 | + function catData() { | |
71 | + graphData.value = unref(lf).getGraphData(); | |
72 | + openModal(); | |
73 | + } | |
74 | + | |
75 | + onMounted(() => { | |
76 | + initLf(); | |
77 | + }); | |
78 | + | |
79 | + return { | |
80 | + lf, | |
81 | + graphData, | |
82 | + config, | |
83 | + nodeList, | |
84 | + catData, | |
85 | + register, | |
86 | + openModal, | |
87 | + }; | |
88 | + }, | |
89 | + }; | |
90 | +</script> | |
91 | + | |
92 | +<style scoped> | |
93 | + #LF-Turbo { | |
94 | + width: 100vw; | |
95 | + height: 85%; | |
96 | + outline: none; | |
97 | + } | |
98 | + | |
99 | + .logic-flow-view { | |
100 | + position: relative; | |
101 | + height: 100%; | |
102 | + } | |
103 | + | |
104 | + .demo-title { | |
105 | + margin: 20px; | |
106 | + text-align: center; | |
107 | + } | |
108 | + | |
109 | + .demo-control { | |
110 | + position: absolute; | |
111 | + top: 10px; | |
112 | + right: 20px; | |
113 | + z-index: 2; | |
114 | + } | |
115 | + | |
116 | + .time-plus { | |
117 | + cursor: pointer; | |
118 | + } | |
119 | + | |
120 | + .add-panel { | |
121 | + position: absolute; | |
122 | + z-index: 11; | |
123 | + padding: 10px 5px; | |
124 | + background-color: white; | |
125 | + } | |
126 | + | |
127 | + .el-drawer__body { | |
128 | + z-index: 3; | |
129 | + height: 80%; | |
130 | + margin-top: -30px; | |
131 | + overflow: auto; | |
132 | + } | |
133 | +</style> | ... | ... |
yarn.lock
... | ... | @@ -1151,6 +1151,19 @@ |
1151 | 1151 | resolved "https://registry.npmjs.org/@intlify/shared/-/shared-9.0.0.tgz#d85b3b5f9033f377c5cf2202cf2459aa49948f36" |
1152 | 1152 | integrity sha512-0r4v7dnY8g/Jfx2swUWy2GyfH/WvIpWvkU4OIupvxDTWiE8RhcpbOCVvqpVh/xGi0proHQ/r2Dhc0QSItUsfDQ== |
1153 | 1153 | |
1154 | +"@logicflow/core@^0.3.0": | |
1155 | + version "0.3.0" | |
1156 | + resolved "https://registry.yarnpkg.com/@logicflow/core/-/core-0.3.0.tgz#910ca7865487fbe6c45a450d13627875c6965bf4" | |
1157 | + integrity sha512-FPRTuj0y6Yny+YDZ+faTzA8pZyouEWX1Vr6rH91wJR0J3NOHgb7pV/TJoHSosavFuyyw87nLw9UsyUUgHKVV+A== | |
1158 | + | |
1159 | +"@logicflow/extension@^0.3.0": | |
1160 | + version "0.3.0" | |
1161 | + resolved "https://registry.yarnpkg.com/@logicflow/extension/-/extension-0.3.0.tgz#cea4470de3a8e4b7da69b17d7507b2d8edd76b50" | |
1162 | + integrity sha512-vMmYT8H53oFhOpNftCYQMbNYbTiXqQUxOOKlPcrKkZb0FsXSiEZ/MUKBF3mAarvFlzdMaB5xJjakMfy07/bdvw== | |
1163 | + dependencies: | |
1164 | + "@logicflow/core" "^0.3.0" | |
1165 | + ids "^1.0.0" | |
1166 | + | |
1154 | 1167 | "@nodelib/fs.scandir@2.1.4": |
1155 | 1168 | version "2.1.4" |
1156 | 1169 | resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69" |
... | ... | @@ -4895,6 +4908,11 @@ icss-utils@^5.0.0: |
4895 | 4908 | resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" |
4896 | 4909 | integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== |
4897 | 4910 | |
4911 | +ids@^1.0.0: | |
4912 | + version "1.0.0" | |
4913 | + resolved "https://registry.yarnpkg.com/ids/-/ids-1.0.0.tgz#df67f2d37b81d7c2effc87e03d17ebff95a58c05" | |
4914 | + integrity sha512-Zvtq1xUto4LttpstyOlFum8lKx+i1OmRfg+6A9drFS9iSZsDPMHG4Sof/qwNR4kCU7jBeWFPrY2ocHxiz7cCRw== | |
4915 | + | |
4898 | 4916 | ieee754@^1.1.13: |
4899 | 4917 | version "1.2.1" |
4900 | 4918 | resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" |
... | ... | @@ -9284,6 +9302,11 @@ vue-i18n@9.0.0: |
9284 | 9302 | "@intlify/shared" "9.0.0" |
9285 | 9303 | "@vue/devtools-api" "^6.0.0-beta.5" |
9286 | 9304 | |
9305 | +vue-json-pretty@^2.0.2: | |
9306 | + version "2.0.2" | |
9307 | + resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-2.0.2.tgz#cb8f559af15ea3a2ee53b2742672c7791826d6a3" | |
9308 | + integrity sha512-Vn7SX3XR9cfvGRNoTDNID89GmvVUMb7/fLUX3C3n0Qptga0N7hp7Zwspui1I1XN5pE+PeoVghCSYty+bi8KnjA== | |
9309 | + | |
9287 | 9310 | vue-router@^4.0.6: |
9288 | 9311 | version "4.0.6" |
9289 | 9312 | resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.6.tgz#91750db507d26642f225b0ec6064568e5fe448d6" | ... | ... |