地图标绘调整
This commit is contained in:
aixianling
@@ -50,7 +50,9 @@
|
||||
<el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
|
||||
</el-form-item>
|
||||
<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>
|
||||
</template>
|
||||
</ai-card>
|
||||
@@ -65,9 +67,6 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
<ai-dialog class="fullscreenMap" title="网格范围" :visible.sync="showMap" @onConfirm="surePotting" fullscreen>
|
||||
<map-plotting v-model="path"/>
|
||||
</ai-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -89,9 +88,7 @@ export default {
|
||||
girdMemberManageList: [],
|
||||
girdMemberList: []
|
||||
},
|
||||
showMap: false,
|
||||
options: [],
|
||||
path: [],
|
||||
parentGirdInfo: {},
|
||||
};
|
||||
},
|
||||
@@ -160,10 +157,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
surePotting() {
|
||||
this.forms.points = JSON.parse(JSON.stringify(this.path));
|
||||
this.showMap = false;
|
||||
},
|
||||
save() {
|
||||
this.$refs["rules"].validate((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>
|
||||
@@ -235,37 +224,6 @@ export default {
|
||||
width: 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 {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
@@ -120,7 +120,7 @@
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
@@ -128,20 +128,6 @@
|
||||
</ai-table>
|
||||
</template>
|
||||
</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={}"
|
||||
width="700px">
|
||||
<ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
|
||||
@@ -344,25 +330,15 @@ export default {
|
||||
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) {
|
||||
this.$router.push({hash: "#add", query: {id}})
|
||||
},
|
||||
//map搜索
|
||||
confirm() {
|
||||
this.editRow.points = JSON.parse(JSON.stringify(this.path));
|
||||
let {girdMemberNames} = this.editRow
|
||||
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
|
||||
...this.editRow,
|
||||
girdMemberNames: girdMemberNames?.toString()
|
||||
}).then((res) => {
|
||||
confirm(row, points) {
|
||||
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.getList();
|
||||
this.showMap = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -425,7 +401,8 @@ export default {
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
color: #fff!important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
@@ -480,6 +457,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .treePanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
<template>
|
||||
<section class="mapPlotting">
|
||||
<div class="clicker" @click="dialog=true,$emit('open')">
|
||||
<slot v-if="$slots.default"/>
|
||||
<el-button v-else type="text">标绘</el-button>
|
||||
</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"
|
||||
@@ -11,7 +23,7 @@
|
||||
</div>
|
||||
<div id="panel"/>
|
||||
<div class="container fill" id="container"/>
|
||||
<div class="operationBtns">
|
||||
<div class="operationBtns" v-if="map">
|
||||
<el-alert type="success" title="操作说明:" :closable="false">
|
||||
<li>1.双击覆盖物即可编辑</li>
|
||||
<li>2.编辑状态,对点双击可删除该点</li>
|
||||
@@ -24,11 +36,14 @@
|
||||
<el-button @click="clear()">清除绘制</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "mapPlotting",
|
||||
@@ -37,8 +52,12 @@ export default {
|
||||
event: "change"
|
||||
},
|
||||
props: {
|
||||
title: {default: "地图标绘"},
|
||||
value: Array
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
@@ -46,14 +65,8 @@ export default {
|
||||
placeSearch: null,
|
||||
searchAddress: "",
|
||||
overlays: [],
|
||||
points: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
points: {
|
||||
deep: true, handler(v) {
|
||||
this.$emit('change', v.flat())
|
||||
}
|
||||
points: [],
|
||||
dialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -70,9 +83,8 @@ export default {
|
||||
polyEditor.close();
|
||||
polyEditor.setTarget();
|
||||
polyEditor.open();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
initMap() {
|
||||
setTimeout(() => AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
@@ -89,8 +101,8 @@ export default {
|
||||
this.placeSearch = new AMap.PlaceSearch({
|
||||
pageSize: 5, // 单页显示结果条数
|
||||
pageIndex: 1, // 页码
|
||||
city: "", // 兴趣点城市
|
||||
citylimit: false, //是否强制限制在设置的城市内搜索
|
||||
city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
|
||||
citylimit: true, //是否强制限制在设置的城市内搜索
|
||||
map: this.map, // 展现结果的地图实例
|
||||
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
@@ -125,14 +137,26 @@ export default {
|
||||
});
|
||||
this.polyEditor.setTarget(polygon);
|
||||
this.polyEditor.open()
|
||||
} else {
|
||||
this.map.setCity(this.user.info.areaId?.substring(0, 6))
|
||||
this.map.setZoom(14, false, 600)
|
||||
}
|
||||
}), 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mapPlotting {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
|
||||
.clicker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mapPanel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@@ -169,5 +193,37 @@ export default {
|
||||
bottom: 20px;
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
|
||||
::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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .amap-copyright {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .amap-logo {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user