From 5c2e3e0b4a4b4714c9a64a57ec10af7a1ef941a2 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期一, 07 四月 2025 11:29:41 +0800
Subject: [PATCH] 首页逻辑
---
src/view/home/index.vue | 208 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 142 insertions(+), 66 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index 21db76c..d0d6875 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -208,9 +208,11 @@
import * as echarts from "echarts";
import html2canvas from "html2canvas";
import AMapLoader from "@amap/amap-jsapi-loader";
+import flvjs from "flv.js";
export default {
data() {
return {
+ flvPlayer: null,
activeIndex: "1",
activeIndex2: "1",
countList: [1, 2, 3], //预警情况统计数据
@@ -417,6 +419,7 @@
autoMove: true,
anchor: "top-center",
});
+
if (arr.length > 0) {
const iconMap = {
出租车: {
@@ -451,90 +454,163 @@
arr.forEach((item, index) => {
const iconConfig = iconMap[item.vehicleType];
let marker = new AMap.Marker({
- position: [Number(item.longitude), Number(item.latitude)], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+ position: [Number(item.longitude), Number(item.latitude)],
map: this.map,
zooms: [13, 20],
icon: new AMap.Icon({
size: iconConfig.size,
image: iconConfig.icon,
imageSize: iconConfig.size,
- // 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0),
}),
});
- marker.content = this.listRender(item);
- marker.on("click", (e) => {
- infoWindow.setContent(e.target.content);
+
+ // 添加点击事件
+ marker.on("click", async (e) => {
+ // 显示loading
+ infoWindow.setContent(
+ '<div style="padding: 20px;text-align: center;">加载中...</div>'
+ );
infoWindow.open(this.map, e.target.getPosition());
+
+ try {
+ // 并行请求车辆信息和视频地址
+ const [carInfoRes, videoRes] = await Promise.all([
+ this.getCarInfo(item.id),
+ this.getVideoUrl(item.id),
+ ]);
+
+ // 更新弹窗内容
+ infoWindow.setContent(
+ this.listRender({
+ ...item,
+ ...carInfoRes.data,
+ videoUrl: videoRes.data.url,
+ })
+ );
+ } catch (error) {
+ console.error("获取车辆信息失败:", error);
+ infoWindow.setContent(
+ '<div style="padding: 20px;text-align: center;color: red;">获取车辆信息失败</div>'
+ );
+ }
});
- // // 监听地图缩放事件
- // map.on("zoomchange", ()=> {
- // var zoom = map.getZoom();
- // var size = 30 + (zoom - 3) * 2; // 根据缩放级别计算 marker 大小
- // var size1 = 20 + (zoom - 3) * 2;
- // marker.setIcon({
- // // image: "https://example.com/marker.png",
- // size: new AMap.Size(size, size1),
- // });
- // });
});
}
},
- // <img
- // style="width: 460px; height: 330px; border-radius: 9px" id="monitoringCard"
- // src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
- // />
+
+ // 获取车辆信息
+ async getCarInfo(carId) {
+ // TODO: 替换为实际的API调用
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({
+ data: {
+ licensePlate: "川A88888",
+ driver: "李雷",
+ location: "涪江文化广场",
+ coordinates: "104.004284,30.579328",
+ speed: "104km/h",
+ drivingTime: "5小时15分钟",
+ },
+ });
+ }, 500);
+ });
+ },
+
+ // 获取视频地址
+ 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) {
+ if (flvjs.isSupported()) {
+ flvPlayer = flvjs.createPlayer({
+ type: "flv",
+ isLive: true,
+ cors: true,
+ hasAudio: true,
+ hasVideo: true,
+ url: res.data.flv, // 后端拿到的视频路径
+ enableWorker: true, //启用 Web Worker 进程来加速视频的解码和处理过程
+ enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。
+ // stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
+ // stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
+ seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
+ // lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
+ // lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
+ // deferLoadAfterSourceOpen: false // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false
+ });
+ let video = document.getElementById("monitoringCard");
+ flvPlayer.attachMediaElement(video); // 你的video容器
+ flvPlayer.load();
+ flvPlayer.play();
+ }
+
return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">
- <div style="position: relative; width: 460px; height: 330px">
-
- <canvas ref="canvas" id="myCanvas" style="width: 460px; height: 330px;display:none" crossOrigin="anonymous"></canvas>
- <video
- ref="video"
- crossorigin="anonymous"
- style="width: 460px; height: 330px; border-radius: 9px"
- id="monitoringCard"
- ref="monitoringCard"
- :controls="false"
- autoPlay
- src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
- width="620">
- </video>
- <div style="position: absolute; right: 11px; top: 10px">
- <!-- 全屏 -->
- <div
- style=" display: flex;flex-direction: column;align-items: center;justify-content: center;
- background: #ffffff; padding: 3px 10px; border-radius: 6px;margin-bottom: 10px;" onclick="fullScreen()" >
- <img
- style="width: 20px; height: 20px" src="${require("../../assets//homeImg/full.png")}" />
- <div style="font-size: 12px;font-weight: 400; line-height: 17px; color: rgba(0, 0, 0, 0.88); " > 全屏</div>
- </div>
- <!-- 截屏 -->
- <div
- style="display: flex;flex-direction: column;align-items: center; justify-content: center;
- background: #ffffff;padding: 3px 10px;border-radius: 6px; " onclick="shotScreen()">
- <img style="width: 20px; height: 20px" src="${require("../../assets//homeImg/slot.png")}" />
- <div style="font-size: 12px; font-weight: 400; line-height: 17px; color: rgba(0, 0, 0, 0.88);"> 截屏</div>
- </div>
+ <div style="position: relative; width: 460px; height: 330px">
+ <video
+ crossorigin="anonymous"
+ style="width: 460px; height: 330px; border-radius: 9px"
+ id="monitoringCard"
+ :controls="false"
+ autoplay
+ src="${record.videoUrl}"
+ width="620">
+ </video>
+ <div style="position: absolute; right: 11px; top: 10px">
+ <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;
+ background: #ffffff; padding: 3px 10px; border-radius: 6px;margin-bottom: 10px;" onclick="fullScreen()">
+ <img style="width: 20px; height: 20px" src="${require("../../assets//homeImg/full.png")}" />
+ <div style="font-size: 12px;font-weight: 400; line-height: 17px; color: rgba(0, 0, 0, 0.88);">全屏</div>
+ </div>
+ <div style="display: flex;flex-direction: column;align-items: center; justify-content: center;
+ background: #ffffff;padding: 3px 10px;border-radius: 6px;" onclick="shotScreen()">
+ <img style="width: 20px; height: 20px" src="${require("../../assets//homeImg/slot.png")}" />
+ <div style="font-size: 12px; font-weight: 400; line-height: 17px; color: rgba(0, 0, 0, 0.88);">截屏</div>
</div>
</div>
- <div style="display: flex;justify-content: space-between;margin-top: 15px;margin-bottom: 12px;">
- <div style=" font-weight: 500;font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px; "> 车牌号：川A 88888 </div>
- <div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;" > 驾驶员：李雷</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>
- <div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px; "> 经纬度：104.004284.30.579328</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; " > 当前时速：104km/h </div>
- <div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px; "> 驾驶时长：5小时15分钟 </div>
- </div>
- <div style="margin-top: 14px;display: flex;justify-content: flex-end;align-items: center;cursor: pointer;" onclick="toCarDetail(${"111"})" >
- <div style="font-weight: 400;font-size: 18px; color: rgba(22, 119, 255, 1);line-height: 25px; ">车辆详情</div>
- <img style="width:18px;height: 18px;margin-left: 8px;" src="${require("../../assets//homeImg/right.png")}" />
- </div>
- </div>`;
+ </div>
+ <div style="display: flex;justify-content: space-between;margin-top: 15px;margin-bottom: 12px;">
+ <div style="font-weight: 500;font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">车牌号：${
+ record.licensePlate
+ }</div>
+ <div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${
+ record.driver
+ }</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.location
+ }</div>
+ <div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">经纬度：${
+ record.coordinates
+ }</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>
+ <div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">驾驶时长：${
+ record.drivingTime
+ }</div>
+ </div>
+ <div style="margin-top: 14px;display: flex;justify-content: flex-end;align-items: center;cursor: pointer;" onclick="toCarDetail(${
+ record.id
+ })">
+ <div style="font-weight: 400;font-size: 18px; color: rgba(22, 119, 255, 1);line-height: 25px;">车辆详情</div>
+ <img style="width:18px;height: 18px;margin-left: 8px;" src="${require("../../assets//homeImg/right.png")}" />
+ </div>
+ </div>`;
},
// 获取预警情况统计
getCountList() {
--
Gitblit v1.7.1