elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

需求2

master
jiangyy 3 years ago
parent
57a7a1855f
commit
b23c3e92df
6 changed files with 643 additions and 552 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/views/modules/shequzhili/csgltc/csgl.vue
  2. 19
      src/views/modules/shequzhili/csgltc/csglDetail.vue
  3. 53
      src/views/modules/shequzhili/csgltc/csglForm.vue
  4. 70
      src/views/modules/shequzhili/ggfwtc/ggfw.vue
  5. 339
      src/views/modules/shequzhili/ggfwtc/ggfwDetail.vue
  6. 648
      src/views/modules/shequzhili/ggfwtc/ggfwForm.vue

66
src/views/modules/shequzhili/csgltc/csgl.vue
View File

@ -118,10 +118,24 @@
label="地址" label="地址"
mix-width="230"> mix-width="230">
</el-table-column> </el-table-column>
<el-table-column prop="principal"
header-align="center"
align="center"
show-overflow-tooltip
label="负责人"
width="100">
</el-table-column>
<el-table-column prop="mobile"
header-align="center"
align="center"
show-overflow-tooltip
label="联系电话"
width="130">
</el-table-column>
<el-table-column label="操作" <el-table-column label="操作"
fixed="right" fixed="right"
width="250" width="200"
header-align="center" header-align="center"
align="center" align="center"
class="operate"> class="operate">
@ -270,31 +284,31 @@ export default {
responseType: "blob", responseType: "blob",
data: params, data: params,
}) })
.then((res) => { .then((res) => {
// this.download(res.data, title + '.xls') // this.download(res.data, title + '.xls')
if (res.headers["content-disposition"]) { if (res.headers["content-disposition"]) {
let fileName = window.decodeURI( let fileName = window.decodeURI(
res.headers["content-disposition"].split(";")[1].split("=")[1] res.headers["content-disposition"].split(";")[1].split("=")[1]
); );
console.log("filename", fileName); console.log("filename", fileName);
let blob = new Blob([res.data], { let blob = new Blob([res.data], {
type: "application/vnd.ms-excel", type: "application/vnd.ms-excel",
}); });
var url = window.URL.createObjectURL(blob); var url = window.URL.createObjectURL(blob);
var aLink = document.createElement("a"); var aLink = document.createElement("a");
aLink.style.display = "none"; aLink.style.display = "none";
aLink.href = url; aLink.href = url;
aLink.setAttribute("download", fileName); aLink.setAttribute("download", fileName);
document.body.appendChild(aLink); document.body.appendChild(aLink);
aLink.click(); aLink.click();
document.body.removeChild(aLink); //下载完成移除元素 document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象 window.URL.revokeObjectURL(url); //释放掉blob对象
} else this.$message.error("下载失败"); } else this.$message.error("下载失败");
}) })
.catch((err) => { .catch((err) => {
console.log("err", err); console.log("err", err);
return this.$message.error("网络错误"); return this.$message.error("网络错误");
}); });
}, },
//获取服务事项下拉框 //获取服务事项下拉框

19
src/views/modules/shequzhili/csgltc/csglDetail.vue
View File

