Browse Source

Merge branch 'dev-shuju' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-shuju

shibei_master
dai 4 years ago
parent
commit
41a0320f93
  1. 3
      src/assets/scss/modules/visual/processAnalyze.scss
  2. 2
      src/views/modules/visual/communityGovern/cpt/project-info.vue
  3. 3
      src/views/modules/visual/communityGovern/processAnalyze.vue
  4. 7
      src/views/modules/visual/components/screen-echarts-frame/index.vue
  5. 173
      src/views/modules/visual/components/screen-map/index.vue
  6. 2
      src/views/modules/visual/cpts/analyse.vue
  7. 9
      src/views/modules/visual/measure/service.vue
  8. 113
      src/views/modules/visual/measure/volunteer.vue

3
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;
}

2
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) {

3
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({

7
src/views/modules/visual/components/screen-echarts-frame/index.vue

@ -1,10 +1,9 @@
<template>
<div>
<div v-show="!noData"
class="screenEchartsFrame"
<div class="screenEchartsFrame"
ref="screenEchartsFrame"></div>
<screen-nodata v-if="noData"
class="nodata"></screen-nodata>
<!-- <screen-nodata v-if="noData"
class="nodata"></screen-nodata> -->
</div>
</template>

173
src/views/modules/visual/components/screen-map/index.vue

@ -3,8 +3,15 @@
<div class="div_map"
id="map"
ref="map">
<!-- <div id="map"
class="map"></div> -->
</div>
<div id="popup"
style="display: none;"
class="ol-popup">
<a href="#"
id="popup-closer"
class="ol-popup-closer"></a>
<div id="popup-content"
class="popup-content"></div>
</div>
</div>
</template>
@ -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 = `
// <p></p>
// <p><p><code> </code> <p>
// <p></p>X&nbsp;&nbsp; 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);
}
</style>

2
src/views/modules/visual/cpts/analyse.vue

@ -297,6 +297,7 @@ export default {
<style lang="scss" scoped>
.analyse-container {
color: #fff;
.analyse-wr {
display: flex;
align-items: center;
@ -552,6 +553,7 @@ export default {
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
text-align: center;
line-height: 100%;
}

9
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)
},
},
};

113
src/views/modules/visual/measure/volunteer.vue

@ -74,8 +74,10 @@
<div class="card-map">
<screen-map class="map"
ref="map"
@clickFeature="clickProject"
:showIconLayer="true"></screen-map>
@clickFeature="clickMapVolunteer"
:showIconLayer="true"
:clickType="'popup'"
:isAddOpenlay="true"></screen-map>
</div>
<div class="map-tips">
@ -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 = `
<div style='font-size:16px; color:#FFFFFF;'>居民信息</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:10px'>所属网格
<span>`+ data.gridName + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>所属小区
<span>`+ data.villageName + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>本地户籍
<span>`+ data.isBdhjShow + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>姓名
<span>`+ data.icUserName + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>手机
<span>`+ data.mobile + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>性别
<span>`+ data.genderShow + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>身份证号
<span>`+ data.idCard + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>出生日期
<span>`+ data.birthday + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人
<span>`+ data.contacts + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人手机
<span>`+ data.contactsMobile + `</span>
</div>
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>志愿者类别
<span>`+ data.categories + `</span>
</div>
`
// console.log(showData)
this.$refs.map.handleShowPopup(showData, coordinate)
} else {
this.$message.error(msg)
}
},
},
};
@ -566,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;
@ -596,7 +681,7 @@ export default {
}
.card-wr-map {
height: calc(100vh - 150px);
// height: calc(100vh - 120px);
text-align: center;
.card-map {

Loading…
Cancel
Save