|
|
@ -35,75 +35,85 @@ |
|
|
<span>{{item.label}}</span> |
|
|
<span>{{item.label}}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="div_category"> |
|
|
|
|
|
<el-scrollbar style="height:98%"> |
|
|
|
|
|
|
|
|
<el-scrollbar style="height:98%"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="div_category"> |
|
|
|
|
|
<div v-for="(item,index) in categoryListshow" |
|
|
<div v-for="(item,index) in categoryListshow" |
|
|
:key="index" |
|
|
:key="index" |
|
|
class="category_item"> |
|
|
class="category_item"> |
|
|
<div class="list_item"> |
|
|
|
|
|
<div v-for="(colItem,colIndex) in item" |
|
|
<div v-for="(colItem,colIndex) in item" |
|
|
:key="colIndex" |
|
|
:key="colIndex" |
|
|
class="list_item_col" |
|
|
class="list_item" |
|
|
@click="handleTo(colItem)"> |
|
|
@click="handleClickCategory(index,colIndex)"> |
|
|
<img :src="colItem.dataIcon" |
|
|
<img :src="colItem.dataIcon" |
|
|
alt /> |
|
|
alt /> |
|
|
<div class="item_content"> |
|
|
<span :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}} |
|
|
<div class="item_label">{{colItem.categoryName}}</div> |
|
|
|
|
|
|
|
|
</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div :class="['item_line',{'last_line':index==(categoryListshow.length-1)}]"></div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</el-scrollbar> |
|
|
</el-scrollbar> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="div_info"> |
|
|
<div class="div_info"> |
|
|
<!-- <el-scrollbar style="height:98%"> |
|
|
<div class="div_search_list"> |
|
|
<div class="info_tip"> |
|
|
<el-input size="mini" |
|
|
<img src="../../../../../assets/img/shuju/title-tip.png" |
|
|
WarningColor='warning' |
|
|
alt /> |
|
|
placeholder="请输入搜索内容" |
|
|
<div class="tip_title">分类列表</div> |
|
|
v-model="search"> |
|
|
</div> |
|
|
<i slot="prefix" |
|
|
|
|
|
class="icon"> |
|
|
|
|
|
<img src="../../../../../assets/img/modules/visual/sousuo.png" |
|
|
|
|
|
alt /> |
|
|
|
|
|
</i> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
|
|
|
|
|
|
<div class="btn" |
|
|
|
|
|
@click="handleSearch">搜索</div> |
|
|
|
|
|
|
|
|
<div class="info_loading" |
|
|
</div> |
|
|
v-if="infoLoading"> |
|
|
<div class="m-tb"> |
|
|
<screen-loading>加载中</screen-loading> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="!infoLoading" |
|
|
<div class="tb"> |
|
|
class="info_list"> |
|
|
<cpt-tb :col-list="demand.colList" |
|
|
<div v-for="(item,index) in listDatashow" |
|
|
:loading="demand.loading" |
|
|
:key="index" |
|
|
:header="demand.header" |
|
|
class="item"> |
|
|
:list="demand.list" |
|
|
<div class="list_item"> |
|
|
@handleClickRow="handleClickRow"></cpt-tb> |
|
|
<div v-for="(colItem,colIndex) in item" |
|
|
|
|
|
:key="colIndex" |
|
|
|
|
|
class="list_item_col" |
|
|
|
|
|
@click="handleTo(colItem)"> |
|
|
|
|
|
<img :src="colItem.dataIcon" |
|
|
|
|
|
alt /> |
|
|
|
|
|
<div class="item_content"> |
|
|
|
|
|
<div class="item_label">{{colItem.label}}</div> |
|
|
|
|
|
<div class="item_count">{{colItem.count}}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div :class="['item_line',{'last_line':index==(listDatashow.length-1)}]"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</el-scrollbar> --> |
|
|
<div class="m-pagination"> |
|
|
|
|
|
<el-pagination :current-page="demand.pageNo" |
|
|
|
|
|
:page-size="demand.pageSize" |
|
|
|
|
|
:total="demand.total" |
|
|
|
|
|
background |
|
|
|
|
|
layout="prev, pager, next,total" |
|
|
|
|
|
@current-change="handlePageNoChange_demand"> |
|
|
|
|
|
</el-pagination> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
|
|
|
<a href="#" |
|
|
|
|
|
id="popup-goMore" |
|
|
|
|
|
class="popup-goMore">更多>>>></a> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
@ -129,7 +139,7 @@ import { Loading } from 'element-ui'; //引入Loading服务 |
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import cptTb from "@/views/modules/visual/cpts/tb"; |
|
|
import cptCard from "@/views/modules/visual/cpts/card"; |
|
|
import cptCard from "@/views/modules/visual/cpts/card"; |
|
|
import ScreenLoading from "@/views/modules/visual/cpts/loading"; |
|
|
import ScreenLoading from "@/views/modules/visual/cpts/loading"; |
|
|
|
|
|
|
|
|
@ -231,7 +241,6 @@ const vueGis = { |
|
|
name: 'HomeMap', |
|
|
name: 'HomeMap', |
|
|
data () { |
|
|
data () { |
|
|
return { |
|
|
return { |
|
|
|
|
|
|
|
|
centerPoint: [],//中心点位置 |
|
|
centerPoint: [],//中心点位置 |
|
|
zoom: 14,//缩放范围：区14 |
|
|
zoom: 14,//缩放范围：区14 |
|
|
minZoom: 1,//最小缩放 |
|
|
minZoom: 1,//最小缩放 |
|
|
@ -300,7 +309,39 @@ const vueGis = { |
|
|
categoryKeys: [], |
|
|
categoryKeys: [], |
|
|
search: '', |
|
|
search: '', |
|
|
pageNo: 1, |
|
|
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, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@ -323,13 +364,186 @@ const vueGis = { |
|
|
|
|
|
|
|
|
//加载当前园区的标注 |
|
|
//加载当前园区的标注 |
|
|
this.loadPolygon(this.subAgencyArray) |
|
|
this.loadPolygon(this.subAgencyArray) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.setMapLocation() |
|
|
this.setMapLocation() |
|
|
await this.loadCategoryList() |
|
|
await this.loadCategoryList() |
|
|
|
|
|
this.getTable(); |
|
|
|
|
|
await this.getMapTable(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//初始化icon图层 |
|
|
|
|
|
this.addOverlay() |
|
|
|
|
|
|
|
|
|
|
|
this.addMapClick() |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
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 = ` |
|
|
|
|
|
<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.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 |
|
|
this.coverageTypesList[index].select = !this.coverageTypesList[index].select |
|
|
let item = this.coverageTypesList[index] |
|
|
let item = this.coverageTypesList[index] |
|
|
|
|
|
|
|
|
@ -342,11 +556,51 @@ const vueGis = { |
|
|
this.coverageTypes.push(element.value) |
|
|
this.coverageTypes.push(element.value) |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
await this.loadCategoryList() |
|
|
|
|
|
this.getTable(); |
|
|
|
|
|
this.getMapTable(); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//点击类别 |
|
|
//点击类别 |
|
|
handleClickCategory (index) { |
|
|
async handleClickCategory (index, colIndex) { |
|
|
|
|
|
|
|
|
|
|
|
this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel |
|
|
|
|
|
|
|
|
|
|
|
// this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel |
|
|
|
|
|
|
|
|
|
|
|
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 () { |
|
|
async loadCategoryList () { |
|
|
@ -360,32 +614,359 @@ const vueGis = { |
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
|
|
|
|
|
|
if (code === 0) { |
|
|
if (code === 0) { |
|
|
this.categoryList = data |
|
|
// this.categoryList = data |
|
|
|
|
|
this.categoryList = [ |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "0", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "1", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "0", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "1", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "0", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "1", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "0", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "1", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "0", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "1", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "0", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "1", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "机关直属部门" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "0", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "1", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "2", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "3", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
categoryKey: "4", |
|
|
|
|
|
categoryName: "deserunt" |
|
|
|
|
|
}, |
|
|
|
|
|
] |
|
|
|
|
|
this.categoryKeys = [] |
|
|
|
|
|
|
|
|
this.categoryListshow = [] |
|
|
this.categoryListshow = [] |
|
|
let itemArray = [] |
|
|
let itemArray = [] |
|
|
|
|
|
|
|
|
this.categoryList.forEach((item, index) => { |
|
|
this.categoryList.forEach((item, index) => { |
|
|
if (!item.dataIcon) { |
|
|
if (!item.dataIcon) { |
|
|
item.dataIcon = require('../../../../../assets/img/shuju/volunteer3.png') |
|
|
item.dataIcon = require('../../../../../assets/img/shuju/volunteer3.png') |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (index % 4 === 0) {//偶数 |
|
|
item.sel = true |
|
|
itemArray.push(item) |
|
|
this.categoryKeys.push(item.categoryKey) |
|
|
} else { |
|
|
|
|
|
itemArray.push(item) |
|
|
|
|
|
this.categoryListshow.push(itemArray) |
|
|
|
|
|
itemArray = [] |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
let chunk = 4 |
|
|
|
|
|
for (let i = 0, j = this.categoryList.length; i < j; i += chunk) { |
|
|
|
|
|
this.categoryListshow.push(this.categoryList.slice(i, i + chunk)) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(this.categoryListshow) |
|
|
|
|
|
console.log(this.categoryList) |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.$message.error(msg) |
|
|
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) { |
|
|
async refreshMap (isRefreshView) { |
|
|
@ -401,11 +982,11 @@ const vueGis = { |
|
|
//重置地图中心点 |
|
|
//重置地图中心点 |
|
|
|
|
|
|
|
|
// if (isRefreshView) { |
|
|
// if (isRefreshView) { |
|
|
this.setMapLocation() |
|
|
// this.setMapLocation() |
|
|
|
|
|
|
|
|
// } |
|
|
// } |
|
|
|
|
|
|
|
|
await this.loadList() |
|
|
await this.getTable(false); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
@ -458,8 +1039,6 @@ const vueGis = { |
|
|
} |
|
|
} |
|
|
mapView.setZoom(this.zoom); |
|
|
mapView.setZoom(this.zoom); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//返回所选组织 |
|
|
//返回所选组织 |
|
|
@ -479,15 +1058,12 @@ const vueGis = { |
|
|
this.center = this.orgData.center |
|
|
this.center = this.orgData.center |
|
|
this.zoom = this.orgData.zoom |
|
|
this.zoom = this.orgData.zoom |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.refreshMap(true) |
|
|
this.refreshMap(true) |
|
|
this.$forceUpdate() |
|
|
this.$forceUpdate() |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//加载组织数据 |
|
|
//加载组织数据 |
|
|
@ -691,7 +1267,6 @@ const vueGis = { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//根据组织层级设置缩放级别 |
|
|
//根据组织层级设置缩放级别 |
|
|
setZoom (agencyLevel) { |
|
|
setZoom (agencyLevel) { |
|
|
if (agencyLevel === 'district') { |
|
|
if (agencyLevel === 'district') { |
|
|
@ -751,10 +1326,6 @@ const vueGis = { |
|
|
//目标加载到map中 |
|
|
//目标加载到map中 |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
map.on('singleclick', function (e) { |
|
|
|
|
|
// console.log(e.coordinate) |
|
|
|
|
|
// console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
//去除双击放大效果 |
|
|
//去除双击放大效果 |
|
|
const dblClickInteraction = map |
|
|
const dblClickInteraction = map |
|
|
@ -829,11 +1400,11 @@ const vueGis = { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
map.addLayer(polygonLayer) |
|
|
map.addLayer(polygonLayer) |
|
|
map.addInteraction(select); |
|
|
// map.addInteraction(select); |
|
|
|
|
|
|
|
|
select.on('select', e => { |
|
|
// select.on('select', e => { |
|
|
|
|
|
|
|
|
}); |
|
|
// }); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
@ -851,11 +1422,6 @@ const vueGis = { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//取随机数 |
|
|
|
|
|
getRndBetween (lowerLimit, upperLimit) { |
|
|
|
|
|
return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//开启加载动画 |
|
|
//开启加载动画 |
|
|
startLoading () { |
|
|
startLoading () { |
|
|
loading = Loading.service({ |
|
|
loading = Loading.service({ |
|
|
@ -903,7 +1469,7 @@ const vueGis = { |
|
|
...mapGetters(["clientHeight"]) |
|
|
...mapGetters(["clientHeight"]) |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
components: { cptCard, ScreenLoading }, |
|
|
components: { cptTb, cptCard, ScreenLoading }, |
|
|
} |
|
|
} |
|
|
export default vueGis; |
|
|
export default vueGis; |
|
|
</script> |
|
|
</script> |
|
|
@ -925,5 +1491,70 @@ export default vueGis; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" > |
|
|
|
|
|
.div_search_list { |
|
|
|
|
|
.el-input__inner[WarningColor="warning"] { |
|
|
|
|
|
border-radius: 8px 0 0 8px; |
|
|
|
|
|
height: 53px; |
|
|
|
|
|
background-color: #01106800; |
|
|
|
|
|
border: 2px solid #0082fb; |
|
|
|
|
|
padding-left: 70px; |
|
|
|
|
|
font-size: 18px; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #ffffff; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
} |
|
|
|
|
|
.popup-goMore { |
|
|
|
|
|
margin: 20px 0; |
|
|
|
|
|
} |
|
|
|
|
|
.ol-popup-closer:after { |
|
|
|
|
|
content: "✖"; |
|
|
|
|
|
// color: rgba(1, 17, 104, 1); |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
dai
4 years ago