From e27ccbfeb4e75d4a3b782c1ddb65a0a9330c71bb Mon Sep 17 00:00:00 2001 From: 13176889840 <13176889840@163.com> Date: Wed, 15 Dec 2021 13:52:40 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=8E=AA=E6=96=BD=E6=9C=8D=E5=8A=A1?= =?UTF-8?q?=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/modules/visual/measure/service.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/views/modules/visual/measure/service.vue b/src/views/modules/visual/measure/service.vue index 3ea56996..e0caf574 100644 --- a/src/views/modules/visual/measure/service.vue +++ b/src/views/modules/visual/measure/service.vue @@ -514,6 +514,7 @@ export default { this.categoryCode = code const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' + this.pageNo = 1 this.getServiceList(_arr[0], orgType, code) } }, @@ -536,11 +537,15 @@ export default { pageSizeChangeHandleNew(val) { this.pageNo = 1; this.pageSize = val; - this.handleCascader(this.selectAgency) + const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') + const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' + this.getServiceList(_arr[0], orgType, this.categoryCode) }, pageCurrentChangeHandleNew(val) { this.pageNo = val; - this.handleCascader(this.selectAgency) + const _arr = this.selectAgency[this.selectAgency.length - 1].split('-') + const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' + this.getServiceList(_arr[0], orgType, this.categoryCode) }, }, }; From 1dcc94a38920ab3ba36167ddfbc5bb682ab14168 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Wed, 15 Dec 2021 15:17:03 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E5=A4=9A=E5=85=83=E5=8C=96=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityGovern/cpt/project-info.vue | 2 +- .../visual/components/screen-map/index.vue | 173 ++++++++++++++++-- .../modules/visual/measure/volunteer.vue | 102 ++++++++++- 3 files changed, 247 insertions(+), 30 deletions(-) diff --git a/src/views/modules/visual/communityGovern/cpt/project-info.vue b/src/views/modules/visual/communityGovern/cpt/project-info.vue index 30e768c6..c1ae0326 100644 --- a/src/views/modules/visual/communityGovern/cpt/project-info.vue +++ b/src/views/modules/visual/communityGovern/cpt/project-info.vue @@ -581,7 +581,7 @@ export default { const { data, code, msg } = await requestPost(url, { categoryCodeList: this.categoryCodes, userId: this.userId, - + projectId: this.projectIdCopy }); if (code === 0) { diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index 3e593ed5..eba9be98 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -3,8 +3,15 @@
- +
+ @@ -28,6 +35,7 @@ import { getDistance } from 'ol/sphere'; import { mapGetters } from "vuex"; import { Loading } from 'element-ui'; //引入Loading服务 + import { requestPost } from "@/js/dai/request"; @@ -81,7 +89,8 @@ const vueGis = { centerPoint: [],//中心点位置 zoom: 14,//缩放范围：区14 minZoom: 1,//最小缩放 - + overlay: null, + showPopup: false, mapInfo: { }, @@ -172,6 +181,13 @@ const vueGis = { this.loadIcon() } + if (this.isAddOpenlay) { + //初始化icon图层 + this.addOverlay() + } + + + this.addMapClick() }, @@ -365,8 +381,6 @@ const vueGis = { return (distance < max || distance === max) - - // debugger // return // var wgs84Sphere = new ol.Sphere(6378137); @@ -405,21 +419,8 @@ const vueGis = { //目标加载到map中 }) - let that = this - map.on('singleclick', function (e) { - const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) { - return feature; - }); - if (feature) { - console.log(feature) - that.$emit('clickFeature', feature) - - } - - }) - //去除双击放大效果 const dblClickInteraction = map .getInteractions() @@ -454,7 +455,6 @@ const vueGis = { }, - //初始化多边形标注图层 initPolygonLayer () { polygonSource = new VectorSource({ @@ -542,6 +542,83 @@ const vueGis = { // }); }, + //添加覆盖层 + addOverlay () { + // 使用变量存储弹窗所需的 DOM 对象 + var container = document.getElementById("popup"); + var closer = document.getElementById("popup-closer"); + var content = document.getElementById("popup-content"); + + // 创建一个弹窗 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; + }; + }, + + //注册地图点击事件 + addMapClick () { + let _that = this + + + map.on("click", function (evt) { + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); + if (feature) { + console.log(feature) + if (_that.clickType === 'back') { + + _that.$emit('clickFeature', feature) + + + } else if (_that.clickType === 'popup') { + _that.$emit('clickFeature', feature) + // _that.overlay.getElement().parentNode.style.display = 'block' + // _that.overlay.getElement().parentNode.parentNode.style.display = 'block' + + // content.innerHTML = ` + //

你点击了这里：

+ //

经纬度：

+ //

坐标：

X：   Y: `; + // _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标 + + + } else { + console.log('此处没有标注') + } + + } + + }); + }, + + handleShowPopup (showData, coordinate) { + console.log(this.overlay.getElement()) + this.overlay.getElement().style.display = 'block' + this.overlay.getElement().parentNode.style.display = 'block' + this.overlay.getElement().parentNode.parentNode.style.display = 'block' + var content = document.getElementById("popup-content"); + + content.innerHTML = showData; + this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标 + }, //取随机数 getRndBetween (lowerLimit, upperLimit) { @@ -582,6 +659,17 @@ const vueGis = { showIconLayer: { type: Boolean, default: false + }, + //是否添加弹出框图层 + isAddOpenlay: { + type: Boolean, + default: false + }, + + //点击地图事件类型,back:返回，popup:弹出层 + clickType: { + type: String, + default: 'back' } }, @@ -623,4 +711,51 @@ export default vueGis; .ol-overlaycontainer-stopevent { display: none; } +.ol-popup { + position: absolute; + background-color: #1257c9; + -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); + filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); + padding: 15px; + border-radius: 10px; + border: 1px solid #1257c9; + bottom: 12px; + left: -50px; + text-align: left; +} +.ol-popup:after, +.ol-popup:before { + top: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.ol-popup:after { + border-top-color: 1257c9; + border-width: 10px; + left: 48px; + margin-left: -10px; +} +.ol-popup:before { + border-top-color: #1257c9; + border-width: 11px; + left: 48px; + margin-left: -11px; +} +.ol-popup-closer { + text-decoration: none; + position: absolute; + top: 2px; + right: 8px; +} +.popup-content { + width: 300px; +} +.ol-popup-closer:after { + content: "✖"; + color: rgba(1, 17, 104, 1); +} \ No newline at end of file diff --git a/src/views/modules/visual/measure/volunteer.vue b/src/views/modules/visual/measure/volunteer.vue index 233525b1..2075ccde 100644 --- a/src/views/modules/visual/measure/volunteer.vue +++ b/src/views/modules/visual/measure/volunteer.vue @@ -74,8 +74,10 @@
+ @clickFeature="clickMapVolunteer" + :showIconLayer="true" + :clickType="'popup'" + :isAddOpenlay="true">
@@ -293,34 +295,34 @@ export default { if (code === 0) { console.log('data-ddd', data) this.vInfo = data - const arr = [{ + const arr = [{ name: '党员数量', value: data.partyTotal, itemStyle: { color: 'rgba(26, 178, 255, 1)' } - }, { + }, { name: '居民数量', value: data.resiTotal, itemStyle: { color: 'rgba(250, 193, 38, 1)' } }] - const arr1 = [{ + const arr1 = [{ name: '党员数量', value: data.partyServiceTotal, itemStyle: { color: 'rgba(26, 178, 255, 1)' } - }, { + }, { name: '居民数量', value: data.resiServiceTotal, temStyle: { color: 'rgba(250, 193, 38, 1)' } }] - this.vPersonal = [ ...arr ] - this.vCount = [ ...arr1 ] + this.vPersonal = [...arr] + this.vCount = [...arr1] this.vpTotal = data.volunteerTotal this.vcTotal = data.serviceTotal this.initCharts(data.volunteerTotal, arr) @@ -438,8 +440,88 @@ export default { }, //点击项目 - clickProject (feature) { + async clickMapVolunteer (feature) { console.log('标注信息', feature.values_.properties) + if (!feature.values_.properties.info.icResiUserId) { + return false + } + const info = feature.values_.properties.info + const url = "/epmetuser/icresiuser/resi-brief/" + info.icResiUserId + // 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.$refs.map.handleShowPopup(showData, coordinate) + + } else { + this.$message.error(msg) + } }, }, }; @@ -596,7 +678,7 @@ export default { } .card-wr-map { - height: calc(100vh - 150px); + height: calc(100vh - 120px); text-align: center; .card-map { From c461482e05e294902dccc7fbf42b3f0c42805b8c Mon Sep 17 00:00:00 2001 From: jiangyy Date: Wed, 15 Dec 2021 15:36:01 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=86=E5=B8=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/scss/modules/visual/processAnalyze.scss | 3 ++- .../modules/visual/communityGovern/processAnalyze.vue | 3 +++ .../visual/components/screen-echarts-frame/index.vue | 7 +++---- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss index 07c430f5..098753e0 100644 --- a/src/assets/scss/modules/visual/processAnalyze.scss +++ b/src/assets/scss/modules/visual/processAnalyze.scss @@ -122,6 +122,7 @@ } .echart-line { margin-top: 10px; + height: 100%; } } .g-count { @@ -244,7 +245,7 @@ text-align: center; position: relative; width: 500px; - // height: 100%; + height: 100%; box-sizing: border-box; } diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue index c20b4ece..f640be1b 100644 --- a/src/views/modules/visual/communityGovern/processAnalyze.vue +++ b/src/views/modules/visual/communityGovern/processAnalyze.vue @@ -249,6 +249,8 @@ export default { await this.getLineChart() await this.loadProjectlist() + this.assignData() + }, assignData () { @@ -485,6 +487,7 @@ export default { }, assignLineChart () { + this.lineOption = lineOption() this.$refs.lineChart.setOption(this.lineOption, true) this.$refs.lineChart.setOption({ diff --git a/src/views/modules/visual/components/screen-echarts-frame/index.vue b/src/views/modules/visual/components/screen-echarts-frame/index.vue index e34d34df..66736e48 100644 --- a/src/views/modules/visual/components/screen-echarts-frame/index.vue +++ b/src/views/modules/visual/components/screen-echarts-frame/index.vue @@ -1,10 +1,9 @@ From 6cdfbbcb679092ee0b72309b91febe29e5ff0a09 Mon Sep 17 00:00:00 2001 From: 13176889840 <13176889840@163.com> Date: Wed, 15 Dec 2021 15:41:52 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E5=9C=B0=E5=9B=BE111111?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/modules/visual/measure/volunteer.vue | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/views/modules/visual/measure/volunteer.vue b/src/views/modules/visual/measure/volunteer.vue index 2075ccde..44b697ca 100644 --- a/src/views/modules/visual/measure/volunteer.vue +++ b/src/views/modules/visual/measure/volunteer.vue @@ -648,12 +648,15 @@ export default { } .map-tips { - width: 700px; + width: 100%; display: flex; - // justify-content: start; + // justify-content: center; + align-items: center; flex-wrap: wrap; - padding-top: 10px; - padding-bottom: 20px; + box-sizing: border-box; + padding: 6px 0 0 100px; + // padding-top: 10px; + // padding-bottom: 10px; .map-tips-item { display: flex; @@ -678,7 +681,7 @@ export default { } .card-wr-map { - height: calc(100vh - 120px); + // height: calc(100vh - 120px); text-align: center; .card-map { From db96f17ef0c1d25fdc305b2b5e2b8159bda48906 Mon Sep 17 00:00:00 2001 From: 13176889840 <13176889840@163.com> Date: Wed, 15 Dec 2021 15:46:31 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E7=A0=94=E5=88=A4=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/modules/visual/cpts/analyse.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/modules/visual/cpts/analyse.vue b/src/views/modules/visual/cpts/analyse.vue index 43777c25..6292ddc5 100644 --- a/src/views/modules/visual/cpts/analyse.vue +++ b/src/views/modules/visual/cpts/analyse.vue @@ -297,6 +297,7 @@ export default {