442 lines
13 KiB
Vue
442 lines
13 KiB
Vue
<template>
|
||
<div class="add-block">
|
||
<ai-detail>
|
||
<template #title>
|
||
<ai-title
|
||
:title="pageTitle"
|
||
:isShowBack="true"
|
||
:isShowBottomBorder="true"
|
||
@onBackClick="cancel(false)"
|
||
/>
|
||
</template>
|
||
<template #content>
|
||
<el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="120px">
|
||
<ai-card title="基础信息">
|
||
<template slot="content">
|
||
<el-form-item label="网格名称" prop="girdName">
|
||
<el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
|
||
</el-form-item>
|
||
<el-form-item label="网格长" prop="girdMemberManageList">
|
||
<AiUserGet :instance="instance" v-model="forms.girdMemberManageList" isShowUser :props="{label:'wxUserId', id: 'id'}"/>
|
||
</el-form-item>
|
||
<el-form-item label="网格员" prop="girdMemberList">
|
||
<AiUserGet :instance="instance" v-model="forms.girdMemberList" isShowUser :props="{label:'wxUserId', id: 'id'}"/>
|
||
</el-form-item>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="其他信息">
|
||
<template slot="content">
|
||
<el-row type="flex">
|
||
<div class="fill">
|
||
<el-form-item label="初始日期" prop="startDate">
|
||
<el-date-picker
|
||
v-model="forms.startDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="选择日期"
|
||
style="width: 100%;"/>
|
||
</el-form-item>
|
||
<el-form-item label="终止日期" prop="endDate">
|
||
<el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="fill">
|
||
<el-form-item label="面积" prop="area">
|
||
<el-input v-model="forms.area" placeholder="面积㎡" clearable/>
|
||
</el-form-item>
|
||
</div>
|
||
</el-row>
|
||
<el-form-item label="网格地址" prop="address">
|
||
<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="showMap = true">地图标绘</el-button>
|
||
</el-form-item>
|
||
</template>
|
||
</ai-card>
|
||
</el-form>
|
||
</template>
|
||
<template #footer>
|
||
<el-button @click="cancel(false)" class="delete-btn footer-btn">
|
||
取 消
|
||
</el-button>
|
||
<el-button type="primary" @click="save()" class="footer-btn">
|
||
提 交
|
||
</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
<ai-dialog
|
||
title="网格范围"
|
||
:visible.sync="showMap"
|
||
:customFooter="true"
|
||
:destroyOnClose="true"
|
||
@opened="beforeSelectMap"
|
||
border
|
||
width="850px"
|
||
>
|
||
<div class="map">
|
||
<div class="tipinput">
|
||
<el-input
|
||
v-model="searchAddress"
|
||
@change="addressChange"
|
||
clearable
|
||
placeholder="请输入关键字"
|
||
id="tipinput"
|
||
size="medium"
|
||
style="width: 200px"
|
||
/>
|
||
</div>
|
||
<div id="panel"/>
|
||
<div class="container" id="container"></div>
|
||
<el-button-group style="margin-top: 8px" v-if="forms.plottingStatus==1">
|
||
<el-button type="primary" size="mini" @click="polyEditor.open()">开始编辑</el-button>
|
||
<el-button size="mini" @click="polyEditor.close()">结束编辑</el-button>
|
||
</el-button-group>
|
||
<el-button-group
|
||
style="margin-top: 8px"
|
||
v-if="forms.plottingStatus == 0"
|
||
>
|
||
<el-button size="mini" @click="draw('polygon')">开始绘制多边形</el-button>
|
||
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
|
||
<el-button size="mini" @click="clear()">清除绘制</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<div class="dialog-footer" slot="footer">
|
||
<el-button size="medium" @click="showMap = false">取消</el-button>
|
||
<el-button type="primary" size="medium" @click="surePotting()">确认</el-button>
|
||
</div>
|
||
</ai-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "addBlock",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object,
|
||
},
|
||
data() {
|
||
return {
|
||
forms: {
|
||
girdMemberManageList: [],
|
||
girdMemberList: []
|
||
},
|
||
showMap: false,
|
||
map: "",
|
||
mouseTool: "",
|
||
searchAddress: "",
|
||
placeSearch: "",
|
||
overlays: [],
|
||
options: [],
|
||
path: [],
|
||
location: {},
|
||
polyEditor: "",
|
||
title: "添加网格区块",
|
||
parentGirdInfo: {},
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user"]),
|
||
formRules() {
|
||
return {
|
||
girdName: [
|
||
{required: true, message: "请输入网格名称", trigger: "change"},
|
||
],
|
||
girdLevel: [
|
||
{required: true, message: "请选择网格层级", trigger: "change"},
|
||
],
|
||
girdCode: [
|
||
{required: true, message: "请输入网格编号"},
|
||
{pattern: /^\d+$/g, message: "请输入数字"},
|
||
]
|
||
};
|
||
},
|
||
unitProps() {
|
||
return {
|
||
value: "id",
|
||
checkStrictly: true,
|
||
emitPath: false,
|
||
};
|
||
},
|
||
unitOps() {
|
||
let initData = JSON.parse(JSON.stringify(this.options)),
|
||
ops = initData.filter((e) => !e.parentId);
|
||
ops.map((e) => this.addChild(e, initData));
|
||
return ops;
|
||
},
|
||
pageTitle() {
|
||
return this.isEdit ? "编辑网格区块" : "添加网格区块"
|
||
},
|
||
isEdit() {
|
||
return !!this.$route.query.id;
|
||
}
|
||
},
|
||
created() {
|
||
this.getCorpLocation()
|
||
if (this.isEdit) {
|
||
this.searchDetail();
|
||
} else {
|
||
this.forms = {
|
||
...this.forms,
|
||
...this.$route.query
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
cancel() {
|
||
this.$router.push({})
|
||
},
|
||
// 获取所有单位
|
||
getAllUnit(data) {
|
||
this.options = [];
|
||
this.instance.post("/admin/sysunit/getAll", null, {
|
||
params: {areaId: data},
|
||
}).then((res) => {
|
||
if (res?.data) {
|
||
res.data = res.data.map((a) => {
|
||
return {...a, label: a.name}
|
||
});
|
||
this.options = res.data.filter((e) => !e.parentId);
|
||
this.options.map((t) => this.addChild(t, res.data));
|
||
}
|
||
});
|
||
},
|
||
beforeSelectMap() {
|
||
AMapLoader.load({
|
||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
AMapUI: {
|
||
// 是否加载 AMapUI，缺省不加载
|
||
version: "1.1", // AMapUI 缺省 1.1
|
||
plugins: [], // 需要加载的 AMapUI ui插件
|
||
},
|
||
})
|
||
.then((AMap) => {
|
||
this.map = new AMap.Map("container", {
|
||
resizeEnable: true,
|
||
});
|
||
if (this.forms.plottingStatus == 1) {
|
||
let path = [];
|
||
this.forms.points.map((e, index) => {
|
||
path[index] = [e.lng, e.lat];
|
||
});
|
||
let polygon = new AMap.Polygon({
|
||
path: path,
|
||
strokeColor: "#FF33FF",
|
||
strokeWeight: 6,
|
||
strokeOpacity: 0.2,
|
||
fillOpacity: 0.4,
|
||
fillColor: "#1791fc",
|
||
zIndex: 50,
|
||
bubble: true,
|
||
});
|
||
this.map.add([polygon]);
|
||
this.map.setFitView();
|
||
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
|
||
} else {
|
||
this.mouseTool = new AMap.MouseTool(this.map);
|
||
// this.map.add(new AMap.Marker({
|
||
// position:this.map.getCenter()
|
||
// }));
|
||
this.placeSearch = new AMap.PlaceSearch({
|
||
pageSize: 3, // 单页显示结果条数
|
||
pageIndex: 1, // 页码
|
||
city: "", // 兴趣点城市
|
||
citylimit: false, //是否强制限制在设置的城市内搜索
|
||
map: this.map, // 展现结果的地图实例
|
||
panel: "panel", // 结果列表将在此容器中进行展示。
|
||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||
});
|
||
// this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
|
||
this.eventOn();
|
||
}
|
||
})
|
||
},
|
||
getCorpLocation() {
|
||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
|
||
if (res?.data) {
|
||
this.location = res.data
|
||
}
|
||
})
|
||
},
|
||
//地图事件绑定
|
||
eventOn() {
|
||
this.path = [];
|
||
this.overlays = [];
|
||
this.map.on("mousemove", null, this);
|
||
this.mouseTool.on("draw", ({obj}) => {
|
||
obj.getPath().map((e) => {
|
||
this.path.push({lat: e.getLat(), lng: e.getLng()});
|
||
});
|
||
this.overlays.push(obj);
|
||
})
|
||
},
|
||
//map搜索
|
||
addressChange(val) {
|
||
this.placeSearch.search(val);
|
||
},
|
||
close() {
|
||
this.mouseTool.close(true);
|
||
},
|
||
clear() {
|
||
this.map.remove(this.overlays);
|
||
this.overlays = [];
|
||
this.path = [];
|
||
},
|
||
draw(type) {
|
||
switch (type) {
|
||
case "marker": {
|
||
this.mouseTool.marker({
|
||
//同Marker的Option设置
|
||
});
|
||
break;
|
||
}
|
||
case "polyline": {
|
||
this.mouseTool.polyline({
|
||
strokeColor: "#80d8ff",
|
||
//同Polyline的Option设置
|
||
});
|
||
break;
|
||
}
|
||
case "polygon": {
|
||
this.mouseTool.polygon({
|
||
fillColor: "#00b0ff",
|
||
strokeColor: "#80d8ff",
|
||
borderWeight: 2,
|
||
strokeWeight: 4,
|
||
//同Polygon的Option设置
|
||
});
|
||
break;
|
||
}
|
||
case "rectangle": {
|
||
this.mouseTool.rectangle({
|
||
fillColor: "#00b0ff",
|
||
strokeColor: "#80d8ff",
|
||
//同Polygon的Option设置
|
||
});
|
||
break;
|
||
}
|
||
case "circle": {
|
||
this.mouseTool.circle({
|
||
fillColor: "#00b0ff",
|
||
strokeColor: "#80d8ff",
|
||
//同Circle的Option设置
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
surePotting() {
|
||
this.forms.points = [];
|
||
// this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
|
||
if (this.forms.plottingStatus == 1) {
|
||
this.polyEditor
|
||
.getTarget()
|
||
.getPath()
|
||
.map((e) => {
|
||
this.forms.points.push({lng: e.lng, lat: e.lat});
|
||
});
|
||
} else {
|
||
this.forms.points = [...this.path];
|
||
}
|
||
this.showMap = false;
|
||
},
|
||
save() {
|
||
this.$refs["rules"].validate((valid) => {
|
||
if (valid) {
|
||
this.instance
|
||
.post(
|
||
`/app/appgirdinfo/addOrUpdate`,
|
||
{
|
||
...this.forms,
|
||
},
|
||
null
|
||
)
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.cancel(true)
|
||
}
|
||
});
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
searchDetail() {
|
||
let {id} = this.$route.query
|
||
this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
|
||
params: {id},
|
||
}).then((res) => {
|
||
if (res?.data) {
|
||
this.forms = {
|
||
...res.data,
|
||
girdMemberManageList: res.data.girdMemberManageList ? res.data.girdMemberManageList : [],
|
||
girdMemberList: res.data.girdMemberList ? res.data.girdMemberList : [],
|
||
};
|
||
this.parentGirdInfo = res.data.parentGirdInfo;
|
||
this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add-block {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
::v-deep .amap-copyright {
|
||
display: none !important;
|
||
}
|
||
|
||
::v-deep .amap-logo {
|
||
display: none !important;
|
||
}
|
||
|
||
.footer-btn {
|
||
width: 92px;
|
||
}
|
||
|
||
.map {
|
||
width: 780px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.container {
|
||
width: 760px;
|
||
height: 420px;
|
||
border-radius: 2px;
|
||
border: 1px solid #d0d4dc;
|
||
}
|
||
|
||
#panel {
|
||
position: absolute;
|
||
height: 400px;
|
||
right: 30px;
|
||
top: 20px;
|
||
width: 280px;
|
||
overflow: hidden;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.tipinput {
|
||
position: absolute;
|
||
width: 200px;
|
||
height: 38px;
|
||
left: 20px;
|
||
top: 20px;
|
||
z-index: 10000;
|
||
}
|
||
}
|
||
}
|
||
</style>
|