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

地图标绘调整

Browse Source
This commit is contained in:
aixianling
2022-05-07 19:31:07 +08:00
parent 7894fb68f8
commit 70557adefd
3 changed files with 186 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
project/sass/apps/grid/AppGridBlock/components/add.vue
View File

@@ -50,7 +50,9 @@
<el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input> <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="网格范围" prop="enclosure"> <el-form-item label="网格范围" prop="enclosure">
<el-button size="small" @click="handlePlotting">地图标绘</el-button> <map-plotting v-model="forms.points">
<el-button size="small">地图标绘</el-button>
</map-plotting>
</el-form-item> </el-form-item>
</template> </template>
</ai-card> </ai-card>
@@ -65,9 +67,6 @@
</el-button> </el-button>
</template> </template>
</ai-detail> </ai-detail>
<ai-dialog class="fullscreenMap" title="网格范围" :visible.sync="showMap" @onConfirm="surePotting" fullscreen>
<map-plotting v-model="path"/>
</ai-dialog>
</div> </div>
</template> </template>
@@ -89,9 +88,7 @@ export default {
girdMemberManageList: [], girdMemberManageList: [],
girdMemberList: [] girdMemberList: []
}, },
showMap: false,
options: [], options: [],
path: [],
parentGirdInfo: {}, parentGirdInfo: {},
}; };
}, },
@@ -160,10 +157,6 @@ export default {
} }
}); });
}, },
surePotting() {
this.forms.points = JSON.parse(JSON.stringify(this.path));
this.showMap = false;
},
save() { save() {
this.$refs["rules"].validate((valid) => { this.$refs["rules"].validate((valid) => {
if (valid) { if (valid) {
@@ -222,10 +215,6 @@ export default {
} }
}); });
}, },
handlePlotting() {
if (this.forms.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.forms.points))
this.showMap = true
}
}, },
}; };
</script> </script>
@@ -235,37 +224,6 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
::v-deep .amap-copyright {
display: none !important;
}
::v-deep .amap-logo {
display: none !important;
}
::v-deep.fullscreenMap {
.el-dialog {
display: flex;
flex-direction: column;
.el-dialog__body {
padding: 0;
flex: 1;
min-height: 0;
.ai-dialog__content {
max-height: unset !important;
padding-bottom: 0;
height: 100%;
.ai-dialog__content--wrapper {
padding-right: 0 !important;
}
}
}
}
}
.footer-btn { .footer-btn {
width: 92px; width: 92px;
} }

52
project/sass/apps/grid/AppGridBlock/components/list.vue
View File

