From 10f0f5cbb8be4255165c9de0e83b45f86ac794b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Mon, 30 Jun 2025 14:23:57 +0800
Subject: [PATCH] =?UTF-8?q?tplink=E6=91=84=E5=83=8F=E5=A4=B4=E5=8F=98?=
 =?UTF-8?q?=E7=84=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../camera/components/CameraCommonForm.vue    |  54 ++--
 .../camera/components/CameraLeftTree.vue      |  24 +-
 .../camera/components/CameraOsdForm.vue       |  12 +-
 .../camera/components/CameraPictureConfig.vue |  54 ++--
 .../camera/components/CameraPreviewForm.vue   | 266 ++++++++++++++----
 .../camera/components/CameraPreviewModal.vue  |  12 +-
 .../camera/components/CameraRecordList.vue    |   1 +
 7 files changed, 309 insertions(+), 114 deletions(-)

diff --git a/src/views/iot/tplink/camera/components/CameraCommonForm.vue b/src/views/iot/tplink/camera/components/CameraCommonForm.vue
index f2d40c9..4c34cba 100644
--- a/src/views/iot/tplink/camera/components/CameraCommonForm.vue
+++ b/src/views/iot/tplink/camera/components/CameraCommonForm.vue
@@ -1,6 +1,6 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer>
       <template #detail>
         <a-row>
           <a-col :span="12">
