完结1

vue/src/components/viewMonitor.vue

@@ -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>

vue/src/views/Manager.vue

@@ -115,7 +115,7 @@ export default {
     return {
       user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
       linkUrl: 'http://localhost:3000/#/index',
-      audioUrl: '@/assets/audio/提示音.mp3',
+      audioUrl: require('@/assets/audio/提示音.mp3'),
       ordersCount:null,
       timer:null,
     }
@@ -125,11 +125,13 @@ export default {
       this.$message.error("请登陆后重试！")
       this.$router.push('/login')
     }
-    // TODO 计时器
-    setTimeout(()=>{
-      this.timer =  setInterval(this.getUnfinishedNums, 1000)
 
-    },500)
+  },
+  mounted(){
+    // TODO 计时器
+    // setTimeout(()=>{
+    // },2000)
+    this.timer =  setInterval(this.getUnfinishedNums, 1000)
   },
   unmounted() {
     clearTimeout(this.timer)
@@ -150,7 +152,7 @@ export default {
       this.$request.get("/orders/getnums/"+this.user?.storeId).then(res=>{
         if(res.data>this.ordersCount){
           // console.log(this.$refs.audioPlayer)
-          this.$refs.audioPlayer.play(); // 播放音效
+          // this.$refs.audioPlayer.play(); // 播放音效
           // this.$emit("UpdateShopData")
         }
         this.ordersCount = res.data==0?null:res.data

vue/src/views/manager/AI/Monitor.vue

@@ -1,12 +1,14 @@
 <script>
+import viewMonitor from "@/components/viewMonitor.vue";
 export default {
   name: "Monitor",
   components:{
-    HLSPlay:()=>import('@/components/HLSPlay.vue')
+    HLSPlay:()=>import('@/components/HLSPlay.vue'),
+    viewMonitor,
   },
   data(){
     return{
-      videoUrl:require("@/assets/video/jk1.mp4"),
+      videoUrl:require("@/assets/video/稻田监控.mp4"),
       img:require("@/assets/imgs/bg.jpg")
     }
   }
@@ -23,8 +25,12 @@ export default {
 <div>
   <el-col style="align-items: center">
     <el-card >
+<!--      <el-row>-->
+<!--        <video :src="videoUrl" width="70%" height="auto" controls="controls" autoplay="false"></video>-->
+<!--      </el-row>-->
       <el-row>
-        <video :src="videoUrl" width="70%" height="auto" controls="controls" autoplay="false"></video>
+        <viewMonitor :src="videoUrl">
+        </viewMonitor>
       </el-row>
     </el-card>
   </el-col>

vue/src/views/manager/Home.vue

@@ -74,7 +74,7 @@ export default {
       }, {
         size: 'large'
       }],
-      imgUrls: require('@/assets/imgs/lunbo1.jpg')
+      imgUrls: require('@/assets/imgs/bg.jpg')
     }
   },
   created() {