Browse Source

楼宇

master
dai 2 years ago
parent
commit
3a62045f53
  1. 519
      src/views/modules/base/community/buildForm.vue
  2. 1
      src/views/modules/base/community/buildTable.vue
  3. 616
      src/views/modules/base/community/communityForm.vue
  4. 1
      src/views/modules/base/community/communityTable.vue

519
src/views/modules/base/community/buildForm.vue

@ -1,50 +1,68 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form ref="ref_form"
<el-form
ref="ref_form"
:inline="true"
:model="dataForm"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form">
<el-form-item label="所属小区"
class="form"
>
<el-form-item
label="所属小区"
label-width="150px"
style="display: block">
<span>{{ agencyObj.agencyName }}{{ agencyObj.gridName }}{{ agencyObj.label }}</span>
style="display: block"
>
<span
>{{ agencyObj.agencyName }}{{ agencyObj.gridName }}{{
agencyObj.label
}}</span
>
</el-form-item>
<el-form-item label="楼栋名称"
<el-form-item
label="楼栋名称"
prop="buildingName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="10"
placeholder="请输入楼栋名称"
v-model="dataForm.buildingName">
v-model="dataForm.buildingName"
>
</el-input>
</el-form-item>
<el-form-item label="楼栋编码"
<el-form-item
label="楼栋编码"
prop="coding"
label-width="150px"
style="display: block">
<el-input class="item_width_2"
style="display: block"
>
<el-input
class="item_width_2"
maxlength="50"
placeholder="请输入楼栋编码"
v-model="dataForm.coding">
v-model="dataForm.coding"
>
</el-input>
<el-button style="margin-left: 10px"
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleCode">生成</el-button>
@click="handleCode"
>生成</el-button
>
</el-form-item>
<el-form-item label="楼栋类型"
<el-form-item
label="楼栋类型"
prop="type"
label-width="150px"
style="display: block">
style="display: block"
>
<el-radio-group v-model="buildType">
<el-radio :label="'1'">商品房</el-radio>
<el-radio :label="'2'">自建房</el-radio>
<el-radio :label="'3'">别墅</el-radio>
@ -58,337 +76,387 @@
v-model="dataForm.sort"
label="排序"></el-input-number>
</el-form-item> -->
<el-form-item label="单元数"
<el-form-item
label="单元数"
style="display: block"
prop="totalUnitNum"
label-width="150px">
<el-input-number class="item_width_4"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="dataForm.totalUnitNum"
:min="1"
:max="9999"
label="单元数"></el-input-number>
label="单元数"
></el-input-number>
</el-form-item>
<el-form-item label="层数"
<el-form-item
label="层数"
style="display: block"
prop="totalFloorNum"
label-width="150px">
<el-input-number class="item_width_4"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="dataForm.totalFloorNum"
:min="0"
:max="9999"
label="层数"></el-input-number>
label="层数"
></el-input-number>
</el-form-item>
<el-form-item label="总户数"
<el-form-item
label="总户数"
style="display: block"
prop="totalHouseNum"
label-width="150px">
<el-input-number class="item_width_4"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="dataForm.totalHouseNum"
:min="0"
:max="9999"
label="总户数"></el-input-number>
label="总户数"
></el-input-number>
</el-form-item>
<el-form-item label="人口数"
<el-form-item
label="人口数"
style="display: block"
prop="realPerson"
label-width="150px">
<el-input-number class="item_width_4"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="dataForm.realPerson"
:min="0"
:max="9999"
label="人口数"></el-input-number>
label="人口数"
></el-input-number>
</el-form-item>
<el-form-item label="楼长姓名"
<el-form-item
label="楼长姓名"
prop="buildingLeaderName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
style="display: block"
>
<el-input
class="item_width_1"
placeholder="请输入楼长姓名"
v-model="dataForm.buildingLeaderName">
v-model="dataForm.buildingLeaderName"
>
</el-input>
</el-form-item>
<el-form-item label="楼长电话"
<el-form-item
label="楼长电话"
prop="buildingLeaderMobile"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type='number'
style="display: block"
>
<el-input
class="item_width_1"
type="number"
placeholder="请输入楼长电话"
v-model="dataForm.buildingLeaderMobile">
v-model="dataForm.buildingLeaderMobile"
>
</el-input>
</el-form-item>
<el-form-item label="地图位置"
<el-form-item
label="地图位置"
prop="longitude"
label-width="150px"
style="display: block">
style="display: block"
>
<div style="width: 500px">
<el-select v-model="searchValue"
<el-select
v-model="searchValue"
filterable
style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
:loading="loading"
>
<el-option
v-for="(item, index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<div id="app_build"
class="div_map"></div>
<div id="map" class="div_map"></div>
</div>
</el-form-item>
<el-form-item label="楼栋地址"
<el-form-item
label="楼栋地址"
prop="coordinatePosition"
label-width="150px"
style="display: block">
style="display: block"
>
<!-- <span>{{ dataForm.coordinatePosition }}</span> -->
<el-input class="item_width_1"
<el-input
class="item_width_1"
placeholder="请选择楼栋地址"
v-model="dataForm.coordinatePosition" />
v-model="dataForm.coordinatePosition"
/>
</el-form-item>
</el-form>
</div>
<div class="div_btn">
<el-button size="small"
@click="handleCancle"> </el-button>
<el-button size="small"
<el-button size="small" @click="handleCancle"> </el-button>
<el-button
size="small"
v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"> </el-button>
@click="handleComfirm"
> </el-button
>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // Loading
import { requestPost } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
var map
var search
var markers
var infoWindowList
let loading //
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // Loading
import { requestPost } from "@/js/dai/request";
import daiMap from "@/utils/dai-map2";
var map;
let loading; //
export default {
data() {
return {
formType: 'add', // addeditdetail
formType: "add", // addeditdetail
searchOptions: [],
searchValue: '',
searchValue: "",
resultList: [],
loading: false,
btnDisable: false,
buildingId: '', //ID
buildingId: "", //ID
buildType: "1",
dataForm: {
agencyId: '', // ID
agencyName: '',
gridId: '', //ID
neighborHoodId: '',//id
buildingName: '',//
agencyId: "", // ID
agencyName: "",
gridId: "", //ID
neighborHoodId: "", //id
buildingName: "", //
// sort: 0,//
totalUnitNum: 1, //
totalFloorNum: 0, //
totalHouseNum: 0, //
realPerson: 0,
buildingLeaderName: '',//
buildingLeaderMobile: '',//
type: '',//
coordinatePosition: '',
sysCoding: '',
coding: '',
location: '', //
longitude: '', //
latitude: '' //
buildingLeaderName: "", //
buildingLeaderMobile: "", //
type: "", //
coordinatePosition: "",
sysCoding: "",
coding: "",
location: "", //
longitude: "", //
latitude: "", //
},
keyWords: '',
keyWords: "",
agencyObj: {},
}
mapLoaded: false,
};
},
components: {},
mounted () {
},
mounted() {},
methods: {
async initForm(type, row, agencyObj) {
this.$refs.ref_form.resetFields();
let { latitude, longitude } = this.$store.state.user;
this.agencyObj = agencyObj
this.dataForm.agencyId = agencyObj.agencyId
this.dataForm.gridId = agencyObj.gridId
this.dataForm.neighborHoodId = agencyObj.id
this.agencyObj = agencyObj;
this.dataForm.agencyId = agencyObj.agencyId;
this.dataForm.gridId = agencyObj.gridId;
this.dataForm.neighborHoodId = agencyObj.id;
this.formType = type
this.formType = type;
if (row) {
this.dataForm = JSON.parse(JSON.stringify(row))
this.buildingId = this.dataForm.buildingId
this.dataForm = JSON.parse(JSON.stringify(row));
this.buildingId = this.dataForm.buildingId;
// this.buildType = this.dataForm.buildingTypeKey
this.buildType = this.dataForm.type
this.buildType = this.dataForm.type;
} else {
this.dataForm.latitude = latitude
this.dataForm.longitude = longitude
this.dataForm.latitude = latitude;
this.dataForm.longitude = longitude;
}
this.$nextTick(() => {
if (!map) {
this.initMap(this.dataForm.latitude, this.dataForm.longitude);
latitude =
this.dataForm.latitude && this.dataForm.latitude != "0"
? this.dataForm.latitude
: latitude;
longitude =
this.dataForm.longitude && this.dataForm.longitude != "0"
? this.dataForm.longitude
: longitude;
if (!this.mapLoaded) {
this.initMap(latitude || latitude, longitude);
this.mapLoaded = true;
} else {
map.setCenter(this.dataForm.latitude, this.dataForm.longitude);
map.setMarker(this.dataForm.latitude, this.dataForm.longitude);
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
}
})
});
},
async handleComfirm() {
this.btnDisable = true
this.btnDisable = true;
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.dataForm.type = this.buildType
this.$refs['ref_form'].validate((valid, messageObj) => {
this.btnDisable = false;
}, 10000);
this.dataForm.type = this.buildType;
this.$refs["ref_form"].validate((valid, messageObj) => {
if (!valid) {
this.btnDisable = false
app.util.validateRule(messageObj)
this.btnDisable = false;
app.util.validateRule(messageObj);
} else {
this.addBuild()
this.addBuild();
}
})
});
},
async handleCode() {
const { data, code, msg } = await requestPost(
"/gov/org/houseInformation/getBuildingCoding/" + this.dataForm.neighborHoodId);
console.log('data----', data)
console.log('code----', code)
console.log('msg----', msg)
"/gov/org/houseInformation/getBuildingCoding/" +
this.dataForm.neighborHoodId
);
console.log("data----", data);
console.log("code----", code);
console.log("msg----", msg);
if (msg == "success" && code == 0) {
this.dataForm.coding = data.coding
this.dataForm.sysCoding = data.sysCoding
this.dataForm.coding = data.coding;
this.dataForm.sysCoding = data.sysCoding;
}
},
async addBuild() {
if (this.dataForm.buildingLeaderMobile) {
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //
if (this.dataForm.buildingLeaderMobile && regPhone.test(this.dataForm.buildingLeaderMobile) === false) {
this.btnDisable = false
if (
this.dataForm.buildingLeaderMobile &&
regPhone.test(this.dataForm.buildingLeaderMobile) === false
) {
this.btnDisable = false;
this.$message({
type: 'warning',
message: '请输入正确的楼主手机'
})
type: "warning",
message: "请输入正确的楼主手机",
});
return false;
}
}
let url = ''
if (this.formType === 'add') {
url = '/gov/org/building/buildingadd'
let url = "";
if (this.formType === "add") {
url = "/gov/org/building/buildingadd";
} else {
url = '/gov/org/building/buildingupdate'
url = "/gov/org/building/buildingupdate";
this.dataForm.buildingId = this.buildingId
this.dataForm.buildingId = this.buildingId;
}
const { data, code, msg } = await requestPost(url, this.dataForm)
const { data, code, msg } = await requestPost(url, this.dataForm);
if (code === 0) {
this.$message({
type: 'success',
message: '操作成功'
})
this.resetData()
this.btnDisable = false
this.$emit('dialogOk')
type: "success",
message: "操作成功",
});
this.resetData();
this.btnDisable = false;
this.$emit("dialogOk");
} else {
this.btnDisable = false
this.$message.error(msg)
this.btnDisable = false;
this.$message.error(msg);
}
},
handleCancle() {
this.resetData()
this.$emit('dialogCancle')
this.resetData();
this.$emit("dialogCancle");
},
// init
initMap(latitude, longitude) {
map = new daiMap(
document.getElementById("app_build"),
document.getElementById("map"),
{ latitude, longitude },
{
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
// pitch: 43.5, //
// rotation: 45, //
// layers: "img_c,cva_c",
}
);
//
map.on("dragend", (e) => {
this.handleMoveCenter(e);
//
const { lat, lng } = map.getCenter();
this.handleMoveCenter(lat, lng);
});
//
map.on("click", (e) => {
const {
lnglat: { lat, lng },
} = e;
this.handleMoveCenter(lat, lng);
});
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
async handleMoveCenter () {
//
const { lat, lng } = map.getCenter();
async handleMoveCenter(lat, lng) {
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
map.setMarker(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.dataForm.coordinatePosition = data.address
this.searchValue = data.address
this.searchOptions = []
this.dataForm.address = data.address;
this.searchValue = data.address;
this.searchOptions = [];
}
},
async remoteMethod(query) {
if (query !== '') {
if (query !== "") {
this.loading = true;
const { msg, data } = await map.searchNearby(query);
this.loading = false;
this.resultList = []
if (msg == "success" && data.resultList && data.resultList.length > 0) {
this.resultList = [];
if (
msg == "success" &&
data.resultList &&
data.resultList.length > 0
) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
this.resultList = data.resultList;
this.searchOptions = this.resultList.map((item) => {
return {
value: `${item.hotPointID}`,
label: `${item.address + item.name}`,
};
});
}
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
value: "0",
label: "未检索到结果",
},
];
}
} else {
this.searchOptions = [];
@ -396,81 +464,97 @@ export default {
},
handleClickKey(index) {
let selPosition = this.resultList[index]
let lonlat = selPosition.lonlat.split(" ")
let selPosition = this.resultList[index];
let lonlat = selPosition.lonlat.split(" ");
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.dataForm.latitude = lonlat[1];
this.dataForm.longitude = lonlat[0];
this.dataForm.coordinatePosition = selPosition.address + selPosition.name
this.dataForm.coordinatePosition =
selPosition.address + selPosition.name;
},
resetData() {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
this.buildingId = '' //ID
this.buildType = '1'
this.searchValue = "";
this.searchOptions = [];
this.resultList = [];
this.buildingId = ""; //ID
this.buildType = "1";
this.dataForm = {
agencyId: '', // ID
agencyName: '',
gridId: '', //ID
neighborHoodId: '',//id
buildingName: '',//
agencyId: "", // ID
agencyName: "",
gridId: "", //ID
neighborHoodId: "", //id
buildingName: "", //
// sort: 0,//
totalUnitNum: 1, //
totalFloorNum: 0, //
totalHouseNum: 0, //
realPerson: 0,
buildingLeaderName: '',//
buildingLeaderMobile: '',//
type: '',//
location: '', //
longitude: '', //
latitude: '', //
coding: '',
sysCoding: '',
coordinatePosition: ''
}
buildingLeaderName: "", //
buildingLeaderMobile: "", //
type: "", //
location: "", //
longitude: "", //
latitude: "", //
coding: "",
sysCoding: "",
coordinatePosition: "",
};
},
//
startLoading() {
loading = Loading.service({
lock: true, //
text: '正在加载……', //
background: 'rgba(0,0,0,.7)' //
})
text: "正在加载……", //
background: "rgba(0,0,0,.7)", //
});
},
//
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
}
loading.close();
}
},
},
computed: {
dataRule() {
return {
buildingName: [
{ required: true, message: '楼栋名称不能为空', trigger: 'blur' },
{
required: true,
message: "楼栋名称不能为空",
trigger: "blur",
},
{
min: 1,
max: 10,
message: '小区名称长度在 1 到 10个字符',
trigger: 'blur'
}
message: "小区名称长度在 1 到 10个字符",
trigger: "blur",
},
],
type: [
{ required: true, message: '楼栋类型不能为空', trigger: 'blur' }
{
required: true,
message: "楼栋类型不能为空",
trigger: "blur",
},
],
totalUnitNum: [
{ required: true, message: '单元数不能为空', trigger: 'blur' }
{
required: true,
message: "单元数不能为空",
trigger: "blur",
},
],
coding: [
{ required: true, message: '楼栋编码不能为空', trigger: 'blur' }
]
{
required: true,
message: "楼栋编码不能为空",
trigger: "blur",
},
],
// totalFloorNum: [
// { required: true, message: '', trigger: 'blur' }
// ],
@ -480,12 +564,11 @@ export default {
// longitude: [
// { required: true, message: '', trigger: 'blur' }
// ],
}
};
},
},
props: {}
}
props: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/visual/communityManageForm.scss";

