gantt

src/views/Monitor/camera.vue

@@ -6,20 +6,27 @@
     <!-- <img src="../../assets/screen.png" class="monitor-screen" /> -->
     <div class="video-wrap">
       <video class="monitor-screen" ref="videoElementRef"></video>
-      <div class="overlay" @click="router.push('/monitor/detail')"></div>
+      <!-- <div class="overlay" @click="router.push('/monitor/detail')"></div> -->
     </div>
+
     <div class="flex w-full justify-between pt-2 pl-4 pr-4">
       <div class="controls flex justify-between">
         <!-- <img src="../../assets/prev.png" alt="" /> -->
-        <img
+        <div
           ref="playBtnRef"
           @click="switchPlayStatus"
-          src="../../assets/play.png"
+          :class="`playbtn iconfont icon-${
+            isPlaying ? 'zanting_o' : 'bofang_o'
+          }`"
           alt=""
-        />
+        ></div>
+        <div class="desc">{{ name }}</div>
+        <div
+          class="fullscreen iconfont icon-quanping_o"
+          @click="videoFullscreen"
+        ></div>
         <!-- <img src="../../assets/next.png" alt="" /> -->
       </div>
-      <div class="desc">摄像头1</div>
     </div>
   </div>
 </template>
@@ -43,8 +50,12 @@ const props = defineProps({
     default:
       "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
   },
+  name: {
+    type: String,
+    default: "摄像头",
+  },
 });
-const { width, height, source } = toRefs(props);
+const { width, height, source, name } = toRefs(props);
 
 const videoElementRef = ref();
 // const playBtnRef = ref();
@@ -54,6 +65,7 @@ let flvPlayer = flvjs.createPlayer({
   url: source.value,
   //   url: "http://localhost:8000/lycoris_recoil.flv",
 });
+const isPlaying = ref(false);
 
 // 切换播放状态
 const switchPlayStatus = () => {
@@ -61,13 +73,19 @@ const switchPlayStatus = () => {
   if (videoElementRef.value.paused) {
     console.log(flvPlayer);
     flvPlayer.play();
+    isPlaying.value = true;
   } else {
     flvPlayer.pause();
+    isPlaying.value = false;
   }
 };
 const flvPlayerEventHandler = (e) => {
   console.log(e);
 };
+
+const videoFullscreen = () => {
+  videoElementRef.value.requestFullscreen();
+};
 onMounted(() => {
   if (flvjs.isSupported()) {
     flvPlayer.attachMediaElement(videoElementRef.value);
@@ -117,7 +135,15 @@ onUnmounted(() => {
     }
   }
   .controls {
-    width: 100px;
+    width: 100%;
+    .playbtn {
+      font-size: 40px;
+      color: #fff;
+    }
+    .fullscreen {
+      font-size: 40px;
+      color: #fff;
+    }
     img {
       width: 28px;
       height: 28px;