添加预置位

.env.development

@@ -15,6 +15,7 @@ VITE_DROP_CONSOLE = true
 
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
+# VITE_PROXY=[["/temp","http://172.16.23.144:8800"],["/upload","http://172.16.23.144:8086"]]
 VITE_PROXY=[["/api","http://172.16.23.144:8800/api"]]
 
 # API 接口地址

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

@@ -21,6 +21,10 @@
   const cameraDetailStore = useCameraDetailStore();
 
   const handleSubmit = () => {
+    if (presetStore.isPresetNameExist(presetName.value)) {
+      ElMessage.error('预置位名称已存在');
+      return;
+    }
     loading.value = true;
     createPresetApi({ presetName: presetName.value, cameraId: cameraDetailStore.cameraId })
       .then((val) => {

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

@@ -8,19 +8,22 @@
         @toggle-editable="toggleEditable"
         :is-edit="isEdit"
       />
-      <PresetSelect v-model="currentPreset" />
+      <PresetSelect />
     </div>
 
     <div class="cameraViewSettingWrapper">
       <FenceEditor ref="fenceEditorRef" />
 
       <div class="cameraVideo"><CameraLiveVideo /></div>
-    </div>
-    <div>
-      <CameraDirectionControl />
-      <ElButton type="primary" @click="handleAddPreset">添加预置位</ElButton>
-      <AddPresetModal v-if="addPresetModalVisible" @close="handleClose" @ok="handleAddPresetOk" />
-    </div>
+      <div class="presetAddWrapper">
+        <CameraDirectionControl />
+        <ElButton type="primary" @click="handleAddPreset" size="small">添加预置位</ElButton>
+        <AddPresetModal
+          v-if="addPresetModalVisible"
+          @close="handleClose"
+          @ok="handleAddPresetOk"
+        /> </div
+    ></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -33,8 +36,6 @@
   import { ViewType } from '../ViewWindowSetting/types';
   import useFenceStore from '../../store/useFenceStore';
   import AddPresetModal from '../AddPresetModal/AddPresetModal.vue';
-  import { createPresetApi } from '@/api/camera/camera-preview';
-  import { ElMessage } from 'element-plus';
   import { onMounted } from 'vue';
   import usePresetListStore from '../../store/usePresetListStore';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
@@ -66,7 +67,6 @@
 
   const isEdit = ref(true);
 
-  const currentPreset = ref('');
   /** 退出编辑模式 */
   const toggleEditable = (val: boolean) => {
     isEdit.value = val;
@@ -144,5 +144,13 @@
     display: flex;
     align-items: center;
     margin-left: 25px;
+    position: relative;
+  }
+
+  .presetAddWrapper {
+    position: absolute;
+    bottom: 50px;
+    right: 50px;
+    z-index: 10;
   }
 </style>

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

@@ -1,25 +1,37 @@
 <template>
   <div class="presetSetting">
     <div style="margin-right: 10px">预置位</div>
-    <div
-      ><ElSelect
-        v-model="currentPresetToken"
+    <div>
+      <ElSelect
+        :model-value="currentPresetToken"
         size="small"
-        @change="emits('update:modelValue', $event)"
+        filterable
+        @update:model-value="handleChangeValue"
       >
         <ElOption
           v-for="item in presetOptions"
           :key="item.token"
           :label="item.name"
           :value="item.token"
-        /> </ElSelect
-    ></div>
+        >
+          <span style="float: left">{{ item.name }}</span>
+          <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
+            <!-- 点击删除的时候，阻止选中菜单 -->
+            <el-icon @click.stop="handleDeletePreset(item.token)"><CircleCloseFilled /></el-icon>
+          </span>
+        </ElOption>
+      </ElSelect>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ElSelect, ElOption } from 'element-plus';
+  import { ElSelect, ElOption, ElMessage, ElMessageBox } from 'element-plus';
+  import { CircleCloseFilled } from '@element-plus/icons-vue';
   import usePresetListStore from '../../store/usePresetListStore';
   import { storeToRefs } from 'pinia';
+  import { deletePresetApi } from '@/api/camera/camera-preview';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import { ref } from 'vue';
   // const presetOptions = ref([
   //   { label: '预置位1', value: 'p1' },
   //   { label: '预置位2', value: 'p2' },
@@ -27,10 +39,41 @@
 
   const presetListStore = usePresetListStore();
 
+  const cameraDetailStore = useCameraDetailStore();
+
   const { data: presetOptions, currentPresetToken } = storeToRefs(presetListStore);
 
-  const props = defineProps<{ modelValue: string }>();
-  const emits = defineEmits<{ (e: 'update:modelValue', data: string): unknown }>();
+  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) => {
+    console.log('changeValue', val);
+    currentPresetToken.value = val;
+  };
 </script>
 <style scoped>
   .presetSetting {

src/views/cameras/preview/store/usePresetListStore.ts

@@ -16,7 +16,11 @@ export const usePresetListStore = defineStore('presetListStore', () => {
     { manual: true },
   );
 
-  return { data, currentPresetToken, getPresetList: runAsync };
+  const isPresetNameExist = (name: string) => {
+    return data.value?.find((x) => x.name === name);
+  };
+
+  return { data, currentPresetToken, getPresetList: runAsync, isPresetNameExist };
 });
 
 export default usePresetListStore;