@ -35,13 +35,26 @@
style="display: block"> style="display: block">
<span>{{formData.capacity}}</span> <span>{{formData.capacity}}</span>
</el-form-item> </el-form-item>
<el-form-item label="负责人："
prop="principal"
label-width="150px"
style="display: block">
<span>{{formData.principal}}</span>
</el-form-item>
<el-form-item label="联系电话："
prop="mobile"
label-width="150px"
style="display: block">
<span>{{formData.mobile}}</span>
</el-form-item>
<el-form-item label="地址：" <el-form-item label="地址："
style="display: block" style="display: block"
prop="address" prop="address"
label-width="150px"> label-width="150px">
<div class="item_width_1"> <div class="item_width_1">
<span>{{formData.address}}</span> <span>{{formData.address}}</span>
<div id="app" class="div_map"></div> <div id="app"
class="div_map"></div>
</div> </div>
</el-form-item> </el-form-item>
@ -76,7 +89,7 @@ export default {
}, },
components: {}, components: {},
async mounted () { async mounted () {
await this.initMap() await this.initMap()
}, },
methods: { methods: {
@ -100,7 +113,7 @@ export default {
initMap () { initMap () {
// 定义地图中心点坐标 // 定义地图中心点坐标
let { latitude, longitude } = this.$store.state.user; let { latitude, longitude } = this.$store.state.user;
console.log('lat'+latitude+',lon'+longitude) console.log('lat' + latitude + ',lon' + longitude)
if (!latitude || latitude == "" || latitude == "0") { if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821; latitude = 39.9088810666821;
longitude = 116.39743841556731; longitude = 116.39743841556731;

53
src/views/modules/shequzhili/csgltc/csglForm.vue
View File

@ -78,22 +78,39 @@
:max="9999" :max="9999"
label="容纳人数"></el-input-number> label="容纳人数"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="负责人"
style="display: block"
label-width="150px"
prop="principal">
<el-input v-model="formData.principal"
class="item_width_1"
placeholder="请输入负责人姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话"
style="display: block"
label-width="150px"
prop="mobile">
<el-input v-model="formData.mobile"
class="item_width_1"
placeholder="请输入联系电话"></el-input>
</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">
<div class="item_width_1"> <div class="item_width_1">
<el-input <el-input style="width:420px"
style="width:420px" :placeholder="'请输入所在地址'"
:placeholder="'请输入所在地址'" v-model="formData.address">
v-model="formData.address">
</el-input> </el-input>
<el-button <el-button style="margin-left: 10px"
style="margin-left: 10px" type="default"
type="default" size="small"
size="small" @click="handleSearchMap">查询</el-button>
@click="handleSearchMap">查询</el-button> <div id="app"
<div id="app" class="div_map"></div> class="div_map"></div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -141,7 +158,9 @@ export default {
capacity: 0,//容纳人数 capacity: 0,//容纳人数
address: '', //详细地址 address: '', //详细地址
longitude: 36.0722275, //经度 longitude: 36.0722275, //经度
latitude: 120.38945519 //纬度 latitude: 120.38945519, //纬度
principal: '',
mobile: ''
}, },
cityManagement: { cityManagement: {
@ -205,14 +224,14 @@ export default {
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params)
if (code === 0) { if (code === 0) {
if (null != data){ if (null != data) {
data : this.cityManagement data: this.cityManagement
} }
this.formData = { ...data } this.formData = { ...data }
// let { latitude, longitude } = this.$store.state.user; // let { latitude, longitude } = this.$store.state.user;
// const lat = this.formData.latitude === null || this.formData.latitude === '' ? latitude : this.formData.latitude; // const lat = this.formData.latitude === null || this.formData.latitude === '' ? latitude : this.formData.latitude;
// const lon = this.formData.longitude === null || this.formData.longitude === '' ? longitude : this.formData.longitude; // const lon = this.formData.longitude === null || this.formData.longitude === '' ? longitude : this.formData.longitude;
if (this.formData.latitude !== null && this.formData.latitude !== '' && this.formData.longitude !== null && this.formData.longitude !== ''){ if (this.formData.latitude !== null && this.formData.latitude !== '' && this.formData.longitude !== null && this.formData.longitude !== '') {
map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude))
this.setMarker(this.formData.latitude, this.formData.longitude) this.setMarker(this.formData.latitude, this.formData.longitude)
} }
@ -243,9 +262,9 @@ export default {
}, },
async addUnit () { async addUnit () {
let url = '' let url = ''
if (this.formType === 'add'){ if (this.formType === 'add') {
url = '/gov/org/icCityManagement/add' url = '/gov/org/icCityManagement/add'
}else { } else {
url = '/gov/org/icCityManagement/edit' url = '/gov/org/icCityManagement/edit'
} }
const { data, code, msg, internalMsg } = await requestPost(url, this.formData) const { data, code, msg, internalMsg } = await requestPost(url, this.formData)
@ -273,7 +292,7 @@ export default {
initMap () { initMap () {
// 定义地图中心点坐标 // 定义地图中心点坐标
let { latitude, longitude } = this.$store.state.user; let { latitude, longitude } = this.$store.state.user;
console.log('lat'+latitude+',lon'+longitude) console.log('lat' + latitude + ',lon' + longitude)
if (!latitude || latitude == "" || latitude == "0") { if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821; latitude = 39.9088810666821;
longitude = 116.39743841556731; longitude = 116.39743841556731;

70
src/views/modules/shequzhili/ggfwtc/ggfw.vue
View File

@ -116,9 +116,23 @@
label="地址" label="地址"
mix-width="230"> mix-width="230">
</el-table-column> </el-table-column>
<el-table-column prop="principal"
header-align="center"
align="center"
show-overflow-tooltip
label="负责人"
width="100">
</el-table-column>
<el-table-column prop="mobile"
header-align="center"
align="center"
show-overflow-tooltip
label="联系电话"
width="130">
</el-table-column>
<el-table-column label="操作" <el-table-column label="操作"
fixed="right" fixed="right"
width="250" width="200"
header-align="center" header-align="center"
align="center" align="center"
class="operate"> class="operate">
@ -276,31 +290,31 @@ export default {
responseType: "blob", responseType: "blob",
data: params, data: params,
}) })
.then((res) => { .then((res) => {
// this.download(res.data, title + '.xls') // this.download(res.data, title + '.xls')
if (res.headers["content-disposition"]) { if (res.headers["content-disposition"]) {
let fileName = window.decodeURI( let fileName = window.decodeURI(
res.headers["content-disposition"].split(";")[1].split("=")[1] res.headers["content-disposition"].split(";")[1].split("=")[1]
); );
console.log("filename", fileName); console.log("filename", fileName);
let blob = new Blob([res.data], { let blob = new Blob([res.data], {
type: "application/vnd.ms-excel", type: "application/vnd.ms-excel",
}); });
var url = window.URL.createObjectURL(blob); var url = window.URL.createObjectURL(blob);
var aLink = document.createElement("a"); var aLink = document.createElement("a");
aLink.style.display = "none"; aLink.style.display = "none";
aLink.href = url; aLink.href = url;
aLink.setAttribute("download", fileName); aLink.setAttribute("download", fileName);
document.body.appendChild(aLink); document.body.appendChild(aLink);
aLink.click(); aLink.click();
document.body.removeChild(aLink); //下载完成移除元素 document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象 window.URL.revokeObjectURL(url); //释放掉blob对象
} else this.$message.error("下载失败"); } else this.$message.error("下载失败");
}) })
.catch((err) => { .catch((err) => {
console.log("err", err); console.log("err", err);
return this.$message.error("网络错误"); return this.$message.error("网络错误");
}); });
}, },
//获取服务事项下拉框 //获取服务事项下拉框
@ -619,8 +633,8 @@ export default {
} }
</script> </script>
<style lang="scss" scoped > <style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss"; @import "@/assets/scss/buttonstyle.scss";
@import "@/assets/scss/modules/management/list-main.scss"; @import "@/assets/scss/modules/management/list-main.scss";
.div_main { .div_main {
width: 100%; width: 100%;
} }

339
src/views/modules/shequzhili/ggfwtc/ggfwDetail.vue
View File

@ -35,13 +35,26 @@
style="display: block"> style="display: block">
<span>{{formData.capacity}}</span> <span>{{formData.capacity}}</span>
</el-form-item> </el-form-item>
<el-form-item label="负责人："
prop="principal"
label-width="150px"
style="display: block">
<span>{{formData.principal}}</span>
</el-form-item>
<el-form-item label="联系电话："
prop="mobile"
label-width="150px"
style="display: block">
<span>{{formData.mobile}}</span>
</el-form-item>
<el-form-item label="地址：" <el-form-item label="地址："
style="display: block" style="display: block"
prop="address" prop="address"
label-width="150px"> label-width="150px">
<div class="item_width_1"> <div class="item_width_1">
<span>{{formData.address}}</span> <span>{{formData.address}}</span>
<div id="app" class="div_map"></div> <div id="app"
class="div_map"></div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -57,193 +70,193 @@
<script> <script>
import { Loading } from 'element-ui' // 引入Loading服务 import { Loading } from 'element-ui' // 引入Loading服务
var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画 var map
export default { var search
data () { var markers
return { var infoWindowList
formData: {}, var geocoder // 新建一个正逆地址解析类
} let loading // 加载动画
}, export default {
components: {}, data () {
mounted () { return {
this.initMap() formData: {},
},
methods: { }
handleCancle () { },
components: {},
mounted () {
this.initMap()
},
this.$emit('diaClose') methods: {
handleCancle () {
}, this.$emit('diaClose')
async initForm (row) { },
this.startLoading()
this.formData = { ...row }
map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude))
this.setMarker(this.formData.latitude, this.formData.longitude)
this.endLoading() async initForm (row) {
this.startLoading()
this.formData = { ...row }
map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude))
this.setMarker(this.formData.latitude, this.formData.longitude)
}, this.endLoading()
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 },
initMap () {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(36.0722275, 120.38945519)
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById('app'), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
})
search = new window.TMap.service.Search({ pageSize: 10 }) // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
// 新建一个地点搜索类 initMap () {
markers = new TMap.MultiMarker({ // 定义地图中心点坐标
map: map, var center = new window.TMap.LatLng(36.0722275, 120.38945519)
geometries: [] // 定义map变量，调用 TMap.Map() 构造函数创建地图
}) map = new window.TMap.Map(document.getElementById('app'), {
infoWindowList = Array(10) center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
})
search = new window.TMap.service.Search({ pageSize: 10 })
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: []
})
infoWindowList = Array(10)
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on('panend', () => {
this.handleMoveCenter()
})
this.handleMoveCenter()
this.convert()
},
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 setMarker (lat, lng) {
markers.setGeometries([])
markers.add([
{
id: '4',
styleId: 'marker',
position: new TMap.LatLng(lat, lng),
properties: {
title: 'marker4'
}
}
])
},
// 监听地图平移结束 handleSearchMap () {
map.on('panend', () => { infoWindowList.forEach((infoWindow) => {
this.handleMoveCenter() infoWindow.close()
})
infoWindowList.length = 0
markers.setGeometries([])
// 在地图显示范围内以给定的关键字搜索地点
search
.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds()
}) })
this.handleMoveCenter() .then((result) => {
this.convert() let { data } = result
}, if (Array.isArray(data) && data.length > 0) {
const {
setMarker (lat, lng) { location: { lat, lng }
markers.setGeometries([]) } = data[0]
markers.add([
{
id: '4', map.setCenter(new TMap.LatLng(lat, lng))
styleId: 'marker', this.setMarker(lat, lng)
position: new TMap.LatLng(lat, lng), this.formData.latitude = lat
properties: { this.formData.longitude = lng
title: 'marker4' this.convert()
} } else {
this.$message.error('未检索到相关位置坐标')
} }
])
},
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close()
}) })
infoWindowList.length = 0 },
markers.setGeometries([])
// 在地图显示范围内以给定的关键字搜索地点
search
.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds()
})
.then((result) => {
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.formData.latitude = lat
this.formData.longitude = lng
this.convert()
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter () {
//修改地图中心点
const center = map.getCenter()
const lat = center.getLat()
const lng = center.getLng()
this.formData.latitude = lat
this.formData.longitude = lng
this.setMarker(lat, lng)
this.convert(lat, lng)
},
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude);
}
// map.setCenter(location); handleMoveCenter () {
markers.updateGeometries([ //修改地图中心点
{ const center = map.getCenter()
id: 'main', // 点标注数据数组 const lat = center.getLat()
position: location, const lng = center.getLng()
}, this.formData.latitude = lat
]); this.formData.longitude = lng
geocoder this.setMarker(lat, lng)
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 this.convert(lat, lng)
.then((result) => {
// this.formData.address = result.result.address
// 显示搜索到的地址
});
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
}, },
computed: {
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude);
}
// map.setCenter(location);
markers.updateGeometries([
{
id: 'main', // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
// this.formData.address = result.result.address
// 显示搜索到的地址
});
}, },
props: {
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
} }
},
computed: {
},
props: {
} }
}
</script> </script>
<style lang="scss" scoped > <style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManageForm.scss"; @import "@/assets/scss/modules/visual/communityManageForm.scss";
</style> </style>
<style scoped> <style scoped>
.detail_span { .detail_span {
width: 500px; width: 500px;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
margin: 0 0; margin: 0 0;
font-size: 16px; font-size: 16px;
} }
.form { .form {
margin-top: 30px; margin-top: 30px;
} }
</style> </style>

