From 5fb65ada8ccc28eabf823b284de70fbd3ca1f41e Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 18:29:36 +0800
Subject: [PATCH] 抓拍大图层级修复v1
---
src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue | 33 ++++++++++++++++++---------------
1 files changed, 18 insertions(+), 15 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
index b1a7e23..472c8c2 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
@@ -1,7 +1,7 @@
<template>
<div class="event-video-content">
<div class="video-player">
- <video :src="curVideo.ClipPath" controls></video>
+ <video :src="videoUrl" controls autoplay></video>
</div>
<div class="more-videos">
<div class="top">
@@ -20,7 +20,7 @@
:key="item.ID"
@click="checkVideo(item)"
>
- <img :src="item.Cover" alt />
+ <img :src="`/httpImage/` + item.Cover" alt />
<div class="time">{{item.EventTime}}</div>
</div>
</div>
@@ -29,6 +29,8 @@
</template>
<script>
+import { getVideoUrl } from "@/api/shuohuang"
+
export default {
props: {
eventVideoArr: {
@@ -36,19 +38,14 @@
default: () => { return [] }
}
},
- data () {
+ data() {
return {
curVideo: {},
+ videoUrl: ""
}
},
- watch: {
- eventVideoArr (n, o) {
- if (n.length) {
- this.curVideo = n[0]
- }
- }
- },
- mounted () {
+
+ mounted() {
//this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
//this.curVideo = this.eventVideoArr[0];
this.$nextTick(() => {
@@ -56,8 +53,13 @@
})
},
methods: {
- checkVideo (data) {
- this.curVideo = data;
+ checkVideo(item) {
+ this.curVideo = item;
+ getVideoUrl({ id: item.ID }).then(rsp => {
+ if (rsp && rsp.success) {
+ this.videoUrl = "/httpImage/" + rsp.data.videoUrl;
+ }
+ })
}
}
}
@@ -73,7 +75,7 @@
margin: 20px auto;
width: 576px;
height: 324px;
- background: aquamarine;
+ background: #000;
}
}
.more-videos {
@@ -101,12 +103,13 @@
// }
.video-item {
width: 200px;
- //height: 112.5px;
+ height: fit-content;
margin: 10px 40px;
//background: rgb(200, 223, 251);
padding: 10px;
border: 1px solid #eee;
border-radius: 3px;
+ cursor: pointer;
&.act {
border-color: #0096fa;
}
--
Gitblit v1.8.0