710 lines
19 KiB
Vue
710 lines
19 KiB
Vue
<template>
|
||
<div class="map">
|
||
<div id="mapContainer"></div>
|
||
<div class="drawer" ref="drawer">
|
||
<div class="drawer-content">
|
||
<header>
|
||
<h3>网格地图</h3>
|
||
<!-- <div class="online">
|
||
<p>
|
||
<span>人员总数：</span>
|
||
<span>{{ member.allMemberNumber }}</span>
|
||
</p>
|
||
<p>
|
||
<span>在线人员：</span>
|
||
<span style="color: #19d286">{{ member.onlineNumber }}</span>
|
||
</p>
|
||
</div>
|
||
<div class="circle">
|
||
<el-progress
|
||
type="circle"
|
||
:width="46"
|
||
:stroke-width="4"
|
||
:percentage="percentage()"
|
||
color="#19D286"
|
||
></el-progress>
|
||
</div> -->
|
||
</header>
|
||
<!-- <ul class="nav">
|
||
<li
|
||
v-for="(e, index) in navList"
|
||
:key="index"
|
||
@click="navClick(index)"
|
||
:class="{ active: activeIndex == index }"
|
||
>
|
||
{{ e.title }}
|
||
</li>
|
||
</ul> -->
|
||
<div v-show="activeIndex == 0" class="tree">
|
||
<div class="map-search">
|
||
<el-select
|
||
size="mini"
|
||
style="width: 80px"
|
||
@change="getMemberList()"
|
||
v-model="searchObj.onlineStatus"
|
||
placeholder="全部"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item, i) in dict.getDict('onlineStatus')"
|
||
:key="i"
|
||
:label="item.dictName"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
<el-input
|
||
style="width: 164px"
|
||
@change="getMemberList()"
|
||
placeholder="请输入网格员姓名"
|
||
v-model="searchObj.girdMemberName"
|
||
size="mini"
|
||
@keyup.enter.native="getMemberList()"
|
||
suffix-icon="el-icon-search"
|
||
>
|
||
</el-input>
|
||
</div>
|
||
<header class="header">
|
||
<span>人员列表</span>
|
||
</header>
|
||
<ul class="member-list" v-if="member.memberList.length > 0">
|
||
<li
|
||
v-for="(e, index) in member.memberList"
|
||
:key="index"
|
||
@click="clickMember(e)"
|
||
:class="{ active: activeId == e.id }"
|
||
>
|
||
<span
|
||
class="iconfont iconzxjyzdls"
|
||
:style="{
|
||
color: e.onlineStatus == 1 ? '#19D286' : 'rgb(178, 178, 201)',
|
||
}"
|
||
></span>
|
||
<span>{{ e.name }}</span>
|
||
</li>
|
||
</ul>
|
||
<div v-if="member.memberList.length == 0" class="empty">暂无数据</div>
|
||
</div>
|
||
<div v-show="activeIndex == 1" class="tree">
|
||
<div class="input">
|
||
<el-input
|
||
placeholder="请输入网格名称"
|
||
v-model="filterText"
|
||
size="mini"
|
||
suffix-icon="el-icon-search"
|
||
>
|
||
</el-input>
|
||
</div>
|
||
<header class="header">
|
||
<span>网格列表</span>
|
||
</header>
|
||
<div class="tree-div">
|
||
<el-tree
|
||
:data="treeObj.treeList"
|
||
:props="treeObj.defaultProps"
|
||
@node-click="handleNodeClick"
|
||
node-key="id"
|
||
ref="tree"
|
||
:filter-node-method="filterNode"
|
||
default-expand-all
|
||
highlight-current
|
||
>
|
||
</el-tree>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="drawer-btn" @click="control()" ref="drawerBtn">
|
||
<span
|
||
class="iconfont iconArrow_Left"
|
||
ref="icon"
|
||
@click="changeIcon()"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||
import { mapState } from 'vuex'
|
||
export default {
|
||
name: "AppGridMap",
|
||
label: "网格地图",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
},
|
||
data() {
|
||
return {
|
||
map: '',
|
||
overlays: [],
|
||
drawer: false,
|
||
navList: [
|
||
// { id: 0, title: "网格员" },
|
||
{ id: 1, title: "网格" },
|
||
],
|
||
activeIndex: 1,
|
||
filterText: "",
|
||
treeObj: {
|
||
treeList: [],
|
||
defaultProps: {
|
||
children: "girdList",
|
||
label: "girdName",
|
||
},
|
||
defaultExpandedKeys: [],
|
||
},
|
||
polygon: "",
|
||
path: [],
|
||
searchObj: {
|
||
onlineStatus: "",
|
||
girdMemberName: "",
|
||
},
|
||
member: {
|
||
memberList: [],
|
||
},
|
||
infoWindowHtml: "",
|
||
marker: {},
|
||
activeId: null,
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
},
|
||
created() {
|
||
this.areaId = this.user.info.areaId
|
||
},
|
||
mounted() {
|
||
// this.getMemberList();
|
||
this.getTreeList()
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.tree.filter(val);
|
||
},
|
||
},
|
||
methods: {
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.girdName.indexOf(value) !== -1;
|
||
},
|
||
getTreeList() {
|
||
this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
|
||
if (res.code == 0) {
|
||
this.treeObj.treeList = res.data;
|
||
}
|
||
});
|
||
},
|
||
handleNodeClick(val) {
|
||
let path = [];
|
||
if (val.points) {
|
||
val.points.map((e, index) => {
|
||
path[index] = [e.lng, e.lat];
|
||
});
|
||
}
|
||
this.initMap(path);
|
||
},
|
||
initMap(path, marker, initMakers) {
|
||
AMapLoader.load({
|
||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.InfoWindow"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
AMapUI: {
|
||
// 是否加载 AMapUI，缺省不加载
|
||
version: "1.1", // AMapUI 缺省 1.1
|
||
plugins: [], // 需要加载的 AMapUI ui插件
|
||
},
|
||
})
|
||
.then((AMap) => {
|
||
this.map = new AMap.Map("mapContainer", {
|
||
resizeEnable: true,
|
||
zoom: 13,
|
||
});
|
||
this.map.setZoomAndCenter(14, [117.147097, 36.72081], false, 600);
|
||
if (path) {
|
||
this.polygon = new AMap.Polyline({
|
||
path: path,
|
||
strokeColor: "#FF33FF",
|
||
strokeWeight: 6,
|
||
strokeStyle: "solid",
|
||
strokeOpacity: 1,
|
||
fillColor: "#1791fc",
|
||
zIndex: 50,
|
||
lineJoin: "round",
|
||
lineCap: "round",
|
||
});
|
||
this.map.add(this.polygon);
|
||
this.map.setFitView();
|
||
}
|
||
if (marker) {
|
||
console.log(marker);
|
||
let infoWindow = new AMap.InfoWindow({
|
||
position: new AMap.LngLat(marker.lng, marker.lat),
|
||
offset: new AMap.Pixel(0, -30),
|
||
content: this.infoWindowHtml,
|
||
});
|
||
let markerDot = new AMap.Marker({
|
||
map: this.map,
|
||
position: new AMap.LngLat(marker.lng, marker.lat),
|
||
});
|
||
markerDot.on("click", () => {
|
||
infoWindow.open(this.map);
|
||
});
|
||
infoWindow.open(this.map);
|
||
this.getLngLat(marker);
|
||
this.map.setZoomAndCenter(13, [marker.lng, marker.lat], false, 600);
|
||
}
|
||
if (initMakers) {
|
||
let markerList = [];
|
||
initMakers.map((e) => {
|
||
markerList.push(
|
||
new AMap.Marker({
|
||
position: new AMap.LngLat(e.lng, e.lat),
|
||
label: {
|
||
content: `<p class='title_info'>${e.name}</p>`,
|
||
direction: "center",
|
||
offset: new AMap.Pixel(0, -30),
|
||
},
|
||
})
|
||
);
|
||
});
|
||
this.map.add(markerList);
|
||
}
|
||
this.map.addControl(new AMap.Scale());
|
||
this.map.addControl(new AMap.ToolBar());
|
||
this.eventOn();
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
},
|
||
//地图事件绑定
|
||
eventOn() {
|
||
this.map.on("mousemove", this.showInfoMove, this);
|
||
},
|
||
showInfoMove(e) {},
|
||
hasClass(ele, cls) {
|
||
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
|
||
},
|
||
addClass(ele, cls) {
|
||
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
|
||
},
|
||
removeClass(ele, cls) {
|
||
if (this.hasClass(ele, cls)) {
|
||
const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
|
||
ele.className = ele.className.replace(reg, " ");
|
||
}
|
||
},
|
||
changClass(ele, className) {
|
||
if (!this.hasClass(ele, className)) {
|
||
this.addClass(ele, className);
|
||
} else {
|
||
this.removeClass(ele, className);
|
||
}
|
||
},
|
||
changeIcon() {
|
||
this.changClass(this.$refs.icon, "iconArrow_Right");
|
||
},
|
||
control() {
|
||
this.changClass(this.$refs.drawer, "hide");
|
||
this.changClass(this.$refs.drawerBtn, "btn-hide");
|
||
},
|
||
navClick(index) {
|
||
this.activeIndex = index;
|
||
this.initMap();
|
||
if (index == 1) {
|
||
this.filterText = "";
|
||
this.getTreeList();
|
||
} else {
|
||
this.searchObj = {
|
||
onlineStatus: "",
|
||
girdMemberName: "",
|
||
};
|
||
this.getMemberList();
|
||
}
|
||
},
|
||
percentage() {
|
||
if (this.member.onlineNumber == 0) {
|
||
return 0;
|
||
} else {
|
||
return (
|
||
100 *
|
||
(this.member.onlineNumber / this.member.allMemberNumber)
|
||
).toFixed(2);
|
||
}
|
||
},
|
||
getMemberList() {
|
||
this.instance
|
||
.post(
|
||
`/app/appgirdmemberinfo/queryGirdMemberByMap`,
|
||
{ ...this.searchObj },
|
||
null
|
||
)
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
let markers = [];
|
||
this.member = res.data;
|
||
this.member.memberList.map((e) => {
|
||
if (e.onlineStatus == "1") {
|
||
markers.push({ lng: e.lng, lat: e.lat, name: e.name });
|
||
}
|
||
});
|
||
this.initMap(null, null, markers);
|
||
}
|
||
});
|
||
},
|
||
clickMember(marker) {
|
||
if (marker.onlineStatus == 1) {
|
||
this.activeId = marker.id;
|
||
this.marker = marker;
|
||
this.infoWindowContent(marker);
|
||
}
|
||
},
|
||
infoWindowContent(marker) {
|
||
this.instance
|
||
.post(`/app/location/xyToAddress`, null, {
|
||
params: {
|
||
x: marker.lat,
|
||
y: marker.lng,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.infoWindowHtml = `<div class="info">
|
||
<p>
|
||
<span class="name">${marker.name}</span>
|
||
<span class="lat">${marker.lng},${marker.lat}</span>
|
||
</p>
|
||
<p>
|
||
<span class="lat">${res.data}</span>
|
||
</p>
|
||
<p class="address">
|
||
<span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
|
||
</p>
|
||
</div>`;
|
||
this.initMap(false, marker);
|
||
}
|
||
});
|
||
},
|
||
getLngLat(marker) {
|
||
let span = document.getElementById("addressSpan");
|
||
span.addEventListener("click", this.queryTrajectory);
|
||
},
|
||
queryTrajectory() {
|
||
this.instance
|
||
.post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
|
||
params: {
|
||
userId: this.marker.userId,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
let path = [];
|
||
if (res.data) {
|
||
res.data.map((e, index) => {
|
||
path[index] = [e.lng, e.lat];
|
||
});
|
||
}
|
||
this.initMap(path, this.marker);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.map {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: relative;
|
||
#mapContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.drawer-btn {
|
||
position: absolute;
|
||
left: 280px;
|
||
bottom: 0;
|
||
top: 0;
|
||
margin: auto;
|
||
width: 20px;
|
||
height: 24px;
|
||
border-top: 40px solid transparent;
|
||
border-bottom: 40px solid transparent;
|
||
border-left: 16px solid #333c53;
|
||
border-right: 0px solid transparent;
|
||
transition: all 0.5s ease-in-out;
|
||
cursor: pointer;
|
||
.iconfont {
|
||
position: absolute;
|
||
font-size: 26px;
|
||
color: rgb(255, 255, 255);
|
||
left: -21px;
|
||
top: -14px;
|
||
transition: all 0.5s ease-in-out;
|
||
}
|
||
}
|
||
.btn-hide {
|
||
left: 0;
|
||
}
|
||
.drawer {
|
||
width: 280px;
|
||
height: 100%;
|
||
background: #333c53;
|
||
position: absolute;
|
||
z-index: 1000;
|
||
top: 0;
|
||
left: 0;
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transition: all 0.5s ease-in-out;
|
||
.drawer-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
header {
|
||
height: 76px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
h3 {
|
||
color: #fff;
|
||
font-size: 18px;
|
||
}
|
||
.online {
|
||
color: #fff;
|
||
font-size: 12px;
|
||
padding-left: 16px;
|
||
}
|
||
.circle {
|
||
width: 40px;
|
||
height: 40px;
|
||
padding-left: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
::v-deep .el-progress__text {
|
||
color: #19d286;
|
||
}
|
||
}
|
||
}
|
||
.nav {
|
||
width: 100%;
|
||
height: 28px;
|
||
display: flex;
|
||
padding: 0;
|
||
margin: 0;
|
||
li {
|
||
width: 50%;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
background: #1d2336;
|
||
border-radius: 0px 3px 3px 0px;
|
||
color: #8899bb;
|
||
cursor: pointer;
|
||
}
|
||
.active {
|
||
background: #3e4a69;
|
||
color: #fff;
|
||
border-radius: 3px 0px 0px 3px;
|
||
}
|
||
}
|
||
.tree {
|
||
height: calc(100% - 28px - 76px);
|
||
overflow: auto;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
.map-search {
|
||
display: flex;
|
||
padding: 8px 0;
|
||
justify-content: space-between;
|
||
::v-deep .el-input__inner {
|
||
color: #fff;
|
||
}
|
||
}
|
||
.member-list {
|
||
width: 100%;
|
||
height: calc(100% - 44px - 28px);
|
||
overflow: auto;
|
||
padding: 0;
|
||
margin: 0;
|
||
li {
|
||
width: 100%;
|
||
height: 32px;
|
||
display: flex;
|
||
padding: 0 8px;
|
||
align-items: center;
|
||
color: #fff;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
span {
|
||
padding-right: 8px;
|
||
}
|
||
}
|
||
.active {
|
||
background: #1d2336;
|
||
}
|
||
&::-webkit-scrollbar {
|
||
/*滚动条整体样式*/
|
||
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
||
height: 1px;
|
||
}
|
||
&::-webkit-scrollbar-thumb {
|
||
/*滚动条里面小方块*/
|
||
border-radius: 10px;
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
background: #1a1e2c;
|
||
}
|
||
&::-webkit-scrollbar-track {
|
||
/*滚动条里面轨道*/
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
border-radius: 10px;
|
||
background: #ededed;
|
||
background: #282f45;
|
||
}
|
||
}
|
||
.empty {
|
||
padding: 20px 0;
|
||
color: #7a88bb;
|
||
text-align: center;
|
||
}
|
||
.header {
|
||
width: 100%;
|
||
height: 28px;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
background: #3e4a69;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
padding: 8px 0;
|
||
::v-deep .el-input__inner {
|
||
color: #fff;
|
||
}
|
||
}
|
||
::v-deep .el-input__inner {
|
||
background-color: #282f45;
|
||
border: 1px solid #282f45;
|
||
}
|
||
.tree-div {
|
||
width: 100%;
|
||
height: calc(100% - 44px - 28px);
|
||
overflow: auto;
|
||
&::-webkit-scrollbar {
|
||
/*滚动条整体样式*/
|
||
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
||
height: 1px;
|
||
}
|
||
&::-webkit-scrollbar-thumb {
|
||
/*滚动条里面小方块*/
|
||
border-radius: 10px;
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
background: #1a1e2c;
|
||
}
|
||
&::-webkit-scrollbar-track {
|
||
/*滚动条里面轨道*/
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
border-radius: 10px;
|
||
background: #ededed;
|
||
background: #282f45;
|
||
}
|
||
}
|
||
footer {
|
||
width: 100%;
|
||
height: 32px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
width: 33.33%;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
::v-deep .el-tree {
|
||
width: 100%;
|
||
|
||
.el-tree__empty-block {
|
||
background: #333c53;
|
||
}
|
||
.el-tree-node__label {
|
||
color: #fff;
|
||
}
|
||
.el-tree-node__content {
|
||
background: #333c53;
|
||
}
|
||
.is-current > .el-tree-node__content {
|
||
.el-tree-node__label {
|
||
color: #5088ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.hide {
|
||
left: -280px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
.btn {
|
||
position: absolute;
|
||
top: 100px;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.map {
|
||
.info {
|
||
width: 280px;
|
||
height: 98px;
|
||
background: #fff;
|
||
padding: 8px 0 0 12px;
|
||
box-sizing: border-box;
|
||
p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
p {
|
||
line-height: 20px;
|
||
.name {
|
||
color: #333;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
.lat {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
}
|
||
.address {
|
||
color: #999;
|
||
line-height: 40px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.title_info {
|
||
width: 68px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
height: 20px;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
border-radius: 4px;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.amap-marker-label {
|
||
border: 1px solid rgb(141, 139, 139);
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
</style> |