648
src/views/modules/shequzhili/ggfwtc/ggfwForm.vue
View File

@ -60,22 +60,38 @@
:max="9999" :max="9999"
label="容纳人数"></el-input-number> label="容纳人数"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="负责人"
style="display: block"
label-width="150px"
prop="principal">
<el-input v-model="formData.principal"
class="item_width_1"
placeholder="请输入负责人姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话"
style="display: block"
label-width="150px"
prop="mobile">
<el-input v-model="formData.mobile"
class="item_width_1"
placeholder="请输入联系电话"></el-input>
</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">
<div class="item_width_1"> <div class="item_width_1">
<el-input <el-input style="width:420px"
style="width:420px" :placeholder="'请输入所在地址'"
:placeholder="'请输入所在地址'" v-model="formData.address">
v-model="formData.address">
</el-input> </el-input>
<el-button <el-button style="margin-left: 10px"
style="margin-left: 10px" type="default"
type="default" size="small"
size="small" @click="handleSearchMap">查询</el-button>
@click="handleSearchMap">查询</el-button> <div id="app"
<div id="app" class="div_map"></div> class="div_map"></div>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -94,357 +110,359 @@
</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 search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画
export default {
data () {
return {
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
btnDisable: false,
icPublicServiceId: '',
keyWords: '',
formData: {
name: '',//场所名称
category: '',
areaCovered: '',//占地面积
capacity: '',//容纳人数
address: '', //详细地址
longitude: 36.0722275, //经度
latitude: 120.38945519, //纬度
principal: '',
mobile: ''
},
serviceList: [],//服务list
publicServiceData: {},
}
},
components: {},
mounted () {
this.initMap()
},
methods: {
async initForm (type, icPublicServiceId) {
this.startLoading()
this.$refs.ref_form.resetFields();
//获取服务事项
await this.loadService()
this.formType = type
if (icPublicServiceId) {
this.icPublicServiceId = icPublicServiceId
this.formData.icPublicServiceId = icPublicServiceId
await this.loadFormData()
} else {
// map.setCenter(new TMap.LatLng(36.0722275, 120.38945519))
// this.setMarker(36.0722275, 120.38945519)
}
var map this.endLoading()
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画
export default {
data () {
return {
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
btnDisable: false,
icPublicServiceId: '',
keyWords: '',
formData: {
name: '',//场所名称
category: '',
areaCovered: '',//占地面积
capacity: '',//容纳人数
address: '', //详细地址
longitude: 36.0722275, //经度
latitude: 120.38945519 //纬度
},
serviceList: [],//服务list
publicServiceData: {},
}
},
components: {},
mounted () {
this.initMap()
}, },
methods: { //获取服务事项下拉框
async loadService () {
async initForm (type, icPublicServiceId) { const url = "/gov/org/coverage/dict-select-list/public_service"
this.startLoading() // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/dict-select-list/public_service"
this.$refs.ref_form.resetFields(); let params = {
}
//获取服务事项 const { data, code, msg } = await requestPost(url, params)
await this.loadService()
this.formType = type if (code === 0) {
if (icPublicServiceId) { this.serviceList = data
this.icPublicServiceId = icPublicServiceId
this.formData.icPublicServiceId = icPublicServiceId
await this.loadFormData()
} else {
// map.setCenter(new TMap.LatLng(36.0722275, 120.38945519))
// this.setMarker(36.0722275, 120.38945519)
}
this.endLoading() } else {
this.$message.error(msg)
}
}, },
//获取服务事项下拉框 //加载组织
async loadService () { async loadFormData () {
const url = "/gov/org/coverage/dict-select-list/public_service" const url = '/gov/org/icPublicService/detail'
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/dict-select-list/public_service" // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail'
let params = { let params = {
icPublicServiceId: this.icPublicServiceId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
console.log(data)
if (null != data) {
data: this.publicServiceData
} }
const { data, code, msg } = await requestPost(url, params) this.formData = { ...data }
// let { latitude, longitude } = this.$store.state.user;
if (code === 0) { // const lat = this.formData.latitude === null || this.formData.latitude === '' ? '' : this.formData.latitude;
this.serviceList = data // const lon = this.formData.longitude === null || this.formData.longitude === '' ? '' : this.formData.longitude;
if (this.formData.latitude !== null && this.formData.latitude !== '' && this.formData.longitude !== null && this.formData.longitude !== '') {
} else { map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude))
this.$message.error(msg) this.setMarker(this.formData.latitude, this.formData.longitude)
} }
} else {
this.$message.error(msg)
}
},
},
//加载组织
async loadFormData () {
const url = '/gov/org/icPublicService/detail'
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail'
let params = {
icPublicServiceId: this.icPublicServiceId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
console.log(data)
if (null != data) {
data: this.publicServiceData
}
this.formData = { ...data } async handleComfirm () {
// let { latitude, longitude } = this.$store.state.user;
// const lat = this.formData.latitude === null || this.formData.latitude === '' ? '' : this.formData.latitude; this.btnDisable = true
// const lon = this.formData.longitude === null || this.formData.longitude === '' ? '' : this.formData.longitude; setTimeout(() => {
if (this.formData.latitude !== null && this.formData.latitude !== '' && this.formData.longitude !== null && this.formData.longitude !== ''){ this.btnDisable = false
map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) }, 10000)
this.setMarker(this.formData.latitude, this.formData.longitude) this.$refs['ref_form'].validate((valid, messageObj) => {
} if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
} else { } else {
this.$message.error(msg) this.addUnit()
} }
},
})
async handleComfirm () {
this.btnDisable = true
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.$refs['ref_form'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
} else {
this.addUnit()
}
},
async addUnit () {
let url = ''
if (this.formType === 'add') {
url = '/gov/org/icPublicService/add'
} else {
url = '/gov/org/icPublicService/edit'
}
const { data, code, msg, internalMsg } = await requestPost(url, this.formData)
if (code === 0) {
this.$message({
type: 'success',
message: '操作成功'
}) })
this.resetData()
this.$emit('dialogOk')
this.btnDisable = false
} else {
this.btnDisable = false
this.$message.error(internalMsg)
}
},
}, handleCancle () {
async addUnit () { this.resetData()
let url = '' this.$emit('dialogCancle')
if (this.formType === 'add'){
url = '/gov/org/icPublicService/add'
}else {
url = '/gov/org/icPublicService/edit'
}
const { data, code, msg,internalMsg } = await requestPost(url, this.formData)
if (code === 0) {
this.$message({
type: 'success',
message: '操作成功'
})
this.resetData()
this.$emit('dialogOk')
this.btnDisable = false
} else {
this.btnDisable = false
this.$message.error(internalMsg)
}
},
handleCancle () { },
this.resetData()
this.$emit('dialogCancle')
}, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () {
let { latitude, longitude } = this.$store.state.user;
console.log('lat' + latitude + ',lon' + longitude)
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
// 定义地图中心点坐标
var center = new window.TMap.LatLng(latitude, longitude);
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById('app'), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
})
search = new window.TMap.service.Search({ pageSize: 10 })
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: []
})
infoWindowList = Array(10)
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on('panend', () => {
this.handleMoveCenter()
})
// this.handleMoveCenter()
this.convert()
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 setMarker (lat, lng) {
initMap () { markers.setGeometries([])
let { latitude, longitude } = this.$store.state.user; markers.add([
console.log('lat'+latitude+',lon'+longitude) {
if (!latitude || latitude == "" || latitude == "0") { id: '4',
latitude = 39.9088810666821; styleId: 'marker',
longitude = 116.39743841556731; position: new TMap.LatLng(lat, lng),
properties: {
title: 'marker4'
}
} }
// 定义地图中心点坐标 ])
var center = new window.TMap.LatLng(latitude, longitude); },
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById('app'), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
})
search = new window.TMap.service.Search({ pageSize: 10 })
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: []
})
infoWindowList = Array(10)
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束 handleSearchMap () {
map.on('panend', () => { infoWindowList.forEach((infoWindow) => {
this.handleMoveCenter() infoWindow.close()
})
infoWindowList.length = 0
markers.setGeometries([])
// 在地图显示范围内以给定的关键字搜索地点
search
.searchRectangle({
keyword: this.formData.address,
bounds: map.getBounds()
}) })
// this.handleMoveCenter() .then((result) => {
this.convert() let { data } = result
}, if (Array.isArray(data) && data.length > 0) {
const {
setMarker (lat, lng) { location: { lat, lng }
markers.setGeometries([]) } = data[0]
markers.add([
{
id: '4', map.setCenter(new TMap.LatLng(lat, lng))
styleId: 'marker', this.setMarker(lat, lng)
position: new TMap.LatLng(lat, lng), this.formData.latitude = lat
properties: { this.formData.longitude = lng
title: 'marker4' this.convert()
} } else {
this.$message.error('未检索到相关位置坐标')
} }
])
},
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close()
}) })
infoWindowList.length = 0 },
markers.setGeometries([])
// 在地图显示范围内以给定的关键字搜索地点
search
.searchRectangle({
keyword: this.formData.address,
bounds: map.getBounds()
})
.then((result) => {
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.formData.latitude = lat
this.formData.longitude = lng
this.convert()
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter () { handleMoveCenter () {
//修改地图中心点 //修改地图中心点
const center = map.getCenter() const center = map.getCenter()
const lat = center.getLat() const lat = center.getLat()
const lng = center.getLng() const lng = center.getLng()
this.formData.latitude = lat this.formData.latitude = lat
this.formData.longitude = lng this.formData.longitude = lng
this.setMarker(lat, lng) this.setMarker(lat, lng)
this.convert(lat, lng) this.convert(lat, lng)
}, },
convert (lat, lng) { convert (lat, lng) {
markers.setGeometries([]); markers.setGeometries([]);
// var input = document.getElementById('location').value.split(','); // var input = document.getElementById('location').value.split(',');
let location let location
if (lat && lng) { if (lat && lng) {
location = new TMap.LatLng(lat, lng); location = new TMap.LatLng(lat, lng);
} else { } else {
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); location = new TMap.LatLng(this.formData.latitude, this.formData.longitude);
} }
// map.setCenter(location); // map.setCenter(location);
markers.updateGeometries([ markers.updateGeometries([
{ {
id: 'main', // 点标注数据数组 id: 'main', // 点标注数据数组
position: location, position: location,
}, },
]); ]);
geocoder geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 .getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => { .then((result) => {
console.log(this.formData) console.log(this.formData)
// this.formData.address = result.result.address === '' || result.result.address === null ? this.formData.address : result.result.address // this.formData.address = result.result.address === '' || result.result.address === null ? this.formData.address : result.result.address
this.formData.address = this.formData.address !== '' && this.formData.address !== null && (this.formData.longitude === '' || this.formData.longitude === null) ? this.formData.address : result.result.address this.formData.address = this.formData.address !== '' && this.formData.address !== null && (this.formData.longitude === '' || this.formData.longitude === null) ? this.formData.address : result.result.address
// 显示搜索到的地址 // 显示搜索到的地址
}); });
}, },
resetData () { resetData () {
this.icPublicServiceId = '' this.icPublicServiceId = ''
this.keyWords = '' this.keyWords = ''
this.formData = { this.formData = {
name: '', name: '',
category: '', category: '',
areaCovered: '', areaCovered: '',
capacity: '', capacity: '',
address: '', //详细地址 address: '', //详细地址
longitude: '', //经度 longitude: '', //经度
latitude: '' //纬度 latitude: '' //纬度
}
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
} }
}, },
computed: { // 开启加载动画
dataRule () { startLoading () {
return { loading = Loading.service({
lock: true, // 是否锁定
name: [ text: '正在加载……', // 加载中需要显示的文字
{ required: true, message: '场所名称不能为空', trigger: 'blur' }, background: 'rgba(0,0,0,.7)' // 背景颜色
], })
category: [ },
{ required: true, message: '场所类别不能为空', trigger: 'blur' } // 结束加载动画
], endLoading () {
address: [ // clearTimeout(timer);
{ required: true, message: '地址不能为空', trigger: 'blur' } if (loading) {
], loading.close()
/*longitude: [ }
{ required: true, message: '坐标不能为空', trigger: 'blur' } }
], },
latitude: [ computed: {
{ required: true, message: '坐标不能为空', trigger: 'blur' } dataRule () {
]*/ return {
}
},
name: [
{ required: true, message: '场所名称不能为空', trigger: 'blur' },
],
category: [
{ required: true, message: '场所类别不能为空', trigger: 'blur' }
],
address: [
{ required: true, message: '地址不能为空', trigger: 'blur' }
],
/*longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
],
latitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]*/
}
}, },
props: {
typeList: { },
type: Array, props: {
default: []
}, typeList: {
type: Array,
default: []
},
}
} }
}
</script> </script>
<style scoped> <style scoped>
.div_map { .div_map {
position: relative; position: relative;
} }
.div_searchmap { .div_searchmap {
z-index: 5000; z-index: 5000;
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
} }
</style> </style>
<style lang="scss" scoped > <style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManageForm.scss"; @import "@/assets/scss/modules/visual/communityManageForm.scss";
</style> </style>

Write Preview
Loading…
Cancel
Save