朱兆平 / vue_cli · 提交

转到一个项目

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

新增GPS定位功能

内嵌 并排对比
正在显示 5 个修改的文件 包含 369 行增加 和 117 行删除
@@ -4,6 +4,14 @@ import http from "../http"; @@ -4,6 +4,14 @@ import http from "../http";
4 let baseServiceURL = 'wms-server-warehouse' 4 let baseServiceURL = 'wms-server-warehouse'
5 const serviceName = '/cloud-user-center' 5 const serviceName = '/cloud-user-center'
6 6
  7 +//GPS车辆绑定/解绑
  8 +//export const equipmentVehicleBind = params => { return axios.get(`${baseServiceURL}/gps/location/equipmentVehicleBind`, { params: params }); };
  9 +//GPS车辆历史轨迹
  10 +export const gpshistoryTrack = params => { return axios.get(`${baseServiceURL}/gps/location/gpshistoryTrack`, { params: params }); };
  11 +//GPS车辆当前定位
  12 +export const gpslastlocation = params => { return axios.get(`${baseServiceURL}/gps/location/gpslastlocation`, { params: params }); };
  13 +//GPS多车当前定位
  14 +export const gpsqueryMulVel = params => { return axios.get(`${baseServiceURL}/gps/location/gpsqueryMulVel`, { params: params }); };
7 15
8 //车辆定位 16 //车辆定位
9 export const selectVehicle = params => { return axios.get(`${baseServiceURL}/map/location/lastlocation`, { params: params }); }; 17 export const selectVehicle = params => { return axios.get(`${baseServiceURL}/map/location/lastlocation`, { params: params }); };
@@ -187,6 +187,7 @@ import VehicleInfo from "./views/dispatch/VehicleInfo"; @@ -187,6 +187,7 @@ import VehicleInfo from "./views/dispatch/VehicleInfo";
187 import DispatchNode from "./views/dispatch/DispatchNode"; 187 import DispatchNode from "./views/dispatch/DispatchNode";
188 import Dispatch from "./views/dispatch/Dispatch"; 188 import Dispatch from "./views/dispatch/Dispatch";
189 import multiple from "./views/deploy/multiple"; 189 import multiple from "./views/deploy/multiple";
  190 +import satellite from "./views/deploy/satellite";
