kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

26929

Browse Source
This commit is contained in:
yanran200730
2022-01-26 11:10:40 +08:00
parent be95736987
commit e95360fc81
1 changed files with 306 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

595
packages/2.0.5/AppGridMap/components/list.vue vendored
View File

@@ -1,28 +1,27 @@
<template> <template>
<div class="gridMap"> <div class="gridMap">
<ai-t-map :map.sync="map" :lib.sync="mapLib" :libraries="['geometry','service', 'tools']"/> <ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
<div class="drawer" ref="drawer"> <div class="drawer" ref="drawer">
<div v-if="show" class="drawer-content"> <div v-if="show" class="drawer-content">
<b>网格地图</b> <b>网格地图</b>
<div class="tree"> <div class="tree">
<div class="input"> <div class="input">
<el-input placeholder="请输入网格名称" <el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
</div> </div>
<header class="header"> <header class="header">
<span>网格列表</span> <span>网格列表</span>
</header> </header>
<div class="tree-div"> <div class="tree-div">
<el-tree <el-tree
:data="treeObj.treeList" :data="treeObj.treeList"
:props="treeObj.defaultProps" :props="treeObj.defaultProps"
@node-click="handleNodeClick" @node-click="handleNodeClick"
node-key="id" node-key="id"
ref="tree" ref="tree"
:filter-node-method="filterNode" :expand-on-click-node="false"
default-expand-all :filter-node-method="filterNode"
highlight-current default-expand-all
> highlight-current>
</el-tree> </el-tree>
</div> </div>
</div> </div>
@@ -34,128 +33,134 @@
</div> </div>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import {mapState} from 'vuex'
export default { export default {
name: "AppGridMap", name: 'AppGridMap',
label: "网格地图", label: "网格地图",
props: { props: {
instance: Function, instance: Function,
dict: Object, dict: Object,
permissions: Function, permissions: Function,
}, },
data() { data() {
return { return {
map: null, map: null,
mapLib: null, mapLib: null,
show: true, show: true,
retryMapCount: 0, retryMapCount: 0,
polygons: [], polygons: [],
drawer: false, drawer: false,
filterText: "", filterText: "",
treeObj: { treeObj: {
treeList: [], treeList: [],
defaultProps: { defaultProps: {
children: "girdList", children: "girdList",
label: "girdName", label: "girdName",
},
defaultExpandedKeys: [],
}, },
defaultExpandedKeys: [], ops: {},
},
ops: {},
path: [], path: [],
searchObj: { searchObj: {
onlineStatus: "", onlineStatus: "",
girdMemberName: "", girdMemberName: "",
}, },
member: { member: {
memberList: [], memberList: [],
}, },
currInfo: {}, currInfo: {},
infoWindowHtml: "", infoWindowHtml: "",
marker: {}, marker: {},
location: {}, activeId: null,
activeId: null, labels: []
labels: [] };
};
},
computed: {
...mapState(['user']),
},
created() {
this.dict.load("onlineStatus")
this.getTreeList().then(() => {
this.getLeafNodes()
})
this.getCorpLocation()
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}, },
}, computed: {
methods: { ...mapState(['user']),
filterNode(value, data) {
if (!value) return true;
return data.girdName.indexOf(value) !== -1;
}, },
getTreeList() { created() {
return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => { this.dict.load("onlineStatus")
if (res.code == 0) { this.getTreeList().then(() => {
this.treeObj.treeList = res.data; this.getLeafNodes()
this.$nextTick(() => {
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
})
}
}) })
}, },
getCorpLocation(){ watch: {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{ filterText(val) {
if(res.code==0){ this.$refs.tree.filter(val);
this.location = res.data },
}
})
}, },
getLeafNodes() { methods: {
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => { filterNode(value, data) {
if (res?.data) { if (!value) return true;
let arr = [] return data.girdName.indexOf(value) !== -1;
res.data.forEach(e => { },
if (e.points?.length > 0) { getTreeList() {
arr.push(e.points.map(p => [p.lng, p.lat])) return this.instance.post(`/app/appgirdinfo/listAll`).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('该网格还未标绘')
} }
})
this.renderGridMap(arr, true) this.renderGridMap(arr)
} }
}) })
}, },
handleNodeClick(val) {
let path = []; fitBounds(latLngList, count = 0) {
this.currInfo = val let {mapLib: TMap} = this
if (val?.points?.length > 0) { if (TMap) {
path = val.points.map(e => [e.lng, e.lat])
this.renderGridMap([path])
} else if (val.girdLevel === '2') {
this.$message.error("所选网格没有标绘!")
}
},
renderGridMap(paths, flag) {
let {map, mapLib: TMap, retryMapCount} = this
if (TMap) {
setTimeout(() => {
flag && map.setCenter(new TMap.LatLng(this.location.lat, this.location.lng))
}, 400)
if (this.labels.length > 0) {
this.labels.forEach(e => {
e.destroy(e.id)
})
this.labels = []
}
const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
const fitBounds = (latLngList) => {
// 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
if (latLngList.length === 0) { if (latLngList.length === 0) {
return null; return null;
} }
@@ -173,174 +178,186 @@ export default {
new TMap.LatLng(boundsS, boundsW), new TMap.LatLng(boundsS, boundsW),
new TMap.LatLng(boundsN, boundsE) new TMap.LatLng(boundsN, boundsE)
); );
} } else {
if (this.polygons.length > 0) { if (count < 5) {
this.polygons.forEach(e => e.destroy()) this.fitBounds(latLngList, ++count)
this.polygons = []
}
let bounds = []
paths.forEach((path, i) => {
let color = colors[i % colors.length]
let polygon = new TMap.MultiPolygon({
map, styles: {
default: new TMap.PolygonStyle({
showBorder: true,
borderColor: color,
borderWidth: 2,
color: this.$colorUtils.Hex2RGBA(color, 0.1),
borderDashArray: [10, 10]
})
},
geometries: [{paths: path.map(e => new TMap.LatLng(e[1], e[0]))}]
})
this.polygons.push(polygon)
bounds.push(fitBounds(path.map(e => new TMap.LatLng(e[1], e[0]))))
const points = path.map(e => new TMap.LatLng(e[1], e[0]))
var position = TMap.geometry.computeCentroid(points)
let label = new TMap.MultiLabel({
id: `label~${this.currInfo.id}`,
data: this.currInfo.id,
map: map,
styles: {
building: new TMap.LabelStyle({
color: '#3777FF',
size: 30,
alignment: 'center',
verticalAlignment: 'middle'
})
},
geometries: [
{
id: `label-class-${i}`,
styleId: 'building',
position: position,
content: this.currInfo.girdName,
}
]
})
this.labels.push(label)
label.on('click', e => {
this.getGridInfo(e.target.id.split('~')[1])
});
})
bounds = bounds.reduce((a, b) => {
return fitBounds([
a.getNorthEast(),
a.getSouthWest(),
b.getNorthEast(),
b.getSouthWest(),
]);
});
map.fitBounds(bounds, {padding: 100})
} else {
if (retryMapCount < 5) {
setTimeout(() => {
this.retryMapCount++
this.renderGridMap(paths)
}, 1000)
}
}
},
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>
</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);
}
});
},
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);
} }
}); },
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>
</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);
}
});
},
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>