历史回溯,样式调整
Showing
1 changed file
with
28 additions
and
83 deletions
1 | <template> | 1 | <template> |
2 | <div class="lshs-content"> | 2 | <div class="lshs-content"> |
3 | <div class="slot"> | 3 | <!-- <div class="slot">--> |
4 | <div><span class="tip-title">范围属性变更:</span></div> | 4 | <!-- <div><span class="tip-title">范围属性变更:</span></div>--> |
5 | <div><span class="tip-title">宗地分割:</span></div> | 5 | <!-- <div><span class="tip-title">宗地分割:</span></div>--> |
6 | <div><span class="tip-title">宗地合并:</span></div> | 6 | <!-- <div><span class="tip-title">宗地合并:</span></div>--> |
7 | </div> | 7 | <!-- </div>--> |
8 | <div id="mountNode" ref="containerWidth"></div> | 8 | <div id="mountNode" ref="containerWidth"></div> |
9 | <div id="mountNodeRight"></div> | ||
9 | </div> | 10 | </div> |
10 | </template> | 11 | </template> |
11 | 12 | ||
... | @@ -51,9 +52,9 @@ export default { | ... | @@ -51,9 +52,9 @@ export default { |
51 | drawShape(cfg, group) { | 52 | drawShape(cfg, group) { |
52 | const rect = group.addShape('rect', { | 53 | const rect = group.addShape('rect', { |
53 | attrs: { | 54 | attrs: { |
54 | x: -75, | 55 | x: -100, |
55 | y: -25, | 56 | y: -25, |
56 | width: 150, | 57 | width: 200, |
57 | height: 50, | 58 | height: 50, |
58 | radius: 10, | 59 | radius: 10, |
59 | stroke: '#5B8FF9', | 60 | stroke: '#5B8FF9', |
... | @@ -83,38 +84,14 @@ export default { | ... | @@ -83,38 +84,14 @@ export default { |
83 | 'single-node', | 84 | 'single-node', |
84 | ); | 85 | ); |
85 | G6.registerEdge( | 86 | G6.registerEdge( |
86 | 'circle-running', | 87 | 'polyline1', |
87 | { | 88 | { |
88 | afterDraw(cfg, group) { | 89 | afterDraw(cfg, group) { |
89 | const shape = group.get('children')[0]; | 90 | console.log(cfg.data+":cfg") |
90 | const startPoint = shape.getPoint(0); | 91 | console.log(group.toString()+"group") |
91 | |||
92 | const circle = group.addShape('circle', { | ||
93 | attrs: { | ||
94 | x: startPoint.x, | ||
95 | y: startPoint.y, | ||
96 | fill: '#1890ff', | ||
97 | r: 3, | ||
98 | }, | ||
99 | name: 'circle-shape', | ||
100 | }); | ||
101 | |||
102 | circle.animate( | ||
103 | (ratio) => { | ||
104 | const tmpPoint = shape.getPoint(ratio); | ||
105 | return { | ||
106 | x: tmpPoint.x, | ||
107 | y: tmpPoint.y, | ||
108 | }; | ||
109 | }, | ||
110 | { | ||
111 | repeat: true, | ||
112 | duration: 3000, | ||
113 | }, | ||
114 | ); | ||
115 | }, | 92 | }, |
116 | }, | 93 | }, |
117 | 'line', | 94 | 'polyline', |
118 | ); | 95 | ); |
119 | 96 | ||
120 | const tooltip = new G6.Tooltip({ | 97 | const tooltip = new G6.Tooltip({ |
... | @@ -146,33 +123,24 @@ export default { | ... | @@ -146,33 +123,24 @@ export default { |
146 | layout: { | 123 | layout: { |
147 | type: 'dagre', | 124 | type: 'dagre', |
148 | nodesepFunc: (d) => { | 125 | nodesepFunc: (d) => { |
149 | if (d.id === '3') { | 126 | return 100; |
150 | return 500; | ||
151 | } | ||
152 | return 50; | ||
153 | }, | 127 | }, |
154 | ranksep: 70, | 128 | ranksep: 30, |
155 | controlPoints: true, | 129 | controlPoints: true, |
156 | }, | 130 | }, |
157 | defaultNode: { | 131 | defaultNode: { |
158 | type: 'sql', | 132 | type: 'sql', |
159 | }, | 133 | }, |
160 | defaultEdge: { | 134 | defaultEdge: { |
161 | type: 'polyline', | 135 | type: 'polyline1', |
162 | style: { | 136 | style: { |
163 | radius: 20, | 137 | radius: 10, |
164 | offset: 45, | 138 | offset: 10, |
165 | endArrow: true, | 139 | // endArrow: true, |
166 | lineWidth: 2, | 140 | lineWidth: 2, |
167 | stroke: 'rgba(78,142,230,0.45)', | 141 | stroke: 'rgba(78,142,230,0.45)', |
168 | }, | 142 | }, |
169 | }, | 143 | }, |
170 | // defaultEdge: { | ||
171 | // type: 'cubic-vertical', | ||
172 | // style: { | ||
173 | // stroke: '#F6BD16', | ||
174 | // }, | ||
175 | // }, | ||
176 | nodeStateStyles: { | 144 | nodeStateStyles: { |
177 | selected: { | 145 | selected: { |
178 | stroke: '#d9d9d9', | 146 | stroke: '#d9d9d9', |
... | @@ -221,44 +189,12 @@ export default { | ... | @@ -221,44 +189,12 @@ export default { |
221 | getLshsData(){ | 189 | getLshsData(){ |
222 | let _this = this; | 190 | let _this = this; |
223 | const data = { | 191 | const data = { |
224 | "bsm": "c0818d9e4286b35b8ee9b96d90b522aa", | 192 | "bsm": "d85a274a332ad2d35c922a3a95eb154f", |
225 | "type": "zd" | 193 | "type": "zd" |
226 | }; | 194 | }; |
227 | getLshs(data).then((res)=>{ | 195 | getLshs(data).then((res)=>{ |
228 | if(res.code===200){ | 196 | if(res.code===200){ |
229 | _this.data=res.result; | 197 | _this.data=res.result; |
230 | _this.data = {"nodes":[ | ||
231 | {"id":"836524edab33ab19bb0e0b4fd064cd77","dataType":"sql","name":"20201127宗地A", | ||
232 | "conf":[{"label":"宗地代码","value":"610102123666GA10002"},{"label":"项目名称","value":"20201127宗地A"}, | ||
233 | {"label":"不动产单元号","value":"610102123666GA10002W00000000"},{"label":"坐落","value":"610102123666G10003W"}, | ||
234 | {"label":"权利人","value":""}]}, | ||
235 | {"id":"601130536a6bf6efc7a248af469e982c","dataType":"sql","name":"20201127宗地A222221", | ||
236 | "conf":[{"label":"宗地代码","value":null},{"label":"项目名称","value":"20201127宗地A222221"}, | ||
237 | {"label":"不动产单元号","value":null},{"label":"坐落","value":null},{"label":"权利人","value":""}]}, | ||
238 | {"id":"c0818d9e4286b35b8ee9b96d90b522aa","dataType":"sql","name":"20201127宗地A2222222", | ||
239 | "conf":[{"label":"宗地代码","value":null},{"label":"项目名称","value":"20201127宗地A2222222"}, | ||
240 | {"label":"不动产单元号","value":null},{"label":"坐落","value":null},{"label":"权利人","value":""}]}, | ||
241 | |||
242 | {"id":"601130536a6bf6efc7a248af469e982c1","dataType":"sql","name":"20201127宗地B", | ||
243 | "conf":[{"label":"宗地代码","value":null},{"label":"项目名称","value":"20201127宗地B"}, | ||
244 | {"label":"不动产单元号","value":null},{"label":"坐落","value":null},{"label":"权利人","value":""}]}, | ||
245 | {"id":"c0818d9e4286b35b8ee9b96d90b522aa1","dataType":"sql","name":"20201127宗地B1", | ||
246 | "conf":[{"label":"宗地代码","value":null},{"label":"项目名称","value":"20201127宗地B1"}, | ||
247 | {"label":"不动产单元号","value":null},{"label":"坐落","value":null},{"label":"权利人","value":""}]}, | ||
248 | |||
249 | {"id":"c0818d9e4286b35b8ee9b96d90b522aa12","dataType":"sql","name":"20201127宗地C", | ||
250 | "conf":[{"label":"宗地代码","value":null},{"label":"项目名称","value":"20201127宗地C"}, | ||
251 | {"label":"不动产单元号","value":null},{"label":"坐落","value":null},{"label":"权利人","value":""}]}, | ||
252 | ], | ||
253 | |||
254 | "edges":[ | ||
255 | {"source":"836524edab33ab19bb0e0b4fd064cd77","target":"601130536a6bf6efc7a248af469e982c"}, | ||
256 | {"source":"836524edab33ab19bb0e0b4fd064cd77","target":"c0818d9e4286b35b8ee9b96d90b522aa"}, | ||
257 | {"source":"c0818d9e4286b35b8ee9b96d90b522aa","target":"601130536a6bf6efc7a248af469e982c1"}, | ||
258 | {"source":"c0818d9e4286b35b8ee9b96d90b522aa","target":"c0818d9e4286b35b8ee9b96d90b522aa1"}, | ||
259 | {"source":"601130536a6bf6efc7a248af469e982c1","target":"c0818d9e4286b35b8ee9b96d90b522aa12"}, | ||
260 | {"source":"c0818d9e4286b35b8ee9b96d90b522aa1","target":"c0818d9e4286b35b8ee9b96d90b522aa12"}, | ||
261 | ]}; | ||
262 | this.initG6(); | 198 | this.initG6(); |
263 | } | 199 | } |
264 | }) | 200 | }) |
... | @@ -278,6 +214,15 @@ export default { | ... | @@ -278,6 +214,15 @@ export default { |
278 | #mountNode{ | 214 | #mountNode{ |
279 | /*height: calc(100% - 68px);*/ | 215 | /*height: calc(100% - 68px);*/ |
280 | margin-top: -60px; | 216 | margin-top: -60px; |
217 | width: 60%; | ||
218 | float: left; | ||
219 | } | ||
220 | |||
221 | #mountNodeRight{ | ||
222 | width: 38%; | ||
223 | float: right; | ||
224 | height: 1000px; | ||
225 | border: 0 solid #5ebbff; | ||
281 | } | 226 | } |
282 | 227 | ||
283 | .slot{ | 228 | .slot{ | ... | ... |
-
Please register or sign in to post a comment