190 191
191 192
192 193
@@ -574,6 +575,7 @@ let routes = [ @@ -574,6 +575,7 @@ let routes = [
574 {path:'/attendance',component:attendance,name:'出勤历史'}, 575 {path:'/attendance',component:attendance,name:'出勤历史'},
575 {path:'/conveyance',component:conveyance,name:'出勤车辆'}, 576 {path:'/conveyance',component:conveyance,name:'出勤车辆'},
576 {path:'/multiple',component:multiple,name:'多车定位'}, 577 {path:'/multiple',component:multiple,name:'多车定位'},
  578 + {path:'/satellite',component:satellite,name:'GPS多车定位'},
577 {path:'/station',component:station,name:'场站管理'}, 579 {path:'/station',component:station,name:'场站管理'},
578 {path:'/house',component:house,name:'仓库管理'}, 580 {path:'/house',component:house,name:'仓库管理'},
579 {path:'/inventroyrecord',component:inventroyrecord,name:'库存变更记录'}, 581 {path:'/inventroyrecord',component:inventroyrecord,name:'库存变更记录'},
  1 +<template>
  2 + <div id="mapContainer"></div>
  3 +</template>
  4 +
  5 +<script>
  6 + import AMapLoader from '@amap/amap-jsapi-loader';
  7 + import {queryMulVel, gpsqueryMulVel} from '../../api/consigner/vehicle';
  8 +
  9 + export default {
  10 + data() {
  11 + return {
  12 + mapInstance: null,
  13 + markers:[]
  14 + };
  15 + },
  16 + methods: {
  17 + fetchDataAndUpdateMap() {
  18 + // 请求后端数据
  19 + gpsqueryMulVel().then((response) => {
  20 + const res = response.data;
  21 + //const firstVcl = res.data.data.firstVcl; // 获取首个车辆信息
  22 + const others = res.data.data; // 获取其他车辆信息
  23 +
  24 + // 清除之前的标记
  25 + this.markers.forEach(marker => {
  26 + marker.setMap(null);
  27 + });
  28 + this.markers = [];
  29 +
  30 + /*// 添加首个车辆标记
  31 + if (firstVcl && firstVcl.lon && firstVcl.lat) {
  32 + const marker = new AMap.Marker({
  33 + position: [firstVcl.lon / 600000.0, firstVcl.lat / 600000.0],
  34 + map: this.mapInstance,
  35 + title: firstVcl.vno,
  36 + label: {
  37 + content: firstVcl.vno,
  38 + offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
  39 + }
  40 + });
  41 + this.markers.push(marker);
  42 + }*/
  43 + if (others) {
  44 + others.forEach(vehicle => {
  45 + if (vehicle.lon && vehicle.lat) {
  46 + const marker = new AMap.Marker({
  47 + position: [vehicle.lon, vehicle.lat],
  48 + map: this.mapInstance,
  49 + title: vehicle.vehicle,
  50 + label: {
  51 + content: vehicle.vehicle,
  52 + offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
  53 + }
  54 + });
  55 + this.markers.push(marker);
  56 + }
  57 + });
  58 + }
  59 + // 自动调整地图视野，确保所有标记都可见
  60 + /*if (this.markers.length > 0) {
  61 + const bounds = new AMap.Bounds();
  62 + this.markers.forEach(marker => {
  63 + bounds.extend(marker.getPosition());
  64 + });
  65 + this.mapInstance.setBounds(bounds);
  66 + }*/
  67 + if(others && others[0].lon && others[0].lat){
  68 + this.mapInstance.setCenter([others[0].lon,others[0].lat])
  69 + }
  70 + }).catch(error => {
  71 + console.error('Failed to fetch data:', error);
  72 + });
  73 + }
  74 + },
  75 + mounted() {
  76 + AMapLoader.load({
  77 + key: 'fdb27c13681d084e85ff8457b5cbe540',
  78 + version: '2.0',
  79 + plugins: [],
  80 + }).then((AMap) => {
  81 + this.mapInstance = new AMap.Map('mapContainer', {
  82 + zoom: 5,
  83 + center: [116.397428, 39.90923], // 默认中心点位置
  84 + //viewMode: '3D', // 使用3D视图
  85 + //showIndoorMap: false,
  86 + //showLabel: false,
  87 + // mapStyle: 'amap://styles/dark',
  88 + //mapStyle: 'amap://styles/fresh',
  89 + });
  90 +
  91 + // 首次加载数据并更新地图
  92 + this.fetchDataAndUpdateMap();
  93 +
  94 + // 启动定时器，每10分钟刷新一次数据并更新地图
  95 + setInterval(() => {
  96 + this.fetchDataAndUpdateMap();
  97 + }, 10 * 60 * 1000);
  98 + }).catch((err) => {
  99 + console.error('Failed to load AMap:', err);
  100 + });
  101 + },
  102 + };
  103 +</script>
  104 +<style>
  105 + #mapContainer {
  106 + width: 100%;
  107 + height: 100vh;
  108 + }
  109 +</style>
@@ -4,66 +4,81 @@ @@ -4,66 +4,81 @@
4 <el-card style="background-color: #F5F7FA"> 4 <el-card style="background-color: #F5F7FA">
5 <el-row> 5 <el-row>
6 <el-form :model="queryInfo" :rules="rules" ref="ruleForm"> 6 <el-form :model="queryInfo" :rules="rules" ref="ruleForm">
7 - <el-col :span="4.5">  
8 - <el-form-item label="" prop="vclN">  
9 - <el-input v-model="queryInfo.vclN" size="small" style="width: 170px"  
10 - placeholder="车牌号" clearable required>  
11 - <template slot="prepend">车牌号</template>  
12 - </el-input>  
13 - </el-form-item>  
14 - </el-col>  
15 - <el-col :span="4.5">  
16 - <el-form-item label="" prop="vco">  
17 - <div class="my-text-area">  
18 - <div class="el-input-group__prepend prepand">车牌类型</div>  
19 - <el-select v-model="queryInfo.vco" placeholder="车牌类型" style="width: 70px">  
20 - <el-option label="蓝牌" value="1"></el-option>  
21 - <el-option label="黄牌" value="2"></el-option>  
22 - <el-option label="绿牌" value="3"></el-option>  
23 - </el-select>  
24 - </div>  
25 - </el-form-item>  
26 - </el-col>  
27 - <el-col :span="6.5">  
28 - <el-form-item label="" prop="qryEtm">  
29 - <div class="my-text-area">  
30 - <div class="el-input-group__prepend prepand">开始时间</div>  
31 - <!-- <span class="demonstration">带快捷选项</span>-->  
32 - <el-date-picker  
33 - v-model="queryInfo.qryEtm"  
34 - type="datetime"  
35 - value-format="yyyy-MM-dd HH:mm:ss"  
36 - format="yyyy-MM-dd HH:mm:ss"  
37 - placeholder="选择日期时间"  
38 - align="right" style="width: 170px"  
39 - :picker-options="pickerOptions">  
40 - </el-date-picker>  
41 - </div>  
42 - </el-form-item>  
43 - </el-col>  
44 - <el-col :span="6.5">  
45 - <el-form-item label="" prop="qryBtm">  
46 - <div class="my-text-area">  
47 - <div class="el-input-group__prepend prepand">结束时间</div>  
48 - <!-- <span class="demonstration">带快捷选项</span>-->  
49 - <el-date-picker  
50 - v-model="queryInfo.qryBtm"  
51 - type="datetime"  
52 - value-format="yyyy-MM-dd HH:mm:ss"  
53 - format="yyyy-MM-dd HH:mm:ss"  
54 - placeholder="选择日期时间"  
55 - align="right" style="width: 170px"  
56 - :picker-options="pickerOptions">  
57 - </el-date-picker>  
58 - </div>  
59 - </el-form-item>  
60 - </el-col> 7 + <el-row>
  8 + <el-col :span="7">
  9 + <el-form-item label="" prop="vclN">
  10 + <el-input v-model="queryInfo.vclN" size="small" style="width: 170px"
  11 + placeholder="车牌号" clearable required>
  12 + <template slot="prepend">车牌号</template>
  13 + </el-input>
  14 + </el-form-item>
  15 + </el-col>
  16 + <el-col :span="7">
  17 + <el-form-item label="" prop="vco">
  18 + <div class="my-text-area">
  19 + <div class="el-input-group__prepend prepand">车牌类型</div>
  20 + <el-select v-model="queryInfo.vco" placeholder="车牌类型" style="width: 100px">
  21 + <el-option label="蓝牌" value="1"></el-option>
  22 + <el-option label="黄牌" value="2"></el-option>
  23 + <el-option label="绿牌" value="3"></el-option>
  24 + </el-select>
  25 + </div>
  26 + </el-form-item>
  27 + </el-col>
  28 + <el-col :span="7">
  29 + <el-form-item label="" prop="satellite">
  30 + <div class="my-text-area">
  31 + <div class="el-input-group__prepend prepand">卫星</div>
  32 + <el-select required v-model="satellite" placeholder="卫星" style="width: 100px">
  33 + <el-option label="北斗" value="1"></el-option>
  34 + <el-option label="GPS" value="2"></el-option>
  35 + </el-select>
  36 + </div>
  37 + </el-form-item>
  38 + </el-col>
  39 + </el-row>
  40 + <el-row>
  41 + <el-col :span="7">
  42 + <el-form-item label="" prop="qryEtm">
  43 + <div class="my-text-area">
  44 + <div class="el-input-group__prepend prepand">开始时间</div>
  45 + <!-- <span class="demonstration">带快捷选项</span>-->
  46 + <el-date-picker
  47 + v-model="queryInfo.qryEtm"
  48 + type="datetime"
  49 + value-format="yyyy-MM-dd HH:mm:ss"
  50 + format="yyyy-MM-dd HH:mm:ss"
  51 + placeholder="选择日期时间"
  52 + align="right" style="width: 170px"
  53 + :picker-options="pickerOptions">
  54 + </el-date-picker>
  55 + </div>
  56 + </el-form-item>
  57 + </el-col>
  58 + <el-col :span="7">
  59 + <el-form-item label="" prop="qryBtm">
  60 + <div class="my-text-area">
  61 + <div class="el-input-group__prepend prepand">结束时间</div>
  62 + <!-- <span class="demonstration">带快捷选项</span>-->
  63 + <el-date-picker
  64 + v-model="queryInfo.qryBtm"
  65 + type="datetime"
  66 + value-format="yyyy-MM-dd HH:mm:ss"
  67 + format="yyyy-MM-dd HH:mm:ss"
  68 + placeholder="选择日期时间"
  69 + align="right" style="width: 170px"
  70 + :picker-options="pickerOptions">
  71 + </el-date-picker>
  72 + </div>
  73 + </el-form-item>
  74 + </el-col>
  75 + <el-col :span="1">
  76 + <el-button type="primary" size="mini" @click="getList()">
  77 + 查询
  78 + </el-button>
  79 + </el-col>
  80 + </el-row>
61 </el-form> 81 </el-form>
62 - <el-col :span="1">  
63 - <el-button type="primary" size="mini" @click="getList()">  
64 - 查询  
65 - </el-button>  
66 - </el-col>  
67 </el-row> 82 </el-row>
68 </el-card> 83 </el-card>
69 </el-row> 84 </el-row>
@@ -72,7 +87,7 @@ @@ -72,7 +87,7 @@
72 </template> 87 </template>
73 <script> 88 <script>
74 import AMapLoader from '@amap/amap-jsapi-loader'; 89 import AMapLoader from '@amap/amap-jsapi-loader';
75 - import { historyTrack } from '../../api/consigner/vehicle'; 90 + import { historyTrack,gpshistoryTrack } from '../../api/consigner/vehicle';
76 91
77 92
78 export default { 93 export default {
@@ -87,6 +102,7 @@ @@ -87,6 +102,7 @@
87 //结束时间 102 //结束时间
88 qryBtm: '', 103 qryBtm: '',
89 }, 104 },
  105 + satellite:'1',
90 pickerOptions: { 106 pickerOptions: {
91 shortcuts: [{ 107 shortcuts: [{
92 text: '最近一周', 108 text: '最近一周',
@@ -155,21 +171,40 @@ @@ -155,21 +171,40 @@
155 }, 171 },
156 methods: { 172 methods: {
157 getList() { 173 getList() {
158 - this.$refs.ruleForm.validate(valid => {  
159 - if (!valid) return;  
160 - const _this = this;  
161 - historyTrack(this.queryInfo).then((response) => {  
162 - const res = response.data;  
163 - if (res.code !== '200') {  
164 - return _this.$message.error('获取车辆轨迹失败！');  
165 - }  
166 - // 调用initMap方法，并将轨迹数据传递过去  
167 - _this.initMap(res.data.data.trackArray);  
168 - _this.$message.success('获取车辆轨迹成功！');  
169 - }).catch(error => {  
170 - _this.$message.error('获取车辆轨迹失败：' + error.toString());  
171 - });  
172 - }) 174 + if(this.satellite=='1'){
  175 + this.$refs.ruleForm.validate(valid => {
  176 + if (!valid) return;
  177 + const _this = this;
  178 + historyTrack(this.queryInfo).then((response) => {
  179 + const res = response.data;
  180 + if (res.code !== '200') {
  181 + return _this.$message.error('获取车辆轨迹失败！');
  182 + }
  183 + // 调用initMap方法，并将轨迹数据传递过去
  184 + _this.initMap(res.data.data.trackArray);
  185 + _this.$message.success('获取车辆轨迹成功！');
  186 + }).catch(error => {
  187 + _this.$message.error('获取车辆轨迹失败：' + error.toString());
  188 + });
  189 + })
  190 + }else{
  191 + this.$refs.ruleForm.validate(valid => {
  192 + if (!valid) return;
  193 + const _this = this;
  194 + gpshistoryTrack(this.queryInfo).then((response) => {
  195 + const res = response.data;
  196 + if (res.code !== '200') {
  197 + return _this.$message.error('获取车辆轨迹失败！');
  198 + }
  199 + // 调用initMap方法，并将轨迹数据传递过去
  200 + _this.initMapGPS(res.data.data);
  201 + _this.$message.success('获取车辆轨迹成功！');
  202 + }).catch(error => {
  203 + _this.$message.error('获取车辆轨迹失败：' + error.toString());
  204 + });
  205 + })
  206 + }
  207 +
173 }, 208 },
174 initMap(trackArray) { 209 initMap(trackArray) {
175 const _this = this; 210 const _this = this;
@@ -201,6 +236,36 @@ @@ -201,6 +236,36 @@
201 console.error('初始化地图失败：', err); 236 console.error('初始化地图失败：', err);
202 }); 237 });
203 }, 238 },
  239 + initMapGPS(DATA) {
  240 + const _this = this;
  241 + AMapLoader.load({
  242 + key: 'fdb27c13681d084e85ff8457b5cbe540',
  243 + version: '2.0',
  244 + plugins: [], // 可以加载地图插件，比如定位、地图工具等
  245 + }).then((AMap) => {
  246 + // 创建地图对象并存储在 _this.mapInstance 中
  247 + _this.map = new AMap.Map('mapContainer', {
  248 + zoom: 10, // 设置地图缩放级别
  249 + center: [116.397428, 39.90923], // 设置地图中心点坐标
  250 + });
  251 + // 将轨迹数据添加到地图上
  252 + //var lineArr = trackArray.map((item) => [item.longitude / 600000.0, item.latitude / 600000.0]);
  253 + this.convertedCoords = this.convertBDToAMapGPS(DATA);
  254 + console.log(this.convertedCoords)
  255 + _this.poly = new AMap.Polyline({
  256 + path: this.convertedCoords, // 设置折线路径
  257 + strokeColor: "#3366ff", // 线颜色
  258 + strokeOpacity: 1, // 线透明度
  259 + strokeWeight: 3, // 线宽
  260 + strokeStyle: "solid", // 线样式
  261 + });
  262 + _this.poly.setMap(_this.map);
  263 + _this.map.setCenter(this.convertedCoords[0])
  264 + //_this.map.setFitView();
  265 + }).catch((err) => {
  266 + console.error('初始化地图失败：', err);
  267 + });
  268 + },
204 convertBDToAMap(bdCoordData) { 269 convertBDToAMap(bdCoordData) {
205 const aMapCoordData = []; 270 const aMapCoordData = [];
206 bdCoordData.forEach(coord => { 271 bdCoordData.forEach(coord => {
@@ -210,7 +275,15 @@ @@ -210,7 +275,15 @@
210 }); 275 });
211 return aMapCoordData; 276 return aMapCoordData;
212 }, 277 },
213 - 278 + convertBDToAMapGPS(bdCoordData) {
  279 + const aMapCoordData = [];
  280 + bdCoordData.forEach(coord => {
  281 + const lon = parseFloat(coord.lon); // 将经度从北斗格式转换为高德地图格式
  282 + const lat = parseFloat(coord.lat); // 将纬度从北斗格式转换为高德地图格式
  283 + aMapCoordData.push([lon, lat]); // 添加到结果数组
  284 + });
  285 + return aMapCoordData;
  286 + },
214 287
215 }, 288 },
216 289
@@ -41,6 +41,17 @@ @@ -41,6 +41,17 @@
41 </div> 41 </div>
42 </el-form-item> 42 </el-form-item>
43 </el-col> 43 </el-col>
  44 + <el-col :span="6">
  45 + <el-form-item label="" prop="satellite">
  46 + <div class="my-text-area">
  47 + <div class="el-input-group__prepend prepand">卫星</div>
  48 + <el-select required v-model="satellite" placeholder="卫星" style="width: 100px">
  49 + <el-option label="北斗" value="1"></el-option>
  50 + <el-option label="GPS" value="2"></el-option>
  51 + </el-select>
  52 + </div>
  53 + </el-form-item>
  54 + </el-col>
44 <el-col :span="2"> 55 <el-col :span="2">
45 <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()"> 56 <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">
46 查询 57 查询
@@ -74,7 +85,7 @@ @@ -74,7 +85,7 @@
74 </template> 85 </template>
75 <script> 86 <script>
76 import AMapLoader from '@amap/amap-jsapi-loader'; 87 import AMapLoader from '@amap/amap-jsapi-loader';
77 - import {selectVehicle, selectNameList, selectByliscenNo, selectList} from '../../api/consigner/vehicle'; 88 + import {selectVehicle, selectNameList, selectByliscenNo, selectList, gpslastlocation} from '../../api/consigner/vehicle';
78 import {loginedUserInfo} from "../../api/user"; 89 import {loginedUserInfo} from "../../api/user";
79 90
80 export default { 91 export default {
@@ -87,6 +98,7 @@ @@ -87,6 +98,7 @@
87 vno: '', 98 vno: '',
88 vnocolor: '2' 99 vnocolor: '2'
89 }, 100 },
  101 + satellite:'1',
90 vnos:[], 102 vnos:[],
91 loading:false, 103 loading:false,
92 imageUrls: [], // 存储图片地址的数组 104 imageUrls: [], // 存储图片地址的数组
@@ -151,54 +163,102 @@ @@ -151,54 +163,102 @@
151 }); 163 });
152 }, 164 },
153 getList() { 165 getList() {
154 - this.$refs.ruleForm.validate(valid => { 166 + if(this.satellite=='1'){
  167 + this.$refs.ruleForm.validate(valid => {
155 if (!valid) return; 168 if (!valid) return;
156 - const _this = this;  
157 - selectVehicle(this.queryInfo).then((response) => {  
158 - const res = response.data;  
159 - if (res.code !== '200') {  
160 - return _this.$message.error('获取车辆位置失败！');  
161 - }  
162 - if(res.data.data!=='' && res.data.data!=null){  
163 - // 获取车辆位置信息  
164 - const vehicle = res.data.data.firstVcl;  
165 - // 在获取车辆位置成功的部分，创建信息窗口或者自定义标记 169 + const _this = this;
  170 + selectVehicle(this.queryInfo).then((response) => {
  171 + const res = response.data;
  172 + if (res.code !== '200') {
  173 + return _this.$message.error('获取车辆位置失败！');
  174 + }
  175 + if(res.data.data!=='' && res.data.data!=null){
  176 + // 获取车辆位置信息
  177 + const vehicle = res.data.data.firstVcl;
  178 + // 在获取车辆位置成功的部分，创建信息窗口或者自定义标记
166 179
167 - if (vehicle.lon && vehicle.lat) {  
168 - const lon = parseFloat(vehicle.lon) / 600000.0; // 将经度字符串转换为数值并除以 600000.0  
169 - const lat = parseFloat(vehicle.lat) / 600000.0; // 将纬度字符串转换为数值并除以 600000.0  
170 - //const coords = wgs84togcj02(lon, lat);  
171 - const markerContent = document.createElement('div');  
172 - markerContent.innerHTML = ` 180 + if (vehicle.lon && vehicle.lat) {
  181 + const lon = parseFloat(vehicle.lon) / 600000.0; // 将经度字符串转换为数值并除以 600000.0
  182 + const lat = parseFloat(vehicle.lat) / 600000.0; // 将纬度字符串转换为数值并除以 600000.0
  183 + //const coords = wgs84togcj02(lon, lat);
  184 + const markerContent = document.createElement('div');
  185 + markerContent.innerHTML = `
173 <div class="rounded-corner" STYLE="width: 200px;background-color: rgba(255,255,255,0.7);text-align: center"> 186 <div class="rounded-corner" STYLE="width: 200px;background-color: rgba(255,255,255,0.7);text-align: center">
174 <p>车牌号：${vehicle.vno}</p > 187 <p>车牌号：${vehicle.vno}</p >
175 <p>已行驶距离：${vehicle.runDistance}公里</p > 188 <p>已行驶距离：${vehicle.runDistance}公里</p >
176 <p>剩余距离：${vehicle.remainDistance}公里</p > 189 <p>剩余距离：${vehicle.remainDistance}公里</p >
177 </div> 190 </div>
178 `; 191 `;
179 - // 添加车辆位置标记  
180 - const marker = new AMap.Marker({  
181 - position: [lon, lat],  
182 - map: _this.mapInstance,  
183 - content: markerContent  
184 - });  
185 - const defaultMarker = new AMap.Marker({  
186 - position: [lon, lat],  
187 - map: _this.mapInstance,  
188 - });  
189 - // 移动地图中心到车辆位置  
190 - _this.mapInstance.setCenter([lon, lat]);  
191 - _this.$message.success('获取车辆位置成功！');  
192 - } else {  
193 - _this.$message.warning('车辆位置信息不完整！');  
194 - }  
195 - }else{  
196 - return _this.$message.error('无相关车辆信息返回');  
197 - }  
198 - }).catch(error => {  
199 - _this.$message.error('获取车辆位置失败：' + error.toString());  
200 - });  
201 - }) 192 + // 添加车辆位置标记
  193 + const marker = new AMap.Marker({
  194 + position: [lon, lat],
  195 + map: _this.mapInstance,
  196 + content: markerContent
  197 + });
  198 + const defaultMarker = new AMap.Marker({
  199 + position: [lon, lat],
  200 + map: _this.mapInstance,
  201 + });
  202 + // 移动地图中心到车辆位置
  203 + _this.mapInstance.setCenter([lon, lat]);
  204 + _this.$message.success('获取车辆位置成功！');
  205 + } else {
  206 + _this.$message.warning('车辆位置信息不完整！');
  207 + }
  208 + }else{
  209 + return _this.$message.error('无相关车辆信息返回');
  210 + }
  211 + }).catch(error => {
  212 + _this.$message.error('获取车辆位置失败：' + error.toString());
  213 + });
  214 + })
  215 + }else{
  216 + this.$refs.ruleForm.validate(valid => {
  217 + if (!valid) return;
  218 + const _this = this;
  219 + gpslastlocation({vno:this.queryInfo.vno}).then((response) => {
  220 + const res = response.data;
  221 + if (res.code !== '200') {
  222 + return _this.$message.error('获取车辆位置失败！');
  223 + }
  224 + if(res.data.data!=='' && res.data.data!=null){
  225 + // 获取车辆位置信息
  226 + const vehicle = res.data.data;
  227 + // 在获取车辆位置成功的部分，创建信息窗口或者自定义标记
  228 + if (vehicle[0].lon && vehicle[0].lat) {
  229 +
  230 + const markerContent = document.createElement('div');
  231 + markerContent.innerHTML = `
  232 + <div class="rounded-corner" STYLE="width: 250px;background-color: rgba(255,255,255,0.7);text-align: left">
  233 + <p>车牌号：${vehicle[0].vehicle}</p >
  234 + <p>速度：${vehicle[0].speed}</p >
  235 + <p>车辆位置：${vehicle[0].placeName}</p >
  236 + </div>
  237 + `;
  238 + // 添加车辆位置标记
  239 + const marker = new AMap.Marker({
  240 + position: [vehicle[0].lon, vehicle[0].lat],
  241 + map: _this.mapInstance,
  242 + content: markerContent
  243 + });
  244 + const defaultMarker = new AMap.Marker({
  245 + position: [vehicle[0].lon, vehicle[0].lat],
  246 + map: _this.mapInstance,
  247 + });
  248 + // 移动地图中心到车辆位置
  249 + _this.mapInstance.setCenter([vehicle[0].lon, vehicle[0].lat]);
  250 + _this.$message.success('获取车辆位置成功！');
  251 + } else {
  252 + _this.$message.warning('车辆位置信息不完整！');
  253 + }
  254 + }else{
  255 + return _this.$message.error('无相关车辆信息返回');
  256 + }
  257 + }).catch(error => {
  258 + _this.$message.error('获取车辆位置失败：' + error.toString());
  259 + });
  260 + })
  261 + }
202 }, 262 },
203 initMap() { 263 initMap() {
204 AMapLoader.load({ 264 AMapLoader.load({