Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
f73eb8da by zhaoqian
Options

历史回溯，节点展示

1 parent 25066110
Inline Side-by-side
Showing 2 changed files with 98 additions and 21 deletions
...@@ -75,6 +75,60 @@ export default { ...@@ -75,6 +75,60 @@ export default {
75 }, 75 },
76 'single-node', 76 'single-node',
77 ); 77 );
78 G6.registerEdge(
79 'circle-running',
80 {
81 afterDraw(cfg, group) {
82 const shape = group.get('children')[0];
83 const startPoint = shape.getPoint(0);
84
85 const circle = group.addShape('circle', {
86 attrs: {
87 x: startPoint.x,
88 y: startPoint.y,
89 fill: '#1890ff',
90 r: 3,
91 },
92 name: 'circle-shape',
93 });
94
95 circle.animate(
96 (ratio) => {
97 const tmpPoint = shape.getPoint(ratio);
98 return {
99 x: tmpPoint.x,
100 y: tmpPoint.y,
101 };
102 },
103 {
104 repeat: true,
105 duration: 3000,
106 },
107 );
108 },
109 },
110 'line',
111 );
112
113 const tooltip = new G6.Tooltip({
114 offsetX: 10 + 10,
115 offsetY: 10 + 10,
116 itemTypes: ['node', 'edge'],
117 getContent: (e) => {
118 const outDiv = document.createElement('div');
119 outDiv.style.width = 'fit-content';
120 outDiv.innerHTML = `
121 <ul>
122 <li> ${e.item.getModel().conf[0].label}:${e.item.getModel().conf[0].value}</li>
123 <li> ${e.item.getModel().conf[1].label}:${e.item.getModel().conf[1].value}</li>
124 <li> ${e.item.getModel().conf[2].label}:${e.item.getModel().conf[2].value}</li>
125 <li> ${e.item.getModel().conf[3].label}:${e.item.getModel().conf[3].value}</li>
126 <li> ${e.item.getModel().conf[4].label}:${e.item.getModel().conf[4].value}</li>
127 </ul>`
128 ;
129 return outDiv;
130 },
131 });
78 132
79 const container = document.getElementById('mountNode'); 133 const container = document.getElementById('mountNode');
80 134
...@@ -103,7 +157,7 @@ export default { ...@@ -103,7 +157,7 @@ export default {
103 offset: 45, 157 offset: 45,
104 endArrow: true, 158 endArrow: true,
105 lineWidth: 2, 159 lineWidth: 2,
106 stroke: '#C2C8D5', 160 stroke: 'rgba(78,142,230,0.45)',
107 }, 161 },
108 }, 162 },
109 nodeStateStyles: { 163 nodeStateStyles: {
...@@ -113,31 +167,54 @@ export default { ...@@ -113,31 +167,54 @@ export default {
113 }, 167 },
114 }, 168 },
115 169
170 plugins: [tooltip],
116 modes: { 171 modes: {
117 default: [ 172 default: [
118 'drag-canvas', 173 'drag-node',
119 'zoom-canvas', 174 'drag-canvas',
120 'click-select', 175 'zoom-canvas',
121 { 176 'click-select',
122 type: 'tooltip',
123 formatText(model) {
124 const cfg = model.conf;
125 const text = [];
126 cfg.forEach((row) => {
127 text.push(row.label + ':' + row.value + '<br>');
128 });
129 return text.join('\n');
130 },
131 offset: 30,
132 },
133 ], 177 ],
134 }, 178 },
179
180 // modes: {
181 // default: [
182 // 'drag-canvas',
183 // 'zoom-canvas',
184 // 'click-select',
185 // {
186 // type: 'tooltip',
187 // formatText(model) {
188 // const cfg = model.conf;
189 // const text = [];
190 // cfg.forEach((row) => {
191 // text.push(row.label + ':' + row.value + '<br>');
192 // });
193 // return text.join('\n');
194 // },
195 // offset: -30,
196 // },
197 // ],
198 // },
135 fitView: true, 199 fitView: true,
136 }); 200 });
137 201
138 graph.data(data); 202 graph.data(data);
139 graph.render(); 203 graph.render();
140 204
205 graph.on('node:mouseenter', e => {
206 graph.setItemState(e.item, 'active', true)
207 });
208 graph.on('node:mouseleave', e => {
209 graph.setItemState(e.item, 'active', false)
210 });
211 graph.on('edge:mouseenter', e => {
212 graph.setItemState(e.item, 'active', true)
213 });
214 graph.on('edge:mouseleave', e => {
215 graph.setItemState(e.item, 'active', false)
216 });
217
141 if (typeof window !== 'undefined') 218 if (typeof window !== 'undefined')
142 window.onresize = () => { 219 window.onresize = () => {
143 if (!graph || graph.get('destroyed')) return; 220 if (!graph || graph.get('destroyed')) return;
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 <td colspan="2" align="center" >不动产单元号<i class="requisite">*</i></td> 21 <td colspan="2" align="center" >不动产单元号<i class="requisite">*</i></td>
22 <!-- todo 此处暂时存放的是不动产单元号标识码，而不是不动产单元号--> 22 <!-- todo 此处暂时存放的是不动产单元号标识码，而不是不动产单元号-->
23 <td colspan="4" class="psr"> 23 <td colspan="4" class="psr">
24 <el-input v-model="form.bdcdyh" class="percent80" disabled></el-input> 24 <el-input v-model="form.bdcdyh" class="percent80"></el-input>
25 <el-button @click.prevent="generatorCode" size="mini" class="createBtn" type="warning">生成</el-button> 25 <el-button @click.prevent="generatorCode" size="mini" class="createBtn" type="warning">生成</el-button>
26 </td> 26 </td>
27 <td colspan="2" align="center" >原不动产单元</td> 27 <td colspan="2" align="center" >原不动产单元</td>
...@@ -37,25 +37,25 @@ ...@@ -37,25 +37,25 @@
37 </td> 37 </td>
38 <td colspan="2" align="center" >层号</td> 38 <td colspan="2" align="center" >层号</td>
39 <td colspan="4" > 39 <td colspan="4" >
40 <el-input v-model="form.ch" disabled></el-input> 40 <el-input v-model="form.ch"></el-input>
41 </td> 41 </td>
42 </tr> 42 </tr>
43 43
44 <tr height="30"> 44 <tr height="30">
45 <td colspan="2" align="center" >实际层数</td> 45 <td colspan="2" align="center" >实际层数</td>
46 <td colspan="4" > 46 <td colspan="4" >
47 <el-input v-model="form.sjcs" disabled></el-input> 47 <el-input v-model="form.sjcs"></el-input>
48 </td> 48 </td>
49 <td colspan="2" align="center" >实际层</td> 49 <td colspan="2" align="center" >实际层</td>
50 <td colspan="4" > 50 <td colspan="4" >
51 <el-input v-model="form.sjc" disabled></el-input> 51 <el-input v-model="form.sjc"></el-input>
52 </td> 52 </td>
53 </tr> 53 </tr>
54 54
55 <tr height="30"> 55 <tr height="30">
56 <td colspan="2" align="center" >所在单元</td> 56 <td colspan="2" align="center" >所在单元</td>
57 <td colspan="4" > 57 <td colspan="4" >
58 <el-input v-model="form.zdymc" disabled></el-input> 58 <el-input v-model="form.zdymc"></el-input>
59 </td> 59 </td>
60 <td colspan="2" align="center" >房屋编号</td> 60 <td colspan="2" align="center" >房屋编号</td>
61 <td colspan="4" > 61 <td colspan="4" >
......