Merge branch 'feat/device-new-protocol' into 'main_dev'

fix: 隐藏GBT28181的页面和逻辑

See merge request yunteng/thingskit-front!986

@@ -119,3 +119,11 @@ export const closeFlvPlay = (url: string, browserId: string) => {
     url: `/rtsp/closeFlv?url=${encodeURIComponent(url)}&browserId=${browserId}`,
   });
 };
+
+//云台控制
+export const controlling = (params: any) => {
+  return defHttp.get({
+    url: `/video/controlling`,
+    params,
+  });
+};

@@ -78,6 +78,8 @@
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
     <VideoPreviewModal @register="registerModal" />
+
+    <VideoModal @register="registerModal1" />
   </div>
 </template>
 
@@ -96,6 +98,7 @@
   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: {
@@ -105,6 +108,7 @@
       TableAction,
       CameraDrawer,
       VideoPreviewModal,
+      VideoModal,
       TableImg,
       Authority,
       Popconfirm,
@@ -114,7 +118,9 @@
     setup(_, { emit }) {
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      const [registerModal, { openModal }] = useModal();
+      const [registerModal, { openModal }] = useModal(); //手动输入
+
+      const [registerModal1, { openModal: openModal1 }] = useModal(); //流媒体获取
       // 表格hooks
       const [registerTable, { reload, setProps, clearSelectedRowKeys }] = useTable({
         title: '视频列表',
@@ -176,7 +182,14 @@
         handleSuccess();
       };
       const handleViewVideo = (record) => {
-        openModal(true, {
+        if (record.accessMode === AccessMode.ManuallyEnter) {
+          openModal(true, {
+            isUpdate: true,
+            record,
+          });
+          return;
+        }
+        openModal1(true, {
           isUpdate: true,
           record,
         });
@@ -198,6 +211,7 @@
         organizationIdTreeRef,
         handleViewVideo,
         registerModal,
+        registerModal1,
         AccessMode,
         handleSwitchMode,
         CameraPermission,

@@ -54,6 +54,9 @@
       <TabPane key="task" tab="任务">
         <Task :tbDeviceId="deviceDetail.tbDeviceId" />
       </TabPane>
+      <!-- <TabPane v-if="false" key="videoChannel" tab="视频通道">
+        <VideoChannel :deviceDetail="deviceDetail" :fromId="deviceDetail?.tbDeviceId" />
+      </TabPane> -->
     </Tabs>
   </BasicDrawer>
 </template>
@@ -74,6 +77,7 @@
   import EventManage from '../tabs/EventManage/index.vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import Task from '../tabs/Task.vue';
+  // import { VideoChannel } from '../tabs/VideoChannel/index';
 
   export default defineComponent({
     name: 'DeviceModal',
@@ -91,6 +95,7 @@
       CommandRecord,
       EventManage,
       Task,
+      // VideoChannel,
     },
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {
@@ -99,9 +104,13 @@
       const deviceDetailRef = ref();
       const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);
       const tbDeviceId = ref('');
+
+      const isTransportType = ref<Boolean>(false); //获取产品是不是GB/T 28181
       // 详情回显
       const [register] = useDrawerInner(async (data) => {
-        const { id } = data;
+        const { id, transportType, deviceType } = data || {};
+        isTransportType.value =
+          transportType == 'GB/T28181' && deviceType == 'DIRECT_CONNECTION' ? true : false;
         // 设备详情
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;
@@ -136,6 +145,7 @@
         tbDeviceId,
         handleOpenTbDeviceDetail,
         handleOpenGatewayDevice,
+        isTransportType,
         drawerTitle,
       };
     },

+import { h } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { Tag } from 'ant-design-vue';
+import { withInstall } from '/@/utils/index';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+
+import VideoPlay from './video.vue';
+export const Video = withInstall(VideoPlay);
+
+export const configColumns: BasicColumn[] = [
+  {
+    title: '通道编号',
+    dataIndex: 'channellNumber',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'deviceName',
+  },
+  {
+    title: '通道名称',
+    dataIndex: 'channelName',
+  },
+  {
+    title: '厂家',
+    dataIndex: 'manufacturer',
+  },
+  {
+    title: '开启音频',
+    dataIndex: 'turnOnAudio',
+    slots: { customRender: 'turnOnAudio' },
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    format: (text) => {
+      return h(
+        Tag,
+        {
+          color: Number(text) === 1 ? 'green' : 'blue',
+        },
+        () => (Number(text) === 1 ? '在线' : '离线')
+      );
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+  },
+];
+
+export const searchFormSchema: FormSchema[] | any = [
+  {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        { label: '网关设备', value: DeviceTypeEnum.GATEWAY },
+        { label: '直连设备', value: DeviceTypeEnum.DIRECT_CONNECTION },
+        { label: '网关子设备', value: DeviceTypeEnum.SENSOR },
+      ],
+      placeholder: '请选择设备类型',
+    },
+  },
+  // {
+  //   field: 'channelName',
+  //   label: '通道名称',
+  //   component: 'Input',
+  //   colProps: { span: 6 },
+  //   componentProps: {
+  //     maxLength: 255,
+  //     placeholder: '请输入通道名称',
+  //   },
+  // },
+  {
+    field: 'manufacturer',
+    label: '厂家',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [{}],
+      placeholder: '请选择厂家',
+    },
+  },
+];

+import VideoChannel from './index.vue';
+export { VideoChannel };

+<template>
+  <BasicTable
+    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 p-4"
+    @register="registerTable"
+  >
+    <template #turnOnAudio="{ record }">
+      <Switch
+        :checked="record.status === 1"
+        :loading="record.pendingStatus"
+        checkedChildren="开启"
+        unCheckedChildren="关闭"
+        @change="(checked:boolean)=>handleTurnVideo(checked,record)"
+      />
+    </template>
+    <template #action="{ record }">
+      <TableAction
+        :actions="[
+          {
+            label: '播放',
+            auth: 'api:yt:sceneLinkage:get',
+            icon: 'ant-design:play-circle-outlined',
+            onClick: handlePlay.bind(null, record),
+          },
+        ]"
+    /></template>
+  </BasicTable>
+  <VideoModal @register="registerModal" />
+</template>
+
+<script lang="ts" setup>
+  import { configColumns, searchFormSchema } from './config';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Switch } from 'ant-design-vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { watch } from 'vue';
+  import VideoModal from './videoModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { onMounted } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const props = defineProps({
+    fromId: {
+      type: String,
+      default: '',
+    },
+    deviceDetail: {
+      type: Object as PropType<DeviceRecord>,
+      required: true,
+    },
+  });
+
+  watch(
+    () => props,
+    () => {
+      console.log(props, 'props');
+    }
+  );
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerTable, { setTableData, setProps, setSelectedRowKeys, reload }] = useTable({
+    // api: deviceCommandRecordGetQuery,
+    columns: configColumns,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    beforeFetch: (params) => {
+      console.log(params);
+    },
+    useSearchForm: true,
+  });
+
+  const handleTurnVideo = async (checked: Boolean, record: Recordable) => {
+    console.log(checked, record, 'record');
+    setProps({
+      loading: true,
+    });
+    setSelectedRowKeys([]);
+    const newStatus = checked ? 1 : 0;
+    const { createMessage } = useMessage();
+    try {
+      if (newStatus) createMessage.success('开启成功');
+      else createMessage.success('关闭成功');
+    } finally {
+      setProps({
+        loading: false,
+      });
+      reload();
+    }
+  };
+
+  const tableList = [
+    {
+      id: '8b66f4fa-88e0-42b2-be33-60652cd2bda1',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-03-10 17:16:54',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:25:49',
+      name: 'dasd',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl: 'ws://192.168.10.134:28080/rtp/62020000492000000002_34020000001320000001.live.flv',
+      sn: 's',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '9ff408ab-980f-470c-a55c-e4e284ddd34d',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-22 14:50:13',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:36:25',
+      name: '2',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8099/live/HD_d80a740b-2672-4ad1-90e4-52eb71d8c2ef.m3u8?auth_key=1681180571-0-0-dfdb334e5f83838ade5f01f61f910107',
+      sn: '212',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: 'a6edd8fb-a91a-4a1b-8124-65959206dac4',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-21 16:39:51',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:33:27',
+      name: 'dasda',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8200/live/HD_1b361aa9-5230-48ba-b8be-d1e2c4e9b178.m3u8?auth_key=1681180365-0-0-e77f40e88550091053139f5562d8afa2',
+      brand: 'dasdad',
+      sn: 'adsad',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '51b4c0bc-8050-4b37-bdb3-9fe08b14cf86',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-21 16:37:44',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:56:59',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8093/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681181808-0-0-d756d9b0426b71482e45b9377958e4dc',
+      brand: '视频厂家',
+      sn: 'DART2143SAD12RE',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '8c0e6ed0-3176-4e76-bd8e-92f722f61e79',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-12-01 15:55:54',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:59:22',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      avatar: 'https://demo.thingskit.com:9000/yunteng/itbbqOBXIUzWvjq.jpeg',
+      videoUrl: 'http://113.204.115.250:83/openUrl/iFzoWME/live.m3u8',
+      brand: '厂家',
+      sn: 'JDKSA11321',
+      organizationId: '9196fd9a-624a-4891-a8b3-ce588baedf9f',
+      organizationName: '丰田',
+      status: false,
+      channellNumber: 1,
+      accessMode: 0,
+      playProtocol: 0,
+    },
+    {
+      id: 'c30422a7-9498-49a5-96d5-e77f3a2823e3',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-12-01 14:42:52',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-03-02 17:12:53',
+      name: '湖南卫视',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8',
+      brand: 'BUZHIDAO',
+      sn: 'QKDK123456',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      channellNumber: 1,
+      accessMode: 0,
+      playProtocol: 0,
+    },
+    {
+      id: 'e3253015-b8df-4e8f-ad0c-f634d3fd927e',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-29 11:19:00',
+      name: '玩具视频播放',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      avatar: 'http://nc.tianzow.com:29000/yunteng/tgygMQmYaaPDPdG.jpg',
+      videoUrl: 'https://ask.dcloud.net.cn/topic.m3u8',
+      brand: '成都厂家',
+      sn: 'TCL1528GOP',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      channellNumber: 1,
+      playProtocol: 0,
+    },
+    {
+      id: '9edc9f73-3a9a-4e4b-9b4c-b955329b99b3',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-29 11:13:44',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-01-11 10:03:18',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      sn: '7aeb4061f3cf4ba384ed8e1a3027d2a8',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 1,
+      videoPlatformId: '8cc7c20e-693b-48ea-9124-994e0908c83e',
+      streamType: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+      videoPlatformDTO: {
+        enabled: false,
+        host: '113.204.115.250:7120',
+        appKey: '28238690',
+        appSecret: 'F3e3Ffvo9Wyg9jkl8BUS',
+        ssl: 1,
+      },
+    },
+    {
+      id: '9d6675ad-07ed-45ae-bb4a-457000e164f8',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-21 11:49:59',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:53:27',
+      name: '新视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
+      brand: '1111',
+      sn: 'XYZ',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      channellNumber: 1,
+      playProtocol: 0,
+    },
+  ];
+
+  onMounted(() => {
+    setTableData(tableList);
+  });
+
+  const handlePlay = (record: Recordable) => {
+    console.log(record);
+    openModal(true, {
+      record,
+    });
+  };
+</script>

