Merge branch 'local_dev_byft' into 'main_dev'

perf: 调整设备里的视频通道，由原先的关闭弹窗调用停止点播接口，调整为点击按钮停止

See merge request yunteng/thingskit-front!1215

@@ -43,8 +43,8 @@
           />
           />
         </template>
         </template>
         <template #accessMode="{ record }">
         <template #accessMode="{ record }">
-          <Tag :color="record.accessMode === AccessMode.ManuallyEnter ? 'cyan' : 'blue'">{{
-            record.accessMode === AccessMode.ManuallyEnter ? '手动输入' : '流媒体获取'
+          <Tag :color="computedAccessMode(record, 'color')">{{
+            computedAccessMode(record, 'text')
           }}</Tag>
           }}</Tag>
         </template>
         </template>
         <template #action="{ record }">
         <template #action="{ record }">
@@ -87,7 +87,7 @@
 </template>
 </template>
 
 
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
+  import { defineComponent, reactive, nextTick, computed } from 'vue';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { PageWrapper } from '/@/components/Page';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
@@ -102,6 +102,7 @@
     PageMode,
     PageMode,
     CameraPermission,
     CameraPermission,
     VideoPlatformEnum,
     VideoPlatformEnum,
+    accessModeConfig,
   } from './config.data';
   } from './config.data';
   import VideoPreviewModal from './DialogPreviewVideo.vue';
   import VideoPreviewModal from './DialogPreviewVideo.vue';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
@@ -231,6 +232,14 @@
 
 
       const handleGBTSuccess = () => reload();
       const handleGBTSuccess = () => reload();
 
 
+      const computedAccessMode = computed(() => (record, mode) => {
+        const findAccessMode = accessModeConfig.find(
+          (findItem) => findItem.key === record.accessMode
+        );
+        if (mode === 'text') return findAccessMode?.text;
+        return findAccessMode?.color;
+      });
+
       return {
       return {
         searchInfo,
         searchInfo,
         hasBatchDelete,
         hasBatchDelete,
@@ -250,6 +259,7 @@
         handleOpenGBTDrawer,
         handleOpenGBTDrawer,
         registerGBTDrawer,
         registerGBTDrawer,
         handleGBTSuccess,
         handleGBTSuccess,
+        computedAccessMode,
       };
       };
     },
     },
   });
   });

@@ -99,6 +99,18 @@
     return record;
     return record;
   });
   });
 
 
