fix: label满额后禁止点击样式

src/views/cameras/preview/components/AlgorithmsSetting/AlgoSettingCard.vue

@@ -56,7 +56,11 @@
       <div class="algoRow">
         <div class="algoLabel">检测元数据:</div>
         <div class="algoTimeContent">
-          <div class="timeAdd" @click="handleAddMetaObj">
+          <div
+            class="timeAdd"
+            :class="{ addDisable: unEmptyLabels.length >= selectedAlgoDetail.metaValues.length }"
+            @click="handleAddMetaObj"
+          >
             <el-icon color="#d0d0d0"><Plus /></el-icon>
           </div>
           <div class="timeList">
@@ -144,7 +148,7 @@
   import PeriodCard from './AlgoPeriodCard.vue';
   import ParamCard from './AlgoParamsCard.vue';
   import { uid } from 'uid';
-  import { ref } from 'vue';
+  import { computed, ref } from 'vue';
 
   // const { data: algoList, loading } = useAllAlgos();
   const cameraAlgoStore = useCameraAlgoStore();
@@ -189,19 +193,22 @@
     selectedAlgoDetail.value.timeRangeArr.push(createDefaultTime());
   };
 
+  const unEmptyLabels = computed(() => {
+    return selectedAlgoDetail.value.metaValues.filter((item) => item.label);
+  });
+
   const handleAddMetaObj = () => {
-    const unemptyList = selectedAlgoDetail.value.metaValues.filter((item) => item.label);
-    if (unemptyList.length < selectedAlgoDetail.value.metaValues.length) {
+    if (unEmptyLabels.value.length < selectedAlgoDetail.value.metaValues.length) {
       selectedAlgoDetail.value.metaValues
         .filter((item) => !item.label)
         .forEach((val) => markedParamCardIds.value.push(val.id));
       ElMessage.error('存在未完善的检测元数据');
       return;
     }
-    if (unemptyList.length == metaObjList.value.length) {
-      ElMessage.warning('暂无更多检测对象');
-      return;
-    }
+    // if (unemptyList.length == metaObjList.value.length) {
+    //   ElMessage.warning('暂无更多检测对象');
+    //   return;
+    // }
     selectedAlgoDetail.value.metaValues.push({ id: uid() } as AlgoParamMetaItem);
   };
 
@@ -394,7 +401,13 @@
     justify-content: center;
     align-items: center;
     margin-right: 5px;
+    cursor: pointer;
+  }
+  .addDisable {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
+
   .timeList {
     width: 610px;
     display: flex;