Merge branch 'ww' into 'main'

fix: BUG in teambition && usage video.js replace vue3-video-player

See merge request huang/yun-teng-iot-front!383

-{
-  "i18n-ally.localesPaths": [
-    "src/locales",
-    "src/locales/lang",
-    "public/resource/tinymce/langs"
-  ],
-  "commentTranslate.targetLanguage": "en",
-  "cSpell.words": [
-    "Cmds",
-    "unref"
-  ]
-}

@@ -63,6 +63,7 @@
     "sortablejs": "^1.14.0",
     "sortablejs": "^1.14.0",
     "tinymce": "^5.8.2",
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
     "vditor": "^3.8.6",
+    "video.js": "^7.20.3",
     "vue": "^3.2.31",
     "vue": "^3.2.31",
     "vue-i18n": "9.1.7",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
     "vue-json-pretty": "^2.0.4",
@@ -90,6 +91,7 @@
     "@types/qrcode": "^1.4.1",
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.10.7",
     "@types/sortablejs": "^1.10.7",
+    "@types/video.js": "^7.3.49",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "@vitejs/plugin-legacy": "^1.5.1",
     "@vitejs/plugin-legacy": "^1.5.1",

@@ -344,7 +344,7 @@
     }
     }
 
 
     &-form-container {
     &-form-container {
-      padding: 16px 16px 16px 36px;
+      padding: 16px 16px 16px 16px;
 
 
       .ant-form {
       .ant-form {
         padding: 12px 10px 6px 10px;
         padding: 12px 10px 6px 10px;

+import { withInstall } from '/@/utils/index';
+import VideoPlay from './src/VideoPlay.vue';
+
+export { getVideoTypeByUrl } from './src/utils';
+
+export const BasicVideoPlay = withInstall(VideoPlay);

+<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';
+
+  const { prefixCls } = useDesign('basic-video-play');
+
+  const props = defineProps<{
+    options?: VideoJsPlayerOptions;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
+  }>();
+
+  const videoPlayEl = ref<HTMLVideoElement>();
+
+  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
+
+  const getOptions = computed(() => {
+    const { options } = props;
+    const defaultOptions: VideoJsPlayerOptions = {
+      language: 'zh',
+      muted: true,
+      liveui: true,
+      controls: true,
+    };
+    return { ...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 = () => {
+    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
+      emit('ready', unref(videoPlayInstance));
+    });
+  };
+
+  onMounted(() => {
+    init();
+  });
+
+  onUnmounted(() => {
+    unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = null;
+  });
+</script>
+
+<template>
+  <div :class="prefixCls" class="w-full h-full" :style="getWidthHeight">
+    <video
+      ref="videoPlayEl"
+      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-full !h-full"
+    ></video>
+  </div>
+</template>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-video-play';
+
+  .@{prefix-cls} {
+    .vjs-error-display {
+      .vjs-modal-dialog-content::after {
+        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
+      }
+    }
+  }
+</style>

+export enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+}
+
+export const getVideoTypeByUrl = (url: string) => {
+  const splitExtReg = /(?:.*)(?<=\.)/;
+
+  const type = url.replace(splitExtReg, '');
+
+  if (VideoPlayerType[type]) return VideoPlayerType[type];
+
+  return VideoPlayerType.mp4;
+};

@@ -383,7 +383,7 @@ export const MediaTypeValidate: Rule[] = [
     required: true,
     required: true,
     validator: (_, value: string) => {
     validator: (_, value: string) => {
       const reg = /(?:.*)(?<=\.)/;
       const reg = /(?:.*)(?<=\.)/;
-      const type = value.replace(reg, '');
+      const type = (value || '').replace(reg, '');
       if (type !== MediaType.M3U8) {
       if (type !== MediaType.M3U8) {
         return Promise.reject('视频流只支持m3u8格式');
         return Promise.reject('视频流只支持m3u8格式');
       }
       }

@@ -3,117 +3,63 @@
     <BasicModal
     <BasicModal
       v-bind="$attrs"
       v-bind="$attrs"
       width="55rem"
       width="55rem"
+      destroyOnClose
       :height="heightNum"
       :height="heightNum"
       @register="register"
       @register="register"
       title="视频预览"
       title="视频预览"
-      @cancel="handleCancel"
       :showOkBtn="false"
       :showOkBtn="false"
+      @cancel="handleCancel"
     >
     >
-      <div class="video-sty">
-        <div>
-          <videoPlay
-            v-if="showVideo"
-            ref="video"
-            style="display: inline-block; width: 100%"
-            v-bind="options"
-          />
-        </div>
+      <div class="flex items-center justify-center bg-dark-900 w-full h-full min-h-52">
+        <BasicVideoPlay v-if="showVideo" :options="options" />
       </div>
       </div>
-      <!-- <div
-        class="bg-black h-80 text-light-50 w-full h-full flex justify-center items-center"
-        v-if="!showVideo"
-      >
-        视频播放出错啦!
-      </div> -->
     </BasicModal>
     </BasicModal>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-  import { ref, nextTick, reactive } from 'vue';
+  import { ref, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
   import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
-  import { videoPlay } from 'vue3-video-play'; // 引入组件
-  import 'vue3-video-play/dist/style.css'; // 引入css
-  import { AccessMode, MediaType } from './config.data';
+  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
+  import { AccessMode } from './config.data';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { VideoJsPlayerOptions } from 'video.js';
 
 
   const heightNum = ref(800);
   const heightNum = ref(800);
   const showVideo = ref(false);
   const showVideo = ref(false);
-  const options = reactive({
-    width: '800px',
-    height: '450px',
-    color: '#409eff',
-    muted: false, //静音
-    webFullScreen: false,
-    autoPlay: true, //自动播放
-    currentTime: 0,
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    ligthOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制器
-    title: '', //视频名称
-    type: 'm3u8',
-    src: '', //视频源
-    controlBtns: [
-      'audioTrack',
-      'quality',
-      'speedRate',
-      'volume',
-      'setting',
-      'pip',
-      'pageFullScreen',
-      'fullScreen',
-    ],
+  const options = reactive<VideoJsPlayerOptions>({
+    width: '100%' as unknown as number,
+    height: '100%' as unknown as number,
+    autoplay: true,
   });
   });
-  const video: any = ref(null);
 
 
-  nextTick(() => {
-    console.log(video.value);
-  });
-
-  const getMediaType = (suffix: string) => {
-    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
+  const setSources = (url: string) => {
+    options.sources = [
+      {
+        src: url,
+        type: getVideoTypeByUrl(url),
+      },
+    ];
   };
   };
 
 
   const [register] = useModalInner(
   const [register] = useModalInner(
     async (data: { record: CameraModel | StreamingManageRecord }) => {
     async (data: { record: CameraModel | StreamingManageRecord }) => {
-      let reg = /(?:.*)(?<=\.)/;
       const { record } = data;
       const { record } = data;
       if (record.accessMode === AccessMode.ManuallyEnter) {
       if (record.accessMode === AccessMode.ManuallyEnter) {
         if ((record as CameraModel).videoUrl) {
         if ((record as CameraModel).videoUrl) {
-          const type = (record as CameraModel).videoUrl.replace(reg, '');
-          showVideo.value = true;
-          options.type = getMediaType(type);
-          options.src = (record as CameraModel).videoUrl;
-          options.autoPlay = true;
+          setSources((record as CameraModel).videoUrl);
         }
         }
       } else {
       } else {
         try {
         try {
           const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
           const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-          showVideo.value = true;
-          options.src = url;
-          const type = (url as CameraModel).videoUrl.replace(reg, '');
-          options.type = getMediaType(type);
-        } catch (error) {
-        } finally {
-          showVideo.value = true;
-        }
+          setSources(url);
+        } catch (error) {}
       }
       }
+      showVideo.value = true;
     }
     }
   );
   );
 
 
   const handleCancel = () => {
   const handleCancel = () => {
-    //关闭暂停播放视频
-    options.src = '';
-    video.value.pause();
+    showVideo.value = false;
   };
   };
 </script>
 </script>
-<style>
-  .video-sty {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>

@@ -5,21 +5,28 @@
   import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
   import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
-  import { videoPlay as VideoPlay } from 'vue3-video-play';
   import 'vue3-video-play/dist/style.css';
   import 'vue3-video-play/dist/style.css';
   import { useFullscreen } from '@vueuse/core';
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
   import CameraDrawer from './CameraDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
-  import { AccessMode, MediaType, PageMode } from './config.data';
+  import { AccessMode, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import { isDef } from '/@/utils/is';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { buildUUID } from '/@/utils/uuid';
   import { buildUUID } from '/@/utils/uuid';
+  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
+  import { VideoJsPlayerOptions } from 'video.js';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
 
 
   type CameraRecordItem = CameraRecord & {
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
     canPlay?: boolean;
-    type?: string;
     isTransform?: boolean;
     isTransform?: boolean;
+    videoPlayerOptions?: VideoJsPlayerOptions;
+  };
+
+  const basicVideoPlayOptions: VideoJsPlayerOptions = {
+    width: '100%' as unknown as number,
+    height: '100%' as unknown as number,
+    autoplay: true,
   };
   };
 
 
   const emit = defineEmits(['switchMode']);
   const emit = defineEmits(['switchMode']);
@@ -36,32 +43,6 @@
     total: 0,
     total: 0,
   });
   });
 
 
-  const options = reactive({
-    width: '200px',
-    height: '200px',
-    color: '#409eff',
-    muted: true, //静音
-    webFullScreen: false,
-    autoPlay: true, //自动播放
-    currentTime: 0,
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    ligthOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制器
-    type: 'm3u8',
-    controlBtns: [
-      'audioTrack',
-      'quality',
-      'speedRate',
-      'volume',
-      'setting',
-      'pip',
-      'pageFullScreen',
-      'fullScreen',
-    ],
-  });
-
   // 树形选择器
   // 树形选择器
   const handleSelect = (orgId: string) => {
   const handleSelect = (orgId: string) => {
     organizationId.value = orgId;
     organizationId.value = orgId;
@@ -80,7 +61,6 @@
       pagination.total = total;
       pagination.total = total;
 
 
       for (const item of items) {
       for (const item of items) {
-        // await beforeVideoPlay(item);
         (item as CameraRecordItem).isTransform = false;
         (item as CameraRecordItem).isTransform = false;
         beforeVideoPlay(item);
         beforeVideoPlay(item);
       }
       }
@@ -97,30 +77,39 @@
       loading.value = false;
       loading.value = false;
     }
     }
   };
   };
-  const getMediaType = (suffix: string) => {
-    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
-  };
 
 
   const beforeVideoPlay = async (record: CameraRecordItem) => {
   const beforeVideoPlay = async (record: CameraRecordItem) => {
-    let reg = /(?:.*)(?<=\.)/;
     if (record.accessMode === AccessMode.ManuallyEnter) {
     if (record.accessMode === AccessMode.ManuallyEnter) {
       if (record.videoUrl) {
       if (record.videoUrl) {
-        const type = record.videoUrl.replace(reg, '');
-        record.type = getMediaType(type);
+        (record as CameraRecordItem).videoPlayerOptions = {
+          ...basicVideoPlayOptions,
+          sources: [
+            {
+              src: record.videoUrl,
+              type: getVideoTypeByUrl(record.videoUrl),
+            },
+          ],
+        };
         record.isTransform = true;
         record.isTransform = true;
       }
       }
     }
     }
     if (record.accessMode === AccessMode.Streaming) {
     if (record.accessMode === AccessMode.Streaming) {
       try {
       try {
         const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
         const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-        const type = url.replace(reg, '');
         const index = unref(cameraList).findIndex((item) => item.id === record.id);
         const index = unref(cameraList).findIndex((item) => item.id === record.id);
         if (~index) {
         if (~index) {
           const oldRecord = unref(cameraList).at(index)!;
           const oldRecord = unref(cameraList).at(index)!;
           unref(cameraList)[index] = {
           unref(cameraList)[index] = {
             ...oldRecord,
             ...oldRecord,
-            videoUrl: url,
-            type: getMediaType(type),
+            videoPlayerOptions: {
+              ...basicVideoPlayOptions,
+              sources: [
+                {
+                  src: url,
+                  type: getVideoTypeByUrl(url),
+                },
+              ],
+            },
             isTransform: true,
             isTransform: true,
           };
           };
         }
         }
@@ -160,20 +149,6 @@
     }
     }
   };
   };
 
 
-  const handleLoadStart = (record: CameraRecordItem) => {
-    const index = unref(cameraList).findIndex((item) => item.id === record.id);
-    setTimeout(() => {
-      ~index &&
-        !unref(cameraList).at(index)!.canPlay &&
-        (unref(cameraList).at(index)!.canPlay = false);
-    }, 30000);
-  };
-
-  const handleLoadData = (record: CameraRecordItem) => {
-    const index = unref(cameraList).findIndex((item) => item.id === record.id);
-    ~index && (unref(cameraList).at(index)!.canPlay = true);
-  };
-
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerDrawer, { openDrawer }] = useDrawer();
 
 
   const handleAddCamera = () => {
   const handleAddCamera = () => {
@@ -185,13 +160,26 @@
   onMounted(() => {
   onMounted(() => {
     getCameraList();
     getCameraList();
   });
   });
+
+  const listEl = ref();
+  onMounted(() => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 16;
+    const listContainerHeight = clientHeight - rect.top - listContainerMarginBottom;
+    const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl && (listContainerEl.style.height = listContainerHeight + 'px');
+  });
 </script>
 </script>
 
 
 <template>
 <template>
   <div>
   <div>
     <PageWrapper dense contentFullHeight contentClass="flex">
     <PageWrapper dense contentFullHeight contentClass="flex">
       <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
       <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <section class="p-4 pl-9 split-screen-mode flex flex-col flex-auto w-3/4 xl:w-4/5">
+      <section class="p-4 split-screen-mode flex flex-col flex-auto w-3/4 xl:w-4/5">
         <div class="p-3 bg-light-50 flex justify-between mb-4 dark:bg-dark-900">
         <div class="p-3 bg-light-50 flex justify-between mb-4 dark:bg-dark-900">
           <div class="flex gap-4 cursor-pointer items-center">
           <div class="flex gap-4 cursor-pointer items-center">
             <div
             <div
@@ -247,6 +235,7 @@
         </div>
         </div>
         <section ref="videoContainer" class="flex-auto">
         <section ref="videoContainer" class="flex-auto">
           <List
           <List
+            ref="listEl"
             :loading="loading"
             :loading="loading"
             :data-source="cameraList"
             :data-source="cameraList"
             class="bg-light-50 w-full h-full dark:bg-dark-900 split-mode-list"
             class="bg-light-50 w-full h-full dark:bg-dark-900 split-mode-list"
@@ -264,24 +253,12 @@
                     v-if="!item.placeholder"
                     v-if="!item.placeholder"
                     class="bg-black w-full h-full overflow-hidden relative video-container"
                     class="bg-black w-full h-full overflow-hidden relative video-container"
                   >
                   >
-                    <Spin v-show="!item.isTransform" :spinning="!item.isTransform">
-                      <div class="bg-black text-light-50"> </div>
-                    </Spin>
-                    <VideoPlay
-                      v-show="item.isTransform"
-                      @loadstart="handleLoadStart(item)"
-                      @loadeddata="handleLoadData(item)"
-                      v-bind="options"
-                      :src="item.videoUrl"
-                      :title="item.name"
-                      :type="item.type"
+                    <Spin
+                      class="!absolute top-1/2 left-1/2 transform -translate-1/2"
+                      v-show="!item.isTransform"
+                      :spinning="!item.isTransform"
                     />
                     />
-                    <div
-                      v-if="item.isTransform && isDef(item.canPlay) && !item.canPlay"
-                      class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black"
-                    >
-                      视频加载出错了！
-                    </div>
+                    <BasicVideoPlay v-if="item.isTransform" :options="item.videoPlayerOptions" />
                     <div
                     <div
                       class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
                       class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
@@ -313,24 +290,6 @@
     height: 100%;
     height: 100%;
   }
   }
 
 
-  .split-screen-mode:deep(.d-player-wrap) {
-    width: 100%;
-    height: 100%;
-  }
-
-  .split-screen-mode:deep(.ant-tabs-tab-active) {
-    border-bottom: 1px solid #eee;
-  }
-
-  .split-screen-mode:deep(video) {
-    position: absolute;
-    height: calc(100%) !important;
-  }
-
-  .split-screen-mode:deep(.d-player-control) {
-    z-index: 99;
-  }
-
   .video-container {
   .video-container {
     .video-container-mask {
     .video-container-mask {
       opacity: 0;
       opacity: 0;
@@ -344,8 +303,6 @@
       }
       }
 
 
       .video-container-error-msk {
       .video-container-error-msk {
-        // opacity: 0;
-        // visibility: hidden;
         color: #000;
         color: #000;
       }
       }
     }
     }
@@ -363,7 +320,6 @@
 
 
   .split-mode-list:deep(.ant-col) {
   .split-mode-list:deep(.ant-col) {
     width: 100%;
     width: 100%;
-    // height: var(--height);
     height: 100%;
     height: 100%;
   }
   }
 </style>
 </style>

@@ -173,8 +173,8 @@ export const formSchema: QFormSchema[] = [
   {
   {
     field: 'videoUrl',
     field: 'videoUrl',
     label: '视频流',
     label: '视频流',
-    required: true,
     component: 'Input',
     component: 'Input',
+    required: true,
     ifShow({ values }) {
     ifShow({ values }) {
       return values.accessMode === AccessMode.ManuallyEnter;
       return values.accessMode === AccessMode.ManuallyEnter;
     },
     },
@@ -182,7 +182,7 @@ export const formSchema: QFormSchema[] = [
       placeholder: '请输入视频流',
       placeholder: '请输入视频流',
       maxLength: 255,
       maxLength: 255,
     },
     },
-    rules: [...CameraVideoUrl, ...MediaTypeValidate, { required: true, message: '视频流是必填项' }],
+    rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl, ...MediaTypeValidate],
   },
   },
 
 
   {
   {

 <template>
 <template>
-  <div class="organization-tree flex relative">
-    <div class="cursor-pointer flex py-4 fold-icon" :class="foldFlag ? 'absolute' : ''">
+  <div class="organization-tree flex relative items-center py-4" :class="foldFlag ? '' : 'pl-4'">
+    <div
+      class="cursor-pointer flex py-4 fold-icon absolute rounded svg:fill-gray-400 hover:bg-gray-200"
+      :class="foldFlag ? '' : '-right-4'"
+    >
       <div @click="handleFold">
       <div @click="handleFold">
-        <CaretRightOutlined :class="[foldFlag ? '' : 'rotate-180']" class="text-xl transform" />
+        <CaretRightOutlined
+          :class="[foldFlag ? '' : 'rotate-180']"
+          class="transform fill-gray-100"
+        />
       </div>
       </div>
     </div>
     </div>
-    <div
-      :style="{ width: foldFlag ? '0px' : '100%' }"
-      :class="[foldFlag ? '' : 'my-4 ml-2']"
-      class="bg-white mr-0 overflow-hidden"
-    >
+    <div :style="{ width: foldFlag ? '0px' : '100%' }" class="bg-white mr-0 overflow-hidden h-full">
       <BasicTree
       <BasicTree
         title="组织列表"
         title="组织列表"
         toolbar
         toolbar

@@ -161,7 +161,7 @@
 <template>
 <template>
   <PageWrapper dense contentFullHeight contentClass="flex">
   <PageWrapper dense contentFullHeight contentClass="flex">
     <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
     <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-    <section class="flex-auto pl-9 p-4 configuration-list">
+    <section class="flex-auto p-4 configuration-list">
       <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
       <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
         <BasicForm @register="registerForm" />
         <BasicForm @register="registerForm" />
       </div>
       </div>

@@ -4,6 +4,7 @@ import { deviceProfile, getGATEWAYdevice } from '/@/api/device/deviceManager';
 
 
 export enum TypeEnum {
 export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
   IS_GATEWAY = 'GATEWAY',
+  SENSOR = 'SENSOR',
 }
 }
 export const isGateWay = (type: string) => {
 export const isGateWay = (type: string) => {
   return type === TypeEnum.IS_GATEWAY;
   return type === TypeEnum.IS_GATEWAY;

@@ -5,46 +5,60 @@ import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { getCustomerList } from '/@/api/device/deviceManager';
 import { getCustomerList } from '/@/api/device/deviceManager';
 import { DescItem } from '/@/components/Description/index';
 import { DescItem } from '/@/components/Description/index';
 import moment from 'moment';
 import moment from 'moment';
+import { h } from 'vue';
+import { Button } from 'ant-design-vue';
+import { TypeEnum } from './data';
+
 // 设备详情的描述
 // 设备详情的描述
-export const descSchema: DescItem[] = [
-  {
-    field: 'createTime',
-    label: '创建时间',
-  },
-  {
-    field: 'name',
-    label: '设备名称',
-  },
-  {
-    field: 'label',
-    label: '设备标签',
-  },
-  {
-    field: 'deviceProfile.name',
-    label: '产品',
-  },
-  {
-    field: 'gatewayName',
-    label: '所属网关',
-    show: (data) => !!data.gatewayName,
-  },
-  {
-    field: 'deviceType',
-    label: '设备类型',
-    render: (text) => {
-      return text === DeviceTypeEnum.GATEWAY
-        ? '网关设备'
-        : text == DeviceTypeEnum.DIRECT_CONNECTION
-        ? '直连设备'
-        : '网关子设备';
+export const descSchema = (emit: EmitType): DescItem[] => {
+  return [
+    {
+      field: 'createTime',
+      label: '创建时间',
     },
     },
-  },
-  {
-    field: 'description',
-    label: '描述',
-    span: 2,
-  },
-];
+    {
+      field: 'name',
+      label: '设备名称',
+    },
+    {
+      field: 'label',
+      label: '设备标签',
+    },
+    {
+      field: 'deviceProfile.name',
+      label: '产品',
+      render(val, data) {
+        if (TypeEnum.SENSOR !== data.deviceType) return val;
+        return h(
+          Button,
+          { type: 'link', style: { padding: 0 }, onClick: () => emit('open-gateway-device', data) },
+          { default: () => val }
+        );
+      },
+    },
+    {
+      field: 'gatewayName',
+      label: '所属网关',
+      show: (data) => !!data.gatewayName,
+    },
+    {
+      field: 'deviceType',
+      label: '设备类型',
+      render: (text) => {
+        return text === DeviceTypeEnum.GATEWAY
+          ? '网关设备'
+          : text == DeviceTypeEnum.DIRECT_CONNECTION
+          ? '直连设备'
+          : '网关子设备';
+      },
+    },
+    {
+      field: 'description',
+      label: '描述',
+      // span: 2,
+    },
+  ];
+};
 
 
 // 实时数据表格
 // 实时数据表格
 export const realTimeDataColumns: BasicColumn[] = [
 export const realTimeDataColumns: BasicColumn[] = [

@@ -10,7 +10,11 @@
   >
   >
     <Tabs v-model:activeKey="activeKey" :size="size">
     <Tabs v-model:activeKey="activeKey" :size="size">
       <TabPane key="1" tab="详情">
       <TabPane key="1" tab="详情">
-        <Detail ref="deviceDetailRef" :deviceDetail="deviceDetail" />
+        <Detail
+          ref="deviceDetailRef"
+          :deviceDetail="deviceDetail"
+          @open-gateway-device="handleOpenGatewayDevice"
+        />
       </TabPane>
       </TabPane>
       <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
       <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
         <RealTimeData :deviceDetail="deviceDetail" />
         <RealTimeData :deviceDetail="deviceDetail" />
@@ -67,7 +71,7 @@
       TBoxDetail,
       TBoxDetail,
       HistoryData,
       HistoryData,
     },
     },
-    emits: ['reload', 'register', 'openTbDeviceDetail'],
+    emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {
     setup(_props, { emit }) {
       const activeKey = ref('1');
       const activeKey = ref('1');
       const size = ref('small');
       const size = ref('small');
@@ -92,6 +96,10 @@
       const handleOpenTbDeviceDetail = (data: { id: string; tbDeviceId: string }) => {
       const handleOpenTbDeviceDetail = (data: { id: string; tbDeviceId: string }) => {
         emit('openTbDeviceDetail', data);
         emit('openTbDeviceDetail', data);
       };
       };
+
+      const handleOpenGatewayDevice = (data: { gatewayId: string; tbDeviceId: string }) => {
+        emit('openGatewayDeviceDetail', { id: data.gatewayId });
+      };
       return {
       return {
         size,
         size,
         activeKey,
         activeKey,
@@ -101,6 +109,7 @@
         deviceDetailRef,
         deviceDetailRef,
         tbDeviceId,
         tbDeviceId,
         handleOpenTbDeviceDetail,
         handleOpenTbDeviceDetail,
+        handleOpenGatewayDevice,
       };
       };
     },
     },
   });
   });

@@ -92,10 +92,11 @@
         required: true,
         required: true,
       },
       },
     },
     },
