Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
37a9b3f0 by 杨威
Options

历史回溯修改

1 parent 42ae4331
Inline Side-by-side
Showing 1 changed file with 433 additions and 350 deletions
<template >
<div class="main">
<div id="mountNode" ref="containerWidth">
<div v-show="showhide" style="margin: 20px 0 0 20px;color:red;">暂无变更业务，没有历史回溯数据</div>
</div>
<div id="mountNodeRight">
<div><span class="tip-title">基础信息</span></div>
<el-divider></el-divider>
<div style="line-height: 40px">
<template>
<div class="main">
<div id="mountNode" ref="containerWidth">
<div v-show="showhide" style="margin: 20px 0 0 20px;color:red;">
暂无变更业务，没有历史回溯数据
</div>
</div>
<div id="mountNodeRight">
<el-tabs v-model="activeName" @tab-click="handleClick" >
<el-tab-pane label="基础信息" name="jcxx">
<div style="line-height: 40px">
<el-row>
<el-col :span="6"><div class="grid-left">项目名称</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.xmmc}}</div></el-col>
<el-col :span="6"><div class="grid-left">项目名称</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.xmmc }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">宗地代码</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zddm}}</div></el-col>
<el-col :span="6"><div class="grid-left">宗地代码</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zddm }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">不动产单元号</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.bdcdyh}}</div></el-col>
<el-col :span="6"><div class="grid-left">不动产单元号</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.bdcdyh }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">不动产权证号</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.bdcdyh}}</div></el-col>
<el-col :span="6"><div class="grid-left">不动产权证号</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.bdcdyh }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">自然幢号</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zrzh}}</div></el-col>
<el-col :span="6"><div class="grid-left">自然幢号</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zrzh }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">权利人</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.qlr}}</div></el-col>
</el-row>
<el-col :span="6"><div class="grid-left">权利人</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.qlr }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">权利性质</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.qlxz}}</div></el-col>
<el-col :span="6"><div class="grid-left">权利性质</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.qlxz }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">土地用途</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.fwyt}}</div></el-col>
<el-col :span="6"><div class="grid-left">土地用途</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.fwyt }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">坐落</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zl}}</div></el-col>
<el-col :span="6"><div class="grid-left">坐落</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zl }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">宗地面积</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zdmj}}</div></el-col>
<el-col :span="6"><div class="grid-left">宗地面积</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zdmj }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">宗地四至-北至</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zdszb}}</div></el-col>
<el-col :span="6"><div class="grid-left">宗地四至-北至</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zdszb }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">宗地四至-东至</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zdszd}}</div></el-col>
<el-col :span="6"><div class="grid-left">宗地四至-东至</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zdszd }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">宗地四至-南至</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zdszn}}</div></el-col>
<el-col :span="6"><div class="grid-left">宗地四至-南至</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zdszn }}</div></el-col
>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-left">宗地四至-西至</div></el-col>
<el-col :span="18"><div class="grid-right">{{result.zdszx}}</div></el-col>
<el-col :span="6"><div class="grid-left">宗地四至-西至</div></el-col>
<el-col :span="18"
><div class="grid-right">{{ result.zdszx }}</div></el-col
>
</el-row>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="登记簿" name="djb" >
暂无数据
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import G6 from '@antv/g6';
import insertCss from 'insert-css';
import { getLshs } from "@api/fwsxbg";
import { getQjZdjbxxDetailByIdBylshs } from "@api/zd";
import { getZrzDetailByBsmBylshs } from "@api/zrz";
import { getDzDetailByBsm } from "@api/dz";
import G6 from "@antv/g6";
import insertCss from "insert-css";
import { getLshs } from "@api/fwsxbg";
import { getQjZdjbxxDetailByIdBylshs } from "@api/zd";
import { getZrzDetailByBsmBylshs } from "@api/zrz";
import { getDzDetailByBsm } from "@api/dz";
export default {
name:"",
components:{},
props:{
bsm: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
},
data(){
insertCss(`
name: "",
components: {},
props: {
bsm: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
},
data() {
insertCss(`
.g6-tooltip {
border-radius: 6px;
font-size: 12px;
......@@ -103,300 +136,350 @@ export default {
text-align: center;
}
`);
return {
showhide:false,
data : {},
activeName: 'first',
result:{},
}
},
created(){
},
mounted(){
this.getLshsData();
},
methods: {
initG6() {
const self=this;
const data = this.data;
const eWidth = this.$refs.containerWidth.clientWidth;
const eHeight = this.$refs.containerWidth.clientHeight;
const mountNodeRight1=document.getElementById('mountNodeRight');
mountNodeRight1.style.height=eHeight-20+'px';
G6.registerNode(
'sql',
{
drawShape(cfg, group) {
var dClor='#ffffff';
if(cfg.id==self.bsm){
dClor='#C6E5FF';
}
const rect = group.addShape('rect', {
attrs: {
x: -100,
y: -25,
width: 200,
height: 50,
radius: 10,
stroke: '#5B8FF9',
fill: dClor,
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) => {
debugger;
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
outDiv.innerHTML = `
return {
showhide: false,
data: {},
activeName: "jcxx",
result: {},
};
},
created() {},
mounted() {
this.getLshsData();
},
methods: {
initG6() {
const self = this;
const data = this.data;
const eWidth = this.$refs.containerWidth.clientWidth;
const eHeight = this.$refs.containerWidth.clientHeight;
const mountNodeRight1 = document.getElementById("mountNodeRight");
mountNodeRight1.style.height = eHeight - 20 + "px";
G6.registerNode(
"sql",
{
drawShape(cfg, group) {
var dClor = "#ffffff";
if (cfg.id == self.bsm) {
dClor = "#C6E5FF";
}
const rect = group.addShape("rect", {
attrs: {
x: -100,
y: -25,
width: 200,
height: 50,
radius: 10,
stroke: "#5B8FF9",
fill: dClor,
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.className = "tips";
outDiv.innerHTML = `
<p class="tit">基本信息</p>
<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:eHeight,
layout: {
type: 'dagre',
nodesepFunc: (d) => {
return 100;
},
ranksep: 30,
controlPoints: true,
},
defaultNode: {
type: 'sql',
},
defaultEdge: {
type: 'polyline1',
style: {
endArrow: true,
radius: 10,
offset: 10,
// fontSize:14,
// 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:click', e => {
switch (this.type) {
case "zrz":
getZrzDetailByBsmBylshs(e.item._cfg.id).then((res)=>{
if(res.code === 200){
self.result = res.result;
}
})
break;
case "zd":
getQjZdjbxxDetailByIdBylshs(e.item._cfg.id).then((res)=>{
if(res.code === 200){
self.result = res.result;
}
})
break;
case "dz":
getDzDetailByBsm(e.item._cfg.id).then((res)=>{
if(res.code === 200){
self.result = res.result;
}
})
break;
default:
break;
}
});
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.bsm,
"type": this.type
};
getLshs(data).then((res)=>{
if(res.code===200){
_this.data=res.result;
//_this.data.nodes.length;// 判断个数
if(_this.data.nodes.length==0){
//暂无变更业务，没有历史回溯数据。
this.showhide=true;
}else{
this.initG6();
}
}
});
switch (this.type) {
case "zrz":
getZrzDetailByBsmBylshs(this.bsm).then((res)=>{
if(res.code === 200){
this.result = res.result;
}
<li> <span>${e.item.getModel().conf[0].label}：</span><span>${
e.item.getModel().conf[0].value
}</span></li>
<li> <span>${e.item.getModel().conf[1].label}：</span><span>${
e.item.getModel().conf[1].value
}</span></li>
<li> <span>${e.item.getModel().conf[2].label}：</span><span>${
e.item.getModel().conf[2].value
}</span></li>
<li> <span>${e.item.getModel().conf[3].label}：</span><span>${
e.item.getModel().conf[3].value
}</span></li>
<li> <span>${e.item.getModel().conf[4].label}：</span><span>${
e.item.getModel().conf[4].value
}</span></li>
</ul>`;
return outDiv;
},
});
const container = document.getElementById("mountNode");
// console.log(container)
const graph = new G6.Graph({
container: "mountNode",
width: eWidth,
height: eHeight,
layout: {
type: "dagre",
nodesepFunc: (d) => {
return 100;
},
ranksep: 30,
controlPoints: true,
},
defaultNode: {
type: "sql",
},
defaultEdge: {
type: "polyline1",
style: {
endArrow: true,
radius: 10,
offset: 10,
// fontSize:14,
// 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,
fitViewPadding: 200,
});
graph.data(data);
graph.render();
graph.on("node:click", (e) => {
switch (this.type) {
case "zrz":
getZrzDetailByBsmBylshs(e.item._cfg.id).then((res) => {
if (res.code === 200) {
self.result = res.result;
}
});
break;
case "zd":
getQjZdjbxxDetailByIdBylshs(e.item._cfg.id).then((res) => {
if (res.code === 200) {
self.result = res.result;
}
});
break;
case "dz":
getDzDetailByBsm(e.item._cfg.id).then((res) => {
if (res.code === 200) {
self.result = res.result;
}
});
break;
default:
break;
}
});
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.bsm,
type: this.type,
};
getLshs(data).then((res) => {
if (res.code === 200) {
_this.data = res.result;
//_this.data.nodes.length;// 判断个数
if (_this.data.nodes.length == 0) {
//暂无变更业务，没有历史回溯数据。
this.showhide = true;
} else {
_this.data.nodes.forEach(node => {
node.conf.forEach(i => {
i.value = i.value == null || i.value == "" ? '暂无数据':i.value
})
break;
case "zd":
getQjZdjbxxDetailByIdBylshs(this.bsm).then((res)=>{
if(res.code === 200){
this.result = res.result;
}
})
break;
case "dz":
getDzDetailByBsm(this.bsm).then((res)=>{
if(res.code === 200){
this.result = res.result;
}
})
break;
default:
break;
}
}
},
computed: {},
watch: {},
}
});
this.initG6();
}
}
});
switch (this.type) {
case "zrz":
getZrzDetailByBsmBylshs(this.bsm).then((res) => {
if (res.code === 200) {
this.result = res.result;
}
});
break;
case "zd":
getQjZdjbxxDetailByIdBylshs(this.bsm).then((res) => {
if (res.code === 200) {
this.result = res.result;
}
});
break;
case "dz":
getDzDetailByBsm(this.bsm).then((res) => {
if (res.code === 200) {
this.result = res.result;
}
});
break;
default:
break;
}
},
},
computed: {},
watch: {},
};
</script>
<style scoped lang="less">
#mountNode{
width: 50%;
height: calc(100% - 140px);
border: 1px solid #E6E6E6;
background: white;
<style scoped lang="less">
#mountNode {
width: 60%;
height: calc(100% - 10px);
border: 1px solid #e6e6e6;
background: white;
position: relative;
float: left;
/*border: 1px solid red;*/
}
position:absolute;
float: left;
/*border: 1px solid red;*/
}
#mountNodeRight {
width: calc(40% - 20px);
float: right;
height: calc(100% - 8px)!important;
border: 1px solid #e6e6e6;
background: white;
box-sizing: border-box;
padding: 20px 20px 0 20px;
}
#mountNodeRight{
width: 36%;
float: right;
height: calc(100% - 22px);
border: 1px solid #E6E6E6;
background: white;
padding: 20px 20px 0 20px;
}
.slot {
margin-left: 50px;
margin-top: 20px;
width: 300px;
}
.slot{
margin-left: 50px;
margin-top: 20px;
width: 300px;
}
.tip-title {
font-weight: 700;
}
.tip-title{
font-weight: 700;
}
.grid-left {
text-align: right;
padding-right: 5%;
}
.grid-left{
text-align: right;
padding-right: 5%;
.grid-right {
text-align: left;
padding-left: 5%;
}
.el-tabs {
/deep/.el-tabs__header{
position: unset!important;
}
/deep/.el-tabs__content{
box-sizing: border-box;
padding-top: 10px!important;
background-color:#fff!important;
}
}
/deep/.g6-component-tooltip {
padding: 0;
font-size: 16px;
.tips {
border-radius: 5px;
border: 1px solid #EAEAEA;
box-shadow: 4px 4px 24px 0px rgba(0, 0, 0, 0.12);
.tit {
height: 40px;
line-height: 40px;
color: #9B9B9B;
background-color: #fafafa;
box-sizing: border-box;
padding: 0 20px;
border-bottom: 1px solid #E6E6E6;
}
.grid-right{
text-align: left;
padding-left: 5%;
ul{
box-sizing: border-box;
padding: 10px 20px 20px 20px;
li{
span{
display: inline-block;
height: 30px;
line-height: 30px;
}
span:first-child{
width: 120px;
text-align: right;
color: #4A4A4A;
}
span:last-child{
color: #6D7278;
}
}
}
</style>
\ No newline at end of file
}
}
</style>
......