feat: 增加GBT 28181协议的新功能

@@ -77,7 +77,9 @@
       </BasicTable>
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
-    <VideoPreviewModal @register="registerModal" />
+    <!-- <VideoPreviewModal @register="registerModal" /> -->
+
+    <VideoModal @register="registerModal" />
   </div>
 </template>
 
@@ -90,12 +92,13 @@
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
   import { searchFormSchema, columns, AccessMode, PageMode, CameraPermission } from './config.data';
-  import VideoPreviewModal from './DialogPreviewVideo.vue';
+  // import VideoPreviewModal from './DialogPreviewVideo.vue';
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
   import { Tag } from 'ant-design-vue';
+  import VideoModal from '/@/views/device/list/cpns/tabs/VideoChannel/videoModal.vue';
 
   export default defineComponent({
     components: {
@@ -104,7 +107,8 @@
       BasicTable,
       TableAction,
       CameraDrawer,
-      VideoPreviewModal,
+      // VideoPreviewModal,
+      VideoModal,
       TableImg,
       Authority,
       Popconfirm,

@@ -13,10 +13,11 @@
     PauseOutlined,
     CaretDownOutlined,
     CaretLeftOutlined,
-    PlusOutlined,
-    MinusOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
   } from '@ant-design/icons-vue';
   import { Button } from 'ant-design-vue';
+  import { nextTick } from 'vue';
   const { prefixCls } = useDesign('basic-video-play');
 
   const props = defineProps<{
@@ -31,8 +32,6 @@
 
   const videoPlayEl = ref<HTMLVideoElement>();
 
-  const isPlay = ref<Boolean>(true); //是否是播放状态
-
   const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
 
   const getOptions = computed(() => {
@@ -82,19 +81,29 @@
 
   //type  1:上    2:右    3:下    4:左    5:暂停
   const handleClick = (type: number) => {
-    console.log(type, 'type');
     if (type == 5) {
-      isPlay.value = !unref(isPlay);
+      // if (unref(isPlay)) {
+      //   unref(videoPlayInstance)?.play();
+      // } else {
+      //   unref(videoPlayInstance)?.pause();
+      // }
+      isPlay.value = !isPlay.value;
     }
   };
 
   // type 1:放大    2:缩小
   const handleScale = (type: number) => {
-    console.log(type, 'type');
+    if (type == 1) {
+    } else {
+    }
   };
 
-  onMounted(() => {
+  const isPlay = ref<Boolean | null | undefined>(true);
+
+  onMounted(async () => {
     init();
+    await nextTick();
+    isPlay.value = unref(videoPlayInstance)?.paused();
   });
 
   onUnmounted(() => {
@@ -127,7 +136,9 @@
         <CaretLeftOutlined class="front-sty-left child-icon" @click="handleClick(3)" />
 
         <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>
 
@@ -154,10 +165,10 @@
       </div>
       <div class="flex justify-center mt-8">
         <Button shape="circle" class="button-icon" @click="handleScale(1)">
-          <PlusOutlined style="color: #315a9c; font-size: 1.5rem" />
+          <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
         </Button>
         <Button shape="circle" class="ml-10 button-icon" @click="handleScale(2)">
-          <MinusOutlined style="color: #315a9c; font-size: 1.5rem" />
+          <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />
         </Button>
       </div>
     </div>