将预置位挪到画面的底部

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

@@ -8,7 +8,6 @@
         </el-icon>
       </el-tooltip>
 
-      <PresetSelect />
       <FenceToolbar
         :style="{ visibility: drawable ? 'visible' : 'hidden' }"
         @remove="handleRemove"
@@ -50,6 +49,10 @@
       <AddPresetModal v-if="addPresetModalVisible" @close="handleClose" @ok="handleAddPresetOk" />
     </div>
   </div>
+  <div class="presetWrapper">
+    <PresetSelect />
+  </div>
+
   <div class="cameraParamsSettingWrapper">
     <!-- <div class="cameraParamsSetting">
       <CameraParams />
@@ -244,4 +247,12 @@
     position: relative;
     z-index: 9;
   }
+
+  .presetWrapper {
+    padding: 20px;
+    padding-left: 25px;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+  }
 </style>

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

@@ -1,9 +1,12 @@
 <template>
   <div class="toolbar">
-    <ToolbarIcon :src="deleteIcon" :active="false" @click="emits('remove')" />
-    <ToolbarIcon :src="saveIcon" :active="false" @click="emits('save')" />
+    <template v-if="props.isEdit">
+      <ToolbarIcon :src="deleteIcon" :active="false" @click="emits('remove')" tip="删除电子围栏" />
+      <ToolbarIcon :src="saveIcon" :active="false" @click="emits('save')" tip="保存电子围栏" />
+    </template>
+
     <ElButton type="primary" size="small" @click="toggleEdit">{{
-      props.isEdit ? '退出编辑' : '编辑'
+      props.isEdit ? '退出编辑' : '编辑电子围栏'
     }}</ElButton>
     <div class="fenceDrawingTip" v-if="isEdit"
       >{{ cameraAlgoStore.selectedAlgoDetail?.algoInfo?.name }}算法绘制中</div

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

@@ -1,8 +1,10 @@
 <template>
-  <img :src="props.src" alt="" class="toolbarIcon" :class="props.active ? 'active' : ''" />
+  <ElTooltip :content="props.tip">
+    <img :src="props.src" alt="" class="toolbarIcon" :class="props.active ? 'active' : ''" />
+  </ElTooltip>
 </template>
 <script lang="ts" setup>
-  const props = defineProps<{ active: boolean; src: string }>();
+  const props = defineProps<{ active: boolean; src: string; tip: string }>();
 </script>
 <style scoped>
   .toolbarIcon {