无等级网格版合并
This commit is contained in:
aixianling
@@ -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>
|
||||
|
||||
@@ -1,84 +1,86 @@
|
||||
<template>
|
||||
<div class="app-grid-block">
|
||||
<section class="app-grid-block">
|
||||
<ai-list>
|
||||
<template slot="title">
|
||||
<ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="left">
|
||||
<ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
|
||||
<ai-tree-menu title="网格层级" @search="v=> $refs.tree.filter(v)">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
/>
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current>
|
||||
<template slot-scope="{node,data}">
|
||||
<div v-text="node.label"/>
|
||||
</template>
|
||||
</el-tree>
|
||||
</ai-tree-menu>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<el-date-picker
|
||||
v-model="searchObj.createTimeStr"
|
||||
type="date"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="small"
|
||||
placeholder="创建时间"
|
||||
v-model="searchObj.createTimeStr"
|
||||
type="date"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="small"
|
||||
placeholder="创建时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.girdName"
|
||||
size="small"
|
||||
placeholder="输入网格名称"
|
||||
@keyup.enter.native="(page.current = 1), getList()"
|
||||
clearable
|
||||
v-throttle="() => {page.current = 1, getList()}"
|
||||
@clear="(searchObj.girdName = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch"
|
||||
v-model="searchObj.girdName"
|
||||
size="small"
|
||||
placeholder="输入网格名称"
|
||||
@keyup.enter.native="(page.current = 1), getList()"
|
||||
clearable
|
||||
@clear="(searchObj.girdName = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch"
|
||||
/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="iconfont iconAdd"
|
||||
:disabled="info.girdLevel === '3'"
|
||||
@click="(isEdit = false), toAdd()"
|
||||
>新增
|
||||
type="primary"
|
||||
icon="iconfont iconAdd"
|
||||
@click="(isEdit = false), toAdd()"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)"
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<ai-download
|
||||
:instance="instance"
|
||||
url="/app/appgirdinfo/exportGirdInfo"
|
||||
:params="{ ...searchObj, ids: ids.join(',') }"
|
||||
fileName="网格区块"
|
||||
:instance="instance"
|
||||
url="/app/appgirdinfo/exportGirdInfo"
|
||||
:params="{ ...searchObj, ids: ids.join(',') }"
|
||||
fileName="网格区块"
|
||||
>
|
||||
<el-button icon="iconfont iconExported" size="small"
|
||||
>导出全部</el-button
|
||||
>导出全部
|
||||
</el-button
|
||||
>
|
||||
</ai-download>
|
||||
<ai-import
|
||||
ref="import"
|
||||
title="导入"
|
||||
name="网格区块"
|
||||
url="/app/appgirdinfo/downloadGirdInfo"
|
||||
importUrl="/app/appgirdinfo/importGirdInfo"
|
||||
suffixName="xlsx"
|
||||
:customCliker="true"
|
||||
:instance="instance"
|
||||
ref="import"
|
||||
title="导入"
|
||||
name="网格区块"
|
||||
url="/app/appgirdinfo/downloadGirdInfo"
|
||||
importUrl="/app/appgirdinfo/importGirdInfo"
|
||||
suffixName="xlsx"
|
||||
:customCliker="true"
|
||||
:instance="instance"
|
||||
>
|
||||
<template slot="tips">
|
||||
<p>
|
||||
@@ -86,104 +88,60 @@
|
||||
</p>
|
||||
</template>
|
||||
<el-button size="small" icon="iconfont iconImport"
|
||||
>导入</el-button
|
||||
>导入
|
||||
</el-button
|
||||
>
|
||||
</ai-import>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
class="mt10"
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
||||
@getList="getList()"
|
||||
>
|
||||
<el-table-column
|
||||
slot="selectId"
|
||||
type="selection"
|
||||
align="center"
|
||||
width="40"
|
||||
>
|
||||
class="mt10"
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="v=>ids=v.map((e) => e.id)"
|
||||
@getList="getList()"
|
||||
:dict="dict">
|
||||
<el-table-column label="网格成员" slot="user" align="center" width="160">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="showGridMembers(row)">{{ row.girdMemberNumber || 0 }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
slot="options"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="160">
|
||||
label="操作"
|
||||
slot="options"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="160">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="see(row)">编辑</el-button>
|
||||
<el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</div>
|
||||
<el-button type="text" @click="showEdit(row.id)">编辑</el-button>
|
||||
<map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog
|
||||
title="网格范围"
|
||||
:visible.sync="showMap"
|
||||
:customFooter="true"
|
||||
:destroyOnClose="true"
|
||||
border
|
||||
width="850px"
|
||||
>
|
||||
<div class="map">
|
||||
<div class="tipinput">
|
||||
<el-input
|
||||
v-if="editRow.plottingStatus == 0"
|
||||
v-model="searchAddress"
|
||||
@change="addressChange"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
id="tipinput"
|
||||
size="medium"
|
||||
style="width: 200px"
|
||||
></el-input>
|
||||
</div>
|
||||
<div id="panel" v-if="editRow.plottingStatus == 0"></div>
|
||||
<div class="container" id="container"></div>
|
||||
<el-button-group
|
||||
style="margin-top: 8px"
|
||||
v-if="editRow.plottingStatus == 1"
|
||||
>
|
||||
<el-button type="primary" size="mini" @click="beginPoltting()"
|
||||
>开始编辑</el-button
|
||||
>
|
||||
<el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group
|
||||
style="margin-top: 8px"
|
||||
v-if="editRow.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="confirm()"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
<ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
|
||||
width="700px">
|
||||
<ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
|
||||
:isShowPagination="false" :show-header="false"/>
|
||||
<template #footer>
|
||||
<el-button @click="dialog=false">关闭</el-button>
|
||||
</template>
|
||||
</ai-dialog>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import MapPlotting from "./mapPlotting";
|
||||
|
||||
export default {
|
||||
name: "List",
|
||||
components: {MapPlotting},
|
||||
label: "网格区块",
|
||||
props: {
|
||||
instance: Function,
|
||||
@@ -223,167 +181,95 @@ export default {
|
||||
path: [],
|
||||
overlays: [],
|
||||
isEdit: false,
|
||||
searchId: "",
|
||||
fileList: [],
|
||||
location: {}
|
||||
dialog: false,
|
||||
gridInfo: {},
|
||||
gridMemberColConfigs: [
|
||||
{prop: "name"},
|
||||
{prop: "checkType", formart: v => v === '1' ? '网格员' : '网格长'}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTreeList();
|
||||
this.getList();
|
||||
this.getCorpLocation()
|
||||
this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
|
||||
this.dict.load("girdType", "isLastLevel", "plottingStatus", "girdMemberType");
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
let _ = this;
|
||||
return [
|
||||
{ type: 'selection'},
|
||||
{
|
||||
prop: "girdName",
|
||||
align: "left",
|
||||
label: "网格名称",
|
||||
},
|
||||
{
|
||||
prop: "girdCode",
|
||||
align: "center",
|
||||
label: "网格编码",
|
||||
},
|
||||
{
|
||||
prop: "girdType",
|
||||
align: "center",
|
||||
label: "网格类型",
|
||||
render(h, { row }) {
|
||||
return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "girdLevel",
|
||||
align: "center",
|
||||
label: "网格层级",
|
||||
render(h, { row }) {
|
||||
return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "plottingStatus",
|
||||
align: "center",
|
||||
label: "标绘状态",
|
||||
render(h, { row }) {
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
color: _.dict.getColor("plottingStatus", row.plottingStatus),
|
||||
},
|
||||
},
|
||||
_.dict.getLabel("plottingStatus", row.plottingStatus)
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "createTime",
|
||||
align: "center",
|
||||
label: "创建时间",
|
||||
render(h, { row }) {
|
||||
return h("span", {}, row.createTime.substring(0, 11));
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "girdMemberNames",
|
||||
align: "center",
|
||||
width: 200,
|
||||
label: "网格员",
|
||||
},
|
||||
{type: 'selection'},
|
||||
{prop: "girdName", align: "left", label: "网格名称",},
|
||||
{slot: 'user'},
|
||||
{prop: "plottingStatus", align: "center", label: "标绘状态", dict: "plottingStatus"},
|
||||
{prop: "createTime", align: "center", label: "创建时间"},
|
||||
{slot: "options"}
|
||||
];
|
||||
},
|
||||
isTopGrid() {
|
||||
return this.info.id == this.treeObj.treeList?.[0]?.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCorpLocation(){
|
||||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||||
if(res.code==0){
|
||||
this.location = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(val) {
|
||||
this.info = { ...val };
|
||||
this.searchId = val.id;
|
||||
this.info = this.$copy(val);
|
||||
this.getList();
|
||||
},
|
||||
getTreeList() {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/listByTop", null, null)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = [...res.data];
|
||||
this.info = { ...this.treeObj.treeList[0] };
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.treeObj.treeList.length && this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
|
||||
})
|
||||
}
|
||||
});
|
||||
this.instance.post("/app/appgirdinfo/listAllByTop").then(res => {
|
||||
if (res?.data) {
|
||||
this.treeObj.treeList = [res.data];
|
||||
this.info = res.data
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(this.info.id)
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.girdName.indexOf(value) !== -1;
|
||||
},
|
||||
deleteById(ids) {
|
||||
ids &&
|
||||
this.$confirm("是否要删除该网格区块？", {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/delete", null, {
|
||||
params: { ids },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
deleteTree(ids) {
|
||||
ids &&
|
||||
this.$confirm("是否要删除该网格区块？", {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/delete", null, {
|
||||
params: { ids },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
|
||||
this.getTreeList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
getList() {
|
||||
this.instance
|
||||
.post("/app/appgirdinfo/list", null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
ids && this.$confirm("删除网格后，会清除网格内网格员的责任家庭信息，如有下级网格，会同步删除下级网格所有数据!", {
|
||||
type: "error",
|
||||
}).then(() => {
|
||||
this.instance.post("/app/appgirdinfo/delete", null, {params: {ids}}).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getList();
|
||||
this.getTreeList();
|
||||
}
|
||||
});
|
||||
}).catch(() => 0);
|
||||
},
|
||||
deleteTree(ids) {
|
||||
ids && this.$confirm("是否要删除该网格区块？", {
|
||||
type: "error",
|
||||
}).then(() => {
|
||||
this.instance.post("/app/appgirdinfo/delete", null, {
|
||||
params: {ids}
|
||||
}).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getTreeList();
|
||||
}
|
||||
});
|
||||
}).catch(() => 0);
|
||||
},
|
||||
getList() {
|
||||
this.instance.post("/app/appgirdinfo/list", null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
parentGirdId: this.isTopGrid ? '' : this.info.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
@@ -393,14 +279,13 @@ export default {
|
||||
},
|
||||
//添加二级网格
|
||||
addTwoLevel() {
|
||||
this.info = { ...this.treeObj.treeList[0] };
|
||||
this.info = {...this.treeObj.treeList[0]};
|
||||
this.toAdd()
|
||||
},
|
||||
toAdd() {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: this.info,
|
||||
isEdit: this.isEdit
|
||||
let {id: parentGirdId, girdName: parentGirdName} = this.info
|
||||
this.$router.push({
|
||||
hash: "#add", query: {parentGirdId, parentGirdName}
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
@@ -410,165 +295,16 @@ export default {
|
||||
this.getTreeList();
|
||||
});
|
||||
},
|
||||
poltting(row) {
|
||||
this.showMap = true;
|
||||
this.editRow = { ...row };
|
||||
AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: [], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("container", {
|
||||
resizeEnable: true,
|
||||
zoom: 14,
|
||||
});
|
||||
if (this.editRow.plottingStatus == 1) {
|
||||
let path = [];
|
||||
this.editRow.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.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();
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
see(row) {
|
||||
this.info = { ...row };
|
||||
this.isEdit = true;
|
||||
this.toAdd()
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
showEdit(id) {
|
||||
this.$router.push({hash: "#add", query: {id}})
|
||||
},
|
||||
//map搜索
|
||||
addressChange(val) {
|
||||
this.placeSearch.search(val);
|
||||
},
|
||||
close() {
|
||||
this.mouseTool.close(true);
|
||||
},
|
||||
clear() {
|
||||
this.map.remove(this.overlays);
|
||||
this.overlays = [];
|
||||
this.path = [];
|
||||
},
|
||||
beginPoltting() {
|
||||
this.polyEditor.open();
|
||||
},
|
||||
finishPoltting() {
|
||||
this.polyEditor.close();
|
||||
},
|
||||
confirm() {
|
||||
let path = [];
|
||||
if (this.editRow.plottingStatus == 1) {
|
||||
this.polyEditor
|
||||
.getTarget()
|
||||
.getPath()
|
||||
.map((e) => {
|
||||
path.push({ lng: e.lng, lat: e.lat });
|
||||
});
|
||||
} else {
|
||||
path = [...this.path];
|
||||
}
|
||||
delete this.editRow.points;
|
||||
this.instance
|
||||
.post(
|
||||
`/app/appgirdinfo/addOrUpdate`,
|
||||
{
|
||||
...this.editRow,
|
||||
points: path,
|
||||
},
|
||||
null
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.getList();
|
||||
this.showMap = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
eventOn() {
|
||||
this.path = [];
|
||||
this.overlays = [];
|
||||
this.map.on("mousemove", this.showInfoMove, this);
|
||||
this.mouseTool.on("draw", ({ type, obj }) => {
|
||||
obj.getPath().map((e) => {
|
||||
this.path.push({ lat: e.getLat(), lng: e.getLng() });
|
||||
});
|
||||
this.overlays.push(obj);
|
||||
confirm(row, points) {
|
||||
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
resetSearch() {
|
||||
@@ -577,6 +313,19 @@ export default {
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
showGridMembers(row) {
|
||||
if (row.girdMemberNumber > 0) {
|
||||
this.gridInfo = this.$copy(row)
|
||||
this.instance.post("/app/appgirdmemberinfo/listByGirdIdByThree", null, {
|
||||
params: {girdId: row.id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.gridInfo.tableData = res.data
|
||||
this.dialog = true
|
||||
}
|
||||
})
|
||||
} else this.$message.warning("当前网格无成员")
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -585,11 +334,12 @@ export default {
|
||||
.app-grid-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent!important;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
@@ -616,52 +366,60 @@ export default {
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
|
||||
.el-tooltip {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 780px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
::v-deep.fullscreenMap {
|
||||
.el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.container {
|
||||
width: 760px;
|
||||
height: 420px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #d0d4dc;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
#panel {
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
z-index: 10000;
|
||||
}
|
||||
.ai-dialog__content {
|
||||
max-height: unset !important;
|
||||
padding-bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
.tipinput {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 38px;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 10000;
|
||||
.ai-dialog__content--wrapper {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
233
packages/grid/AppGridBlock/components/mapPlotting.vue
Normal file
233
packages/grid/AppGridBlock/components/mapPlotting.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<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"
|
||||
@change="addressChange"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
id="tipinput"
|
||||
size="medium"/>
|
||||
</div>
|
||||
<div id="panel"/>
|
||||
<div class="container fill" id="container"/>
|
||||
<div class="operationBtns" v-if="map">
|
||||
<el-alert type="success" title="操作说明:" :closable="false">
|
||||
<li>1.双击覆盖物即可编辑</li>
|
||||
<li>2.编辑状态,对点双击可删除该点</li>
|
||||
<li>3.绘制状态,右键结束绘制</li>
|
||||
<li>4.结束编辑才能保存绘制的覆盖物信息</li>
|
||||
</el-alert>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="handleAdd">新建</el-button>
|
||||
<el-button @click="polyEditor.close()">结束编辑</el-button>
|
||||
<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",
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "change"
|
||||
},
|
||||
props: {
|
||||
title: {default: "地图标绘"},
|
||||
value: Array
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
polyEditor: null,
|
||||
placeSearch: null,
|
||||
searchAddress: "",
|
||||
overlays: [],
|
||||
points: [],
|
||||
dialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addressChange(val) {
|
||||
this.placeSearch.search(val);
|
||||
},
|
||||
clear() {
|
||||
this.map.remove(this.overlays);
|
||||
this.overlays = [];
|
||||
this.points = []
|
||||
},
|
||||
handleAdd() {
|
||||
if (this.points?.length == 0) {
|
||||
let {polyEditor} = this
|
||||
polyEditor.close();
|
||||
polyEditor.setTarget();
|
||||
polyEditor.open();
|
||||
} else this.$message.error("请先清除已标绘图形!")
|
||||
},
|
||||
initMap() {
|
||||
setTimeout(() => AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["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,
|
||||
});
|
||||
this.placeSearch = new AMap.PlaceSearch({
|
||||
pageSize: 5, // 单页显示结果条数
|
||||
pageIndex: 1, // 页码
|
||||
city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
|
||||
citylimit: true, //是否强制限制在设置的城市内搜索
|
||||
map: this.map, // 展现结果的地图实例
|
||||
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
});
|
||||
this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
|
||||
this.polyEditor.addAdsorbPolygons(target)
|
||||
target.on("dblclick", () => {
|
||||
this.polyEditor.setTarget(target);
|
||||
this.polyEditor.open()
|
||||
})
|
||||
})
|
||||
this.polyEditor.on('end', ({target}) => {
|
||||
if (target) {
|
||||
this.overlays.push(target);
|
||||
this.points = target.getPath().map(e => ({lat: e.getLat(), lng: e.getLng()}))
|
||||
}
|
||||
});
|
||||
if (this.value?.length > 0) {
|
||||
let path = this.value.map(e => [e.lng, e.lat]);
|
||||
let polygon = new AMap.Polygon({
|
||||
path,
|
||||
strokeColor: "#FF33FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.4,
|
||||
fillColor: "#1791fc",
|
||||
})
|
||||
this.map.add([polygon]);
|
||||
this.map.setFitView();
|
||||
this.polyEditor.addAdsorbPolygons(polygon)
|
||||
polygon.on('dblclick', () => {
|
||||
this.polyEditor.setTarget(polygon);
|
||||
this.polyEditor.open()
|
||||
});
|
||||
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;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.container {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
#panel {
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.tipinput {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 38px;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.operationBtns {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
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