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.
1170 lines
35 KiB
1170 lines
35 KiB
<template> |
|
<!-- :style="{ width: aWidth + 'px', height: aHeight + 'px' }" |
|
:style="{ |
|
transform: `translate(-${translateX}px, -${translateY}px)`, |
|
}" --> |
|
<div class="amap-wai"> |
|
<div class="amap-box" :id="amapId"></div> |
|
<div class="custom-info" v-show="isShowInfo"> |
|
<div class="custom"> |
|
<div class="title_info"> |
|
<div class="title_name">{{ title }}</div> |
|
<div class="title_num"> |
|
<div style="color: #fff">已上报</div> |
|
<div class="sb_num_txt"> |
|
<span style="font-size: 28px; margin: 0 5px">{{ total }}</span |
|
>件 |
|
</div> |
|
</div> |
|
</div> |
|
<div class="con_info"> |
|
<!-- <el-table :data="listData" class="info_table" height="80%"> |
|
<el-table-column align="center" prop="firstRegTime" label="初登日期"> |
|
<template slot-scope="scope">{{scope.row.firstRegTime.slice(0,-9)}}</template> |
|
</el-table-column> |
|
<el-table-column align="center" prop="disputeName" show-overflow-tooltip label="诉求类型"></el-table-column> |
|
<el-table-column align="center" prop="username" label="来访人姓名"></el-table-column> |
|
</el-table> --> |
|
<div class="con_info_top"> |
|
<div class="con_tit">初登日期 </div> |
|
<span class="line_tit">|</span> |
|
<div class="con_tit">诉求类型</div> |
|
<span class="line_tit">|</span> |
|
<div class="con_tit">来访人姓名</div> |
|
<span class="line_tit">|</span> |
|
<div class="con_tit">越级级别</div> |
|
</div> |
|
<div |
|
class="con_info_con" |
|
v-infinite-scroll="load" |
|
:infinite-scroll-disabled="isDisabled" |
|
infinite-scroll-immediate="false" |
|
style="overflow: auto" |
|
> |
|
<div class="con_item" v-for="item in listData" :key="item.username"> |
|
<div class="item_txt"> |
|
{{ item.firstRegTime ? item.firstRegTime.slice(0, -9) : "" }} |
|
</div> |
|
<div class="item_txt"> |
|
<el-tooltip effect="dark" :content="item.disputeName" placement="top"> |
|
<div> |
|
{{ |
|
item.disputeName |
|
? item.disputeName.length > 5 |
|
? item.disputeName.slice(0, 5) + "..." |
|
: item.disputeName |
|
: "" |
|
}} |
|
</div> |
|
</el-tooltip> |
|
</div> |
|
<div class="item_txt"> |
|
<el-tooltip effect="dark" :content="item.username" placement="top"> |
|
<div> |
|
{{ |
|
item.username |
|
? item.username.length > 5 |
|
? item.username.slice(0, 5) + "..." |
|
: item.username |
|
: "" |
|
}} |
|
</div> |
|
</el-tooltip> |
|
</div> |
|
<div class="item_txt" :class="item.skipGrantLevel == 0 ? 'center' : item.skipGrantLevel == 1 ? 'pro' : item.skipGrantLevel == 2 ? 'city' : item.skipGrantLevel == 3 ? 'district' : ''"> |
|
{{ item.skipGrantLevel ? item.skipGrantLevel == 0 ? '中央' : item.skipGrantLevel == 1 ? '省级' : item.skipGrantLevel == 2 ? '市级' : item.skipGrantLevel == 0 ? '区县' : '' : '' }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="cancel" @click="closeInfo1"> |
|
<img src="@/assets/img/cancel.png" alt="" /> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
let communityData = []; |
|
|
|
import AMapLoader from "@amap/amap-jsapi-loader"; |
|
import { getZoom, callFuncInMain, ifIframe } from "@/libs/util"; |
|
import { queryImmediateList, getStreetList } from "@/api/home"; |
|
import { |
|
mapView1, |
|
mapView2, |
|
createAMap, |
|
addJiaozhouMaker, |
|
addQingdao, |
|
addJiaozhou, |
|
addJiedao, |
|
addNullJiedao, |
|
addWangge3, |
|
addWangge4, |
|
addJiaozhouTexts, |
|
addQingDaoTexts, |
|
addWanggeMakers, |
|
addWangge31, |
|
addWangge41, |
|
resetGroup3Style, |
|
resetGroup4Style, |
|
hideWanggeAll, |
|
resetGroup2Style, |
|
deleteWanggeAll, |
|
addJiaozhouLabelMarker, |
|
deleteWangge2, |
|
addShequ, |
|
} from "@/libs/amap"; |
|
import { |
|
selectedWanggeLevel$, |
|
selectedJiaozhou$, |
|
selectedStreet$, |
|
selectedWangge3$, |
|
selectedWangge4$, |
|
hotMapType$, |
|
selectedModelInfo$, |
|
} from "@/subjects/sub"; |
|
import { Divider } from "element-ui"; |
|
|
|
export default { |
|
name: "index", |
|
props: { |
|
reliData: Array, |
|
active: Number, |
|
timePicker:Array, |
|
timeFrame:Number |
|
}, |
|
data() { |
|
return { |
|
listData: [], |
|
streetData: [], |
|
amapId: !ifIframe() ? "amap-id-click" : "amap-id", |
|
aWidth: 1920, |
|
aHeight: 1080, |
|
|
|
winWidth: 1920, |
|
winHeight: 1080, |
|
|
|
translateX: 0, |
|
translateY: 0, |
|
amap: null, |
|
ob: null, |
|
ob1: null, |
|
rankList: {}, |
|
rankData: {}, |
|
markersArr: [], |
|
total: "", |
|
pointMarker:[ |
|
{name:"胶东国际机场",position:[120.093607,36.35991],right:-35}, |
|
// {name:"上合示范区",position:[120.098588,36.168966],right:-30}, |
|
{name:"大沽河旅游度假区",position:[120.084662,36.251657],right:-55}, |
|
], |
|
markers: [ |
|
{ |
|
name: "洋河镇", |
|
position: [119.945718, 36.136799], //洋河镇 |
|
offset: [-100, -60], |
|
}, |
|
{ |
|
name: "铺集镇", |
|
position: [119.726968, 36.126774], //铺集镇 |
|
offset: [-80, -120], |
|
}, |
|
{ |
|
name: "里岔镇", |
|
position: [119.788636, 36.070297], //里岔镇 |
|
offset: [20, -150], |
|
}, |
|
{ |
|
name: "胶西街道", |
|
position: [119.920687, 36.26026], //胶西街道 |
|
offset: [-80, -80], |
|
}, |
|
{ |
|
name: "九龙街道", |
|
position: [120.080354, 36.20667], //九龙街道 |
|
offset: [-20, -45], |
|
}, |
|
{ |
|
name: "中云街道", |
|
position: [120.002198, 36.28424], //中云街道 |
|
offset: [-110, -50], |
|
}, |
|
{ |
|
name: "阜安街道", |
|
position: [120.015932, 36.284843], //阜安街道 |
|
offset: [-60, -100], |
|
}, |
|
{ |
|
name: "三里河街道", |
|
position: [120.003466, 36.267643], //三里河街道 |
|
offset: [30, -65], |
|
}, |
|
{ |
|
name: "胶东街道", |
|
position: [120.097643, 36.310525], //胶东街道 |
|
offset: [-100, -120], |
|
}, |
|
{ |
|
name: "胶北街道", |
|
position: [119.965759, 36.362683], //胶北街道 |
|
offset: [-50, -130], |
|
}, |
|
{ |
|
name: "胶莱街道", |
|
position: [120.070996, 36.443059], //胶莱街道 |
|
offset: [-40, -90], |
|
}, |
|
{ |
|
name: "李哥庄镇", |
|
position: [120.158927, 36.352635], //李哥庄镇 |
|
offset: [-20, -90], |
|
}, |
|
], |
|
markers1: [ |
|
{ |
|
name: "洋河镇", |
|
position: [119.945718, 36.136799], //洋河镇 |
|
offset: [-100, -60], |
|
}, |
|
{ |
|
name: "铺集镇", |
|
position: [119.726968, 36.126774], //铺集镇 |
|
offset: [-80, -120], |
|
}, |
|
{ |
|
name: "里岔镇", |
|
position: [119.788636, 36.070297], //里岔镇 |
|
offset: [20, -150], |
|
}, |
|
{ |
|
name: "胶西街道", |
|
position: [119.920687, 36.26026], //胶西街道 |
|
offset: [-150, -60], |
|
}, |
|
{ |
|
name: "九龙街道", |
|
position: [120.080354, 36.20667], //九龙街道 |
|
offset: [-20, -45], |
|
}, |
|
{ |
|
name: "中云街道", |
|
position: [120.002198, 36.28424], //中云街道 |
|
offset: [-130, -50], |
|
}, |
|
{ |
|
name: "阜安街道", |
|
position: [120.015932, 36.284843], //阜安街道 |
|
offset: [-70, -110], |
|
}, |
|
{ |
|
name: "三里河街道", |
|
position: [120.003466, 36.267643], //三里河街道 |
|
offset: [30, -65], |
|
}, |
|
{ |
|
name: "胶东街道", |
|
position: [120.097643, 36.310525], //胶东街道 |
|
offset: [-100, -120], |
|
}, |
|
{ |
|
name: "胶北街道", |
|
position: [119.965759, 36.362683], //胶北街道 |
|
offset: [-50, -130], |
|
}, |
|
{ |
|
name: "胶莱街道", |
|
position: [120.070996, 36.443059], //胶莱街道 |
|
offset: [-40, -100], |
|
}, |
|
{ |
|
name: "李哥庄镇", |
|
position: [120.158927, 36.352635], //李哥庄镇 |
|
offset: [-20, -80], |
|
}, |
|
], |
|
strHtml: "", |
|
title: "", |
|
actived: 1, |
|
isShowInfo: false, |
|
isDisabled: false, |
|
timeArr:[], |
|
timeFra:1, |
|
current: 1, |
|
street: "", |
|
}; |
|
}, |
|
// 监听,当路由发生变化的时候执行 |
|
watch: { |
|
$route: { |
|
handler: function (val, oldVal) {}, |
|
// 深度观察监听 |
|
deep: true, |
|
}, |
|
reliData: { |
|
handler(newVal, oldVal) { |
|
this.rankData = newVal[0] ? newVal[0].dataList : []; |
|
this.rankList = newVal[0] ? newVal[0].levelList : []; |
|
|
|
this.isShowInfo = false; |
|
if (this.amap == null) { |
|
this.$nextTick(() => { |
|
this.newMap(); |
|
}); |
|
} else { |
|
this.selectedWanggeLevel2Event(); |
|
} |
|
}, |
|
}, |
|
active: { |
|
handler(newVal, oldVal) { |
|
this.actived = newVal; |
|
}, |
|
}, |
|
timeFrame:{ |
|
handler(newVal, oldVal) { |
|
this.timeFra = newVal; |
|
}, |
|
}, |
|
timePicker:{ |
|
handler(newVal, oldVal) { |
|
this.timeArr = newVal; |
|
}, |
|
} |
|
}, |
|
mounted() { |
|
this.setZoom(); |
|
window.clickMark = this.clickMark; |
|
window.closeInfo = this.closeInfo; |
|
|
|
window.addEventListener("resize", () => { |
|
this.setZoom(); |
|
}); |
|
}, |
|
beforeUnmount() { |
|
this.ob?.unsubscribe(); |
|
this.ob1?.unsubscribe(); |
|
}, |
|
created() { |
|
this.getStreet(); |
|
// console.log('reliData ===>',) |
|
}, |
|
methods: { |
|
load() { |
|
this.current++; |
|
if(this.timeArr.length == 0){ |
|
queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,timeFrame: this.timeFra }).then( |
|
(res) => { |
|
this.listData = this.listData.concat(res.data.records); |
|
if (res.data.records.length == 0) { |
|
this.isDisabled = true; |
|
} |
|
this.total = res.data.total; |
|
} |
|
); |
|
}else{ |
|
queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,startTime: this.timeArr[0] + " 00:00:00", |
|
endTime: this.timeArr[1] + " 23:59:59", }).then( |
|
(res) => { |
|
this.listData = this.listData.concat(res.data.records); |
|
if (res.data.records.length == 0) { |
|
this.isDisabled = true; |
|
} |
|
this.total = res.data.total; |
|
} |
|
); |
|
} |
|
}, |
|
|
|
closeInfo() { |
|
console.log("点击关闭按钮"); |
|
this.amap.clearInfoWindow(); |
|
}, |
|
closeInfo1() { |
|
this.isShowInfo = false; |
|
}, |
|
getStreet() { |
|
getStreetList().then((res) => { |
|
this.streetData = res.data; |
|
}); |
|
}, |
|
// createInfo() { |
|
// var info = document.createElement("div"); |
|
// info.className = "custom-info input-card content-window-card"; |
|
|
|
// // //可以通过下面的方式修改自定义窗体的宽高 |
|
// info.style.width = "350px"; |
|
// this.strHtml = ""; |
|
// for (let i = 0; i < this.listData.length; i++) { |
|
// this.strHtml += |
|
// '<div class="con_item">' + |
|
// '<div class="item_txt">' + |
|
// this.listData[i].name + |
|
// "</div>" + |
|
// '<div class="item_txt">' + |
|
// this.listData[i].name + |
|
// "</div>" + |
|
// '<div class="item_txt">' + |
|
// this.listData[i].name + |
|
// "</div>" + |
|
// "</div>"; |
|
// } |
|
// info.innerHTML = |
|
// '<div class="custom">' + |
|
// '<div class="title_info">' + |
|
// '<div class="title_name">' + |
|
// this.title + |
|
// "</div>" + |
|
// '<div class="title_num">' + |
|
// '<div style="color:#fff">已上报</div>' + |
|
// '<div class="sb_num_txt"><span style="font-size:20px">' + |
|
// this.total + |
|
// "</span>件</div>" + |
|
// "</div>" + |
|
// "</div>" + |
|
// '<div class="con_info">' + |
|
// ' <div class="con_info_top">' + |
|
// '<div class="con_tit">初登日期</div>' + |
|
// '<div class="con_tit">诉求类型</div>' + |
|
// ' <div class="con_tit">来访人姓名</div>' + |
|
// " </div>" + |
|
// '<div class="con_info_con" id="content">' + |
|
// this.strHtml + |
|
// // '<div class="con_item" v-for="item in listData" :key="item.id">' + |
|
// // '<div class="item_txt">'+`${item.name}`+'</div>' + |
|
// // '<div class="item_txt">'+`${item.name}`+'</div>' + |
|
// // '<div class="item_txt">'+`${item.name}`+'</div>' + |
|
// // "</div>" + |
|
// "</div>" + |
|
// "</div>" + |
|
// "</div>" + |
|
// '<div class="cancel" onclick="closeInfo()">'; |
|
|
|
// return info; |
|
// }, |
|
clickMark(val) { |
|
if (this.actived == 3) { |
|
this.current = 1; |
|
let tmp = this.markers.find((item) => item.name == val); |
|
this.title = val; |
|
this.street = this.streetData.find((item) => item.dictValue == val); |
|
console.log(this.timeArr,this.timeFra) |
|
if(this.timeArr.length == 0){ |
|
queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,timeFrame: this.timeFra }).then( |
|
(res) => { |
|
this.listData = res.data.records; |
|
this.total = res.data.total; |
|
this.isShowInfo = true; |
|
// var infoWindow = new AMap.InfoWindow({ |
|
// isCustom: true, //使用自定义窗体 |
|
// content: this.createInfo(), |
|
// offset: new AMap.Pixel(16, -45), |
|
// }); |
|
// infoWindow.open(this.amap, tmp.position); |
|
} |
|
); |
|
}else{ |
|
queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,startTime: this.timeArr[0] + " 00:00:00", |
|
endTime: this.timeArr[1] + " 23:59:59", }).then( |
|
(res) => { |
|
this.listData = res.data.records; |
|
this.total = res.data.total; |
|
this.isShowInfo = true; |
|
// var infoWindow = new AMap.InfoWindow({ |
|
// isCustom: true, //使用自定义窗体 |
|
// content: this.createInfo(), |
|
// offset: new AMap.Pixel(16, -45), |
|
// }); |
|
// infoWindow.open(this.amap, tmp.position); |
|
} |
|
); |
|
} |
|
// |
|
} |
|
}, |
|
// markerClick(e){ |
|
// console.log(e) |
|
// }, |
|
newMap() { |
|
AMapLoader.load({ |
|
key: this.config.amap.key, // 申请好的Web端开发者Key，首次调用 load 时必填 |
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 |
|
plugins: ["AMap.GeoJSON"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 |
|
}) |
|
.then((AMap) => { |
|
this.amap = createAMap(this.amapId); |
|
this.amap.setCenter([119.908327,36.224194]); |
|
this.amap.setZoom(11.3) |
|
// this.amap.setRotation(50, true); |
|
this.amap.on("complete", async () => { |
|
callFuncInMain("wanggeScreenComplete", ""); |
|
|
|
this.ob = selectedWanggeLevel$.subscribe(async (key) => { |
|
console.log("key", key,mapView1); |
|
this.amap?.clearMap(); |
|
this.clearModal(); |
|
hideWanggeAll(); |
|
if (key === 1) { |
|
this.amap.setZoomAndCenter(mapView1.zoom, mapView1.center, true); |
|
this.amap.setPitch(mapView1.pitch, true); |
|
this.amap.setRotation(mapView1.rotation, true); |
|
addQingdao(this.amap); |
|
addJiaozhou(this.amap); |
|
addJiaozhouMaker(this.amap); |
|
// addQingDaoTexts(this.amap) |
|
} else if (key === 2) { |
|
// deleteWangge2() |
|
// this.amap.setRotation({ |
|
// x: 90, y: 0, z: -50 |
|
// }); |
|
this.selectedWanggeLevel2Event(hotMapType$.value); |
|
} |
|
}); |
|
// this.ob1 = hotMapType$.subscribe((type) => { |
|
// if (selectedWanggeLevel$.value === 2) { |
|
// this.selectedWanggeLevel2Event(hotMapType$.value); |
|
// } |
|
// }); |
|
}); |
|
this.amap.on("click", (e) => { |
|
// console.log(this.amap.getCenter()) |
|
// console.log(this.amap.getZoom()) |
|
// console.log(this.amap.getPitch()) |
|
// console.log(this.amap.getRotation()) |
|
this.clearModal(); |
|
}); |
|
}) |
|
.catch((e) => { |
|
console.log(e); |
|
}); |
|
}, |
|
// async getSecret() { |
|
// const { data } = await this.$fetch.get("api/bs/secret", {}); |
|
// return RSAJieMi(data); |
|
// }, |
|
/** |
|
* |
|
* @param {*} hotType 热力图 形式 0：按积分 1： 按数量 |
|
*/ |
|
async selectedWanggeLevel2Event() { |
|
// 接口比较慢，先加载个空的,接口好了再填充一遍 |
|
// this.addAMapWanggeLevel2({}, hotType) |
|
|
|
// let rankList = {} |
|
// if (hotType === 0) { |
|
// // 获取镇街的诉求排名 |
|
// rankList = await this.qryMobileSuqiuKanbanList('zjd') |
|
// // console.log('rankList',rankList) |
|
// } else { |
|
// // 获取镇街的诉求排名 |
|
// // rankList = await this.getQrySqpm('zjd') |
|
// } |
|
// rankList = { 铺集镇: 1, 里岔镇: 4 }; |
|
console.log("selectedWanggeLevel$.value", selectedWanggeLevel$.value); |
|
if (selectedWanggeLevel$.value === 2) { |
|
this.addAMapWanggeLevel2(this.rankList); |
|
} |
|
}, |
|
/** |
|
* 添加二级网格的地图上的东西 |
|
* @param {*} rankList |
|
* @param {*} hotType |
|
*/ |
|
addAMapWanggeLevel2(rankList) { |
|
console.log('hotType ==>',mapView2) |
|
// this.amap.setZoomAndCenter(11.3,[119.788636,36.070297], true); |
|
this.amap.setPitch(62, true); |
|
this.amap.setRotation(-20, true); |
|
// let latLng = new LatLng(119.726968,36.126774); |
|
if (this.markersArr.length !== 0) { |
|
this.amap.remove(this.markersArr); |
|
} |
|
|
|
let markerArr = []; |
|
if (this.active == 2) { |
|
for (let key in rankList) { |
|
this.markers1.map((item) => { |
|
if (key == item.name) { |
|
this.rankData.map(item1 =>{ |
|
if(item1.name == key){ |
|
if(item1.value !== 0){ |
|
markerArr.push({ |
|
markerContent: |
|
"<div class='green-content-marker resolve'" + |
|
'onclick="clickMark(' + |
|
"'" + |
|
key + |
|
"'" + |
|
')"' + |
|
"</div>" + |
|
' <div class="green-btn">' + |
|
item1.value + '件' + ' ' + item1. resolveRate + |
|
"</div>" + |
|
"</div>", |
|
position: item.position, |
|
offset: item.offset, |
|
}); |
|
} |
|
} |
|
}) |
|
|
|
// if (rankList[key] == 3) { |
|
// for (let key1 in this.rankData) { |
|
// if (key == key1) { |
|
// markerArr.push({ |
|
// markerContent: |
|
// "<div class='green-content-marker'" + |
|
// 'onclick="clickMark(' + |
|
// "'" + |
|
// key + |
|
// "'" + |
|
// ')"' + |
|
// "</div>" + |
|
// ' <div class="green-btn">' + |
|
// this.rankData[key] + '件' + |
|
// "</div>" + |
|
// "</div>", |
|
// position: item.position, |
|
// offset: item.offset, |
|
// }); |
|
// } |
|
// } |
|
// } else if (rankList[key] == 2) { |
|
// for (let key1 in this.rankData) { |
|
// if (key1 == key) { |
|
// markerArr.push({ |
|
// markerContent: |
|
// "<div class='yellow-content-marker'" + |
|
// 'onclick="clickMark(' + |
|
// "'" + |
|
// key + |
|
// "'" + |
|
// ')"' + |
|
// "</div>" + |
|
// '<div class="yellow-btn">' + |
|
// this.rankData[key] + '件' + |
|
// "</div>" + |
|
// "</div>", |
|
// position: item.position, |
|
// offset: item.offset, |
|
// }); |
|
// } |
|
// } |
|
// } else if (rankList[key] == 1) { |
|
// for (let key1 in this.rankData) { |
|
// if (key1 == key) { |
|
// markerArr.push({ |
|
// markerContent: |
|
// "<div class='red-content-marker'" + |
|
// 'onclick="clickMark(' + |
|
// "'" + |
|
// key + |
|
// "'" + |
|
// ')"' + |
|
// "</div>" + |
|
// ' <div class="red-btn">' + |
|
// this.rankData[key] + '件' + |
|
// "</div>" + |
|
// "</div>", |
|
// position: item.position, |
|
// offset: item.offset, |
|
// }); |
|
// } |
|
// } |
|
// } |
|
} |
|
}); |
|
} |
|
} else { |
|
for (let key in rankList) { |
|
this.markers.map((item) => { |
|
if (key == item.name) { |
|
if(this.rankData[key] !== 0){ |
|
markerArr.push({ |
|
markerContent: |
|
"<div class='green-content-marker'" + |
|
'onclick="clickMark(' + |
|
"'" + |
|
key + |
|
"'" + |
|
')"' + |
|
"</div>" + |
|
' <div class="green-btn">' + |
|
this.rankData[key] + '件' + |
|
"</div>" + |
|
"</div>", |
|
position: item.position, |
|
offset: item.offset, |
|
}); |
|
} |
|
|
|
// if (rankList[key] == 1) { |
|
// for (let key1 in this.rankData) { |
|
// if (key == key1) { |
|
// markerArr.push({ |
|
// markerContent: |
|
// "<div class='green-content-marker'" + |
|
// 'onclick="clickMark(' + |
|
// "'" + |
|
// key + |
|
// "'" + |
|
// ')"' + |
|
// "</div>" + |
|
// ' <div class="green-btn">' + |
|
// this.rankData[key] + '件' + |
|
// "</div>" + |
|
// "</div>", |
|
// position: item.position, |
|
// offset: item.offset, |
|
// }); |
|
// } |
|
// } |
|
// } else if (rankList[key] == 2) { |
|
// for (let key1 in this.rankData) { |
|
// if (key1 == key) { |
|
// markerArr.push({ |
|
// markerContent: |
|
// "<div class='yellow-content-marker'" + |
|
// 'onclick="clickMark(' + |
|
// "'" + |
|
// key + |
|
// "'" + |
|
// ')"' + |
|
// "</div>" + |
|
// '<div class="yellow-btn">' + |
|
// this.rankData[key] + '件' + |
|
// "</div>" + |
|
// "</div>", |
|
// position: item.position, |
|
// offset: item.offset, |
|
// }); |
|
// } |
|
// } |
|
// } else if (rankList[key] == 3) { |
|
// for (let key1 in this.rankData) { |
|
// if (key1 == key) { |
|
// markerArr.push({ |
|
// markerContent: |
|
// "<div class='red-content-marker'" + |
|
// 'onclick="clickMark(' + |
|
// "'" + |
|
// key + |
|
// "'" + |
|
// ')"' + |
|
// "</div>" + |
|
// ' <div class="red-btn">' + |
|
// this.rankData[key] + '件' + |
|
// "</div>" + |
|
// "</div>", |
|
// position: item.position, |
|
// offset: item.offset, |
|
// }); |
|
// } |
|
// } |
|
// } |
|
} |
|
}); |
|
} |
|
} |
|
|
|
markerArr.forEach((marker) => { |
|
let markTmp = new AMap.Marker({ |
|
map: this.amap, |
|
content: marker.markerContent, |
|
// icon: marker.icon, |
|
position: [marker.position[0], marker.position[1]], |
|
offset: new AMap.Pixel(marker.offset[0], marker.offset[1]), |
|
}); |
|
this.markersArr.push(markTmp); |
|
// markTmp.on('click', this.markerClick); |
|
}); |
|
|
|
this.pointMarker.forEach(mark =>{ |
|
let markPoint = new AMap.Text({ |
|
map: this.amap, |
|
text:mark.name, |
|
// content: '<div>' + |
|
// '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width:25px;height:34px;">' |
|
// + '</img>' |
|
// + ' <span class="marker" style="right:'+ mark.right +'px">'+ mark.name +'</span> ' |
|
// + '</div>', |
|
// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", |
|
position: [mark.position[0], mark.position[1]], |
|
offset: new AMap.Pixel(-13, -30), |
|
}); |
|
}) |
|
// let marker = new AMap.Marker({ |
|
// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", |
|
// position: [120.093607, 36.35991], |
|
// offset: new AMap.Pixel(-13, -30), |
|
// }); |
|
|
|
// // 自定义点标记内容 |
|
// var markerContent = document.createElement("div"); |
|
|
|
// // 点标记中的图标 |
|
// var markerImg = document.createElement("img"); |
|
// markerImg.className = "markerlnglat"; |
|
// markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"; |
|
// markerImg.setAttribute("width", "25px"); |
|
// markerImg.setAttribute("height", "34px"); |
|
// markerContent.appendChild(markerImg); |
|
|
|
// // 点标记中的文本 |
|
// var markerSpan = document.createElement("span"); |
|
// markerSpan.className = "marker"; |
|
// markerSpan.innerHTML = "Hi，我被更新啦！"; |
|
// markerContent.appendChild(markerSpan); |
|
|
|
// marker.setContent(markerContent); |
|
// marker.setMap(this.amap); |
|
addJiedao(this.amap, 2, rankList, this.actived); |
|
// addJiaozhouTexts(this.amap); |
|
addJiaozhouLabelMarker(this.amap); |
|
}, |
|
clearModal() { |
|
// 点击空白处的时候,取消弹窗 |
|
selectedJiaozhou$.next(null); |
|
// 取消二级 |
|
selectedStreet$.next(null); |
|
resetGroup2Style(); |
|
// 取消三级 |
|
selectedWangge3$.next(null); |
|
resetGroup3Style(); |
|
// 取消四级 |
|
selectedWangge4$.next(null); |
|
|
|
selectedModelInfo$.next(null); |
|
resetGroup4Style(); |
|
}, |
|
setZoom() { |
|
const zoom = getZoom(); |
|
this.aWidth = 1920 * zoom; |
|
this.aHeight = 1080 * zoom; |
|
|
|
// 设置偏移，把地图居中 |
|
this.winWidth = window.innerWidth; |
|
this.winHeight = window.innerHeight; |
|
if (this.winWidth > this.aWidth) { |
|
this.translateX = (this.winWidth - this.aWidth) / 2; |
|
} |
|
if (this.winHeight > this.aHeight) { |
|
this.translateY = (this.winHeight - this.aHeight) / 2; |
|
} |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
@import "~@/assets/fonts/font.css"; |
|
.amap-wai { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
::-webkit-scrollbar { |
|
width: 0px; |
|
} |
|
::v-deep .amap-icon { |
|
width: 100px !important; |
|
height: 100px !important; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
::v-deep .custom-info { |
|
width: 552px; |
|
height: 328px; |
|
display: flex; |
|
padding-top: 20px; |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translate(-50%, -50%); |
|
|
|
.custom { |
|
width: 90%; |
|
height: 100%; |
|
background: url("@/assets/img/dia_bag.png") no-repeat; |
|
background-size: 100% 100%; |
|
|
|
.title_info { |
|
width: 96%; |
|
height: 14%; |
|
|
|
/* background: red; */ |
|
display: flex; |
|
/* margin-top: 20px; */ |
|
margin: 0 auto; |
|
margin-top: 20px; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.title_name { |
|
width: 60%; |
|
text-align: left; |
|
padding-left: 15px; |
|
font-size: 18px; |
|
color: #fff; |
|
font-family: "ZHJT"; |
|
} |
|
.title_num { |
|
width: 40%; |
|
background: url("@/assets/img/num_bag.png") no-repeat; |
|
display: flex; |
|
height: 100%; |
|
align-items: center; |
|
padding-left: 14px; |
|
.sb_num_txt { |
|
font-size: 20px; |
|
background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
font-weight: bold; |
|
font-family: "ZHJT"; |
|
} |
|
// justify-content: center; |
|
} |
|
} |
|
.con_info { |
|
width: 90%; |
|
height: 75%; |
|
margin: 0 auto; |
|
margin-top: 3%; |
|
|
|
.con_info_top { |
|
width: 100%; |
|
height: 13%; |
|
display: flex; |
|
background: url("@/assets/img/title_bag.png") no-repeat; |
|
background-size: 100% 100%; |
|
color: #47c5f0; |
|
|
|
.con_tit { |
|
width: 33%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
} |
|
.line_tit{ |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
.con_info_con { |
|
width: 100%; |
|
height: 80%; |
|
margin-top: 2%; |
|
|
|
// 分页 前文字+分页 |
|
.pagination { |
|
margin-top: 23px; |
|
text-align: center; |
|
padding: 10px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.con_item { |
|
width: 100%; |
|
height: 30px; |
|
background: rgba(17, 71, 96, 0.3); |
|
display: flex; |
|
align-items: center; |
|
color: #fff; |
|
margin-bottom: 5px; |
|
|
|
.item_txt { |
|
width: 33%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
// 区县：3bfffd |
|
// 市级：1bec2a |
|
// 省级：ffa60b |
|
// 中央：fd3c3c |
|
&.center{ |
|
color: #fd3c3c; |
|
} |
|
|
|
&.pro{ |
|
color: #ffa60b; |
|
} |
|
|
|
&.city{ |
|
color: #1bec2a; |
|
} |
|
&.district{ |
|
color: #3bfffd; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.cancel { |
|
width: 30px; |
|
height: 30px; |
|
background: url("@/assets/img/cancel.png") no-repeat; |
|
background-size: 100% 100%; |
|
} |
|
} |
|
|
|
::v-deep .el-table__body tr:hover > td { |
|
background: rgba(17, 71, 96, 0.8) !important ; |
|
} |
|
::v-deep .el-pagination button { |
|
min-width: 20px; |
|
} |
|
::v-deep .el-table { |
|
background: transparent; |
|
th { |
|
.el-table__cell { |
|
background: #47c5f0; |
|
} |
|
} |
|
tr { |
|
background: transparent; |
|
} |
|
} |
|
|
|
::v-deep .el-table::before { |
|
height: 0; |
|
} |
|
|
|
::v-deep .el-table th.el-table__cell { |
|
background: rgba(17, 71, 96, 0.8) !important; |
|
color: #47c5f0; |
|
padding: 5px 0; |
|
border-bottom: none !important; |
|
} |
|
::v-deep .el-table .el-table__cell { |
|
background: transparent; |
|
padding: 5px 0; |
|
border-bottom: none; |
|
color: #fff; |
|
} |
|
|
|
::v-deep .el-table th.el-table__cell > .cell { |
|
border-right: 1px solid #ccc !important; |
|
&:last-child { |
|
border-right: none; |
|
} |
|
} |
|
|
|
::v-deep .green-content-marker { |
|
width: 66px; |
|
height: 90px; |
|
background: url("@/assets/img/map.png") no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
// align-items: center; |
|
justify-content: center; |
|
|
|
&.resolve{ |
|
width: 112px; |
|
height: 90px; |
|
background: url("@/assets/img/map_reso.png") no-repeat; |
|
} |
|
} |
|
::v-deep .red-content-marker { |
|
width: 66px; |
|
height: 90px; |
|
background: url("@/assets/img/map.png") no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
// align-items: center; |
|
justify-content: center; |
|
} |
|
::v-deep .yellow-content-marker { |
|
width: 66px; |
|
height: 90px; |
|
background: url("@/assets/img/map.png") no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
// align-items: center; |
|
justify-content: center; |
|
} |
|
::v-deep .green-btn { |
|
font-family: "ZHJT"; |
|
font-size: 17px; |
|
color: #fff; |
|
margin-top: 5px |
|
// background-image: linear-gradient(to bottom, #caffe9, #7effbb); |
|
// -webkit-background-clip: text; |
|
// -webkit-text-fill-color: transparent; |
|
} |
|
::v-deep .red-btn { |
|
font-family: "ZHJT"; |
|
font-size: 17px; |
|
color: #fff; |
|
margin-top: 5px |
|
// background-image: linear-gradient(to bottom, #ffbbbb, #ff7373); |
|
// -webkit-background-clip: text; |
|
// -webkit-text-fill-color: transparent; |
|
// font-size: 34px; |
|
} |
|
::v-deep .yellow-btn { |
|
font-family: "ZHJT"; |
|
font-size: 17px; |
|
color: #fff; |
|
margin-top: 5px |
|
// background-image: linear-gradient(to bottom, #fff0c8, #f4e05c); |
|
// -webkit-background-clip: text; |
|
// -webkit-text-fill-color: transparent; |
|
// font-size: 34px; |
|
} |
|
.amap-box { |
|
// position: absolute; |
|
// left: 0; |
|
// top: 0; |
|
width: 100%; |
|
height: 100%; |
|
|
|
// width: 100vw; |
|
// height: 100vh; |
|
} |
|
::v-deep .amap-marker { |
|
color: #fff !important; |
|
|
|
.marker { |
|
position: absolute; |
|
top: -30px; |
|
right: -118px; |
|
color: #fff; |
|
padding: 4px 10px; |
|
box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2); |
|
white-space: nowrap; |
|
font-size: 12px; |
|
font-family: ""; |
|
background-color: #25a5f7; |
|
border-radius: 3px; |
|
} |
|
} |
|
::v-deep .amap-overlay-text-container{ |
|
display: block; |
|
width: auto; |
|
color: #fff; |
|
word-break: keep-all; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
padding: 2px 3px; |
|
border-radius: 3px; |
|
border:none; |
|
background: transparent; |
|
} |
|
</style>
|
|
|