From 22c83e8a1c4049972c4506d15f49b0b3b3be2ea1 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 07 四月 2025 17:43:51 +0800
Subject: [PATCH] Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision
---
src/view/home/index.vue | 647 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 371 insertions(+), 276 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index d0d6875..b1a0bdb 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -6,55 +6,28 @@
<div class="carCount">
<div class="title">车辆统计</div>
<div class="fir">
- <div class="countCard">
- <img class="iconImg" src="../../assets//homeImg/img1.png" />
+ <div
+ class="countCard"
+ v-for="(item, index) in carCountData.slice(0, 3)"
+ :key="item.id"
+ >
+ <img class="iconImg" :src="imgList[index]" />
<div>
- <div class="name">出租车(辆)</div>
- <div class="num">888</div>
- </div>
- </div>
- <div class="countCard">
- <img class="iconImg" src="../../assets//homeImg/img2.png" />
- <div>
- <div class="name">网约车(辆)</div>
- <div class="num">888</div>
- </div>
- </div>
- <div class="countCard">
- <img class="iconImg" src="../../assets//homeImg/img3.png" />
- <div>
- <div class="name">客运(辆)</div>
- <div class="num">888</div>
+ <div class="name">{{ item.name || "" }}(辆)</div>
+ <div class="num">{{ item.carNum || 0 }}</div>
</div>
</div>
</div>
<div class="sec">
- <div class="countCard">
- <img class="iconImg" src="../../assets//homeImg/img4.png" />
+ <div
+ class="countCard"
+ v-for="(item, index) in carCountData.slice(3, 7)"
+ :key="item.id"
+ >
+ <img class="iconImg" :src="imgList[index + 3]" />
<div>
- <div class="name">郊游(辆)</div>
- <div class="num">888</div>
- </div>
- </div>
- <div class="countCard">
- <img class="iconImg" src="../../assets//homeImg/img5.png" />
- <div>
- <div class="name">公交车(辆)</div>
- <div class="num">888</div>
- </div>
- </div>
- <div class="countCard">
- <img class="iconImg" src="../../assets//homeImg/img6.png" />
- <div>
- <div class="name">危险品(辆)</div>
- <div class="num">888</div>
- </div>
- </div>
- <div class="countCard">
- <img class="iconImg" src="../../assets//homeImg/img7.png" />
- <div>
- <div class="name">货运(辆)</div>
- <div class="num">888</div>
+ <div class="name">{{ item.name || "" }}(辆)</div>
+ <div class="num">{{ item.carNum || 0 }}</div>
</div>
</div>
</div>
@@ -66,14 +39,14 @@
<div class="statusCard">
<div class="statusLeft">
<div class="name">在线</div>
- <div class="num">8888</div>
+ <div class="num">{{ carStatusData.online || 0 }}</div>
</div>
<el-progress
type="circle"
:width="20"
:show-text="false"
stroke-linecap="butt"
- :percentage="25"
+ :percentage="carStatusData.onlinePercent"
color="rgba(91, 143, 249, 1)"
define-back-color="rgba(91, 143, 249, 0.25)"
class="progressCard"
@@ -83,14 +56,14 @@
<div class="statusCard">
<div class="statusLeft">
<div class="name">离线</div>
- <div class="num">8888</div>
+ <div class="num">{{ carStatusData.offline || 0 }}</div>
</div>
<el-progress
type="circle"
:width="20"
:show-text="false"
stroke-linecap="butt"
- :percentage="25"
+ :percentage="carStatusData.offlinePercent"
color="rgba(93, 112, 146, 1)"
define-back-color="rgba(93, 112, 146, 0.25)"
class="progressCard"
@@ -101,14 +74,14 @@
<div class="statusCard">
<div class="statusLeft">
<div class="name">故障</div>
- <div class="num">8888</div>
+ <div class="num">{{ carStatusData.breakdown || 0 }}</div>
</div>
<el-progress
type="circle"
:width="20"
:show-text="false"
stroke-linecap="butt"
- :percentage="25"
+ :percentage="carStatusData.breakdownPercent"
color="rgba(253, 83, 118, 1)"
define-back-color="rgba(253, 83, 118, 0.25)"
class="progressCard"
@@ -118,14 +91,14 @@
<div class="statusCard">
<div class="statusLeft">
<div class="name">异常</div>
- <div class="num">8888</div>
+ <div class="num">{{ carStatusData.abnormal || 0 }}</div>
</div>
<el-progress
type="circle"
:width="20"
:show-text="false"
stroke-linecap="butt"
- :percentage="25"
+ :percentage="carStatusData.abnormalPercent"
color="rgba(246, 189, 22, 1)"
define-back-color="rgba(246, 189, 22, 0.25)"
class="progressCard"
@@ -144,34 +117,50 @@
<div class="companyCard">
<div class="lineCard"></div>
<div class="name">运营公司(家)</div>
- <div class="value">88888</div>
+ <div class="value">{{ carStatusData.enterprise || 0 }}</div>
</div>
<div class="companyCard">
<div class="lineCard"></div>
- <div class="name">运营公司(家)</div>
- <div class="value">88888</div>
+ <div class="name">运营车辆(辆)</div>
+ <div class="value">{{ carStatusData.car || 0 }}</div>
</div>
<div class="companyCard">
<div class="lineCard"></div>
- <div class="name">运营公司(家)</div>
- <div class="value">88888</div>
+ <div class="name">驾驶员(人)</div>
+ <div class="value">{{ carStatusData.driver || 0 }}</div>
</div>
</div>
<!-- 今日预警 -->
<div class="todayWarn">
<div class="title">今日预警</div>
- <div class="warnList">
+ <div class="warnList" v-if="warnList.length > 0">
<div
class="warnItem"
- v-for="item in 5"
- :key="item"
- :class="['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][item - 1]"
+ v-for="(item, index) in warnList"
+ :key="index"
+ :class="
+ item.warnLevel
+ ? ['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][
+ item.warnLevel - 1
+ ]
+ : 'fiveWarn'
+ "
>
- <div class="grade">一级</div>
+ <div class="grade">
+ {{
+ item.warnLevel
+ ? ["一级", "二级", "三级", "四级"][item.warnLevel - 1]
+ : "-"
+ }}
+ </div>
<div class="info">
- 53453453245 川A99999 车辆急刹车 20分钟 11:09:09
+ {{ item.vehicleNumber }} {{ item.warnType }}
+ {{ item.keepTime }} {{ item.startTime }}
</div>
</div>
+ </div>
+ <div class="noData" v-else>
+ <el-empty description="暂无数据" :image-size="80"></el-empty>
</div>
</div>
<!-- 预警情况统计 -->
@@ -192,7 +181,7 @@
class="rankRight"
:class="[0, 1, 2].includes(index) ? 'rankColor' : ''"
>
- <div class="rank" :style="{ width: item.value + '%' }"></div>
+ <div class="rank" :style="{ width: item.percentage + '%' }"></div>
</div>
</div>
</div>
@@ -209,29 +198,41 @@
import html2canvas from "html2canvas";
import AMapLoader from "@amap/amap-jsapi-loader";
import flvjs from "flv.js";
+import {
+ getCarCount,
+ getCarStatusCount,
+ getMapCarList,
+ getCarWarnList,
+ getWarnGroupCount,
+ getWarnGroupCountTop10,
+ getCarInfoById,
+} from "./service";
export default {
data() {
return {
flvPlayer: null,
activeIndex: "1",
activeIndex2: "1",
- countList: [1, 2, 3], //预警情况统计数据
- rankList: [
- { name: "射洪客运公司", value: 90 },
- { name: "滴滴网约车客运公司", value: 80 },
- { name: "滴滴网约车客运公司", value: 70 },
- { name: "滴滴网约车客运公司", value: 60 },
- { name: "滴滴网约车客运公司", value: 50 },
- { name: "滴滴网约车客运公司", value: 40 },
- { name: "滴滴网约车客运公司", value: 30 },
- { name: "滴滴网约车客运公司", value: 20 },
- { name: "滴滴网约车客运公司", value: 10 },
- { name: "滴滴网约车客运公司", value: 0 },
- ], //预警排行榜数据
-
- map: null, //地图实例
-
+ timer: null,
+ markers: [],
+ map: null,
+ AMap: null,
+ infoWindow: null,
+ imgList: [
+ require("../../assets//homeImg/img1.png"),
+ require("../../assets//homeImg/img2.png"),
+ require("../../assets//homeImg/img3.png"),
+ require("../../assets//homeImg/img4.png"),
+ require("../../assets//homeImg/img5.png"),
+ require("../../assets//homeImg/img6.png"),
+ require("../../assets//homeImg/img7.png"),
+ ],
+ countList: [], //预警情况统计数据
+ rankList: [], //预警排行榜数据
carList: [], //车辆列表数据
+ carCountData: [], //车辆统计数据
+ carStatusData: {}, //车辆状态数据
+ warnList: [], //预警列表数据
};
},
watch: {
@@ -251,7 +252,6 @@
},
},
created() {
- //初始化窗口点击事件
window.toCarDetail = (record) => {
this.toCarDetail(record);
};
@@ -263,94 +263,176 @@
};
},
mounted() {
- let arr = [
- {
- vehicleType: "出租车",
- vehicleInfo: {
- licensePlate: "川A12345",
- vehicleModel: "BYD E6",
- color: "Red",
- },
-
- latitude: 31.523333,
- longitude: 105.444444,
- },
- {
- vehicleType: "公交车",
- vehicleInfo: {
- licensePlate: "川A67890",
- vehicleModel: "Yutong ZK6120",
- color: "Blue",
- },
-
- latitude: 31.512222,
- longitude: 105.432111,
- },
- {
- vehicleType: "郊游",
- vehicleInfo: {
- licensePlate: "川A34567",
- vehicleModel: "Toyota Coaster",
- color: "White",
- },
-
- latitude: 31.498889,
- longitude: 105.421111,
- },
- {
- vehicleType: "春运",
- vehicleInfo: {
- licensePlate: "川A90123",
- vehicleModel: "King Long XMQ6120",
- color: "Yellow",
- },
-
- latitude: 31.485556,
- longitude: 105.412222,
- },
- {
- vehicleType: "快递物流车",
- vehicleInfo: {
- licensePlate: "川A45678",
- vehicleModel: "JAC HFC5041",
- color: "Green",
- },
-
- latitude: 31.472222,
- longitude: 105.402111,
- },
- {
- vehicleType: "网约车",
- vehicleInfo: {
- licensePlate: "川A11111",
- vehicleModel: "Geely GC2",
- color: "Black",
- },
-
- latitude: 31.462222,
- longitude: 105.392111,
- },
- {
- vehicleType: "客运",
- vehicleInfo: {
- licensePlate: "川A22222",
- vehicleModel: "Yutong ZK6120",
- color: "Gray",
- },
-
- latitude: 31.452222,
- longitude: 105.382111,
- },
- ];
- this.carList = arr;
+ // 调用所有接口
+ this.getCarCountData();
+ this.getCarStatusData();
+ // this.getMapCarData(); // 移除这里的调用，因为 initMap 中会调用
+ this.getWarnListData();
+ this.getWarnGroupData();
+ this.getWarnTop10Data();
this.initMap();
- setTimeout(() => {
- this.addMarker(this.carList, [105.444444, 31.523333]);
- this.getCountList();
- }, 1000);
+ // 设置定时器，每分钟刷新一次数据
+ this.timer = setInterval(() => {
+ this.getCarCountData();
+ this.getCarStatusData();
+ this.getMapCarData(); // 保留定时器中的调用
+ this.getWarnListData();
+ this.getWarnGroupData();
+ this.getWarnTop10Data();
+ }, 60000);
+ },
+ beforeDestroy() {
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
+ if (this.markers && this.markers.length > 0) {
+ this.markers.forEach((marker) => {
+ marker.setMap(null);
+ });
+ this.markers = [];
+ }
+ if (this.infoWindow) {
+ this.infoWindow.close();
+ }
+ if (this.flvPlayer) {
+ this.flvPlayer.destroy();
+ this.flvPlayer = null;
+ }
+ },
+ beforeRouteLeave(to, from, next) {
+ if (this.infoWindow) {
+ this.infoWindow.close();
+ }
+ if (this.flvPlayer) {
+ this.flvPlayer.destroy();
+ this.flvPlayer = null;
+ }
+ next();
},
methods: {
+ // 获取车辆统计数据
+ async getCarCountData() {
+ try {
+ const res = await getCarCount();
+ this.carCountData = res;
+ } catch (error) {
+ this.$message.error("获取车辆统计数据失败");
+ }
+ },
+ // 获取车辆状态数据
+ async getCarStatusData() {
+ try {
+ const res = await getCarStatusCount();
+ // 设置默认值为0，防止空值
+ const online = Number(res.online) || 0;
+ const offline = Number(res.offline) || 0;
+ const breakdown = Number(res.breakdown) || 0;
+ const abnormal = Number(res.abnormal) || 0;
+ const enterprise = Number(res.enterprise) || 0;
+ const car = Number(res.car) || 0;
+ const driver = Number(res.driver) || 0;
+
+ // 计算总数
+ const total = online + offline + breakdown + abnormal;
+
+ // 计算百分比，如果总数为0则百分比为0
+ const onlinePercent =
+ total > 0 ? Math.round((online / total) * 100) : 0;
+ const offlinePercent =
+ total > 0 ? Math.round((offline / total) * 100) : 0;
+ const breakdownPercent =
+ total > 0 ? Math.round((breakdown / total) * 100) : 0;
+ const abnormalPercent =
+ total > 0 ? Math.round((abnormal / total) * 100) : 0;
+ // 更新数据
+ this.carStatusData = {
+ online,
+ offline,
+ breakdown,
+ abnormal,
+ enterprise,
+ car,
+ driver,
+ total,
+ onlinePercent,
+ offlinePercent,
+ breakdownPercent,
+ abnormalPercent,
+ };
+ } catch (error) {
+ this.$message.error("获取车辆状态数据失败");
+ // 设置默认值
+ this.carStatusData = {
+ online: 0,
+ offline: 0,
+ breakdown: 0,
+ abnormal: 0,
+ enterprise: 0,
+ car: 0,
+ driver: 0,
+ total: 0,
+ onlinePercent: 0,
+ offlinePercent: 0,
+ breakdownPercent: 0,
+ abnormalPercent: 0,
+ };
+ }
+ },
+ // 获取地图车辆数据
+ async getMapCarData() {
+ try {
+ const res = await getMapCarList();
+ this.carList = res;
+ // 确保地图已初始化后再更新标记
+ if (this.AMap && this.map) {
+ this.updateMarkers(res);
+ }
+ } catch (error) {
+ this.$message.error("获取地图车辆数据失败");
+ }
+ },
+ // 获取预警列表数据
+ async getWarnListData() {
+ try {
+ const res = await getCarWarnList();
+ this.warnList = res.records;
+ } catch (error) {
+ this.$message.error("获取预警列表数据失败");
+ }
+ },
+ // 获取预警统计情况数据
+ async getWarnGroupData() {
+ try {
+ const res = await getWarnGroupCount();
+ this.countList = res;
+ this.getCountList();
+ } catch (error) {
+ this.$message.error("获取预警统计情况数据失败");
+ }
+ },
+ // 获取预警排行数据
+ async getWarnTop10Data() {
+ try {
+ const res = await getWarnGroupCountTop10();
+ // 判断返回的数组是否为空
+ if (!res || res.length === 0) {
+ this.rankList = [];
+ return;
+ }
+ // 计算所有num的总和
+ const total = res.reduce((sum, item) => sum + (item.num || 0), 0);
+ // 为每个数据项添加百分比属性
+ this.rankList = res.map((item) => ({
+ ...item,
+ percentage:
+ total > 0 ? (((item.num || 0) / total) * 100).toFixed(2) : 0,
+ }));
+ } catch (error) {
+ this.$message.error("获取预警排行数据失败");
+ this.rankList = [];
+ }
+ },
// 初始化地图
initMap() {
window._AMapSecurityConfig = {
@@ -367,111 +449,101 @@
],
})
.then((AMap) => {
+ this.AMap = AMap;
this.map = new AMap.Map("mapContainer", {
center: [105.574542, 30.5061493],
- zoom: 15,
+ zoom: 8,
});
+ this.infoWindow = new AMap.InfoWindow({
+ offset: new AMap.Pixel(30, 30),
+ autoMove: true,
+ anchor: "top-center",
+ });
+ this.getMapCarData();
})
.catch((e) => {
- console.log(e);
+ this.$message.error("地图加载失败");
});
},
-
- // 地图点位渲染
- addMarker(arr, centerList) {
- this.map = new AMap.Map("mapContainer", {
- resizeEnable: true,
- zoom: 15,
- center: centerList || [105.444444, 31.523333],
- });
-
- // var cluster;
- // var _renderClusterMarker = function (context) {
- // //context 为回调参数，
- // //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量
- // var clusterCount = context.count; //聚合点内点数量
- // context.marker.setContent("<div>" + clusterCount + "</div>");
- // };
- // var renderMarker = function (context) {
- // //context 为回调参数，
- // var clusterCount = context.count;
- // //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量
- // context.marker.setContent("<div>" + clusterCount + "</div>");
- // };
- // if (cluster) {
- // cluster.setMap(null);
- // }
- // if (arr.length > 0) {
- // let points = arr.map((item) => {
- // return {
- // lnglat: [Number(item.longitude), Number(item.latitude)],
- // };
- // });
- // cluster = new AMap.MarkerCluster(this.map, points, {
- // gridSize: 60,
- // renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式
- // renderMarker: renderMarker, //上述步骤的自定义非聚合点样式
- // });
- // }
-
- var infoWindow = new AMap.InfoWindow({
- offset: new AMap.Pixel(30, 30),
- autoMove: true,
- anchor: "top-center",
- });
+ // 更新地图标记
+ updateMarkers(arr) {
+ if (!this.AMap) {
+ return;
+ }
+ if (this.markers && this.markers.length > 0) {
+ this.markers.forEach((marker) => {
+ marker.setMap(null);
+ });
+ this.markers = [];
+ }
if (arr.length > 0) {
const iconMap = {
出租车: {
icon: require("../../assets/homeImg/taxi.png"),
- size: new AMap.Size(75, 37),
+ size: new this.AMap.Size(75, 37),
},
公交车: {
icon: require("../../assets/homeImg/bus.png"),
- size: new AMap.Size(62, 34),
+ size: new this.AMap.Size(62, 34),
+ },
+ 危险品: {
+ icon: require("../../assets/homeImg/risk.png"),
+ size: new this.AMap.Size(69, 32),
},
郊游: {
- icon: require("../../assets/homeImg/risk.png"),
- size: new AMap.Size(69, 32),
- },
- 春运: {
icon: require("../../assets/homeImg/outing.png"),
- size: new AMap.Size(61, 31),
+ size: new this.AMap.Size(61, 31),
},
- 快递物流车: {
+ 货运: {
icon: require("../../assets/homeImg/expressage.png"),
- size: new AMap.Size(60, 31),
+ size: new this.AMap.Size(60, 31),
},
网约车: {
icon: require("../../assets/homeImg/online.png"),
- size: new AMap.Size(75, 33),
+ size: new this.AMap.Size(75, 33),
},
客运: {
icon: require("../../assets/homeImg/passenger.png"),
- size: new AMap.Size(69, 31),
+ size: new this.AMap.Size(69, 31),
},
};
+
arr.forEach((item, index) => {
- const iconConfig = iconMap[item.vehicleType];
- let marker = new AMap.Marker({
+ // 检查必要字段
+ if (!item.operateType || !item.longitude || !item.latitude) {
+ return;
+ }
+
+ const iconConfig = iconMap[item.operateType];
+ if (!iconConfig) {
+ return;
+ }
+
+ let marker = new this.AMap.Marker({
position: [Number(item.longitude), Number(item.latitude)],
map: this.map,
- zooms: [13, 20],
- icon: new AMap.Icon({
+ icon: new this.AMap.Icon({
size: iconConfig.size,
image: iconConfig.icon,
imageSize: iconConfig.size,
- imageOffset: new AMap.Pixel(0, 0),
+ imageOffset: new this.AMap.Pixel(0, 0),
}),
});
// 添加点击事件
marker.on("click", async (e) => {
+ // 如果已经有视频在播放，先销毁
+ if (this.flvPlayer) {
+ this.flvPlayer.destroy();
+ this.flvPlayer = null;
+ }
+
// 显示loading
- infoWindow.setContent(
+ this.infoWindow.setContent(
'<div style="padding: 20px;text-align: center;">加载中...</div>'
);
- infoWindow.open(this.map, e.target.getPosition());
+ this.infoWindow.open(this.map, e.target.getPosition());
try {
// 并行请求车辆信息和视频地址
@@ -481,41 +553,73 @@
]);
// 更新弹窗内容
- infoWindow.setContent(
+ this.infoWindow.setContent(
this.listRender({
...item,
...carInfoRes.data,
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();
+ }
} catch (error) {
- console.error("获取车辆信息失败:", error);
- infoWindow.setContent(
+ this.infoWindow.setContent(
'<div style="padding: 20px;text-align: center;color: red;">获取车辆信息失败</div>'
);
}
});
+
+ // 将marker添加到数组中
+ this.markers.push(marker);
});
}
},
// 获取车辆信息
async getCarInfo(carId) {
- // TODO: 替换为实际的API调用
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve({
+ try {
+ const res = await getCarInfoById({ id: carId });
+ if (res) {
+ return {
data: {
- licensePlate: "川A88888",
- driver: "李雷",
- location: "涪江文化广场",
- coordinates: "104.004284,30.579328",
- speed: "104km/h",
- drivingTime: "5小时15分钟",
+ ...res,
+ id: carId,
},
- });
- }, 500);
- });
+ };
+ }
+ return {
+ data: {
+ id: carId,
+ },
+ };
+ } catch (error) {
+ return {
+ data: {
+ licensePlate: "",
+ driver: "",
+ location: "",
+ coordinates: "",
+ speed: "0km/h",
+ drivingTime: "0小时0分钟",
+ },
+ };
+ }
},
// 获取视频地址
@@ -533,29 +637,6 @@
},
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">
<video
@@ -582,10 +663,10 @@
</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
+ record.vehicleNumber || ""
}</div>
<div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${
- record.driver
+ record.driverName||''
}</div>
</div>
<div style="display: flex; justify-content: space-between">
@@ -593,7 +674,7 @@
record.location
}</div>
<div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">经纬度：${
- record.coordinates
+ record.longitude +',' + record.latitude
}</div>
</div>
<div style="display: flex; justify-content: space-between">
@@ -619,7 +700,7 @@
this.chartTnit();
}
},
- chartTnit(x, y1, y2) {
+ chartTnit() {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById("countChart"));
// 绘制数量图表
@@ -642,7 +723,7 @@
xAxis: [
{
type: "category",
- data: ["未系安全带", "疲劳驾驶", "抽烟", "打电话", "激烈驾驶"],
+ data: this.countList.map((item) => item.warnType),
axisTick: {
alignWithLabel: true,
lineStyle: {
@@ -671,17 +752,21 @@
];
},
},
- data: [10, 52, 200, 33, 39, 30, 20],
+ data: this.countList.map((item) => item.num),
},
],
});
myChart.resize();
},
- // 获取预警排行榜数据
- getRankList() {},
+
// 跳转车辆详情
- toCarDetail() {
- console.log("跳转车辆详情");
+ toCarDetail(id) {
+ this.$router.push({
+ path: "/car-detail",
+ query: {
+ id: id,
+ },
+ });
},
fullScreen() {
const video = document.getElementById("monitoringCard");
@@ -1075,6 +1160,16 @@
color: rgba(82, 196, 26, 1);
}
}
+ .fiveWarn {
+ background: rgba(214, 219, 228, 0.3);
+
+ .grade {
+ background: rgba(214, 219, 228, 0.3);
+ border-radius: 4px;
+ border: 1px solid rgba(214, 219, 228, 0.6);
+ color: rgba(0, 0, 0, 0.8);
+ }
+ }
}
.warnList::-webkit-scrollbar {
--
Gitblit v1.7.1