Merge branch 'fix/video-GBT-cancel' into 'main_dev'

fix: 修复国标播放和新增接口调用问题

See merge request yunteng/thingskit-front!1211

@@ -8,10 +8,10 @@ VITE_GLOB_PUBLIC_PATH = /
 # Please note that no line breaks
 
 # 本地
-VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
+VITE_PROXY = [["/api","http://222.180.200.114:30480/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
 
 # 实时数据的ws地址
-VITE_GLOB_WEB_SOCKET = ws://192.168.1.8:8080/api/ws/plugins/telemetry?token=
+VITE_GLOB_WEB_SOCKET = ws://222.180.200.114:30480/api/ws/plugins/telemetry?token=
 
 # Delete console
 VITE_GLOB_DROP_CONSOLE = true

@@ -20,6 +20,7 @@ enum CameraManagerApi {
   STREAMING_DELETE_URL = '/video/platform',
   STREAMING_PLAY_GET_URL = '/video/url',
   VIDEO_CONTROL_STOP = '/video/control/stop/',
+  CAMERA_ADDGPT_API_URL = '/video/addGpt',
 }
 
 export const cameraPage = (params: CameraQueryParam) => {
@@ -135,3 +136,11 @@ export const stopOnDemandVideoApiGet = (deviceId: string, channelId: string) =>
     url: `${CameraManagerApi.VIDEO_CONTROL_STOP}${deviceId}/${channelId}`,
   });
 };
