This commit is contained in:
yanran200730
2022-05-05 18:00:31 +08:00
9 changed files with 338 additions and 330 deletions

View File

@@ -123,7 +123,7 @@ export default {
methods: {
beforeSelectTree() {
this.treeObj.checkedKeys = [];
this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = this.format(res.data)
if (this.form.girdInfoList.length) {

View File

@@ -134,7 +134,7 @@ export default {
}
}
}
let IdNumberPass = (rule, value, callback) => {
if (value) {
if (this.idCardNoUtil.checkIdCardNo(value)) {
@@ -315,7 +315,7 @@ export default {
},
getGridList() {
this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = this.format(res.data)
if (this.formData.girdId) {

View File

@@ -134,7 +134,7 @@ export default {
}
}
}
let IdNumberPass = (rule, value, callback) => {
if (value) {
if (this.idCardNoUtil.checkIdCardNo(value)) {
@@ -146,7 +146,7 @@ export default {
callback(new Error('请输入身份证号'))
}
}
let regIcome = (rule, value, callback) => {
if (value) {
const reg = /^([0-9]{1,5})(\.[0-9]{1,3}){0,1}$/
@@ -325,7 +325,7 @@ export default {
},
getGridList() {
this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = this.format(res.data)
if (this.formData.girdId) {

View File

@@ -134,7 +134,7 @@ export default {
}
}
}
let IdNumberPass = (rule, value, callback) => {
if (value) {
if (this.idCardNoUtil.checkIdCardNo(value)) {
@@ -324,7 +324,7 @@ export default {
},
getGridList() {
this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = this.format(res.data)
if (this.formData.girdId) {

View File

@@ -134,7 +134,7 @@ export default {
}
}
}
let IdNumberPass = (rule, value, callback) => {
if (value) {
if (this.idCardNoUtil.checkIdCardNo(value)) {
@@ -316,7 +316,7 @@ export default {
},
getGridList() {
this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = this.format(res.data)
if (this.formData.girdId) {

View File

@@ -134,7 +134,7 @@ export default {
}
}
}
let IdNumberPass = (rule, value, callback) => {
if (value) {
if (this.idCardNoUtil.checkIdCardNo(value)) {
@@ -335,7 +335,7 @@ export default {
},
getGridList() {
this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = this.format(res.data)
if (this.formData.girdId) {

View File

@@ -5,7 +5,7 @@
<ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
</template>
<template slot="left">
<ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
<ai-tree-menu title="网格层级" @search="v=> $refs.tree.filter(v)">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
@@ -14,8 +14,13 @@
ref="tree"
:filter-node-method="filterNode"
default-expand-all
highlight-current
/>
highlight-current>
<template slot-scope="{node,data}">
<el-tooltip placement="right" :content="node.label">
<div v-text="node.label"/>
</el-tooltip>
</template>
</el-tree>
</ai-tree-menu>
</template>
<template slot="content">
@@ -608,7 +613,7 @@ export default {
background: #2266FF;
span {
.el-tooltip {
color: #fff;
}
}

View File

@@ -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/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('该网格还未标绘')
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;
}
}

View File

@@ -401,7 +401,7 @@ export default {
},
beforeSelectTree() {
this.treeObj.checkedKeys = [];
this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
this.instance.post(`/app/appgirdinfo/listAllByTop`, null, null).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = res.data;
this.forms.girdInfoList.map((e) => {
@@ -426,13 +426,13 @@ export default {
return this.$message.error('请选择网格')
}
if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
return this.$message.error(`一级、二级网格不能添加网格员`)
}
// if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
// return this.$message.error(`一级、二级网格不能添加网格员`)
// }
if (sameInfo.length) {
return this.$message.error('不能选择同一网格重复绑定')
}
// if (sameInfo.length) {
// return this.$message.error('不能选择同一网格重复绑定')
// }
}
this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{