You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1989 lines
57 KiB
1989 lines
57 KiB
<template>
|
|
<div style="position: relative">
|
|
|
|
<!-- 组织路由 -->
|
|
|
|
<div class="div_top">
|
|
<div class="router_line"></div>
|
|
<div class="div_router">
|
|
<div v-if="!showPeopleInfo">
|
|
<span class="router_child">五大图层</span>
|
|
</div>
|
|
<div v-if="showPeopleInfo"> <span class="router_parents"
|
|
@click="handleClickRouter">五大图层<span class="arrow">></span></span>
|
|
|
|
<span class="router_child">个人档案</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="!showPeopleInfo"
|
|
class="div_content">
|
|
|
|
<div class="div_map"
|
|
id="map"
|
|
ref="map">
|
|
</div>
|
|
|
|
<div class="div_data">
|
|
|
|
<div class="div_tips">
|
|
|
|
<div class="div_coverage">
|
|
|
|
<div class="coverage_item"
|
|
@click="handleClickCoverage(index)"
|
|
v-for="(item,index) in coverageTypesList"
|
|
:key="index">
|
|
<img :src="item.select?selImg:noSelImg" />
|
|
<span>{{item.label}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="div_category">
|
|
<el-scrollbar style="height:98%">
|
|
|
|
<div v-for="(item,index) in categoryListshow"
|
|
:key="index"
|
|
class="category_item">
|
|
|
|
<div v-for="(colItem,colIndex) in item"
|
|
:key="colIndex"
|
|
class="list_item"
|
|
@click="handleClickCategory(index,colIndex)">
|
|
<img :src="colItem.dataIcon"
|
|
alt />
|
|
<div :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="div_info">
|
|
<div class="div_search_list">
|
|
<el-input size="mini"
|
|
WarningColor='warning'
|
|
placeholder="请输入搜索内容"
|
|
v-model="search">
|
|
<i slot="prefix"
|
|
class="icon">
|
|
<img src="../../../../../assets/img/modules/visual/sousuo.png"
|
|
alt />
|
|
</i>
|
|
</el-input>
|
|
|
|
<div class="btn"
|
|
@click="handleSearch">搜索</div>
|
|
|
|
</div>
|
|
<div class="m-tb">
|
|
|
|
<div class="tb">
|
|
<cpt-tb :col-list="demand.colList"
|
|
:loading="demand.loading"
|
|
:header="demand.header"
|
|
:list="demand.list"
|
|
@handleClickRow="handleClickRow"></cpt-tb>
|
|
|
|
</div>
|
|
<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 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 v-show="selPlaceType==='resi'|| selPlaceType === 'special_resi'">
|
|
<div class="popTitle">居民信息</div>
|
|
<div class="popContentTitle">姓名：
|
|
<span>{{ selInfo.icUserName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">所属网格：
|
|
<span>{{ selInfo.gridName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">所属小区：
|
|
<span>{{ selInfo.villageName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">本地户籍：
|
|
<span>{{ selInfo.isBdhjShow }}</span>
|
|
</div>
|
|
|
|
<div class="popContentTitle">手机：
|
|
<span>{{ selInfo.mobile }}</span>
|
|
</div>
|
|
<div class="popContentTitle">性别：
|
|
<span>{{ selInfo.genderShow }}</span>
|
|
</div>
|
|
<div class="popContentTitle">身份证号：
|
|
<span>{{ selInfo.idCard }}</span>
|
|
</div>
|
|
|
|
<div class="popContentTitle">工作单位：
|
|
<span>{{ selInfo.gzdw?selInfo.gzdw:'--' }}</span>
|
|
</div>
|
|
<div class="popContentTitle">人户状况：
|
|
<span>{{ selInfo.rhzkShow }}</span>
|
|
</div>
|
|
<div class="div_resi_more">
|
|
<div @click="toPeople"
|
|
class="span_resi_more">更多</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="selPlaceType==='dangerous_chemicals'">
|
|
<div class="popTitle">企业信息</div>
|
|
<div class="popContentTitle">企业名称：
|
|
<span>{{ selInfo.name }}</span>
|
|
</div>
|
|
<div class="popContentTitle">企业类型：
|
|
<span>{{ selInfo.categoryName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">周边安全距离：
|
|
<span>{{ selInfo.safeDistance }}</span>
|
|
</div>
|
|
<div class="popContentTitle">危化品种类：
|
|
<span>{{ selInfo.dangerTypeName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">负责人：
|
|
<span>{{ selInfo.principalName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">联系电话：
|
|
<span>{{ selInfo.principalMobile }}</span>
|
|
</div>
|
|
<div class="popContentTitle">经营地址：
|
|
<span>{{ selInfo.address }}</span>
|
|
</div>
|
|
<div class="popContentTitle">备注：
|
|
<span>{{ selInfo.remark }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-show="selPlaceType==='public_service'||selPlaceType==='city_management'||selPlaceType==='superior_resource'">
|
|
<div class="popTitle">场所信息</div>
|
|
<div class="popContentTitle">场所名称：
|
|
<span>{{ selInfo.name }}</span>
|
|
</div>
|
|
<div class="popContentTitle">场所分类：
|
|
<span>{{ selInfo.categoryName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">占地面积：
|
|
<span>{{ selInfo.areaCovered }}</span>
|
|
</div>
|
|
<div class="popContentTitle">容纳人数：
|
|
<span>{{ selInfo.capacity }}</span>
|
|
</div>
|
|
<div class="popContentTitle">地址：
|
|
<span>{{ selInfo.address }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-show="selPlaceType==='event'">
|
|
<div class="popTitle">难点痛点</div>
|
|
<div class="popContentTitle">所属网格：
|
|
<span>{{ selInfo.gridName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">发生时间：
|
|
<span>{{ selInfo.happenTime }}</span>
|
|
</div>
|
|
<div class="popContentTitle">事件内容：
|
|
<span>{{ selInfo.eventContent }}</span>
|
|
</div>
|
|
|
|
<div v-if="selInfo.imageList&&selInfo.imageList.length>0"
|
|
class="info-prop">
|
|
<span>图片：</span>
|
|
<div class="info-pics">
|
|
<img :src="src"
|
|
:key="src"
|
|
style="width:100px;height:100px;padding-right:10px"
|
|
v-for="src in eventInfo.imageList"
|
|
@click="watchImg(src)" />
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="selInfo.voiceList&&selInfo.voiceList.length>0"
|
|
class="info-prop">
|
|
<span>音频：</span>
|
|
<div class="info-pics">
|
|
<audio controls>
|
|
<source :src="item.url"
|
|
type=""
|
|
:key="item.url"
|
|
v-for="item in eventInfo.voiceList" />
|
|
</audio>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="popContentTitle">反映渠道：
|
|
<span>{{ selInfo.sourceTypeName|| "--" }}</span>
|
|
</div>
|
|
<div class="popContentTitle">地址：
|
|
<span>{{ selInfo.address || "--" }}</span>
|
|
</div>
|
|
<div class="popContentTitle">报事人：
|
|
<span>{{selInfo.name || "--" }}</span>
|
|
</div>
|
|
<div class="popContentTitle">手机号：
|
|
<span>{{ selInfo.mobile || "--" }}</span>
|
|
</div>
|
|
<div class="popContentTitle">身份证号：
|
|
<span>{{ selInfo.idCard || "--" }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-show="selPlaceType==='community_org'">
|
|
<div class="popTitle">组织信息</div>
|
|
<div class="popContentTitle">组织名称：
|
|
<span>{{ selInfo.organizationName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">组织分类：
|
|
<span>{{ selInfo.categoryName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">组织人数：
|
|
<span>{{ selInfo.organizationPersonCount }}</span>
|
|
</div>
|
|
<div class="popContentTitle">组织成员：
|
|
<span>{{ selInfo.organizationPersonnelShow }}</span>
|
|
</div>
|
|
<div class="popContentTitle">服务事项：
|
|
<span>{{ selInfo.serviceItem }}</span>
|
|
</div>
|
|
<div class="popContentTitle">负责人：
|
|
<span>{{ selInfo.principalName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">联系电话：
|
|
<span>{{ selInfo.principalPhone }}</span>
|
|
</div>
|
|
<div class="popContentTitle">创建时间：
|
|
<span>{{ selInfo.organizationCreatedTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="selPlaceType==='group_rent'">
|
|
<div class="popTitle">房屋信息</div>
|
|
<div class="popContentTitle">房屋名称：
|
|
<span>{{ selInfo.houseName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">房屋类型：
|
|
<span>{{ selInfo.houseTypeName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">房屋用途：
|
|
<span>{{ selInfo.purposeName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">房屋状态：
|
|
<span>{{ selInfo.rentName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">房主姓名：
|
|
<span>{{ selInfo.ownerName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">联系方式：
|
|
<span>{{ selInfo.ownerPhone }}</span>
|
|
</div>
|
|
<div class="popContentTitle">房主身份证：
|
|
<span>{{ selInfo.ownerIdCard }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-show="selPlaceType==='enterprise_patrol'">
|
|
<div class="popTitle">企事业信息</div>
|
|
<div class="popContentTitle">场所类型：
|
|
<span>{{ selInfo.placeTypeName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">场所区域：
|
|
<span>{{ selInfo.gridName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">场所名称：
|
|
<span>{{ selInfo.placeOrgName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">场所地址：
|
|
<span>{{ selInfo.address }}</span>
|
|
</div>
|
|
<div class="popContentTitle">规模：
|
|
<span>{{ selInfo.scale }}</span>
|
|
</div>
|
|
<div class="popContentTitle">负责人：
|
|
<span>{{ selInfo.personInCharge }}</span>
|
|
</div>
|
|
<div class="popContentTitle">联系电话：
|
|
<span>{{ selInfo.mobile }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-show="selPlaceType==='party_unit'">
|
|
<div class="popTitle">联建单位信息</div>
|
|
<div class="popContentTitle">单位名称：
|
|
<span>{{ selInfo.unitName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">分类：
|
|
<span>{{ selInfo.typeName }}</span>
|
|
</div>
|
|
<div class="popContentTitle">服务事项：
|
|
<span>{{ selInfo.serviceMatterListShow }}</span>
|
|
</div>
|
|
<div class="popContentTitle">联系人：
|
|
<span>{{ selInfo.contact }}</span>
|
|
</div>
|
|
<div class="popContentTitle">联系电话：
|
|
<span>{{ selInfo.contactMobile }}</span>
|
|
</div>
|
|
<div class="popContentTitle">在职党员：
|
|
<span>{{ selInfo.memberCount }}</span>
|
|
</div>
|
|
<div class="popContentTitle">备注：
|
|
<span>{{ selInfo.remark }}</span>
|
|
</div>
|
|
<div class="popContentTitle">地理位置：
|
|
<span>{{ selInfo.address }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<people v-if="showPeopleInfo"
|
|
:uid="selUserId"
|
|
ref="ref_people"></people>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import 'ol/ol.css'
|
|
import { Map, View } from 'ol'
|
|
import TileLayer from 'ol/layer/Tile.js';
|
|
import ImageLayer from 'ol/layer/Image';
|
|
import { Raster as RasterSource } from 'ol/source';
|
|
import XYZ from 'ol/source/XYZ.js';
|
|
import VectorLayer from 'ol/layer/Vector.js';
|
|
import VectorSource from 'ol/source/Vector.js';
|
|
import GeoJSON from 'ol/format/GeoJSON.js';
|
|
import Point from "ol/geom/Point.js";
|
|
import Feature from "ol/Feature.js";
|
|
import Overlay from 'ol/Overlay';
|
|
import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
|
|
import { getCenter, boundingExtent } from 'ol/extent.js';
|
|
import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
|
|
|
|
import nextTick from 'dai-js/tools/nextTick'
|
|
import { mapGetters } from "vuex";
|
|
import { Loading } from 'element-ui'; //引入Loading服务
|
|
import { requestPost, requestGet } 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";
|
|
import People from "../../basicinfo/people";
|
|
|
|
var centerPointGlobal = [120.664619, 36.504963]
|
|
|
|
let loading;//加载动画
|
|
|
|
let map;
|
|
let mapView;
|
|
let gaodeMapLayer;//背景地图图层
|
|
let parentLayer;//上级组织图层
|
|
let parentSource;//上级组织多边形
|
|
let polygonLayer;//标注图层
|
|
let iconLayer; // icon标注图层
|
|
let iconSource; // icon
|
|
let polygonSource;//标注多边形
|
|
let select;//选中标注
|
|
|
|
let xoffset = 0
|
|
let yoffset = 0
|
|
|
|
|
|
//url图标
|
|
|
|
let iconUrlArray = [
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
|
|
];
|
|
let textColorArray = [
|
|
'rgba(236, 69, 4, 0.66)',
|
|
'rgba(0, 146, 238, 0.75)',
|
|
'rgba(238, 151, 0, 0.8)'
|
|
];
|
|
let polygonColorArray = [
|
|
'rgba(210, 2, 2, 0.24)',
|
|
'rgba(43, 231, 253, 0.25)',
|
|
'rgba(183, 185, 0, 0.16)'
|
|
];
|
|
//标注的文字样式
|
|
var createTextStyle = function (feature) {
|
|
return new Text({
|
|
textAlign: undefined,
|
|
font: "18px Arial",
|
|
//fontFamily: "Courier New, monospace",
|
|
// fontWeight: "bold",
|
|
text: feature.values_.name,
|
|
backgroundFill: new Fill({
|
|
// color: 'rgba(0, 146, 238, 0.75)'
|
|
color: textColorArray[feature.values_.colorIndex]
|
|
}),
|
|
padding: [4, 10, 4, 10],
|
|
//text: "名称",
|
|
fill: new Fill({ color: "#ffffff" }),
|
|
// stroke: new Stroke({ color: "#ffffff", width: 3 }),
|
|
offsetY: -30,
|
|
offsetX: -50,
|
|
overflow: true,
|
|
});
|
|
};
|
|
|
|
//上级组织标注样式
|
|
var parentStyleFunction = (function () {
|
|
return function (feature) {
|
|
return new Style({
|
|
// fill: new Fill({
|
|
// color: [255, 255, 255, 0.3]
|
|
// }),
|
|
stroke: new Stroke({
|
|
color: [0, 103, 182, 1],
|
|
width: 2
|
|
}),
|
|
|
|
// text: createTextStyle(feature)
|
|
});;
|
|
};
|
|
})()
|
|
|
|
|
|
//标注样式
|
|
var polygonStyleFunction = (function () {
|
|
return function (feature) {
|
|
return new Style({
|
|
fill: new Fill({
|
|
// color: [255, 255, 255, 0.3]
|
|
color: polygonColorArray[feature.values_.colorIndex]
|
|
}),
|
|
stroke: new Stroke({
|
|
color: polygonColorArray[feature.values_.colorIndex],
|
|
width: 3
|
|
}),
|
|
|
|
text: createTextStyle(feature)
|
|
});;
|
|
};
|
|
})()
|
|
|
|
//定义颜色转换方法
|
|
let reverseFunc = function (pixelsTemp) {
|
|
//蓝色
|
|
for (var i = 0; i < pixelsTemp.length; i += 4) {
|
|
var r = pixelsTemp[i];
|
|
var g = pixelsTemp[i + 1];
|
|
var b = pixelsTemp[i + 2];
|
|
//运用图像学公式，设置灰度值
|
|
var grey = r * 0.3 + g * 0.59 + b * 0.11;
|
|
//将rgb的值替换为灰度值
|
|
pixelsTemp[i] = grey;
|
|
pixelsTemp[i + 1] = grey;
|
|
pixelsTemp[i + 2] = grey;
|
|
|
|
//基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
|
|
pixelsTemp[i] = 55 - pixelsTemp[i];
|
|
pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
|
|
pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
|
|
}
|
|
};
|
|
|
|
|
|
const vueGis = {
|
|
name: 'HomeMap',
|
|
data () {
|
|
return {
|
|
centerPoint: [],//中心点位置
|
|
zoom: 14,//缩放范围：区14
|
|
minZoom: 1,//最小缩放
|
|
|
|
orgData: {},//当前组织对象
|
|
orgId: '',
|
|
orgLevel: '',
|
|
|
|
subAgencyArray: [],//下拉框数据
|
|
iconCoordinators: [],
|
|
currentCoordinate: null,
|
|
overlay: null,
|
|
|
|
//右侧搜索
|
|
searchName: "",
|
|
|
|
//右侧列表
|
|
infoLoading: true,
|
|
listData: [],//得到的数据
|
|
listDatashow: [],//处理成一行两列的数据
|
|
|
|
//下钻层级记录
|
|
runNum: 0,
|
|
routerArray: [],
|
|
center: [],
|
|
zoom: null,
|
|
parentPolygon: [],
|
|
|
|
centerFlag: 'point',//定义中心点的flag point点 fit 自适应
|
|
|
|
coverageTypesList: [//图层类型。五大图层：zhzl：综合治理图层；yjcl：应急处置图层；aqsc：安全生产图层；csgl：城市管理图层；ggfw：公共服务图层
|
|
{
|
|
select: true,
|
|
label: '综合治理图层',
|
|
value: 'zhzl'
|
|
},
|
|
{
|
|
select: false,
|
|
label: '应急处置图层',
|
|
value: 'yjcl'
|
|
},
|
|
{
|
|
select: false,
|
|
label: '安全生产图层',
|
|
value: 'aqsc'
|
|
},
|
|
{
|
|
select: false,
|
|
label: '城市管理图层',
|
|
value: 'csgl'
|
|
},
|
|
{
|
|
select: false,
|
|
label: '公共服务图层',
|
|
value: 'ggfw'
|
|
},
|
|
],
|
|
categoryList: [],//分类列表
|
|
categoryListshow: [],//处理成一行四列的数据
|
|
|
|
selImg: require('../../../../../assets/img/shuju/xuanzhong.png'),
|
|
noSelImg: require('../../../../../assets/img/shuju/weixuan.png'),
|
|
|
|
coverageTypes: ['zhzl'],
|
|
categoryKeys: [],
|
|
search: '',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
|
|
demand: {
|
|
loading: false,
|
|
colList: [
|
|
{
|
|
align: "center",
|
|
width: "15%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "25%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "60%",
|
|
},
|
|
|
|
],
|
|
header: ["图例", "分类", "名称"],
|
|
list: [],
|
|
pageSize: 50,
|
|
pageNo: 1,
|
|
total: 0,
|
|
},
|
|
|
|
iconUrlArray: {
|
|
|
|
'anzhibangjiao': require('../../../../../assets/img/shuju/fiveLayer/anzhibangjiao.png'),
|
|
'buliangqingshaonian': require('../../../../../assets/img/shuju/fiveLayer/buliangqingshaonian.png'),
|
|
'shequjiaozheng': require('../../../../../assets/img/shuju/fiveLayer/shequjiaozheng.png'),
|
|
'resi_xfry': require('../../../../../assets/img/shuju/fiveLayer/resi_xfry.png'),
|
|
'xidurenyuan': require('../../../../../assets/img/shuju/fiveLayer/xidurenyuan.png'),
|
|
'xiejiaorenyuan': require('../../../../../assets/img/shuju/fiveLayer/xiejiaorenyuan.png'),
|
|
'zhaoshizhaohuojingshenbing': require('../../../../../assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png'),
|
|
|
|
|
|
'yjdw': require('../../../../../assets/img/shuju/fiveLayer/yjdw.png'),
|
|
'sr_gy': require('../../../../../assets/img/shuju/fiveLayer/sr_gy.png'),
|
|
'sr_gc': require('../../../../../assets/img/shuju/fiveLayer/sr_gc.png'),
|
|
'whdw': require('../../../../../assets/img/shuju/fiveLayer/whdw.png'),
|
|
'sr_ggld': require('../../../../../assets/img/shuju/fiveLayer/sr_ggld.png'),
|
|
'lwh': require('../../../../../assets/img/shuju/fiveLayer/lwh.png'),
|
|
'sr_tyc': require('../../../../../assets/img/shuju/fiveLayer/sr_tyc.png'),
|
|
'lyjlb': require('../../../../../assets/img/shuju/fiveLayer/lyjlb.png'),
|
|
'sr_yjy': require('../../../../../assets/img/shuju/fiveLayer/sr_yjy.png'),
|
|
'zaxld': require('../../../../../assets/img/shuju/fiveLayer/zaxld.png'),
|
|
'other': require('../../../../../assets/img/shuju/fiveLayer/other.png'),
|
|
'sr_jzz': require('../../../../../assets/img/shuju/fiveLayer/sr_jzz.png'),
|
|
'sr_djc': require('../../../../../assets/img/shuju/fiveLayer/sr_djc.png'),
|
|
'sr_rfqck': require('../../../../../assets/img/shuju/fiveLayer/sr_rfqck.png'),
|
|
'ep_lg': require('../../../../../assets/img/shuju/fiveLayer/ep_lg.png'),
|
|
'sr_xfz': require('../../../../../assets/img/shuju/fiveLayer/sr_xfz.png'),
|
|
'pu_jgzsbm': require('../../../../../assets/img/shuju/fiveLayer/pu_jgzsbm.png'),
|
|
|
|
'gr_czw': require('../../../../../assets/img/shuju/fiveLayer/gr_czw.png'),
|
|
'ep_cycs': require('../../../../../assets/img/shuju/fiveLayer/ep_cycs.png'),
|
|
'dc_jyz': require('../../../../../assets/img/shuju/fiveLayer/dc_jyz.png'),
|
|
'ep_gwylcs': require('../../../../../assets/img/shuju/fiveLayer/ep_gwylcs.png'),
|
|
'dc_jqz': require('../../../../../assets/img/shuju/fiveLayer/dc_jqz.png'),
|
|
'dc_whpdw': require('../../../../../assets/img/shuju/fiveLayer/dc_whpdw.png'),
|
|
'ep_wb': require('../../../../../assets/img/shuju/fiveLayer/ep_wb.png'),
|
|
'ep_mrxycs': require('../../../../../assets/img/shuju/fiveLayer/ep_mrxycs.png'),
|
|
'dc_yqhjz': require('../../../../../assets/img/shuju/fiveLayer/dc_yqhjz.png'),
|
|
'dc_jzgd': require('../../../../../assets/img/shuju/fiveLayer/dc_jzgd.png'),
|
|
'ep_scjgqy': require('../../../../../assets/img/shuju/fiveLayer/ep_scjgqy.png'),
|
|
|
|
'cm_nmsc': require('../../../../../assets/img/shuju/fiveLayer/cm_nmsc.png'),
|
|
'event_tdnd': require('../../../../../assets/img/shuju/fiveLayer/event_tdnd.png'),
|
|
'cm_bhsc': require('../../../../../assets/img/shuju/fiveLayer/cm_bhsc.png'),
|
|
'cm_cjsc': require('../../../../../assets/img/shuju/fiveLayer/cm_cjsc.png'),
|
|
'ep_lssd': require('../../../../../assets/img/shuju/fiveLayer/ep_lssd.png'),
|
|
|
|
|
|
'resi_szry': require('../../../../../assets/img/shuju/fiveLayer/resi_szry.png'),
|
|
'ps_lyy': require('../../../../../assets/img/shuju/fiveLayer/ps_lyy.png'),
|
|
'resi_snry': require('../../../../../assets/img/shuju/fiveLayer/resi_snry.png'),
|
|
'ps_mzb': require('../../../../../assets/img/shuju/fiveLayer/ps_mzb.png'),
|
|
'ps_zs': require('../../../../../assets/img/shuju/fiveLayer/ps_zs.png'),
|
|
'ps_wss': require('../../../../../assets/img/shuju/fiveLayer/ps_wss.png'),
|
|
'ps_jjz': require('../../../../../assets/img/shuju/fiveLayer/ps_jjz.png'),
|
|
'ep_xx': require('../../../../../assets/img/shuju/fiveLayer/ep_xx.png'),
|
|
'ep_yy': require('../../../../../assets/img/shuju/fiveLayer/ep_yy.png'),
|
|
|
|
},
|
|
iconArrays: [],
|
|
overlay: null,
|
|
showPopup: false,
|
|
|
|
selPlaceType: '',
|
|
selInfo: {},
|
|
selUserId: '',
|
|
showPeopleInfo: false
|
|
|
|
}
|
|
},
|
|
async mounted () {
|
|
|
|
//加载组织数据
|
|
await this.loadOrgData()
|
|
|
|
//初始化地图
|
|
this.initMap()
|
|
|
|
await nextTick(300)
|
|
this.addParentLayer()
|
|
this.loadParentPolygon()
|
|
//添加标注图层
|
|
this.addPolygonLayer()
|
|
|
|
//添加icontuceng
|
|
this.addIconLayer()
|
|
|
|
//加载当前园区的标注
|
|
this.loadPolygon(this.subAgencyArray)
|
|
|
|
|
|
this.setMapLocation()
|
|
await this.loadCategoryList()
|
|
this.getTable();
|
|
await this.getMapTable();
|
|
|
|
|
|
//初始化icon图层
|
|
this.addOverlay()
|
|
|
|
this.addMapClick()
|
|
|
|
},
|
|
methods: {
|
|
|
|
toPeople () {
|
|
this.showPeopleInfo = true
|
|
},
|
|
|
|
//添加覆盖层
|
|
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)
|
|
_that.clickMapVolunteer(feature.values_.properties.info)
|
|
|
|
}
|
|
|
|
});
|
|
},
|
|
|
|
//点击项目
|
|
async clickMapVolunteer (info) {
|
|
|
|
if (!info.id) {
|
|
return false
|
|
}
|
|
if (!info.latitude || !info.longitude) {
|
|
this.$message.warning("请先完善坐标位置")
|
|
return false
|
|
}
|
|
this.selPlaceType = info.placeType
|
|
if (info.placeType === 'resi' || info.placeType === 'special_resi') {//综合治理图层和公共服务图层中的失能人员、失智人员
|
|
// info.id = "dd0bd55db0ca4b629c40bc914a08368e"
|
|
this.selUserId = info.id
|
|
this.loadResi(info)
|
|
}
|
|
if (info.placeType === 'public_service') {//公共服务图层
|
|
this.loadPublicService(info)
|
|
}
|
|
if (info.placeType === 'dangerous_chemicals') {//重点危化品企业
|
|
this.loadDangerousChemicals(info)
|
|
}
|
|
if (info.placeType === 'event') {//难点痛点
|
|
this.loadEvent(info)
|
|
}
|
|
if (info.placeType === 'city_management') {//城市管理图层
|
|
this.loadCityManagement(info)
|
|
}
|
|
if (info.placeType === 'community_org') {//社区自组织
|
|
this.loadCommunityOrg(info)
|
|
}
|
|
if (info.placeType === 'superior_resource') {//优势资源
|
|
this.loadSuperiorResource(info)
|
|
}
|
|
if (info.placeType === 'group_rent') {//群租房
|
|
this.loadGroupRent(info)
|
|
}
|
|
|
|
|
|
if (info.placeType === 'party_unit') {//来自联建单位的机关直属部门
|
|
this.loadPartyUnit(info)
|
|
}
|
|
if (info.placeType === 'enterprise_patrol') {//来自企事业查询的
|
|
this.loadEnterprisePartrol(info)
|
|
}
|
|
|
|
|
|
},
|
|
|
|
async loadResi (info) {
|
|
const url = "/epmetuser/icresiuser/resi-brief/" + info.id
|
|
// 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.icUserName = data.icUserName ? data.icUserName : '--'
|
|
data.gridName = data.gridName ? data.gridName : '--'
|
|
data.villageName = data.villageName ? data.villageName : '--'
|
|
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' ? '女' : '男' : '--'
|
|
if (data.rhzk === 'rhyz') {
|
|
data.rhzkShow = '人户一致'
|
|
} else if (data.rhzk === 'rzhbz') {
|
|
data.rhzkShow = '人在户不在'
|
|
} else if (data.rhzk === 'hzrbz') {
|
|
data.rhzkShow = '户在人不在'
|
|
} else {
|
|
data.rhzkShow = '--'
|
|
}
|
|
|
|
let categoriesArray = []
|
|
|
|
for (let key in data.volunteerCategories) {
|
|
categoriesArray.push(data.volunteerCategories[key])
|
|
|
|
}
|
|
|
|
if (categoriesArray.length > 0) {
|
|
data.categories = categoriesArray.join(',')
|
|
} else {
|
|
data.categories = '--'
|
|
}
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
|
|
this.handleShowPopup(coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
async loadPublicService (info) {
|
|
const url = "/gov/org/icPublicService/detail"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail"
|
|
|
|
let params = {
|
|
icPublicServiceId: info.id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
data.name = data.name ? data.name : '--'
|
|
data.categoryName = data.categoryName ? data.categoryName : '--'
|
|
data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
|
|
data.capacity = data.capacity ? data.capacity : '--'
|
|
data.address = data.address ? data.address : '--'
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
|
|
|
|
this.handleShowPopup(coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
async loadEvent (info) {
|
|
const url = "/gov/project/icEvent/detail";
|
|
//const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId;
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
icEventId: info.id,
|
|
});
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
|
|
this.handleShowPopup(coordinate)
|
|
|
|
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
async loadDangerousChemicals (info) {
|
|
const url = "/gov/org/icDangerousChemicals/detail"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icDangerousChemicals/detail"
|
|
|
|
let params = {
|
|
icSuperiorResourceId: info.id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
data.name = data.name ? data.name : '--'
|
|
data.categoryName = data.categoryName ? data.categoryName : '--'
|
|
data.safeDistance = data.safeDistance ? data.safeDistance : '--'
|
|
data.dangerTypeName = data.dangerTypeName ? data.dangerTypeName : '--'
|
|
data.principalName = data.principalName ? data.principalName : '--'
|
|
data.principalMobile = data.principalMobile ? data.principalMobile : '--'
|
|
data.address = data.address ? data.address : '--'
|
|
data.remark = data.remark ? data.remark : '--'
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
|
|
|
|
this.handleShowPopup(coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
async loadCityManagement (info) {
|
|
const url = "/gov/org/icCityManagement/detail"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icCityManagement/detail"
|
|
|
|
let params = {
|
|
icCityManagementId: info.id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
data.name = data.name ? data.name : '--'
|
|
data.categoryName = data.categoryName ? data.categoryName : '--'
|
|
data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
|
|
data.capacity = data.capacity ? data.capacity : '--'
|
|
data.address = data.address ? data.address : '--'
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
|
|
|
|
this.handleShowPopup(coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
async loadCommunityOrg (info) {
|
|
// const url = "/gov/org/icCityManagement/detail"
|
|
const url = "/heart/iccommunityselforganization/community-self-org-detail/" + info.id
|
|
|
|
let params = {}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
data.orgPersonArray = []
|
|
data.organizationPersonnel.forEach(element => {
|
|
let orgPersonnel = element.personName + "(" + element.personPhone + ")"
|
|
data.orgPersonArray.push(orgPersonnel)
|
|
});
|
|
|
|
data.organizationPersonnelShow = data.orgPersonArray.join(",")
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
|
|
|
|
this.handleShowPopup(coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
async loadSuperiorResource (info) {
|
|
const url = "/gov/org/icSuperiorResource/detail"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icSuperiorResource/detail"
|
|
|
|
let params = {
|
|
icSuperiorResourceId: info.id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
data.name = data.name ? data.name : '--'
|
|
data.categoryName = data.categoryName ? data.categoryName : '--'
|
|
data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
|
|
data.capacity = data.capacity ? data.capacity : '--'
|
|
data.address = data.address ? data.address : '--'
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
|
|
|
|
this.handleShowPopup(coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
async loadEnterprisePartrol (info) {
|
|
const url = "/gov/org/enterprise/detail/" + info.id
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/enterprise/detail"
|
|
|
|
const { data, code, msg } = await requestPost(url)
|
|
|
|
if (code === 0) {
|
|
// debugger
|
|
let coordinate = [info.longitude, info.latitude]
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
this.handleShowPopup(coordinate)
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async loadGroupRent (info) {
|
|
const url = "/gov/org/ichouse/" + info.id
|
|
|
|
const { data, code, msg } = await requestGet(url)
|
|
|
|
if (code === 0) {
|
|
// debugger
|
|
let coordinate = [info.longitude, info.latitude]
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
this.handleShowPopup(coordinate)
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async loadPartyUnit (info) {
|
|
const url = '/heart/icpartyunit/detail'
|
|
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail'
|
|
let params = {
|
|
id: info.id
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
let coordinate = [info.longitude, info.latitude]
|
|
if (!data.serviceMatterList || !Array.isArray(data.serviceMatterList)) {
|
|
data.serviceMatterList = []
|
|
} else {
|
|
data.serviceMatterListShow = data.serviceMatterNameList.join(',')
|
|
}
|
|
|
|
this.selInfo = JSON.parse(JSON.stringify(data))
|
|
this.handleShowPopup(coordinate)
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
|
|
handleShowPopup (coordinate) {
|
|
|
|
// 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;
|
|
},
|
|
|
|
//点击图层
|
|
async handleClickCoverage (index) {
|
|
this.demand.pageNo = 1
|
|
this.coverageTypesList[index].select = !this.coverageTypesList[index].select
|
|
let item = this.coverageTypesList[index]
|
|
|
|
this.$set(this.coverageTypesList, index, item)
|
|
|
|
this.coverageTypes = []
|
|
|
|
this.coverageTypesList.forEach(element => {
|
|
if (element.select) {
|
|
this.coverageTypes.push(element.value)
|
|
}
|
|
});
|
|
|
|
await this.loadCategoryList()
|
|
this.getTable();
|
|
this.getMapTable();
|
|
},
|
|
|
|
//点击类别
|
|
async handleClickCategory (index, colIndex) {
|
|
this.demand.pageNo = 1
|
|
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 () {
|
|
this.demand.pageNo = 1
|
|
this.getTable();
|
|
this.getMapTable();
|
|
},
|
|
//
|
|
handleClickRow (index) {
|
|
let selData = this.tableList[index]
|
|
if (selData.longitude && selData.latitude) {
|
|
mapView.setCenter([selData.longitude, selData.latitude]);
|
|
}
|
|
|
|
this.clickMapVolunteer(selData)
|
|
|
|
// alert(index)
|
|
},
|
|
|
|
handlePageNoChange_demand (val) {
|
|
this.demand.pageNo = val;
|
|
this.getTable();
|
|
},
|
|
|
|
async loadCategoryList () {
|
|
const url = "/gov/org/coverage/categoryList"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/categoryList"
|
|
let params = {
|
|
coverageTypes: this.coverageTypes,
|
|
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.categoryList = data
|
|
|
|
this.categoryKeys = []
|
|
|
|
this.categoryListshow = []
|
|
let itemArray = []
|
|
|
|
this.categoryList.forEach((item, index) => {
|
|
|
|
item.dataIcon = this.iconUrlArray[item.categoryKey]
|
|
|
|
|
|
item.sel = true
|
|
this.categoryKeys.push(item.categoryKey)
|
|
|
|
});
|
|
|
|
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 {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getTable () {
|
|
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.demand.list = data.list
|
|
this.demand.list.forEach(item => {
|
|
item.imgObj = {
|
|
type: 'img',
|
|
src: this.iconUrlArray[item.categoryKey]
|
|
}
|
|
});
|
|
|
|
|
|
this.demand.list = this.demand.list.map((item) => {
|
|
return [
|
|
// item.categoryKey ? item.categoryKey : '--',
|
|
|
|
item.imgObj,
|
|
item.categoryName,
|
|
item.content ? item.content : '',
|
|
|
|
];
|
|
});
|
|
console.log(this.demand.list)
|
|
} 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,
|
|
// pageNo: 1,
|
|
// pageSize: 2000,
|
|
isPage: false
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
|
|
this.demand.total = data.total;
|
|
|
|
this.iconArrays = data.list
|
|
|
|
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) {
|
|
|
|
//加载组织数据
|
|
await this.loadOrgData()
|
|
|
|
//绘制父级组织数据
|
|
this.loadParentPolygon()
|
|
//绘制本级组织数据
|
|
this.loadPolygon(this.subAgencyArray)
|
|
|
|
//重置地图中心点
|
|
|
|
// if (isRefreshView) {
|
|
// this.setMapLocation()
|
|
|
|
// }
|
|
|
|
await this.getTable(false);
|
|
|
|
},
|
|
|
|
//设置地图定位的中心点和缩放级别
|
|
setMapLocation () {
|
|
if (!this.zoom) {
|
|
this.setZoom(this.orgData.agencyLevel)
|
|
}
|
|
this.centerPoint = []
|
|
|
|
|
|
//如果存在中心点（返回时赋值）
|
|
if (this.center && this.center.length > 0) {
|
|
this.centerPoint = this.center
|
|
this.centerFlag = 'point'
|
|
this.center = []
|
|
|
|
} else if (parentLayer.getSource().getFeatures()[0]) {//如果是初次进入，不存在下级组织，用父级组织
|
|
this.centerFlag = 'flag_parent'
|
|
|
|
|
|
} else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织
|
|
this.centerFlag = 'flag_polygon'
|
|
|
|
} else if (this.orgData.longitude && this.orgData.latitude) {
|
|
this.centerPoint.push(this.orgData.longitude)
|
|
this.centerPoint.push(this.orgData.latitude)
|
|
this.centerFlag = 'point'
|
|
|
|
} else {
|
|
this.centerPoint = centerPointGlobal
|
|
this.centerFlag = 'point'
|
|
}
|
|
// debugger
|
|
if (this.centerFlag === 'flag_parent') {
|
|
let parentFeatures = parentLayer.getSource().getFeatures()[0]
|
|
let polygon = parentFeatures.getGeometry();
|
|
map.getView().fit(polygon, map.getSize());
|
|
this.zoom = map.getView().getZoom() - 1
|
|
|
|
} else if (this.centerFlag === 'flag_polygon') {
|
|
let polygonFeatures = polygonLayer.getSource().getFeatures()[0]
|
|
let polygon = polygonFeatures.getGeometry();
|
|
map.getView().fit(polygon, map.getSize());
|
|
this.zoom = map.getView().getZoom() - 1
|
|
|
|
} else {
|
|
mapView.setCenter(this.centerPoint);
|
|
|
|
}
|
|
mapView.setZoom(this.zoom);
|
|
|
|
},
|
|
|
|
//返回所选组织
|
|
handleClickRouter (index) {
|
|
|
|
this.showPeopleInfo = false
|
|
|
|
|
|
|
|
},
|
|
|
|
//加载组织数据
|
|
async loadOrgData () {
|
|
|
|
const url = "/gov/org/agency/maporg"
|
|
let params = {
|
|
orgId: this.orgId,
|
|
level: this.orgLevel
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
|
|
this.orgData = data
|
|
this.orgId = this.orgData.id
|
|
this.orgLevel = this.orgData.level
|
|
this.parentPolygon = []
|
|
this.parentPolygon.push(data)
|
|
if (data.children && data.children.length > 0) {
|
|
this.subAgencyArray = data.children
|
|
} else {
|
|
this.subAgencyArray = []
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
//加载父级组织多边形
|
|
loadParentPolygon () {
|
|
parentSource.clear()//清空标注
|
|
|
|
let featureData = []//标注数据
|
|
if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注
|
|
let oneData = {}
|
|
|
|
this.parentPolygon.forEach(agencyItem => {
|
|
|
|
if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
|
|
oneData = {
|
|
type: 'Feature',
|
|
id: agencyItem.id,
|
|
properties: {
|
|
id: agencyItem.id,
|
|
level: agencyItem.level,
|
|
name: agencyItem.name
|
|
},
|
|
geometry: {
|
|
type: 'Polygon',
|
|
coordinates: [],
|
|
},
|
|
}
|
|
let coorArray = agencyItem.coordinates.split(',')//坐标数组
|
|
|
|
let itemArray = []//单个点位的[lon,lat]，数组
|
|
let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
|
|
|
|
coorArray.forEach((item, index) => {
|
|
|
|
if (index % 2 == 0) {//偶
|
|
item = (parseFloat(item) + parseFloat(xoffset)) + ''
|
|
itemArray.push(item)
|
|
} else {//奇
|
|
item = (parseFloat(item) + parseFloat(yoffset)) + ''
|
|
itemArray.push(item)
|
|
|
|
polygonArray.push(itemArray)
|
|
itemArray = []
|
|
}
|
|
|
|
});
|
|
oneData.geometry.coordinates.push(polygonArray)
|
|
featureData.push(oneData)
|
|
}
|
|
});
|
|
}
|
|
|
|
if (featureData && featureData.length > 0) {
|
|
var geojsonObject = {
|
|
'type': 'FeatureCollection',
|
|
'features': featureData
|
|
};
|
|
let feature = (new GeoJSON()).readFeatures(geojsonObject)
|
|
parentSource.addFeatures(feature)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//加载当前园区的标注
|
|
loadPolygon (subAgencyArray) {
|
|
polygonSource.clear()//清空多边形标注
|
|
iconSource.clear()//清空多边形标注
|
|
|
|
let featureData = []//标注数据
|
|
if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
|
|
let oneData = {}
|
|
|
|
let count = 0
|
|
for (let i = 0; i < subAgencyArray.length; i++) {
|
|
const agencyItem = subAgencyArray[i]
|
|
|
|
|
|
if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
|
|
let urlNum = count % 3
|
|
count++
|
|
|
|
oneData = {
|
|
type: 'Feature',
|
|
id: agencyItem.id,
|
|
properties: {
|
|
id: agencyItem.id,
|
|
level: agencyItem.level,
|
|
name: agencyItem.name,
|
|
colorIndex: urlNum//颜色随机的索引
|
|
},
|
|
geometry: {
|
|
type: 'Polygon',
|
|
coordinates: [],
|
|
},
|
|
}
|
|
let coorArray = agencyItem.coordinates.split(',')//坐标数组
|
|
|
|
let itemArray = []//单个点位的[lon,lat]，数组
|
|
let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
|
|
|
|
coorArray.forEach((item, index) => {
|
|
// itemArray.push(item)
|
|
if (index % 2 == 0) {//偶
|
|
item = (parseFloat(item) + parseFloat(xoffset)) + ''
|
|
itemArray.push(item)
|
|
|
|
} else {//奇
|
|
|
|
item = (parseFloat(item) + parseFloat(yoffset)) + ''
|
|
itemArray.push(item)
|
|
polygonArray.push(itemArray)
|
|
itemArray = []
|
|
}
|
|
|
|
});
|
|
oneData.geometry.coordinates.push(polygonArray)
|
|
featureData.push(oneData)
|
|
}
|
|
}
|
|
}
|
|
|
|
if (featureData && featureData.length > 0) {
|
|
var geojsonObject = {
|
|
'type': 'FeatureCollection',
|
|
'features': featureData
|
|
};
|
|
let feature = (new GeoJSON()).readFeatures(geojsonObject)
|
|
// console.log(geojsonObject)
|
|
|
|
polygonSource.addFeatures(feature)
|
|
|
|
let iconFeatures = [];
|
|
feature.forEach(oneIcon => {
|
|
var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
|
|
// var center = getCenter(extent); //获取边界区域的中心位置
|
|
//添加标注
|
|
let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
|
|
let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
|
|
|
|
let oneArray = [x, y]
|
|
this.iconCoordinators.push(oneArray)
|
|
// debugger
|
|
//地图icon样式
|
|
let oneCctv = new Feature({
|
|
geometry: new Point([x, y]),
|
|
id: oneIcon.id_,
|
|
properties: {
|
|
type: "icon",
|
|
id: oneIcon.id_
|
|
}
|
|
});
|
|
|
|
let iconStyle = new Style({
|
|
image: new Icon({
|
|
// anchor: [0.5, 0.5],
|
|
// imgSize: [32, 32],
|
|
scale: 0.5,
|
|
// src: "/img/largeScreen/icon_camra.png"
|
|
// src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png"
|
|
src: iconUrlArray[oneIcon.values_.colorIndex]
|
|
})
|
|
});
|
|
|
|
oneCctv.setStyle(iconStyle);
|
|
iconFeatures.push(oneCctv);
|
|
|
|
});
|
|
|
|
iconSource.addFeatures(iconFeatures);
|
|
}
|
|
|
|
},
|
|
|
|
//根据组织层级设置缩放级别
|
|
setZoom (agencyLevel) {
|
|
if (agencyLevel === 'district') {
|
|
this.zoom = 12
|
|
} else if (agencyLevel === 'street') {
|
|
this.zoom = 13
|
|
} else if (agencyLevel === 'community') {
|
|
this.zoom = 14
|
|
} else {
|
|
this.zoom = 11
|
|
}
|
|
|
|
},
|
|
|
|
firstCenterMap () {
|
|
this.centerPoint = []
|
|
if (this.orgData.longitude && this.orgData.latitude) {
|
|
this.centerPoint.push(this.orgData.longitude)
|
|
this.centerPoint.push(this.orgData.latitude)
|
|
|
|
} else {
|
|
this.centerPoint = centerPointGlobal
|
|
}
|
|
|
|
if (!this.zoom) {
|
|
this.setZoom(this.orgData.agencyLevel)
|
|
}
|
|
},
|
|
|
|
initMap () {
|
|
this.firstCenterMap()
|
|
|
|
gaodeMapLayer = new TileLayer({
|
|
title: "地图",
|
|
source: new XYZ({
|
|
//指定url瓦片
|
|
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
|
|
wrapX: true//x方向平铺，也可以选择false
|
|
}),
|
|
zIndex: 20,
|
|
crossOrigin: 'anonymous'
|
|
});
|
|
|
|
|
|
|
|
|
|
mapView = new View({
|
|
//中心点坐标
|
|
center: this.centerPoint,
|
|
// projection: 'EPSG:3857',
|
|
projection: 'EPSG:4326',
|
|
zoom: this.zoom,
|
|
minZoom: this.minZoom
|
|
})
|
|
|
|
//初始化map和地图底图
|
|
//创建地图容器
|
|
map = new Map({
|
|
layers: [gaodeMapLayer],
|
|
//加载瓦片图层数据
|
|
view: mapView,
|
|
target: 'map'
|
|
//目标加载到map中
|
|
})
|
|
|
|
|
|
//去除双击放大效果
|
|
const dblClickInteraction = map
|
|
.getInteractions()
|
|
.getArray()
|
|
.find(interaction => {
|
|
return interaction instanceof DoubleClickZoom;
|
|
});
|
|
map.removeInteraction(dblClickInteraction);
|
|
|
|
|
|
|
|
},
|
|
//添加标注图层
|
|
addParentLayer () {
|
|
parentSource = new VectorSource({
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject)
|
|
});
|
|
|
|
parentLayer = new VectorLayer({
|
|
source: parentSource,
|
|
style: parentStyleFunction,
|
|
zIndex: 50
|
|
});
|
|
|
|
|
|
map.addLayer(parentLayer)
|
|
|
|
|
|
},
|
|
|
|
//添加标注图层
|
|
addPolygonLayer () {
|
|
polygonSource = new VectorSource({
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject)
|
|
});
|
|
|
|
polygonLayer = new VectorLayer({
|
|
source: polygonSource,
|
|
style: polygonStyleFunction,
|
|
zIndex: 50
|
|
});
|
|
|
|
//选中多边形后的样式
|
|
var overlayStyle = (function () {
|
|
|
|
return function (feature) {
|
|
var styles = {};
|
|
styles['Polygon'] = [
|
|
new Style({
|
|
stroke: new Stroke({
|
|
color: '#ec9000',
|
|
width: 2
|
|
})
|
|
}),
|
|
|
|
new Style({
|
|
fill: new Fill({
|
|
color: 'rgba(0, 0, 255, 0.1)'
|
|
})
|
|
}),
|
|
new Style({
|
|
text: createTextStyle(feature)
|
|
})
|
|
];
|
|
styles['MultiPolygon'] = styles['Polygon'];
|
|
return styles[feature.getGeometry().getType()];
|
|
};
|
|
})();
|
|
|
|
select = new Select({
|
|
style: overlayStyle
|
|
});
|
|
|
|
|
|
map.addLayer(polygonLayer)
|
|
// map.addInteraction(select);
|
|
|
|
// select.on('select', e => {
|
|
|
|
// });
|
|
|
|
},
|
|
|
|
addIconLayer () {
|
|
iconSource = new VectorSource({
|
|
//features: (new GeoJSON()).readFeatures(geojsonObject)
|
|
});
|
|
|
|
iconLayer = new VectorLayer({
|
|
source: iconSource,
|
|
zIndex: 70
|
|
});
|
|
|
|
map.addLayer(iconLayer);
|
|
|
|
},
|
|
|
|
//开启加载动画
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, //是否锁定
|
|
text: '正在加载……', //加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' //背景颜色
|
|
});
|
|
|
|
},
|
|
|
|
//结束加载动画
|
|
endLoading () {
|
|
//clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
},
|
|
},
|
|
props: {
|
|
|
|
// vueFlag: {
|
|
// type: String,
|
|
// default: "alarm"
|
|
// }
|
|
},
|
|
computed: {
|
|
|
|
mapHeight () {
|
|
|
|
return this.clientHeight - 120;
|
|
|
|
},
|
|
// zoom: {
|
|
// get () {
|
|
// //根据不同屏幕分辨率，控制zoom大小
|
|
// if (this.clientHeight < 900) {
|
|
// return 2.3
|
|
// } else {
|
|
// return 2.8
|
|
// }
|
|
// },
|
|
// set (value) {
|
|
// }
|
|
// },
|
|
...mapGetters(["clientHeight"])
|
|
|
|
},
|
|
components: { cptTb, cptCard, ScreenLoading, People },
|
|
}
|
|
export default vueGis;
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/fiveLayerMap.scss"
|
|
scoped
|
|
></style>
|
|
|
|
<style lang="scss" >
|
|
.div_content {
|
|
.ol-viewport {
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
.ol-overlaycontainer-stopevent {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.popTitle {
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.info-prop {
|
|
position: relative;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
padding-left: 15px;
|
|
font-size: 12px;
|
|
|
|
.info-pics {
|
|
display: flex;
|
|
margin: 10px 0;
|
|
img {
|
|
display: block;
|
|
width: 32%;
|
|
height: 90px;
|
|
margin-right: 9px;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
> span,
|
|
> div {
|
|
display: block;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
.popContentTitle {
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.div_resi_more {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.span_resi_more {
|
|
font-size: 16px;
|
|
text-decoration: underline;
|
|
}
|
|
.span_resi_more:hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" >
|
|
.div_search_list {
|
|
.el-input__inner[WarningColor="warning"] {
|
|
border-radius: 8px 0 0 8px;
|
|
height: 48px;
|
|
background-color: #01106800;
|
|
border: 0px solid #0082fb;
|
|
padding: 0 0 0 70px;
|
|
font-size: 18px;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
.el-input__inner {
|
|
&::placeholder {
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|