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-06-13 09:39:19 +08:00
parent 0736ea98d0
commit 2a4d9b2b1c
67 changed files with 1490 additions and 16970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

490
packages/grid/AppGridBlock/components/add.vue
View File

@@ -3,151 +3,56 @@
<ai-detail>
<template #title>
<ai-title
:title="title"
:title="pageTitle"
: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"
>
<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="50"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="网格类型" prop="girdType">
<el-select
v-model="forms.girdType"
placeholder="请选择"
clearable
style="width: 100%;"
>
<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="请选择"
clearable
style="width: 100%;"
>
<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
style="width: 100%;"
>
<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>
<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">
<ai-user-picker :instance="instance" v-model="forms.girdMemberManageList" :props="{label:'name', id: 'id'}"/>
</el-form-item>
<el-form-item label="网格员" prop="girdMemberList">
<ai-user-picker :instance="instance" v-model="forms.girdMemberList" :props="{label:'name', id: 'id'}"/>
</el-form-item>
</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-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-date-picker>
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-date-picker>
<el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
</el-form-item>
</div>
<div class="right">
<div class="fill">
<el-form-item label="面积" prop="area">
<el-input
v-model="forms.area"
placeholder="面积㎡"
></el-input>
<el-input v-model="forms.area" placeholder="面积㎡" clearable/>
</el-form-item>
</div>
</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" v-if="forms.girdLevel === '2' || isAddLastLevel">
<el-button size="small" @click="showMap = true">地图标绘</el-button>
<el-form-item label="网格范围" prop="enclosure">
<map-plotting v-model="forms.points">
<el-button size="small">地图标绘</el-button>
</map-plotting>
</el-form-item>
</template>
</ai-card>
@@ -162,110 +67,30 @@
</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";
import MapPlotting from "./mapPlotting";
import AiUserPicker from "../../components/AiUserPicker";
export default {
name: "addBlock",
components: {AiUserPicker, MapPlotting},
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",
girdMemberManageList: [],
girdMemberList: []
},
showMap: false,
map: "",
mouseTool: "",
searchAddress: "",
placeSearch: "",
overlays: [],
options: [],
path: [],
location: {},
polyEditor: "",
title: "添加网格区块",
parentGirdInfo: {},
isAddLastLevel: false
};
},
computed: {
@@ -275,9 +100,6 @@ export default {
girdName: [
{required: true, message: "请输入网格名称", trigger: "change"},
],
girdLevel: [
{required: true, message: "请选择网格层级", trigger: "change"},
],
girdCode: [
{required: true, message: "请输入网格编号"},
{pattern: /^\d+$/g, message: "请输入数字"},
@@ -297,28 +119,26 @@ export default {
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.title = "编辑网格区块";
this.searchDetail();
} else {
this.forms.parentGirdId = this.params.id;
this.forms.parentGirdName = this.params.girdName;
this.isAddLastLevel = this.params.girdLevel === '1'
// this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
// this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
this.title = "添加网格区块";
this.forms = {
...this.forms,
...this.$route.query
}
}
// this.getAllUnit(this.user.info.areaId);
},
methods: {
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
cancel() {
this.$router.push({})
},
// 获取所有单位
getAllUnit(data) {
@@ -335,159 +155,15 @@ export default {
}
});
},
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.code == 0) {
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) => {
let {girdMemberManageList, girdMemberList} = this.forms
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
...this.forms,
girdMemberManageList: girdMemberManageList?.map(v => ({wxUserId: v.id})) || [],
girdMemberList: girdMemberList?.map(v => ({wxUserId: v.id})) || []
}).then((res) => {
if (res.code == 0) {
this.cancel(true)
}
@@ -499,11 +175,26 @@ export default {
});
},
searchDetail() {
let {id} = this.$route.query
this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
params: {id: this.params.id},
params: {id},
}).then((res) => {
if (res?.data) {
this.forms = {...res.data};
this.forms = {
...res.data,
girdMemberManageList: res.data.girdMemberManageList ? res.data.girdMemberManageList.map(v => {
return {
...v,
id: v.wxUserId
}
}) : [],
girdMemberList: res.data.girdMemberList ? res.data.girdMemberList.map(v => {
return {
...v,
id: v.wxUserId
}
}) : []
};
this.parentGirdInfo = res.data.parentGirdInfo;
this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
}
@@ -518,63 +209,8 @@ export default {
width: 100%;
height: 100%;
::v-deep .amap-copyright {
display: none !important;
}
::v-deep .amap-logo {
display: none !important;
}
.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;
top: 20px;
width: 280px;
overflow: hidden;
z-index: 10000;
}
.tipinput {
position: absolute;
width: 200px;
height: 38px;
left: 20px;
top: 20px;
z-index: 10000;
}
}
}
</style>