@@ -241,24 +241,24 @@ const formRef = ref();
 const useForm = Form.useForm;
 const formData = reactive<Record<string, any>>({
   deviceIndex: '',//设备索引
-  streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+  streamType: 1,//码流类型 0 代表主码流，1 代码子码流
   //视频预览参数
   url: '',//预览通道对应的URL
   backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
   wsUrl: '',//用于建立ws连接传输视频帧信息
   wssUrl: '',//用于建立wss接传输视频帧信息
 
-  chroma: "0", //色度
-  luma: "0", //亮度
-  sharpness: "0", //锐度
-  saturation: "0", //饱和度
-  contrast: "0", //对比度
-  wd_gain: "0", //宽动态度
-  smartir_level: "0",//防过曝等级
+  chroma: 0, //色度
+  luma: 0, //亮度
+  sharpness: 0, //锐度
+  saturation: 0, //饱和度
+  contrast: 0, //对比度
+  wd_gain: 0, //宽动态度
+  smartir_level: 0,//防过曝等级
   wide_dynamic: "off",  //宽动态   "off"//关闭  "on"//开启
   smartir: "auto_ir",//防红外过曝："auto_ir_ae" //自动-增强模式   "auto_ir" //自动-标准模式   "manual"//手动——防过曝等级
   smartwtl: "auto_wtl",//白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
-  smartwtl_digital_level: "0",//白光等级
+  smartwtl_digital_level: 0,//白光等级
 
   flip_type: "center",//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
   night_vision_mode: "md_night_vision",//照明模式："wtl_night_vision"//白光照明 ；"inf_night_vision"//红外照明 ； "md_night_vision"//移动侦测全彩——出现白光强度
@@ -302,6 +302,10 @@ async function preview(deviceIndex, streamType, url) {
     formData.wssUrl = res.wssUrl;
     confirmLoading.value = false;
   });
+  if (player.value){
+    player.value.destroy().then(() => {
+    }); // 销毁
+  }
   const TumsPlayer = window['tums-player'].default;
   player.value = new TumsPlayer('video-container', {
     type: "rtsp", // 协议类型，rtsp
@@ -309,6 +313,8 @@ async function preview(deviceIndex, streamType, url) {
     // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
     socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
     pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
+    talkEnable: true,
+    useMultitrans: true,
   });
   let isPlaying = player.value.isPlaying();
   if (!isPlaying) {
@@ -324,9 +330,11 @@ async function preview(deviceIndex, streamType, url) {
  * 销毁
  */
 function destroy(player) {
+  console.log("commonDestroy");
   if (player) {
     player.value.destroy().then(() => {
     }); // 销毁
+    player.value = null;
   }
 }
 
@@ -341,20 +349,29 @@ function getCommon(deviceIndex) {
     "deviceIndex": deviceIndex,
     "type": "common"
   }).then(res => {
-    formData.chroma = res.chroma; //色度
-    formData.luma = res.luma; //亮度
-    formData.sharpness = res.sharpness; //锐度
-    formData.saturation = res.saturation; //饱和度
-    formData.contrast = res.contrast; //对比度
-    formData.wd_gain = res.wd_gain; //宽动态度
-    formData.smartir_level = res.smartir_level; //防过曝等级
+    console.log(res);
+    formData.chroma = strToInt(res.chroma); //色度
+    formData.luma = strToInt(res.luma); //亮度
+    formData.sharpness = strToInt(res.sharpness); //锐度
+    formData.saturation = strToInt(res.saturation); //饱和度
+    formData.contrast = strToInt(res.contrast); //对比度
+    formData.wd_gain = strToInt(res.wd_gain); //宽动态度
+    formData.smartir_level = strToInt(res.smartir_level); //防过曝等级
     formData.wide_dynamic = res.wide_dynamic;  //宽动态   "off"//关闭  "on"//开启
     formData.smartir = res.smartir; //防红外过曝："auto_ir_ae" //自动-增强模式   "auto_ir" //自动-标准模式   "manual"//手动——防过曝等级
     formData.smartwtl = res.smartwtl; //白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
-    formData.smartwtl_digital_level = res.smartwtl_digital_level; //白光等级
+    formData.smartwtl_digital_level = strToInt(res.smartwtl_digital_level); //白光等级
   });
 }
 
+function strToInt(val){
+  if(val!=null&&isFinite(val)){
+    return Number(val);
+  }else{
+    return val;
+  }
+}
+
 /**
  * 获取照明设置信息
  */
@@ -423,6 +440,7 @@ onMounted(() => {
   watch(
     () => props.data,
     async () => {
+      console.log(props.data);
       formData.deviceIndex = props.data.deviceIndex;
       getCommon(formData.deviceIndex);
       getSwitch(formData.deviceIndex);
diff --git a/src/views/iot/tplink/camera/components/CameraLeftTree.vue b/src/views/iot/tplink/camera/components/CameraLeftTree.vue
index 12ff870..64549bf 100644
--- a/src/views/iot/tplink/camera/components/CameraLeftTree.vue
+++ b/src/views/iot/tplink/camera/components/CameraLeftTree.vue
@@ -3,7 +3,7 @@
       <a-spin :spinning="syncoading">
       <div class="j-table-operator" style="width: 100%">
         <a-button preIcon="ant-design:sync-outlined" @click="loadRootTreeData">刷新</a-button>
-<!--        <a-button type="primary" preIcon="ant-design:sync-outlined" @click="syncProjectInfo">同步项目</a-button>-->
+        <a-button type="primary" preIcon="ant-design:sync-outlined" @click="getProjectIpcDevice">同步设备</a-button>
 <!--        <template v-if="currentRegion !=null">-->
 <!--          <a-button preIcon="ant-design:sync-outlined" @click="syncRegionInfo">同步区域</a-button>-->
 <!--        </template>-->
@@ -36,7 +36,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMethods } from '/@/hooks/system/useMethods';
   const { createMessage } = useMessage();
-  import { queryProjectTreeSync, queryRegionTreeSync, syncProject, syncRegion } from '../camera.api';
+  import { syncProjectIpcDevice, queryProjectTreeSync, queryRegionTreeSync, syncProject, syncRegion } from '../camera.api';
 
   const emit = defineEmits(['select', 'rootTreeData']);
   const syncoading = ref<boolean>(false);
@@ -172,13 +172,21 @@
   }
 
   /**
-   * 同步项目
+   * 同步设备
    */
-  // async function syncProjectInfo(){
-  //   syncoading.value = true;
-  //   await syncProject();
-  //   await loadRootTreeData();
-  // }
+  async function getProjectIpcDevice(){
+    let data = currentRegion.value;
+    if (data == null) {
+      createMessage.warning('请先选择一个区域');
+      return;
+    }
+    const record = {
+      projectId: data.projectId
+    };
+    await syncProjectIpcDevice(record);
+    currentRegion.value["timestamp"] = new Date().getTime();
+    emit('select', currentRegion.value);
+  }
 
   /**
    * 同步区域
diff --git a/src/views/iot/tplink/camera/components/CameraOsdForm.vue b/src/views/iot/tplink/camera/components/CameraOsdForm.vue
index 8890a21..be3ba57 100644
--- a/src/views/iot/tplink/camera/components/CameraOsdForm.vue
+++ b/src/views/iot/tplink/camera/components/CameraOsdForm.vue
@@ -1,6 +1,6 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer>
       <template #detail>
         <a-row>
           <a-col :span="24">
@@ -108,7 +108,7 @@
     weekEnabled: true,
     labelEnabled: true,
 
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
     //视频预览参数
     url: '',//预览通道对应的URL
     backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
@@ -220,6 +220,10 @@
       formData.wssUrl = res.wssUrl;
       confirmLoading.value=false;
     });
+    if (player.value){
+      player.value.destroy().then(() => {
+      }); // 销毁
+    }
     const TumsPlayer = window['tums-player'].default;
     player.value = new TumsPlayer('video-container', {
       type: "rtsp", // 协议类型，rtsp
@@ -227,6 +231,8 @@
       // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
       socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
       pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
+      talkEnable: true,
+      useMultitrans: true,
     });
     let isPlaying = player.value.isPlaying();
     if (!isPlaying) {
@@ -242,9 +248,11 @@
    * 销毁
    */
   function destroy(player){
+    console.log("osdDestroy");
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 
diff --git a/src/views/iot/tplink/camera/components/CameraPictureConfig.vue b/src/views/iot/tplink/camera/components/CameraPictureConfig.vue
index 55ae8bc..dbf0ce8 100644
--- a/src/views/iot/tplink/camera/components/CameraPictureConfig.vue
+++ b/src/views/iot/tplink/camera/components/CameraPictureConfig.vue
@@ -4,42 +4,39 @@
       v-model:activeKey="activeKey"
       tab-position="left"
       :style="{ height: '100%' }"
-      @tabScroll="callback"
     >
-      <a-tab-pane :key="1" tab="画面显示">
+      <a-tab-pane key="A" tab="画面显示">
         <a-tabs
           v-model:activeKey="oneChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="视频显示">
-            <div class="scrollable" v-if="oneChildActiveKey==1">
+          <a-tab-pane key="A1" tab="视频显示">
+            <div class="scrollable" v-if="oneChildActiveKey=='A1'">
               <CameraCommonForm :data="cameraData"></CameraCommonForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="OSD">
-            <div class="scrollable" v-if="oneChildActiveKey==2">
+          <a-tab-pane key="A2" tab="OSD">
+            <div class="scrollable" v-if="oneChildActiveKey=='A2'">
               <CameraOsdForm :data="cameraData"></CameraOsdForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="3" tab="码流参数">
-            <div class="scrollable" v-if="oneChildActiveKey==3">
+          <a-tab-pane key="A3" tab="码流参数">
+            <div class="scrollable" v-if="oneChildActiveKey=='A3'">
               <CameraBitrateForm :data="cameraData"></CameraBitrateForm>
             </div>
           </a-tab-pane>
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="2" tab="事件侦测">
+      <a-tab-pane key="B" tab="事件侦测">
         <a-tabs
           v-model:activeKey="twoChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="镜头遮挡">
+          <a-tab-pane key="B1" tab="镜头遮挡">
             <div class="scrollable">
               <CameraBlockForm :data="cameraData"></CameraBlockForm>
             </div>
@@ -67,40 +64,38 @@
 <!--          </a-tab-pane>-->
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="3" tab="报警设备">
+      <a-tab-pane key="C" tab="报警设备">
         <a-tabs
           v-model:activeKey="threeChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="白光报警">
-            <div class="scrollable" v-if="threeChildActiveKey==1">
+          <a-tab-pane key="C1" tab="白光报警">
+            <div class="scrollable" v-if="threeChildActiveKey=='C1'">
               <CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="声音报警">
-            <div class="scrollable" v-if="threeChildActiveKey==2">
+          <a-tab-pane key="C2" tab="声音报警">
+            <div class="scrollable" v-if="threeChildActiveKey=='C2'">
               <CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm>
             </div>
           </a-tab-pane>
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="4" tab="录像管理">
+      <a-tab-pane key="D" tab="录像管理">
         <a-tabs
           v-model:activeKey="fourChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="MP4转发FTP">
+          <a-tab-pane key="D1" tab="MP4转发FTP">
             <div class="scrollable">
               <CameraUploadForm :data="cameraData"></CameraUploadForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="当天录像">
+          <a-tab-pane key="D2" tab="当天录像">
             <div class="scrollable">
               <CameraRecordList :data="cameraData" />
             </div>
@@ -119,7 +114,7 @@
 </template>
 
 <script lang="ts" name="iot-nuIotCameraInfo" setup>
-  import { ref, onMounted, reactive } from "vue";
+import {ref, onMounted, reactive, onUnmounted} from "vue";
   import { useRouter } from 'vue-router';
   import type { TabsProps } from 'ant-design-vue';
   import { useListPage } from "@/hooks/system/useListPage";
@@ -148,10 +143,10 @@
     ip: '' ,//IP
   });
   const cameraData = ref({});
-  const activeKey = ref(1);
-  const oneChildActiveKey = ref(1);
-  const twoChildActiveKey = ref(1);
-  const threeChildActiveKey = ref(1);
+  const activeKey = ref('A');
+  const oneChildActiveKey = ref('A1');
+  const twoChildActiveKey = ref('B1');
+  const threeChildActiveKey = ref('C1');
 
   const imageData = reactive<Record<string, any>>({
     //画面显示配置
@@ -191,6 +186,7 @@
   // }
 
   onMounted(()=>{
+    console.log(router.currentRoute.value.query);
     formData.deviceIndex = router.currentRoute.value.query.deviceIndex;
     formData.parentId = router.currentRoute.value.query.parentId;
     formData.multitrans = router.currentRoute.value.query.multitrans;
@@ -204,7 +200,11 @@
     cameraData.value.multitrans = formData.multitrans;
     cameraData.value.scale = formData.scale;
     cameraData.value.parentId = formData.parentId;
+    console.log(cameraData);
   })
+  // onUnmounted(()=>{
+  //
+  // })
 
 </script>
 
diff --git a/src/views/iot/tplink/camera/components/CameraPreviewForm.vue b/src/views/iot/tplink/camera/components/CameraPreviewForm.vue
index fd3567d..9303ca5 100644
--- a/src/views/iot/tplink/camera/components/CameraPreviewForm.vue
+++ b/src/views/iot/tplink/camera/components/CameraPreviewForm.vue
@@ -4,63 +4,107 @@
       <a-col :span="24">
         <div id="video-container"></div>
       </a-col>
-      <a-col :span="24" style="padding: 5px;">
-        <span style="margin-left: 5px;" v-show="!izPlaying">
-          <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="izPlaying">
-          <a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button>
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
-        </span>
-<!--        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
-        </span>-->
-        <span style="margin-left: 5px;" v-show="!izPhone">
-          <a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="izPhone">
-          <a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button>
-        </span>
-        <span style="margin-left: 15px;">分屏
-          <a-select
-            ref="select"
-            v-model:value="fishEyeDisplayMode"
-            style="width: 120px"
-            @focus="focus"
-            @change="setFishEyeDisplayMode"
-          >
-            <a-select-option value="ORIGIN">原图</a-select-option>
-            <a-select-option value="FISHEYE_360D">360全景</a-select-option>
-            <a-select-option value="FISHEYE_180D">180全景</a-select-option>
-            <a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option>
-            <a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
-          </a-select>
-        </span>
-      </a-col>
-      <a-col :span="24" style="padding: 5px;">
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="!izRecording">
-          <a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="izRecording">
-          <a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
-        </span>
-        <span style="margin-left: 15px;">画面翻转
-          <a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)">
-            <a-select-option value="off">关闭</a-select-option>
-            <a-select-option value="left_and_right">左右</a-select-option>
-            <a-select-option value="up_and_down">上下</a-select-option>
-            <a-select-option value="center">中心</a-select-option>
-          </a-select>
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
-        </span>
+      <a-col :span="24">
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;" v-show="!izPlaying">
+            <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="izPlaying">
+            <a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
+          </span>
+  <!--        <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
+          </span>-->
+          <span style="margin-left: 5px;" v-show="!izPhone">
+            <a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="izPhone">
+            <a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button>
+          </span>
+          <span style="margin-left: 15px;">分屏
+            <a-select
+              ref="select"
+              v-model:value="fishEyeDisplayMode"
+              style="width: 120px"
+              @focus="focus"
+              @change="setFishEyeDisplayMode"
+            >
+              <a-select-option value="ORIGIN">原图</a-select-option>
+              <a-select-option value="FISHEYE_360D">360全景</a-select-option>
+              <a-select-option value="FISHEYE_180D">180全景</a-select-option>
+              <a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option>
+              <a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
+            </a-select>
+          </span>
+        </a-col>
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="!izRecording">
+            <a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="izRecording">
+            <a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
+          </span>
+          <span style="margin-left: 15px;">画面翻转
+            <a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)" style="width: 80px;">
+              <a-select-option value="off">关闭</a-select-option>
+              <a-select-option value="left_and_right">左右</a-select-option>
+              <a-select-option value="up_and_down">上下</a-select-option>
+              <a-select-option value="center">中心</a-select-option>
+            </a-select>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
+          </span>
+        </a-col>
+        <a-col :span="24">
+          <a-col :span="24" style="padding: 5px;display: flex;">
+            <span style="margin-left: 5px;">
+              变焦
+            </span>
+            <span style="margin-left: 5px;">
+<!--              <a-button :disabled="formData.zoom<=1" preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>-->
+              <a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>
+            </span>
+              <span style="margin-left: 5px;">
+<!--              <a-button :disabled="formData.zoom>=4" preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>-->
+              <a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>
+            </span>
+<!--            <span style="margin-left: 5px;width: 60%">
+              <a-slider v-model:value="formData.zoom" :min="1.0" :max="4.0" :step="0.2" :marks="{1:1.0,2:2.0,3:3.0,4:4.0}" @afterChange="(value) => changeZoom(value)" />
+            </span>
+            <span style="margin-left: 5px;">
+              <a-input-number v-model:value="formData.zoom" :min="1" :max="4" @change="(value) => changeZoom(value)" :disabled="true"/>
+            </span>-->
+          </a-col>
+        </a-col>
       </a-col>
+<!--      <a-col :span="4">
+        <table style="width: 102px">
+          <tbody>
+          <tr>
+            <td></td>
+            <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1)" @mouseup="moveCtrl(1,0)"></a-button></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1)" @mouseup="moveCtrl(3,0)"></a-button></td>
+            <td><a-button preIcon="ant-design:compress-outlined"></a-button></td>
+            <td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1)" @mouseup="moveCtrl(5,0)"></a-button></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1)" @mouseup="moveCtrl(7,0)"></a-button></td>
+            <td></td>
+          </tr>
+          </tbody>
+        </table>
+      </a-col>-->
     </a-row>
   </a-spin>
 </template>
@@ -76,7 +120,8 @@
     getMultitransUrl,
     getPreviewUrl,
     setImageCommon,
-    testAudio
+    testAudio,
+    motionCtrl
   } from "../camera.api";
 
   const props = defineProps({
@@ -108,7 +153,8 @@
     wssUrl: '',//用于建立wss接传输视频帧信息
 
     flip_type: '',//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
-
+    zoom: 1, //变焦
+    sliderValue : 1,//滑动条的值
   });
   const { createMessage } = useMessage();
   const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
