xuechunyuan
3 years ago
parent
8d10b93b24
commit
49b9acc775
10 changed files with 488 additions and 47 deletions
@ -0,0 +1,45 @@ |
|||||||
|
import request from '@/util/axios' |
||||||
|
|
||||||
|
//公参
|
||||||
|
export const carList = [{ cardNo: '鲁LE990Z', deviceId: '41000001254', key: 'NDEwMDAwMDEyNTQ=' }, { cardNo: '鲁LD35633', deviceId: '41000001270', key: 'NDEwMDAwMDEyNzA=' }, ]; |
||||||
|
export const appKey = '69800851-4554-4EEC-8D12-E4211B952798';//轮子appkey
|
||||||
|
export const key = '266843ed-5d4f-472c-beec-e5e50a114d47';//中瑞key
|
||||||
|
|
||||||
|
export const lunzApi = { |
||||||
|
//当前设备状态信息
|
||||||
|
getCurrentDeviceInfoByIMEI: (appKey, IMEI) => request({ |
||||||
|
url: '/api/PIInfo/getCurrentDeviceInfoByIMEI?appKey=' + appKey, |
||||||
|
method: 'post', |
||||||
|
data: { IMEI } |
||||||
|
}), |
||||||
|
//设备定位地址
|
||||||
|
getBaiduNear: (appKey, lat, lng) => request({ |
||||||
|
url: '/api/CommonUse/GetBaiduNear?appKey=' + appKey + '&lat=' + lat + '&lng=' + lng, |
||||||
|
method: 'get', |
||||||
|
}), |
||||||
|
//设备信息
|
||||||
|
getCarUserSimpleByImei: (appKey, imei) => request({ |
||||||
|
url: '/api/Equipment/GetCarUserSimpleByImei?appKey=' + appKey + '&imei=' + imei, |
||||||
|
method: 'get', |
||||||
|
}), |
||||||
|
//指定设备某一天的轨迹记录
|
||||||
|
getLocationsByImei: (appKey, data) => request({ |
||||||
|
url: '/gatewayapi/ApiPlat/GetLocationsByImei?appKey=' + appKey, |
||||||
|
method: 'post', |
||||||
|
data, |
||||||
|
}), |
||||||
|
//设备昨日公里数
|
||||||
|
getYesterdayMile: (appKey) => request({ |
||||||
|
url: '/gatewayapi/ApiPlat/GetYesterdayMile', |
||||||
|
method: 'get', |
||||||
|
headers:{ |
||||||
|
appKey |
||||||
|
}, |
||||||
|
}), |
||||||
|
//报警记录
|
||||||
|
getMessInfoByMessType: (appKey, data) => request({ |
||||||
|
url: '/gatewayapi/ApiPlat/GetMessInfoByMessType?appKey=' + appKey, |
||||||
|
method: 'post', |
||||||
|
data, |
||||||
|
}) |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 47 KiB |
@ -0,0 +1,34 @@ |
|||||||
|
import axios from 'axios' |
||||||
|
|
||||||
|
//跨域请求，允许保存cookie
|
||||||
|
axios.defaults.withCredentials = true; |
||||||
|
|
||||||
|
//返回其他状态码
|
||||||
|
axios.defaults.validateStatus = function (status) { |
||||||
|
return status >= 200 && status <= 500; |
||||||
|
}; |
||||||
|
|
||||||
|
//HTTP Request拦截
|
||||||
|
axios.interceptors.request.use(config => { |
||||||
|
config.headers['Content-Type'] = 'application/json'; |
||||||
|
return config; |
||||||
|
}, error => { |
||||||
|
console.error('Request interceptors:', error); |
||||||
|
return Promise.reject(error) |
||||||
|
}); |
||||||
|
|
||||||
|
//HTTP Response拦截
|
||||||
|
axios.interceptors.response.use(res => { |
||||||
|
const ok = res.data.Success || false, status = res.status || 200, message = res.data.AllMessages || 'Internal Server Error!'; |
||||||
|
|
||||||
|
if (!ok) { |
||||||
|
return Promise.reject(new Error(message)); |
||||||
|
} |
||||||
|
|
||||||
|
return res.data; |
||||||
|
}, error => { |
||||||
|
console.error('Response interceptors:', error); |
||||||
|
return Promise.reject(error); |
||||||
|
}); |
||||||
|
|
||||||
|
export default axios |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
export const calcDate = (date1, date2) => { |
||||||
|
let date3 = date2 - date1; |
||||||
|
|
||||||
|
let days = Math.floor(date3 / (24 * 3600 * 1000)) |
||||||
|
|
||||||
|
let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
|
||||||
|
let hours = Math.floor(leave1 / (3600 * 1000)) |
||||||
|
|
||||||
|
let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
|
||||||
|
let minutes = Math.floor(leave2 / (60 * 1000)) |
||||||
|
|
||||||
|
let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
|
||||||
|
let seconds = Math.round(date3 / 1000) |
||||||
|
return { |
||||||
|
leave1, |
||||||
|
leave2, |
||||||
|
leave3, |
||||||
|
days: days, |
||||||
|
hours: hours, |
||||||
|
minutes: minutes, |
||||||
|
seconds: seconds, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 日期格式化 |
||||||
|
*/ |
||||||
|
export function dateFormat(date, format) { |
||||||
|
format = format || 'yyyy-MM-dd hh:mm:ss'; |
||||||
|
if (date !== 'Invalid Date') { |
||||||
|
let o = { |
||||||
|
"M+": date.getMonth() + 1, //month
|
||||||
|
"d+": date.getDate(), //day
|
||||||
|
"h+": date.getHours(), //hour
|
||||||
|
"m+": date.getMinutes(), //minute
|
||||||
|
"s+": date.getSeconds(), //second
|
||||||
|
"q+": Math.floor((date.getMonth() + 3) / 3), //quarter
|
||||||
|
"S": date.getMilliseconds() //millisecond
|
||||||
|
} |
||||||
|
if (/(y+)/.test(format)) format = format.replace(RegExp.$1, |
||||||
|
(date.getFullYear() + "").substr(4 - RegExp.$1.length)); |
||||||
|
for (let k in o) |
||||||
|
if (new RegExp("(" + k + ")").test(format)) |
||||||
|
format = format.replace(RegExp.$1, |
||||||
|
RegExp.$1.length === 1 ? o[k] : |
||||||
|
("00" + o[k]).substr(("" + o[k]).length)); |
||||||
|
return format; |
||||||
|
} |
||||||
|
return ''; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,64 @@ |
|||||||
|
<template> |
||||||
|
<div class="mile_warp"> |
||||||
|
<div>车辆行驶里程</div> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>排名</th> |
||||||
|
<th>车牌号</th> |
||||||
|
<th>昨日里程(km/h)</th> |
||||||
|
<th>轨迹查询</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr v-for="(item,index) in carMile" :key="'car'+index"> |
||||||
|
<td>{{index+1}}</td> |
||||||
|
<td>{{item.cardNo}}</td> |
||||||
|
<td>{{item.mile}}</td> |
||||||
|
<td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { lunzApi, key, carList } from "@/api/data"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
carList: carList,//车辆设备 |
||||||
|
carMile:[], |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.queryYesterdayMile(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//昨日里程 |
||||||
|
queryYesterdayMile() { |
||||||
|
lunzApi.getYesterdayMile(key).then(res => { |
||||||
|
let resData = res.Data; |
||||||
|
console.log(resData) |
||||||
|
this.carList.map(item => { |
||||||
|
let idx = resData.findIndex(item2 => item2.Imei == item.deviceId); |
||||||
|
item.mile = idx > -1 ? res.Data[idx].Mile : 0; |
||||||
|
this.carMile.push(item); |
||||||
|
}) |
||||||
|
this.carMile.sort((a,b) => { |
||||||
|
return b.mile - a.mile; |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.mile_warp { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,172 @@ |
|||||||
|
<template> |
||||||
|
<div class="map_warp"> |
||||||
|
<div id="container" style="width:100%;height:100%"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { lunzApi, appKey, key, carList } from "@/api/data"; |
||||||
|
import { dateFormat } from "@/util/date"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
appKey: appKey, |
||||||
|
key: key, |
||||||
|
setInterval: null, |
||||||
|
baiduMap: null,//百度实例 |
||||||
|
locationModel: { 0: 'GPS定位', 1: '基站定位', 2: 'Wi-Fi定位', 3: '北斗定位', 4: 'GPS/北斗混合定位' }, |
||||||
|
locationStatus: { 0: '未启用', 1: '离线', 2: '静止', 3: '行驶中' }, |
||||||
|
locationAcc: { 0: '关闭', 1: '开启' }, |
||||||
|
carList: carList,//车辆设备 |
||||||
|
markList: [],//标注点记录 |
||||||
|
polyline: null,//昨日轨迹 |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
if (this.setInterval) { |
||||||
|
clearInterval(this.setInterval); |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeCreate() { |
||||||
|
if (this.setInterval) { |
||||||
|
clearInterval(this.setInterval); |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initMap(); |
||||||
|
window.addEventListener('resize', () => { |
||||||
|
if (this.setInterval) { |
||||||
|
clearInterval(this.setInterval); |
||||||
|
} |
||||||
|
this.initMap(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initMap() { |
||||||
|
this.baiduMap = new BMapGL.Map('container'); |
||||||
|
var point = new BMapGL.Point(118.880278, 35.649947); |
||||||
|
this.baiduMap.centerAndZoom(point, 11); |
||||||
|
this.baiduMap.enableScrollWheelZoom(true); |
||||||
|
var bdary = new BMapGL.Boundary(); |
||||||
|
bdary.get("日照市莒县", rs => { |
||||||
|
var pointArray = []; |
||||||
|
var count = rs.boundaries.length; |
||||||
|
for (var i = 0; i < count; i++) { |
||||||
|
var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物 |
||||||
|
this.baiduMap.addOverlay(ply); //添加覆盖物 |
||||||
|
pointArray = pointArray.concat(ply.getPath()); |
||||||
|
} |
||||||
|
}) |
||||||
|
this.carList.map((item, index) => { |
||||||
|
this.markList.map(mark => { |
||||||
|
this.baiduMap.removeOverlay(mark); |
||||||
|
}) |
||||||
|
this.markList = []; |
||||||
|
this.queryLunz(item.deviceId, item.key); |
||||||
|
this.setInterval = setInterval(() => { |
||||||
|
this.markList.map(mark => { |
||||||
|
this.baiduMap.removeOverlay(mark); |
||||||
|
}) |
||||||
|
this.markList = []; |
||||||
|
this.queryLunz(item.deviceId, item.key); |
||||||
|
}, 20 * 1000) |
||||||
|
}) |
||||||
|
}, |
||||||
|
//查询定位 |
||||||
|
queryLunz(deviceId, key) { |
||||||
|
lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => { |
||||||
|
let carInfo = res1.Data; |
||||||
|
lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => { |
||||||
|
// 创建小车图标 |
||||||
|
var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25)); |
||||||
|
lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => { |
||||||
|
// 创建Marker标注，使用小车图标 |
||||||
|
let lng = res.Data.BaiduLng; |
||||||
|
let lat = res.Data.BaiduLat; |
||||||
|
let pt = new BMapGL.Point(lng, lat); |
||||||
|
var marker = new BMapGL.Marker(pt, { |
||||||
|
icon: myIcon |
||||||
|
}); |
||||||
|
// 将标注添加到地图 |
||||||
|
this.baiduMap.addOverlay(marker); |
||||||
|
this.markList.push(marker); |
||||||
|
let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;"> |
||||||
|
<div>车主：${carInfo.UserName}</div> |
||||||
|
<div>车牌号：${carInfo.PlateNumber}</div> |
||||||
|
<div>设备号：${res.Data.IMEI}</div> |
||||||
|
<div>车架号：${carInfo.VinNumber}</div> |
||||||
|
<div>设备位置：${res2.Data}</div> |
||||||
|
<div>定位方式：${this.locationModel[res.Data.LocateMode]}</div> |
||||||
|
<div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div> |
||||||
|
<div>最后检测时间：${res.Data.LastTimeStamp.replace("T", " ")}</div> |
||||||
|
<div>状态：${this.locationStatus[res.Data.SbcStatus]}</div> |
||||||
|
<div>时速：${res.Data.spd}km/h</div> |
||||||
|
<div>海拔：${res.Data.alt}</div> |
||||||
|
<div>ACC检测：${this.locationAcc[res.Data.acc]}</div> |
||||||
|
<div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${carInfo.DeviceNumber}">昨日轨迹</div> |
||||||
|
</div>`; |
||||||
|
let infoWindow = new BMapGL.InfoWindow(sContent); |
||||||
|
// marker添加点击事件 |
||||||
|
infoWindow.addEventListener('open', () => { |
||||||
|
document.getElementById('btnPath_' + carInfo.DeviceNumber).addEventListener('click', () => { |
||||||
|
this.queryPath(carInfo.DeviceNumber) |
||||||
|
}) |
||||||
|
}); |
||||||
|
marker.addEventListener('click', () => { |
||||||
|
this.openInfo(infoWindow, pt); |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
//昨日轨迹 |
||||||
|
queryPath(deviceId) { |
||||||
|
let now = new Date(); |
||||||
|
let yesterDay1 = now.setDate(now.getDate() - 1); |
||||||
|
let yesterDay2 = now.setDate(now.getDate() - 1); |
||||||
|
let param = { |
||||||
|
"Imei": deviceId, |
||||||
|
"StartTime": dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'), |
||||||
|
"EndTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'), |
||||||
|
"MaxValue": 500 |
||||||
|
} |
||||||
|
lunzApi.getLocationsByImei(this.key, param).then(res => { |
||||||
|
let point = []; |
||||||
|
res.Data.map(item => { |
||||||
|
point.push(new BMapGL.Point(item.Lng, item.Lat)); |
||||||
|
}); |
||||||
|
if (this.polyline) { |
||||||
|
this.baiduMap.removeOverlay(this.polyline); |
||||||
|
this.polyline = null; |
||||||
|
} |
||||||
|
// this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 2, strokeOpacity: 1, }) |
||||||
|
// this.baiduMap.addOverlay(this.polyline); |
||||||
|
this.polyline = new BMapGL.Polyline(point,{ |
||||||
|
strokeColor: '#F5533D', |
||||||
|
strokeWeight: 3, |
||||||
|
strokeOpacity: 1, |
||||||
|
}); |
||||||
|
let trackAni = new BMapGLLib.TrackAnimation(this.baiduMap, this.polyline, { |
||||||
|
overallView: true, |
||||||
|
tilt: 30, |
||||||
|
duration: 20000, |
||||||
|
delay: 300 |
||||||
|
}); |
||||||
|
trackAni.start(); |
||||||
|
}) |
||||||
|
}, |
||||||
|
openInfo(infoWindow, pt) { |
||||||
|
this.baiduMap.openInfoWindow(infoWindow, pt); |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.map_warp { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue