Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
fb67cc55 by 杨威
Options

变更模块下的宗地分割页面重绘

1 parent 1ce5b014
Inline Side-by-side
Showing 1 changed file with 148 additions and 89 deletions
...@@ -6,30 +6,34 @@ ...@@ -6,30 +6,34 @@
6 <span class="tips">分割前宗地信息</span> 6 <span class="tips">分割前宗地信息</span>
7 <el-button type="primary" class="addBtn" @click="newAdd">新增</el-button> 7 <el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
8 <div class="fgq"> 8 <div class="fgq">
9 <div class="data"> 9 <el-card class="data">
10 <div slot="header" class="clearfix">
11 <span>基本信息</span>
12 </div>
10 <ul> 13 <ul>
11 <li><span>宗地代码:</span>{{zdFgqData.zddm}}</li> 14 <li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li>
12 <li><span>不动产单元号:</span>{{zdFgqData.bdcdyh}}</li> 15 <li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li>
13 <li><span>项目名称:</span>{{zdFgqData.xmmc}}</li> 16 <li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li>
14 <li><span>不动产权证号:</span>{{zdFgqData.bdcqzh}}</li> 17 <li><span class="label">不动产权证号:</span><span class="value">{{zdFgqData.bdcqzh}}</span></li>
15 <li><span>权利人:</span>{{zdFgqData.qlr}}</li> 18 <li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li>
16 <li><span>坐落:</span>{{zdFgqData.zl}}</li> 19 <li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li>
17 </ul> 20 </ul>
18 </div> 21 </el-card>
19 <div class="zxx"> 22 <div class="zxx">
20 <div class="dz"> 23 <el-card class="dz">
21 <div class="title"> 24 <div slot="header" class="clearfix">
22 <span>多幢信息({{zdZxx.dzList.length}}个)</span> 25 <span>多幢信息({{zdZxx.dzList.length}}个)</span>
23 </div> 26 </div>
24 <ul> 27 <ul>
25 <li v-for="(item,index) in zdZxx.dzList" :key="index" 28 <li v-for="(item,index) in zdZxx.dzList" :key="index"
26 :class="[{'search':!zdDzList.includes(item)}]" 29 :class="[{'search':!zdDzList.includes(item)}]"
27 >{{item.displays}} 30 ><span class="label">多幢名称:</span> <span class="value">{{item.displays}}</span>
28 </li> 31 </li>
29 </ul> 32 </ul>
30 </div> 33 </el-card>
31 <div class="zrz"> 34
32 <div class="title"> 35 <el-card class="zrz">
36 <div slot="header" class="clearfix">
33 <span>自然幢信息({{zdZxx.zrzList.length}}个)</span> 37 <span>自然幢信息({{zdZxx.zrzList.length}}个)</span>
34 </div> 38 </div>
35 <ul> 39 <ul>
...@@ -38,7 +42,8 @@ ...@@ -38,7 +42,8 @@
38 {{item.displays}} 42 {{item.displays}}
39 </li> 43 </li>
40 </ul> 44 </ul>
41 </div> 45 <div class="line"></div>
46 </el-card>
42 </div> 47 </div>
43 </div> 48 </div>
44 <div class="fgh"> 49 <div class="fgh">
...@@ -53,7 +58,25 @@ ...@@ -53,7 +58,25 @@
53 <th class="tdtzm">土地特征码</th> 58 <th class="tdtzm">土地特征码</th>
54 <th class="xmmc">项目名称</th> 59 <th class="xmmc">项目名称</th>
55 <th class="xzzxx">幢信息</th> 60 <th class="xzzxx">幢信息</th>
56 <th class="">选择</th> 61 <!-- <th class="">选择</th> -->
62 </tr>
63 <tr>
64 <td>
65 <el-button
66 type="primary"
67 class="changeBtn outAdd addMinus"
68 @click="addRow"
69 >+
70 </el-button
71 >
72 </td>
73 <td></td>
74 <td></td>
75 <td></td>
76 <td></td>
77 <td></td>
78 <td></td>
79 <td></td>
57 </tr> 80 </tr>
58 <tr v-for="(item,index) in zdFghData.newZdlist" :key="index"> 81 <tr v-for="(item,index) in zdFghData.newZdlist" :key="index">
59 <td class="cz"> 82 <td class="cz">
...@@ -66,7 +89,7 @@ ...@@ -66,7 +89,7 @@
66 > 89 >
67 </td> 90 </td>
68 <td class="xzq"> 91 <td class="xzq">
69 <el-select v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)"> 92 <el-select class="" v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)">
70 <el-option 93 <el-option
71 v-for="i in xzq" 94 v-for="i in xzq"
72 :key="i.bsm" 95 :key="i.bsm"
...@@ -76,7 +99,7 @@ ...@@ -76,7 +99,7 @@
76 </el-select> 99 </el-select>
77 </td> 100 </td>
78 <td class="djq"> 101 <td class="djq">
79 <el-select v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)"> 102 <el-select class="" v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)">
80 <el-option 103 <el-option
81 v-for="i in djq" 104 v-for="i in djq"
82 :key="i.bsm" 105 :key="i.bsm"
...@@ -86,7 +109,7 @@ ...@@ -86,7 +109,7 @@
86 </el-select> 109 </el-select>
87 </td> 110 </td>
88 <td class="syqlx"> 111 <td class="syqlx">
89 <el-select v-model="item.djzqbsm"> 112 <el-select class="" v-model="item.djzqbsm">
90 <el-option 113 <el-option
91 v-for="i in djzq" 114 v-for="i in djzq"
92 :key="i.bsm" 115 :key="i.bsm"
...@@ -96,7 +119,7 @@ ...@@ -96,7 +119,7 @@
96 </el-select> 119 </el-select>
97 </td> 120 </td>
98 <td class="tdtzm"> 121 <td class="tdtzm">
99 <el-select v-model="item.syqlxbsm"> 122 <el-select class="" v-model="item.syqlxbsm">
100 <el-option 123 <el-option
101 v-for="i in syq" 124 v-for="i in syq"
102 :key="i.value" 125 :key="i.value"
...@@ -106,7 +129,7 @@ ...@@ -106,7 +129,7 @@
106 </el-select> 129 </el-select>
107 </td> 130 </td>
108 <td class="syqlx"> 131 <td class="syqlx">
109 <el-select v-model="item.zdtzmbsm"> 132 <el-select class="" v-model="item.zdtzmbsm">
110 <el-option 133 <el-option
111 v-for="i in tdtzm" 134 v-for="i in tdtzm"
112 :key="i.bsm" 135 :key="i.bsm"
...@@ -119,7 +142,7 @@ ...@@ -119,7 +142,7 @@
119 <input type="text" v-model="item.xmmc" class="formInput"/> 142 <input type="text" v-model="item.xmmc" class="formInput"/>
120 </td> 143 </td>
121 <td class="xzzxx"> 144 <td class="xzzxx">
122 <span>多幢:</span> 145 <!-- <span>多幢:</span>
123 <ul> 146 <ul>
124 <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex" 147 <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex"
125 @mouseenter="mouseenter($event,index,dzIndex,'dz')" 148 @mouseenter="mouseenter($event,index,dzIndex,'dz')"
...@@ -135,9 +158,14 @@ ...@@ -135,9 +158,14 @@
135 >{{zrzItem.xmmc}} 158 >{{zrzItem.xmmc}}
136 <span v-if="zrzIndex<item.zrz.length-1">,</span> 159 <span v-if="zrzIndex<item.zrz.length-1">,</span>
137 </li> 160 </li>
138 </ul> 161 </ul> -->
162 <span class="zxx">自然幢1 <i class="fa fa-times"></i></span>
163 <span class="zxx">自然幢2 <i class="fa fa-times"></i></span>
164 <span class="zxx">自然幢3 <i class="fa fa-times"></i></span>
165 <span class="zxx">多幢1 <i class="fa fa-times"></i></span>
166 <span class="choose">选择</span>
139 </td> 167 </td>
140 <td class=""> 168 <!-- <td class="">
141 <el-dropdown @command="dzHandleCommand($event,index)"> 169 <el-dropdown @command="dzHandleCommand($event,index)">
142 <span class="el-dropdown-link"> 170 <span class="el-dropdown-link">
143 选择多幢<i class="el-icon-arrow-down el-icon--right"></i> 171 选择多幢<i class="el-icon-arrow-down el-icon--right"></i>
...@@ -160,25 +188,7 @@ ...@@ -160,25 +188,7 @@
160 </el-dropdown-item> 188 </el-dropdown-item>
161 </el-dropdown-menu> 189 </el-dropdown-menu>
162 </el-dropdown> 190 </el-dropdown>
163 </td> 191 </td> -->
164 </tr>
165 <tr>
166 <td>
167 <el-button
168 type="primary"
169 class="changeBtn outAdd addMinus"
170 @click="addRow"
171 >+
172 </el-button
173 >
174 </td>
175 <td></td>
176 <td></td>
177 <td></td>
178 <td></td>
179 <td></td>
180 <td></td>
181 <td></td>
182 </tr> 192 </tr>
183 </table> 193 </table>
184 </div> 194 </div>
...@@ -988,116 +998,146 @@ ...@@ -988,116 +998,146 @@
988 998
989 .fgq { 999 .fgq {
990 margin-left: 20px; 1000 margin-left: 20px;
991 margin-top: 20px; 1001 margin-top: 14px;
992 display: flex; 1002 display: flex;
993 flex-direction: column; 1003 flex-direction: column;
994 flex-flow: nowrap; 1004 flex-flow: nowrap;
995 .data { 1005 .data{
1006 width: 36%;
1007 }
1008 .el-card {
1009 border: 1px solid #E6E6E6;
996 background-color: white; 1010 background-color: white;
997 height: 180px;
998 overflow: auto; 1011 overflow: auto;
1012 .clearfix{
1013 span{
1014 color: #9B9B9B;
1015 }
1016 }
1017 /deep/ .el-card__body{
1018 padding:10px 12px;
1019 }
999 ul { 1020 ul {
1000 li { 1021 li {
1001 padding: 5px; 1022 padding: 5px;
1002 line-height: 20px; 1023 line-height: 20px;
1003 color: #BBB; 1024 color: #BBB;
1004 span { 1025 .label{
1005 color: #000; 1026 color: #4A4A4A;
1027 display: inline-block;
1028 width: 104px;
1029 text-align: right;
1030 }
1031 .value{
1032 color: #6D7278;
1033 padding-left: 10px;
1006 } 1034 }
1007 } 1035 }
1008 } 1036 }
1009 } 1037 }
1010 .zxx { 1038 .zxx {
1039 width: calc(64% - 40px);
1040 margin-left: 20px;
1011 display: flex; 1041 display: flex;
1012 flex-direction: column; 1042 flex-direction: column;
1013 flex-flow: nowrap; 1043 flex-flow: nowrap;
1014 background-color: white;
1015 .title { 1044 .title {
1016 color: red; 1045 color: red;
1017 text-align: center; 1046 text-align: center;
1018 padding: 5px 0; 1047 padding: 5px 0;
1019 } 1048 }
1049 /deep/ .el-card__body{
1050 height: 200px;
1051 overflow-y: scroll;
1052 position: relative;
1053 }
1054 .line{
1055 width: 1px;
1056 height: calc(100% - 20px);
1057 background-color: #EDEDED;
1058 position: absolute;
1059 top: 10px;
1060 left: 50%;
1061 }
1020 .dz { 1062 .dz {
1021 width: 33%; 1063 width: 33%;
1022 border-right: 1px solid #000;
1023 height: 180px;
1024 overflow: auto; 1064 overflow: auto;
1025 ul { 1065 ul{
1026 overflow: auto; 1066 li{
1027 li { 1067 width: 96% !important;
1028 padding: 5px;
1029 text-align: center;
1030 line-height: 20px;
1031 } 1068 }
1032 } 1069 }
1070
1033 } 1071 }
1034 .zrz { 1072 .zrz {
1035 width: 66%; 1073 width: 66%;
1036 height: 180px; 1074 margin-left: 20px;
1037 overflow: auto; 1075 overflow: auto;
1076 }
1038 ul { 1077 ul {
1078 overflow: auto;
1039 li { 1079 li {
1040 padding: 5px;
1041 width: 48%; 1080 width: 48%;
1042 text-align: center; 1081 padding: 5px;
1082 text-align: left;
1083 line-height: 20px;
1043 display: inline-block; 1084 display: inline-block;
1085 .label{
1086 width: 90px;
1044 } 1087 }
1045 } 1088 }
1089 li:nth-of-type(even){
1090 .label{
1091 width: 110px;
1092 text-indent: 20px;
1046 } 1093 }
1047 } 1094 }
1048 } 1095 }
1049
1050 .oddborder {
1051 border-right: 1px solid #000;
1052 } 1096 }
1053
1054 .fgq .data {
1055 width: 30%;
1056 border: 1px solid #000;
1057 } 1097 }
1058 1098
1059 .fgq .zxx { 1099 .oddborder {
1060 width: 67%; 1100 border-right: 1px solid #000;
1061 margin-left: 20px;
1062 border: 1px solid #000;
1063 } 1101 }
1064 1102
1065 .fg-tabs { 1103 .fg-tabs {
1066 height: auto; 1104 height: auto;
1067 width: 100%; 1105 width: 100%;
1068 position: relative; 1106 position: relative;
1107 top: 36px;
1069 .table { 1108 .table {
1070 margin-top: 12px; 1109 margin-top: 12px;
1071 box-sizing: border-box; 1110 box-sizing: border-box;
1072 padding: 18px; 1111 padding: 18px;
1073 } 1112 }
1074 .addBtn { 1113 .addBtn {
1075 /* position: absolute; 1114 position: absolute;
1076 right: 30px; 1115 right: 24px;
1077 top: -46px; 1116 top: -14px;
1078 z-index: 999;*/
1079 } 1117 }
1080 table { 1118 table {
1081 margin-top: 10px; 1119 margin-top: 10px;
1082 background-color: #fff; 1120 background-color: #fff;
1083 font-size: 14px; 1121 font-size: 14px;
1084 width: 100%; 1122 width: calc(100% - 40px);
1085 tr:nth-of-type(odd) { 1123 /deep/.el-input__inner {
1086 background: #FAFAFA;
1087 th {
1088 height: 36px;
1089 }
1090 }
1091 .formInput {
1092 margin: 0; 1124 margin: 0;
1093 height: 36px; 1125 height: 44px;
1094 outline: none; 1126 outline: none;
1095 border: none; 1127 border: none;
1096 color: #606764; 1128 color: #606764;
1097 overflow: visible; 1129 overflow: visible;
1098 text-align: center; 1130 text-align: center;
1099 cursor: text;
1100 } 1131 }
1132 tr:nth-of-type(odd) {
1133 background: #FAFAFA;
1134 }
1135 tr{
1136 th,td{
1137 height: 44px;
1138 }
1139 }
1140
1101 tr:hover { 1141 tr:hover {
1102 background-color: #F5F7FA; 1142 background-color: #F5F7FA;
1103 } 1143 }
...@@ -1124,10 +1164,14 @@ ...@@ -1124,10 +1164,14 @@
1124 /*padding: 0 18px;*/ 1164 /*padding: 0 18px;*/
1125 height: 480px; 1165 height: 480px;
1126 overflow: auto; 1166 overflow: auto;
1127 margin-top: 10px; 1167 margin-top: 26px;
1128 table { 1168 table {
1129 margin: 0 20px; 1169 margin: 0 20px;
1130 } 1170 }
1171 .tips {
1172 display: inline-block;
1173 margin-bottom: 14px;
1174 }
1131 } 1175 }
1132 .header-button { 1176 .header-button {
1133 height: 50px; 1177 height: 50px;
...@@ -1161,10 +1205,25 @@ ...@@ -1161,10 +1205,25 @@
1161 } 1205 }
1162 1206
1163 .xzzxx { 1207 .xzzxx {
1164 ul { 1208 .zxx{
1165 li { 1209 padding-right: 16px;
1166 display: inline-block; 1210 position: relative;
1211 i{
1212 color: #9F9F9F;
1213 position: absolute;
1214 right: 12px;
1215 top: -8px;
1216 display: none;
1217 }
1167 } 1218 }
1219 .zxx:hover{
1220 >i{
1221 display: inline;
1222 }
1223 }
1224 .choose{
1225 color: #30A4FD;
1226 cursor: pointer;
1168 } 1227 }
1169 } 1228 }
1170 1229
......