增加调整相机角度的控制盘

src/views/cameras/preview/components/CameraDirectionControl/CameraDirectionControl.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="cameraDirectionControlWrapper">
+    <div class="cameraDirectionControl">
+      <div class="roundCircle"></div>
+      <DirectionItem position="top" />
+      <DirectionItem position="right" />
+      <DirectionItem position="bottom" />
+      <DirectionItem position="left" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import DirectionItem from './DirectionItem.vue';
+</script>
+<style scoped>
+  .cameraDirectionControlWrapper {
+    bottom: 100px;
+    right: 0px;
+  }
+  .cameraDirectionControl {
+    width: 180px;
+    height: 180px;
+
+    position: relative;
+    .roundCircle {
+      background: #fff;
+      opacity: 0.4;
+      width: 180px;
+      height: 180px;
+      border-radius: 180px;
+    }
+  }
+</style>

src/views/cameras/preview/components/CameraDirectionControl/DirectionItem.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="sectorWrapper" :class="[props.position, { active: isActive }]" @click="handleClick">
+    <!-- 四分之一圆 -->
+    <div class="sector"></div>
+    <!-- 小三角形 -->
+    <div class="triangle"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  const props = defineProps<{ position: 'top' | 'right' | 'bottom' | 'left' }>();
+  const isActive = ref(false);
+  const handleClick = () => {
+    console.log('click');
+    isActive.value = true;
+    setTimeout(() => {
+      isActive.value = false;
+    }, 200);
+  };
+</script>
+<style scoped>
+  .sectorWrapper {
+    width: 90px;
+    height: 90px;
+    transform-origin: bottom right;
+    position: absolute;
+    cursor: pointer;
+    left: 0;
+    top: 0;
+    &.top {
+      transform: rotate(45deg);
+    }
+
+    &.right {
+      transform: rotate(135deg);
+    }
+
+    &.bottom {
+      transform: rotate(225deg);
+    }
+    &.left {
+      transform: rotate(315deg);
+    }
+    &.active {
+      .sector {
+        background-color: #1890ff;
+        opacity: 0.4;
+      }
+      .triangle {
+        border-bottom-color: #1677ff;
+      }
+    }
+  }
+  .sector {
+    width: 90px;
+    height: 90px;
+    border-radius: 90px 0 0 0;
+  }
+
+  .triangle {
+    width: 0;
+    height: 0;
+    border: 7px solid transparent;
+    border-bottom-color: #d8d8d8; /* 三角形的颜色 */
+    position: absolute;
+
+    top: 26px;
+    left: 26px;
+    transform: rotate(-43deg);
+  }
+</style>

src/views/cameras/preview/components/CameraParams/CameraParams.vue

@@ -69,7 +69,7 @@
       <el-input v-model="cameraParams.reservation" />
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="onSubmit">保存</el-button>
+      <el-button type="primary" @click="onSubmit" disabled>保存</el-button>
     </el-form-item>
   </el-form>
 </template>

src/views/cameras/preview/components/CameraViewSetting/CameraViewSetting.vue

@@ -17,8 +17,14 @@
 
       <div class="cameraVideo"><CameraLiveVideo /></div>
       <div class="presetAddWrapper">
-        <!-- <CameraDirectionControl /> -->
-        <ElButton type="primary" @click="handleAddPreset" size="small">添加预置位</ElButton>
+        <CameraDirectionControl />
+        <ElButton
+          type="primary"
+          @click="handleAddPreset"
+          size="small"
+          style="margin-top: 20px; width: 100px"
+          >添加预置位</ElButton
+        >
         <AddPresetModal
           v-if="addPresetModalVisible"
           @close="handleClose"
@@ -50,6 +56,7 @@
   import AlgorithmsSetting from '../AlgorithmsSetting/AlgorithmsSetting.vue';
   import CameraParams from '../CameraParams/CameraParams.vue';
   import { ElMessage } from 'element-plus';
+  import CameraDirectionControl from '../CameraDirectionControl/CameraDirectionControl.vue';
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
@@ -199,6 +206,9 @@
     position: absolute;
     bottom: 50px;
     right: 50px;
+    flex-direction: column;
+    display: flex;
+    align-items: center;
     z-index: 10;
   }