BUG 29508
This commit is contained in:
aixianling
@@ -13,17 +13,20 @@
|
||||
</header>
|
||||
<div class="tree-div">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current>
|
||||
|
||||
<span class="custom-tree-node" :title="node.label" style="" slot-scope="{ node, data }">{{ node.label }}</span>
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current>
|
||||
<template slot-scope="{ node, data }">
|
||||
<el-tooltip effect="light" :content="node.label" placement="right">
|
||||
<div v-text="node.label"/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,295 +38,295 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppGridMap',
|
||||
label: "网格地图",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
mapLib: null,
|
||||
show: true,
|
||||
retryMapCount: 0,
|
||||
polygons: [],
|
||||
export default {
|
||||
name: 'AppGridMap',
|
||||
label: "网格地图",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
mapLib: null,
|
||||
show: true,
|
||||
retryMapCount: 0,
|
||||
polygons: [],
|
||||
|
||||
drawer: false,
|
||||
filterText: "",
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
defaultExpandedKeys: [],
|
||||
drawer: false,
|
||||
filterText: "",
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
ops: {},
|
||||
defaultExpandedKeys: [],
|
||||
},
|
||||
ops: {},
|
||||
|
||||
path: [],
|
||||
searchObj: {
|
||||
onlineStatus: "",
|
||||
girdMemberName: "",
|
||||
},
|
||||
member: {
|
||||
memberList: [],
|
||||
},
|
||||
currInfo: {},
|
||||
infoWindowHtml: "",
|
||||
marker: {},
|
||||
activeId: null,
|
||||
labels: []
|
||||
};
|
||||
path: [],
|
||||
searchObj: {
|
||||
onlineStatus: "",
|
||||
girdMemberName: "",
|
||||
},
|
||||
member: {
|
||||
memberList: [],
|
||||
},
|
||||
currInfo: {},
|
||||
infoWindowHtml: "",
|
||||
marker: {},
|
||||
activeId: null,
|
||||
labels: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
created() {
|
||||
this.dict.load("onlineStatus")
|
||||
this.getTreeList().then(() => {
|
||||
this.getLeafNodes()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.girdName.indexOf(value) !== -1;
|
||||
},
|
||||
created() {
|
||||
this.dict.load("onlineStatus")
|
||||
this.getTreeList().then(() => {
|
||||
this.getLeafNodes()
|
||||
getTreeList() {
|
||||
return this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = [res.data];
|
||||
|
||||
this.$nextTick(() => {
|
||||
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
|
||||
onMapInit() {
|
||||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
|
||||
if (res.code === 0) {
|
||||
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.girdName.indexOf(value) !== -1;
|
||||
},
|
||||
getTreeList() {
|
||||
return this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = res.data;
|
||||
|
||||
this.$nextTick(() => {
|
||||
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onMapInit () {
|
||||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||||
if (res.code === 0) {
|
||||
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getLeafNodes() {
|
||||
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick (val) {
|
||||
if (val.girdLevel === '0') {
|
||||
this.getLeafNodes()
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
if (!arr.length) {
|
||||
return this.$message.error('该网格还未标绘')
|
||||
getLeafNodes() {
|
||||
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
fitBounds(latLngList, count = 0) {
|
||||
let {mapLib: TMap} = this
|
||||
if (TMap) {
|
||||
if (latLngList.length === 0) {
|
||||
return null;
|
||||
}
|
||||
let boundsN = latLngList[0].getLat();
|
||||
let boundsS = boundsN;
|
||||
let boundsW = latLngList[0].getLng();
|
||||
let boundsE = boundsW;
|
||||
latLngList.forEach((point) => {
|
||||
point.getLat() > boundsN && (boundsN = point.getLat());
|
||||
point.getLat() < boundsS && (boundsS = point.getLat());
|
||||
point.getLng() > boundsE && (boundsE = point.getLng());
|
||||
point.getLng() < boundsW && (boundsW = point.getLng());
|
||||
});
|
||||
return new TMap.LatLngBounds(
|
||||
new TMap.LatLng(boundsS, boundsW),
|
||||
new TMap.LatLng(boundsN, boundsE)
|
||||
);
|
||||
} else {
|
||||
if (count < 5) {
|
||||
this.fitBounds(latLngList, ++count)
|
||||
}
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
handleNodeClick(val) {
|
||||
if (val.girdLevel === '0') {
|
||||
this.getLeafNodes()
|
||||
|
||||
renderGridMap(paths) {
|
||||
let {map, mapLib: TMap } = this
|
||||
if (TMap) {
|
||||
if (this.polygons.length > 0) {
|
||||
this.polygons.forEach(e => e.destroy())
|
||||
this.labels.forEach(e => {
|
||||
e.destroy(e.id)
|
||||
})
|
||||
this.polygons = []
|
||||
this.labels = []
|
||||
return false
|
||||
}
|
||||
|
||||
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
if (!arr.length) {
|
||||
return this.$message.error('该网格还未标绘')
|
||||
}
|
||||
if (paths?.length > 0) {
|
||||
let bounds = []
|
||||
paths.forEach((path, i) => {
|
||||
let polygon = new TMap.MultiPolygon({
|
||||
map, styles: {
|
||||
default: new TMap.PolygonStyle({
|
||||
showBorder: true,
|
||||
borderColor: '#5088FF',
|
||||
borderWidth: 2,
|
||||
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
|
||||
})
|
||||
},
|
||||
id: path.id,
|
||||
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
|
||||
})
|
||||
this.polygons.push(polygon)
|
||||
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
|
||||
|
||||
polygon.on('click', e => {
|
||||
// const id = e.target.id
|
||||
// this.getGridInfo(id)
|
||||
})
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
|
||||
|
||||
var position = TMap.geometry.computeCentroid(points)
|
||||
|
||||
let label = new TMap.MultiLabel({
|
||||
id: `label~${path.id}`,
|
||||
data: path.id,
|
||||
map: map,
|
||||
styles: {
|
||||
building: new TMap.LabelStyle({
|
||||
color: '#3777FF',
|
||||
size: 20,
|
||||
alignment: 'center',
|
||||
verticalAlignment: 'middle'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: `label-class-${i}`,
|
||||
styleId: 'building',
|
||||
position: position,
|
||||
content: path.girdName,
|
||||
}
|
||||
]
|
||||
})
|
||||
this.labels.push(label)
|
||||
label.on('click', e => {
|
||||
// this.getGridInfo(e.target.id.split('~')[1])
|
||||
});
|
||||
})
|
||||
bounds = bounds.reduce((a, b) => {
|
||||
return this.fitBounds([
|
||||
a.getNorthEast(),
|
||||
a.getSouthWest(),
|
||||
b.getNorthEast(),
|
||||
b.getSouthWest(),
|
||||
]);
|
||||
});
|
||||
map.fitBounds(bounds, {padding: 100})
|
||||
}
|
||||
fitBounds(latLngList, count = 0) {
|
||||
let {mapLib: TMap} = this
|
||||
if (TMap) {
|
||||
if (latLngList.length === 0) {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
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).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);
|
||||
}
|
||||
let boundsN = latLngList[0].getLat();
|
||||
let boundsS = boundsN;
|
||||
let boundsW = latLngList[0].getLng();
|
||||
let boundsE = boundsW;
|
||||
latLngList.forEach((point) => {
|
||||
point.getLat() > boundsN && (boundsN = point.getLat());
|
||||
point.getLat() < boundsS && (boundsS = point.getLat());
|
||||
point.getLng() > boundsE && (boundsE = point.getLng());
|
||||
point.getLng() < boundsW && (boundsW = point.getLng());
|
||||
});
|
||||
},
|
||||
clickMember(marker) {
|
||||
if (marker.onlineStatus == 1) {
|
||||
this.activeId = marker.id;
|
||||
this.marker = marker;
|
||||
this.infoWindowContent(marker);
|
||||
return new TMap.LatLngBounds(
|
||||
new TMap.LatLng(boundsS, boundsW),
|
||||
new TMap.LatLng(boundsN, boundsE)
|
||||
);
|
||||
} else {
|
||||
if (count < 5) {
|
||||
this.fitBounds(latLngList, ++count)
|
||||
}
|
||||
},
|
||||
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">
|
||||
}
|
||||
},
|
||||
|
||||
renderGridMap(paths) {
|
||||
let {map, mapLib: TMap} = this
|
||||
if (TMap) {
|
||||
if (this.polygons.length > 0) {
|
||||
this.polygons.forEach(e => e.destroy())
|
||||
this.labels.forEach(e => {
|
||||
e.destroy(e.id)
|
||||
})
|
||||
this.polygons = []
|
||||
this.labels = []
|
||||
}
|
||||
if (paths?.length > 0) {
|
||||
let bounds = []
|
||||
paths.forEach((path, i) => {
|
||||
let polygon = new TMap.MultiPolygon({
|
||||
map, styles: {
|
||||
default: new TMap.PolygonStyle({
|
||||
showBorder: true,
|
||||
borderColor: '#5088FF',
|
||||
borderWidth: 2,
|
||||
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
|
||||
})
|
||||
},
|
||||
id: path.id,
|
||||
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
|
||||
})
|
||||
this.polygons.push(polygon)
|
||||
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
|
||||
|
||||
polygon.on('click', e => {
|
||||
// const id = e.target.id
|
||||
// this.getGridInfo(id)
|
||||
})
|
||||
|
||||
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
|
||||
|
||||
var position = TMap.geometry.computeCentroid(points)
|
||||
|
||||
let label = new TMap.MultiLabel({
|
||||
id: `label~${path.id}`,
|
||||
data: path.id,
|
||||
map: map,
|
||||
styles: {
|
||||
building: new TMap.LabelStyle({
|
||||
color: '#3777FF',
|
||||
size: 20,
|
||||
alignment: 'center',
|
||||
verticalAlignment: 'middle'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: `label-class-${i}`,
|
||||
styleId: 'building',
|
||||
position: position,
|
||||
content: path.girdName,
|
||||
}
|
||||
]
|
||||
})
|
||||
this.labels.push(label)
|
||||
label.on('click', e => {
|
||||
// this.getGridInfo(e.target.id.split('~')[1])
|
||||
});
|
||||
})
|
||||
bounds = bounds.reduce((a, b) => {
|
||||
return this.fitBounds([
|
||||
a.getNorthEast(),
|
||||
a.getSouthWest(),
|
||||
b.getNorthEast(),
|
||||
b.getSouthWest(),
|
||||
]);
|
||||
});
|
||||
map.fitBounds(bounds, {padding: 100})
|
||||
}
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
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).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>
|
||||
@@ -335,31 +338,31 @@
|
||||
<span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
|
||||
</p>
|
||||
</div>`;
|
||||
this.initMap(false, marker);
|
||||
}
|
||||
});
|
||||
},
|
||||
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);
|
||||
}
|
||||
});
|
||||
},
|
||||
this.initMap(false, marker);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
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>
|
||||
@@ -374,7 +377,7 @@
|
||||
}
|
||||
|
||||
::v-deep .is-current {
|
||||
& > .el-tree-node__content > .custom-tree-node {
|
||||
& > .el-tree-node__content > .el-tooltip {
|
||||
color: #5088ff;
|
||||
}
|
||||
}
|
||||
@@ -576,7 +579,7 @@
|
||||
background: #333c53;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
.el-tooltip {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -585,7 +588,7 @@
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
.el-tree-node__label {
|
||||
.el-tooltip {
|
||||
color: #5088ff;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user