guoyuepeng
/
qa-prevention-gwj-vue
1
0
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

新增页面添加地图选点获取经纬度 

运输详情页逻辑修改
liujun0708-动火作业流程图逻辑修改
WenShiJun 2024-07-06 16:06:01 +08:00
parent 543408bd32
commit 039184942f
3 changed files with 500 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
src/views/emergen_cyrescue/emergency_information/security_agency/assurance_management/components/list.vue
View File

@ -77,12 +77,25 @@
no-children-text="暂无数据"
/>
</el-form-item>
<el-form-item label="经度" prop="LONGITUDE">
<el-input v-model="form.LONGITUDE" placeholder="请输入经度..." />
</el-form-item>
<el-form-item label="纬度" prop="LATITUDE">
<el-input v-model="form.LATITUDE" placeholder="请输入纬度..." />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :key="form.LONGITUDE" label="经度" prop="LONGITUDE">
<el-input v-model="form.LONGITUDE" placeholder="请输入内容" disabled @focus="handleMap" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :key="form.LATITUDE" label="纬度" prop="LATITUDE">
<div style="display: flex">
<el-input v-model="form.LATITUDE" placeholder="请输入内容" disabled style="width: 100%" @focus="handleMap"/>
<el-button style="margin-left:10px" @click="handleMap">
<span class="svg-container">
<svg-icon icon-class="international" />
</span>
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="应急通讯车数" prop="EMERGENCY_COMMUNICATION_VEHICLES">
<el-input v-model="form.EMERGENCY_COMMUNICATION_VEHICLES" placeholder="请输入应急通讯车数..." />
</el-form-item>
@ -152,7 +165,38 @@
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</el-dialog>
<!-- 坐标选择 -->
<el-dialog :visible.sync="dialogFormMap" title="编辑坐标" width="800px" class="dy-dialog">
<baidu-map
v-loading="loadingMap"
:zoom="zoom"
:scroll-wheel-zoom="true"
:style="{height: clientHeight+'px'}"
@click="getClickInfo"
@ready="handler">
<bm-view style="width: 100%; height:100%; flex: 1" />
<bm-control ref="control" :offset="{width: 10, height: 10}" anchor="BMAP_ANCHOR_TOP_LEFT">
<div class="map-flex">
<div class="map-lable">关键词：</div>
<div style="flex:1;">
<el-autocomplete v-model="addressKeyword" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入详细地址" style="width:100%" @select="handleSelect" />
</div>
<!-- <el-input v-model="addressKeyword" style="width: 200px" placeholder="请输入内容" />-->
<!-- <el-button slot="append" icon="el-icon-search" @click="mapNameChange"/>-->
</div>
</bm-control>
<!-- <bm-local-search :keyword="addressKeyword" :auto-viewport="true"/>-->
</baidu-map>
<div slot="footer" class="dialog-footer">
<span>经度：</span>
<el-input v-model="LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<span>纬度：</span>
<el-input v-model="LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<el-button @click="dialogFormMap = false">取 消</el-button>
<el-button type="primary" @click="setPosition">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
@ -165,6 +209,21 @@ export default {
components: { Treeselect, Pagination },
data() {
return {
// 地图相关
CORPINFO_ID: this.$parent.CORPINFO_ID,
clientHeight: 600,
loadingMap: true,
listLoading: false,
buttonloading: false,
BMap: '',
map: '',
showMap: false,
addressKeyword: '',
pointLngLat: '',
zoom: 10,
dialogFormMap: false,
LATITUDE: '',
LONGITUDE: '',
listQuery: {
page: 1,
limit: 10
@ -376,8 +435,126 @@ export default {
console.error('获取树形数据失败', e)
})
},
//* *******************列表查询******************************
//* **************地图相关*****************
// 地图相关
mapOpen() {
this.top = this.getScrollTop()
if (this.top) {
this.setScrollTop(0)
}
},
// 关闭地图后调用
mapClose() {
this.setScrollTop(this.top)
this.top = 0
this.showMap = false
},
getScrollTop() {
let scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
},
setScrollTop(top) {
if (!isNaN(top)) {
if (document.documentElement && document.documentElement.scrollTop !== undefined) {
document.documentElement.scrollTop = top
} else if (document.body) {
document.body.scrollTop = top
}
}
},
// 地图初始化
handler({ BMap, map }) {
this.mapOpen()
this.BMap = BMap
this.map = map
this.loadingMap = true
var geolocation = new BMap.Geolocation()
const myGeo = new BMap.Geocoder()
var $this = this
// 调用百度地图api 中的获取当前位置接口
geolocation.getCurrentPosition(function(r) {
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
if (result) {
$this.loadingMap = false
$this.$set($this, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
$this.setCenter({ BMap, map })
}
})
})
},
// 搜索地图
querySearch(queryString, cb) {
var options = {
onSearchComplete: function(results) {
if (local.getStatus() === 0) {
// 判断状态是否正确
var s = []
for (var i = 0; i < results.getCurrentNumPois(); i++) {
var x = results.getPoi(i)
var item = { value: x.address + x.title, point: x.point }
s.push(item)
cb(s)
}
} else {
cb()
}
}
}
var local = new this.BMap.LocalSearch(this.map, options)
local.search(queryString)
},
handleSelect(item) {
var { point } = item
this.map.clearOverlays() // 清除地图上所有覆盖物
this.map.centerAndZoom(point, this.zoom)
const marker = new this.BMap.Marker(point) // 创建标注
this.map.addOverlay(marker) // 将标注添加到地图中
marker.enableDragging() // 可拖拽
this.LONGITUDE = point.lng
this.LATITUDE = point.lat
},
// 设置打开中心位置
setCenter({ BMap, map }) {
var lng = ''
var lat = ''
if (this.form.LONGITUDE == '' || this.form.LATITUDE == '') {
lng = '119.525971'
lat = '39.894727'
} else {
lng = this.form.LONGITUDE
lat = this.form.LATITUDE
}
var point = new BMap.Point(lng, lat)
// var point = new BMap.Point(this.form.LONGITUDE, this.form.LATITUDE)
const zoom = map.getZoom()
setTimeout(() => {
map.centerAndZoom(point, zoom)
}, 0)
// var marker = new BMap.Marker(point) // 创建标注
// map.addOverlay(marker) // 将标注添加到地图中
},
handleMap() {
this.dialogFormMap = true
this.LATITUDE = this.form.LATITUDE
this.LONGITUDE = this.form.LONGITUDE
},
getClickInfo(e) {
this.LONGITUDE = e.point.lng
this.LATITUDE = e.point.lat
},
setPosition() {
this.dialogFormMap = false
this.form.LATITUDE = this.LATITUDE
this.form.LONGITUDE = this.LONGITUDE
},
//* *******************列表查询******************************
getList() {
this.listLoading = true
requestFN(
@ -454,6 +631,8 @@ export default {
handleAdd() {
this.dialogFormEdit = true
this.form = {}
this.form.LONGITUDE = ''
this.form.LATITUDE = ''
this.dialogType = 'saveUser'
this.$refs.upload.clearFiles()
},

210
src/views/emergen_cyrescue/emergency_information/security_agency/transportation_management/components/detail.vue
View File

@ -1,66 +1,116 @@
<template>
<div class="app-container">
<div class="filter-container" style="display: flex; justify-content: space-between;">
<div>
<el-tag>详情</el-tag>
<div>
<div class="app-container">
<div class="level-title">
<h1>运输保障机构详情</h1>
</div>
<div>
<el-button type="primary" @click="goBack">返回基本信息</el-button>
<div class="mb-20">
<table class="table-ui">
<tr>
<td class="tbg">运输机构名称</td>
<td>{{ form.ORG_NAME }}</td>
<td class="tbg">地址</td>
<td>{{ form.ADDRESS }}</td>
</tr>
<tr>
<td class="tbg">运输机构类型</td>
<td>{{ form.ORG_TYPE }}</td>
<td class="tbg">运输机构级别</td>
<td>{{ form.ORG_LEVEL }}</td>
</tr>
<tr>
<td class="tbg">邮编</td>
<td>{{ form.POSTAL_CODE }}</td>
<td class="tbg">机构密级</td>
<td>{{ form.SECURITY_LEVEL }}</td>
</tr>
<tr>
<td class="tbg">值班电话</td>
<td>{{ form.DUTY_PHONE }}</td>
<td class="tbg">传真</td>
<td>{{ form.FAX }}</td>
</tr>
<tr>
<td class="tbg">所属区域</td>
<td colspan="3">{{ form.ADMINISTRATIVE_REGION_NAME }}</td>
</tr>
<tr>
<td class="tbg">经度</td>
<td>{{ form.LONGITUDE }}</td>
<td class="tbg">纬度</td>
<td>{{ form.LATITUDE }}</td>
</tr>
<tr>
<td class="tbg">应急运输方式</td>
<td colspan="3">{{ form.EMERGENCY_TRANSPORT_MODE }}</td>
</tr>
<tr>
<td class="tbg">负责人</td>
<td>{{ form.RESPONSIBLE_PERSON }}</td>
<td class="tbg">负责人办公电话</td>
<td>{{ form.RESPONSIBLE_OFFICE_PHONE }}</td>
</tr>
<tr>
<td class="tbg">负责人移动电话</td>
<td>{{ form.RESPONSIBLE_MOBILE_PHONE }}</td>
<td class="tbg">负责人住宅电话</td>
<td>{{ form.RESPONSIBLE_HOME_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人</td>
<td>{{ form.CONTACT_PERSON }}</td>
<td class="tbg">联系人办公电话</td>
<td>{{ form.CONTACT_OFFICE_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人移动电话</td>
<td>{{ form.CONTACT_MOBILE_PHONE }}</td>
<td class="tbg">联系人住宅电话</td>
<td>{{ form.CONTACT_HOME_PHONE }}</td>
</tr>
<tr>
<td class="tbg">联系人电子邮箱</td>
<td>{{ form.CONTACT_EMAIL }}</td>
</tr>
<tr>
<td class="tbg">主管单位名称</td>
<td>{{ form.SUPERVISING_UNIT_NAME }}</td>
<td class="tbg">主管单位地址</td>
<td>{{ form.SUPERVISING_UNIT_ADDRESS }}</td>
</tr>
<tr>
<td class="tbg">企业基本情况</td>
<td colspan="3">{{ form.COMPANY_OVERVIEW }}</td>
</tr>
<tr>
<td class="tbg">客运能力</td>
<td>{{ form.PASSENGER_TRANSPORT_CAPACITY }}</td>
<td class="tbg">货运能力</td>
<td>{{ form.CARGO_TRANSPORT_CAPACITY }}</td>
</tr>
<tr>
<td class="tbg">应急能力描述</td>
<td colspan="3">{{ form.EMERGENCY_CAPACITY_DESCRIPTION }}</td>
</tr>
<tr>
<td class="tbg">备注</td>
<td colspan="3">{{ form.REMARK }}</td>
</tr>
</table>
</div>
</div>
<el-table ref="multipleTable" :data="[form]" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="ORG_NAME" label="运输机构名称" />
<el-table-column prop="ORG_TYPE" label="运输机构类型" />
<el-table-column prop="ORG_LEVEL" label="运输机构级别" />
<el-table-column prop="ADDRESS" label="地址" />
<el-table-column prop="POSTAL_CODE" label="邮编" />
<el-table-column prop="SECURITY_LEVEL" label="机构密级" />
<el-table-column prop="DUTY_PHONE" label="值班电话" />
<el-table-column prop="ADMINISTRATIVE_REGION_NAME" label="所属区域" />
<el-table-column prop="LONGITUDE" label="经度" />
<el-table-column prop="LATITUDE" label="纬度" />
<el-table-column prop="EMERGENCY_TRANSPORT_MODE" label="应急运输方式" />
<el-table-column prop="RESPONSIBLE_PERSON" label="负责人" />
<el-table-column prop="RESPONSIBLE_OFFICE_PHONE" label="负责人办公电话" />
<el-table-column prop="RESPONSIBLE_MOBILE_PHONE" label="负责人移动电话" />
<el-table-column prop="RESPONSIBLE_HOME_PHONE" label="负责人住宅电话" />
<el-table-column prop="CONTACT_PERSON" label="联系人" />
<el-table-column prop="CONTACT_OFFICE_PHONE" label="联系人办公电话" />
<el-table-column prop="CONTACT_MOBILE_PHONE" label="联系人移动电话" />
<el-table-column prop="CONTACT_HOME_PHONE" label="联系人住宅电话" />
<el-table-column prop="CONTACT_EMAIL" label="联系人电子邮箱" />
<el-table-column prop="SUPERVISING_UNIT" label="主管单位" />
<el-table-column prop="SUPERVISING_UNIT_ADDRESS" label="主管单位地址" />
<el-table-column prop="COMPANY_OVERVIEW" label="企业基本情况" />
<el-table-column prop="PASSENGER_TRANSPORT_CAPACITY" label="客运能力" />
<el-table-column prop="CARGO_TRANSPORT_CAPACITY" label="货运能力" />
<el-table-column prop="EMERGENCY_CAPACITY_DESCRIPTION" label="应急能力描述" />
<el-table-column prop="REMARK" label="备注" />
</el-table>
<div class="ui-height" />
<div class="ui-foot">
<el-button type="primary" @click="goBack">返回基本信息</el-button>
</div>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'
import { Treeselect } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Pagination, Treeselect },
data() {
return {
listQuery: {
page: 1,
limit: 10
},
total: 0,
varList: [],
KEYWORDS: '',
dialogFormEdit: false,
dialogFormShow: false,
dialogType: 'add',
form: {
ORG_NAME: '',
ORG_TYPE: '',
@ -69,6 +119,7 @@ export default {
POSTAL_CODE: '',
SECURITY_LEVEL: '',
DUTY_PHONE: '',
FAX: '',
ADMINISTRATIVE_REGION: '',
ADMINISTRATIVE_REGION_NAME: '',
LONGITUDE: '',
@ -84,62 +135,29 @@ export default {
CONTACT_HOME_PHONE: '',
CONTACT_EMAIL: '',
SUPERVISING_UNIT: '',
SUPERVISING_UNIT_NAME: '',
SUPERVISING_UNIT_ADDRESS: '',
COMPANY_OVERVIEW: '',
PASSENGER_TRANSPORT_CAPACITY: '',
CARGO_TRANSPORT_CAPACITY: '',
EMERGENCY_CAPACITY_DESCRIPTION: '',
REMARK: '',
CONTENT: '',
FILE_URL: ''
REMARK: ''
},
Id: '',
treeData: [],
DepartmentData: [],
normalizer(node) {
return {
id: node.DICTIONARIES_ID,
label: node.name,
children: node.nodes
}
}
Id: ''
}
},
created() {
if (this.$parent.CASE_ID) {
this.Id = this.$parent.CASE_ID
this.getDetail(this.Id)
}
this.getTreeList()
this.getDepartmentList()
},
methods: {
goBack() {
this.$parent.activeName = 'list'
},
getTreeList() {
const params = {
PARENT_ID: '5a5d2809ed644aa6ba97a5240ff35484'
}
requestFN('/dictionaries/listTree', params).then((data) => {
this.treeData = JSON.parse(data.zTreeNodes)
}).catch((e) => {
console.error('获取树形数据失败', e)
})
},
getDepartmentList() {
requestFN('/department/listAll').then((data) => {
this.DepartmentData = data.list.map(item => ({
id: item.department_ID,
label: item.name
}))
}).catch((e) => {
console.error('获取主管单位数据失败', e)
})
},
getDetail(Id) {
const params = { Id: Id }
const params = { Id }
requestFN('/major/transportation/detail', params).then((response) => {
const data = response.msg
this.form = {
@ -150,6 +168,7 @@ export default {
POSTAL_CODE: data.POSTAL_CODE,
SECURITY_LEVEL: data.SECURITY_LEVEL,
DUTY_PHONE: data.DUTY_PHONE,
FAX: data.FAX,
ADMINISTRATIVE_REGION: data.ADMINISTRATIVE_REGION,
ADMINISTRATIVE_REGION_NAME: data.ADMINISTRATIVE_REGION_NAME,
LONGITUDE: data.LONGITUDE,
@ -165,14 +184,13 @@ export default {
CONTACT_HOME_PHONE: data.CONTACT_HOME_PHONE,
CONTACT_EMAIL: data.CONTACT_EMAIL,
SUPERVISING_UNIT: data.SUPERVISING_UNIT,
SUPERVISING_UNIT_NAME: data.SUPERVISING_UNIT_NAME,
SUPERVISING_UNIT_ADDRESS: data.SUPERVISING_UNIT_ADDRESS,
COMPANY_OVERVIEW: data.COMPANY_OVERVIEW,
PASSENGER_TRANSPORT_CAPACITY: data.PASSENGER_TRANSPORT_CAPACITY,
CARGO_TRANSPORT_CAPACITY: data.CARGO_TRANSPORT_CAPACITY,
EMERGENCY_CAPACITY_DESCRIPTION: data.EMERGENCY_CAPACITY_DESCRIPTION,
REMARK: data.REMARK,
CONTENT: data.CONTENT,
FILE_URL: data.FILE_URL
REMARK: data.REMARK
}
}).catch((e) => {
console.error('获取详情数据失败', e)
@ -181,3 +199,13 @@ export default {
}
}
</script>
<style lang="sass" scoped>
.table-ui
td
line-height: 34px
.tbg
width: 200px
.ui-foot
text-align: center
margin-top: 20px
</style>

201
src/views/emergen_cyrescue/emergency_information/security_agency/transportation_management/components/list.vue
View File

@ -74,12 +74,25 @@
no-children-text="暂无数据"
/>
</el-form-item>
<el-form-item label="经度" prop="LONGITUDE">
<el-input v-model="form.LONGITUDE" placeholder="请输入经度..." />
</el-form-item>
<el-form-item label="纬度" prop="LATITUDE">
<el-input v-model="form.LATITUDE" placeholder="请输入纬度..." />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item :key="form.LONGITUDE" label="经度" prop="LONGITUDE">
<el-input v-model="form.LONGITUDE" placeholder="请输入内容" disabled @focus="handleMap" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :key="form.LATITUDE" label="纬度" prop="LATITUDE">
<div style="display: flex">
<el-input v-model="form.LATITUDE" placeholder="请输入内容" disabled style="width: 100%" @focus="handleMap"/>
<el-button style="margin-left:10px" @click="handleMap">
<span class="svg-container">
<svg-icon icon-class="international" />
</span>
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="应急运输方式" prop="EMERGENCY_TRANSPORT_MODE">
<el-input v-model="form.EMERGENCY_TRANSPORT_MODE" placeholder="请输入应急运输方式..." />
</el-form-item>
@ -117,6 +130,7 @@
placeholder="请选择主管单位"
no-options-text="暂无数据"
no-children-text="暂无数据"
@input="handleDepartmentChange"
/>
</el-form-item>
<el-form-item label="主管单位地址" prop="SUPERVISING_UNIT_ADDRESS">
@ -143,6 +157,38 @@
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
<!-- 坐标选择 -->
<el-dialog :visible.sync="dialogFormMap" title="编辑坐标" width="800px" class="dy-dialog">
<baidu-map
v-loading="loadingMap"
:zoom="zoom"
:scroll-wheel-zoom="true"
:style="{height: clientHeight+'px'}"
@click="getClickInfo"
@ready="handler">
<bm-view style="width: 100%; height:100%; flex: 1" />
<bm-control ref="control" :offset="{width: 10, height: 10}" anchor="BMAP_ANCHOR_TOP_LEFT">
<div class="map-flex">
<div class="map-lable">关键词：</div>
<div style="flex:1;">
<el-autocomplete v-model="addressKeyword" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入详细地址" style="width:100%" @select="handleSelect" />
</div>
<!-- <el-input v-model="addressKeyword" style="width: 200px" placeholder="请输入内容" />-->
<!-- <el-button slot="append" icon="el-icon-search" @click="mapNameChange"/>-->
</div>
</bm-control>
<!-- <bm-local-search :keyword="addressKeyword" :auto-viewport="true"/>-->
</baidu-map>
<div slot="footer" class="dialog-footer">
<span>经度：</span>
<el-input v-model="LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<span>纬度：</span>
<el-input v-model="LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<el-button @click="dialogFormMap = false">取 消</el-button>
<el-button type="primary" @click="setPosition">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
@ -155,6 +201,21 @@ export default {
components: { Treeselect, Pagination },
data() {
return {
// 地图相关
CORPINFO_ID: this.$parent.CORPINFO_ID,
clientHeight: 600,
loadingMap: true,
listLoading: false,
buttonloading: false,
BMap: '',
map: '',
showMap: false,
addressKeyword: '',
pointLngLat: '',
zoom: 10,
dialogFormMap: false,
LATITUDE: '',
LONGITUDE: '',
listQuery: {
page: 1,
limit: 10
@ -189,6 +250,7 @@ export default {
CONTACT_HOME_PHONE: '',
CONTACT_EMAIL: '',
SUPERVISING_UNIT: '',
SUPERVISING_UNIT_NAME: '',
SUPERVISING_UNIT_ADDRESS: '',
COMPANY_OVERVIEW: '',
PASSENGER_TRANSPORT_CAPACITY: '',
@ -325,6 +387,12 @@ export default {
this.getDepartmentList()
},
methods: {
handleDepartmentChange(value) {
const selectedDepartment = this.DepartmentData.find(department => department.id === value)
if (selectedDepartment) {
this.form.SUPERVISING_UNIT_NAME = selectedDepartment.label
}
},
resetQuery() {
this.KEYWORDS_ORG_NAME = ''
this.KEYWORDS_ORG_TYPE = ''
@ -355,6 +423,124 @@ export default {
console.error('获取树形数据失败', e)
})
},
//* **************地图相关*****************
// 地图相关
mapOpen() {
this.top = this.getScrollTop()
if (this.top) {
this.setScrollTop(0)
}
},
// 关闭地图后调用
mapClose() {
this.setScrollTop(this.top)
this.top = 0
this.showMap = false
},
getScrollTop() {
let scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
},
setScrollTop(top) {
if (!isNaN(top)) {
if (document.documentElement && document.documentElement.scrollTop !== undefined) {
document.documentElement.scrollTop = top
} else if (document.body) {
document.body.scrollTop = top
}
}
},
// 地图初始化
handler({ BMap, map }) {
this.mapOpen()
this.BMap = BMap
this.map = map
this.loadingMap = true
var geolocation = new BMap.Geolocation()
const myGeo = new BMap.Geocoder()
var $this = this
// 调用百度地图api 中的获取当前位置接口
geolocation.getCurrentPosition(function(r) {
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
if (result) {
$this.loadingMap = false
$this.$set($this, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
$this.setCenter({ BMap, map })
}
})
})
},
// 搜索地图
querySearch(queryString, cb) {
var options = {
onSearchComplete: function(results) {
if (local.getStatus() === 0) {
// 判断状态是否正确
var s = []
for (var i = 0; i < results.getCurrentNumPois(); i++) {
var x = results.getPoi(i)
var item = { value: x.address + x.title, point: x.point }
s.push(item)
cb(s)
}
} else {
cb()
}
}
}
var local = new this.BMap.LocalSearch(this.map, options)
local.search(queryString)
},
handleSelect(item) {
var { point } = item
this.map.clearOverlays() // 清除地图上所有覆盖物
this.map.centerAndZoom(point, this.zoom)
const marker = new this.BMap.Marker(point) // 创建标注
this.map.addOverlay(marker) // 将标注添加到地图中
marker.enableDragging() // 可拖拽
this.LONGITUDE = point.lng
this.LATITUDE = point.lat
},
// 设置打开中心位置
setCenter({ BMap, map }) {
var lng = ''
var lat = ''
if (this.form.LONGITUDE == '' || this.form.LATITUDE == '') {
lng = '119.525971'
lat = '39.894727'
} else {
lng = this.form.LONGITUDE
lat = this.form.LATITUDE
}
var point = new BMap.Point(lng, lat)
// var point = new BMap.Point(this.form.LONGITUDE, this.form.LATITUDE)
const zoom = map.getZoom()
setTimeout(() => {
map.centerAndZoom(point, zoom)
}, 0)
// var marker = new BMap.Marker(point) // 创建标注
// map.addOverlay(marker) // 将标注添加到地图中
},
handleMap() {
this.dialogFormMap = true
this.LATITUDE = this.form.LATITUDE
this.LONGITUDE = this.form.LONGITUDE
},
getClickInfo(e) {
this.LONGITUDE = e.point.lng
this.LATITUDE = e.point.lat
},
setPosition() {
this.dialogFormMap = false
this.form.LATITUDE = this.LATITUDE
this.form.LONGITUDE = this.LONGITUDE
},
//* *******************列表查询******************************
getList() {
@ -410,6 +596,7 @@ export default {
CONTACT_HOME_PHONE: data.CONTACT_HOME_PHONE,
CONTACT_EMAIL: data.CONTACT_EMAIL,
SUPERVISING_UNIT: data.SUPERVISING_UNIT,
SUPERVISING_UNIT_NAME: data.SUPERVISING_UNIT_NAME,
SUPERVISING_UNIT_ADDRESS: data.SUPERVISING_UNIT_ADDRESS,
COMPANY_OVERVIEW: data.COMPANY_OVERVIEW,
PASSENGER_TRANSPORT_CAPACITY: data.PASSENGER_TRANSPORT_CAPACITY,
@ -425,6 +612,8 @@ export default {
handleAdd() {
this.dialogFormEdit = true
this.form = {}
this.form.LONGITUDE = ''
this.form.LATITUDE = ''
this.dialogType = 'saveUser'
this.$refs.upload.clearFiles()
},