宗地分割页面交互优化
Showing
2 changed files
with
303 additions
and
181 deletions
| ... | @@ -32,3 +32,37 @@ export default { | ... | @@ -32,3 +32,37 @@ export default { |
| 32 | }, | 32 | }, |
| 33 | }; | 33 | }; |
| 34 | </script> | 34 | </script> |
| 35 | |||
| 36 | <style lang="less"> | ||
| 37 | .popper-zxx{ | ||
| 38 | padding: 0!important; | ||
| 39 | /deep/ .el-tabs__header{ | ||
| 40 | margin-bottom: 10px; | ||
| 41 | } | ||
| 42 | ul{ | ||
| 43 | margin-bottom: 10px; | ||
| 44 | li{ | ||
| 45 | cursor: pointer; | ||
| 46 | padding: 4px 16px; | ||
| 47 | position: relative; | ||
| 48 | i{ | ||
| 49 | position: absolute; | ||
| 50 | right: 20px; | ||
| 51 | top: 6px; | ||
| 52 | color: #4EB2FF; | ||
| 53 | display: none; | ||
| 54 | } | ||
| 55 | } | ||
| 56 | li:hover{ | ||
| 57 | background: #eee; | ||
| 58 | } | ||
| 59 | .choosed{ | ||
| 60 | color: #4EB2FF; | ||
| 61 | background-color: #F0F9FF!important; | ||
| 62 | i{ | ||
| 63 | display: inline-block; | ||
| 64 | } | ||
| 65 | } | ||
| 66 | } | ||
| 67 | } | ||
| 68 | </style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -8,9 +8,9 @@ | ... | @@ -8,9 +8,9 @@ |
| 8 | <div class="fgq"> | 8 | <div class="fgq"> |
| 9 | <el-card class="data"> | 9 | <el-card class="data"> |
| 10 | <div slot="header" class="clearfix"> | 10 | <div slot="header" class="clearfix"> |
| 11 | <span>基本信息</span> | 11 | <span>宗地基本信息</span> |
| 12 | </div> | 12 | </div> |
| 13 | <ul> | 13 | <ul class="zdjbxx"> |
| 14 | <li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li> | 14 | <li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li> |
| 15 | <li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li> | 15 | <li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li> |
| 16 | <li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li> | 16 | <li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li> |
| ... | @@ -18,178 +18,203 @@ | ... | @@ -18,178 +18,203 @@ |
| 18 | <li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li> | 18 | <li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li> |
| 19 | <li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li> | 19 | <li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li> |
| 20 | </ul> | 20 | </ul> |
| 21 | <div class="zdmap"> | ||
| 22 | |||
| 23 | </div> | ||
| 21 | </el-card> | 24 | </el-card> |
| 22 | <div class="zxx"> | 25 | <div class="zxx"> |
| 23 | <el-card class="dz"> | ||
| 24 | <div slot="header" class="clearfix"> | ||
| 25 | <span>多幢信息({{zdZxx.dzList.length}}个)</span> | ||
| 26 | </div> | ||
| 27 | <ul> | ||
| 28 | <li v-for="(item,index) in zdZxx.dzList" :key="index" | ||
| 29 | :class="[{'search':!zdDzList.includes(item)}]" | ||
| 30 | ><span class="label">多幢名称:</span> <span class="value">{{item.displays}}</span> | ||
| 31 | </li> | ||
| 32 | </ul> | ||
| 33 | </el-card> | ||
| 34 | |||
| 35 | <el-card class="zrz"> | 26 | <el-card class="zrz"> |
| 36 | <div slot="header" class="clearfix"> | 27 | <div slot="header" class="clearfix"> |
| 28 | <span>多幢信息({{zdZxx.dzList.length}}个)</span>, | ||
| 37 | <span>自然幢信息({{zdZxx.zrzList.length}}个)</span> | 29 | <span>自然幢信息({{zdZxx.zrzList.length}}个)</span> |
| 38 | </div> | 30 | </div> |
| 39 | <ul> | 31 | <ul> |
| 40 | <li v-for="(item,index) in zdZxx.zrzList" :key="index" | 32 | <li v-for="(item,index) in zdZxx.dzList" :key="index+item.xmmc" |
| 33 | :class="[{'search':!zdDzList.includes(item)}]" | ||
| 34 | >{{item.displays}} | ||
| 35 | </li> | ||
| 36 | <li v-for="(item,index) in zdZxx.zrzList" :key="index+item.xmmc" | ||
| 41 | :class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]"> | 37 | :class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]"> |
| 42 | {{item.displays}} | 38 | {{item.displays}} |
| 43 | </li> | 39 | </li> |
| 44 | </ul> | 40 | </ul> |
| 45 | <div class="line"></div> | ||
| 46 | </el-card> | 41 | </el-card> |
| 47 | </div> | 42 | </div> |
| 48 | </div> | 43 | </div> |
| 49 | <div class="fgh"> | 44 | <div class="fgh" :style="{'minHeight':tableHeight+'px'}"> |
| 50 | <span class="tips">分割后宗地信息</span> | 45 | <span class="tips">分割后宗地信息</span> |
| 51 | <table border="1"> | 46 | <table border="1"> |
| 52 | <tr> | 47 | <tr> |
| 53 | <th class="cz">操作</th> | 48 | <th class="cz"><el-button |
| 49 | type="primary" | ||
| 50 | class="changeBtn outAdd addMinus" | ||
| 51 | @click="addRow" | ||
| 52 | >+ | ||
| 53 | </el-button | ||
| 54 | ></th> | ||
| 54 | <th class="xzq">行政区</th> | 55 | <th class="xzq">行政区</th> |
| 55 | <th class="djq">地籍区</th> | 56 | <th class="djq">地籍区</th> |
| 56 | <th class="djzq">地籍子区</th> | 57 | <th class="djzq">地籍子区</th> |
| 57 | <th class="syqlx">所有权类型</th> | 58 | <th class="syqlx">所有权类型</th> |
| 58 | <th class="tdtzm">土地特征码</th> | 59 | <th class="tdtzm">土地特征码</th> |
| 59 | <th class="xmmc">项目名称</th> | 60 | <th class="xmmc">项目名称</th> |
| 60 | <th class="xzzxx">幢信息</th> | 61 | <!-- <th class="xzzxx">幢信息</th> --> |
| 61 | <!-- <th class="">选择</th> --> | 62 | <!-- <th class="">选择</th> --> |
| 62 | </tr> | 63 | </tr> |
| 63 | <tr> | 64 | <template v-for="(item,index) in zdFghData.newZdlist"> |
| 64 | <td> | 65 | <tr :key="item.xzqbsm"> |
| 65 | <el-button | 66 | <td class="cz" rowspan="2"> |
| 66 | type="primary" | 67 | <el-button |
| 67 | class="changeBtn outAdd addMinus" | 68 | type="primary" |
| 68 | @click="addRow" | 69 | class="changeBtn outMinus addMinus" |
| 69 | >+ | 70 | @click="delRow(index)" |
| 70 | </el-button | 71 | >- |
| 71 | > | 72 | </el-button |
| 72 | </td> | 73 | > |
| 73 | <td></td> | 74 | </td> |
| 74 | <td></td> | 75 | <td class="xzq"> |
| 75 | <td></td> | 76 | <el-select class="" v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)"> |
| 76 | <td></td> | 77 | <el-option |
| 77 | <td></td> | 78 | v-for="i in xzq" |
| 78 | <td></td> | 79 | :key="i.bsm" |
| 79 | <td></td> | 80 | :label="i.mc" |
| 80 | </tr> | 81 | :value="i.bsm" |
| 81 | <tr v-for="(item,index) in zdFghData.newZdlist" :key="index"> | 82 | ></el-option> |
| 82 | <td class="cz"> | 83 | </el-select> |
| 83 | <el-button | 84 | </td> |
| 84 | type="primary" | 85 | <td class="djq"> |
| 85 | class="changeBtn outMinus addMinus" | 86 | <el-select class="" v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)"> |
| 86 | @click="delRow(index)" | 87 | <el-option |
| 87 | >- | 88 | v-for="i in djq" |
| 88 | </el-button | 89 | :key="i.bsm" |
| 89 | > | 90 | :label="i.mc" |
| 90 | </td> | 91 | :value="i.bsm" |
| 91 | <td class="xzq"> | 92 | ></el-option> |
| 92 | <el-select class="" v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)"> | 93 | </el-select> |
| 93 | <el-option | 94 | </td> |
| 94 | v-for="i in xzq" | 95 | <td class="syqlx"> |
| 95 | :key="i.bsm" | 96 | <el-select class="" v-model="item.djzqbsm"> |
| 96 | :label="i.mc" | 97 | <el-option |
| 97 | :value="i.bsm" | 98 | v-for="i in djzq" |
| 98 | ></el-option> | 99 | :key="i.bsm" |
| 99 | </el-select> | 100 | :label="i.mc" |
| 100 | </td> | 101 | :value="i.bsm" |
| 101 | <td class="djq"> | 102 | ></el-option> |
| 102 | <el-select class="" v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)"> | 103 | </el-select> |
| 103 | <el-option | 104 | </td> |
| 104 | v-for="i in djq" | 105 | <td class="tdtzm"> |
| 105 | :key="i.bsm" | 106 | <el-select class="" v-model="item.syqlxbsm"> |
| 106 | :label="i.mc" | 107 | <el-option |
| 107 | :value="i.bsm" | 108 | v-for="i in syq" |
| 108 | ></el-option> | 109 | :key="i.value" |
| 109 | </el-select> | 110 | :label="i.label" |
| 110 | </td> | 111 | :value="i.value" |
| 111 | <td class="syqlx"> | 112 | ></el-option> |
| 112 | <el-select class="" v-model="item.djzqbsm"> | 113 | </el-select> |
| 113 | <el-option | 114 | </td> |
| 114 | v-for="i in djzq" | 115 | <td class="syqlx"> |
| 115 | :key="i.bsm" | 116 | <el-select class="" v-model="item.zdtzmbsm"> |
| 116 | :label="i.mc" | 117 | <el-option |
| 117 | :value="i.bsm" | 118 | v-for="i in tdtzm" |
| 118 | ></el-option> | 119 | :key="i.bsm" |
| 119 | </el-select> | 120 | :label="i.mc" |
| 120 | </td> | 121 | :value="i.bsm" |
| 121 | <td class="tdtzm"> | 122 | ></el-option> |
| 122 | <el-select class="" v-model="item.syqlxbsm"> | 123 | </el-select> |
| 123 | <el-option | 124 | </td> |
| 124 | v-for="i in syq" | 125 | <td class="xmmc"> |
| 125 | :key="i.value" | 126 | <input type="text" v-model="item.xmmc" class="formInput"/> |
| 126 | :label="i.label" | 127 | </td> |
| 127 | :value="i.value" | 128 | <!-- <td class="xzzxx"> |
| 128 | ></el-option> | 129 | <span>多幢:</span> |
| 129 | </el-select> | 130 | <ul> |
| 130 | </td> | 131 | <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex" |
| 131 | <td class="syqlx"> | 132 | @mouseenter="mouseenter($event,index,dzIndex,'dz')" |
| 132 | <el-select class="" v-model="item.zdtzmbsm"> | 133 | @mouseleave="mouseleave($event)">{{dzItem.xmmc}} |
| 133 | <el-option | 134 | <span v-if="dzIndex<item.dz.length-1">,</span> |
| 134 | v-for="i in tdtzm" | 135 | </li> |
| 135 | :key="i.bsm" | 136 | </ul> |
| 136 | :label="i.mc" | 137 | <span>自然幢:</span> |
| 137 | :value="i.bsm" | 138 | <ul> |
| 138 | ></el-option> | 139 | <li v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex" |
| 139 | </el-select> | 140 | @mouseenter="mouseenter($event,index,zrzIndex,'zrz')" |
| 140 | </td> | 141 | @mouseleave="mouseleave($event)" |
| 141 | <td class="xmmc"> | 142 | >{{zrzItem.xmmc}} |
| 142 | <input type="text" v-model="item.xmmc" class="formInput"/> | 143 | <span v-if="zrzIndex<item.zrz.length-1">,</span> |
| 143 | </td> | 144 | </li> |
| 144 | <td class="xzzxx"> | 145 | </ul> |
| 145 | <!-- <span>多幢:</span> | 146 | <span class="zxx">自然幢1 <i class="fa fa-times"></i></span> |
| 146 | <ul> | 147 | <span class="zxx">自然幢2 <i class="fa fa-times"></i></span> |
| 147 | <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex" | 148 | <span class="zxx">自然幢3 <i class="fa fa-times"></i></span> |
| 148 | @mouseenter="mouseenter($event,index,dzIndex,'dz')" | 149 | <span class="zxx">多幢1 <i class="fa fa-times"></i></span> |
| 149 | @mouseleave="mouseleave($event)">{{dzItem.xmmc}} | 150 | <span class="choose">选择</span> |
| 150 | <span v-if="dzIndex<item.dz.length-1">,</span> | 151 | </td> --> |
| 151 | </li> | 152 | <!-- <td class=""> |
| 152 | </ul> | 153 | <el-dropdown @command="dzHandleCommand($event,index)"> |
| 153 | <span>自然幢:</span> | 154 | <span class="el-dropdown-link"> |
| 154 | <ul> | 155 | 选择多幢<i class="el-icon-arrow-down el-icon--right"></i> |
| 155 | <li v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex" | 156 | </span> |
| 156 | @mouseenter="mouseenter($event,index,zrzIndex,'zrz')" | 157 | <el-dropdown-menu slot="dropdown"> |
| 157 | @mouseleave="mouseleave($event)" | 158 | <el-dropdown-item v-for="(childItem,childIndex) in zdDzList" |
| 158 | >{{zrzItem.xmmc}} | 159 | :key="childIndex" :command="childItem.bsm"> |
| 159 | <span v-if="zrzIndex<item.zrz.length-1">,</span> | 160 | {{childItem.xmmc}} |
| 160 | </li> | 161 | </el-dropdown-item> |
| 161 | </ul> --> | 162 | </el-dropdown-menu> |
| 162 | <span class="zxx">自然幢1 <i class="fa fa-times"></i></span> | 163 | </el-dropdown> |
| 163 | <span class="zxx">自然幢2 <i class="fa fa-times"></i></span> | 164 | <el-dropdown @command="zrzHandleCommand($event,index)"> |
| 164 | <span class="zxx">自然幢3 <i class="fa fa-times"></i></span> | 165 | <span class="el-dropdown-link"> |
| 165 | <span class="zxx">多幢1 <i class="fa fa-times"></i></span> | 166 | 选择自然幢<i class="el-icon-arrow-down el-icon--right"></i> |
| 166 | <span class="choose">选择</span> | 167 | </span> |
| 167 | </td> | 168 | <el-dropdown-menu slot="dropdown"> |
| 168 | <!-- <td class=""> | 169 | <el-dropdown-item v-for="(childItem,childIndex) in zdZrzList" |
| 169 | <el-dropdown @command="dzHandleCommand($event,index)"> | 170 | :key="childIndex" :command="childItem.bsm"> |
| 170 | <span class="el-dropdown-link"> | 171 | {{childItem.xmmc}} |
| 171 | 选择多幢<i class="el-icon-arrow-down el-icon--right"></i> | 172 | </el-dropdown-item> |
| 172 | </span> | 173 | </el-dropdown-menu> |
| 173 | <el-dropdown-menu slot="dropdown"> | 174 | </el-dropdown> |
| 174 | <el-dropdown-item v-for="(childItem,childIndex) in zdDzList" | 175 | </td> --> |
| 175 | :key="childIndex" :command="childItem.bsm"> | 176 | </tr> |
| 176 | {{childItem.xmmc}} | 177 | <tr :key="index"> |
| 177 | </el-dropdown-item> | 178 | <td colspan="6"> |
| 178 | </el-dropdown-menu> | 179 | <div class="fghzxx"> |
| 179 | </el-dropdown> | 180 | <div class="choosedZxx"> |
| 180 | <el-dropdown @command="zrzHandleCommand($event,index)"> | 181 | <span v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex+dzItem.xmmc" class="zxx"> |
| 181 | <span class="el-dropdown-link"> | 182 | {{dzItem.xmmc}} <i class="fa fa-times"></i> |
| 182 | 选择自然幢<i class="el-icon-arrow-down el-icon--right"></i> | 183 | </span> |
| 183 | </span> | 184 | <span v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex+zrzItem.xmmc" class="zxx"> |
| 184 | <el-dropdown-menu slot="dropdown"> | 185 | {{zrzItem.xmmc}} <i class="fa fa-times"></i> |
| 185 | <el-dropdown-item v-for="(childItem,childIndex) in zdZrzList" | 186 | </span> |
| 186 | :key="childIndex" :command="childItem.bsm"> | 187 | </div> |
| 187 | {{childItem.xmmc}} | 188 | <p class="choose"> |
| 188 | </el-dropdown-item> | 189 | <el-popover |
| 189 | </el-dropdown-menu> | 190 | placement="top-end" |
| 190 | </el-dropdown> | 191 | width="300" |
| 191 | </td> --> | 192 | popper-class="popper-zxx" |
| 192 | </tr> | 193 | style="padding:0 12px" |
| 194 | trigger="click"> | ||
| 195 | <el-tabs v-model="activeName" type="card"> | ||
| 196 | <el-tab-pane label="多幢" name="dz"> | ||
| 197 | <ul> | ||
| 198 | <li :class="zdFghData.newZdlist[index].dz.indexOf(childItem) > -1 ? 'choosed':''" @click="dzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdDzList" :key="childItem.bsm"> | ||
| 199 | {{childItem.xmmc}}<i class="fa fa-check" style="color:'#4EB2FF'"></i> | ||
| 200 | </li> | ||
| 201 | </ul> | ||
| 202 | </el-tab-pane> | ||
| 203 | <el-tab-pane label="自然幢" name="zrz"> | ||
| 204 | <ul> | ||
| 205 | <li :class="zdFghData.newZdlist[index].zrz.indexOf(childItem) > -1 ? 'choosed':''" @click="zrzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdZrzList" :key="childItem.bsm"> | ||
| 206 | {{childItem.xmmc}} <i class="fa fa-check" style="color:'#4EB2FF'"></i> | ||
| 207 | </li> | ||
| 208 | </ul> | ||
| 209 | </el-tab-pane> | ||
| 210 | </el-tabs> | ||
| 211 | <span slot="reference">选择</span> | ||
| 212 | </el-popover> | ||
| 213 | </p> | ||
| 214 | </div> | ||
| 215 | </td> | ||
| 216 | </tr> | ||
| 217 | </template> | ||
| 193 | </table> | 218 | </table> |
| 194 | </div> | 219 | </div> |
| 195 | <zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true" | 220 | <zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true" |
| ... | @@ -556,6 +581,8 @@ | ... | @@ -556,6 +581,8 @@ |
| 556 | newZdlist: [] | 581 | newZdlist: [] |
| 557 | }, | 582 | }, |
| 558 | fgBoxWidth: 0, | 583 | fgBoxWidth: 0, |
| 584 | tableHeight:0, | ||
| 585 | activeName:'dz' | ||
| 559 | } | 586 | } |
| 560 | }, | 587 | }, |
| 561 | created() { | 588 | created() { |
| ... | @@ -565,6 +592,7 @@ | ... | @@ -565,6 +592,7 @@ |
| 565 | this.getzdtzm(); | 592 | this.getzdtzm(); |
| 566 | this.$nextTick(() => { | 593 | this.$nextTick(() => { |
| 567 | this.fgBoxWidth = this.$refs.fgBox.clientWidth; | 594 | this.fgBoxWidth = this.$refs.fgBox.clientWidth; |
| 595 | this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 590; | ||
| 568 | }) | 596 | }) |
| 569 | }, | 597 | }, |
| 570 | methods: { | 598 | methods: { |
| ... | @@ -654,27 +682,32 @@ | ... | @@ -654,27 +682,32 @@ |
| 654 | ztype: 'zrz' | 682 | ztype: 'zrz' |
| 655 | }) | 683 | }) |
| 656 | }, | 684 | }, |
| 657 | dzHandleCommand(command, index) { | 685 | dzHandleCommand(obj,bsm, index) { |
| 658 | let item = this.zdDzList.filter(i => i.bsm == command)[0]; | 686 | if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){ |
| 659 | this.zdFghData.newZdlist[index].fwlist.push({ | 687 | this.zdFghData.newZdlist[index].fwlist.push({ |
| 660 | zbsm: command, | 688 | zbsm: bsm, |
| 661 | ztype: 'dz' | 689 | ztype: 'dz' |
| 662 | }); | 690 | }); |
| 663 | this.zdFghData.newZdlist[index].dz.push(item) | 691 | this.zdFghData.newZdlist[index].dz.push(obj) |
| 664 | this.zdDzList = this.zdDzList.filter(i => i.bsm !== command); | 692 | }else{ |
| 693 | this.zdFghData.newZdlist[index].dz = this.zdFghData.newZdlist[index].dz.filter(i => i.bsm !== bsm) | ||
| 694 | } | ||
| 665 | }, | 695 | }, |
| 666 | zrzHandleCommand(command, index) { | 696 | zrzHandleCommand(obj,bsm, index) { |
| 667 | let item = this.zdZrzList.filter(i => i.bsm == command)[0]; | 697 | if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){ |
| 668 | this.zdFghData.newZdlist[index].fwlist.push({ | 698 | this.zdFghData.newZdlist[index].fwlist.push({ |
| 669 | zbsm: command, | 699 | zbsm: bsm, |
| 670 | ztype: 'zrz' | 700 | ztype: 'zrz' |
| 671 | }) | 701 | }) |
| 672 | this.zdFghData.newZdlist[index].zrz.push(item) | 702 | this.zdFghData.newZdlist[index].zrz.push(obj) |
| 673 | this.zdZrzList = this.zdZrzList.filter(i => i.bsm !== command); | 703 | }else{ |
| 704 | this.zdFghData.newZdlist[index].zrz = this.zdFghData.newZdlist[index].zrz.filter(i => i.bsm !== bsm) | ||
| 705 | } | ||
| 674 | }, | 706 | }, |
| 675 | ZdgetDzXx(zdbsm) { | 707 | ZdgetDzXx(zdbsm) { |
| 676 | ZdfggetZxx(zdbsm).then(res => { | 708 | ZdfggetZxx(zdbsm).then(res => { |
| 677 | if (res.success) { | 709 | if (res.success) { |
| 710 | console.log(res.result,'res.result'); | ||
| 678 | this.zdZxx = res.result; | 711 | this.zdZxx = res.result; |
| 679 | this.zdZrzList = res.result.zrzList | 712 | this.zdZrzList = res.result.zrzList |
| 680 | this.zdDzList = res.result.dzList | 713 | this.zdDzList = res.result.dzList |
| ... | @@ -951,6 +984,7 @@ | ... | @@ -951,6 +984,7 @@ |
| 951 | </script> | 984 | </script> |
| 952 | <style scoped lang="less"> | 985 | <style scoped lang="less"> |
| 953 | .fg { | 986 | .fg { |
| 987 | |||
| 954 | .menu { | 988 | .menu { |
| 955 | /deep/ .el-tabs__content { | 989 | /deep/ .el-tabs__content { |
| 956 | position: unset; | 990 | position: unset; |
| ... | @@ -990,6 +1024,14 @@ | ... | @@ -990,6 +1024,14 @@ |
| 990 | } | 1024 | } |
| 991 | } | 1025 | } |
| 992 | } | 1026 | } |
| 1027 | |||
| 1028 | /deep/ .el-card__header{ | ||
| 1029 | padding: 16px 20px; | ||
| 1030 | background-color: #F2F2F2; | ||
| 1031 | border: 1px solid #DBDBDB; | ||
| 1032 | -webkit-box-sizing: border-box; | ||
| 1033 | box-sizing: border-box; | ||
| 1034 | } | ||
| 993 | } | 1035 | } |
| 994 | 1036 | ||
| 995 | .v-model { | 1037 | .v-model { |
| ... | @@ -1003,7 +1045,7 @@ | ... | @@ -1003,7 +1045,7 @@ |
| 1003 | flex-direction: column; | 1045 | flex-direction: column; |
| 1004 | flex-flow: nowrap; | 1046 | flex-flow: nowrap; |
| 1005 | .data{ | 1047 | .data{ |
| 1006 | width: 36%; | 1048 | width: 40%; |
| 1007 | } | 1049 | } |
| 1008 | .el-card { | 1050 | .el-card { |
| 1009 | border: 1px solid #E6E6E6; | 1051 | border: 1px solid #E6E6E6; |
| ... | @@ -1027,16 +1069,30 @@ | ... | @@ -1027,16 +1069,30 @@ |
| 1027 | display: inline-block; | 1069 | display: inline-block; |
| 1028 | width: 104px; | 1070 | width: 104px; |
| 1029 | text-align: right; | 1071 | text-align: right; |
| 1072 | vertical-align: top; | ||
| 1030 | } | 1073 | } |
| 1031 | .value{ | 1074 | .value{ |
| 1032 | color: #6D7278; | 1075 | color: #6D7278; |
| 1076 | display: inline-block; | ||
| 1033 | padding-left: 10px; | 1077 | padding-left: 10px; |
| 1078 | width: calc(100% - 116px); | ||
| 1079 | word-break: break-all; | ||
| 1034 | } | 1080 | } |
| 1035 | } | 1081 | } |
| 1036 | } | 1082 | } |
| 1083 | .zdjbxx{ | ||
| 1084 | width: 380px; | ||
| 1085 | height: 200px; | ||
| 1086 | float: left; | ||
| 1087 | } | ||
| 1088 | .zdmap{ | ||
| 1089 | width: calc(100% - 380px); | ||
| 1090 | height: 200px; | ||
| 1091 | float: left; | ||
| 1092 | } | ||
| 1037 | } | 1093 | } |
| 1038 | .zxx { | 1094 | .zxx { |
| 1039 | width: calc(64% - 40px); | 1095 | width: calc(60% - 40px); |
| 1040 | margin-left: 20px; | 1096 | margin-left: 20px; |
| 1041 | display: flex; | 1097 | display: flex; |
| 1042 | flex-direction: column; | 1098 | flex-direction: column; |
| ... | @@ -1070,14 +1126,16 @@ | ... | @@ -1070,14 +1126,16 @@ |
| 1070 | 1126 | ||
| 1071 | } | 1127 | } |
| 1072 | .zrz { | 1128 | .zrz { |
| 1073 | width: 66%; | 1129 | width: 100%; |
| 1074 | margin-left: 20px; | ||
| 1075 | overflow: auto; | 1130 | overflow: auto; |
| 1076 | } | 1131 | } |
| 1077 | ul { | 1132 | ul { |
| 1078 | overflow: auto; | 1133 | overflow: auto; |
| 1134 | width: 100%; | ||
| 1135 | float: left; | ||
| 1136 | margin-left: 10px; | ||
| 1079 | li { | 1137 | li { |
| 1080 | width: 48%; | 1138 | width: 23%; |
| 1081 | padding: 5px; | 1139 | padding: 5px; |
| 1082 | text-align: left; | 1140 | text-align: left; |
| 1083 | line-height: 20px; | 1141 | line-height: 20px; |
| ... | @@ -1096,9 +1154,6 @@ | ... | @@ -1096,9 +1154,6 @@ |
| 1096 | } | 1154 | } |
| 1097 | } | 1155 | } |
| 1098 | 1156 | ||
| 1099 | .oddborder { | ||
| 1100 | border-right: 1px solid #000; | ||
| 1101 | } | ||
| 1102 | 1157 | ||
| 1103 | .fg-tabs { | 1158 | .fg-tabs { |
| 1104 | height: auto; | 1159 | height: auto; |
| ... | @@ -1129,13 +1184,16 @@ | ... | @@ -1129,13 +1184,16 @@ |
| 1129 | overflow: visible; | 1184 | overflow: visible; |
| 1130 | text-align: center; | 1185 | text-align: center; |
| 1131 | } | 1186 | } |
| 1132 | tr:nth-of-type(odd) { | 1187 | // tr:nth-of-type(odd) { |
| 1133 | background: #FAFAFA; | 1188 | // background: #FAFAFA; |
| 1134 | } | 1189 | // } |
| 1135 | tr{ | 1190 | tr{ |
| 1136 | th,td{ | 1191 | th,td{ |
| 1137 | height: 44px; | 1192 | height: 44px; |
| 1138 | } | 1193 | } |
| 1194 | th{ | ||
| 1195 | background: #FAFAFA; | ||
| 1196 | } | ||
| 1139 | } | 1197 | } |
| 1140 | 1198 | ||
| 1141 | tr:hover { | 1199 | tr:hover { |
| ... | @@ -1162,12 +1220,43 @@ | ... | @@ -1162,12 +1220,43 @@ |
| 1162 | .fgh { | 1220 | .fgh { |
| 1163 | box-sizing: border-box; | 1221 | box-sizing: border-box; |
| 1164 | /*padding: 0 18px;*/ | 1222 | /*padding: 0 18px;*/ |
| 1165 | height: 480px; | ||
| 1166 | overflow: auto; | 1223 | overflow: auto; |
| 1167 | margin-top: 26px; | 1224 | margin-top: 26px; |
| 1168 | table { | 1225 | table { |
| 1169 | margin: 0 20px; | 1226 | margin: 0 20px; |
| 1170 | } | 1227 | } |
| 1228 | .fghzxx{ | ||
| 1229 | width: 100%; | ||
| 1230 | height: 100%; | ||
| 1231 | line-height: 44px; | ||
| 1232 | .choosedZxx{ | ||
| 1233 | width:calc(100% - 88px); | ||
| 1234 | float: left; | ||
| 1235 | text-align: left; | ||
| 1236 | text-indent: 20px; | ||
| 1237 | .zxx{ | ||
| 1238 | padding-right: 10px; | ||
| 1239 | position: relative; | ||
| 1240 | i{ | ||
| 1241 | display: none; | ||
| 1242 | position: absolute; | ||
| 1243 | right: 4px; | ||
| 1244 | top: -6px; | ||
| 1245 | } | ||
| 1246 | } | ||
| 1247 | .zxx:hover{ | ||
| 1248 | i{ | ||
| 1249 | display: inline-block; | ||
| 1250 | } | ||
| 1251 | } | ||
| 1252 | } | ||
| 1253 | .choose{ | ||
| 1254 | width: 88px; | ||
| 1255 | color: #30A4FD; | ||
| 1256 | cursor: pointer; | ||
| 1257 | float: right; | ||
| 1258 | } | ||
| 1259 | } | ||
| 1171 | .tips { | 1260 | .tips { |
| 1172 | display: inline-block; | 1261 | display: inline-block; |
| 1173 | margin-bottom: 14px; | 1262 | margin-bottom: 14px; |
| ... | @@ -1221,10 +1310,6 @@ | ... | @@ -1221,10 +1310,6 @@ |
| 1221 | display: inline; | 1310 | display: inline; |
| 1222 | } | 1311 | } |
| 1223 | } | 1312 | } |
| 1224 | .choose{ | ||
| 1225 | color: #30A4FD; | ||
| 1226 | cursor: pointer; | ||
| 1227 | } | ||
| 1228 | } | 1313 | } |
| 1229 | 1314 | ||
| 1230 | .cz, .xh { | 1315 | .cz, .xh { |
| ... | @@ -1238,4 +1323,7 @@ | ... | @@ -1238,4 +1323,7 @@ |
| 1238 | .search { | 1323 | .search { |
| 1239 | color: #BBB !important; | 1324 | color: #BBB !important; |
| 1240 | } | 1325 | } |
| 1326 | /deep/ .el-select{ | ||
| 1327 | width: 100%; | ||
| 1328 | } | ||
| 1241 | </style> | 1329 | </style> | ... | ... |
-
Please register or sign in to post a comment