+
+// GPT28181
+export const createGPTPostApi = (data: Recordable) => {
+  return defHttp.post({
+    url: CameraManagerApi.CAMERA_ADDGPT_API_URL,
+    data,
+  });
+};

 import { RpcCommandType } from '../../device/model/deviceConfigModel';
 import { DataType, ExtensionDesc } from '../../device/model/modelOfMatterModel';
 import { DataTypeEnum, ObjectModelAccessModeEnum } from '/@/enums/objectModelEnum';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
 import { DataSource } from '/@/views/visual/palette/types';
 
 export interface AddDataBoardParams {
@@ -170,4 +171,5 @@ export interface GetMeetTheConditionsDeviceParams {
   deviceType?: string;
   organizationId?: string;
   deviceProfileId?: string;
+  transportType: TransportTypeEnum;
 }

@@ -39,6 +39,7 @@ export interface VideoChannelItemType {
   channelType: number;
   ptztype: number;
   ifShowGBT?: boolean;
+  accessMode?: number;
 }
 
 export interface VideoChannelPlayAddressType {

+export function useDecToIEE754() {
+  function numberToArr32(number: number) {
+    const arr = new Uint8Array(4);
+    const view = new DataView(arr.buffer);
+    view.setFloat32(0, +number);
+    return arr;
+  }
+
+  function numberToArr64(number: number) {
+    const arr = new Uint8Array(8);
+    const view = new DataView(arr.buffer);
+    view.setFloat64(0, +number);
+    return arr;
+  }
+
+  function arrToBase(toBase: number, arr: Uint8Array) {
+    let result = '';
+    for (let i = 0; i < arr.length; i++) {
+      result += (256 + arr[i]).toString(toBase).substring(1).toUpperCase();
+    }
+
+    return result;
+  }
+
+  function coverNumberByBase(toBase, number: number) {
+    if (toBase === 'bin32') {
+      return arrToBase(2, numberToArr32(number));
+    } else if (toBase === 'bin64') {
+      return arrToBase(2, numberToArr64(number));
+    } else if (toBase === 'hex32') {
+      return arrToBase(16, numberToArr32(number));
+    } else if (toBase === 'hex64') {
+      return arrToBase(16, numberToArr64(number));
+    }
+  }
+
+  return { coverNumberByBase };
+}

@@ -193,6 +193,21 @@ export const CameraVideoUrl: Rule[] = [
   },
 ];
 
+// 验证设备通道号正则
+export const CameraChannelNoRule: Rule[] = [
+  {
+    required: true,
+    validator: (_, value: string) => {
+      const ChannelNoRegexp = /^\d{1,20}$/;
+      if (!ChannelNoRegexp.test(value)) {
+        return Promise.reject('输入内容只能是数字，且不能超过20位');
+      }
+      return Promise.resolve();
+    },
+    validateTrigger: 'blur',
+  },
+];
+
 export const CameraVideoStreamUrl: Rule[] = [
   {
     required: true,

@@ -110,7 +110,6 @@
           await nextTick();
           const { record } = data || {};
           editId.value = data.record.id;
-
           if (data.record.avatar) {
             setFieldsValue({
               avatar: [{ uid: buildUUID(), name: 'name', url: data.record.avatar } as FileItem],
@@ -127,6 +126,13 @@
           }
           const { avatar, ...params } = data.record;
           avatarStr.value = avatar;
+          //回显GBT28181
+          if (record?.accessMode === AccessMode.GBT28181) {
+            setFieldsValue({
+              deviceId: record?.params?.deviceId,
+              channelNo: record?.params?.channelNo,
+            });
+          }
           // 不能把avatar字段回显进去，页面会显示大量警告
           await setFieldsValue({
             videoType: record.videoPlatformDTO?.type,
@@ -167,6 +173,14 @@
             values.params = values.channelNo ? { channelNo: values.channelNo } : null;
           }
 
+          //新增GBT28181
+          if (values?.accessMode === AccessMode.GBT28181) {
+            values.params = {
+              channelNo: values.channelNo,
+              deviceId: values.deviceId,
+            };
+          }
+
           await createOrEditCameraManage(values);
           closeDrawer();
           emit('success');

@@ -10,10 +10,13 @@
         class="w-3/4 xl:w-4/5"
       >
         <template #toolbar>
-          <a-button type="primary" @click="handleSwitchMode">分屏模式</a-button>
+          <Authority :value="CameraPermission.CREATE">
+            <a-button type="primary" @click="handleOpenGBTDrawer"> 批量新增GBT28181 </a-button>
+          </Authority>
           <Authority :value="CameraPermission.CREATE">
             <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增视频 </a-button>
           </Authority>
+          <a-button type="primary" @click="handleSwitchMode">分屏模式</a-button>
           <Authority :value="CameraPermission.DELETE">
             <Popconfirm
               title="您确定要批量删除数据"
@@ -78,8 +81,8 @@
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
     <VideoPreviewModal @register="registerModal" />
-
     <VideoModal @register="registerModal1" />
+    <GBTDrawer @register="registerGBTDrawer" @success="handleGBTSuccess" />
   </div>
 </template>
 
@@ -89,6 +92,7 @@
   import { PageWrapper } from '/@/components/Page';
   import { useDrawer } from '/@/components/Drawer';
   import CameraDrawer from './CameraDrawer.vue';
+  import GBTDrawer from './components/GBTDrawer.vue';
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
   import {
@@ -120,6 +124,7 @@
       Authority,
       Popconfirm,
       Tag,
+      GBTDrawer,
     },
     emits: ['switchMode'],
     setup(_, { emit }) {
@@ -155,6 +160,9 @@
       // 弹框
       const [registerDrawer, { openDrawer }] = useDrawer();
 
+      //GBT28181 Drawer
+      const [registerGBTDrawer, { openDrawer: openGBTDrawer }] = useDrawer();
+
       // 刷新
       const handleSuccess = () => {
         reload();
@@ -195,15 +203,34 @@
           isUpdate: true,
           record,
         };
-        if (record.accessMode === AccessMode.Streaming && type === VideoPlatformEnum.ISC)
-          openModal1(true, commonRecord);
-        else openModal(true, commonRecord);
+        // 新增一个判断，GBT28181也弹出云台控制界面
+        // if (record.accessMode === AccessMode.Streaming && type === VideoPlatformEnum.ISC) {
+        //   openModal1(true, commonRecord);
+        // } else if (record.accessMode === AccessMode.GBT28181) {
+        //   openModal1(true, { ...commonRecord, ifShowGBT: true });
+        // } else openModal(true, commonRecord);
+
+        if (
+          record.accessMode === AccessMode.ManuallyEnter ||
+          (record.accessMode === AccessMode.Streaming && type === VideoPlatformEnum.FLUORITE)
+        ) {
+          openModal(true, commonRecord);
+        } else if (record.accessMode === AccessMode.GBT28181) {
+          openModal1(true, { ...commonRecord, ifShowGBT: true });
+        } else openModal1(true, commonRecord);
       };
 
       const handleSwitchMode = () => {
         emit('switchMode', PageMode.SPLIT_SCREEN_MODE);
       };
 
+      // 批量新增GBT28181国标
+      const handleOpenGBTDrawer = () => {
+        openGBTDrawer(true);
+      };
+
+      const handleGBTSuccess = () => reload();
+
       return {
         searchInfo,
         hasBatchDelete,
@@ -220,6 +247,9 @@
         AccessMode,
         handleSwitchMode,
         CameraPermission,
+        handleOpenGBTDrawer,
+        registerGBTDrawer,
+        handleGBTSuccess,
       };
     },
   });

@@ -7,6 +7,7 @@
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
+  import GBTDrawer from './components/GBTDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
   import { AccessMode, CameraPermission, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
@@ -180,12 +181,20 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
 
+  //GBT28181 Drawer
+  const [registerGBTDrawer, { openDrawer: openGBTDrawer }] = useDrawer();
+
   const handleAddCamera = () => {
     openDrawer(true, {
       isUpdate: false,
     });
   };
 
+  // 批量新增GBT28181国标
+  const handleOpenGBTDrawer = () => {
+    openGBTDrawer(true);
+  };
+
   const handleCloseFlvPlayUrl = async (record: CameraRecordItem) => {
     if (isRtspProtocol(record.videoUrl)) {
       closeFlvPlay(record.videoUrl, unref(fingerprintResult)!.visitorId!);
@@ -254,6 +263,10 @@
           <div class="flex items-center gap-4">
             <div class="flex">
               <Authority :value="CameraPermission.CREATE">
+                <Button type="primary" @click="handleOpenGBTDrawer">批量新增GBT28181</Button>
+              </Authority>
+              <div style="width: 17px"></div>
+              <Authority :value="CameraPermission.CREATE">
                 <Button type="primary" @click="handleAddCamera">新增视频</Button>
               </Authority>
             </div>
@@ -320,6 +333,7 @@
       </section>
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="getCameraList" />
+    <GBTDrawer @register="registerGBTDrawer" @success="getCameraList" />
   </div>
 </template>
 

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    title="新增GBT28181"
+    width="30%"
+    @ok="handleSubmit"
+    wrapClassName="camera-configration-drawer"
+  >
+    <BasicForm @register="registerForm">
+      <!-- 表单设备通道插槽 -->
+      <template #deviceChannelsSlot="{ model }">
+        <span class="hidden">{{ handleSelectOrg(model['organizationId']) }}</span>
+        <SelectDevice ref="selectDeviceRef" :selectOptions="selectDeviceOptions" />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup name="GBTDrawer">
+  import { ref, nextTick, onMounted, watch } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getStreamingMediaList, createGPTPostApi } from '/@/api/camera/cameraManager';
+  import SelectDevice from './SelectDevice.vue';
+  import { formGBTSchema, StreamInterface } from '../config.data';
+  import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
+  import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const streamConfigOptions = ref<StreamInterface[]>([]);
+
+  const selectDeviceOptions = ref<StreamInterface[]>([]);
+
+  const orgId = ref('');
+
+  const selectDeviceRef = ref<InstanceType<typeof SelectDevice>>();
+
+  const { createMessage } = useMessage();
+
+  const [registerForm, { validate, resetFields }] = useForm({
+    labelWidth: 120,
+    schemas: formGBTSchema,
+    showActionButtonGroup: false,
+  });
+
+  const getStreamingMediaLists = async () => {
+    const rest = await getStreamingMediaList({});
+    streamConfigOptions.value = rest?.map(({ host: label, id: value, type }) => ({
+      label,
+      value,
+      type,
+    }));
+  };
+
+  onMounted(() => getStreamingMediaLists());
+
+  const handleSelectOrg = (e) => (orgId.value = e);
+
+  const getDeviceListByOrg = async (organizationId) => {
+    const values = await getMeetTheConditionsDevice({
+      organizationId,
+      transportType: TransportTypeEnum.GBT28181,
+    });
+    selectDeviceOptions.value = values
+      ? values.map((item) => ({
+          label: item.alias || item.name,
+          value: item.tbDeviceId,
+          id: item.id,
+          deviceProfileId: item.deviceProfileId,
+        }))
+      : [];
+  };
+
+  watch(
+    () => orgId.value,
+    (newValue) => {
+      if (newValue) {
+        //获取设备
+        selectDeviceRef.value?.resetValue();
+        getDeviceListByOrg(newValue);
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    await nextTick();
+    selectDeviceRef.value?.resetValue();
+    const { record } = data || {};
+    // 批量新增不需要回显
+    return record;
+  });
+
+  const handleSubmit = async () => {
+    try {
+      setDrawerProps({ confirmLoading: true });
+      const values = await validate();
+      if (!values) return;
+      const gptDeviceDTOS = selectDeviceRef.value?.getDeviceChannels();
+      if (Array.isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0)
+        return createMessage.error('请填写设备通道号');
+      const mergeValues = {
+        ...values,
+        accessMode: 2,
+        gptDeviceDTOS,
+      };
+      await createGPTPostApi(mergeValues);
+      createMessage.success('批量新增成功');
+      closeDrawer();
+      emits('success');
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .camera-configration-drawer {
+    .ant-input-number {
+      width: 100% !important;
+    }
+  }
+</style>

+<template>
+  <div v-for="(param, index) in dynamicInput.params" :key="index" class="mt-4 flex gap-2">
+    <a-input disabled v-model:value="param.deviceName" class="w-1/2 flex-1" />
+    <a-input v-model:value="param.channelNos" class="w-1/2 flex-1" placeholder="请输入通道号" />
+  </div>
+</template>
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup name="SelectAttributes">
+  import { reactive, UnwrapRef, watchEffect } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { DeviceChannelInterface } from '../config.data';
+
+  const props = defineProps({
+    value: propTypes.object.def({}),
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+  });
+
+  //动态数据
+  const dynamicInput: UnwrapRef<{ params: DeviceChannelInterface[] }> = reactive({ params: [] });
+
+  const initVal = async () => {
+    if (props.value) {
+      dynamicInput.params.push({
+        deviceName: props.value.label,
+        deviceID: props.value.value,
+        channelNos: props.value.channelNos,
+      });
+    }
+  };
+
+  //数值改变
+  const valEffect = watchEffect(() => {
+    initVal();
+  });
+
+  valEffect();
+
+  //chang改变
+  const emitChange = () => {
+    return { ...dynamicInput.params[0], channelNos: [dynamicInput.params[0].channelNos] };
+  };
+
+  defineExpose({
+    emitChange,
+  });
+</script>
+<style scoped lang="css">
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

+<template>
+  <Select
+    placeholder="请选择设备"
+    v-model:value="selectValue"
+    style="width: 100%"
+    :options="selectOptions"
+    v-bind="createPickerSearch()"
+    @change="handleDeviceChange"
+    :disabled="disabled"
+    mode="multiple"
+    labelInValue
+  />
+  <template v-for="(item, index) in deviceList" :key="index">
+    <InputChannel
+      :ref="bindDeviceRef.deviceAttrRef"
+      :value="item"
+      :index="index"
+      :disabled="disabled"
+    />
+  </template>
+</template>
+<script lang="ts" setup name="SelectDevice">
+  import { ref, Ref, PropType, unref } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+  import { StreamInterface } from '../config.data';
+  import InputChannel from './InputChannel.vue';
+
+  defineProps({
+    selectOptions: {
+      type: Array as PropType<StreamInterface[]>,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+  });
+
+  const selectValue = ref([]);
+
+  const bindDeviceRef = {
+    deviceAttrRef: ref([]),
+  };
+
+  const deviceList: Ref<StreamInterface[]> = ref([]);
+
+  const getDeviceChannels = () => {
+    return unref(bindDeviceRef.deviceAttrRef)?.map((item: any) => item.emitChange());
+  };
+
+  const handleDeviceChange = (_, options) => {
+    deviceList.value = options;
+  };
+
+  const resetValue = () => {
+    selectValue.value = [];
+    deviceList.value = [];
+  };
+  defineExpose({
+    resetValue,
+    getDeviceChannels,
+  });
+</script>
+<style scoped lang="css"></style>

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/Form/index';
 
-import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
+import { CameraVideoUrl, CameraMaxLength, CameraChannelNoRule } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import SnHelpMessage1 from './SnHelpMessage1.vue';
@@ -11,9 +11,24 @@ import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { DictEnum } from '/@/enums/dictEnum';
+import { DataSourceField } from '../../visual/packages/config/common.config';
+import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
+export interface StreamInterface {
+  label: string;
+  value: string;
+  type?: string;
+}
+
+//设备通道接口
+export interface DeviceChannelInterface {
+  [x: string]: string | string[];
+}
+
 export enum CameraPermission {
   PREVIEW = 'api:yt:video:get',
   CREATE = 'api:yt:video:post',
@@ -24,6 +39,7 @@ export enum CameraPermission {
 export enum AccessMode {
   ManuallyEnter = 0,
   Streaming = 1,
+  GBT28181 = 2,
 }
 
 export enum PlayProtocol {
@@ -186,6 +202,7 @@ export const formSchema: QFormSchema[] = [
         options: [
           { label: '手动输入', value: AccessMode.ManuallyEnter },
           { label: '流媒体获取', value: AccessMode.Streaming },
+          { label: 'GBT28181', value: AccessMode.GBT28181 },
         ],
         onChange() {
           formActionType.setFieldsValue({
@@ -199,6 +216,63 @@ export const formSchema: QFormSchema[] = [
     },
   },
   {
+    field: 'deviceId',
+    label: '设备',
+    required: true,
+    component: 'ApiSelect',
+    componentProps({ formModel, formActionType }) {
+      const { setFieldsValue } = formActionType;
+      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+      return {
+        api: async () => {
+          if (organizationId) {
+            try {
+              const data = await getMeetTheConditionsDevice({
+                organizationId,
+                transportType: TransportTypeEnum.GBT28181,
+              });
+              if (data)
+                return data.map((item) => ({
+                  ...item,
+                  label: item.alias || item.name,
+                  value: item.tbDeviceId,
+                  deviceType: item.deviceType,
+                }));
+            } catch (error) {}
+          }
+          return [];
+        },
+        placeholder: '请选择设备',
+        onChange() {
+          setFieldsValue({
+            channelNo: '',
+          });
+        },
+        onFocus() {
+          const { createMessage } = useMessage();
+          if (!organizationId) return createMessage.error('请先选择组织');
+        },
+      };
+    },
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.GBT28181;
+    },
+  },
+  {
+    field: 'channelNo',
+    label: '通道号',
+    required: true,
+    component: 'Input',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.GBT28181;
+    },
+    componentProps: {
+      maxLength: 20,
+      placeholder: '请输入通道号',
+    },
+    rules: [{ required: true, message: '通道号是必填项' }, ...CameraChannelNoRule],
+  },
+  {
     field: 'brand',
     label: '视频厂家',
     component: 'Input',
@@ -410,3 +484,43 @@ export const formSchema: QFormSchema[] = [
     },
   },
 ];
+
+// GBT28181表单配置项
+export const formGBTSchema: QFormSchema[] = [
+  {
+    label: '视频流获取方式',
+    field: 'accessMode',
+    component: 'RadioGroup',
+    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
+    defaultValue: AccessMode.GBT28181,
+    componentProps({ formActionType }) {
+      return {
+        defaultValue: AccessMode.ManuallyEnter,
+        placeholder: '请选择视频流获取方式',
+        options: [{ label: 'GBT28181', value: AccessMode.GBT28181 }],
+        onChange() {
+          formActionType.setFieldsValue({
+            brand: null,
+            sn: null,
+            videoUrl: null,
+            videoPlatformId: null,
+          });
+        },
+      };
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'OrgTreeSelect',
+    ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181,
+  },
+  {
+    field: 'deviceChannels',
+    label: '设备和通道号',
+    component: 'Input',
+    slot: 'deviceChannelsSlot',
+    ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181,
+  },
+];

@@ -55,6 +55,11 @@ export function buildTableDataSourceByObjectModel(
       );
     }
 
+    if (isModbusDevice) {
+      result.boolClose = '关';
+      result.boolOpen = '开';
+    }
+
     return result;
   }
 

@@ -166,6 +166,7 @@
     handleControl(1, action);
   };
 
+  //页面卸载
   onUnmounted(() => {
     unref(videoPlayInstance)?.dispose();
     videoPlayInstance.value = null;
@@ -175,6 +176,7 @@
 
   // 停止点播视频
   const stopOnDemandVideo = async () => {
+    if (!unref(getGBT)) return;
     const { tbDeviceId, channelId } = props.GBTOption;
     await stopOnDemandVideoApiGet(tbDeviceId, channelId);
   };

@@ -33,6 +33,8 @@
   import { getVideoControlStart } from '/@/api/device/videoChannel';
   import { VideoChannelItemType } from '/@/api/device/model/videoChannelModel';
   import { getVideoTypeByUrl } from '/@/components/Video';
+  import { AccessMode } from '/@/views/camera/manage/config.data';
+  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
 
   const heightNum = ref(800);
   const showVideo = ref(false);
@@ -57,18 +59,27 @@
   const [register, { setModalProps }] = useModalInner(
     async (data: { record: VideoChannelItemType }) => {
       const { record, ifShowGBT = false } = data;
+      const { params } = record as Recordable;
       videoId.value = record.id || '';
       isGBT.value = ifShowGBT;
-      GBTOption.value.tbDeviceId = record.deviceId;
-      GBTOption.value.channelId = record.channelId;
+      GBTOption.value.tbDeviceId = params?.deviceId ? params?.deviceId : record?.deviceId;
+      GBTOption.value.channelId = params?.channelNo ? params?.channelNo : record?.channelId;
       try {
         setModalProps({ loading: true, loadingTip: '视频加载中...' });
-
-        const result = await getVideoControlStart({
-          deviceId: record.deviceId,
-          channelId: record.channelId,
-        });
-        options.sources = [{ src: result.data.flv, type: getVideoTypeByUrl(result.data.flv) }];
+        // getStreamingPlayUrl
+        let result: any = null;
+        if (record.accessMode === AccessMode.GBT28181) {
+          result = await getVideoControlStart({
+            deviceId: params?.deviceId ? params?.deviceId : record?.deviceId,
+            channelId: params?.channelNo ? params?.channelNo : record?.channelId,
+          });
+          options.sources = [{ src: result.data.flv, type: getVideoTypeByUrl(result.data.flv) }];
+        } else {
+          result = await getStreamingPlayUrl(record.id);
+          options.sources = [
+            { src: result.data.url, type: getVideoTypeByUrl(result.data.url), id: record.id },
+          ];
+        }
         showVideo.value = true;
       } catch (error) {
       } finally {

@@ -56,7 +56,6 @@
       if (record) {
         await nextTick();
       }
-
       const title = `${DataActionModeNameEnum[mode]}物模型`;
       setModalProps({
         showOkBtn: mode !== DataActionModeEnum.READ,