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 @@ ...@@ -750,6 +750,7 @@
750 background-color: white; 750 background-color: white;
751 padding: 10px 0; 751 padding: 10px 0;
752 margin-bottom: 10px; 752 margin-bottom: 10px;
753 border: 1px solid #E6E6E6;
753 } 754 }
754 .tips{ 755 .tips{
755 color: #9B9B9B; 756 color: #9B9B9B;
......
1 <template>
2 <div class="lshs-content">
3 <!-- <div class="slot">-->
4 <!-- <div><span class="tip-title">范围属性变更：</span></div>-->
5 <!-- <div><span class="tip-title">宗地分割：</span></div>-->
6 <!-- <div><span class="tip-title">宗地合并：</span></div>-->
7 <!-- </div>-->
8 <div id="mountNode" ref="containerWidth"></div>
9 <div id="mountNodeRight"></div>
10 </div>
11 </template>
12
13 <script>
14
15 import G6 from '@antv/g6';
16 import insertCss from 'insert-css';
17 import { getLshs } from "@api/fwsxbg";
18
19 export default {
20 name:"",
21 components:{},
22 props:{},
23 data(){
24 insertCss(`
25 .g6-tooltip {
26 border-radius: 6px;
27 font-size: 12px;
28 color: #fff;
29 background-color: #000;
30 padding: 2px 8px;
31 text-align: center;
32 }
33 `);
34 return {
35 data : {}
36 }
37 },
38 created(){
39
40 },
41 mounted(){
42 this.getLshsData();
43 },
44 methods: {
45 initG6() {
46 const data = this.data;
47 const eWidth = this.$refs.containerWidth.clientWidth
48 console.log(eWidth+":width")
49 G6.registerNode(
50 'sql',
51 {
52 drawShape(cfg, group) {
53 const rect = group.addShape('rect', {
54 attrs: {
55 x: -100,
56 y: -25,
57 width: 200,
58 height: 50,
59 radius: 10,
60 stroke: '#5B8FF9',
61 fill: '#C6E5FF',
62 lineWidth: 1,
63 },
64 name: 'rect-shape',
65 });
66 if (cfg.name) {
67 group.addShape('text', {
68 attrs: {
69 text: cfg.name,
70 x: 0,
71 y: 0,
72 fill: '#00287E',
73 fontSize: 14,
74 textAlign: 'center',
75 textBaseline: 'middle',
76 fontWeight: 'bold',
77 },
78 name: 'text-shape',
79 });
80 }
81 return rect;
82 },
83 },
84 'single-node',
85 );
86 G6.registerEdge(
87 'polyline1',
88 {
89 afterDraw(cfg, group) {
90 console.log(cfg.data+":cfg")
91 console.log(group.toString()+"group")
92 },
93 },
94 'polyline',
95 );
96
97 const tooltip = new G6.Tooltip({
98 offsetX: 10,
99 offsetY: 10,
100 itemTypes: ['node', 'edge'],
101 getContent: (e) => {
102 const outDiv = document.createElement('div');
103 outDiv.style.width = 'fit-content';
104 outDiv.innerHTML = `
105 <ul>
106 <li> ${e.item.getModel().conf[0].label}:${e.item.getModel().conf[0].value}</li>
107 <li> ${e.item.getModel().conf[1].label}:${e.item.getModel().conf[1].value}</li>
108 <li> ${e.item.getModel().conf[2].label}:${e.item.getModel().conf[2].value}</li>
109 <li> ${e.item.getModel().conf[3].label}:${e.item.getModel().conf[3].value}</li>
110 <li> ${e.item.getModel().conf[4].label}:${e.item.getModel().conf[4].value}</li>
111 </ul>`
112 ;
113 return outDiv;
114 },
115 });
116
117 const container = document.getElementById('mountNode');
118 console.log(container)
119 const graph = new G6.Graph({
120 container: 'mountNode',
121 width:eWidth,
122 height:1000,
123 layout: {
124 type: 'dagre',
125 nodesepFunc: (d) => {
126 return 100;
127 },
128 ranksep: 30,
129 controlPoints: true,
130 },
131 defaultNode: {
132 type: 'sql',
133 },
134 defaultEdge: {
135 type: 'polyline1',
136 style: {
137 radius: 10,
138 offset: 10,
139 // endArrow: true,
140 lineWidth: 2,
141 stroke: 'rgba(78,142,230,0.45)',
142 },
143 },
144 nodeStateStyles: {
145 selected: {
146 stroke: '#d9d9d9',
147 fill: '#5394ef',
148 },
149 },
150
151 plugins: [tooltip],
152 modes: {
153 default: [
154 'drag-node',
155 'drag-canvas',
156 'zoom-canvas',
157 'click-select',
158 ],
159 },
160
161 fitView: true,
162 });
163
164 graph.data(data);
165 graph.render();
166
167 graph.on('node:mouseenter', e => {
168 graph.setItemState(e.item, 'active', true)
169 });
170 graph.on('node:mouseleave', e => {
171 graph.setItemState(e.item, 'active', false)
172 });
173 graph.on('edge:mouseenter', e => {
174 graph.setItemState(e.item, 'active', true)
175 });
176 graph.on('edge:mouseleave', e => {
177 graph.setItemState(e.item, 'active', false)
178 });
179
180 if (typeof window !== 'undefined')
181 window.onresize = () => {
182 if (!graph || graph.get('destroyed')) return;
183 if (!container || !container.scrollWidth || !container.scrollHeight) return;
184 graph.changeSize(container.scrollWidth, container.scrollHeight);
185 };
186
187 },
188
189 getLshsData(){
190 let _this = this;
191 const data = {
192 "bsm": this.$store.state.zdbsm,
193 "type": "zd"
194 };
195 getLshs(data).then((res)=>{
196 if(res.code===200){
197 _this.data=res.result;
198 this.initG6();
199 }
200 })
201 }
202 },
203 computed: {},
204 watch: {},
205 }
206 </script>
207 <style scoped lang="less">
208
209 .lshs-content{
210 width: 100%;
211 height: 100%;
212 }
213
214 #mountNode{
215 /*height: calc(100% - 68px);*/
216 margin-top: -60px;
217 width: 60%;
218 float: left;
219 }
220
221 #mountNodeRight{
222 width: 38%;
223 float: right;
224 height: 1000px;
225 border: 0 solid #5ebbff;
226 }
227
228 .slot{
229 margin-left: 50px;
230 margin-top: 20px;
231 width: 300px;
232 }
233
234 .tip-title{
235 font-weight: 700;
236 }
237 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="">登记簿</div>
3 </template>
4
5 <script>
6 export default {
7 name:"",
8 components:{},
9 props:{},
10 data(){
11 return {
12 }
13 },
14 created(){},
15 mounted(){},
16 methods:{},
17 computed: {},
18 watch: {},
19 }
20 </script>
21 <style scoped lang="less">
22 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,8 +2,10 @@ ...@@ -2,8 +2,10 @@
2 <div class="content_box"> 2 <div class="content_box">
3 <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick" type="border-card" > 3 <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick" type="border-card" >
4 <el-tab-pane label="多幢基本信息" name="dzxx"><dzxx v-if="dzJbxxVisble"></dzxx></el-tab-pane> 4 <el-tab-pane label="多幢基本信息" name="dzxx"><dzxx v-if="dzJbxxVisble"></dzxx></el-tab-pane>
5 <el-tab-pane label="附件材料" name="fjcl"> 5 <el-tab-pane label="附件材料" name="fjcl"><fjcl v-if="fjclVisible" ref="fjcl"></fjcl></el-tab-pane>
6 <fjcl v-if="fjclVisible" ref="fjcl"></fjcl></el-tab-pane> 6 <el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane>
7 <el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane>
8
7 </el-tabs> 9 </el-tabs>
8 </div> 10 </div>
9 </template> 11 </template>
...@@ -12,10 +14,12 @@ ...@@ -12,10 +14,12 @@
12 import dzxx from "./dzxx"; 14 import dzxx from "./dzxx";
13 import fjcl from "./../zd/fjcl/fjcl" 15 import fjcl from "./../zd/fjcl/fjcl"
14 import {queryStatus} from "@api/search" 16 import {queryStatus} from "@api/search"
17 import Lshs from '@components/lshs/index';
18 import djb from "./djb";
15 export default { 19 export default {
16 name: "", 20 name: "",
17 components: { 21 components: {
18 dzxx,fjcl 22 dzxx,fjcl,Lshs,djb
19 }, 23 },
20 props: {}, 24 props: {},
21 data() { 25 data() {
......
1 <template>
2 <div class="lshs-content">
3 <Lshs></Lshs>
4 </div>
5 </template>
6
7 <script>
8
9 import Lshs from '@components/lshs/index';
10
11 export default {
12 name:"",
13 components:{Lshs},
14 props:{},
15 data(){
16 return {
17 data : {}
18 }
19 },
20 created(){
21
22 },
23 mounted(){
24 },
25 methods: {
26 },
27 computed: {},
28 watch: {},
29 }
30 </script>
31 <style scoped lang="less">
32
33 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="main"> 2 <div class="main1">
3 <template v-if="isCxlz"> 3 <template v-if="isCxlz">
4 <!-- <p class="tips">查询条件</p> --> 4 <!-- <p class="tips">查询条件</p> -->
5 <div class="search"> 5 <div class="search">
...@@ -344,7 +344,7 @@ export default { ...@@ -344,7 +344,7 @@ export default {
344 this.$nextTick(() => { 344 this.$nextTick(() => {
345 this.tableHeight = 345 this.tableHeight =
346 (document.documentElement.clientHeight || 346 (document.documentElement.clientHeight ||
347 document.body.clientHeight) - 352; 347 document.body.clientHeight) - 332;
348 this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 220; 348 this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 220;
349 }); 349 });
350 }, 350 },
...@@ -555,10 +555,12 @@ export default { ...@@ -555,10 +555,12 @@ export default {
555 }; 555 };
556 </script> 556 </script>
557 <style scoped lang="less"> 557 <style scoped lang="less">
558 .main { 558 .main1 {
559 width: 100%;
560 height: 100%;
561 -webkit-box-sizing: border-box;
559 box-sizing: border-box; 562 box-sizing: border-box;
560 padding: 18px; 563 padding: 20px;
561 height: auto;
562 } 564 }
563 .search{ 565 .search{
564 566
......
...@@ -88,8 +88,7 @@ ...@@ -88,8 +88,7 @@
88 this.queryData.pageNo=this.pageNo; 88 this.queryData.pageNo=this.pageNo;
89 this.getData(this.queryData); 89 this.getData(this.queryData);
90 this.$nextTick(()=>{ 90 this.$nextTick(()=>{
91 console.log(this.$refs.dataGrid.offsetHeight,'this.$refs.dataGrid.offsetHeight'); 91 this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 332;
92 this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
93 }) 92 })
94 }, 93 },
95 methods: { 94 methods: {
......
1 <template> 1 <template>
2 <div class="lshs-content"> 2 <div class="lshs-content">
3 <!-- <div class="slot">--> 3 <Lshs></Lshs>
4 <!-- <div><span class="tip-title">范围属性变更：</span></div>-->
5 <!-- <div><span class="tip-title">宗地分割：</span></div>-->
6 <!-- <div><span class="tip-title">宗地合并：</span></div>-->
7 <!-- </div>-->
8 <div id="mountNode" ref="containerWidth"></div>
9 <div id="mountNodeRight"></div>
10 </div> 4 </div>
11 </template> 5 </template>
12 6
13 <script> 7 <script>
14 8
15 import G6 from '@antv/g6'; 9 import Lshs from '@components/lshs/index';
16 import insertCss from 'insert-css';
17 import { getLshs } from "@api/fwsxbg";
18 10
19 export default { 11 export default {
20 name:"", 12 name:"",
21 components:{}, 13 components:{Lshs},
22 props:{}, 14 props:{},
23 data(){ 15 data(){
24 insertCss(`
25 .g6-tooltip {
26 border-radius: 6px;
27 font-size: 12px;
28 color: #fff;
29 background-color: #000;
30 padding: 2px 8px;
31 text-align: center;
32 }
33 `);
34 return { 16 return {
35 data : {} 17 data : {}
36 } 18 }
...@@ -39,166 +21,8 @@ export default { ...@@ -39,166 +21,8 @@ export default {
39 21
40 }, 22 },
41 mounted(){ 23 mounted(){
42 this.getLshsData();
43 }, 24 },
44 methods: { 25 methods: {
45 initG6() {
46 const data = this.data;
47 const eWidth = this.$refs.containerWidth.clientWidth
48 console.log(eWidth+":width")
49 G6.registerNode(
50 'sql',
51 {
52 drawShape(cfg, group) {
53 const rect = group.addShape('rect', {
54 attrs: {
55 x: -100,
56 y: -25,
57 width: 200,
58 height: 50,
59 radius: 10,
60 stroke: '#5B8FF9',
61 fill: '#C6E5FF',
62 lineWidth: 1,
63 },
64 name: 'rect-shape',
65 });
66 if (cfg.name) {
67 group.addShape('text', {
68 attrs: {
69 text: cfg.name,
70 x: 0,
71 y: 0,
72 fill: '#00287E',
73 fontSize: 14,
74 textAlign: 'center',
75 textBaseline: 'middle',
76 fontWeight: 'bold',
77 },
78 name: 'text-shape',
79 });
80 }
81 return rect;
82 },
83 },
84 'single-node',
85 );
86 G6.registerEdge(
87 'polyline1',
88 {
89 afterDraw(cfg, group) {
90 console.log(cfg.data+":cfg")
91 console.log(group.toString()+"group")
92 },
93 },
94 'polyline',
95 );
96
97 const tooltip = new G6.Tooltip({
98 offsetX: 10,
99 offsetY: 10,
100 itemTypes: ['node', 'edge'],
101 getContent: (e) => {
102 const outDiv = document.createElement('div');
103 outDiv.style.width = 'fit-content';
104 outDiv.innerHTML = `
105 <ul>
106 <li> ${e.item.getModel().conf[0].label}:${e.item.getModel().conf[0].value}</li>
107 <li> ${e.item.getModel().conf[1].label}:${e.item.getModel().conf[1].value}</li>
108 <li> ${e.item.getModel().conf[2].label}:${e.item.getModel().conf[2].value}</li>
109 <li> ${e.item.getModel().conf[3].label}:${e.item.getModel().conf[3].value}</li>
110 <li> ${e.item.getModel().conf[4].label}:${e.item.getModel().conf[4].value}</li>
111 </ul>`
112 ;
113 return outDiv;
114 },
115 });
116
117 const container = document.getElementById('mountNode');
118 console.log(container)
119 const graph = new G6.Graph({
120 container: 'mountNode',
121 width:eWidth,
122 height:1000,
123 layout: {
124 type: 'dagre',
125 nodesepFunc: (d) => {
126 return 100;
127 },
128 ranksep: 30,
129 controlPoints: true,
130 },
131 defaultNode: {
132 type: 'sql',
133 },
134 defaultEdge: {
135 type: 'polyline1',
136 style: {
137 radius: 10,
138 offset: 10,
139 // endArrow: true,
140 lineWidth: 2,
141 stroke: 'rgba(78,142,230,0.45)',
142 },
143 },
144 nodeStateStyles: {
145 selected: {
146 stroke: '#d9d9d9',
147 fill: '#5394ef',
148 },
149 },
150
151 plugins: [tooltip],
152 modes: {
153 default: [
154 'drag-node',
155 'drag-canvas',
156 'zoom-canvas',
157 'click-select',
158 ],
159 },
160
161 fitView: true,
162 });
163
164 graph.data(data);
165 graph.render();
166
167 graph.on('node:mouseenter', e => {
168 graph.setItemState(e.item, 'active', true)
169 });
170 graph.on('node:mouseleave', e => {
171 graph.setItemState(e.item, 'active', false)
172 });
173 graph.on('edge:mouseenter', e => {
174 graph.setItemState(e.item, 'active', true)
175 });
176 graph.on('edge:mouseleave', e => {
177 graph.setItemState(e.item, 'active', false)
178 });
179
180 if (typeof window !== 'undefined')
181 window.onresize = () => {
182 if (!graph || graph.get('destroyed')) return;
183 if (!container || !container.scrollWidth || !container.scrollHeight) return;
184 graph.changeSize(container.scrollWidth, container.scrollHeight);
185 };
186
187 },
188
189 getLshsData(){
190 let _this = this;
191 const data = {
192 "bsm": this.$store.state.zdbsm,
193 "type": "zd"
194 };
195 getLshs(data).then((res)=>{
196 if(res.code===200){
197 _this.data=res.result;
198 this.initG6();
199 }
200 })
201 }
202 }, 26 },
203 computed: {}, 27 computed: {},
204 watch: {}, 28 watch: {},
...@@ -206,32 +30,4 @@ export default { ...@@ -206,32 +30,4 @@ export default {
206 </script> 30 </script>
207 <style scoped lang="less"> 31 <style scoped lang="less">
208 32
209 .lshs-content{
210 width: 100%;
211 height: 100%;
212 }
213
214 #mountNode{
215 /*height: calc(100% - 68px);*/
216 margin-top: -60px;
217 width: 60%;
218 float: left;
219 }
220
221 #mountNodeRight{
222 width: 38%;
223 float: right;
224 height: 1000px;
225 border: 0 solid #5ebbff;
226 }
227
228 .slot{
229 margin-left: 50px;
230 margin-top: 20px;
231 width: 300px;
232 }
233
234 .tip-title{
235 font-weight: 700;
236 }
237 </style> 33 </style>
...\ No newline at end of file ...\ No newline at end of file
......