朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 1474cf1b74cbe2deaab3a3a263fc74981bba09fa 1 个父辈 fb1f2fa1

新增GPS定位功能

内嵌 并排对比
正在显示 5 个修改的文件 包含 261 行增加 和 9 行删除
... ... @@ -4,6 +4,14 @@ import http from "../http";
let baseServiceURL = 'wms-server-warehouse'
const serviceName = '/cloud-user-center'
//GPS车辆绑定/解绑
//export const equipmentVehicleBind = params => { return axios.get(`${baseServiceURL}/gps/location/equipmentVehicleBind`, { params: params }); };
//GPS车辆历史轨迹
export const gpshistoryTrack = params => { return axios.get(`${baseServiceURL}/gps/location/gpshistoryTrack`, { params: params }); };
//GPS车辆当前定位
export const gpslastlocation = params => { return axios.get(`${baseServiceURL}/gps/location/gpslastlocation`, { params: params }); };
//GPS多车当前定位
export const gpsqueryMulVel = params => { return axios.get(`${baseServiceURL}/gps/location/gpsqueryMulVel`, { params: params }); };
//车辆定位
export const selectVehicle = params => { return axios.get(`${baseServiceURL}/map/location/lastlocation`, { params: params }); };
... ...
... ... @@ -187,6 +187,7 @@ import VehicleInfo from "./views/dispatch/VehicleInfo";
import DispatchNode from "./views/dispatch/DispatchNode";
import Dispatch from "./views/dispatch/Dispatch";
import multiple from "./views/deploy/multiple";
import satellite from "./views/deploy/satellite";
... ... @@ -574,6 +575,7 @@ let routes = [
{path:'/attendance',component:attendance,name:'出勤历史'},
{path:'/conveyance',component:conveyance,name:'出勤车辆'},
{path:'/multiple',component:multiple,name:'多车定位'},
{path:'/satellite',component:satellite,name:'GPS多车定位'},
{path:'/station',component:station,name:'场站管理'},
{path:'/house',component:house,name:'仓库管理'},
{path:'/inventroyrecord',component:inventroyrecord,name:'库存变更记录'},
... ...
<template>
<div id="mapContainer"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {queryMulVel, gpsqueryMulVel} from '../../api/consigner/vehicle';
export default {
data() {
return {
mapInstance: null,
markers:[]
};
},
methods: {
fetchDataAndUpdateMap() {
// 请求后端数据
gpsqueryMulVel().then((response) => {
const res = response.data;
//const firstVcl = res.data.data.firstVcl; // 获取首个车辆信息
const others = res.data.data; // 获取其他车辆信息
// 清除之前的标记
this.markers.forEach(marker => {
marker.setMap(null);
});
this.markers = [];
/*// 添加首个车辆标记
if (firstVcl && firstVcl.lon && firstVcl.lat) {
const marker = new AMap.Marker({
position: [firstVcl.lon / 600000.0, firstVcl.lat / 600000.0],
map: this.mapInstance,
title: firstVcl.vno,
label: {
content: firstVcl.vno,
offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
}
});
this.markers.push(marker);
}*/
if (others) {
others.forEach(vehicle => {
if (vehicle.lon && vehicle.lat) {
const marker = new AMap.Marker({
position: [vehicle.lon, vehicle.lat],
map: this.mapInstance,
title: vehicle.vehicle,
label: {
content: vehicle.vehicle,
offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
}
});
this.markers.push(marker);
}
});
}
// 自动调整地图视野，确保所有标记都可见
/*if (this.markers.length > 0) {
const bounds = new AMap.Bounds();
this.markers.forEach(marker => {
bounds.extend(marker.getPosition());
});
this.mapInstance.setBounds(bounds);
}*/
if(others && others[0].lon && others[0].lat){
this.mapInstance.setCenter([others[0].lon,others[0].lat])
}
}).catch(error => {
console.error('Failed to fetch data:', error);
});
}
},
mounted() {
AMapLoader.load({
key: 'fdb27c13681d084e85ff8457b5cbe540',
version: '2.0',
plugins: [],
}).then((AMap) => {
this.mapInstance = new AMap.Map('mapContainer', {
zoom: 5,
center: [116.397428, 39.90923], // 默认中心点位置
//viewMode: '3D', // 使用3D视图
//showIndoorMap: false,
//showLabel: false,
// mapStyle: 'amap://styles/dark',
//mapStyle: 'amap://styles/fresh',
});
// 首次加载数据并更新地图
this.fetchDataAndUpdateMap();
// 启动定时器，每10分钟刷新一次数据并更新地图
setInterval(() => {
this.fetchDataAndUpdateMap();
}, 10 * 60 * 1000);
}).catch((err) => {
console.error('Failed to load AMap:', err);
});
},
};
</script>
<style>
#mapContainer {
width: 100%;
height: 100vh;
}
</style>
... ...
... ... @@ -4,7 +4,8 @@
<el-card style="background-color: #F5F7FA">
<el-row>
<el-form :model="queryInfo" :rules="rules" ref="ruleForm">
<el-col :span="4.5">
<el-row>
<el-col :span="7">
<el-form-item label="" prop="vclN">
<el-input v-model="queryInfo.vclN" size="small" style="width: 170px"
placeholder="车牌号" clearable required>
... ... @@ -12,11 +13,11 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="4.5">
<el-col :span="7">
<el-form-item label="" prop="vco">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">车牌类型</div>
<el-select v-model="queryInfo.vco" placeholder="车牌类型" style="width: 70px">
<el-select v-model="queryInfo.vco" placeholder="车牌类型" style="width: 100px">
<el-option label="蓝牌" value="1"></el-option>
<el-option label="黄牌" value="2"></el-option>
<el-option label="绿牌" value="3"></el-option>
... ... @@ -24,7 +25,20 @@
</div>
</el-form-item>
</el-col>
<el-col :span="6.5">
<el-col :span="7">
<el-form-item label="" prop="satellite">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">卫星</div>
<el-select required v-model="satellite" placeholder="卫星" style="width: 100px">
<el-option label="北斗" value="1"></el-option>
<el-option label="GPS" value="2"></el-option>
</el-select>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="" prop="qryEtm">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">开始时间</div>
... ... @@ -41,7 +55,7 @@
</div>
</el-form-item>
</el-col>
<el-col :span="6.5">
<el-col :span="7">
<el-form-item label="" prop="qryBtm">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">结束时间</div>
... ... @@ -58,13 +72,14 @@
</div>
</el-form-item>
</el-col>
</el-form>
<el-col :span="1">
<el-button type="primary" size="mini" @click="getList()">
查询
</el-button>
</el-col>
</el-row>
</el-form>
</el-row>
</el-card>
</el-row>
<div id="mapContainer" ref="mapContainer" style="width: 100%; height: 500px;"></div>
... ... @@ -72,7 +87,7 @@
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { historyTrack } from '../../api/consigner/vehicle';
import { historyTrack,gpshistoryTrack } from '../../api/consigner/vehicle';
export default {
... ... @@ -87,6 +102,7 @@
//结束时间
qryBtm: '',
},
satellite:'1',
pickerOptions: {
shortcuts: [{
text: '最近一周',
... ... @@ -155,6 +171,7 @@
},
methods: {
getList() {
if(this.satellite=='1'){
this.$refs.ruleForm.validate(valid => {
if (!valid) return;
const _this = this;
... ... @@ -170,6 +187,24 @@
_this.$message.error('获取车辆轨迹失败：' + error.toString());
});
})
}else{
this.$refs.ruleForm.validate(valid => {
if (!valid) return;
const _this = this;
gpshistoryTrack(this.queryInfo).then((response) => {
const res = response.data;
if (res.code !== '200') {
return _this.$message.error('获取车辆轨迹失败！');
}
// 调用initMap方法，并将轨迹数据传递过去
_this.initMapGPS(res.data.data);
_this.$message.success('获取车辆轨迹成功！');
}).catch(error => {
_this.$message.error('获取车辆轨迹失败：' + error.toString());
});
})
}
},
initMap(trackArray) {
const _this = this;
... ... @@ -201,6 +236,36 @@
console.error('初始化地图失败：', err);
});
},
initMapGPS(DATA) {
const _this = this;
AMapLoader.load({
key: 'fdb27c13681d084e85ff8457b5cbe540',
version: '2.0',
plugins: [], // 可以加载地图插件，比如定位、地图工具等
}).then((AMap) => {
// 创建地图对象并存储在 _this.mapInstance 中
_this.map = new AMap.Map('mapContainer', {
zoom: 10, // 设置地图缩放级别
center: [116.397428, 39.90923], // 设置地图中心点坐标
});
// 将轨迹数据添加到地图上
//var lineArr = trackArray.map((item) => [item.longitude / 600000.0, item.latitude / 600000.0]);
this.convertedCoords = this.convertBDToAMapGPS(DATA);
console.log(this.convertedCoords)
_this.poly = new AMap.Polyline({
path: this.convertedCoords, // 设置折线路径
strokeColor: "#3366ff", // 线颜色
strokeOpacity: 1, // 线透明度
strokeWeight: 3, // 线宽
strokeStyle: "solid", // 线样式
});
_this.poly.setMap(_this.map);
_this.map.setCenter(this.convertedCoords[0])
//_this.map.setFitView();
}).catch((err) => {
console.error('初始化地图失败：', err);
});
},
convertBDToAMap(bdCoordData) {
const aMapCoordData = [];
bdCoordData.forEach(coord => {
... ... @@ -210,7 +275,15 @@
});
return aMapCoordData;
},
convertBDToAMapGPS(bdCoordData) {
const aMapCoordData = [];
bdCoordData.forEach(coord => {
const lon = parseFloat(coord.lon); // 将经度从北斗格式转换为高德地图格式
const lat = parseFloat(coord.lat); // 将纬度从北斗格式转换为高德地图格式
aMapCoordData.push([lon, lat]); // 添加到结果数组
});
return aMapCoordData;
},
},
... ...
... ... @@ -41,6 +41,17 @@
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="satellite">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">卫星</div>
<el-select required v-model="satellite" placeholder="卫星" style="width: 100px">
<el-option label="北斗" value="1"></el-option>
<el-option label="GPS" value="2"></el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="2">
<el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">
查询
... ... @@ -74,7 +85,7 @@
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {selectVehicle, selectNameList, selectByliscenNo, selectList} from '../../api/consigner/vehicle';
import {selectVehicle, selectNameList, selectByliscenNo, selectList, gpslastlocation} from '../../api/consigner/vehicle';
import {loginedUserInfo} from "../../api/user";
export default {
... ... @@ -87,6 +98,7 @@
vno: '',
vnocolor: '2'
},
satellite:'1',
vnos:[],
loading:false,
imageUrls: [], // 存储图片地址的数组
... ... @@ -151,6 +163,7 @@
});
},
getList() {
if(this.satellite=='1'){
this.$refs.ruleForm.validate(valid => {
if (!valid) return;
const _this = this;
... ... @@ -199,6 +212,53 @@
_this.$message.error('获取车辆位置失败：' + error.toString());
});
})
}else{
this.$refs.ruleForm.validate(valid => {
if (!valid) return;
const _this = this;
gpslastlocation({vno:this.queryInfo.vno}).then((response) => {
const res = response.data;
if (res.code !== '200') {
return _this.$message.error('获取车辆位置失败！');
}
if(res.data.data!=='' && res.data.data!=null){
// 获取车辆位置信息
const vehicle = res.data.data;
// 在获取车辆位置成功的部分，创建信息窗口或者自定义标记
if (vehicle[0].lon && vehicle[0].lat) {
const markerContent = document.createElement('div');
markerContent.innerHTML = `
<div class="rounded-corner" STYLE="width: 250px;background-color: rgba(255,255,255,0.7);text-align: left">
<p>车牌号：${vehicle[0].vehicle}</p >
<p>速度：${vehicle[0].speed}</p >
<p>车辆位置：${vehicle[0].placeName}</p >
</div>
`;
// 添加车辆位置标记
const marker = new AMap.Marker({
position: [vehicle[0].lon, vehicle[0].lat],
map: _this.mapInstance,
content: markerContent
});
const defaultMarker = new AMap.Marker({
position: [vehicle[0].lon, vehicle[0].lat],
map: _this.mapInstance,
});
// 移动地图中心到车辆位置
_this.mapInstance.setCenter([vehicle[0].lon, vehicle[0].lat]);
_this.$message.success('获取车辆位置成功！');
} else {
_this.$message.warning('车辆位置信息不完整！');
}
}else{
return _this.$message.error('无相关车辆信息返回');
}
}).catch(error => {
_this.$message.error('获取车辆位置失败：' + error.toString());
});
})
}
},
initMap() {
AMapLoader.load({
... ...