From 1c0f6da9f17df8d221494c18233139ae72620ff4 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 18 四月 2025 15:58:39 +0800
Subject: [PATCH] 首页修改问题
---
src/view/home/index.vue | 87 +++++++++++++++++++++++++++----------------
1 files changed, 55 insertions(+), 32 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index f14d55f..ddefce6 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -10,7 +10,7 @@
class="countCard"
v-for="(item, index) in carCountData.slice(0, 3)"
:key="item.id"
- @click="toCarDetail(item.id)"
+ @click="toCarManage(item.id)"
>
<img class="iconImg" :src="imgList[index]" />
<div>
@@ -23,7 +23,7 @@
<div
class="countCard"
v-for="(item, index) in carCountData.slice(3, 7)"
- @click="toCarDetail(item.id)"
+ @click="toCarManage(item.id)"
:key="item.id"
>
<img class="iconImg" :src="imgList[index + 3]" />
@@ -239,9 +239,9 @@
carStatusData: {}, //车辆状态数据
warnList: [], //预警列表数据
- serverIp: "",//监控ip
- serverPort: "",//监控端口
- carId: "",//监控车辆
+ serverIp: "", //监控ip
+ serverPort: "", //监控端口
+ carId: "", //监控车辆
};
},
watch: {
@@ -323,7 +323,7 @@
next();
},
methods: {
- toCarDetail(id) {
+ toCarManage(id) {
this.$router.push({
path: "/car-manage",
query: { id },
@@ -479,8 +479,8 @@
anchor: "top-center",
});
// 添加信息弹窗关闭事件监听
- this.infoWindow.on('close', () => {
- console.log('关闭信息弹窗1111111111111111111')
+ this.infoWindow.on("close", () => {
+ console.log("关闭信息弹窗1111111111111111111");
this.destroyPlayer();
});
this.getMapCarData();
@@ -625,6 +625,7 @@
// 初始化视频播放器
initVideoPlayer(videoUrl) {
+ console.log('11111',this.serverIp,'2222222222',this.serverPort)
// 先销毁之前的播放器
if (this.flvPlayer) {
this.flvPlayer.destroy();
@@ -685,18 +686,18 @@
},
destroyPlayer() {
- // 销毁播放器释放资源
- if (this.flvPlayer) {
- if (this.videoTimer) clearInterval(this.videoTimer)
- closeRealVideo(this.carId).then(res => {
- this.flvPlayer.pause();
- this.flvPlayer.unload();
- this.flvPlayer.detachMediaElement();
- this.flvPlayer.destroy();
- this.flvPlayer = null;
- })
- }
- },
+ // 销毁播放器释放资源
+ if (this.flvPlayer) {
+ if (this.videoTimer) clearInterval(this.videoTimer);
+ closeRealVideo(this.carId).then((res) => {
+ this.flvPlayer.pause();
+ this.flvPlayer.unload();
+ this.flvPlayer.detachMediaElement();
+ this.flvPlayer.destroy();
+ this.flvPlayer = null;
+ });
+ }
+ },
// 处理视频错误
handleVideoError(event) {
@@ -713,13 +714,17 @@
listRender(record) {
return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">
<div style="position: relative; width: 460px; height: 330px">
+
<video
- style="width: 460px; height: 330px; border-radius: 9px"
- id="monitoringCard"
- preload="auto"
- @error="handleVideoError"
- width="620">
- </video>
+ ref="video"
+ style="width: 460px; height: 330px; border-radius: 9px"
+ id="monitoringCard"
+ ref="monitoringCard"
+ :controls="false"
+ autoPlay
+ width="620">
+ </video>
+ <canvas id="myCanvas" style="display:none"></canvas>
<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()">
@@ -828,11 +833,21 @@
barWidth: "20px",
itemStyle: {
borderRadius: [20, 20, 20, 20],
- // color: (params) => {
- // return ["#5B8FF9", "#5AD8A6", "#F6BD16", "#6DC8EC", "#945FB9"][
- // params.dataIndex
- // ];
- // },
+ color: (params) => {
+ return [
+ "#5B8FF9",
+ "#5AD8A6",
+ "#F6BD16",
+ "#6DC8EC",
+ "#945FB9",
+ "rgba(248, 204, 65, 0.5)",
+ "rgba(2, 179, 118, 0.5)",
+ "rgba(254, 41, 94, 0.5)",
+ "rgba(255, 102, 39, 0.5)",
+ "rgba(169, 14, 253, 0.5)",
+ "rgba(109, 200, 236, 0.5)",
+ ][params.dataIndex];
+ },
},
data: this.countList.map((item) => item.num),
},
@@ -864,6 +879,14 @@
// IE/Edge
video.msRequestFullscreen();
}
+ },
+ getRandomColor() {
+ const letters = "0123456789ABCDEF";
+ let color = "#";
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
},
shotScreen() {
// 获取video和canvas元素
@@ -1311,7 +1334,7 @@
color: rgba(0, 0, 0, 0.45);
line-height: 17px;
text-align: right;
- overflow: auto;
+ overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
--
Gitblit v1.7.1