-    setup(props) {
+    emits: ['open-gateway-device'],
+    setup(props, { emit }) {
       const [register] = useDescription({
       const [register] = useDescription({
         layout: 'vertical',
         layout: 'vertical',
-        schema: descSchema,
+        schema: descSchema(emit),
         column: 2,
         column: 2,
       });
       });
 
 

@@ -152,9 +152,12 @@
       <DeviceDetailDrawer
       <DeviceDetailDrawer
         @register="registerDetailDrawer"
         @register="registerDetailDrawer"
         @open-tb-device-detail="handleOpenTbDeviceDetail"
         @open-tb-device-detail="handleOpenTbDeviceDetail"
+        @open-gateway-device-detail="handleOpenGatewayDetail"
       />
       />
       <DeviceDetailDrawer @register="registerTbDetailDrawer" />
       <DeviceDetailDrawer @register="registerTbDetailDrawer" />
 
 
+      <DeviceDetailDrawer @register="registerGatewayDetailDrawer" />
+
       <DeviceModal @register="registerModal" @success="handleSuccess" @reload="handleSuccess" />
       <DeviceModal @register="registerModal" @success="handleSuccess" @reload="handleSuccess" />
       <CustomerModal @register="registerCustomerModal" @reload="handleReload" />
       <CustomerModal @register="registerCustomerModal" @reload="handleReload" />
     </PageWrapper>
     </PageWrapper>
@@ -218,6 +221,7 @@
       const [registerCustomerModal, { openModal: openCustomerModal }] = useModal();
       const [registerCustomerModal, { openModal: openCustomerModal }] = useModal();
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerTbDetailDrawer, { openDrawer: openTbDeviceDrawer }] = useDrawer();
       const [registerTbDetailDrawer, { openDrawer: openTbDeviceDrawer }] = useDrawer();
+      const [registerGatewayDetailDrawer, { openDrawer: openGatewayDetailDrawer }] = useDrawer();
 
 
       const [registerTable, { reload, setSelectedRowKeys, setProps }] = useTable({
       const [registerTable, { reload, setSelectedRowKeys, setProps }] = useTable({
         title: '设备列表',
         title: '设备列表',
@@ -329,6 +333,10 @@
         openTbDeviceDrawer(true, data);
         openTbDeviceDrawer(true, data);
       };
       };
 
 
+      const handleOpenGatewayDetail = (data: { id: string; tbDeviceId: string }) => {
+        openGatewayDetailDrawer(true, data);
+      };
+
       return {
       return {
         registerTable,
         registerTable,
         handleCreate,
         handleCreate,
@@ -354,6 +362,8 @@
         handleReload,
         handleReload,
         registerTbDetailDrawer,
         registerTbDetailDrawer,
         handleOpenTbDeviceDetail,
         handleOpenTbDeviceDetail,
+        handleOpenGatewayDetail,
+        registerGatewayDetailDrawer,
       };
       };
     },
     },
   });
   });

 <template>
 <template>
   <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="50%">
   <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="50%">