1
src/views/modules/base/community/buildTable.vue

@ -191,6 +191,7 @@
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="formTitle"
v-if="formShow"
top="5vh"
width="900px"
class="dialog-h"

616
src/views/modules/base/community/communityForm.vue

@ -2,328 +2,403 @@
<div>
<div class="dialog-h-content scroll-h">
<div v-show="!propertyFormShow">
<el-form ref="ref_form"
<el-form
ref="ref_form"
:inline="true"
:model="dataForm"
:rules="dataRule"
class="form">
<el-form-item label="所属组织"
class="form"
>
<el-form-item
label="所属组织"
label-width="150px"
style="display: block">
style="display: block"
>
<span>{{ dataForm.agencyName }}</span>
</el-form-item>
<el-form-item label="所属网格"
<el-form-item
label="所属网格"
prop="gridId"
label-width="150px"
style="display: block">
<el-select class="item_width_1"
style="display: block"
>
<el-select
class="item_width_1"
v-model="dataForm.gridId"
placeholder="请选择"
clearable>
<el-option v-for="item in gridList"
clearable
>
<el-option
v-for="item in gridList"
:key="item.gridId"
:label="item.gridName"
:value="item.gridId">
:value="item.gridId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="小区名称"
<el-form-item
label="小区名称"
prop="neighborHoodName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入小区名称"
v-model="dataForm.neighborHoodName">
v-model="dataForm.neighborHoodName"
>
</el-input>
</el-form-item>
<el-form-item label="小区编码"
<el-form-item
label="小区编码"
prop="coding"
label-width="150px"
style="display: block">
<el-input class="item_width_2"
style="display: block"
>
<el-input
class="item_width_2"
maxlength="50"
placeholder="请输入楼栋编码"
v-model="dataForm.coding">
v-model="dataForm.coding"
>
</el-input>
<el-button style="margin-left: 10px"
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleCode">生成</el-button>
@click="handleCode"
>生成</el-button
>
</el-form-item>
<div v-if="dataForm.qrcodeUrl"
style="display: flex;flex-direction: column;">
<img style="margin-left: 70px;width: 200px;"
:src="dataForm.qrcodeUrl">
<a style="margin-left: 80px"
<div
v-if="dataForm.qrcodeUrl"
style="display: flex; flex-direction: column"
>
<img
style="margin-left: 70px; width: 200px"
:src="dataForm.qrcodeUrl"
/>
<a
style="margin-left: 80px"
:href="dataForm.qrcodeUrl"
target="_blank">下载</a>
target="_blank"
>下载</a
>
</div>
<el-form-item label="关联物业"
<el-form-item
label="关联物业"
prop="propertyId"
label-width="150px"
style="display: block">
<el-select class="item_width_2"
style="display: block"
>
<el-select
class="item_width_2"
v-model="dataForm.propertyId"
placeholder="请选择"
filterable
clearable>
<el-option v-for="item in propertyList"
clearable
>
<el-option
v-for="item in propertyList"
:key="item.propertyId"
:label="item.propertyName"
:value="item.propertyId">
:value="item.propertyId"
>
</el-option>
</el-select>
<el-button style="margin-left: 10px"
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleAddProperty">添加物业</el-button>
@click="handleAddProperty"
>添加物业</el-button
>
</el-form-item>
<el-form-item label="实有楼栋"
<el-form-item
label="实有楼栋"
style="display: block"
prop="realBuilding"
label-width="150px">
<el-input-number class="item_width_4"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="dataForm.realBuilding"
:min="0"
:max="9999"
label="总户数"></el-input-number>
label="总户数"
></el-input-number>
</el-form-item>
<el-form-item label="地图位置"
<el-form-item
label="地图位置"
prop="longitude"
label-width="150px"
style="display: block">
style="display: block"
>
<div style="width: 500px">
<el-select v-model="searchValue"
<el-select
v-model="searchValue"
filterable
style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
:loading="loading"
>
<el-option
v-for="(item, index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<div id="app_community"
class="div_map"></div>
<div id="map" class="div_map"></div>
</div>
</el-form-item>
<el-form-item label="详细地址"
<el-form-item
label="详细地址"
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入详细地址"
v-model="dataForm.address">
v-model="dataForm.address"
>
</el-input>
</el-form-item>
<el-form-item label="备注"
<el-form-item
label="备注"
prop="remark"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
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>
v-model="dataForm.remark"
></el-input>
</el-form-item>
</el-form>
</div>
<div v-show="propertyFormShow">
<el-form :inline="false"
<el-form
:inline="false"
:model="propertyForm"
:rules="propertyRule"
class="form">
<el-form-item label="物业名称"
class="form"
>
<el-form-item
label="物业名称"
prop="name"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="10"
placeholder="请输入小区名称"
v-model="propertyForm.name">
v-model="propertyForm.name"
>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="div_btn">
<el-button size="small"
@click="handleCancle"> </el-button>
<el-button size="small"
<el-button size="small" @click="handleCancle"> </el-button>
<el-button
size="small"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"> </el-button>
@click="handleComfirm"
> </el-button
>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // Loading
import { requestPost } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
var map
var search
var markers
var infoWindowList
let loading //
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // Loading
import { requestPost } from "@/js/dai/request";
import daiMap from "@/utils/dai-map2";
var map;
let loading; //
export default {
data() {
return {
formType: 'add', // addeditdetail
formType: "add", // addeditdetail
searchOptions: [],
searchValue: '',
searchValue: "",
resultList: [],
loading: false,
gridList: [],
propertyList: [],
btnDisable: false,
neighborHoodId: '', //ID
neighborHoodId: "", //ID
dataForm: {
neighborHoodName: '', // 50
agencyId: '', // ID
agencyName: '',
gridId: '', //ID
propertyId: '', //
address: '', //
remark: '', //500
location: '', //
longitude: '', //
latitude: '', //
neighborHoodName: "", // 50
agencyId: "", // ID
agencyName: "",
gridId: "", //ID
propertyId: "", //
address: "", //
remark: "", //500
location: "", //
longitude: "", //
latitude: "", //
realBuilding: 0,
coding: '',
sysCoding: ''
coding: "",
sysCoding: "",
},
propertyFormShow: false,
propertyForm: {
name: ''
name: "",
},
keyWords: '',
agencyObj: {}
}
keyWords: "",
agencyObj: {},
};
},
components: {},
mounted () {
},
mounted() {},
methods: {
async initForm(type, row, agencyObj) {
this.$refs.ref_form.resetFields();
this.agencyObj = agencyObj
this.agencyObj = agencyObj;
let { latitude, longitude } = this.$store.state.user;
this.formType = type
this.formType = type;
if (row) {
this.dataForm = JSON.parse(JSON.stringify(row))
this.dataForm.neighborHoodId = this.dataForm.id
this.neighborHoodId = this.dataForm.neighborHoodId
this.dataForm = JSON.parse(JSON.stringify(row));
this.dataForm.neighborHoodId = this.dataForm.id;
this.neighborHoodId = this.dataForm.neighborHoodId;
} else {
this.dataForm.latitude = latitude
this.dataForm.longitude = longitude
this.dataForm.latitude = latitude;
this.dataForm.longitude = longitude;
}
if (!map) {
this.initMap(this.dataForm.latitude, this.dataForm.longitude);
this.$nextTick(() => {
latitude =
this.dataForm.latitude && this.dataForm.latitude != "0"
? this.dataForm.latitude
: latitude;
longitude =
this.dataForm.longitude && this.dataForm.longitude != "0"
? this.dataForm.longitude
: longitude;
if (!this.mapLoaded) {
this.initMap(latitude || latitude, longitude);
this.mapLoaded = true;
} else {
map.setCenter(this.dataForm.latitude, this.dataForm.longitude);
map.setMarker(this.dataForm.latitude, this.dataForm.longitude);
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
}
await this.loadAgency()
await this.loadGrid()
await this.loadProperty()
});
await this.loadAgency();
await this.loadGrid();
await this.loadProperty();
},
// init
initMap(latitude, longitude) {
map = new daiMap(
document.getElementById("app_community"),
document.getElementById("map"),
{ latitude, longitude },
{
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
// pitch: 43.5, //
// rotation: 45, //
// layers: "img_c,cva_c",
}
);
//
map.on("dragend", (e) => {
this.handleMoveCenter(e);
//
const { lat, lng } = map.getCenter();
this.handleMoveCenter(lat, lng);
});
//
map.on("click", (e) => {
const {
lnglat: { lat, lng },
} = e;
this.handleMoveCenter(lat, lng);
});
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
async handleMoveCenter () {
//
const { lat, lng } = map.getCenter();
async handleMoveCenter(lat, lng) {
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
map.setMarker(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.dataForm.address = data.address
this.searchValue = data.address
this.searchOptions = []
this.dataForm.address = data.address;
this.searchValue = data.address;
this.searchOptions = [];
}
},
async remoteMethod(query) {
if (query !== '') {
if (query !== "") {
this.loading = true;
const { msg, data } = await map.searchNearby(query);
this.loading = false;
this.resultList = []
if (msg == "success" && data.resultList && data.resultList.length > 0) {
this.resultList = [];
if (
msg == "success" &&
data.resultList &&
data.resultList.length > 0
) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
this.resultList = data.resultList;
this.searchOptions = this.resultList.map((item) => {
return {
value: `${item.hotPointID}`,
label: `${item.address + item.name}`,
};
});
}
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
value: "0",
label: "未检索到结果",
},
];
}
} else {
this.searchOptions = [];
@ -331,246 +406,263 @@ export default {
},
handleClickKey(index) {
let selPosition = this.resultList[index]
let lonlat = selPosition.lonlat.split(" ")
let selPosition = this.resultList[index];
let lonlat = selPosition.lonlat.split(" ");
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.dataForm.latitude = lonlat[1];
this.dataForm.longitude = lonlat[0];
this.dataForm.address = selPosition.address + selPosition.name
this.dataForm.address = selPosition.address + selPosition.name;
},
async handleCode() {
if (!this.dataForm.gridId) return this.$message.error('请选择网格')
if (!this.dataForm.gridId) return this.$message.error("请选择网格");
const { data, code, msg } = await requestPost(
"/gov/org/houseInformation/getNeighborHoodCoding/" + this.dataForm.gridId);
"/gov/org/houseInformation/getNeighborHoodCoding/" +
this.dataForm.gridId
);
if (msg == "success" && code == 0) {
this.dataForm.coding = data.coding
this.dataForm.sysCoding = data.sysCoding
this.dataForm.coding = data.coding;
this.dataForm.sysCoding = data.sysCoding;
}
},
//
async loadAgency() {
const url = '/epmetuser/customerstaff/staffbasicinfo'
let params = {}
const url = "/epmetuser/customerstaff/staffbasicinfo";
let params = {};
const { data, code, msg } = await requestPost(url, params)
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.dataForm.agencyId = data.agencyId
this.dataForm.agencyName = data.agencyName
this.dataForm.agencyId = data.agencyId;
this.dataForm.agencyName = data.agencyName;
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
//
async loadGrid() {
const url = '/gov/org/grid/allgridsnopermission '
const url = "/gov/org/grid/allgridsnopermission ";
// const url = "https://epmet-dev.elinkservice.cn:7082/api/apimock-v2/95518686fa128a53f64c678906848062/gov/org/grid/allgrids"
let params = {
agencyId: this.dataForm.agencyId
}
agencyId: this.dataForm.agencyId,
};
const { data, code, msg } = await requestPost(url, params)
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.gridList = data
this.gridList = data;
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
//
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"
let params = {}
let params = {};
const { data, code, msg } = await requestPost(url, params)
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.propertyList = data
this.propertyList = data;
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
handleAddProperty() {
this.propertyForm.name = ''
this.propertyFormShow = true
this.propertyForm.name = "";
this.propertyFormShow = true;
},
async handleComfirm() {
if (this.propertyFormShow) {
this.addProperty()
this.addProperty();
} else {
this.btnDisable = true
this.btnDisable = true;
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.$refs['ref_form'].validate((valid, messageObj) => {
this.btnDisable = false;
}, 10000);
this.$refs["ref_form"].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
app.util.validateRule(messageObj);
this.btnDisable = false;
} else {
this.addCommunity()
this.addCommunity();
}
})
});
}
},
async addCommunity() {
let url = ''
if (this.formType === 'add') {
url = '/gov/org/neighborhood/neighborhoodadd'
let url = "";
if (this.formType === "add") {
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
this.dataForm.neighborHoodId = this.neighborHoodId;
}
const { data, code, msg } = await requestPost(url, this.dataForm)
const { data, code, msg } = await requestPost(url, this.dataForm);
if (code === 0) {
this.$message({
type: 'success',
message: '操作成功'
})
this.resetData()
this.$emit('dialogOk')
this.btnDisable = false
type: "success",
message: "操作成功",
});
this.resetData();
this.$emit("dialogOk");
this.btnDisable = false;
} else {
this.btnDisable = false
this.$message.error(msg)
this.btnDisable = false;
this.$message.error(msg);
}
},
async addProperty() {
if (!this.propertyForm.name || this.propertyForm.name === '') {
if (!this.propertyForm.name || this.propertyForm.name === "") {
this.$message({
type: 'error',
message: '物业名称不能为空'
})
return false
type: "error",
message: "物业名称不能为空",
});
return false;
}
const url = '/gov/org/propertymanagement/add'
const url = "/gov/org/propertymanagement/add";
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/add"
let params = {
name: this.propertyForm.name
}
name: this.propertyForm.name,
};
const { data, code, msg } = await requestPost(url, params)
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()
this.propertyForm.name = "";
this.propertyFormShow = false;
this.loadProperty();
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
handleCancle() {
if (this.propertyFormShow) {
this.propertyForm.name = ''
this.propertyFormShow = false
this.propertyForm.name = "";
this.propertyFormShow = false;
} else {
this.resetData()
this.$emit('dialogCancle')
this.resetData();
this.$emit("dialogCancle");
}
},
resetData() {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
this.neighborHoodId = '' //ID
this.searchValue = "";
this.searchOptions = [];
this.resultList = [];
this.neighborHoodId = ""; //ID
this.dataForm = {
neighborHoodName: '', // 50
agencyId: '', // ID
agencyName: '',
gridId: '', //ID
propertyId: '', //
address: '', //
remark: '', //500
location: '', //
longitude: '', //
latitude: '', //
neighborHoodName: "", // 50
agencyId: "", // ID
agencyName: "",
gridId: "", //ID
propertyId: "", //
address: "", //
remark: "", //500
location: "", //
longitude: "", //
latitude: "", //
realBuilding: 0,
coding: '',
sysCoding: ''
}
this.propertyFormShow = false
coding: "",
sysCoding: "",
};
this.propertyFormShow = false;
},
//
startLoading() {
loading = Loading.service({
lock: true, //
text: '正在加载……', //
background: 'rgba(0,0,0,.7)' //
})
text: "正在加载……", //
background: "rgba(0,0,0,.7)", //
});
},
//
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
}
loading.close();
}
},
},
computed: {
dataRule() {
return {
neighborHoodName: [
{ required: true, message: '小区名称不能为空', trigger: 'blur' },
{
required: true,
message: "小区名称不能为空",
trigger: "blur",
},
{
min: 1,
max: 50,
message: '小区名称长度在 1 到 50个字符',
trigger: 'blur'
}
message: "小区名称长度在 1 到 50个字符",
trigger: "blur",
},
],
agencyId: [
{ required: true, message: '所属组织不能为空', trigger: 'blur' }
{
required: true,
message: "所属组织不能为空",
trigger: "blur",
},
],
gridId: [
{ required: true, message: '所属网格不能为空', trigger: 'blur' }
{
required: true,
message: "所属网格不能为空",
trigger: "blur",
},
],
coding: [
{ required: true, message: '小区编码不能为空', trigger: 'blur' }
{
required: true,
message: "小区编码不能为空",
trigger: "blur",
},
],
address: [
{ required: true, message: '详细地址不能为空', trigger: 'blur' }
{
required: true,
message: "详细地址不能为空",
trigger: "blur",
},
],
longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]
}
{
required: true,
message: "坐标不能为空",
trigger: "blur",
},
],
};
},
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 lang="scss" scoped>
@import "@/assets/scss/modules/visual/communityManageForm.scss";
</style>

1
src/views/modules/base/community/communityTable.vue

@ -205,6 +205,7 @@
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="formTitle"
v-if="formShow"
width="850px"
top="5vh"
class="dialog-h"

Loading…
Cancel
Save