|
@@ -0,0 +1,115 @@
|
|
|
+<template>
|
|
|
+ <div class="monitor" :style="{ height: height + 'px', width: width + 'px' }" >
|
|
|
+ <div class="main-video">
|
|
|
+ <video
|
|
|
+ :src="selectedVideo"
|
|
|
+ controls
|
|
|
+ @play="handlePlay"
|
|
|
+ :width="width*2/3"
|
|
|
+ :height="height*2/3"
|
|
|
+ autoplay
|
|
|
+ ></video>
|
|
|
+<!--{{selectedVideo}}-->
|
|
|
+ </div>
|
|
|
+ <div class="video-list">
|
|
|
+ <div
|
|
|
+ v-for="(video, index) in videoList"
|
|
|
+ :key="index"
|
|
|
+ class="video-item"
|
|
|
+ :class="{ active: video === (selectedVideo || videoList[0]) }"
|
|
|
+ @click="selectVideo(video)"
|
|
|
+ >
|
|
|
+ <img :src="imgList[index]" alt="" />
|
|
|
+ <div class="video-title">{{ getTitleFromPath(video) }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "viewMonitor",
|
|
|
+ props: {
|
|
|
+ height: {
|
|
|
+ type: Number,
|
|
|
+ default: 800,
|
|
|
+ },
|
|
|
+ width: {
|
|
|
+ type: Number,
|
|
|
+ default: 1200,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoList: [require("../assets/video/稻田监控.mp4"), require("../assets/video/草原监控.mp4")],
|
|
|
+ imgList: [
|
|
|
+ require("../assets/imgs/bg.jpg"),
|
|
|
+ require("../assets/imgs/bg.jpg"),
|
|
|
+ // require("../assets/imgs/bg.jpg"),
|
|
|
+ // require("../assets/imgs/bg.jpg"),
|
|
|
+ ],
|
|
|
+ selectedVideo: require("../assets/video/稻田监控.mp4"),//没用
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectVideo(video) {
|
|
|
+ this.selectedVideo = video;
|
|
|
+ },
|
|
|
+ getTitleFromPath(path) {
|
|
|
+ return path.split("/").pop().split(".")[0];
|
|
|
+ },
|
|
|
+ handlePlay() {
|
|
|
+ // 可以在这里实现其他功能,如统计播放次数等
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.monitor {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.main-video {
|
|
|
+ width: 70%;
|
|
|
+ max-width: 2000px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-list {
|
|
|
+ transform: translateY(10%);
|
|
|
+ width: 30%;
|
|
|
+ max-width: 800px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.video-item.active {
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.video-item img {
|
|
|
+ width: 100px;
|
|
|
+ height: 60px;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.video-title {
|
|
|
+ font-weight: bold;
|
|
|
+ flex: 1;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+</style>
|