调整详情和修改地图渲染功能

chenyao

2025-02-24 a0f008e1b176ab0c844bc4721f282e12d18f855c

 src/views/components/ptzControl.vue

@@ -1,9 +1,9 @@
<template>
  <div class="ptz-control">
    <div class="ptz" :class="isPtz?'actived-blue':''">
      <img src="@/assets/images/yt.png" @touchstart="ptzClick" />
    </div>
    <div class="btn-group">
      <div class="btn-item" :class="isPtz?'actived-blue':''" @touchstart="ptzClick">
        <img src="@/assets/images/yt.png" />
      </div>
      <div class="btn-item" @touchstart="onTakeCameraPhoto">
        <img src="@/assets/images/photo.png" />
      </div>
@@ -19,20 +19,16 @@
      <div class="btn-item" @touchstart="onZoom(false)">
        <img src="@/assets/images/suoxiao.png" />
      </div>
      <!-- <div class="btn-item" @touchstart="onChangeD">
        <img v-if="is2d" src="@/assets/images/stand.png" />
        <img v-else src="@/assets/images/satellite.png" />
      <!-- <div class="btn-item">
        <img v-if="!isBigVideo" src="@/assets/images/fang.png" @touchstart="changeModelVideo(true)" />
        <img v-else src="@/assets/images/suo.png" @touchstart="changeModelVideo(false)" />
      </div> -->
    </div>
    <div class="circle-box" v-show="isPtz">
      <div class="top" @click="ytClick('up')" @mousedown="onMouseDown(KeyCode.ARROW_UP)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_UP)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="left" @click="ytClick('left')" @mousedown="onMouseDown(KeyCode.ARROW_LEFT)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_LEFT)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="bottom" @click="ytClick('down')" @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_DOWN)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="right" @click="ytClick('right')" @mousedown="onMouseDown(KeyCode.ARROW_RIGHT)" @mouseup="onMouseUp"
        @touchstart="onMouseDown(KeyCode.ARROW_RIGHT)" @touchend="onMouseUp" @mouseleave="onMouseUp"></div>
      <div class="top" @click="ytClick('up')"></div>
      <div class="left" @click="ytClick('left')"></div>
      <div class="bottom" @click="ytClick('down')"></div>
      <div class="right" @click="ytClick('right')"></div>
      <div class="reset-center" @click="onResetGimbal(0)">
        <el-icon><Refresh /></el-icon>
      </div>
@@ -53,6 +49,7 @@
import { useDroneControlWsEvent } from '@/utils/websocket/drone-ws-control'
import cesiumOperation from '@/utils/cesium-tsa.js';
import { useMyStore } from '@/store'
import { fa } from 'element-plus/es/locale';

const { loadLAYER } = cesiumOperation()

@@ -81,6 +78,10 @@
    required: true,
  }
});
const emitEvents = defineEmits(['changeModelVideo'])

// 放大和缩小
// let isBigVideo = ref<Boolean>(false)

// 录像
let isCameraRecording = ref<Boolean>(false)
@@ -238,7 +239,6 @@
}
// 开始录像
const onStartCameraRecording = () => {
  console.log('设施',payloadSelectInfo.controlSource)
  if (!checkPayloadAuth(payloadSelectInfo.controlSource)) {
    return
  }
@@ -393,40 +393,20 @@
  } 
}

// 视频大小的缩放
// const changeModelVideo = (value:Boolean) => {
//   isBigVideo.value = value
//   emitEvents('changeModelVideo', value)
// }

</script>

<style lang="scss" scoped>
.ptz-control {
  .ptz {
    position: fixed;
    top: 3rem;
    left: 0.2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 1rem;
    pointer-events: all;
    img {
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  .actived-blue {
    background-image: none;
    background-color: rgba(23, 124, 198, 0.7);
  }
  .btn-group {
    position: fixed;
    top: 5.8rem;
    left: 0.2rem;
    // padding: 4px;
    position: absolute;
    right: 0.2rem;
    bottom: 0rem;
    .btn-item {
      width: 2rem;
      height: 2rem;
@@ -437,12 +417,16 @@
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 1rem;
      margin-bottom: 0.5rem;
      pointer-events: all;
      img {
        width: 1.6rem;
        height: 1.6rem;
      }
    }
    .actived-blue {
      background-image: none;
      background-color: rgba(23, 124, 198, 0.7);
    }
  }
  .circle-box {
@@ -452,8 +436,8 @@
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 4rem;
    top: 20%;
    left: 1%;

    .top,
    .left,