@@ -7,14 +7,14 @@
<template slot="left"> <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 <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" :filter-node-method="filterNode"
default-expand-all default-expand-all
highlight-current> highlight-current>
<template slot-scope="{node,data}"> <template slot-scope="{node,data}">
<div v-text="node.label"/> <div v-text="node.label"/>
</template> </template>
@@ -120,7 +120,7 @@
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div class="table-options"> <div class="table-options">
<el-button type="text" @click="showEdit(row.id)">编辑</el-button> <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
<el-button type="text" @click="poltting(row)">标绘</el-button> <map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
<el-button type="text" @click="deleteById(row.id)">删除</el-button> <el-button type="text" @click="deleteById(row.id)">删除</el-button>
</div> </div>
</template> </template>
@@ -128,20 +128,6 @@
</ai-table> </ai-table>
</template> </template>
</ai-list> </ai-list>
<ai-dialog
title="网格范围" class="fullscreenMap"
:visible.sync="showMap"
:customFooter="true"
border fullscreen
width="850px"
>
<map-plotting v-model="path"/>
<div class="dialog-footer" slot="footer">
<el-button size="medium" @click="showMap=false">取消</el-button>
<el-button type="primary" size="medium" @click="confirm()">确认
</el-button>
</div>
</ai-dialog>
<ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}" <ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
width="700px"> width="700px">
<ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict" <ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
@@ -344,25 +330,15 @@ export default {
this.getTreeList(); this.getTreeList();
}); });
}, },
poltting(row) {
this.showMap = true;
if (this.editRow.points?.length > 0) this.path = JSON.parse(JSON.stringify(this.editRow.points))
this.editRow = {...row};
},
showEdit(id) { showEdit(id) {
this.$router.push({hash: "#add", query: {id}}) this.$router.push({hash: "#add", query: {id}})
}, },
//map搜索 //map搜索
confirm() { confirm(row, points) {
this.editRow.points = JSON.parse(JSON.stringify(this.path)); this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
let {girdMemberNames} = this.editRow
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
...this.editRow,
girdMemberNames: girdMemberNames?.toString()
}).then((res) => {
if (res.code == 0) { if (res.code == 0) {
this.$message.success("提交成功!")
this.getList(); this.getList();
this.showMap = false;
} }
}); });
}, },
@@ -425,7 +401,8 @@ export default {
} }
.is-current > .el-tree-node__content { .is-current > .el-tree-node__content {
color: #fff!important; color: #fff !important;
&:hover { &:hover {
background: #2266FF; background: #2266FF;
color: #fff; color: #fff;
@@ -480,6 +457,7 @@ export default {
} }
} }
} }
::v-deep .treePanel { ::v-deep .treePanel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

280
project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue
View File

@@ -1,34 +1,49 @@
<template> <template>
<section class="mapPlotting"> <section class="mapPlotting">
<div class="tipinput"> <div class="clicker" @click="dialog=true,$emit('open')">
<el-input <slot v-if="$slots.default"/>
v-model="searchAddress" <el-button v-else type="text">标绘</el-button>
@change="addressChange"
clearable
placeholder="请输入关键字"
id="tipinput"
size="medium"/>
</div>
<div id="panel"/>
<div class="container fill" id="container"/>
<div class="operationBtns">
<el-alert type="success" title="操作说明:" :closable="false">
<li>1.双击覆盖物即可编辑</li>
<li>2.编辑状态,对点双击可删除该点</li>
<li>3.绘制状态,右键结束绘制</li>
<li>4.结束编辑才能保存绘制的覆盖物信息</li>
</el-alert>
<el-button-group>
<el-button type="primary" @click="handleAdd">新建</el-button>
<el-button @click="polyEditor.close()">结束编辑</el-button>
<el-button @click="clear()">清除绘制</el-button>
</el-button-group>
</div> </div>
<ai-dialog :title="title" class="fullscreenMap"
:visible.sync="dialog"
:destroyOnClose="true"
@close="points=[]"
border fullscreen
@open="initMap" :modal="false"
@onConfirm="$emit('change',points.flat()),dialog=false">
<div class="mapPanel">
<div class="tipinput">
<el-input
v-model="searchAddress"
@change="addressChange"
clearable
placeholder="请输入关键字"
id="tipinput"
size="medium"/>
</div>
<div id="panel"/>
<div class="container fill" id="container"/>
<div class="operationBtns" v-if="map">
<el-alert type="success" title="操作说明:" :closable="false">
<li>1.双击覆盖物即可编辑</li>
<li>2.编辑状态,对点双击可删除该点</li>
<li>3.绘制状态,右键结束绘制</li>
<li>4.结束编辑才能保存绘制的覆盖物信息</li>
</el-alert>
<el-button-group>
<el-button type="primary" @click="handleAdd">新建</el-button>
<el-button @click="polyEditor.close()">结束编辑</el-button>
<el-button @click="clear()">清除绘制</el-button>
</el-button-group>
</div>
</div>
</ai-dialog>
</section> </section>
</template> </template>
<script> <script>
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
import {mapState} from "vuex";
export default { export default {
name: "mapPlotting", name: "mapPlotting",
@@ -37,8 +52,12 @@ export default {
event: "change" event: "change"
}, },
props: { props: {
title: {default: "地图标绘"},
value: Array value: Array
}, },
computed: {
...mapState(['user']),
},
data() { data() {
return { return {
map: null, map: null,
@@ -46,14 +65,8 @@ export default {
placeSearch: null, placeSearch: null,
searchAddress: "", searchAddress: "",
overlays: [], overlays: [],
points: [] points: [],
} dialog: false
},
watch: {
points: {
deep: true, handler(v) {
this.$emit('change', v.flat())
}
} }
}, },
methods: { methods: {
@@ -70,104 +83,147 @@ export default {
polyEditor.close(); polyEditor.close();
polyEditor.setTarget(); polyEditor.setTarget();
polyEditor.open(); polyEditor.open();
} },
}, initMap() {
mounted() { setTimeout(() => AMapLoader.load({
setTimeout(() => AMapLoader.load({ key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 AMapUI: {
AMapUI: { // 是否加载 AMapUI，缺省不加载
// 是否加载 AMapUI，缺省不加载 version: "1.1", // AMapUI 缺省 1.1
version: "1.1", // AMapUI 缺省 1.1 plugins: [], // 需要加载的 AMapUI ui插件
plugins: [], // 需要加载的 AMapUI ui插件 },
}, }).then((AMap) => {
}).then((AMap) => { this.map = new AMap.Map("container", {
this.map = new AMap.Map("container", { resizeEnable: true,
resizeEnable: true, });
}); this.placeSearch = new AMap.PlaceSearch({
this.placeSearch = new AMap.PlaceSearch({ pageSize: 5, // 单页显示结果条数
pageSize: 5, // 单页显示结果条数 pageIndex: 1, // 页码
pageIndex: 1, // 页码 city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
city: "", // 兴趣点城市 citylimit: true, //是否强制限制在设置的城市内搜索
citylimit: false, //是否强制限制在设置的城市内搜索 map: this.map, // 展现结果的地图实例
map: this.map, // 展现结果的地图实例 panel: "panel", // 结果列表将在此容器中进行展示。
panel: "panel", // 结果列表将在此容器中进行展示。 autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 });
}); this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => { this.polyEditor.addAdsorbPolygons(target)
this.polyEditor.addAdsorbPolygons(target) target.on("dblclick", () => {
target.on("dblclick", () => { this.polyEditor.setTarget(target);
this.polyEditor.setTarget(target); this.polyEditor.open()
this.polyEditor.open() })
}) })
}) this.polyEditor.on('end', ({target}) => {
this.polyEditor.on('end', ({target}) => { this.overlays.push(target);
this.overlays.push(target); this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()})))
this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()}))) });
}); if (this.value?.length > 0) {
if (this.value?.length > 0) { let path = this.value.map(e => [e.lng, e.lat]);
let path = this.value.map(e => [e.lng, e.lat]); let polygon = new AMap.Polygon({
let polygon = new AMap.Polygon({ path,
path, strokeColor: "#FF33FF",
strokeColor: "#FF33FF", strokeWeight: 6,
strokeWeight: 6, strokeOpacity: 0.2,
strokeOpacity: 0.2, fillOpacity: 0.4,
fillOpacity: 0.4, fillColor: "#1791fc",
fillColor: "#1791fc", })
}) this.map.add([polygon]);
this.map.add([polygon]); this.map.setFitView();
this.map.setFitView(); this.polyEditor.addAdsorbPolygons(polygon)
this.polyEditor.addAdsorbPolygons(polygon) polygon.on('dblclick', () => {
polygon.on('dblclick', () => { this.polyEditor.setTarget(polygon);
this.polyEditor.open()
});
this.polyEditor.setTarget(polygon); this.polyEditor.setTarget(polygon);
this.polyEditor.open() this.polyEditor.open()
}); } else {
this.polyEditor.setTarget(polygon); this.map.setCity(this.user.info.areaId?.substring(0, 6))
this.polyEditor.open() this.map.setZoom(14, false, 600)
} }
}), 500) }), 500)
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mapPlotting { .mapPlotting {
width: 100%; display: inline-block;
height: 100%; text-align: left;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
.container { .clicker {
width: inherit; display: inline-block;
} }
#panel { .mapPanel {
position: absolute; width: 100%;
height: 400px; height: 100%;
right: 30px; position: relative;
top: 20px;
width: 280px;
overflow: hidden; overflow: hidden;
z-index: 10000; display: flex;
flex-direction: column;
.container {
width: inherit;
}
#panel {
position: absolute;
height: 400px;
right: 30px;
top: 20px;
width: 280px;
overflow: hidden;
z-index: 10000;
}
.tipinput {
position: absolute;
width: 300px;
height: 38px;
left: 20px;
top: 20px;
z-index: 10000;
}
.operationBtns {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 10000;
}
} }
.tipinput { ::v-deep.fullscreenMap {
position: absolute; .el-dialog {
width: 300px; display: flex;
height: 38px; flex-direction: column;
left: 20px;
top: 20px; .el-dialog__body {
z-index: 10000; padding: 0;
flex: 1;
min-height: 0;
.ai-dialog__content {
max-height: unset !important;
padding-bottom: 0;
height: 100%;
.ai-dialog__content--wrapper {
padding-right: 0 !important;
}
}
}
}
} }
.operationBtns { ::v-deep .amap-copyright {
position: absolute; display: none !important;
left: 20px; }
bottom: 20px;
z-index: 10000; ::v-deep .amap-logo {
display: none !important;
} }
} }
</style> </style>