From d985958fd536d9f967e3a808b12c24dc42222f36 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 28 四月 2025 16:01:35 +0800
Subject: [PATCH] UI优化和视频监控写死地址
---
src/view/home/index.vue | 150 +++++++++++++++++---------------------------------
1 files changed, 51 insertions(+), 99 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index 20cc635..e7dd136 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -6,12 +6,8 @@
<div class="carCount">
<div class="title">车辆统计</div>
<div class="fir">
- <div
- class="countCard"
- v-for="(item, index) in carCountData.slice(0, 3)"
- :key="item.id"
- @click="toCarManage(item.name)"
- >
+ <div class="countCard" v-for="(item, index) in carCountData.slice(0, 3)" :key="item.id"
+ @click="toCarManage(item.name)">
<img class="iconImg" :src="imgList[index]" />
<div>
<div class="name">{{ item.name || "" }}(辆)</div>
@@ -20,12 +16,8 @@
</div>
</div>
<div class="sec">
- <div
- class="countCard"
- v-for="(item, index) in carCountData.slice(3, 7)"
- @click="toCarManage(item.name)"
- :key="item.id"
- >
+ <div class="countCard" v-for="(item, index) in carCountData.slice(3, 7)" @click="toCarManage(item.name)"
+ :key="item.id">
<img class="iconImg" :src="imgList[index + 3]" />
<div>
<div class="name">{{ item.name || "" }}(辆)</div>
@@ -43,16 +35,9 @@
<div class="name">在线</div>
<div class="num">{{ carStatusData.online || 0 }}</div>
</div>
- <el-progress
- type="circle"
- :width="20"
- :show-text="false"
- stroke-linecap="butt"
- :percentage="carStatusData.onlinePercent"
- color="rgba(91, 143, 249, 1)"
- define-back-color="rgba(91, 143, 249, 0.25)"
- class="progressCard"
- ></el-progress>
+ <el-progress type="circle" :width="20" :show-text="false" stroke-linecap="butt"
+ :percentage="carStatusData.onlinePercent" color="rgba(91, 143, 249, 1)"
+ define-back-color="rgba(91, 143, 249, 0.25)" class="progressCard"></el-progress>
</div>
<div class="statusLine"></div>
<div class="statusCard">
@@ -60,16 +45,9 @@
<div class="name">离线</div>
<div class="num">{{ carStatusData.offline || 0 }}</div>
</div>
- <el-progress
- type="circle"
- :width="20"
- :show-text="false"
- stroke-linecap="butt"
- :percentage="carStatusData.offlinePercent"
- color="rgba(93, 112, 146, 1)"
- define-back-color="rgba(93, 112, 146, 0.25)"
- class="progressCard"
- ></el-progress>
+ <el-progress type="circle" :width="20" :show-text="false" stroke-linecap="butt"
+ :percentage="carStatusData.offlinePercent" color="rgba(93, 112, 146, 1)"
+ define-back-color="rgba(93, 112, 146, 0.25)" class="progressCard"></el-progress>
</div>
</div>
<div class="statusSec">
@@ -78,16 +56,9 @@
<div class="name">故障</div>
<div class="num">{{ carStatusData.breakdown || 0 }}</div>
</div>
- <el-progress
- type="circle"
- :width="20"
- :show-text="false"
- stroke-linecap="butt"
- :percentage="carStatusData.breakdownPercent"
- color="rgba(253, 83, 118, 1)"
- define-back-color="rgba(253, 83, 118, 0.25)"
- class="progressCard"
- ></el-progress>
+ <el-progress type="circle" :width="20" :show-text="false" stroke-linecap="butt"
+ :percentage="carStatusData.breakdownPercent" color="rgba(253, 83, 118, 1)"
+ define-back-color="rgba(253, 83, 118, 0.25)" class="progressCard"></el-progress>
</div>
<div class="statusLine"></div>
<div class="statusCard">
@@ -95,16 +66,9 @@
<div class="name">异常</div>
<div class="num">{{ carStatusData.abnormal || 0 }}</div>
</div>
- <el-progress
- type="circle"
- :width="20"
- :show-text="false"
- stroke-linecap="butt"
- :percentage="carStatusData.abnormalPercent"
- color="rgba(246, 189, 22, 1)"
- define-back-color="rgba(246, 189, 22, 0.25)"
- class="progressCard"
- ></el-progress>
+ <el-progress type="circle" :width="20" :show-text="false" stroke-linecap="butt"
+ :percentage="carStatusData.abnormalPercent" color="rgba(246, 189, 22, 1)"
+ define-back-color="rgba(246, 189, 22, 0.25)" class="progressCard"></el-progress>
</div>
</div>
</div>
@@ -136,18 +100,12 @@
<div class="todayWarn">
<div class="title">今日预警</div>
<div class="warnList" v-if="warnList.length > 0">
- <div
- class="warnItem"
- v-for="(item, index) in warnList"
- :key="index"
- :class="
- item.warnLevel
- ? ['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][
- item.warnLevel - 1
- ]
- : 'fiveWarn'
- "
- >
+ <div class="warnItem" v-for="(item, index) in warnList" :key="index" :class="item.warnLevel
+ ? ['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][
+ item.warnLevel - 1
+ ]
+ : 'fiveWarn'
+ ">
<div class="grade">
{{
item.warnLevel
@@ -179,10 +137,7 @@
<div class="rankChart" id="rankChart">
<div class="rankItem" v-for="(item, index) in rankList" :key="index">
<div class="left">{{ item.name }}</div>
- <div
- class="rankRight"
- :class="[0, 1, 2].includes(index) ? 'rankColor' : ''"
- >
+ <div class="rankRight" :class="[0, 1, 2].includes(index) ? 'rankColor' : ''">
<div class="rank" :style="{ width: item.percentage + '%' }"></div>
</div>
</div>
@@ -242,6 +197,7 @@
serverIp: "", //监控ip
serverPort: "", //监控端口
carId: "", //监控车辆
+ urlLink: '',//视频地址
};
},
watch: {
@@ -416,7 +372,7 @@
// 获取预警列表数据
async getWarnListData() {
try {
- const res = await getCarWarnList({pageNum:1,pageSize:100000});
+ const res = await getCarWarnList({ pageNum: 1, pageSize: 100000 });
this.warnList = res.records;
} catch (error) {
this.$message.error("获取预警列表数据失败");
@@ -620,6 +576,7 @@
// 将RTSP流转换为FLV流
this.serverIp = res.serverIp;
this.serverPort = res.serverPort;
+ this.urlLink = res.url;
} catch (error) {
console.error("获取视频地址失败", error);
return {};
@@ -628,7 +585,7 @@
// 初始化视频播放器
initVideoPlayer() {
- console.log('11111',this.serverIp,'2222222222',this.serverPort)
+ console.log('11111', this.serverIp, '2222222222', this.serverPort)
// 先销毁之前的播放器
if (this.flvPlayer) {
this.flvPlayer.destroy();
@@ -652,7 +609,8 @@
cors: true, //是否开启跨域
hasAudio: false, //是否开启音频
hasVideo: true, //是否开启视频
- url: `http://${this.serverIp}:${this.serverPort}/live?port=1935&app=flv&stream=${this.carId}`, // 后端拿到的视频路径
+ // url: `http://${this.serverIp}:${this.serverPort}/live?port=1935&app=flv&stream=${this.carId}`, // 后端拿到的视频路径
+ url: this.urlLink, // 后端拿到的视频路径
enableWorker: true, //启用 Web Worker 进程来加速视频的解码和处理过程
enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。
stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
@@ -675,7 +633,7 @@
if (emptyElement) {
emptyElement.style.display = 'none';
}
-
+
this.videoTimer = setInterval(() => {
playDetection(this.carId);
}, 5000);
@@ -762,31 +720,24 @@
</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.vehicleNumber || ""
- }</div>
- <div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${
- record.driverName || ""
- }</div>
+ <div style="font-weight: 500;font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">车牌号：${record.vehicleNumber || ""
+ }</div>
+ <div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${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;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
- }</div>
+ <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
+ }</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 || ""
- }${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>
+ <div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">当前时速：${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>
</div>
- <div style="margin-top: 14px;display: flex;justify-content: flex-end;align-items: center;cursor: pointer;" onclick="toCarDetail(${
- record.id
+ <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")}" />
@@ -848,7 +799,7 @@
overflow: 'truncate', // 截断模式
ellipsis: true, // 超出显示省略号
rotate: -40, // 可以根据需要调整角度
- formatter: function(value) {
+ formatter: function (value) {
if (value.length > 4) {
return value.substring(0, 4) + '...';
}
@@ -972,6 +923,7 @@
height: 100%;
}
}
+
.mapTop {
z-index: 99;
position: absolute;
@@ -1029,11 +981,9 @@
.countCard {
flex: 1;
- background: linear-gradient(
- 180deg,
- rgba(246, 246, 252, 0) 0%,
- #f3f4f8 100%
- );
+ background: linear-gradient(180deg,
+ rgba(246, 246, 252, 0) 0%,
+ #f3f4f8 100%);
box-shadow: inset 0px -1px 4px 0px #ffffff;
border-radius: 10px;
border: 1px solid #f1f1f1;
@@ -1180,7 +1130,8 @@
text-transform: none;
margin-bottom: 10px;
}
- .mt-0{
+
+ .mt-0 {
margin-top: 0 !important;
}
@@ -1305,6 +1256,7 @@
color: rgba(82, 196, 26, 1);
}
}
+
.fiveWarn {
background: rgba(214, 219, 228, 0.3);
--
Gitblit v1.7.1