dai 4 years ago
parent
commit
69df6752a3
  1. 2
      epmet-oper-web/public/index.html
  2. 384
      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 charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" /> <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> <script>

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

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

Loading…
Cancel
Save