fix: 修改电子围栏样式和文案

src/modules/algo-params-setting-base/components/FenceToolbar/Description.vue

@@ -3,7 +3,7 @@
     <div v-if="props.isSimple">请在画面上绘制电子围栏...</div>
     <div v-else>
       <div>选择目标预置位后</div>
-      <div>在画面上绘制电子围栏...</div>
+      <div>绘制或编辑电子围栏...</div>
     </div>
   </div>
 </template>

src/modules/algo-params-setting-base/components/FenceToolbar/FenceToolbar.vue

@@ -13,10 +13,8 @@
     <div class="algoName">
       {{ selectedAlgoDetail?.algoInfo?.name }}
     </div>
-    <PresetSelect />
-    <Description :is-simple="Boolean(!cameraDetailStore.detail?.isPtz)" v-if="fenceStore.allFences.length === 0" />
-    <div v-if="fenceStore.allFences.length > 0">
-      <div style="display: flex">
+    <div>
+      <div style="display: flex; justify-content: space-between">
         <ElCheckbox label="检测围栏外部" v-model="isFenceRegionOut" @update:modelValue="handleUpdateRegion" />
         <ElCheckbox
           label="前台画面显示"
@@ -25,7 +23,9 @@
           v-if="!baseProps.isCameraGroup"
         />
       </div>
-      <div class="fenceListWrapper">
+      <PresetSelect />
+
+      <div class="fenceListWrapper" v-if="fenceStore.allFences.length > 0">
         <FenceNameItem
           :active="item.id === fenceStore.currentFenceId"
           v-for="item in fenceStore.allFences"
@@ -36,11 +36,13 @@
           @edit="handleEditFenceInfo(item)"
         />
       </div>
-      <div style="text-align: right">
+      <div style="text-align: right" v-if="fenceStore.allFences.length > 0">
         <ElButton size="small" @click="handleCancelFence">取消</ElButton>
         <ElButton type="primary" size="small" @click="handleSaveFence">保存</ElButton>
       </div>
+      <Description :is-simple="Boolean(!cameraDetailStore.detail?.isPtz)" v-if="fenceStore.allFences.length === 0" />
     </div>
+
     <div>
       <EditFenceDialog
         v-if="showEditFenceDialog"

src/modules/algo-params-setting-base/components/PresetSelect/PresetSelect.vue

@@ -2,9 +2,16 @@
   <div class="presetSetting">
     <div style="margin-right: 10px">预置位 </div>
     <div>
-      <ElSelect class="pre-select" :model-value="currentPresetToken" size="small" filterable
-        @update:model-value="handleChangeValue" :loading="loading"
-        :disabled="Boolean(!cameraDetailStore.detail?.isPtz)">
+      <ElSelect
+        class="pre-select"
+        :model-value="currentPresetToken"
+        size="small"
+        filterable
+        @update:model-value="handleChangeValue"
+        :loading="loading"
+        :disabled="Boolean(!cameraDetailStore.detail?.isPtz)"
+        placeholder="请选择预置位"
+      >
         <ElOption v-for="item in presetOptions" :key="item.token" :label="item.name" :value="item.token">
           <span style="float: left">{{ item.name }}</span>
           <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
@@ -19,85 +26,84 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ElSelect, ElOption, ElMessage, ElMessageBox, ElLoading } from 'element-plus';
-import { CircleCloseFilled } from '@element-plus/icons-vue';
-import usePresetListStore from '../../store/usePresetListStore';
-import { storeToRefs } from 'pinia';
-import { deletePresetApi, goToPresetApi } from '@/api/camera/camera-preview';
-import useCameraDetailStore from '../../store/useCameraDetailStore';
-import useFenceStore from '../../store/useFenceStore';
-import useCameraAlgoStore from '../../store/useCameraAlgoStore';
+  import { ElSelect, ElOption, ElMessage, ElMessageBox, ElLoading } from 'element-plus';
+  import { CircleCloseFilled } from '@element-plus/icons-vue';
+  import usePresetListStore from '../../store/usePresetListStore';
+  import { storeToRefs } from 'pinia';
+  import { deletePresetApi, goToPresetApi } from '@/api/camera/camera-preview';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import useFenceStore from '../../store/useFenceStore';
+  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
 
