From 651ab8d3a63c11c938501223fe8db00598147f6b Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 12 Nov 2021 16:57:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E4=BF=A1=E6=81=AF=E5=8F=AF?= =?UTF-8?q?=E8=A7=86=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/jinru.png | Bin 0 -> 193 bytes src/assets/img/{shuju => }/xiala.png | Bin .../scss/modules/visual/basicInfoMain.scss | 39 ++- .../scss/modules/visual/searchPerson.scss | 168 ++++++++++ .../visual/basicinfo/basicInfoCommunity.vue | 298 +++++++++++++++--- .../visual/basicinfo/basicInfoMain.vue | 109 +++++-- .../modules/visual/basicinfo/peopleSearch.vue | 184 +++++++++++ 7 files changed, 714 insertions(+), 84 deletions(-) create mode 100644 src/assets/img/jinru.png rename src/assets/img/{shuju => }/xiala.png (100%) create mode 100644 src/assets/scss/modules/visual/searchPerson.scss create mode 100644 src/views/modules/visual/basicinfo/peopleSearch.vue diff --git a/src/assets/img/jinru.png b/src/assets/img/jinru.png new file mode 100644 index 0000000000000000000000000000000000000000..683d639629b7a7a699f5bad00dab22b05fc1fa17 GIT binary patch literal 193 zcmeAS@N?(olHy`uVBq!ia0vp^96-#&!3HGb=lz)rq!^2X+?^QKos)S9btZTX4oK o-AOW2me2Ck+q$W`{ocy`8?GDk@+{@M3Umg8r>mdKI;Vst0OvPHvj6}9 literal 0 HcmV?d00001 diff --git a/src/assets/img/shuju/xiala.png b/src/assets/img/xiala.png similarity index 100% rename from src/assets/img/shuju/xiala.png rename to src/assets/img/xiala.png diff --git a/src/assets/scss/modules/visual/basicInfoMain.scss b/src/assets/scss/modules/visual/basicInfoMain.scss index 13dd4c3e..06f29a0f 100644 --- a/src/assets/scss/modules/visual/basicInfoMain.scss +++ b/src/assets/scss/modules/visual/basicInfoMain.scss @@ -203,12 +203,20 @@ } } - .div_room { + .div_room_bar { + box-sizing: border-box; + margin-top: 9px; + height: calc(88vh - 120px); + } + + .div_room { + // height: calc(88vh - 40px); + // margin-top: 9px; display: flex; flex-wrap: wrap; - justify-content: space-around; - margin: 0 21px 0 11px; + justify-content: flex-start; + margin: 0 21px 0 21px; .item:hover { cursor: pointer; @@ -288,19 +296,38 @@ margin-top: 2px; position: relative; z-index: 10; - width: 90px; + background: #020340; border: 1px solid #0a359b; border-radius: 4px; box-shadow: 0 0 10px inset #1a5afd; .user_item { - padding: 13px 14px 0 14px; + padding: 13px 8px 0 14px; font-size: 16px; font-family: PingFang SC; font-weight: 400; color: #ffffff; + .user_item_content { + display: flex; + // justify-content: space-between; + align-items: center; + + .name { + max-width: 80%; + text-align: left; + } + + > img { + margin-left: auto; + + margin-top: 4px; + width: 8px; + height: 12px; + } + } + .item_line { margin-top: 9px; width: 70px; @@ -319,6 +346,6 @@ .div_room::after { content: ''; - flex: auto; + flex: 1; } } diff --git a/src/assets/scss/modules/visual/searchPerson.scss b/src/assets/scss/modules/visual/searchPerson.scss new file mode 100644 index 00000000..0be4f621 --- /dev/null +++ b/src/assets/scss/modules/visual/searchPerson.scss @@ -0,0 +1,168 @@ +.div_search_list { + margin: 54px auto; + text-align: center; + width: 750px; + height: 53px; + background: #01106800; + border-radius: 8px; + display: flex; + justify-content: flex-end; + + .icon { + display: flex; + align-items: center; + margin-left: 29px; + margin-top: 16px; + + > img { + width: 24px; + height: 24px; + } + } + + .btn { + text-align: center; + flex: 0 0 113px; + height: 53px; + background: #0082fb; + border-radius: 0px 8px 8px 0px; + font-size: 22px; + font-family: PingFang SC; + font-weight: 400; + color: #ffffff; + line-height: 53px; + } +} + +.list_box { + margin: 96px auto 0; + box-sizing: border-box; + // width: 70%; + width: 1021px; + + // height: calc(88vh - 200px); + height: 349px; + color: #fff; + background: url('../../../img/modules/visual/warning-box.png') no-repeat + center; + background-size: 100% 100%; +} + +.info_tip { + padding: 20px 0 0 19px; + display: flex; + + > img { + height: 34px; + width: 46px; + } + + .tip_title { + line-height: 34px; + margin-left: 7px; + font-size: 22px; + font-family: PingFang SC; + font-weight: 800; + color: #ffffff; + } +} + +.warning-table { + margin: 21px 24px auto 24px; + box-sizing: border-box; + + height: 100%; + + .table { + width: 100%; + height: 100%; + + &-header { + width: 100%; + height: 50px; + display: flex; + justify-content: space-around; + align-items: center; + background: rgba(8, 37, 134, 0.85); + font-size: 16px; + font-weight: 400; + color: #ffffff; + } + + &-body { + box-sizing: border-box; + width: 100%; + height: calc(100% - 50px); + font-size: 18px; + font-weight: 400; + color: #ffffff; + + &-tr { + width: 100%; + height: 50px; + // height: calc(100% / 5); + // padding: 10px auto; + display: flex; + justify-content: space-around; + align-items: center; + + .btn_detail:hover { + cursor: pointer; + } + } + + &-tr:nth-child(2n) { + background: rgba(16, 75, 164, 0.24); + } + + &-tr:hover { + background: url('../../../img/modules/visual/hover-bac.png') no-repeat + center; + background-size: 100% 100%; + } + } + } +} + +.td { + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + // width: calc(100% / 5); +} +.td1 { + width: calc(100% / 10); +} +.td2 { + width: calc(100% / 5); +} +.td3 { + width: calc(100% / 4); +} +.pagination { + box-sizing: border-box; + margin-top: 20px; + width: 100%; + height: 40px; + display: flex; + justify-content: flex-end; + + /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { + background: #0266d1; + color: #000d3f; + } + + /deep/ .el-pagination .el-pager li { + background: #002e74; + } + + /deep/ .el-pagination .btn-prev { + background: #002e74; + } + + /deep/ .el-pagination .btn-next { + background: #002e74; + } +} diff --git a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue index ec04d3c9..3b4be1f2 100644 --- a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue +++ b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue @@ -1,6 +1,7 @@ @@ -103,6 +113,30 @@ export default { { buildingId: "6", buildingName: '6号楼' + }, + { + buildingId: "7", + buildingName: '1号楼' + }, + { + buildingId: "8", + buildingName: '2号楼' + }, + { + buildingId: "9", + buildingName: '3号楼' + }, + { + buildingId: "10", + buildingName: '4号楼' + }, + { + buildingId: "11", + buildingName: '5号楼' + }, + { + buildingId: "12", + buildingName: '6号楼' } ],//楼栋下拉框数据 selBuildingId: '', @@ -185,6 +219,176 @@ export default { } ] }, + { + houseId: "6", + houseName: "106室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, { + houseId: "1", + houseName: "101室", + categoryList: [ + { + name: '党员', + iconUrl: require('../../../../assets/img/shuju/dangyuan.png'), + isSpecial: '1', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "2", + houseName: "102室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "3", + houseName: "103室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "4", + houseName: "104室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "5", + houseName: "105室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "6", + houseName: "106室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, { + houseId: "1", + houseName: "101室", + categoryList: [ + { + name: '党员', + iconUrl: require('../../../../assets/img/shuju/dangyuan.png'), + isSpecial: '1', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "2", + houseName: "102室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + }, + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "3", + houseName: "103室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "4", + houseName: "104室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, + { + houseId: "5", + houseName: "105室", + categoryList: [ + { + name: '低保', + iconUrl: require('../../../../assets/img/modules/visual/dabing.png'), + isSpecial: '0', + } + ] + }, { houseId: "6", houseName: "106室", @@ -207,13 +411,18 @@ export default { userId: '1', }, { - name: '李四', + name: '李三四', userId: '2', }, { - name: '王婷婷', + name: '王婷', userId: '3', } + , + { + name: '王婷婷婷王婷婷婷', + userId: '4', + } ], selUserName: '', selUserId: '', @@ -236,6 +445,7 @@ export default { }, methods: { + //小区id，小区名称 async initData (neighborHoodId, neighborHoodName) { this.roomLoaded = false this.neighborHoodId = neighborHoodId @@ -258,8 +468,6 @@ export default { //点击全部成员 async handleShowAllUser (selIndex) { - - this.roomArray.forEach((element, index) => { let obj = JSON.parse(JSON.stringify(element)) @@ -539,6 +747,10 @@ export default { border-radius: 0px; } + /* 修改选项整体的样式 */ + /deep/ .el-select-dropdown__list { + padding: 6px 0 20px 0; + } /* 修改单个的选项的样式 */ /deep/ .el-select-dropdown__item { background-color: transparent; diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue index 0867c30e..0ce562d0 100644 --- a/src/views/modules/visual/basicinfo/basicInfoMain.vue +++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue @@ -14,24 +14,32 @@ -
+ + - +
- + +
-
--> +
+ placeholder="请输入姓名"> { - // ref_tree 元素的ref value 绑定的node-key - this.$refs.ref_community.initData('', '南山111小区'); - }); - //初始化地图 this.initMap() @@ -282,9 +286,12 @@ const vueGis = { }, methods: { + handleSearch () { + this.toSubAgency('search') }, + //获取右侧infolist数据 async loadList () { // const url = "/epmetuser/statsresiwarn/list" @@ -322,29 +329,53 @@ const vueGis = { } }, - //下钻到下一级 - async toSubAgency (e) { + //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区） search 点击搜索 people 点击详情 + async toSubAgency (type, e, searchName) { //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图 this.runNum++ this.runAgencyArray.push(this.orgData) - this.subAgencyArray.forEach(item => { - if (item.id === e.selected[0].id_) { - this.selPolygonId = item.id - this.selPolygon = item - this.orgId = item.id - this.orgLevel = item.level - this.orgData = item + if (type === 'people') { + this.orgLevel = 'people' + this.selUserId = e + this.orgId = '' + this.orgData = { + id: '', + level: 'people', + name: '人员档案' } - }); - - console.log(this.runNum) - console.log(this.runAgencyArray) - // debugger - if (this.orgLevel === 'neighborHood') { + this.searchName = searchName + + } else if (type === 'search') { + this.orgLevel = 'search' + this.orgId = '' + this.orgData = { + id: '', + level: 'search', + name: '搜索' + } + this.$nextTick(() => { + // ref_tree 元素的ref value 绑定的node-key + this.$refs.ref_search.loadList(); + }); } else { - this.refreshMap(true) + this.subAgencyArray.forEach(item => { + if (item.id === e.selected[0].id_) { + this.orgId = item.id + this.orgLevel = item.level + this.orgData = item + } + }); + + if (this.orgLevel === 'neighborHood') { + this.$nextTick(() => { + // 小区id，小区名称 + this.$refs.ref_community.initData('', '南山111小区'); + }); + } else { + this.refreshMap(true) + } } @@ -376,6 +407,7 @@ const vueGis = { const cutNum = this.runAgencyArray.length - index//要减去的长度 this.runNum = this.runNum - cutNum this.orgData = this.runAgencyArray[index] + for (let i = 0; i < cutNum; i++) { this.runAgencyArray.pop() } @@ -383,10 +415,17 @@ const vueGis = { this.orgId = this.orgData.id this.orgLevel = this.orgData.level - console.log(this.runAgencyArray) - console.log(this.orgData) + if (this.orgLevel === 'people') { + + + } else if (this.orgLevel === 'search') { + this.$nextTick(() => { + debugger + // ref_tree 元素的ref value 绑定的node-key + this.$refs.ref_search.loadByName(this.searchName); + }); - if (this.orgLevel === 'neighborHood') {//显示小区 + } else if (this.orgLevel === 'neighborHood') {//显示小区 } else { this.refreshMap(true) @@ -602,7 +641,7 @@ const vueGis = { map.addInteraction(select); select.on('select', e => { - this.toSubAgency(e) + this.toSubAgency('polygon', e) }); }, @@ -654,7 +693,7 @@ const vueGis = { ...mapGetters(["clientHeight"]) }, - components: { BasicInfoCommunity }, + components: { BasicInfoCommunity, PeopleSearch, People }, } export default vueGis; diff --git a/src/views/modules/visual/basicinfo/peopleSearch.vue b/src/views/modules/visual/basicinfo/peopleSearch.vue new file mode 100644 index 00000000..4b91fae5 --- /dev/null +++ b/src/views/modules/visual/basicinfo/peopleSearch.vue @@ -0,0 +1,184 @@ + + + + + + +