From a06a7eef64432b0ae9ebc9b52b6e4523ee8b59b8 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Mon, 15 Nov 2021 16:31:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/modules/visual/basicInfoMain.scss | 30 +-- .../scss/modules/visual/searchPerson.scss | 3 + .../visual/basicinfo/basicInfoCommunity.vue | 196 +++++------------- .../visual/basicinfo/basicInfoMain.vue | 45 ++-- .../modules/visual/basicinfo/peopleSearch.vue | 73 ++----- src/views/modules/workSys/mapConfig.vue | 96 +++++---- 6 files changed, 179 insertions(+), 264 deletions(-) diff --git a/src/assets/scss/modules/visual/basicInfoMain.scss b/src/assets/scss/modules/visual/basicInfoMain.scss index 06f29a0f..9858ee38 100644 --- a/src/assets/scss/modules/visual/basicInfoMain.scss +++ b/src/assets/scss/modules/visual/basicInfoMain.scss @@ -31,6 +31,7 @@ .div_content { display: flex; + .div_map { width: 100%; height: calc(88vh - 8px); @@ -163,21 +164,11 @@ } } -.warning-box { - box-sizing: border-box; - width: 1881px; - height: 914px; - margin: auto; - color: #fff; - background: url('../../../img/modules/visual/warning-box.png') no-repeat - center; - background-size: 100% 100%; - padding: 45px 21px 35px 24px; -} - .div_community_info { box-sizing: border-box; - width: 100%; + flex: 0 0 calc(100vw - 620px); + // width: calc(100vw - 560px); + height: calc(88vh); color: #fff; background: url('../../../img/modules/visual/warning-box.png') no-repeat @@ -188,6 +179,19 @@ margin-top: 28px; margin-left: 24px; display: flex; + .customer_select { + display: flex; + justify-content: flex-start; + + > span { + width: auto; + font-size: 22px; + font-family: PingFang SC; + font-weight: 800; + color: #ffffff; + line-height: 34px; + } + } > img { height: 34px; width: 46px; diff --git a/src/assets/scss/modules/visual/searchPerson.scss b/src/assets/scss/modules/visual/searchPerson.scss index 0be4f621..08be1a3c 100644 --- a/src/assets/scss/modules/visual/searchPerson.scss +++ b/src/assets/scss/modules/visual/searchPerson.scss @@ -32,6 +32,9 @@ color: #ffffff; line-height: 53px; } + .btn:hover { + cursor: pointer; + } } .list_box { diff --git a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue index 3b4be1f2..1db5f3d1 100644 --- a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue +++ b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue @@ -7,14 +7,15 @@
+ + :value="item.buildingId" + @click="handleClickBuilding(index)">
@@ -48,7 +49,7 @@ alt />
+ v-show="item.showAllUser&&userArray.length>0">
{ let obj = JSON.parse(JSON.stringify(element)) - if (index === selIndex) { obj.showAllUser = !obj.showAllUser this.$set(this.roomArray, selIndex, obj) @@ -483,7 +425,7 @@ export default { // element.showAllUser = false } }); - + // this.endLoading() }, @@ -496,80 +438,33 @@ export default { }, - //下钻到下一级 - toSubAgency (e) { - //点击小区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 - } - }); - - console.log(this.runNum) - console.log(this.runAgencyArray) - if (this.orgLevel === 'neighborHood') { - - } else { - this.refreshMap(true) - } - - }, - - - //返回所选组织 - handleClickAgency (index) { - - 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() - } - - this.orgId = this.orgData.id - this.orgLevel = this.orgData.level - - console.log(this.runAgencyArray) - console.log(this.orgData) - - if (this.orgLevel === 'neighborHood') {//显示小区 - - } else { - this.refreshMap(true) - } - - }, - //加载楼栋数据 async loadBuilding () { - // const url = "/gov/org/agency/baseinfofamilybuilding" - const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding" + const url = "/gov/org/agency/baseinfofamilybuilding" + // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding" let params = { - neighborHoodId: this.orgId + neighborHoodId: this.neighborHoodId } const { data, code, msg } = await requestPost(url, params) if (code === 0) { - // this.buildingArray = data + this.buildingArray = data this.buildingArray.forEach(item => { - item.buildingName = this.neighborHoodName + "-" + item.buildingName + if (!this.buildingArray[0].buildingName) { + item.buildingName = '楼' + } + }); if (this.buildingArray.length > 0) { this.selBuildingId = this.buildingArray[0].buildingId this.selBuildingName = this.buildingArray[0].buildingName + } else { this.selBuildingId = '' this.selBuildingName = '' } - } else { this.$message.error(msg) } @@ -578,8 +473,8 @@ export default { //加载房间数据 async loadRoom () { - // const url = "/gov/org/ichouse/houselist" - const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist" + const url = "/gov/org/ichouse/houselist" + // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist" let params = { buildingId: this.selBuildingId } @@ -587,15 +482,13 @@ export default { const { data, code, msg } = await requestPost(url, params) if (code === 0) { - // this.roomArray = data + this.roomArray = data if (this.roomArray.length > 0) { - this.selHouseId = this.roomArray[0].houseId - this.selHouseName = this.roomArray[0].houseName this.roomArray.forEach(roomItem => { let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList)) - // debugger + if (iconArrayShow.length > 0) { if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员 roomItem.isParty = true @@ -625,8 +518,8 @@ export default { //加载成员数据 async loadUser (houseId, index) { - // const url = "/epmetuser/icresiuser/getpeoplebyroom" - const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom" + const url = "/epmetuser/icresiuser/getpeoplebyroom" + // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom" let params = { homeId: houseId } @@ -634,8 +527,10 @@ export default { const { data, code, msg } = await requestPost(url, params) if (code === 0) { - // this.userArray = data - + this.userArray = data + if (this.userArray.length === 0) { + this.$message.warning('该房间下没有住户') + } } else { this.$message.error(msg) @@ -666,6 +561,11 @@ export default { }, computed: { + // selectWidth () { + // let width = this.selHouseName.length * 200 + // console.log(width) + // return width + 'px'; + // }, mapHeight () { @@ -735,8 +635,16 @@ export default { } /* 修改的是el-input上下的小图标的颜色 */ - /deep/ .el-select .el-input .el-select__caret { + /deep/ .el-select .el-input .el-select__caret::before { color: #fff; + content: ""; + background: url("../../../../assets/img/xiala.png") center center no-repeat; + position: absolute; + width: 100%; + height: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } /* 修改总体选项的样式 最外层 */ diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue index 0ce562d0..19c5ab18 100644 --- a/src/views/modules/visual/basicinfo/basicInfoMain.vue +++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue @@ -14,22 +14,21 @@
- - -
- + - - -
@@ -294,8 +293,8 @@ const vueGis = { //获取右侧infolist数据 async loadList () { - // const url = "/epmetuser/statsresiwarn/list" - const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/statsresiwarn/list" + const url = "/epmetuser/statsresiwarn/list" + // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/statsresiwarn/list" let params = { id: this.orgId, level: this.orgLevel @@ -304,8 +303,8 @@ const vueGis = { const { data, code, msg } = await requestPost(url, params) if (code === 0) { - // this.listData = data - this.listData = this.listData1 + this.listData = data + // this.listData = this.listData1 this.listDatashow = [] let itemArray = [] this.listData.forEach((item, index) => { @@ -329,6 +328,12 @@ const vueGis = { } }, + //子组件点击房间，刷新右侧list + refreshInfoList (selId, type) { + this.orgId = houselIdseId + this.level = '' + }, + //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区） search 点击搜索 people 点击详情 async toSubAgency (type, e, searchName) { //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图 @@ -355,7 +360,6 @@ const vueGis = { name: '搜索' } this.$nextTick(() => { - // ref_tree 元素的ref value 绑定的node-key this.$refs.ref_search.loadList(); }); @@ -369,10 +373,13 @@ const vueGis = { }); if (this.orgLevel === 'neighborHood') { + this.loadList() this.$nextTick(() => { + // 小区id，小区名称 - this.$refs.ref_community.initData('', '南山111小区'); + this.$refs.ref_community.initData(this.orgData.id, this.orgData.name); }); + } else { this.refreshMap(true) } @@ -420,15 +427,19 @@ const vueGis = { } else if (this.orgLevel === 'search') { this.$nextTick(() => { - debugger - // ref_tree 元素的ref value 绑定的node-key + this.$refs.ref_search.loadByName(this.searchName); }); } else if (this.orgLevel === 'neighborHood') {//显示小区 } else { - this.refreshMap(true) + + this.$nextTick(() => { + this.refreshMap(true) + this.$forceUpdate() + }); + } }, diff --git a/src/views/modules/visual/basicinfo/peopleSearch.vue b/src/views/modules/visual/basicinfo/peopleSearch.vue index 4b91fae5..e19d780f 100644 --- a/src/views/modules/visual/basicinfo/peopleSearch.vue +++ b/src/views/modules/visual/basicinfo/peopleSearch.vue @@ -78,40 +78,7 @@ export default { data () { return { headerList: [], - tableData: [ - { - sort: 1, - name: '杨明', - gridName: '市北区第二网格市北区第二网格市北区第二网格市北区第二网格', - neighborHoodName: '南宁路小区', - buildNum: '2号楼', - userId: '1', - }, - { - sort: 2, - name: '杨明', - gridName: '市北区第二网格', - neighborHoodName: '南宁路小区', - buildNum: '2号楼', - userId: '1', - }, - { - sort: 3, - name: '杨明', - gridName: '市北区第二网格', - neighborHoodName: '南宁路小区', - buildNum: '2号楼', - userId: '2', - }, - { - sort: 4, - name: '杨明', - gridName: '市北区第二网格', - neighborHoodName: '南宁路小区', - buildNum: '2号楼', - userId: '3', - }, - ], + tableData: [], searchName: '', pageSize: 4, pageNo: 1, @@ -125,26 +92,32 @@ export default { loadByName (searchName) { this.searchName = searchName - this.loadList() - }, - - async loadList () { - - // const url = "/epmetuser/icresiuser/searchbyname" - const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/searchbyname" - let params = { - name: this.searchName, - pageSize: this.pageSize, - pageNo: this.pageNo + if (this.searchName) { + this.loadList() } - const { data, code, msg } = await requestPost(url, params) + }, - if (code === 0) { - this.total = data.total - this.tableData = data.list + async loadList () { + if (this.searchName) { + const url = "/epmetuser/icresiuser/searchbyname" + // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/searchbyname" + let params = { + name: this.searchName, + pageSize: this.pageSize, + pageNo: this.pageNo + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + this.total = data.total + this.tableData = data.list + } else { + this.$message.error(msg) + } } else { - this.$message.error(msg) + } }, diff --git a/src/views/modules/workSys/mapConfig.vue b/src/views/modules/workSys/mapConfig.vue index be4f5643..c8114b35 100644 --- a/src/views/modules/workSys/mapConfig.vue +++ b/src/views/modules/workSys/mapConfig.vue @@ -2,8 +2,9 @@
+ + placeholder="无下级组织"> - - {{method==='mAddPolygon'?'取消绘制':'绘制区域'}} - {{method==='mEditPolygon'?'取消绘制':'重新绘制'}} - - +
返回上一级
+
+ 按住alt键单击标注，可以进入下一级地图 +
@@ -153,6 +157,7 @@ const vueGis = { async mounted () { //加载组织数据 await this.loadOrgData() + // this.runAgency.push(this.orgData) //初始化地图 this.initMap() @@ -167,7 +172,6 @@ const vueGis = { methods: { //切换下级组织 orgChange (index) { - this.selAgencyIndex = index selectedFeatures.clear() @@ -204,20 +208,6 @@ const vueGis = { } }, - //高亮某个标注 - highlightPolygon () { - - let features = polygonSource.getFeatures() - features.forEach(element => { - - if (element.id_ === this.selAgencyId) { - - selectedFeatures.push(element) - } - }); - - }, - //返回上一级组织 handleBack () { @@ -248,11 +238,18 @@ const vueGis = { if (code === 0) { this.orgData = data - this.runAgency.push(data) - - if (data.children && data.children.length > 0) { - this.subAgencyArray = data.children - this.selAgencyId = this.subAgencyArray[0].id + this.subAgencyArray = [] + if (this.runNum === 0) {//第一次进入，绘制本级 + this.subAgencyArray.push(data) + this.selAgencyId = data.id + } else { + if (data.children && data.children.length > 0) { + this.subAgencyArray = data.children + this.selAgencyId = this.subAgencyArray[0].id + } else { + this.subAgencyArray = [] + this.selAgencyId = '' + } } } else { @@ -322,7 +319,6 @@ const vueGis = { //选择feature selectFeature (e) { - // console.log(e) if (this.method === undefined || this.method === '') { this.selAgencyId = e.selected[0].id_ @@ -360,6 +356,18 @@ const vueGis = { } }, + + //高亮某个标注 + highlightPolygon () { + let features = polygonSource.getFeatures() + features.forEach(element => { + + if (element.id_ === this.selAgencyId) { + selectedFeatures.push(element) + } + }); + + }, //设置地图定位的中心点和缩放级别 setMapLocation () { this.centerPoint = [] @@ -416,7 +424,7 @@ const vueGis = { }) map.on('singleclick', function (e) { - console.log(e.coordinate) + // console.log(e.coordinate) // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); }) @@ -533,7 +541,6 @@ const vueGis = { }, - //点击【删除标注】 handleDelPolygon () { map.removeInteraction(draw); @@ -616,6 +623,7 @@ const vueGis = { }); }, + //新增标注 async addPolygon (coorString) { const url = "/gov/org/agency/mapaddarea" @@ -642,7 +650,6 @@ const vueGis = { }); } - }, //删除标注 @@ -739,19 +746,28 @@ export default vueGis;