fix: 修改设备详情视频通道的显示问题

@@ -116,8 +116,9 @@
       const isTransportType = ref<Boolean>(false); //获取产品是不是GB/T 28181
       // 详情回显
       const [register] = useDrawerInner(async (data) => {
-        const { id, transportType } = data;
-        isTransportType.value = transportType == 'GB/T28181' ? true : false;
+        const { id, transportType, deviceType } = data;
+        isTransportType.value =
+          transportType == 'GB/T28181' && deviceType == 'DIRECT_CONNECTION' ? true : false;
         // 设备详情
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;

@@ -79,24 +79,32 @@
     });
   };
 
-  //type  1:上    2:右    3:下    4:左    5:播放/暂停
-  const handleClick = (type: number) => {
-    console.log(type, 'type');
-    if (type == 5) {
-      // if (unref(isPlay)) {
-      //   unref(videoPlayInstance)?.play();
-      // } else {
-      //   unref(videoPlayInstance)?.pause();
-      // }
-      isPlay.value = !isPlay.value;
-    }
+  //播放/暂停
+  const handleClick = () => {
+    console.log('播放/暂停');
+    unref(isPlay) && unref(videoPlayInstance)?.pause();
+    !unref(isPlay) && unref(videoPlayInstance)?.play();
+  };
+
+  const handleTopClick = () => {
+    console.log('上');
+  };
+
+  const handleRightClick = () => {
+    console.log('右');
+  };
+
+  const handleBottomClick = () => {
+    console.log('下');
+  };
+
+  const handleLeftClick = () => {
+    console.log('左');
   };
 
   // type 1:放大    2:缩小
   const handleScale = (type: number) => {
-    if (type == 1) {
-    } else {
-    }
+    console, log(type);
   };
 
   const isPlay = ref<Boolean | null | undefined>(true);
@@ -104,7 +112,30 @@
   onMounted(async () => {
     init();
     await nextTick();
-    isPlay.value = unref(videoPlayInstance)?.paused();
+    // isPlay.value = unref(videoPlayInstance)?.paused();
+    videoPlayInstance.value.on('loadedmetadata', () => {
+      console.log('视频长度');
+    });
+    videoPlayInstance.value.on('waiting', () => {
+      isPlay.value = false;
+      console.log('视频加载中');
+    });
+    videoPlayInstance.value.on('play', () => {
+      isPlay.value = true;
+      console.log('视频开始播放');
+    });
+    videoPlayInstance.value.on('playing', () => {
+      isPlay.value = true;
+      console.log('正在播放');
+    });
+    videoPlayInstance.value.on('pause', () => {
+      isPlay.value = false;
+      console.log('暂停播放');
+    });
+    videoPlayInstance.value.on('ended', () => {
+      isPlay.value = false;
+      console.log('结束播放');
+    });
   });
 
   onUnmounted(() => {
@@ -132,31 +163,29 @@
 
       <div class="home mt-5">
         <Button class="front-sty-center child center" shape="circle" @click="handleClick(5)">
-          <!-- 暂停 -->
-          <PauseOutlined v-if="!isPlay" class="child-icon" style="color: #fffbfb" />
-          <!-- 播放 -->
+          <PauseOutlined v-if="isPlay" class="child-icon" style="color: #fffbfb" />
           <CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" />
         </Button>
 
         <div class="box">
           <div>
-            <Button class="left-top in-block" @click="handleClick(1)">
-              <CaretUpOutlined class="icon-rotate child-icon" @click="handleClick(1)" />
+            <Button class="left-top in-block" @click="handleTopClick">
+              <CaretUpOutlined class="icon-rotate child-icon" />
             </Button>
-            <Button class="right-top in-block" @click="handleClick(2)">
-              <CaretRightOutlined class="icon-rotate child-icon" @click="handleClick(2)" />
+            <Button class="right-top in-block" @click="handleRightClick">
+              <CaretRightOutlined class="icon-rotate child-icon" />
             </Button>
           </div>
           <div>
-            <Button class="left-bottom in-block" @click="handleClick(3)">
-              <CaretLeftOutlined class="icon-rotate child-icon" @click="handleClick(3)" />
+            <Button class="left-bottom in-block" @click="handleBottomClick">
+              <CaretLeftOutlined class="icon-rotate child-icon" />
             </Button>
-            <Button class="right-bottom in-block" @click="handleClick(4)">
-              <CaretDownOutlined class="icon-rotate child-icon" @click="handleClick(4)" />
+            <Button class="right-bottom in-block" @click="handleLeftClick">
+              <CaretDownOutlined class="icon-rotate child-icon" />
             </Button>
           </div>
 
-          <Button class="circle" @click="handleClick(5)" />
+          <Button class="circle" @click="handleClick" />
         </div>
       </div>
       <div class="flex justify-center mt-8">

@@ -339,12 +339,13 @@
       }
 
       function handleDetail(record: Recordable) {
-        const { id, tbDeviceId, deviceProfile } = record;
+        const { id, tbDeviceId, deviceProfile, deviceType } = record;
         const { transportType } = deviceProfile || {};
         openDrawer(true, {
           id,
           tbDeviceId,
           transportType,
+          deviceType,
         });
       }