-const presetListStore = usePresetListStore();
-const cameraAlgoStore = useCameraAlgoStore();
+  const presetListStore = usePresetListStore();
+  const cameraAlgoStore = useCameraAlgoStore();
 
-const cameraDetailStore = useCameraDetailStore();
+  const cameraDetailStore = useCameraDetailStore();
 
-const { data: presetOptions, currentPresetToken, loading } = storeToRefs(presetListStore);
+  const { data: presetOptions, currentPresetToken, loading } = storeToRefs(presetListStore);
 
-const fenceStore = useFenceStore();
+  const fenceStore = useFenceStore();
 
-const handleDeletePreset = (token: string) => {
-  ElMessageBox({
-    message:
-      '该预置位可能存在关联的电子围栏。删除该预置位将会删除对应的电子围栏信息，请确认是否删除',
-    title: '删除确认',
-    showCancelButton: true,
-    confirmButtonText: '确认删除',
-    beforeClose: (action, instance, done) => {
-      if (action === 'confirm') {
-        instance.confirmButtonLoading = true;
-        deletePresetApi({ presetToken: token, cameraId: cameraDetailStore.cameraId })
-          .then((res) => {
-            ElMessage.success('删除成功！');
-            presetListStore.getPresetList(cameraDetailStore.cameraId);
-            currentPresetToken.value = presetOptions.value?.[0].token || '';
-            done();
-          })
-          .finally(() => {
-            instance.confirmButtonLoading = true;
-          });
-      } else {
-        done();
-      }
-    },
-  });
-};
+  const handleDeletePreset = (token: string) => {
+    ElMessageBox({
+      message: '该预置位可能存在关联的电子围栏。删除该预置位将会删除对应的电子围栏信息，请确认是否删除',
+      title: '删除确认',
+      showCancelButton: true,
+      confirmButtonText: '确认删除',
+      beforeClose: (action, instance, done) => {
+        if (action === 'confirm') {
+          instance.confirmButtonLoading = true;
+          deletePresetApi({ presetToken: token, cameraId: cameraDetailStore.cameraId })
+            .then((res) => {
+              ElMessage.success('删除成功！');
+              presetListStore.getPresetList(cameraDetailStore.cameraId);
+              currentPresetToken.value = presetOptions.value?.[0].token || '';
+              done();
+            })
+            .finally(() => {
+              instance.confirmButtonLoading = true;
+            });
+        } else {
+          done();
+        }
+      },
+    });
+  };
 
-const handleChangeValue = (val) => {
-  currentPresetToken.value = val;
-  goToPresetApi({ presetToken: val, cameraId: cameraDetailStore.cameraId });
-  fenceStore.getFence({
-    presetToken: val,
-    algoId: cameraAlgoStore.selectedAlgoId!,
-    cameraId: cameraDetailStore.cameraId,
-  });
-};
+  const handleChangeValue = (val) => {
+    currentPresetToken.value = val;
+    goToPresetApi({ presetToken: val, cameraId: cameraDetailStore.cameraId });
+    fenceStore.getFence({
+      presetToken: val,
+      algoId: cameraAlgoStore.selectedAlgoId!,
+      cameraId: cameraDetailStore.cameraId,
+    });
+  };
 </script>
 <style scoped>
-.presetSetting {
-  display: flex;
-  align-items: center;
-  height: 34px;
-}
+  .presetSetting {
+    display: flex;
+    align-items: center;
+    height: 34px;
+  }
 
-.pre-select {
-  width: 145px;
-}
+  .pre-select {
+    width: 145px;
+  }
 
-.circular {
-  display: inline;
-  height: 30px;
-  width: 30px;
-  animation: loading-rotate 2s linear infinite;
-}
+  .circular {
+    display: inline;
+    height: 30px;
+    width: 30px;
+    animation: loading-rotate 2s linear infinite;
+  }
 
-.path {
-  animation: loading-dash 1.5s ease-in-out infinite;
-  stroke-dasharray: 90, 150;
-  stroke-dashoffset: 0;
-  stroke-width: 2;
-  stroke: var(--el-color-primary);
-  stroke-linecap: round;
-}
+  .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: var(--el-color-primary);
+    stroke-linecap: round;
+  }
 </style>