From 7d1c85bba308d40d45ab7cc63b12df4b48e1e7f1 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期二, 08 四月 2025 10:41:00 +0800
Subject: [PATCH] 首页地图
---
src/view/home/index.vue | 129 ++++++++++++++++++++----------------------
1 files changed, 62 insertions(+), 67 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index b1a0bdb..f7ca11f 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -154,8 +154,8 @@
}}
</div>
<div class="info">
- {{ item.vehicleNumber }} {{ item.warnType }}
- {{ item.keepTime }} {{ item.startTime }}
+ {{ item.vehicleNumber }} {{ item.warnType }} {{ item.keepTime }}
+ {{ item.startTime }}
</div>
</div>
</div>
@@ -205,7 +205,7 @@
getCarWarnList,
getWarnGroupCount,
getWarnGroupCountTop10,
- getCarInfoById,
+ getRealVideo,
} from "./service";
export default {
data() {
@@ -251,6 +251,10 @@
}
},
},
+ filters: {
+
+ },
+
created() {
window.toCarDetail = (record) => {
this.toCarDetail(record);
@@ -446,6 +450,7 @@
"AMap.AutoComplete",
"AMap.Geocoder",
"AMap.MarkerCluster",
+ "AMap.Geocoder",
],
})
.then((AMap) => {
@@ -546,9 +551,21 @@
this.infoWindow.open(this.map, e.target.getPosition());
try {
- // 并行请求车辆信息和视频地址
- const [carInfoRes, videoRes] = await Promise.all([
- this.getCarInfo(item.id),
+ // 使用高德地图API获取地址信息
+ const geocoder = new this.AMap.Geocoder();
+ const location = [Number(item.longitude), Number(item.latitude)];
+
+ const [addressResult, videoRes] = await Promise.all([
+ new Promise((resolve) => {
+ geocoder.getAddress(location, (status, result) => {
+ if (status === "complete" && result.regeocode) {
+ console.log("result", result,'status',status);
+ resolve(result.regeocode.formattedAddress);
+ } else {
+ resolve("未知地址");
+ }
+ });
+ }),
this.getVideoUrl(item.id),
]);
@@ -556,28 +573,29 @@
this.infoWindow.setContent(
this.listRender({
...item,
- ...carInfoRes.data,
+ drivingTime:this.formatterTime(item.drivingTime || 0) ,
+ location: addressResult,
videoUrl: videoRes.data.url,
})
);
- if (flvjs.isSupported()) {
- this.flvPlayer = flvjs.createPlayer({
- type: "flv",
- isLive: true,
- cors: true,
- hasAudio: true,
- hasVideo: true,
- url: videoRes.data.url,
- enableWorker: true,
- enableStashBuffer: false,
- seekType: "range",
- });
- let video = document.getElementById("monitoringCard");
- this.flvPlayer.attachMediaElement(video);
- this.flvPlayer.load();
- this.flvPlayer.play();
- }
+ // if (flvjs.isSupported()) {
+ // this.flvPlayer = flvjs.createPlayer({
+ // type: "flv",
+ // isLive: true,
+ // cors: true,
+ // hasAudio: true,
+ // hasVideo: true,
+ // url: videoRes.data.url,
+ // enableWorker: true,
+ // enableStashBuffer: false,
+ // seekType: "range",
+ // });
+ // let video = document.getElementById("monitoringCard");
+ // this.flvPlayer.attachMediaElement(video);
+ // this.flvPlayer.load();
+ // this.flvPlayer.play();
+ // }
} catch (error) {
this.infoWindow.setContent(
'<div style="padding: 20px;text-align: center;color: red;">获取车辆信息失败</div>'
@@ -590,50 +608,18 @@
});
}
},
-
- // 获取车辆信息
- async getCarInfo(carId) {
+ // 获取视频地址
+ async getVideoUrl(carId) {
try {
- const res = await getCarInfoById({ id: carId });
- if (res) {
- return {
- data: {
- ...res,
- id: carId,
- },
- };
- }
- return {
- data: {
- id: carId,
- },
- };
+ const res = await getRealVideo({ id: carId });
+ return res;
} catch (error) {
return {
data: {
- licensePlate: "",
- driver: "",
- location: "",
- coordinates: "",
- speed: "0km/h",
- drivingTime: "0小时0分钟",
+ url: "",
},
};
}
- },
-
- // 获取视频地址
- async getVideoUrl(carId) {
- // TODO: 替换为实际的API调用
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve({
- data: {
- url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
- },
- });
- }, 500);
- });
},
listRender(record) {
@@ -645,7 +631,6 @@
id="monitoringCard"
:controls="false"
autoplay
- src="${record.videoUrl}"
width="620">
</video>
<div style="position: absolute; right: 11px; top: 10px">
@@ -666,21 +651,21 @@
record.vehicleNumber || ""
}</div>
<div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${
- record.driverName||''
+ record.driverName || ""
}</div>
</div>
<div style="display: flex; justify-content: space-between">
- <div style="font-weight: 500; font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">位置：${
+ <div style="font-weight: 500; font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title="${record.location}">位置：${
record.location
}</div>
<div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">经纬度：${
- record.longitude +',' + record.latitude
+ record.longitude + "," + record.latitude
}</div>
</div>
<div style="display: flex; justify-content: space-between">
<div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">当前时速：${
- record.speed
- }</div>
+ record.speed || ""
+ }${record.speed && "km/h"}</div>
<div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">驾驶时长：${
record.drivingTime
}</div>
@@ -693,6 +678,16 @@
</div>
</div>`;
},
+ formatterTime(value) {
+ if (!value) return "";
+ const hours = Math.floor(value / 60);
+ const minutes = value % 60;
+ if (hours > 0) {
+ return `${hours}小时${minutes}分钟`;
+ } else {
+ return `${minutes}分钟`;
+ }
+ },
// 获取预警情况统计
getCountList() {
echarts.dispose(document.getElementById("countChart"));
--
Gitblit v1.7.1