修改摄像头样式

src/views/iot/tplink/camera/components/CameraPreviewForm copy.vue

@@ -0,0 +1,455 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <a-row>
+      <a-col :span="24">
+        <div id="video-container-preview"></div>
+      </a-col>
+      <a-col :span="20">
+        <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>
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;">
+            变焦
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
+          </span>
+        </a-col>
+      </a-col>
+      <a-col :span="4" v-show="formData.ptz == '1'">
+        <table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
+          <tbody>
+          <tr>
+            <td></td>
+            <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></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,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
+            <td></td>
+          </tr>
+          </tbody>
+        </table>
+      </a-col>
+    </a-row>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getValueType } from '/@/utils';
+  import { Form } from 'ant-design-vue';
+  import {
+    getImageCommon,
+    getMultitransUrl,
+    getPreviewUrl,
+    setImageCommon,
+    testAudio,
+    motionCtrl
+  } from "../camera.api";
+
+  const props = defineProps({
+    formDisabled: { type: Boolean, default: false },
+    formData: { type: Object, default: () => ({})},
+    formBpm: { type: Boolean, default: true }
+  });
+
+  const formRef = ref();
+  const player = ref();
+  const resolution = ref<string>('流畅');
+  const izPlaying = ref<boolean>(true);
+  const izRecording = ref<boolean>(false);
+  const izPhone = ref<boolean>(false);
+  const fishEyeDisplayMode = ref<string>('ORIGIN');
+  const flipType = ref<string>('off');
+  const useForm = Form.useForm;
+  const emit = defineEmits(['register', 'ok']);
+  const formData = reactive<Record<string, any>>({
+
+    //预览通道参数
+    deviceIndex: '',//设备索引
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
+
+    //视频预览参数
+    url: '',//预览通道对应的URL
+    backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
+    wsUrl: '',//用于建立ws连接传输视频帧信息
+    wssUrl: '',//用于建立wss接传输视频帧信息
+
+    flip_type: '',//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
+    zoom: 1, //变焦
+    sliderValue : 1,//滑动条的值
+    ptz : 0,//是否有云台
+    smartCode : 0,//是否可变焦
+  });
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+
+  //表单验证
+  const validatorRules = reactive({
+  });
+  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+
+  // 表单禁用
+  const disabled = computed(()=>{
+    if(props.formBpm === true){
+      if(props.formData.disabled === false){
+        return false;
+      }else{
+        return true;
+      }
+    }
+    return props.formDisabled;
+  });
+
+  /**
+   * 详情
+   */
+  async function edit(record) {
+    await nextTick(() => {
+      confirmLoading.value=true;
+      resetFields();
+      const tmpData = {};
+      Object.keys(formData).forEach((key) => {
+        if(record.hasOwnProperty(key)){
+          tmpData[key] = record[key]
+        }
+      })
+      //赋值
+      Object.assign(formData, tmpData);
+    });
+    createPreview();
+    getSwitch();
+  }
+
+  /**
+   * 创建预览
+   */
+  async function createPreview(){
+    await getPreviewUrl({"deviceIndex":formData.deviceIndex,"streamType":formData.streamType}).then(res=>{
+      formData.url = res.url;
+      formData.backupUrl = res.backupUrl;
+      formData.wsUrl = res.wsUrl;
+      formData.wssUrl = res.wssUrl;
+      confirmLoading.value=false;
+    });
+    if (player.value){
+      player.value.destroy().then(() => {
+      }); // 销毁
+      player.value = null;
+    }
+    const TumsPlayer = window['tums-player'].default;
+    player.value = new TumsPlayer('video-container-preview', {
+      type: "rtsp", // 协议类型，rtsp
+      url: formData.url, // 取流地址, getPreviewUrl接口获取
+      // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
+      socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
+      pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
+      talkEnable: true,
+      useMultitrans: true,
+    });
+
+    let isPlaying = player.value.isPlaying();
+    if (!isPlaying) {
+      if (player.value.isInit) {
+        player.value.start();
+      } else {
+        player.value.play();
+      }
+      izPlaying.value = true;
+    }
+  }
+
+  /**
+   * 切换超清/流程
+   */
+  function switchResolution(){
+    if(formData.streamType == 0){
+      resolution.value = '流畅';
+      formData.streamType = 1;
+    }else{
+      resolution.value = '超清';
+      formData.streamType = 0;
+    }
+    createMessage.info('正在切换至'+resolution.value);
+    createPreview();
+  }
+
+  /**
+   * 播放
+   */
+  function play(){
+    izPlaying.value = true;
+    player.value.play();
+  }
+
+  /**
+   * 暂停
+   */
+  function pause(){
+    izPlaying.value = false;
+    player.value.pause();
+  }
+
+  /**
+   * 截屏
+   */
+  function screenshot(){
+    player.value.screenshot();
+  }
+
+  /**
+   * 鱼眼画面显示模式
+   */
+  function setFishEyeDisplayMode(){
+    player.value.setFishEyeDisplayMode(fishEyeDisplayMode.value);
+  }
+
+  /**
+   * 获取画面翻转
+   */
+  function getSwitch(){
+    if(formData.deviceIndex==null){
+      return
+    }
+    getImageCommon({
+      "deviceIndex": formData.deviceIndex,
+      "type": "switch"
+    }).then(res=>{
+      formData.flip_type = res.flip_type; //画面镜像翻转
+    });
+  }
+
+  /**
+   * 画面翻转
+   */
+  function changeSwitch(attr,value){
+    let param = {};
+    param[attr] = value;
+    setImageCommon({
+      "deviceIndex": formData.deviceIndex,
+      "type": "switch",
+      "param": param
+    }).then(res=>{    });
+  }
+
+  /**
+   * 手动报警
+   */
+  function manualAlarm(){
+    let params = {
+      "deviceIndex": formData.deviceIndex,
+      "force": 1,
+      "id": '0'
+    };
+    testAudio(params);
+  }
+
+  /**
+   * 开始录制
+   */
+  function recordingStart(){
+    izRecording.value = true;
+    player.value.startRecording({micStream:true}).then((res) => {
+      // 设置成功，返回resolve
+    }).catch((errData) => {
+      // 设置失败，包括网络错误以及接口调用报错
+      // 具体错误见errData.error_code
+      createMessage.error('录制错误,'+errData.msg);
+    });
+  }
+
+  /**
+   * 结束录制
+   */
+  function recordingEnd(){
+    izRecording.value = false;
+    let fileName = formData.deviceIndex+'-'+(new Date().getTime());
+    player.value.stopRecording(fileName, true).then((res) => {
+      // 设置成功，返回resolve
+    }).catch((errData) => {
+      // 设置失败，包括网络错误以及接口调用报错
+      // 具体错误见errData.error_code
+      createMessage.error('录制错误,'+errData.msg);
+    });
+  }
+
+  /**
+   * 开始电话
+   */
+  function startPhone(){
+    getMultitransUrl({
+      "videoDevId":formData.deviceIndex
+    }).then(res=>{
+      player.value.startVoiceIntercom({
+        "url": res.url, // 该url为一次性 需要通过接口实时获取
+        "wssUrl": res.wssUrl,
+        "mode": "half_duplex"
+      });
+      izPhone.value = true;
+    });
+  }
+
+  /**
+   * 结束电话
+   */
+  function stopPhone(){
+    player.value.stopVoiceIntercom();
+    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 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)
+  }
+
+  /**
+   * 销毁
+   */
+  function destroy(){
+    if (player){
+      player.value.destroy().then(() => {
+      }); // 销毁
+      player.value = null;
+    }
+  }
+
+  defineExpose({
+    edit,
+    destroy
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+  #video-container {
+    padding: 0px 25px;
+    width: 600px;
+    height: 500px;
+    background: #1a1a1a;
+  }
+</style>

src/views/iot/tplink/camera/components/CameraPreviewForm.vue

@@ -2,10 +2,96 @@
   <a-spin :spinning="confirmLoading">
     <a-row>
       <a-col :span="24">
-        <div id="video-container-preview"></div>
+        <div id="video-container-preview" style="min-height: 400px;"></div>
       </a-col>
-      <a-col :span="20">
-        <a-col :span="24" style="padding: 5px;">
+      <!-- <a-col :span="24" style="margin-top: -120px;margin-left:40px;" v-show="formData.ptz == '1'"> -->
+      <a-col :span="24" style="margin-top: -120px;margin-left:40px;" >
+        <table style="width: 130px;height:96px;margin: 5px 0px 5px 0px;">
+          <tbody>
+          <tr>
+            <td></td>
+            <td style="width:100px;text-align:center;">
+              <div class="fxjImgUp" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></div>
+            </td>
+            <td></td>
+          </tr>
+          <tr>
+            <td style="width:90px;text-align:center;">
+              <div class="fxjImgLeft" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></div>
+            </td>
+            <td style="width:100px;text-align:center;">
+              <div class="fxjImgDown" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></div>
+            </td>
+            <td style="width:100px;text-align:center;">
+              <div class="fxjImgRight" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></div>
+           </td>
+          </tr>
+          </tbody>
+        </table>
+      </a-col> 
+      <a-col :span="24" style="text-align: center;margin-top: 15px;margin-bottom: 15px;">
+        <!-- 对讲、停止对讲 切换 -->
+        <!-- <img src="../../../../../assets/iot/monitor_1.png" class="buttonImg"/> -->
+        <span class="buttonSpan djImg" @click="startPhone" v-show="!izPhone"><span style="margin-left:30px;">对讲</span></span>
+        <span class="buttonSpan djImg" @click="stopPhone" v-show="izPhone"><span style="margin-left:30px;">结束</span></span>
+        <!-- 流畅、超清 切换 -->
+        <span class="buttonSpan qxdImg" @click="switchResolution"><span style="margin-left:30px;">{{ resolution }}</span></span>
+        <!-- 录制、结束录制 切换 -->
+        <span class="buttonSpan lzImg" @click="recordingStart" v-show="!izRecording"><span style="margin-left:30px;">录制</span></span>
+        <span class="buttonSpan lzImg" @click="recordingEnd" v-show="izRecording"><span style="margin-left:30px;">结束</span></span>
+
+        <span class="buttonSpan jtImg" @click="screenshot"><span style="margin-left:30px;">截图</span></span>
+        <span class="buttonSpan bjImg" @click="manualAlarm"><span style="margin-left:30px;">报警</span></span>
+        
+        <a-popover >
+            <template #content>
+              <div style="text-align: center;">
+                <div class="selectDiv" @click="setFishEyeDisplayMode('ORIGIN')">原图</div>
+                <div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_360D')">360全景</div>
+                <div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_180D')">180全景</div>
+                <div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_WIN_PLANE_TOP_QUAD')">四分屏</div>
+                <div class="selectDiv" @click="setFishEyeDisplayMode('FISHEYE_LONGITUDE')">全景拉伸</div>
+              </div>
+            </template>
+            <span class="buttonSpan fpImg"><span style="margin-left:30px;">分屏</span></span>
+        </a-popover>
+        <a-popover>
+            <template #content>
+              <div style="text-align: center;">
+                <div class="selectDiv" @click="changeSwitch('flip_type','off')">关闭</div>
+                <div class="selectDiv" @click="changeSwitch('flip_type','left_and_right')">左右</div>
+                <div class="selectDiv" @click="changeSwitch('flip_type','up_and_down')">上下</div>
+                <div class="selectDiv" @click="changeSwitch('flip_type','center')">中心</div>
+              </div>
+            </template>
+            <span class="buttonSpan hmxzImg"><span style="margin-left:30px;">画面旋转</span></span>
+          </a-popover>
+          <!-- <a-popover title="变焦">
+            <template #content>
+              <div style="line-height: 50px;">
+
+              <span style="margin-left: 5px;">
+                <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
+              </span>
+              <span style="margin-left: 5px;">
+                <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
+              </span>
+              <span style="margin-left: 5px;">
+                <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
+              </span>
+              <span style="margin-left: 5px;">
+                <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
+              </span>
+              </div>
+            </template>
+            <span class="buttonSpan">
+              <img src="../../../../../assets/iot/a1.png" class="buttonImg"/>变焦
+            </span>
+          </a-popover> -->
+      </a-col>
+
+
+      <!-- <a-col :span="24">
           <span style="margin-left: 5px;" v-show="!izPlaying">
             <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
           </span>
@@ -15,9 +101,6 @@
           <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>
@@ -39,8 +122,6 @@
               <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>
@@ -61,8 +142,6 @@
           <span style="margin-left: 5px;">
             <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
           </span>
-        </a-col>
-        <a-col :span="24" style="padding: 5px;">
           <span style="margin-left: 5px;">
             变焦
           </span>
@@ -78,29 +157,7 @@
           <span style="margin-left: 5px;">
             <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
           </span>
-        </a-col>
-      </a-col>
-      <a-col :span="4" v-show="formData.ptz == '1'">
-        <table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
-          <tbody>
-          <tr>
-            <td></td>
-            <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></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,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
-          </tr>
-          <tr>
-            <td></td>
-            <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
-            <td></td>
-          </tr>
-          </tbody>
-        </table>
-      </a-col>
+      </a-col> -->
     </a-row>
   </a-spin>
 </template>
@@ -275,8 +332,8 @@
   /**
    * 鱼眼画面显示模式
    */
-  function setFishEyeDisplayMode(){
-    player.value.setFishEyeDisplayMode(fishEyeDisplayMode.value);
+  function setFishEyeDisplayMode(value){
+    player.value.setFishEyeDisplayMode(value);
   }
 
   /**
@@ -452,4 +509,110 @@
     height: 500px;
     background: #1a1a1a;
   }
+  .buttonSpan{
+    display: inline-flex; align-items: flex-end;
+    margin-left: 20px;
+    border: 1px solid #f6faff;
+    padding: 5px 10px;
+  }
+  .buttonSpan:hover{
+    border: 1px solid #1ea0fa;
+    color: #1ea0fa;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+  .buttonImg{
+    width:20px;margin-right:10px;vertical-align: bottom;
+  }
+  .fxjImgUp{
+    width:50px;height: 50px;
+    margin-right:10px;vertical-align: bottom;
+    cursor: pointer;
+    border-radius: 5px;transform: rotate(270deg);
+    background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
+  }
+  .fxjImgUp:hover{
+    background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
+  }
+  .fxjImgLeft{
+    width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(180deg);
+    cursor: pointer;
+    background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
+  }
+  .fxjImgLeft:hover{
+    background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
+  }
+  .fxjImgDown{
+    width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(90deg);
+    cursor: pointer;
+    background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
+  }
+  .fxjImgDown:hover{
+    background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
+  }
+  .fxjImgRight{
+    width:50px;height: 50px;margin-right:10px;vertical-align: bottom;
+    cursor: pointer;
+    background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
+  }
+  .fxjImgRight:hover{
+    background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
+  }
+  
+  .selectDiv{
+    text-align: center;
+    border: 1px solid #f6faff;
+    padding: 3px 10px;
+    width: 100px;
+    margin-top:5px;
+  }
+  .selectDiv:hover{
+    border: 1px solid #a2a3a3;
+    background: #a2a3a3;
+    color:white;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+  .djImg{
+    background: url('../../../../../assets/iot/monitor_1.png') left/contain no-repeat;
+  }
+  .djImg:hover{
+    background: url('../../../../../assets/iot/monitor_1_1.png') left/contain no-repeat;
+  }
+  .qxdImg{
+    background: url('../../../../../assets/iot/monitor_5.png') left/contain no-repeat;
+  }
+  .qxdImg:hover{
+    background: url('../../../../../assets/iot/monitor_5_1.png') left/contain no-repeat;
+  }
+  .lzImg{
+    background: url('../../../../../assets/iot/monitor_4.png') left/contain no-repeat;
+  }
+  .lzImg:hover{
+    background: url('../../../../../assets/iot/monitor_4_1.png') left/contain no-repeat;
+  }
+  .jtImg{
+    background: url('../../../../../assets/iot/monitor_3.png') left/contain no-repeat;
+  }
+  .jtImg:hover{
+    background: url('../../../../../assets/iot/monitor_3_1.png') left/contain no-repeat;
+  }
+  .bjImg{
+    background: url('../../../../../assets/iot/monitor_8.png') left/contain no-repeat;
+  }
+  .bjImg:hover{
+    background: url('../../../../../assets/iot/monitor_8_1.png') left/contain no-repeat;
+  }
+  .fpImg{
+    background: url('../../../../../assets/iot/monitor_6.png') left/contain no-repeat;
+  }
+  .fpImg:hover{
+    background: url('../../../../../assets/iot/monitor_6_1.png') left/contain no-repeat;
+  }
+  .hmxzImg{
+    background: url('../../../../../assets/iot/monitor_7.png') left/contain no-repeat;
+  }
+  .hmxzImg:hover{
+    background: url('../../../../../assets/iot/monitor_7_1.png') left/contain no-repeat;
+  }
 </style>

src/views/iot/tplink/camera/components/CameraPreviewModal.vue

@@ -1,9 +1,16 @@
 <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="关闭"> -->
+      <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
     <div v-if="showCamera">
       <CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
     </div>
-  </j-modal>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
+    </template>
+  </a-drawer>
+  <!-- </j-modal> -->
 </template>
 
 <script lang="ts" setup>
@@ -12,7 +19,7 @@
   import JModal from '/@/components/Modal/src/JModal/JModal.vue';
 
   const title = ref<string>('');
-  const width = ref<number>(600);
+  const width = ref<string>('70%');
   const visible = ref<boolean>(false);
   const showCamera = ref<boolean>(false);
   const disableSubmit = ref<boolean>(false);