From e1333cf445616843299228ac760cce28dd7c9813 Mon Sep 17 00:00:00 2001
From: 13404089107 <puwei@sinata.cn>
Date: 星期二, 06 五月 2025 17:48:45 +0800
Subject: [PATCH] Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision
---
src/view/home/index.vue | 177 ++++++++++++++++++++++------------------------------------
1 files changed, 68 insertions(+), 109 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index 678ea7e..ef9be29 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.id)"
- >
+ <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.id)"
- :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>
@@ -200,6 +155,7 @@
import html2canvas from "html2canvas";
import AMapLoader from "@amap/amap-jsapi-loader";
import flvjs from "flv.js";
+import moment from 'moment'
import {
getCarCount,
getCarStatusCount,
@@ -242,6 +198,7 @@
serverIp: "", //监控ip
serverPort: "", //监控端口
carId: "", //监控车辆
+ urlLink: '',//视频地址
};
},
watch: {
@@ -283,6 +240,9 @@
this.getWarnTop10Data();
this.initMap();
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
// 设置定时器，每分钟刷新一次数据
this.timer = setInterval(() => {
this.getCarCountData();
@@ -413,7 +373,7 @@
// 获取预警列表数据
async getWarnListData() {
try {
- const res = await getCarWarnList();
+ const res = await getCarWarnList({ pageNum: 1, pageSize: 100000,startTime:moment().format('YYYY-MM-DD 00:00:00'),endTime:moment().format('YYYY-MM-DD 23:59:59') });
this.warnList = res.records;
} catch (error) {
this.$message.error("获取预警列表数据失败");
@@ -611,12 +571,13 @@
},
// 获取视频地址
async getVideoUrl(carId) {
+ this.carId = carId;
try {
const res = await getRealVideo({ id: carId });
// 将RTSP流转换为FLV流
this.serverIp = res.serverIp;
this.serverPort = res.serverPort;
- this.carId = carId;
+ this.urlLink = res.url;
} catch (error) {
console.error("获取视频地址失败", error);
return {};
@@ -625,7 +586,7 @@
// 初始化视频播放器
initVideoPlayer() {
- console.log('11111',this.serverIp,'2222222222',this.serverPort)
+ console.log('11111', this.serverIp, '2222222222', this.serverPort)
// 先销毁之前的播放器
if (this.flvPlayer) {
this.flvPlayer.destroy();
@@ -649,7 +610,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
@@ -672,7 +634,7 @@
if (emptyElement) {
emptyElement.style.display = 'none';
}
-
+
this.videoTimer = setInterval(() => {
playDetection(this.carId);
}, 5000);
@@ -694,6 +656,7 @@
},
destroyPlayer() {
+ this.urlLink = ""
// 销毁播放器释放资源
if (this.flvPlayer) {
if (this.videoTimer) clearInterval(this.videoTimer);
@@ -706,7 +669,7 @@
// 恢复空状态的显示
const video = document.getElementById("monitoringCard");
- if (video) {
+ if (video) {
video.style.display = 'none';
const emptyElement = video.parentElement.querySelector('.el-empty');
if (emptyElement) {
@@ -759,31 +722,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")}" />
@@ -845,7 +801,7 @@
overflow: 'truncate', // 截断模式
ellipsis: true, // 超出显示省略号
rotate: -40, // 可以根据需要调整角度
- formatter: function(value) {
+ formatter: function (value) {
if (value.length > 4) {
return value.substring(0, 4) + '...';
}
@@ -959,7 +915,7 @@
.leftMap {
// width: 100%;
height: 100%;
- flex: 1;
+ flex: 3;
display: flex;
position: relative;
@@ -969,6 +925,7 @@
height: 100%;
}
}
+
.mapTop {
z-index: 99;
position: absolute;
@@ -977,7 +934,7 @@
right: 513px;
display: flex;
justify-content: space-between;
- width: calc(100% - 570px);
+ width: calc(100% - 770px);
.title {
font-weight: 600;
@@ -1026,11 +983,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;
@@ -1158,13 +1113,15 @@
}
.right {
- width: 493px;
+ // width: 493px;
+ flex: 1;
height: calc(100% - 20px);
margin: 20px 17px 0 20px;
background: #ffffff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 10px 10px 0px 0px;
padding: 20px;
+ overflow-y: auto;
.title {
margin-top: 30px;
@@ -1175,7 +1132,8 @@
text-transform: none;
margin-bottom: 10px;
}
- .mt-0{
+
+ .mt-0 {
margin-top: 0 !important;
}
@@ -1185,7 +1143,7 @@
.companyCard {
width: 140px;
- height: 90px;
+ // height: 90px;
background: #f4f4ff;
border-radius: 0px 10px 10px 0px;
position: relative;
@@ -1195,7 +1153,7 @@
left: 0;
top: 0;
width: 4px;
- height: 90px;
+ // height: 90px;
background: #0e6efd;
border-radius: 2px;
}
@@ -1300,6 +1258,7 @@
color: rgba(82, 196, 26, 1);
}
}
+
.fiveWarn {
background: rgba(214, 219, 228, 0.3);
@@ -1332,7 +1291,7 @@
position: relative;
#countChart {
- width: 453px;
+ width: 100%;
height: 180px;
}
@@ -1353,8 +1312,8 @@
position: relative;
.rankChart {
- width: 453px;
- height: 300px;
+ width: 100%;
+ // height: 300px;
.rankItem {
display: flex;
--
Gitblit v1.7.1