+<script lang="ts" setup>
+  import { isNumber } from 'lodash';
+  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
+  import 'video.js/dist/video-js.css';
+  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+  import { isShareMode } from '/@/views/sys/share/hook';
+  import 'videojs-flvjs-es6';
+  import {
+    CaretUpOutlined,
+    CaretRightOutlined,
+    PauseOutlined,
+    CaretDownOutlined,
+    CaretLeftOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
+  } from '@ant-design/icons-vue';
+  import { Button } from 'ant-design-vue';
+  import { nextTick } from 'vue';
+  import { controlling } from '/@/api/camera/cameraManager';
+
+  const { prefixCls } = useDesign('basic-video-play');
+
+  const props = defineProps<{
+    options?: VideoJsPlayerOptions;
+    withToken?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
+    (event: 'onUnmounted'): void;
+  }>();
+
+  const videoPlayEl = ref<HTMLVideoElement>();
+
+  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
+
+  const getOptions = computed(() => {
+    const { options, withToken } = props;
+
+    const defaultOptions: VideoJsPlayerOptions & Recordable = {
+      language: 'zh',
+      muted: true,
+      liveui: true,
+      controls: true,
+      techOrder: ['html5', 'flvjs'],
+      flvjs: {
+        mediaDataSource: {
+          isLive: true,
+          cors: true,
+          hasAudio: false,
+          withCredentials: false,
+        },
+        config: {
+          headers: {
+            ...(withToken
+              ? {
+                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+                }
+              : {}),
+          },
+          autoCleanupSourceBuffer: true,
+        },
+      },
+    };
+    return videoJs.mergeOptions(defaultOptions, options);
+  });
+
+  const getWidthHeight = computed(() => {
+    let { width = 300, height = 150 } = unref(getOptions);
+    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
+    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
+    return { width, height } as CSSProperties;
+  });
+
+  const init = () => {
+    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
+      emit('ready', unref(videoPlayInstance));
+    });
+  };
+
+  //播放/暂停
+  const handleClick = () => {
+    unref(isPlay) && unref(videoPlayInstance)?.pause();
+    !unref(isPlay) && unref(videoPlayInstance)?.play();
+  };
+
+  const getId = () => {
+    const { options } = props || {};
+    const { sources }: any = options || {};
+    return sources?.[0]?.id;
+  };
+
+  const handleControl = (action: number, direction: string) => {
+    const organizationId = getId();
+    controlling({ cameralndexCode: organizationId, action, command: direction });
+  };
+
+  const isPlay = ref<Boolean | null | undefined>(false);
+
+  onMounted(async () => {
+    init();
+    await nextTick();
+    // isPlay.value = unref(videoPlayInstance)?.paused();
+    videoPlayInstance.value?.on('loadedmetadata', () => {});
+    videoPlayInstance.value?.on('waiting', () => {
+      isPlay.value = false;
+    });
+    videoPlayInstance.value?.on('play', () => {
+      isPlay.value = true;
+    });
+    videoPlayInstance.value?.on('playing', () => {
+      isPlay.value = true;
+    });
+    videoPlayInstance.value?.on('pause', () => {
+      isPlay.value = false;
+    });
+    videoPlayInstance.value?.on('ended', () => {
+      isPlay.value = false;
+    });
+  });
+
+  //长按开始
+  const moveStart = (action) => {
+    handleControl(0, action);
+  };
+  // 长按结束
+  const moveStop = (action) => {
+    handleControl(1, action);
+  };
+
+  onUnmounted(() => {
+    unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = null;
+    emit('onUnmounted');
+  });
+
+  defineExpose({
+    reloadPlayer: init,
+    getInstance: () => unref(videoPlayInstance),
+  });
+</script>
+
+<template>
+  <div :class="prefixCls" class="!w-full h-full flex" :style="getWidthHeight">
+    <video
+      ref="videoPlayEl"
+      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full"
+      muted
+    >
+    </video>
+
+    <div class="!w-2/10 bg-white flex items-center flex-col">
+      <h1>云台控制</h1>
+
+      <div class="home mt-5">
+        <Button class="front-sty-center child center" shape="circle" @click="handleClick()">
+          <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"
+              @mousedown="moveStart('up')"
+              @mouseup="moveStop('up')"
+            >
+              <CaretUpOutlined class="icon-rotate child-icon" />
+            </Button>
+            <Button
+              class="right-top in-block"
+              @mousedown="moveStart('RIGHT')"
+              @mouseup="moveStop('RIGHT')"
+            >
+              <CaretRightOutlined class="icon-rotate child-icon" />
+            </Button>
+          </div>
+          <div>
+            <Button
+              class="left-bottom in-block"
+              @mousedown="moveStart('LEFT')"
+              @mouseup="moveStop('LEFT')"
+            >
+              <CaretLeftOutlined class="icon-rotate child-icon" />
+            </Button>
+            <Button
+              class="right-bottom in-block"
+              @mousedown="moveStart('DOWN')"
+              @mouseup="moveStop('DOWN')"
+            >
+              <CaretDownOutlined class="icon-rotate child-icon" />
+            </Button>
+          </div>
+
+          <Button class="circle" @click="handleClick" />
+        </div>
+      </div>
+      <div class="flex justify-center mt-8">
+        <Button
+          class="button-icon"
+          @mousedown="moveStart('ZOOM_IN')"
+          @mouseup="moveStop('ZOOM_IN')"
+          style="border-radius: :50%;"
+        >
+          <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
+        </Button>
+        <Button
+          class="ml-10 button-icon"
+          @mousedown="moveStart('ZOOM_OUT')"
+          @mouseup="moveStop('ZOOM_OUT')"
+          style="border-radius: :50%;"
+        >
+          <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-basic-video-play';
+
+  .@{prefix-cls} {
+    .vjs-error-display {
+      .vjs-modal-dialog-content::after {
+        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
+      }
+    }
+  }
+
+  .child {
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    display: flex;
+    justify-content: center;
+    background: #e2dede;
+    align-items: center;
+    border: none;
+  }
+
+  .child-icon {
+    font-size: 1.5rem;
+    color: #fffbfb;
+  }
+
+  .button-icon {
+    width: 3rem;
+    height: 3rem;
+    background: #f5f5f5;
+    border: none;
+    border-radius: 50% !important;
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    width: 4rem;
+    height: 4rem;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: #5586d4;
+  }
+
+  .home {
+    position: relative;
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .box {
+    transform: rotateZ(45deg);
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .icon-rotate {
+    transform: rotate(315deg);
+  }
+
+  .front-sty-center {
+    position: absolute;
+    top: 50%;
+    z-index: 9999;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .circle {
+    display: inline-block;
+    border-radius: 50%;
+    background-color: #5586d4;
+    width: 4rem;
+    height: 4rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .in-block {
+    display: inline-block;
+    position: relative;
+  }
+
+  .left-top {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 5rem 0 0 0;
+    background-color: #e2dede;
+  }
+
+  .right-top {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 5rem 0 0;
+    background-color: #e2dede;
+  }
+
+  .left-bottom {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 0 0 5rem;
+    background-color: #e2dede;
+  }
+
+  .right-bottom {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 0 5rem 0;
+    background-color: #e2dede;
+  }
+</style>

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="60rem"
+      destroyOnClose
+      :height="heightNum"
+      @register="register"
+      title="视频预览"
+      :showOkBtn="false"
+      @cancel="handleCancel"
+    >
+      <div class="flex items-center justify-center w-full h-full min-h-96 video-container">
+        <Video
+          v-if="showVideo"
+          :options="(options as any)"
+          :withToken="withToken"
+          @on-unmounted="handleCloseFlvPlayUrl"
+        />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, reactive, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
+  import { getVideoTypeByUrl } from '/@/components/Video';
+  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
+  import { VideoJsPlayerOptions } from 'video.js';
+  import { useFingerprint } from '/@/utils/useFingerprint';
+  import { GetResult } from '@fingerprintjs/fingerprintjs';
+  import { AccessMode } from '/@/views/camera/manage/config.data';
+  import { Video } from './config';
+
+  const heightNum = ref(800);
+  const showVideo = ref(false);
+
+  const playUrl = ref('');
+
+  const withToken = ref(false);
+
+  const fingerprintResult = ref<Nullable<GetResult>>(null);
+
+  const options = reactive<VideoJsPlayerOptions>({
+    width: '100%' as unknown as number,
+    height: 384 as unknown as number,
+    autoplay: true,
+  });
+
+  const setSources = (url: string, fingerprintResult: GetResult, id) => {
+    const flag = isRtspProtocol(url);
+    options.sources = [
+      {
+        src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
+        type: getVideoTypeByUrl(url),
+        id,
+      },
+    ];
+  };
+
+  const { getResult } = useFingerprint();
+  const [register] = useModalInner(
+    async (data: { record: CameraModel | StreamingManageRecord }) => {
+      const { record } = data;
+      const result = await getResult();
+      fingerprintResult.value = result;
+      if (record.accessMode === AccessMode.ManuallyEnter) {
+        if ((record as CameraModel).videoUrl) {
+          if (isRtspProtocol((record as CameraModel).videoUrl)) {
+            playUrl.value = (record as CameraModel).videoUrl;
+            closeFlvPlay(unref(playUrl), result.visitorId);
+            withToken.value = true;
+          }
+          setSources((record as CameraModel).videoUrl, result, record.id);
+        }
+      } else {
+        try {
+          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
+          setSources(url, result, record.id);
+        } catch (error) {}
+      }
+      showVideo.value = true;
+    }
+  );
+
+  const handleCloseFlvPlayUrl = () => {
+    if (isRtspProtocol(unref(playUrl))) {
+      closeFlvPlay(unref(playUrl)!, unref(fingerprintResult)!.visitorId!);
+    }
+  };
+
+  const handleCancel = () => {
+    showVideo.value = false;
+    withToken.value = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .video-container:deep(.vben-basic-video-play) {
+    min-height: 13rem;
+  }
+
+  .video-container:deep(.video-js) {
+    min-height: 13rem;
+  }
+</style>

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

@@ -145,6 +145,7 @@
     }
   };
   const handleStepNext = (e, data) => {
+    // const { deviceType } = unref(DevConStRef)?.getFieldsValue() || {};
     if (e) {
       current.value++;
       unref(isUpdate)

@@ -15,19 +15,20 @@
     ifShowBtn: { type: Boolean, default: true },
   });
 
-  const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
-    labelWidth: 100,
-    schemas: step1Schemas,
-    actionColOptions: {
-      span: 14,
-    },
-    showResetButton: false,
-    showActionButtonGroup: props.ifShowBtn ? true : false,
-    submitButtonOptions: {
-      text: '下一步',
-    },
-    submitFunc: customSubmitFunc,
-  });
+  const [register, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
+    useForm({
+      labelWidth: 100,
+      schemas: step1Schemas,
+      actionColOptions: {
+        span: 14,
+      },
+      showResetButton: false,
+      showActionButtonGroup: props.ifShowBtn ? true : false,
+      submitButtonOptions: {
+        text: '下一步',
+      },
+      submitFunc: customSubmitFunc,
+    });
   const editOrAddNameStatus = (nameStatus) =>
     updateSchema({
       field: 'name',
@@ -87,6 +88,7 @@
     resetFormData,
     getFormData,
     editOrAddDeviceTypeStatus,
+    getFieldsValue,
     setFieldsdefaultRuleChainId,
   });
 </script>

 <template>
   <div
     class="step2-style"
-    :style="[isMqttType == 'DEFAULT' ? { minHeight: 0 + 'px' } : { minHeight: 800 + 'px' }]"
+    :style="[
+      isMqttType == 'DEFAULT' || isMqttType == 'GB/T28181'
+        ? { minHeight: 0 + 'px' }
+        : { minHeight: 800 + 'px' },
+    ]"
   >
     <div
       :style="[
@@ -138,6 +142,7 @@
     const getSnmpVal = await snmpRef.value?.getFormData();
     const getTcpVal = await tcpRef.value?.getFormData();
     step2Data.transportConfiguration = {
+      // type: isMqttType.value,
       ...getMqttVal,
       ...getCoapVal,
       ...getLwm2mVal,
@@ -149,18 +154,25 @@
   };
 
   const editOrAddTransportTypeStatus = (status: boolean) => {
+    const options = [
+      { label: '默认', value: 'DEFAULT' },
+      { label: 'MQTT', value: 'MQTT' },
+      { label: 'CoAP', value: 'COAP' },
+      // { label: 'LWM2M', value: 'LWM2M' },
+      // { label: 'SNMP', value: 'SNMP' },
+      { label: 'TCP/UDP', value: 'TCP' },
+    ];
+    // if (deviceType == 'DIRECT_CONNECTION') {
+    // options.push({ label: 'GB/T 28181', value: 'GB/T28181' });//暂时隐藏 GBT 28181写完放出来
+    // }
+    // if (deviceType != 'DIRECT_CONNECTION' && isMqttType.value == 'GB/T28181') {
+    //   setFieldsValue({ transportType: null });
+    // }
     updateSchema({
       field: 'transportType',
       componentProps: {
         disabled: status,
-        options: [
-          { label: '默认', value: 'DEFAULT' },
-          { label: 'MQTT', value: 'MQTT' },
-          { label: 'CoAP', value: 'COAP' },
-          // { label: 'LWM2M', value: 'LWM2M' },
-          // { label: 'SNMP', value: 'SNMP' },
-          { label: 'TCP/UDP', value: 'TCP' },
-        ],
+        options,
         onChange(e) {
           isMqttType.value = e;
         },

@@ -78,6 +78,6 @@ export const getSendValues = async (option, getDesign, checked) => {
 
 export const CommandTypeEnumLIst = {
   '0': { CUSTOM: 0, name: '自定义' },
-  '1': { CUSTOM: 0, name: '服务' },
-  '2': { CUSTOM: 0, name: '属性' },
+  '1': { CUSTOM: 1, name: '服务' },
+  '2': { CUSTOM: 2, name: '属性' },
 };