bug
This commit is contained in:
yanran200730
39
project/fengdu/app/AppGridBlock/AppGridBlock.vue
Normal file
39
project/fengdu/app/AppGridBlock/AppGridBlock.vue
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppGridBlock">
|
||||||
|
<component :is="currentPage" :instance="instance" :dict="dict"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from "./components/list";
|
||||||
|
import Add from "./components/add";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppGridBlock",
|
||||||
|
label: "网格区块",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentPage() {
|
||||||
|
return this.$route.hash == "#add" ? Add : List
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: "List",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {Add, List},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.AppGridBlock {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
217
project/fengdu/app/AppGridBlock/components/add.vue
Normal file
217
project/fengdu/app/AppGridBlock/components/add.vue
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
<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">
|
||||||
|
<ai-user-selecter isShowUser :instance="instance" v-model="forms.girdMemberManageList" :props="{label:'name', id: 'id'}"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="网格员" prop="girdMemberList">
|
||||||
|
<ai-user-selecter isShowUser :instance="instance" v-model="forms.girdMemberList" :props="{label:'name', 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">
|
||||||
|
<map-plotting v-model="forms.points">
|
||||||
|
<el-button size="small">地图标绘</el-button>
|
||||||
|
</map-plotting>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from "vuex";
|
||||||
|
import MapPlotting from "./mapPlotting";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "addBlock",
|
||||||
|
components: {MapPlotting},
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
forms: {
|
||||||
|
girdMemberManageList: [],
|
||||||
|
girdMemberList: []
|
||||||
|
},
|
||||||
|
options: [],
|
||||||
|
parentGirdInfo: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["user"]),
|
||||||
|
formRules() {
|
||||||
|
return {
|
||||||
|
girdName: [
|
||||||
|
{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() {
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.$refs["rules"].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} 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.map(v => {
|
||||||
|
return {
|
||||||
|
...v,
|
||||||
|
id: v.wxUserId,
|
||||||
|
avatar: v.photo
|
||||||
|
}
|
||||||
|
}) : [],
|
||||||
|
girdMemberList: res.data.girdMemberList ? res.data.girdMemberList.map(v => {
|
||||||
|
return {
|
||||||
|
...v,
|
||||||
|
id: v.wxUserId,
|
||||||
|
avatar: v.photo
|
||||||
|
}
|
||||||
|
}) : []
|
||||||
|
};
|
||||||
|
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%;
|
||||||
|
|
||||||
|
.footer-btn {
|
||||||
|
width: 92px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
470
project/fengdu/app/AppGridBlock/components/list.vue
Normal file
470
project/fengdu/app/AppGridBlock/components/list.vue
Normal file
@@ -0,0 +1,470 @@
|
|||||||
|
<template>
|
||||||
|
<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)">
|
||||||
|
<el-tree
|
||||||
|
:data="treeObj.treeList"
|
||||||
|
:props="treeObj.defaultProps"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
node-key="id"
|
||||||
|
ref="tree"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:defaultExpandedKeys="treeObj.defaultExpandedKeys"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
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="创建时间"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input
|
||||||
|
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"
|
||||||
|
@click="(isEdit = false), toAdd()"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
icon="iconfont iconDelete"
|
||||||
|
@click="deleteById(ids.join(','))"
|
||||||
|
:disabled="!Boolean(ids.length)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
<ai-import
|
||||||
|
ref="import"
|
||||||
|
title="导入"
|
||||||
|
name="网格区块"
|
||||||
|
url="/app/appgirdinfo/downloadGirdInfo"
|
||||||
|
importUrl="/app/appgirdinfo/importGirdInfo"
|
||||||
|
suffixName="xlsx"
|
||||||
|
:customCliker="true"
|
||||||
|
:instance="instance"
|
||||||
|
>
|
||||||
|
<template slot="tips">
|
||||||
|
<p>
|
||||||
|
如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<el-button size="small" icon="iconfont iconImport"
|
||||||
|
>导入
|
||||||
|
</el-button
|
||||||
|
>
|
||||||
|
</ai-import>
|
||||||
|
<el-button type="primary" v-if="!treeObj.treeList.length" @click="init">初始化</el-button>
|
||||||
|
</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()"
|
||||||
|
: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">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<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="`${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>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import MapPlotting from "./mapPlotting";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "List",
|
||||||
|
components: {MapPlotting},
|
||||||
|
label: "网格区块",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
treeObj: {
|
||||||
|
treeList: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: "children",
|
||||||
|
label: "girdName",
|
||||||
|
},
|
||||||
|
defaultExpandedKeys: [],
|
||||||
|
},
|
||||||
|
filterText: "",
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
searchObj: {
|
||||||
|
createTimeStr: "",
|
||||||
|
girdName: "",
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
info: {},
|
||||||
|
ids: [],
|
||||||
|
showMap: false,
|
||||||
|
map: "",
|
||||||
|
polyEditor: "",
|
||||||
|
editRow: {},
|
||||||
|
searchAddress: "",
|
||||||
|
mouseTool: "",
|
||||||
|
placeSearch: "",
|
||||||
|
path: [],
|
||||||
|
overlays: [],
|
||||||
|
isEdit: false,
|
||||||
|
fileList: [],
|
||||||
|
dialog: false,
|
||||||
|
gridInfo: {},
|
||||||
|
gridMemberColConfigs: [
|
||||||
|
{prop: "name"},
|
||||||
|
{prop: "checkType", format: v => v === '1' ? '网格员' : '网格长'}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTreeList();
|
||||||
|
this.getList();
|
||||||
|
this.dict.load("girdType", "isLastLevel", "plottingStatus", "girdMemberType");
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{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: {
|
||||||
|
handleNodeClick(val) {
|
||||||
|
this.info = this.$copy(val);
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
getTreeList() {
|
||||||
|
this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
|
||||||
|
this.treeObj.treeList = res.data.filter(e => !e.parentGirdId)
|
||||||
|
const parentGirdId = this.treeObj.treeList[0].id
|
||||||
|
|
||||||
|
this.treeObj.treeList.map(p => this.addChild(p, res.data.map(v => {
|
||||||
|
if (v.id === parentGirdId) {
|
||||||
|
this.treeObj.defaultExpandedKeys.push(v.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...v
|
||||||
|
}
|
||||||
|
}), {
|
||||||
|
parent: 'parentGirdId'
|
||||||
|
}))
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.info = this.treeObj.treeList[0]
|
||||||
|
this.$refs.tree.setCurrentKey(parentGirdId)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
init () {
|
||||||
|
this.instance.post("/app/appgirdinfo/initByCorpAreaId").then((res) => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.getTreeList();
|
||||||
|
this.$message.success("网格初始化成功!");
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
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();
|
||||||
|
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 = [];
|
||||||
|
val.map((e) => {
|
||||||
|
this.ids.push(e.id);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//添加二级网格
|
||||||
|
addTwoLevel() {
|
||||||
|
this.info = {...this.treeObj.treeList[0]};
|
||||||
|
this.toAdd()
|
||||||
|
},
|
||||||
|
toAdd() {
|
||||||
|
let {id: parentGirdId, girdName: parentGirdName} = this.info
|
||||||
|
this.$router.push({
|
||||||
|
hash: "#add", query: {parentGirdId, parentGirdName}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
this.isAdd = false;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList();
|
||||||
|
this.getTreeList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showEdit(id) {
|
||||||
|
this.$router.push({hash: "#add", query: {id}})
|
||||||
|
},
|
||||||
|
//map搜索
|
||||||
|
confirm(row, points) {
|
||||||
|
this.instance.post(`/app/appgirdinfo/updateCoordinate`, {...row, points}).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success("提交成功!")
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetSearch() {
|
||||||
|
Object.keys(this.searchObj).map((e) => {
|
||||||
|
this.searchObj[e] = "";
|
||||||
|
});
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.app-grid-block {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
:deep( .el-tree ){
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.el-tree-node__expand-icon.is-leaf {
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree__empty-text {
|
||||||
|
color: #222;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__children .el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content:hover {
|
||||||
|
background: #E8EFFF;
|
||||||
|
color: #222222;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-current > .el-tree-node__content {
|
||||||
|
color: #fff !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #2266FF;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
background: #2266FF;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .treePanel ){
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.el-tree {
|
||||||
|
min-height: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 33.33%;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
327
project/fengdu/app/AppGridBlock/components/mapPlotting.vue
Normal file
327
project/fengdu/app/AppGridBlock/components/mapPlotting.vue
Normal file
@@ -0,0 +1,327 @@
|
|||||||
|
<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 class="mapLayerSwitcher" flex>
|
||||||
|
<div class="item" :class="{current:mapType=='vector'}" @click="mapType='vector'"/>
|
||||||
|
<div class="item satellite" :class="{current:mapType=='satellite'}" @click="mapType='satellite'"/>
|
||||||
|
</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']),
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
mapType(v) {
|
||||||
|
if (v == 'satellite') {
|
||||||
|
for (const k in this.layers) {
|
||||||
|
this.layers[k].show()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (const k in this.layers) {
|
||||||
|
this.layers[k].hide()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
polyEditor: null,
|
||||||
|
placeSearch: null,
|
||||||
|
searchAddress: "",
|
||||||
|
overlays: [],
|
||||||
|
points: [],
|
||||||
|
dialog: false,
|
||||||
|
mapType: "vector",
|
||||||
|
layers: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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.layers.roadNet = new AMap.TileLayer.RoadNet({zIndex: 11})
|
||||||
|
this.layers.satellite = new AMap.TileLayer.Satellite({zIndex: 10})
|
||||||
|
this.map.addLayer(this.layers.roadNet)
|
||||||
|
this.map.addLayer(this.layers.satellite)
|
||||||
|
this.layers.roadNet.hide()
|
||||||
|
this.layers.satellite.hide()
|
||||||
|
/*end*/
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapLayerSwitcher {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 202304061607;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 5px;
|
||||||
|
width: fit-content;
|
||||||
|
height: 56px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: width 2s ease;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 56px;
|
||||||
|
border: 1px dashed #ddd;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-image: url("https://cdn.cunwuyun.cn/map/defaultMap.png");
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
background-size: 100%;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
border: 1px solid #366FFF;
|
||||||
|
display: block !important;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background-color: #366FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 0 3px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
content: "地图";
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.satellite {
|
||||||
|
background-image: url("https://cdn.cunwuyun.cn/map/satelliteMap.png");
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "卫星"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .amap-copyright ) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .amap-logo ) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user