@@ -328,6 +374,78 @@
     izPhone.value = false;
   }
 
+
+  /**
+   * 缩放
+   */
+  function zoomInOut(type){
+    let delayTime = 6000;
+    if(type == 'in'){
+      formData.zoom = formData.zoom+0.4;
+      if(formData.zoom > 4){
+        formData.zoom = 4;
+      }
+      formData.sliderValue = formData.zoom;
+      moveCtrl(10,1,1);
+      if(formData.sliderValue<=2){
+        delayTime = 0.4*6000;
+      }else{
+        delayTime = 0.2*6000;
+      }
+      delayExecute(moveCtrl,[10,0,1],delayTime);
+    }else{
+      formData.zoom = formData.zoom-0.4;
+      if(formData.zoom < 1){
+        formData.zoom = 1;
+      }
+      formData.sliderValue = formData.zoom;
+      moveCtrl(9,1,1);
+      if(formData.sliderValue<=2){
+        delayTime = 0.4*6000;
+      }else{
+        delayTime = 0.2*6000;
+      }
+      delayExecute(moveCtrl,[9,0,1],delayTime);
+    }
+  }
+
+  /**
+   * 变焦
+   */
+  function changeZoom(value){
+    if(formData.sliderValue <= value){
+      moveCtrl(10,1,1);
+      let delayTime = value - formData.sliderValue;
+      formData.sliderValue = value;
+      delayExecute(moveCtrl,[10,0,1],delayTime*4500);
+    }else{
+      moveCtrl(9,1,1);
+      let delayTime = formData.sliderValue - value;
+      formData.sliderValue = value;
+      delayExecute(moveCtrl,[9,0,1],delayTime*4500);
+    }
+
+  }
+
+  /**
+   * 控制球机
+   */
+  function moveCtrl(direction,startOrNot,speed){
+    let params = {
+      "deviceIndex": formData.deviceIndex,
+      "direction": direction,
+      "startOrNot": startOrNot,
+      "speed": speed,
+    };
+    motionCtrl(params);
+  }
+
+  function delayExecute(fn, args, delay) {
+    setTimeout(() => {
+      fn.apply(this,args) // 使用apply传递参数数组
+    }, delay)
+  }
+
   /**
    * 销毁
    */
