Merge branch 'main' of http://42.192.7.176:3000/suojin/physical_distribution
jinna
3 years ago
commit
cebd166a86
10 changed files with 396 additions and 9279 deletions
File diff suppressed because it is too large
Load Diff
@ -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