style: 修改相机预览添加预置位与预置位选择部分样式

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

@@ -4,41 +4,41 @@
       <el-button @click="emits('close')">取消</el-button>
       <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
     </template>
-    <ElInput type="textarea" autosize v-model="presetName" />
+    <ElInput type="textarea" autosize v-model="presetName" maxlength="15" show-word-limit />
   </ElDialog>
 </template>
 <script lang="ts" setup>
-  import { createPresetApi } from '@/api/camera/camera-preview';
-  import { ElDialog, ElInput, ElMessage } from 'element-plus';
-  import { ref } from 'vue';
-  import usePresetListStore from '../../store/usePresetListStore';
-  import useCameraDetailStore from '../../store/useCameraDetailStore';
-  const presetName = ref('');
-  const loading = ref(false);
-  const emits = defineEmits<{ (e: 'close'): unknown; (e: 'ok'): unknown }>();
-  const presetStore = usePresetListStore();
+import { createPresetApi } from '@/api/camera/camera-preview';
+import { ElDialog, ElInput, ElMessage } from 'element-plus';
+import { ref } from 'vue';
+import usePresetListStore from '../../store/usePresetListStore';
+import useCameraDetailStore from '../../store/useCameraDetailStore';
+const presetName = ref('');
+const loading = ref(false);
+const emits = defineEmits<{ (e: 'close'): unknown; (e: 'ok'): unknown }>();
+const presetStore = usePresetListStore();
 
-  const cameraDetailStore = useCameraDetailStore();
+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) => {
-        if (val) {
-          ElMessage.success('预置位创建成功');
-          presetStore.currentPresetToken = val;
-          emits('ok');
-        } else {
-          ElMessage.error('创建失败：已有预置位数量可能超限，请删除后再添加');
-        }
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  };
+const handleSubmit = () => {
+  if (presetStore.isPresetNameExist(presetName.value)) {
+    ElMessage.error('预置位名称已存在');
+    return;
+  }
+  loading.value = true;
+  createPresetApi({ presetName: presetName.value, cameraId: cameraDetailStore.cameraId })
+    .then((val) => {
+      if (val) {
+        ElMessage.success('预置位创建成功');
+        presetStore.currentPresetToken = val;
+        emits('ok');
+      } else {
+        ElMessage.error('创建失败：已有预置位数量可能超限，请删除后再添加');
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
 </script>
 <style scoped></style>

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

@@ -2,24 +2,16 @@
   <div class="presetSetting">
     <div style="margin-right: 10px">预置位 </div>
     <div>
-      <ElSelect
-        :model-value="currentPresetToken"
-        size="small"
-        filterable
-        @update:model-value="handleChangeValue"
-        :loading="loading"
-        :disabled="Boolean(!cameraDetailStore.detail?.isPtz)"
-      >
-        <ElOption
-          v-for="item in presetOptions"
-          :key="item.token"
-          :label="item.name"
-          :value="item.token"
-        >
+      <ElSelect class="pre-select" :model-value="currentPresetToken" size="small" filterable
+        @update:model-value="handleChangeValue" :loading="loading"
+        :disabled="Boolean(!cameraDetailStore.detail?.isPtz)">
+        <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">
             <!-- 点击删除的时候，阻止选中菜单 -->
-            <el-icon @click.stop="handleDeletePreset(item.token)"><CircleCloseFilled /></el-icon>
+            <el-icon @click.stop="handleDeletePreset(item.token)">
+              <CircleCloseFilled />
+            </el-icon>
           </span>
         </ElOption>
       </ElSelect>
@@ -27,80 +19,85 @@
   </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;
+}
 
-  .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;
-  }
+.pre-select {
+  width: 145px;
+}
+
+.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;
+}
 </style>