@@ -335,6 +453,7 @@
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 
@@ -354,4 +473,35 @@
     height: 500px;
     background: #1a1a1a;
   }
+
+  .ant-input-number {
+    width: 50px;
+  }
+
+  tbody {
+    padding: 0;
+    margin: 0;
+  }
+
+  tr {
+    padding: 0;
+    margin: 0;
+  }
+
+  td {
+    padding: 0;
+    margin: 0;
+  }
+
+  td button{
+    padding: 0;
+    margin: 0;
+    border-color:white;
+  }
+
+  td button:hover{
+    padding: 0;
+    margin: 0;
+    border-color:white !important;
+  }
 </style>
diff --git a/src/views/iot/tplink/camera/components/CameraPreviewModal.vue b/src/views/iot/tplink/camera/components/CameraPreviewModal.vue
index 8491d96..ff5c955 100644
--- a/src/views/iot/tplink/camera/components/CameraPreviewModal.vue
+++ b/src/views/iot/tplink/camera/components/CameraPreviewModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭" :bodyStyle="bodyStyle">
     <CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
   </j-modal>
 </template>
@@ -15,6 +15,10 @@
   const disableSubmit = ref<boolean>(false);
   const registerForm = ref();
   const emit = defineEmits(['register', 'success']);
+  const bodyStyle = ref<any>({
+    'height': 'auto',
+    'overflow-y': 'auto',
+  });
 
   // const player = ref();
 
@@ -63,5 +67,11 @@
   .jee-hidden {
     display: none !important;
   }
+
+  .ant-modal-body {
+    height: auto !important;
+    overflow: hidden !important;
+  }
+
 </style>
 <style lang="less" scoped></style>
diff --git a/src/views/iot/tplink/camera/components/CameraRecordList.vue b/src/views/iot/tplink/camera/components/CameraRecordList.vue
index 3cd32b1..f5fe0d8 100644
--- a/src/views/iot/tplink/camera/components/CameraRecordList.vue
+++ b/src/views/iot/tplink/camera/components/CameraRecordList.vue
@@ -98,6 +98,7 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
   function handlePlayback(record: Recordable) {
     record.scale = props.data.scale;
     record.multitrans = props.data.multitrans;
+    console.log(record.multitrans);
     if(record.multitrans=="1"){
       multitransModal.value.disableSubmit = true;
       multitransModal.value.edit(record);