+  //验证视频通道号
+  const validateChannelNos = (gptDeviceDTOS) => {
+    gptDeviceDTOS.some((deviceDTO) => {
+      const channelNo = deviceDTO['channelNos'];
+      const ChannelNoRegexp = /^\d{1,20}$/;
+      if (!ChannelNoRegexp.test(channelNo)) {
+        createMessage.error('输入内容只能是数字，且不能超过20位');
+        throw Error('输入内容只能是数字，且不能超过20位');
+      }
+    });
+  };
+
   const handleSubmit = async () => {
   const handleSubmit = async () => {
     try {
     try {
       setDrawerProps({ confirmLoading: true });
       setDrawerProps({ confirmLoading: true });
@@ -107,6 +119,7 @@
       const gptDeviceDTOS = selectDeviceRef.value?.getDeviceChannels();
       const gptDeviceDTOS = selectDeviceRef.value?.getDeviceChannels();
       if (Array.isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0)
       if (Array.isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0)
         return createMessage.error('请填写设备通道号');
         return createMessage.error('请填写设备通道号');
+      validateChannelNos(gptDeviceDTOS);
       const mergeValues = {
       const mergeValues = {
         ...values,
         ...values,
         accessMode: 2,
         accessMode: 2,

@@ -77,6 +77,26 @@ export enum ArticulationEnumNameType {
   HIGH_DEFINITION = '高清',
   HIGH_DEFINITION = '高清',
   SMOOTH = '流畅',
   SMOOTH = '流畅',
 }
 }
+
+//获取方式文字和Tag颜色配置
+export const accessModeConfig = [
+  {
+    key: AccessMode.ManuallyEnter,
+    text: '手动输入',
+    color: 'cyan',
+  },
+  {
+    key: AccessMode.Streaming,
+    text: '流媒体获取',
+    color: 'blue',
+  },
+  {
+    key: AccessMode.GBT28181,
+    text: 'GBT28181',
+    color: 'orange',
+  },
+];
+
 // 表格列数据
 // 表格列数据
 export const columns: BasicColumn[] = [
 export const columns: BasicColumn[] = [
   {
   {

@@ -21,6 +21,12 @@
             icon: 'ant-design:play-circle-outlined',
             icon: 'ant-design:play-circle-outlined',
             onClick: handlePlay.bind(null, record),
             onClick: handlePlay.bind(null, record),
           },
           },
+          {
+            label: '停止点播',
+            auth: 'api:yt:sceneLinkage:get',
+            icon: 'ant-design:pause-outlined',
+            onClick: handleStopPlay.bind(null, record),
+          },
         ]"
         ]"
       />
       />
     </template>
     </template>
@@ -37,9 +43,12 @@
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { getVideoChannelList } from '/@/api/device/videoChannel';
   import { getVideoChannelList } from '/@/api/device/videoChannel';
+  import { stopOnDemandVideoApiGet } from '/@/api/camera/cameraManager';
 
 
   const props = defineProps<{ deviceDetail: DeviceRecord }>();
   const props = defineProps<{ deviceDetail: DeviceRecord }>();
 
 
+  const { createMessage } = useMessage();
+
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
 
 
   const [registerTable, { setProps, setSelectedRowKeys, reload }] = useTable({
   const [registerTable, { setProps, setSelectedRowKeys, reload }] = useTable({
@@ -64,7 +73,6 @@
     });
     });
     setSelectedRowKeys([]);
     setSelectedRowKeys([]);
     const newStatus = checked ? 1 : 0;
     const newStatus = checked ? 1 : 0;
-    const { createMessage } = useMessage();
     try {
     try {
       if (newStatus) createMessage.success('开启成功');
       if (newStatus) createMessage.success('开启成功');
       else createMessage.success('关闭成功');
       else createMessage.success('关闭成功');
@@ -82,4 +90,13 @@
       ifShowGBT: true,
       ifShowGBT: true,
     });
     });
   };
   };
+
+  //停止点播
+  const handleStopPlay = async (record: Recordable) => {
+    if (!record) return;
+    const { deviceId, channelId } = record;
+    if (await stopOnDemandVideoApiGet(deviceId, channelId)) {
+      createMessage.success('已停止点播');
+    }
+  };
 </script>
 </script>

@@ -20,7 +20,7 @@
   } from '@ant-design/icons-vue';
   } from '@ant-design/icons-vue';
   import { Button } from 'ant-design-vue';
   import { Button } from 'ant-design-vue';
   import { nextTick } from 'vue';
   import { nextTick } from 'vue';
-  import { controlling, stopOnDemandVideoApiGet } from '/@/api/camera/cameraManager';
+  import { controlling } from '/@/api/camera/cameraManager';
   import { setVideoControl } from '/@/api/device/videoChannel';
   import { setVideoControl } from '/@/api/device/videoChannel';
 
 
   const { prefixCls } = useDesign('basic-video-play');
   const { prefixCls } = useDesign('basic-video-play');
@@ -171,16 +171,8 @@
     unref(videoPlayInstance)?.dispose();
     unref(videoPlayInstance)?.dispose();
     videoPlayInstance.value = null;
     videoPlayInstance.value = null;
     emit('onUnmounted');
     emit('onUnmounted');
-    stopOnDemandVideo();
   });
   });
 
 
-  // 停止点播视频
-  const stopOnDemandVideo = async () => {
-    if (!unref(getGBT)) return;
-    const { tbDeviceId, channelId } = props.GBTOption;
-    await stopOnDemandVideoApiGet(tbDeviceId, channelId);
-  };
-
   defineExpose({
   defineExpose({
     reloadPlayer: init,
     reloadPlayer: init,
     getInstance: () => unref(videoPlayInstance),
     getInstance: () => unref(videoPlayInstance),