From 08fea835fd5fb638fb309a1cd3953f058dee7f05 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 17 Jun 2022 15:14:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=94=E5=A4=A7=E5=9B=BE=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/modules/visual/fiveLayerMap.scss | 197 ++---- .../communityGovern/fivelayers/mapIndex.vue | 610 +++++++++++++++--- src/views/modules/visual/cpts/tb.vue | 93 +-- 3 files changed, 654 insertions(+), 246 deletions(-) diff --git a/src/assets/scss/modules/visual/fiveLayerMap.scss b/src/assets/scss/modules/visual/fiveLayerMap.scss index d203c0a1f..2dd1e704a 100644 --- a/src/assets/scss/modules/visual/fiveLayerMap.scss +++ b/src/assets/scss/modules/visual/fiveLayerMap.scss @@ -52,59 +52,6 @@ flex: 0 0 600px; margin-left: 12px; - .div_search { - width: 100%; - height: 56px; - text-align: center; - background-color: #011168; - border-radius: 4px 0 0 4px; - border: none; - box-shadow: 0 0 10px inset #1a5afd; - font-size: 18px; - font-family: PingFang SC; - font-weight: 400; - color: #ffffff; - opacity: 0.7; - display: flex; - justify-content: space-between; - .div_search_left { - display: flex; - justify-content: flex-start; - .icon { - display: flex; - align-items: center; - margin-left: 29px; - - > img { - width: 24px; - height: 24px; - } - } - - > span { - line-height: 56px; - margin-left: 10px; - } - } - - .btn { - text-align: center; - flex: 0 0 113px; - height: 56px; - background: linear-gradient(90deg, #1a5afd, #26c4ff); - font-size: 20px; - font-family: PingFang SC; - font-weight: 400; - color: #ffffff; - line-height: 56px; - border-radius: 0 4px 4px 0; - } - } - - .div_search:hover { - cursor: pointer; - } - .div_tips{ box-sizing: border-box; width: 100%; @@ -167,16 +114,15 @@ } .item_content{ width:100px; - margin-left:8px; font-size: 16px; font-family: PingFang SC; font-weight: 400; - color: #D2E7FF; + color: #e5effa; } .item_content_sel{ - color: #99c7fb; + color: #5da8fd; } } @@ -207,90 +153,89 @@ .div_info { box-sizing: border-box; width: 100%; - + margin-top:10px; height: calc(88vh - 302px - 10px); color: #fff; background: url('../../../img/modules/visual/warning-box.png') no-repeat center; background-size: 100% 100%; - // padding: 45px 21px 35px 24px; + padding: 32px 21px 20px 20px; - .info_loading { - margin-top: 50px; - } - .info_tip { - padding: 31px 0 0 19px; + .div_search_list { + margin: 0 auto; + text-align: center; + width: 559px; + height: 48px; + background: #01106800; + border-radius: 8px; display: flex; - > img { - height: 34px; - width: 46px; + justify-content: flex-end; + + .icon { + display: flex; + align-items: center; + margin-left: 29px; + margin-top: 16px; + + > img { + width: 24px; + height: 24px; + } } - - .tip_title { - line-height: 34px; - margin-left: 7px; - font-size: 22px; + + .btn { + text-align: center; + flex: 0 0 113px; + height: 53px; + background: #0082fb; + border-radius: 0px 8px 8px 0px; + font-size: 20px; font-family: PingFang SC; - font-weight: 800; + font-weight: 400; color: #ffffff; + line-height: 53px; + } + .btn:hover { + cursor: pointer; } } - - .info_list { - margin-top: 9px; - - .item { - .item_line { - margin-top: 13px; - margin-left: 24px; - width: 517px; - height: 0px; - border: 1px dotted #1797ff31; - border-width: 0.5px; - } - .last_line { - border: 1px dotted #1797ff00; - } - .list_item { - display: flex; - padding: 18px 59px 0; - justify-content: space-between; - - > img { - height: 36px; - width: 36px; - } - - .item_content { - margin-left: 10px; - height: 76px; - display: flex; - flex-direction: column; - justify-content: center; - - .item_label { - font-size: 18px; - font-family: PingFang SC; - font-weight: 400; - color: #ffffff; - } - .item_count { - margin-top: 10px; - font-size: 28px; - font-family: PingFang SC; - font-weight: bold; - color: #00fffc; - } - } - - } - - ::v-deep .el-popper { - padding: 0px; - } - // + + + .tb { + height: calc(88vh - 302px - 10px); + overflow-y: auto; + @include scrollBar; + margin-top:20px; + } + + .m-pagination { + position: absolute; + box-sizing: border-box; + right: 5px; + bottom: 5px; + 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/communityGovern/fivelayers/mapIndex.vue b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue index 5bc203dbe..e41260db1 100644 --- a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue +++ b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue @@ -59,48 +59,61 @@ +
- +
+ + +
+
+ - + @@ -126,7 +139,7 @@ import { Loading } from 'element-ui'; //引入Loading服务 import { requestPost } from "@/js/dai/request"; - +import cptTb from "@/views/modules/visual/cpts/tb"; import cptCard from "@/views/modules/visual/cpts/card"; import ScreenLoading from "@/views/modules/visual/cpts/loading"; @@ -296,7 +309,39 @@ const vueGis = { categoryKeys: [], search: '', pageNo: 1, - pageSize: 10 + pageSize: 10, + + demand: { + loading: true, + colList: [ + { + align: "center", + width: "5%", + }, + { + align: "center", + width: "10%", + }, + + ], + header: ["分类", "名称"], + list: [], + pageSize: 10, + pageNo: 1, + total: 0, + }, + + iconUrlArray: { + 'volunteer1': require('../../../../../assets/img/shuju/volunteer1.png'), + 'volunteer2': require('../../../../../assets/img/shuju/volunteer2.png'), + 'volunteer3': require('../../../../../assets/img/shuju/volunteer3.png'), + 'volunteer4': require('../../../../../assets/img/shuju/volunteer4.png'), + 'volunteer5': require('../../../../../assets/img/shuju/volunteer5.png'), + }, + iconArrays: [], + overlay: null, + showPopup: false, + } }, @@ -319,13 +364,186 @@ const vueGis = { //加载当前园区的标注 this.loadPolygon(this.subAgencyArray) + + this.setMapLocation() await this.loadCategoryList() + this.getTable(); + await this.getMapTable(); + + + //初始化icon图层 + this.addOverlay() + + this.addMapClick() }, methods: { + + //添加覆盖层 + addOverlay () { + // 使用变量存储弹窗所需的 DOM 对象 + var container = document.getElementById("popup"); + var closer = document.getElementById("popup-closer"); + var content = document.getElementById("popup-content"); + var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null + + // 创建一个弹窗 Overlay 对象 + this.overlay = new Overlay({ + element: container, //绑定 Overlay 对象和 DOM 对象的 + autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果 + autoPanAnimation: { + duration: 250 //自动平移效果的动画时间 9毫秒 + }, + zIndex: 100 + }); + // 将弹窗添加到 map 地图中 + map.addOverlay(this.overlay); + let _that = this; + + /** + * 为弹窗添加一个响应关闭的函数 + */ + closer.onclick = function () { + _that.overlay.setPosition(undefined); + closer.blur(); + return false; + }; + if (goMore) { + goMore.onclick = function () { + _that.$emit('lookMore') + }; + } + }, + + //注册地图点击事件 + addMapClick () { + let _that = this + + map.on("click", function (evt) { + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); + if (feature) { + console.log(feature) + _that.clickMapVolunteer(feature.values_.properties) + + } + + }); + }, + + //点击项目 + async clickMapVolunteer (info) { + + + if (!info.id) { + return false + } + + const url = "/epmetuser/icresiuser/resi-brief/" + 'dd0bd55db0ca4b629c40bc914a08368e' + // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution" + + let params = {} + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + let coordinate = [info.longitude, info.latitude] + data.gridName = data.gridName ? data.gridName : '--' + data.villageName = data.villageName ? data.villageName : '--' + data.icUserName = data.icUserName ? data.icUserName : '--' + data.mobile = data.mobile ? data.mobile : '--' + data.idCard = data.idCard ? data.idCard : '--' + data.birthday = data.birthday ? data.birthday : '--' + data.contacts = data.contacts ? data.contacts : '--' + data.contactsMobile = data.contactsMobile ? data.contactsMobile : '--' + + data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '否' : '是' : '--' + data.genderShow = data.gender ? data.gender === '0' ? '女' : '男' : '--' + let categoriesArray = [] + + for (let key in data.volunteerCategories) { + categoriesArray.push(data.volunteerCategories[key]) + + } + + + if (categoriesArray.length > 0) { + data.categories = categoriesArray.join(',') + } else { + data.categories = '--' + } + + let showData = ` +
居民信息
+
所属网格： + `+ data.gridName + ` +
+
所属小区： + `+ data.villageName + ` +
+
本地户籍： + `+ data.isBdhjShow + ` +
+
姓名： + `+ data.icUserName + ` +
+
手机： + `+ data.mobile + ` +
+
性别： + `+ data.genderShow + ` +
+
身份证号： + `+ data.idCard + ` +
+
出生日期： + `+ data.birthday + ` +
+
联系人： + `+ data.contacts + ` +
+
联系人手机： + `+ data.contactsMobile + ` +
+
志愿者类别： + `+ data.categories + ` +
+ ` + // console.log(showData) + this.handleShowPopup(showData, coordinate, true) + + } else { + this.$message.error(msg) + } + }, + + handleShowPopup (showData, coordinate, isShowMore) { + if (isShowMore) { + document.getElementById("popup-goMore").style.display = 'block' + } else { + document.getElementById("popup-goMore").style.display = 'none' + } + console.log(this.overlay.getElement()) + let content = document.getElementById("popup-content"); + this.overlay.getElement().style.display = 'block' + this.overlay.getElement().parentNode.style.display = 'block' + this.overlay.getElement().parentNode.parentNode.style.display = 'block' + content.innerHTML = showData; + this.overlay.setPosition(coordinate); + //把 overlay 显示到指定的 x,y坐标 + + }, + // 关闭弹窗 + handleClosePopup () { + this.overlay.setPosition(undefined); + document.getElementById("popup-closer").blur(); + return false; + }, + //点击图层 - handleClickCoverage (index) { + async handleClickCoverage (index) { this.coverageTypesList[index].select = !this.coverageTypesList[index].select let item = this.coverageTypesList[index] @@ -338,23 +556,51 @@ const vueGis = { this.coverageTypes.push(element.value) } }); + + await this.loadCategoryList() + this.getTable(); + this.getMapTable(); }, //点击类别 - handleClickCategory (index, colIndex) { - this.categoryListshow[index][colIndex].sel = !this.coverageTypesList[index].sel - this.categoryList[index].sel = !this.coverageTypesList[index].sel - let item = this.coverageTypesList[index] + async handleClickCategory (index, colIndex) { - this.$set(this.coverageTypesList, index, item) + this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel - this.coverageTypes = [] + // this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel - this.coverageTypesList.forEach(element => { - if (element.select) { - this.coverageTypes.push(element.value) + let array = this.categoryListshow[index] + let item = this.categoryListshow[index][colIndex] + + + this.$set(this.categoryListshow[index], colIndex, item) + this.$set(this.categoryListshow, index, array) + + this.categoryKeys = [] + + this.categoryList.forEach(element => { + if (element.sel) { + this.categoryKeys.push(element.categoryKey) } }); + + this.getTable(); + this.getMapTable(); + }, + handleSearch () { + + }, + // + handleClickRow (index) { + let selData = this.tableList[index] + mapView.setCenter([selData.longitude, selData.latitude]); + this.clickMapVolunteer(selData) + // alert(index) + }, + + handlePageNoChange_demand (val) { + this.demand.pageNo = val; + this.getTable(); }, async loadCategoryList () { @@ -370,14 +616,7 @@ const vueGis = { if (code === 0) { // this.categoryList = data this.categoryList = [ - { - categoryKey: "0", - categoryName: "deserunt" - }, - { - categoryKey: "1", - categoryName: "deserunt" - }, + { categoryKey: "2", categoryName: "deserunt" @@ -531,6 +770,7 @@ const vueGis = { categoryName: "deserunt" }, ] + this.categoryKeys = [] this.categoryListshow = [] let itemArray = [] @@ -541,6 +781,7 @@ const vueGis = { } item.sel = true + this.categoryKeys.push(item.categoryKey) }); @@ -551,12 +792,181 @@ const vueGis = { console.log(this.categoryListshow) + console.log(this.categoryList) } else { this.$message.error(msg) } }, + //加载组织数据 + async getTable (isPage) { + this.demand.loading = true + // const url = "/data/aggregator/coverage/dataList"; + const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList"; + let params = { + coverageTypes: this.coverageTypes, + categoryKeys: this.categoryKeys, + search: this.search, + pageNo: this.demand.pageNo, + pageSize: this.demand.pageSize, + isPage: true + }; + + const { data, code, msg } = await requestPost(url, params); + this.demand.loading = false; + + if (code === 0) { + + this.demand.total = data.total; + this.tableList = data.list + this.tableList = [ + { + categoryKey: "volunteer1", + content: "volunteer1", + id: "123", + latitude: "36.082230", + longitude: "120.3868167667315", + }, + { + categoryKey: "volunteer2", + content: "volunteer2", + id: "123", + latitude: "36.062227", + longitude: "120.389455", + }, + { + categoryKey: "volunteer3", + content: "volunteer3", + id: "123", + latitude: "36.072214", + longitude: "120.389455", + }, + { + categoryKey: "volunteer4", + content: "volunteer4", + id: "123", + latitude: "36.07394505338441", + longitude: "120.3868167667315", + } + ] + this.demand.list = data.list.map((item) => { + return [ + item.categoryKey ? item.categoryKey : '--', + item.content ? item.content : '', + + ]; + }); + } else { + this.$message.error(msg); + } + }, + //加载组织数据 + async getMapTable () { + + // const url = "/data/aggregator/coverage/dataList"; + const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList"; + let params = { + coverageTypes: this.coverageTypes, + categoryKeys: this.categoryKeys, + search: this.search, + + isPage: false + }; + + const { data, code, msg } = await requestPost(url, params); + + if (code === 0) { + this.iconArrays = data.list + this.iconArrays = [ + { + categoryKey: "volunteer1", + content: "volunteer1", + id: "123", + latitude: "36.082230", + longitude: "120.3868167667315", + }, + { + categoryKey: "volunteer2", + content: "volunteer2", + id: "123", + latitude: "36.062227", + longitude: "120.389455", + }, + { + categoryKey: "volunteer3", + content: "volunteer3", + id: "123", + latitude: "36.072214", + longitude: "120.389455", + }, + { + categoryKey: "volunteer4", + content: "volunteer4", + id: "123", + latitude: "36.07394505338441", + longitude: "120.3868167667315", + } + ] + this.iconArrays.forEach((item, index) => { + + item.url = this.iconUrlArray[item.categoryKey] + + }); + console.log(this.iconArrays) + this.loadIcon() + } else { + this.$message.error(msg); + } + }, + + //加载icon图标 + loadIcon () { + + iconSource.clear()//清空多边形标注 + if (this.iconArrays && this.iconArrays.length > 0) { + + let iconFeatures = []; + + this.iconArrays.forEach((oneIcon, index) => { + //添加标注 + + let iconItem = new Feature({ + geometry: new Point([oneIcon.longitude, oneIcon.latitude]), + id: oneIcon.id, + properties: { + type: "icon", + info: { ...oneIcon } + } + }); + // console.log('oneIcon----', this.iconUrlArray[oneIcon.urlIndex]) + let iconStyle = new Style({ + image: new Icon({ + // anchor: [0.5, 0.5], + // imgSize: [32, 32], + // scale: 0.5, + // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0] + src: oneIcon.url + }), + // text: createTextStyle(oneIcon) + }); + + iconItem.setStyle(iconStyle); + + // if (this.distanceMax) { + // if (this.computedDistance(oneIcon.longitude, oneIcon.latitude, this.distanceMax)) { + // iconFeatures.push(iconItem); + // } + // } else { + iconFeatures.push(iconItem); + // } + + + }); + + iconSource.addFeatures(iconFeatures); + } + }, //刷新地图 async refreshMap (isRefreshView) { @@ -572,11 +982,11 @@ const vueGis = { //重置地图中心点 // if (isRefreshView) { - this.setMapLocation() + // this.setMapLocation() // } - await this.loadList() + await this.getTable(false); }, @@ -629,8 +1039,6 @@ const vueGis = { } mapView.setZoom(this.zoom); - - }, //返回所选组织 @@ -650,15 +1058,12 @@ const vueGis = { this.center = this.orgData.center this.zoom = this.orgData.zoom - - this.$nextTick(() => { this.refreshMap(true) this.$forceUpdate() }); - }, //加载组织数据 @@ -862,7 +1267,6 @@ const vueGis = { }, - //根据组织层级设置缩放级别 setZoom (agencyLevel) { if (agencyLevel === 'district') { @@ -922,10 +1326,6 @@ const vueGis = { //目标加载到map中 }) - map.on('singleclick', function (e) { - // console.log(e.coordinate) - // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); - }) //去除双击放大效果 const dblClickInteraction = map @@ -1000,11 +1400,11 @@ const vueGis = { map.addLayer(polygonLayer) - map.addInteraction(select); + // map.addInteraction(select); - select.on('select', e => { + // select.on('select', e => { - }); + // }); }, @@ -1022,11 +1422,6 @@ const vueGis = { }, - //取随机数 - getRndBetween (lowerLimit, upperLimit) { - return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit; - }, - //开启加载动画 startLoading () { loading = Loading.service({ @@ -1074,7 +1469,7 @@ const vueGis = { ...mapGetters(["clientHeight"]) }, - components: { cptCard, ScreenLoading }, + components: { cptTb, cptCard, ScreenLoading }, } export default vueGis; @@ -1096,5 +1491,70 @@ export default vueGis; } - \ No newline at end of file diff --git a/src/views/modules/visual/cpts/tb.vue b/src/views/modules/visual/cpts/tb.vue index 317f438f0..4b6c0f8c6 100644 --- a/src/views/modules/visual/cpts/tb.vue +++ b/src/views/modules/visual/cpts/tb.vue @@ -1,68 +1,67 @@