You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
742 lines
25 KiB
742 lines
25 KiB
<template> |
|
<!-- 此处为老的油站入住 --> |
|
<div style="padding:75px 10px;padding-bottom:6%"> |
|
<div style="width:69.5%;position: fixed;top: 0;left: 0;background: #fff; |
|
padding: 10px 0px; |
|
width: 69.5%; |
|
z-index: 1;"> |
|
<div style="display: flex; |
|
align-items: center;padding-left: 20px;line-height: 28px;"> |
|
<span>油站入驻</span> |
|
</div> |
|
<el-divider style="width:100%"></el-divider> |
|
</div> |
|
<el-row> |
|
<el-form ref="form" :model="oilSiteInfo" :rules="rules" label-width="230px" :size="$store.getters.size"> |
|
|
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item label="油站名称" prop="siteName"> |
|
<el-input v-model="oilSiteInfo.siteName" placeholder="请输入油站名称" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="10"> |
|
<el-form-item label="油站简称" prop="siteAbbr"> |
|
<el-input v-model="oilSiteInfo.siteAbbr" placeholder="请输入油站简称" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item label="省市区" prop="addrCode"> |
|
<el-cascader |
|
ref="refSubCat" |
|
v-model="addrCode" |
|
placeholder="请选择" |
|
:size="$store.getters.size" |
|
style="width: 100%" |
|
:options="areaTree" |
|
@change='changeTrees' |
|
@active-item-change='changetrees' |
|
:props="{value:'id', label:'areaName', children:'childList'}" |
|
filterable |
|
clearable |
|
|
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="10"> |
|
<el-form-item label="油站负责人" prop="businessLeader"> |
|
<el-select |
|
v-model="oilSiteInfo.businessLeader" |
|
clearable |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="油站负责人姓名或联系方式" |
|
:remote-method="userRemoteMethod" |
|
> |
|
<el-option |
|
v-for="item in userList" |
|
:key="item.id" |
|
:label="item.phone+'('+(item.nickName?item.nickName+'-':'')+item.userCode+')'" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item label="联系人姓名" prop="siteContacts"> |
|
<el-input v-model="oilSiteInfo.siteContacts" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="10"> |
|
<el-form-item label="手机/座机" prop="siteContactPhone"> |
|
<el-input v-model="oilSiteInfo.siteContactPhone" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="20"> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="油站品牌" |
|
prop="siteBrand" |
|
> |
|
<el-select v-model="oilSiteInfo.siteBrand" clearable> |
|
<el-option label="中国石油" :value="1" /> |
|
<el-option label="中国石化" :value="2" /> |
|
<el-option label="壳牌" :value="3" /> |
|
<el-option label="民营" :value="4" /> |
|
<el-option label="中海油" :value="5" /> |
|
<el-option label="京博" :value="6" /> |
|
<el-option label="中化石油" :value="7" /> |
|
<el-option label="山东高速" :value="9" /> |
|
<el-option label="陕西延长壳牌" :value="10" /> |
|
<el-option label="山西延长壳牌" :value="11" /> |
|
<el-option label="河南延长壳牌" :value="12" /> |
|
<el-option label="其他" :value="8" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="8"> |
|
<el-form-item |
|
label="油站类型" |
|
prop="siteType" |
|
> |
|
<el-select v-model="oilSiteInfo.siteType" clearable> |
|
<el-option label="加油站" :value="1" /> |
|
<el-option label="加气站" :value="2" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="油站性质" |
|
prop="siteNature" |
|
> |
|
<el-select v-model="oilSiteInfo.siteNature" clearable> |
|
<el-option label="自营油站" :value="1" /> |
|
<el-option label="渠道油站" :value="0" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="20"> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="油站等级" |
|
prop="siteLevel" |
|
> |
|
<el-select v-model="oilSiteInfo.siteLevel" clearable> |
|
<el-option label="一级油站" value="A" /> |
|
<el-option label="二级油站" value="B" /> |
|
<el-option label="三级油站" value="C" /> |
|
<el-option label="四级油站" value="D" /> |
|
<el-option label="五级油站" value="E" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="8"> |
|
<el-form-item |
|
label="是否为高速" |
|
prop="highSpeedMark" |
|
> |
|
<el-select v-model="oilSiteInfo.highSpeedMark" clearable> |
|
<el-option label="非高速" :value="0" /> |
|
<el-option label="高速油站" :value="1" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="支付方式" |
|
prop="payMethod" |
|
> |
|
<el-select v-model="oilSiteInfo.payMethod" clearable> |
|
<el-option label="普通支付方式" :value="1" /> |
|
<el-option label="联名卡支付" :value="2" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="20"> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="油站渠道" |
|
prop="siteChannel" |
|
> |
|
<el-select v-model="oilSiteInfo.siteChannel" clearable> |
|
<el-option |
|
v-for="item in options11" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select></el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="使用类型" |
|
prop="siteCustomerMark" |
|
> |
|
<el-select v-model="oilSiteInfo.siteCustomerMark" clearable> |
|
<el-option label="个人油站" :value="1" /> |
|
<el-option label="公用油站" :value="2" /> |
|
<el-option label="企业油站" :value="3" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="21"> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="司机二维码支付" |
|
prop="qrcodePay" |
|
> |
|
<el-switch |
|
v-model="oilSiteInfo.qrcodePay" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="扫描油站二维码支付" |
|
prop="qrcodeSitePay" |
|
> |
|
<el-switch |
|
v-model="oilSiteInfo.qrcodeSitePay" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-form-item |
|
label="司机主动支付" |
|
prop="activePay" |
|
> |
|
<el-switch |
|
v-model="oilSiteInfo.activePay" |
|
active-color="#13ce66" |
|
inactive-color="#ff4949" |
|
:active-value="1" |
|
:inactive-value="0" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col> |
|
<el-form-item label="提示文案" prop="detailContent"> |
|
<el-input style="width:80%" v-model="oilSiteInfo.detailContent" placeholder="油站详情提示文案" type="textarea" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
|
|
</el-row> |
|
<el-row> |
|
<el-row> |
|
|
|
<el-container> |
|
<!-- <el-aside width="310px"> --> |
|
<el-row style="width:30%;"> |
|
<el-col> |
|
<el-form-item label="经度" prop="longitude"> |
|
<el-input v-model="oilSiteInfo.longitude" placeholder="经度" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col> |
|
<el-form-item label="纬度" prop="latitude"> |
|
<el-input v-model="oilSiteInfo.latitude" placeholder="纬度" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col> |
|
<el-form-item label="详细地址" prop="address"> |
|
<el-input v-model="oilSiteInfo.address" type="textarea" placeholder="详细地址" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col> |
|
<el-form-item> |
|
<el-button plain @click="queryByAddress()">搜索</el-button> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<!-- </el-aside> --> |
|
<el-main> |
|
<div v-show="isShowMap" id="container_af" class="mymap" /> |
|
|
|
</el-main> |
|
</el-container> |
|
|
|
</el-row> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-row> |
|
<h2>认证信息</h2> |
|
<hr> |
|
<br> |
|
<br> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="10"> |
|
<el-form-item label="法人姓名" prop="legalName"> |
|
<el-input v-model="oilSiteInfo.legalName" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="10"> |
|
<el-form-item label="法人联系电话" prop="legalPhone"> |
|
<el-input v-model="oilSiteInfo.legalPhone" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="10"> |
|
|
|
<el-form-item label="法人身份证" prop="legalIdcard"> |
|
<el-input v-model="oilSiteInfo.legalIdcard" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="10"> |
|
<el-form-item label="银行卡号" prop="bankCardNo"> |
|
<el-input v-model="oilSiteInfo.bankCardNo" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="10"> |
|
|
|
<el-form-item label="收款账户名称" prop="bankCardName"> |
|
<el-input v-model="oilSiteInfo.bankCardName" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="10"> |
|
<el-form-item label="开户行银名称" prop="bankName"> |
|
<el-input v-model="oilSiteInfo.bankName" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row> |
|
<el-col :span="10"> |
|
|
|
<el-form-item label="账户性质：公户、个人账户" prop="bankNature"> |
|
<el-input v-model="oilSiteInfo.bankNature" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="10"> |
|
<el-form-item label="开户所属银行" prop="bankDeposit"> |
|
<el-input v-model="oilSiteInfo.bankDeposit" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
|
|
<el-col :span="10"> |
|
<el-form-item label="营业许可证号" prop="licenseNo"> |
|
<el-input v-model="oilSiteInfo.licenseNo" clearable /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-row :gutter="gridNum.row.gutter"> |
|
<el-col :span="12"> |
|
<el-form-item label="油站照片" prop="siteImages"> |
|
<el-upload |
|
:action="updateFileUrl" |
|
:data="{'ossKey':'xingyou','pathKey':'other','encrypt':'PUBLIC'}" |
|
list-type="picture-card" |
|
:before-upload="imgCompress" |
|
:on-preview="headPhotoPreview" |
|
:on-remove="headPhotoRemove" |
|
:on-success="headPhotoSuccess" |
|
:headers="headers" |
|
:limit="1" |
|
> |
|
<i class="el-icon-plus" /> |
|
</el-upload> |
|
<el-dialog :visible.sync="showSiteImages" :modal="false"> |
|
<img width="100%" :src="siteImages" alt=""> |
|
</el-dialog> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="营业执照照片" prop="sitelicenseNoImages"> |
|
<el-upload |
|
:action="updateFileUrl" |
|
:data="{'ossKey':'xingyou','pathKey':'other','encrypt':'PUBLIC'}" |
|
list-type="picture-card" |
|
:before-upload="imgCompress" |
|
:on-preview="sitelicenseNoImagePreview" |
|
:on-remove="sitelicenseNoImageRemove" |
|
:on-success="sitelicenseNoImageSuccess" |
|
:headers="headers" |
|
:limit="1" |
|
> |
|
<i class="el-icon-plus" /> |
|
</el-upload> |
|
<el-dialog :visible.sync="sitelicenseNoImages" :modal="false"> |
|
<img width="100%" :src="siteImages" alt=""> |
|
</el-dialog> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-col :span="24" style="text-align: center;pandding:3% 3%;" class="showbttoms"> |
|
<el-button @click="close">取消</el-button> |
|
<el-button |
|
type="primary" |
|
@click="submit" |
|
>提交</el-button> |
|
</el-col> |
|
</el-row></el-form> |
|
</el-row> |
|
</div> |
|
</template> |
|
<script> |
|
import AreaCodeApi from '@/api/base/areaCode' |
|
import oilSiteInfoApi from '@/api/user/oilSiteInfo' |
|
import { imgCompress } from '@/utils' |
|
import utils from '@/utils/encode' |
|
import { getToken } from '@/utils/auth' |
|
import AMap from 'AMap'// 在页面中引入高德地图 |
|
import GaodeApi from '@/api/gaode/gaode' |
|
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo' |
|
const JSESSIONID = utils.uuid() |
|
|
|
export default { |
|
data() { |
|
return { |
|
userList: [], |
|
imgCompress, |
|
headers: { |
|
'dataSources': 'WEB', |
|
'Authorization': getToken(), |
|
'JSESSIONID': JSESSIONID, |
|
'token': utils.bcrypt(JSESSIONID) |
|
}, |
|
gridNum: { |
|
row: { |
|
gutter: 2 |
|
}, |
|
cols: { |
|
xs: 24, |
|
sm: 24, |
|
md: 12, |
|
lg: 12, |
|
xl: 6 |
|
} |
|
}, |
|
updateFileUrl: process.env.VUE_APP_UPLOAD_URL, |
|
siteImages: '', // 油站照片 |
|
siteLicenseImages: '', // 营业执照照片 |
|
// 正向地理解析对象 |
|
geography: { |
|
address: null |
|
}, |
|
showSiteImages: false, |
|
sitelicenseNoImages: false, |
|
affirmData: { // 默认经纬度 |
|
lon: 116.397428, |
|
lat: 39.90923 |
|
}, |
|
isShowMap: true, // 高德地图div默认展示 |
|
oilSiteInfo: { |
|
provinceCode: undefined, |
|
cityCode: undefined, |
|
areaCode: undefined, |
|
address: '', |
|
longitude: 116.397428, |
|
latitude: 39.90923 |
|
}, |
|
areaTree: [], |
|
addrCode: [], // 省市区code |
|
options11: [ |
|
{ value: 'XOIL', label: '星油' } |
|
], |
|
rules: { |
|
siteName: [ |
|
{ required: true, message: '油站名称不能为空', trigger: 'blur' } |
|
], |
|
siteCustomerMark: [ |
|
{ required: true, message: '使用类型不能为空', trigger: 'change' } |
|
], |
|
siteNature: [ |
|
{ required: true, message: '油站性质不能为空', trigger: 'change' } |
|
], |
|
siteChannel: [ |
|
{ required: true, message: '油站渠道不能为空', trigger: 'change' } |
|
], |
|
siteType: [ |
|
{ required: true, message: '油站类型不能为空', trigger: 'change' } |
|
], |
|
siteLevel: [ |
|
{ required: true, message: '油站等级不能为空', trigger: 'change' } |
|
], |
|
longitude: [ |
|
{ required: true, message: '经度不能为空', trigger: 'blur' } |
|
], |
|
latitude: [ |
|
{ required: true, message: '纬度不能为空', trigger: 'blur' } |
|
], |
|
highSpeedMark: [ |
|
{ required: true, message: '高速不能为空', trigger: 'change' } |
|
], |
|
payMethod: [ |
|
{ required: true, message: '支付方式不能为空', trigger: 'change' } |
|
] |
|
} |
|
} |
|
}, |
|
computed: { |
|
}, |
|
created() { |
|
// sysCustomerInfoApi.findAll().then(res => { |
|
// this.userList = res.data |
|
// }) |
|
AreaCodeApi.getTree().then(res => { |
|
this.areaTree = res.data |
|
}) |
|
this.oilSiteInfo = { ...this.oilSiteInfo } |
|
this.addrCode = [parseInt(this.oilSiteInfo.provinceCode), parseInt(this.oilSiteInfo.cityCode), parseInt(this.oilSiteInfo.areaCode)] |
|
console.log('++--++--++--++--',this.addrCode) |
|
}, |
|
mounted() { |
|
this.loadMap() // 加载地图和相关组件 |
|
}, |
|
methods: { |
|
userRemoteMethod(value) { // 远程搜索 |
|
if (value) { |
|
sysCustomerInfoApi.liekQuery(value).then(res => { |
|
this.userList = res.data |
|
}) |
|
} |
|
}, |
|
|
|
headPhotoRemove(file, fileList) { // 油站照片删除 |
|
this.oilSiteInfo.siteImages = undefined |
|
this.siteImages = undefined |
|
}, |
|
headPhotoPreview(file) { // 油站照片预览 |
|
this.showSiteImages = true |
|
}, |
|
headPhotoSuccess(res) { // 油站照片上传成功 |
|
this.siteImages = res.data.publicUrl |
|
this.oilSiteInfo.siteImages = res.data.publicUrl |
|
}, |
|
|
|
sitelicenseNoImageRemove(file, fileList) { // 营业执照删除 |
|
this.oilSiteInfo.licenseImage = undefined |
|
this.siteLicenseImages = undefined |
|
}, |
|
sitelicenseNoImagePreview(file) { // 营业执照 |
|
this.sitelicenseNoImages = true |
|
}, |
|
sitelicenseNoImageSuccess(res) { // 营业执照上传成功 |
|
console.log('success') |
|
this.siteLicenseImages = res.data.publicUrl |
|
this.oilSiteInfo.licenseImage = res.data.publicUrl |
|
console.log(this.siteLicenseImages) |
|
}, |
|
submit() { |
|
this.$refs['form'].validate((valid) => { |
|
if (valid) { |
|
this.save(this.oilSiteInfo) |
|
} |
|
}) |
|
}, |
|
save() { |
|
// 保存 |
|
this.setCodeName() |
|
this.oilSiteInfo.longitude = this.oilSiteInfo.longitude |
|
this.oilSiteInfo.latitude = this.oilSiteInfo.latitude |
|
oilSiteInfoApi.save(this.oilSiteInfo).then(res => { |
|
this.$message.success(res.msg) |
|
this.$emit('closeDialog') |
|
this.$emit('getByPage') |
|
this.$refs['form'].resetFields() |
|
this.addrCode = [] |
|
}) |
|
}, |
|
changetrees(){ |
|
console.log('lostss') |
|
}, |
|
setCodeName() { |
|
console.log('进入这里') |
|
this.oilSiteInfo.provinceCode = this.addrCode[0] |
|
this.oilSiteInfo.cityCode = this.addrCode[1] |
|
this.oilSiteInfo.areaCode = this.addrCode[2] |
|
this.areaTree.forEach(item => { |
|
if (item.id === this.addrCode[0]) { |
|
this.oilSiteInfo.provinceName = item.areaName |
|
console.log(this.oilSiteInfo.provinceName) |
|
} |
|
if (item.childList) { |
|
item.childList.forEach(itemm => { |
|
if (itemm.id === this.addrCode[1]) { |
|
this.oilSiteInfo.cityName = itemm.areaName |
|
console.log(this.oilSiteInfo.cityName) |
|
} |
|
if (itemm.childList) { |
|
itemm.childList.forEach(itm => { |
|
if (itm.id === this.addrCode[2]) { |
|
this.oilSiteInfo.areaName = itm.areaName |
|
console.log(this.oilSiteInfo.areaName) |
|
return |
|
} |
|
}) |
|
} |
|
}) |
|
} |
|
}) |
|
}, |
|
changeTrees(e){ |
|
console.log(e) |
|
}, |
|
close() { |
|
this.$emit('closeDialog') |
|
}, |
|
loadMap() { |
|
console.log(this.affirmData, 'data') |
|
// 地图示例 |
|
var map = new AMap.Map('container_af', { |
|
zoom: 16, |
|
resizeEnable: true, |
|
center: [this.oilSiteInfo.longitude, this.oilSiteInfo.latitude] // 中心点坐标 |
|
}) |
|
// 创建一个 Marker 实例： |
|
var marker = new AMap.Marker({ |
|
position: new AMap.LngLat(this.oilSiteInfo.longitude, this.oilSiteInfo.latitude), // 经纬度对象，也可以是经纬度构成的一维数组 |
|
title: '确认位置' |
|
}) |
|
// 将创建的点标记添加到已有的地图实例： |
|
map.add(marker) |
|
var that = this |
|
AMap.plugin('AMap.Geocoder', function() { |
|
var geocoder = new AMap.Geocoder({ |
|
city: '010'// 城市，默认：“全国” |
|
}) |
|
let lnglat = [that.oilSiteInfo.longitude,that.oilSiteInfo.latitude] |
|
geocoder.getAddress(lnglat, function(status, result) { |
|
if (status === 'complete'&&result.regeocode) { |
|
that.oilSiteInfo.address = result.regeocode.formattedAddress; |
|
}else{ |
|
that.$message.error('根据经纬度查询地址失败') |
|
} |
|
}); |
|
}) |
|
map.on('click', (e) => { |
|
this.oilSiteInfo.longitude = e.lnglat.getLng() |
|
this.oilSiteInfo.latitude = e.lnglat.getLat() |
|
// 每点击一次就将坐标点定位在点击处 |
|
marker.setPosition(e.lnglat) |
|
AMap.plugin('AMap.Geocoder', function() { |
|
var geocoder = new AMap.Geocoder({ |
|
city: '010'// 城市，默认：“全国” |
|
}) |
|
geocoder.getAddress(e.lnglat, function(status, result) { |
|
if (status == 'complete') { |
|
that.oilSiteInfo.address = result.regeocode.formattedAddress |
|
} else { |
|
that.$message.error('无法获取地址') |
|
} |
|
}) |
|
}) |
|
}) |
|
}, // 正向地理解析 |
|
queryByAddress() { |
|
var that = this |
|
if (that.oilSiteInfo.address&&that.oilSiteInfo.longitude&&that.oilSiteInfo.latitude){ |
|
that.$message.error('经纬度和详细地址须有一项为空') |
|
return; |
|
}else if (this.oilSiteInfo.longitude&&this.oilSiteInfo.latitude){ |
|
that.loadMap() |
|
}else if(that.oilSiteInfo.address) { |
|
this.geography.address = this.oilSiteInfo.address |
|
console.log('this.gaodraohy：' + this.geography.address) |
|
GaodeApi.geography(this.geography).then(res => { |
|
if (res.code === 20000) { |
|
if (res.data.geocodes.length > 0) { |
|
// console.log('经纬度', res.data.geocodes[0].location) |
|
this.oilSiteInfo.longitude = res.data.geocodes[0].location.split(',')[0] |
|
this.oilSiteInfo.latitude = res.data.geocodes[0].location.split(',')[1] |
|
// 根据地址搜索经纬度后重新加载地图 |
|
this.loadMap() |
|
|
|
AMap.plugin('AMap.Geocoder', function() { |
|
var geocoder = new AMap.Geocoder({ |
|
city: '010'// 城市，默认：“全国” |
|
}) |
|
console.log(res.data.geocodes[0].location) |
|
geocoder.getAddress(res.data.geocodes[0].location, function(status, result) { |
|
if (status == 'complete') { |
|
that.oilSiteInfo.address = result.regeocode.formattedAddress |
|
console.log(result.regeocode.formattedAddress) |
|
} else { |
|
that.$message.error('无法获取地址') |
|
} |
|
}) |
|
}) |
|
} |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
<style scoped> |
|
.showbttoms{ |
|
position: fixed; |
|
bottom: 0%; |
|
width: 69.5%; |
|
background: #fff; |
|
padding: 20px 15px; |
|
border-top: 1px solid #e6e6e6; |
|
text-align: right !important; |
|
} |
|
aside { |
|
background: none; |
|
} |
|
.mymap { |
|
width: 76%; |
|
height: 380px; |
|
display: flex; |
|
float: left; |
|
} |
|
.image-vessl { |
|
color: seashell !important; |
|
} |
|
.el-main { |
|
padding: 0; |
|
margin-left:20px; |
|
} |
|
|
|
.el-divider--horizontal{ |
|
margin: 10px 0; |
|
} |
|
</style>
|
|
|