From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue | 85 +++++++++++++++++++++++++++++++-----------
1 files changed, 62 insertions(+), 23 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
index 0834011..472c8c2 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
@@ -1,17 +1,27 @@
<template>
<div class="event-video-content">
<div class="video-player">
- <video src></video>
+ <video :src="videoUrl" controls autoplay></video>
</div>
<div class="more-videos">
<div class="top">
<div class="title">鏇村瑙嗛</div>
- <div class="total">鍏�<span class="num">{{total}}</span>鏉�</div>
+ <div class="total">
+ 鍏�
+ <span class="num">{{eventVideoArr.length}}</span>
+ 鏉�
+ </div>
</div>
<div class="gallery">
- <div class="video-item" v-for="item in 11" :key="item">
- <img src alt />
- <div class="time"></div>
+ <div
+ class="video-item"
+ :class="{'act':item.ID == curVideo.ID}"
+ v-for="item in eventVideoArr"
+ :key="item.ID"
+ @click="checkVideo(item)"
+ >
+ <img :src="`/httpImage/` + item.Cover" alt />
+ <div class="time">{{item.EventTime}}</div>
</div>
</div>
</div>
@@ -19,16 +29,37 @@
</template>
<script>
+import { getVideoUrl } from "@/api/shuohuang"
+
export default {
props: {
- eventDetail: {
- type: Object,
- default: {}
- },
+ eventVideoArr: {
+ type: Array,
+ default: () => { return [] }
+ }
},
- data(){
+ data() {
return {
curVideo: {},
+ videoUrl: ""
+ }
+ },
+
+ mounted() {
+ //this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
+ //this.curVideo = this.eventVideoArr[0];
+ this.$nextTick(() => {
+ this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
+ })
+ },
+ methods: {
+ checkVideo(item) {
+ this.curVideo = item;
+ getVideoUrl({ id: item.ID }).then(rsp => {
+ if (rsp && rsp.success) {
+ this.videoUrl = "/httpImage/" + rsp.data.videoUrl;
+ }
+ })
}
}
}
@@ -36,47 +67,55 @@
<style lang="scss">
.event-video-content {
- padding: 14px;
- .video-player{
+ padding: 10px 14px;
+ .video-player {
background: #fff;
margin-bottom: 14px;
- video{
+ video {
margin: 20px auto;
width: 576px;
height: 324px;
- background: aquamarine;
+ background: #000;
}
}
- .more-videos{
+ .more-videos {
background: #fff;
- .top{
+ .top {
padding: 10px 20px;
display: flex;
justify-content: space-between;
- .total{
- .num{
+ .total {
+ .num {
+ padding: 0 2px;
color: #0096fa;
}
}
}
- .gallery{
+ .gallery {
display: flex;
flex-wrap: wrap;
padding: 0 20px 10px;
- max-height: 300px;
+ height: 300px;
overflow-y: auto;
// &:after{
// content: "";
// flex: auto;
// }
- .video-item{
+ .video-item {
width: 200px;
- height: 112.5px;
+ height: fit-content;
margin: 10px 40px;
- background: rgb(200, 223, 251);
+ //background: rgb(200, 223, 251);
padding: 10px;
border: 1px solid #eee;
border-radius: 3px;
+ cursor: pointer;
+ &.act {
+ border-color: #0096fa;
+ }
+ img {
+ width: 100%;
+ }
}
}
}
--
Gitblit v1.8.0