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 95 additions and 18 deletions
......@@ -75,6 +75,60 @@ export default {
},
'single-node',
);
G6.registerEdge(
'circle-running',
{
afterDraw(cfg, group) {
const shape = group.get('children')[0];
const startPoint = shape.getPoint(0);
const circle = group.addShape('circle', {
attrs: {
x: startPoint.x,
y: startPoint.y,
fill: '#1890ff',
r: 3,
},
name: 'circle-shape',
});
circle.animate(
(ratio) => {
const tmpPoint = shape.getPoint(ratio);
return {
x: tmpPoint.x,
y: tmpPoint.y,
};
},
{
repeat: true,
duration: 3000,
},
);
},
},
'line',
);
const tooltip = new G6.Tooltip({
offsetX: 10 + 10,
offsetY: 10 + 10,
itemTypes: ['node', 'edge'],
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
outDiv.innerHTML = `
<ul>
<li> ${e.item.getModel().conf[0].label}:${e.item.getModel().conf[0].value}</li>
<li> ${e.item.getModel().conf[1].label}:${e.item.getModel().conf[1].value}</li>
<li> ${e.item.getModel().conf[2].label}:${e.item.getModel().conf[2].value}</li>
<li> ${e.item.getModel().conf[3].label}:${e.item.getModel().conf[3].value}</li>
<li> ${e.item.getModel().conf[4].label}:${e.item.getModel().conf[4].value}</li>
</ul>`
;
return outDiv;
},
});
const container = document.getElementById('mountNode');
......@@ -103,7 +157,7 @@ export default {
offset: 45,
endArrow: true,
lineWidth: 2,
stroke: '#C2C8D5',
stroke: 'rgba(78,142,230,0.45)',
},
},
nodeStateStyles: {
......@@ -113,31 +167,54 @@ export default {
},
},
plugins: [tooltip],
modes: {
default: [
'drag-node',
'drag-canvas',
'zoom-canvas',
'click-select',
{
type: 'tooltip',
formatText(model) {
const cfg = model.conf;
const text = [];
cfg.forEach((row) => {
text.push(row.label + ':' + row.value + '<br>');
});
return text.join('\n');
},
offset: 30,
},
],
},
// modes: {
// default: [
// 'drag-canvas',
// 'zoom-canvas',
// 'click-select',
// {
// type: 'tooltip',
// formatText(model) {
// const cfg = model.conf;
// const text = [];
// cfg.forEach((row) => {
// text.push(row.label + ':' + row.value + '<br>');
// });
// return text.join('\n');
// },
// offset: -30,
// },
// ],
// },
fitView: true,
});
graph.data(data);
graph.render();
graph.on('node:mouseenter', e => {
graph.setItemState(e.item, 'active', true)
});
graph.on('node:mouseleave', e => {
graph.setItemState(e.item, 'active', false)
});
graph.on('edge:mouseenter', e => {
graph.setItemState(e.item, 'active', true)
});
graph.on('edge:mouseleave', e => {
graph.setItemState(e.item, 'active', false)
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
......
......@@ -21,7 +21,7 @@
<td colspan="2" align="center" >不动产单元号<i class="requisite">*</i></td>
<!-- todo 此处暂时存放的是不动产单元号标识码，而不是不动产单元号-->
<td colspan="4" class="psr">
<el-input v-model="form.bdcdyh" class="percent80" disabled></el-input>
<el-input v-model="form.bdcdyh" class="percent80"></el-input>
<el-button @click.prevent="generatorCode" size="mini" class="createBtn" type="warning">生成</el-button>
</td>
<td colspan="2" align="center" >原不动产单元</td>
......@@ -37,25 +37,25 @@
</td>
<td colspan="2" align="center" >层号</td>
<td colspan="4" >
<el-input v-model="form.ch" disabled></el-input>
<el-input v-model="form.ch"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" >实际层数</td>
<td colspan="4" >
<el-input v-model="form.sjcs" disabled></el-input>
<el-input v-model="form.sjcs"></el-input>
</td>
<td colspan="2" align="center" >实际层</td>
<td colspan="4" >
<el-input v-model="form.sjc" disabled></el-input>
<el-input v-model="form.sjc"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" >所在单元</td>
<td colspan="4" >
<el-input v-model="form.zdymc" disabled></el-input>
<el-input v-model="form.zdymc"></el-input>
</td>
<td colspan="2" align="center" >房屋编号</td>
<td colspan="4" >
......