Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
85b5a8b9 by zhaoqian
Options

多幢的历史回溯和登记簿

1 parent 2e48cf4e
Inline Side-by-side
Showing 5 changed files with 302 additions and 210 deletions
<template>
<div class="lshs-content">
<!-- <div class="slot">-->
<!-- <div><span class="tip-title">范围属性变更：</span></div>-->
<!-- <div><span class="tip-title">宗地分割：</span></div>-->
<!-- <div><span class="tip-title">宗地合并：</span></div>-->
<!-- </div>-->
<div id="mountNode" ref="containerWidth"></div>
<div id="mountNodeRight"></div>
</div>
</template>
<script>
import G6 from '@antv/g6';
import insertCss from 'insert-css';
import { getLshs } from "@api/fwsxbg";
export default {
name:"",
components:{},
props:{},
data(){
insertCss(`
.g6-tooltip {
border-radius: 6px;
font-size: 12px;
color: #fff;
background-color: #000;
padding: 2px 8px;
text-align: center;
}
`);
return {
data : {}
}
},
created(){
},
mounted(){
this.getLshsData();
},
methods: {
initG6() {
const data = this.data;
const eWidth = this.$refs.containerWidth.clientWidth
console.log(eWidth+":width")
G6.registerNode(
'sql',
{
drawShape(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
x: -100,
y: -25,
width: 200,
height: 50,
radius: 10,
stroke: '#5B8FF9',
fill: '#C6E5FF',
lineWidth: 1,
},
name: 'rect-shape',
});
if (cfg.name) {
group.addShape('text', {
attrs: {
text: cfg.name,
x: 0,
y: 0,
fill: '#00287E',
fontSize: 14,
textAlign: 'center',
textBaseline: 'middle',
fontWeight: 'bold',
},
name: 'text-shape',
});
}
return rect;
},
},
'single-node',
);
G6.registerEdge(
'polyline1',
{
afterDraw(cfg, group) {
console.log(cfg.data+":cfg")
console.log(group.toString()+"group")
},
},
'polyline',
);
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 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');
console.log(container)
const graph = new G6.Graph({
container: 'mountNode',
width:eWidth,
height:1000,
layout: {
type: 'dagre',
nodesepFunc: (d) => {
return 100;
},
ranksep: 30,
controlPoints: true,
},
defaultNode: {
type: 'sql',
},
defaultEdge: {
type: 'polyline1',
style: {
radius: 10,
offset: 10,
// endArrow: true,
lineWidth: 2,
stroke: 'rgba(78,142,230,0.45)',
},
},
nodeStateStyles: {
selected: {
stroke: '#d9d9d9',
fill: '#5394ef',
},
},
plugins: [tooltip],
modes: {
default: [
'drag-node',
'drag-canvas',
'zoom-canvas',
'click-select',
],
},
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;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
},
getLshsData(){
let _this = this;
const data = {
"bsm": this.$store.state.zdbsm,
"type": "zd"
};
getLshs(data).then((res)=>{
if(res.code===200){
_this.data=res.result;
this.initG6();
}
})
}
},
computed: {},
watch: {},
}
</script>
<style scoped lang="less">
.lshs-content{
width: 100%;
height: 100%;
}
#mountNode{
/*height: calc(100% - 68px);*/
margin-top: -60px;
width: 60%;
float: left;
}
#mountNodeRight{
width: 38%;
float: right;
height: 1000px;
border: 0 solid #5ebbff;
}
.slot{
margin-left: 50px;
margin-top: 20px;
width: 300px;
}
.tip-title{
font-weight: 700;
}
</style>
\ No newline at end of file
<template>
<div class="">登记簿</div>
</template>
<script>
export default {
name:"",
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
methods:{},
computed: {},
watch: {},
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
......@@ -2,8 +2,10 @@
<div class="content_box">
<el-tabs v-model="activeName" class="tabs" @tab-click="handleClick" type="border-card" >
<el-tab-pane label="多幢基本信息" name="dzxx"><dzxx v-if="dzJbxxVisble"></dzxx></el-tab-pane>
<el-tab-pane label="附件材料" name="fjcl">
<fjcl v-if="fjclVisible" ref="fjcl"></fjcl></el-tab-pane>
<el-tab-pane label="附件材料" name="fjcl"><fjcl v-if="fjclVisible" ref="fjcl"></fjcl></el-tab-pane>
<el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane>
<el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane>
</el-tabs>
</div>
</template>
......@@ -12,10 +14,12 @@
import dzxx from "./dzxx";
import fjcl from "./../zd/fjcl/fjcl"
import {queryStatus} from "@api/search"
import Lshs from '@components/lshs/index';
import djb from "./djb";
export default {
name: "",
components: {
dzxx,fjcl
dzxx,fjcl,Lshs,djb
},
props: {},
data() {
......
<template>
<div class="lshs-content">
<Lshs></Lshs>
</div>
</template>
<script>
import Lshs from '@components/lshs/index';
export default {
name:"",
components:{Lshs},
props:{},
data(){
return {
data : {}
}
},
created(){
},
mounted(){
},
methods: {
},
computed: {},
watch: {},
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
<template>
<div class="lshs-content">
<!-- <div class="slot">-->
<!-- <div><span class="tip-title">范围属性变更：</span></div>-->
<!-- <div><span class="tip-title">宗地分割：</span></div>-->
<!-- <div><span class="tip-title">宗地合并：</span></div>-->
<!-- </div>-->
<div id="mountNode" ref="containerWidth"></div>
<div id="mountNodeRight"></div>
<Lshs></Lshs>
</div>
</template>
<script>
import G6 from '@antv/g6';
import insertCss from 'insert-css';
import { getLshs } from "@api/fwsxbg";
import Lshs from '@components/lshs/index';
export default {
name:"",
components:{},
components:{Lshs},
props:{},
data(){
insertCss(`
.g6-tooltip {
border-radius: 6px;
font-size: 12px;
color: #fff;
background-color: #000;
padding: 2px 8px;
text-align: center;
}
`);
return {
data : {}
}
......@@ -39,166 +21,8 @@ export default {
},
mounted(){
this.getLshsData();
},
methods: {
initG6() {
const data = this.data;
const eWidth = this.$refs.containerWidth.clientWidth
console.log(eWidth+":width")
G6.registerNode(
'sql',
{
drawShape(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
x: -100,
y: -25,
width: 200,
height: 50,
radius: 10,
stroke: '#5B8FF9',
fill: '#C6E5FF',
lineWidth: 1,
},
name: 'rect-shape',
});
if (cfg.name) {
group.addShape('text', {
attrs: {
text: cfg.name,
x: 0,
y: 0,
fill: '#00287E',
fontSize: 14,
textAlign: 'center',
textBaseline: 'middle',
fontWeight: 'bold',
},
name: 'text-shape',
});
}
return rect;
},
},
'single-node',
);
G6.registerEdge(
'polyline1',
{
afterDraw(cfg, group) {
console.log(cfg.data+":cfg")
console.log(group.toString()+"group")
},
},
'polyline',
);
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 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');
console.log(container)
const graph = new G6.Graph({
container: 'mountNode',
width:eWidth,
height:1000,
layout: {
type: 'dagre',
nodesepFunc: (d) => {
return 100;
},
ranksep: 30,
controlPoints: true,
},
defaultNode: {
type: 'sql',
},
defaultEdge: {
type: 'polyline1',
style: {
radius: 10,
offset: 10,
// endArrow: true,
lineWidth: 2,
stroke: 'rgba(78,142,230,0.45)',
},
},
nodeStateStyles: {
selected: {
stroke: '#d9d9d9',
fill: '#5394ef',
},
},
plugins: [tooltip],
modes: {
default: [
'drag-node',
'drag-canvas',
'zoom-canvas',
'click-select',
],
},
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;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
},
getLshsData(){
let _this = this;
const data = {
"bsm": this.$store.state.zdbsm,
"type": "zd"
};
getLshs(data).then((res)=>{
if(res.code===200){
_this.data=res.result;
this.initG6();
}
})
}
},
computed: {},
watch: {},
......@@ -206,32 +30,4 @@ export default {
</script>
<style scoped lang="less">
.lshs-content{
width: 100%;
height: 100%;
}
#mountNode{
/*height: calc(100% - 68px);*/
margin-top: -60px;
width: 60%;
float: left;
}
#mountNodeRight{
width: 38%;
float: right;
height: 1000px;
border: 0 solid #5ebbff;
}
.slot{
margin-left: 50px;
margin-top: 20px;
width: 300px;
}
.tip-title{
font-weight: 700;
}
</style>
\ No newline at end of file
......