初始化
This commit is contained in:
aixianling
566
packages/2.0.5/AppGridBlock/components/add.vue
vendored
Normal file
566
packages/2.0.5/AppGridBlock/components/add.vue
vendored
Normal file
@@ -0,0 +1,566 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user