566 lines
17 KiB
Vue
566 lines
17 KiB
Vue
<template>
|
||
<div class="add-block">
|
||
<ai-detail>
|
||
<template #title>
|
||
<ai-title
|
||
:title="title"
|
||
:isShowBack="true"
|
||
:isShowBottomBorder="true"
|
||
@onBackClick="cancel(false)"
|
||
></ai-title>
|
||
</template>
|
||
<template #content>
|
||
<ai-card title="层级信息" >
|
||
<template slot="content">
|
||
<ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
|
||
<ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
|
||
<el-form
|
||
ref="rules"
|
||
:model="forms"
|
||
:rules="formRules"
|
||
size="small"
|
||
label-suffix="："
|
||
label-width="120px"
|
||
>
|
||
<ai-card title="基础信息" >
|
||
<template slot="content">
|
||
<div class="above">
|
||
<div class="left">
|
||
<el-form-item label="网格名称" prop="girdName">
|
||
<el-input
|
||
v-model="forms.girdName"
|
||
placeholder="请输入…"
|
||
maxlength="10"
|
||
show-word-limit
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="网格类型" prop="girdType">
|
||
<el-select
|
||
v-model="forms.girdType"
|
||
placeholder="请选择"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item, i) in dict.getDict('girdType')"
|
||
:key="i"
|
||
:label="item.dictName"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="是否最后一级" prop="isLastLevel">
|
||
<el-select
|
||
v-model="forms.isLastLevel"
|
||
placeholder="请选择"
|
||
:disabled="isEdit"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item, i) in dict.getDict('isLastLevel')"
|
||
:key="i"
|
||
:label="item.dictName"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="网格编码" prop="girdCode">
|
||
<el-input
|
||
v-model="forms.girdCode"
|
||
placeholder="请输入…"
|
||
maxlength="30"
|
||
show-word-limit
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="网格层级" prop="girdLevel">
|
||
<el-select
|
||
v-model="forms.girdLevel"
|
||
placeholder="请选择"
|
||
:disabled="isEdit"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="(item, i) in dict.getDict('girdLevel')"
|
||
:key="i"
|
||
:label="item.dictName"
|
||
:value="item.dictValue"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
|
||
<ai-card title="其他信息" >
|
||
<template slot="content">
|
||
<div class="above">
|
||
<div class="left">
|
||
<!-- <el-form-item label="事件上报主体" prop="eventReportUnitId">
|
||
<el-cascader
|
||
style="width: 100%"
|
||
:options="unitOps"
|
||
ref="cascader"
|
||
v-model="forms.eventReportUnitId"
|
||
:props="unitProps"
|
||
:show-all-levels="false"
|
||
/>
|
||
</el-form-item> -->
|
||
<el-form-item label="初始日期" prop="startDate">
|
||
<el-date-picker
|
||
v-model="forms.startDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="选择日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="终止日期" prop="endDate">
|
||
<el-date-picker
|
||
v-model="forms.endDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="选择日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="right">
|
||
<el-form-item label="面积" prop="area">
|
||
<el-input
|
||
v-model="forms.area"
|
||
placeholder="面积㎡"
|
||
></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<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"
|
||
></el-input>
|
||
</div>
|
||
<div id="panel"></div>
|
||
<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,
|
||
isEdit: Boolean
|
||
},
|
||
data() {
|
||
return {
|
||
forms: {
|
||
address: "",
|
||
area: "",
|
||
points: [],
|
||
endDate: "",
|
||
eventReportUnit: "",
|
||
eventReportUnitId: "",
|
||
girdCode: "",
|
||
girdLevel: "",
|
||
girdList: [],
|
||
girdName: "",
|
||
girdType: "",
|
||
isLastLevel: "",
|
||
parentGirdId: "",
|
||
parentGirdName: "",
|
||
startDate: "",
|
||
plottingStatus: "0",
|
||
},
|
||
showMap: false,
|
||
map: "",
|
||
mouseTool: "",
|
||
searchAddress: "",
|
||
placeSearch: "",
|
||
overlays: [],
|
||
options: [],
|
||
path: [],
|
||
polyEditor: "",
|
||
title: "添加网格区块",
|
||
parentGirdInfo: {},
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user"]),
|
||
formRules() {
|
||
return {
|
||
girdName: [
|
||
{ required: true, message: "请填写网格名称", trigger: "change" },
|
||
],
|
||
girdCode: [
|
||
{ required: true, message: "请填写网格编码", trigger: "change" },
|
||
],
|
||
girdType: [
|
||
{ required: true, message: "请选择网格类型", trigger: "change" },
|
||
],
|
||
isLastLevel: [
|
||
{ required: true, message: "请选择是否最后一级", trigger: "change" },
|
||
],
|
||
girdLevel: [
|
||
{ required: true, message: "请选择网格层级", trigger: "change" },
|
||
],
|
||
eventReportUnitId: [
|
||
{ required: true, message: "请选择事件上报主体", trigger: "change" },
|
||
],
|
||
};
|
||
},
|
||
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;
|
||
},
|
||
},
|
||
created() {
|
||
if (this.isEdit) {
|
||
this.title = "编辑网格区块";
|
||
this.searchDetail();
|
||
} else {
|
||
this.forms.parentGirdId = this.params.id;
|
||
this.forms.parentGirdName = this.params.girdName;
|
||
// this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
|
||
// this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
|
||
this.title = "添加网格区块";
|
||
}
|
||
this.getAllUnit(this.user.info.areaId);
|
||
},
|
||
methods: {
|
||
cancel (isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'list',
|
||
isRefresh: isRefresh ? true : false,
|
||
})
|
||
},
|
||
// 获取所有单位
|
||
getAllUnit(data) {
|
||
this.options = [];
|
||
this.instance
|
||
.post("/admin/sysunit/getAll", null, {
|
||
params: {
|
||
areaId: data,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
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, [117.147097, 36.72081], false, 600);
|
||
this.eventOn();
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
},
|
||
//地图事件绑定
|
||
eventOn() {
|
||
this.path = [];
|
||
this.overlays = [];
|
||
this.map.on("mousemove", this.showInfoMove, this);
|
||
this.mouseTool.on("draw", ({ type, obj }) => {
|
||
console.log(obj);
|
||
obj.getPath().map((e) => {
|
||
this.path.push({ lat: e.getLat(), lng: e.getLng() });
|
||
});
|
||
this.overlays.push(obj);
|
||
});
|
||
this.placeSearch.on("listElementClick", (e) => {
|
||
console.log(e);
|
||
});
|
||
},
|
||
//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() {
|
||
this.instance
|
||
.post(`/app/appgirdinfo/queryDetailById`, null, {
|
||
params: { id: this.params.id },
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.forms = { ...res.data };
|
||
this.parentGirdInfo = this.forms.parentGirdInfo;
|
||
this.forms.parentGirdName = this.parentGirdInfo.girdName;
|
||
// this.forms.isLastLevel =this.forms.girdLevel;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add-block {
|
||
width: 100%;
|
||
height: 100%;
|
||
.above {
|
||
overflow: hidden;
|
||
padding: 8px 0;
|
||
.left {
|
||
width: 380px;
|
||
float: left;
|
||
}
|
||
.right {
|
||
width: 380px;
|
||
float: right;
|
||
}
|
||
}
|
||
.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;
|
||
overflow-x: auto;
|
||
top: 20px;
|
||
width: 280px;
|
||
overflow: hidden;
|
||
z-index: 10000;
|
||
}
|
||
.tipinput {
|
||
position: absolute;
|
||
width: 200px;
|
||
height: 38px;
|
||
left: 20px;
|
||
top: 20px;
|
||
z-index: 10000;
|
||
}
|
||
}
|
||
}
|
||
</style> |