-    <Tabs :animated="true" v-model:activeKey="activeKey">
-      <TabPane forceRender key="1" tab="产品">
+    <Tabs :animated="true" v-model:activeKey="activeKey" @change="handlePanelChange">
+      <TabPane forceRender key="product" tab="产品">
         <div class="relative">
         <div class="relative">
           <DeviceConfigurationStep :ifShowBtn="false" ref="DevConStRef" />
           <DeviceConfigurationStep :ifShowBtn="false" ref="DevConStRef" />
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
         </div>
         </div>
       </TabPane>
       </TabPane>
-      <TabPane forceRender key="2" tab="传输配置">
+      <TabPane forceRender key="transport" tab="传输配置">
         <div class="relative">
         <div class="relative">
           <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" />
           <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" />
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
         </div>
         </div>
       </TabPane>
       </TabPane>
-      <TabPane forceRender key="3" tab="物模型管理">
+      <TabPane forceRender key="modelOfMatter" tab="物模型管理">
         <PhysicalModelManagementStep />
         <PhysicalModelManagementStep />
       </TabPane>
       </TabPane>
     </Tabs>
     </Tabs>
@@ -30,7 +30,11 @@
 
 
   defineEmits(['register']);
   defineEmits(['register']);
 
 
-  const activeKey = ref('1');
+  type ActiveKey = 'product' | 'transport' | 'modelOfMatter';
+
+  const activeKey = ref<ActiveKey>('product');
+
+  const record = ref<Recordable>({});
 
 
   const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
   const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
@@ -44,11 +48,14 @@
   };
   };
 
 
   const [register, {}] = useDrawerInner(async (data: Recordable) => {
   const [register, {}] = useDrawerInner(async (data: Recordable) => {
-    activeKey.value = '1';
-    const res = await deviceConfigGetDetail(data.record.id);
-    setDeviceConfFormData(res);
-    setTransConfFormData(res);
+    activeKey.value = 'product';
+    record.value = await deviceConfigGetDetail(data.record.id);
+    setDeviceConfFormData(unref(record));
   });
   });
+
+  const handlePanelChange = (activeKey: ActiveKey) => {
+    if (activeKey === 'transport') setTransConfFormData(unref(record));
+  };
 </script>
 </script>
 
 
 <style lang="less" scope></style>
 <style lang="less" scope></style>