dai 4 years ago
parent
commit
69df6752a3
  1. 2
      epmet-oper-web/public/index.html
  2. 486
      epmet-oper-web/src/views/modules/base/community/communityForm.vue

2
epmet-oper-web/public/index.html

@ -5,7 +5,7 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=XCUBZ-UYXCP-XZNDB-VI5P3-2Y3RO-6WBYO"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO"></script>
<!-- 站点配置 -->
<script>

486
epmet-oper-web/src/views/modules/base/community/communityForm.vue

@ -2,191 +2,225 @@
<div>
<div>
<div v-show="!propertyFormShow">
<el-form :inline="false"
:model="dataForm"
:rules="dataRule"
:disabled="formType==='detail'"
class="form">
<el-form-item label="小区名称"
prop="neighborHoodName"
label-width="150px"
style="display:block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder='请输入小区名称'
v-model="dataForm.neighborHoodName">
<el-form
:inline="false"
:model="dataForm"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form"
>
<el-form-item
label="小区名称"
prop="neighborHoodName"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入小区名称"
v-model="dataForm.neighborHoodName"
>
</el-input>
</el-form-item>
<el-form-item label="所属组织"
label-width="150px"
style="display:block">
<span>{{dataForm.agencyName}}</span>
<el-form-item
label="所属组织"
label-width="150px"
style="display: block"
>
<span>{{ dataForm.agencyName }}</span>
</el-form-item>
<el-form-item label="所属网格"
prop="gridId"
label-width="150px"
style="display:block">
<el-select class="item_width_1"
v-model="dataForm.gridId"
placeholder="请选择"
clearable>
<el-option v-for="item in gridList"
:key="item.gridId"
:label="item.gridName"
:value="item.gridId">
<el-form-item
label="所属网格"
prop="gridId"
label-width="150px"
style="display: block"
>
<el-select
class="item_width_1"
v-model="dataForm.gridId"
placeholder="请选择"
clearable
>
<el-option
v-for="item in gridList"
:key="item.gridId"
:label="item.gridName"
:value="item.gridId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="关联物业"
prop="propertyId"
label-width="150px"
style="display:block">
<el-select class="item_width_2"
v-model="dataForm.propertyId"
placeholder="请选择"
clearable>
<el-option v-for="item in propertyList"
:key="item.propertyId"
:label="item.propertyName"
:value="item.propertyId">
<el-form-item
label="关联物业"
prop="propertyId"
label-width="150px"
style="display: block"
>
<el-select
class="item_width_2"
v-model="dataForm.propertyId"
placeholder="请选择"
clearable
>
<el-option
v-for="item in propertyList"
:key="item.propertyId"
:label="item.propertyName"
:value="item.propertyId"
>
</el-option>
</el-select>
<el-button style="margin-left:10px"
type="primary"
size="small"
@click="handleAddProperty">添加物业</el-button>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleAddProperty"
>添加物业</el-button
>
</el-form-item>
<el-form-item label="详细地址"
prop="address"
label-width="150px"
style="display:block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder='请输入详细地址'
v-model="dataForm.address">
<el-form-item
label="详细地址"
prop="address"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入详细地址"
v-model="dataForm.address"
>
</el-input>
</el-form-item>
<el-form-item label="备注"
prop="remark"
label-width="150px"
style="display:block">
<el-input class="item_width_1"
type="textarea"
maxlength="500"
show-word-limit
:rows="3"
placeholder='请输入备注,不超过500字'
v-model="dataForm.remark"></el-input>
<el-form-item
label="备注"
prop="remark"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
type="textarea"
maxlength="500"
show-word-limit
:rows="3"
placeholder="请输入备注,不超过500字"
v-model="dataForm.remark"
></el-input>
</el-form-item>
<el-form-item label="位置坐标"
prop="longitude"
label-width="150px"
style="display:block">
<el-input class="item_width_3"
maxlength="50"
placeholder='请输入关键字'
v-model="keyWords">
<el-form-item
label="位置坐标"
prop="longitude"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入关键字"
v-model="keyWords"
>
</el-input>
<el-button style="margin-left:10px"
type="primary"
size="small"
@click="handleSearchMap">查询</el-button>
<div id="app"
class="div_map">
</div>
<div style="margin-top:10px">
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
>
<div id="app" class="div_map"></div>
<div style="margin-top: 10px">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder='请输入经度'
v-model="dataForm.longitude">
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="dataForm.longitude"
>
</el-input>
<span style="margin-left:20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder='请输入纬度'
v-model="dataForm.latitude">
<span style="margin-left: 20px">纬度</span>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="dataForm.latitude"
>
</el-input>
</div>
</el-form-item>
</el-form>
</div>
<div v-show="propertyFormShow">
<el-form :inline="false"
:model="propertyForm"
:rules="propertyRule"
class="form">
<el-form-item label="物业名称"
prop="name"
label-width="150px"
style="display:block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder='请输入小区名称'
v-model="propertyForm.name">
<el-form
:inline="false"
:model="propertyForm"
:rules="propertyRule"
class="form"
>
<el-form-item
label="物业名称"
prop="name"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入小区名称"
v-model="propertyForm.name"
>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="div_btn">
<el-button @click="handleCancle"> </el-button>
<el-button v-if="formType!='detail'"
type="primary"
@click="handleComfirm"> </el-button>
<el-button
v-if="formType != 'detail'"
type="primary"
@click="handleComfirm"
> </el-button
>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // Loading
import { requestPost } from "@/js/dai/request";
var map;
var search;
var markers;
import { requestPost } from '@/js/dai/request'
var map
var search
var markers
var infoWindowList
let loading //
export default {
data () {
data() {
return {
formType: 'add',// addeditdetail
formType: 'add', // addeditdetail
gridList: [],
propertyList: [],
neighborHoodId: '',//ID
neighborHoodId: '', //ID
dataForm: {
neighborHoodName: '', // 50
agencyId: '', // ID
agencyId: '', // ID
agencyName: '',
gridId: '', //ID
propertyId: '', //
address: '', //
remark: '', //500
location: '', //
gridId: '', //ID
propertyId: '', //
address: '', //
remark: '', //500
location: '', //
longitude: '', //
latitude: '', //
latitude: '' //
},
propertyFormShow: false,
@ -195,22 +229,18 @@ export default {
},
keyWords: ''
}
},
components: {
},
mounted () {
components: {},
mounted() {
this.initMap()
},
methods: {
// init
initMap () {
initMap() {
//
var center = new window.TMap.LatLng(39.984120, 116.307484)
var center = new window.TMap.LatLng(39.98412, 116.307484)
// map TMap.Map()
map = new window.TMap.Map(document.getElementById('app'), {
center: center, //
@ -220,50 +250,73 @@ export default {
})
console.log(map)
console.log(window)
search = new window.TMap.service.Search({ pageSize: 10 });
search = new window.TMap.service.Search({ pageSize: 10 })
//
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
geometries: []
})
infoWindowList = Array(10)
//
map.on('panend', () => {
this.handleMoveCenter()
})
},
setMarker(lat, lng) {
markers.setGeometries([])
markers.add([
{
id: '4',
styleId: 'marker',
position: new TMap.LatLng(lat, lng),
properties: {
title: 'marker4'
}
}
])
},
handleSearchMap () {
handleSearchMap() {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
infoWindow.close()
})
infoWindowList.length = 0
markers.setGeometries([])
//
search
.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds(),
bounds: map.getBounds()
})
.then((result) => {
result.data.forEach((item, index) => {
var geometries = markers.getGeometries();
var infoWindow = new window.TMap.InfoWindow({
map: map,
position: item.location,
content: `<h3>${item.title}</h3><p>地址:${item.address}</p><p>电话:${item.tel}</p>`,
offset: { x: 0, y: -50 },
}); //
infoWindow.close();
infoWindowList[index] = infoWindow;
geometries.push({
id: String(index), //
position: item.location,
});
markers.updateGeometries(geometries); //
markers.on('click', (e) => {
infoWindowList[Number(e.geometry.id)].open();
}); //
});
});
let { data } = result
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng }
} = data[0]
map.setCenter(new TMap.LatLng(lat, lng))
this.setMarker(lat, lng)
this.dataForm.latitude = lat
this.dataForm.longitude = lng
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter() {
//
const center = map.getCenter()
const lat = center.getLat()
const lng = center.getLng()
this.dataForm.latitude = lat
this.dataForm.longitude = lng
this.setMarker(lat, lng)
},
async initForm (type, row) {
async initForm(type, row) {
this.formType = type
if (row) {
this.neighborHoodId = row.neighborHoodId
@ -276,8 +329,8 @@ export default {
},
//
async loadAgency () {
const url = "/epmetuser/customerstaff/staffbasicinfo"
async loadAgency() {
const url = '/epmetuser/customerstaff/staffbasicinfo'
let params = {}
const { data, code, msg } = await requestPost(url, params)
@ -285,15 +338,13 @@ export default {
if (code === 0) {
this.dataForm.agencyId = data.agencyId
this.dataForm.agencyName = data.agencyName
} else {
this.$message.error(msg)
}
},
//
async loadGrid () {
const url = "/gov/org/grid/allgrids"
async loadGrid() {
const url = '/gov/org/grid/allgrids'
// const url = "https://epmet-dev.elinkservice.cn:7082/api/apimock-v2/95518686fa128a53f64c678906848062/gov/org/grid/allgrids"
let params = {
agencyId: this.dataForm.agencyId
@ -303,14 +354,13 @@ export default {
if (code === 0) {
this.gridList = data
} else {
this.$message.error(msg)
}
},
//
async loadProperty () {
const url = "/gov/org/propertymanagement/list"
async loadProperty() {
const url = '/gov/org/propertymanagement/list'
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/list"
let params = {}
@ -318,33 +368,30 @@ export default {
if (code === 0) {
this.propertyList = data
} else {
this.$message.error(msg)
}
},
handleAddProperty () {
handleAddProperty() {
this.propertyForm.name = ''
this.propertyFormShow = true
},
async handleComfirm () {
async handleComfirm() {
if (this.propertyFormShow) {
this.addProperty()
} else {
this.addCommunity()
}
},
async addCommunity () {
let url = ""
async addCommunity() {
let url = ''
if (this.formType === 'add') {
url = "/gov/org/neighborhood/neighborhoodadd"
url = '/gov/org/neighborhood/neighborhoodadd'
// url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
} else {
url = "/gov/org/neighborhood/neighborhoodupdate"
url = '/gov/org/neighborhood/neighborhoodupdate'
this.dataForm.neighborHoodId = this.neighborHoodId
}
@ -353,19 +400,17 @@ export default {
if (code === 0) {
this.$message({
type: "success",
message: "添加小区成功"
});
type: 'success',
message: '添加小区成功'
})
this.propertyFormShow = false
} else {
this.$message.error(msg)
}
},
async addProperty () {
const url = "/gov/org/propertymanagement/add"
async addProperty() {
const url = '/gov/org/propertymanagement/add'
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/add"
let params = {
name: this.propertyForm.name
@ -374,35 +419,28 @@ export default {
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message({
type: "success",
message: "添加物业成功"
});
type: 'success',
message: '添加物业成功'
})
this.propertyForm.name = ''
this.propertyFormShow = false
this.loadProperty()
} else {
this.$message.error(msg)
}
},
handleCancle () {
handleCancle() {
if (this.propertyFormShow) {
this.propertyForm.name = ''
this.propertyFormShow = false
} else {
this.$emit('dialogCancle')
}
},
resetData () {
},
resetData() {},
//
startLoading () {
startLoading() {
loading = Loading.service({
lock: true, //
text: '正在加载……', //
@ -410,7 +448,7 @@ export default {
})
},
//
endLoading () {
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
@ -418,11 +456,16 @@ export default {
}
},
computed: {
dataRule () {
dataRule() {
return {
neighborHoodName: [
{ required: true, message: '小区名称不能为空', trigger: 'blur' },
{ min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' }
{
min: 1,
max: 50,
message: '小区名称长度在 1 到 50个字符',
trigger: 'blur'
}
],
agencyId: [
{ required: true, message: '所属组织不能为空', trigger: 'blur' }
@ -436,22 +479,19 @@ export default {
longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]
}
},
propertyRule () {
propertyRule() {
name: [
{ required: true, message: '物业名称不能为空', trigger: 'blur' },
{ required: true, message: '物业名称不能为空', trigger: 'blur' }
// { min: 1, max: 50, message: ' 1 50', trigger: 'blur' }
]
}
},
props: {
}
props: {}
}
</script>
<style scoped >
<style scoped>
.item_width_1 {
width: 500px;
}

Loading…
Cancel
Save