mirror of
https://github.com/shawncai/ERP.git
synced 2024-09-20 06:56:07 +08:00
车辆地图加载完成
车辆地图加载完成
This commit is contained in:
parent
8d9fb9559e
commit
4951071a1f
|
@ -11,10 +11,67 @@ export function vehicleStat() {
|
|||
// 获取车辆信息
|
||||
export function getVehicleStat(query) {
|
||||
var params = new URLSearchParams()
|
||||
params.append('snCode', query) // 你要传给后台的参数值 key/value
|
||||
if (query !== '' && query !== null && query !== undefined) {
|
||||
params.append('snCode', query) // 你要传给后台的参数值 key/value
|
||||
}
|
||||
return request({
|
||||
url: '/vehicle/getVehicleStat',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取客户信息
|
||||
export function customerInfo(query) {
|
||||
var params = new URLSearchParams()
|
||||
if (query !== '' && query !== null && query !== undefined) {
|
||||
params.append('customerId', query) // 你要传给后台的参数值 key/value
|
||||
}
|
||||
return request({
|
||||
url: '/customer/customerInfo',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取车辆详细信息
|
||||
export function rideCount(query, query2) {
|
||||
var params = new URLSearchParams()
|
||||
if (query !== '' && query !== null && query !== undefined) {
|
||||
params.append('customerId', query) // 你要传给后台的参数值 key/value
|
||||
}
|
||||
if (query2 !== '' && query2 !== null && query2 !== undefined) {
|
||||
params.append('snCode', query2) // 你要传给后台的参数值 key/value
|
||||
}
|
||||
return request({
|
||||
url: '/vehicle/rideCount',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
// 锁定车辆
|
||||
export function userLockCar(query) {
|
||||
var params = new URLSearchParams()
|
||||
if (query !== '' && query !== null && query !== undefined) {
|
||||
params.append('deviceId', query) // 你要传给后台的参数值 key/value
|
||||
}
|
||||
return request({
|
||||
url: '/remoteControl/userLockCar',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
||||
// 车辆开锁
|
||||
export function userUnLockCar(query) {
|
||||
var params = new URLSearchParams()
|
||||
if (query !== '' && query !== null && query !== undefined) {
|
||||
params.append('deviceId', query) // 你要传给后台的参数值 key/value
|
||||
}
|
||||
return request({
|
||||
url: '/remoteControl/userUnLockCar',
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ const app = {
|
|||
},
|
||||
topmenu: 1,
|
||||
device: 'desktop',
|
||||
language: Cookies.get('language') || 'en',
|
||||
language: Cookies.get('language') || 'zh',
|
||||
size: Cookies.get('size') || 'medium'
|
||||
},
|
||||
mutations: {
|
||||
|
|
|
@ -5,20 +5,32 @@
|
|||
<el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane label="全部" name="first">
|
||||
<div v-for="(item, index) in carlist" :key="index" class="carlistdata">
|
||||
<div>
|
||||
<div :class="activename ===item.snCode? 'caritem active' : 'caritem'" @click="choosecar(item)">
|
||||
{{ item.snCode }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="在线" name="second">
|
||||
<div v-for="(item, index) in carlist2" :key="index" class="carlistdata">
|
||||
<div :class="activename ===item.snCode? 'caritem active' : 'caritem'" @click="choosecar(item)">
|
||||
{{ item.snCode }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="离线" name="third">
|
||||
<div v-for="(item, index) in carlist3" :key="index" class="carlistdata">
|
||||
<div :class="activename ===item.snCode? 'caritem active' : 'caritem'" @click="choosecar(item)">
|
||||
{{ item.snCode }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="在线" name="second">在线</el-tab-pane>
|
||||
<el-tab-pane label="离线" name="third">离线</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div id="map_canvas" style="height: 850px; width: 100%"/>
|
||||
<div id="map_canvas" style="height:800px; width: 100%"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { vehicleStat } from '@/api/carlocation'
|
||||
import { vehicleStat, customerInfo, rideCount, userLockCar, userUnLockCar } from '@/api/carlocation'
|
||||
|
||||
export default {
|
||||
name: 'GGMap',
|
||||
|
@ -31,8 +43,12 @@ export default {
|
|||
position: {},
|
||||
websock: null,
|
||||
activeName2: 'first',
|
||||
carlist: []
|
||||
|
||||
carlist: [],
|
||||
carlist2: [],
|
||||
carlist3: [],
|
||||
activename: '',
|
||||
dialogVisible: false,
|
||||
personinfo: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
@ -42,13 +58,40 @@ export default {
|
|||
this.mapBuild() // 初始化实例之后调用
|
||||
},
|
||||
methods: {
|
||||
|
||||
choosecar(val) {
|
||||
this.activename = val.snCode
|
||||
console.log(val)
|
||||
if (val.longitude && val.latitude) {
|
||||
this.center = { lng: val.longitude, lat: val.latitude }
|
||||
this.mapBuild(val)
|
||||
} else {
|
||||
this.$message({
|
||||
message: '该车定位有问题',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
if (val.customerId === null || val.customerId === '' || val.customerId === undefined) {
|
||||
this.$message({
|
||||
message: '该车未绑定',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
getvehicleStat() {
|
||||
vehicleStat()
|
||||
.then(res => {
|
||||
if (res.data.ret === 200) {
|
||||
const arr = res.data.data.content
|
||||
this.carlist = res.data.data.content
|
||||
this.carlist2 = res.data.data.content.filter(item => {
|
||||
return item.line === 1
|
||||
})
|
||||
this.carlist3 = res.data.data.content.filter(item => {
|
||||
return item.line === 2
|
||||
})
|
||||
const arrb = []
|
||||
console.log(arr)
|
||||
arr.map(item => {
|
||||
const newobj = {}
|
||||
const position = {}
|
||||
|
@ -56,12 +99,15 @@ export default {
|
|||
position.lng = item.longitude
|
||||
position.lat = item.latitude
|
||||
newobj.position = position
|
||||
newobj.name = item.snCode
|
||||
newobj.snCode = item.snCode
|
||||
newobj.customerId = item.customerId
|
||||
newobj.lockStat = item.lockStat
|
||||
arrb.push(newobj)
|
||||
}
|
||||
})
|
||||
console.log(arrb)
|
||||
this.markers = arrb
|
||||
this.center = arrb[1].position
|
||||
this.mapBuild()
|
||||
}
|
||||
})
|
||||
|
@ -70,43 +116,115 @@ export default {
|
|||
console.log(tab, event)
|
||||
},
|
||||
// 地图实例
|
||||
mapBuild() {
|
||||
mapBuild(val) {
|
||||
// 创建地图实例,zoom是缩放比例
|
||||
// eslint-disable-next-line no-undef
|
||||
const map = new google.maps.Map(document.getElementById('map_canvas'), {
|
||||
zoom: 6,
|
||||
zoom: 15,
|
||||
center: this.center,
|
||||
// eslint-disable-next-line no-undef
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
})
|
||||
// 这里因为需要很多标记,所以遍历了this.markers(后端给的数据)来循环创建标记
|
||||
this.setmakerinfo(map, val)
|
||||
},
|
||||
setmakerinfo(map, val) {
|
||||
this.markers.map(item => {
|
||||
// const marker = new MarkerWithLabel({
|
||||
// position: item.position,
|
||||
// icon: '../../../static/img/qishou.png', // 标记自定义图标
|
||||
// draggable: false, // 不可拖动
|
||||
// map: map, // 地图实例
|
||||
// labelContent: item.name, // label的内容
|
||||
// labelAnchor: new google.maps.Point(22, 0), // label的位置,可以调
|
||||
// labelClass: 'labels', // the CSS class for the label
|
||||
// labelStyle: { background: '#fff', padding: '5px' }
|
||||
// })
|
||||
// 自定义信息窗口
|
||||
// eslint-disable-next-line no-undef
|
||||
const marker = new google.maps.Marker({
|
||||
map: map,
|
||||
position: item.position
|
||||
position: item.position,
|
||||
icon: '../../../static/img/qishou2.png'
|
||||
})
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const iw = new google.maps.InfoWindow({
|
||||
content: `<div>
|
||||
<p>门店地址: ${item.position}</p>
|
||||
<p>门店名:${item.name}</p>
|
||||
rideCount(item.customerId, item.snCode)
|
||||
.then(res => {
|
||||
console.log(res)
|
||||
if (res.data.ret === 200) {
|
||||
customerInfo(item.customerId)
|
||||
.then(result => {
|
||||
console.log(result)
|
||||
// eslint-disable-next-line no-undef
|
||||
const iw = new google.maps.InfoWindow({
|
||||
content: `<div>
|
||||
<div style="border-bottom: 1px solid #f1f1f1;padding:10px">${item.snCode}</div>
|
||||
<p>里程: ${res.data.data.content[0].Miles}</p>
|
||||
<p>联系人: ${result.data.data.content.customerName}</p>
|
||||
<p>联系电话: ${result.data.data.content.phoneNumber}</p>
|
||||
<div style="border-top: 1px solid #f1f1f1; padding:10px" id="xyz" class="${item.snCode}">
|
||||
锁车
|
||||
</div>
|
||||
<div style="border-top: 1px solid #f1f1f1; padding:10px" id="xyz2" class="${item.snCode}">
|
||||
开锁
|
||||
</div>
|
||||
</div>` })
|
||||
// 点击信息窗口显示
|
||||
// eslint-disable-next-line no-undef
|
||||
google.maps.event.addListener(marker, 'click', function(e) { iw.open(map, marker) })
|
||||
|
||||
// 点击信息窗口显
|
||||
if (val) {
|
||||
if (val.snCode === item.snCode) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const marker2 = new google.maps.Marker({
|
||||
map: map,
|
||||
position: item.position,
|
||||
icon: '../../../static/img/qishou2.png'
|
||||
})
|
||||
iw.open(map, marker2)
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line no-undef
|
||||
google.maps.event.addListener(marker, 'click', function(e) {
|
||||
console.log(marker)
|
||||
console.log(e)
|
||||
console.log(iw)
|
||||
|
||||
iw.open(map, marker)
|
||||
})
|
||||
const that = this
|
||||
// eslint-disable-next-line no-undef
|
||||
google.maps.event.addListener(iw, 'domready', function() {
|
||||
var dss = document.getElementById('xyz')
|
||||
var dss2 = document.getElementById('xyz2')
|
||||
var snCode = document.getElementById('xyz').className
|
||||
console.log(item)
|
||||
if (item.lockStat === 1) {
|
||||
dss2.style.display = 'none'
|
||||
dss.style.display = 'block'
|
||||
dss.onclick = function() {
|
||||
console.log(snCode)
|
||||
userLockCar(snCode).then(res => {
|
||||
if (res.data.ret === 200) {
|
||||
that.$message({
|
||||
message: '锁车命令发送成功',
|
||||
type: 'success'
|
||||
})
|
||||
setTimeout(function() {
|
||||
that.getvehicleStat()
|
||||
}, 4000)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if (item.lockStat === 2) {
|
||||
dss.style.display = 'none'
|
||||
dss2.style.display = 'block'
|
||||
dss2.onclick = function() {
|
||||
console.log(snCode)
|
||||
userUnLockCar(snCode).then(res => {
|
||||
if (res.data.ret === 200) {
|
||||
that.$message({
|
||||
message: '开锁命令发送成功',
|
||||
type: 'success'
|
||||
})
|
||||
setTimeout(function() {
|
||||
that.getvehicleStat()
|
||||
}, 4000)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -126,4 +244,12 @@ export default {
|
|||
.leftlocation{
|
||||
width: 20%
|
||||
}
|
||||
.caritem {
|
||||
padding: 10px;
|
||||
color: #9e9e9e;
|
||||
cursor:pointer
|
||||
}
|
||||
.active {
|
||||
color: #000
|
||||
}
|
||||
</style>
|
||||
|
|
BIN
static/img/qishou2.png
Normal file
BIN
static/img/qishou2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in a new issue