Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
d551061d by weimo934
Options

Merge remote-tracking branch 'origin/master'

2 parents ddfe447b 79f64351
Inline Side-by-side
Showing 8 changed files with 311 additions and 217 deletions
......@@ -750,6 +750,7 @@
background-color: white;
padding: 10px 0;
margin-bottom: 10px;
border: 1px solid #E6E6E6;
}
.tips{
color: #9B9B9B;
......
<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="main">
<div class="main1">
<template v-if="isCxlz">
<!-- <p class="tips">查询条件</p> -->
<div class="search">
......@@ -344,7 +344,7 @@ export default {
this.$nextTick(() => {
this.tableHeight =
(document.documentElement.clientHeight ||
document.body.clientHeight) - 352;
document.body.clientHeight) - 332;
this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 220;
});
},
......@@ -555,10 +555,12 @@ export default {
};
</script>
<style scoped lang="less">
.main {
.main1 {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 18px;
height: auto;
padding: 20px;
}
.search{
......
......@@ -88,8 +88,7 @@
this.queryData.pageNo=this.pageNo;
this.getData(this.queryData);
this.$nextTick(()=>{
console.log(this.$refs.dataGrid.offsetHeight,'this.$refs.dataGrid.offsetHeight');
this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 332;
})
},
methods: {
......
<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
......