fix: 文案和样式调整

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

@@ -10,7 +10,7 @@
     width="500px"
     :close-on-click-modal="!algoListVisiable"
   >
-    <div style="display: flex; justify-content: center">
+    <div style="display: flex; justify-content: center; align-items: center">
       <span>算法：</span>
       <ElSelect
         v-model="selectedIds"
@@ -18,6 +18,7 @@
         style="width: 224px"
         size="small"
         @visible-change="handleVisibleChange"
+        placeholder="请为该相机选择关联的算法"
       >
         <ElOption
           v-for="item in allAlgoList"
@@ -34,7 +35,7 @@
 
     <template #footer>
       <el-button @click="handleClose">取消</el-button>
-      <el-button type="primary" @click="handleSubmit"> 保存 </el-button>
+      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
     </template>
   </ElDialog>
 </template>
@@ -79,7 +80,7 @@
       selectedAlgoId.value = selectedIds.value?.[0];
       getCameraAlgoList(cameraDetailStore.cameraId);
       visible.value = false;
-      ElMessage.success('添加算法成功');
+      ElMessage.success('添加成功，请完成算法参数配置后生效');
     });
   };
 
@@ -88,4 +89,8 @@
     selectedIds.value = undefined;
   };
 </script>
-<style scoped></style>
+<style scoped>
+  :deep(.el-select .el-input__inner) {
+    min-height: 32px;
+  }
+</style>

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

@@ -2,25 +2,29 @@
   <div class="algoCardWrapper">
     <div class="algoCardTitle">
       <div>{{ selectedAlgoDetail?.algoInfo?.name }}</div>
-      <ElSwitch
-        v-model="selectedAlgoDetail.enableCardBool"
-        size="small"
-        @change="handleAlgoEnable"
-      />
+      <div style="display: flex; align-items: center">
+        <ElSwitch
+          v-model="selectedAlgoDetail.enableCardBool"
+          size="small"
+          @change="handleAlgoEnable"
+        />
+        <el-tooltip class="box-item" effect="dark" placement="top">
+          <template #content> 关闭后该算法对<br />此台相机不生效</template>
+          <el-icon color="#d4d5d8" :size="16" class="tipIcon"><InfoCircleOutlined /></el-icon>
+        </el-tooltip>
+      </div>
     </div>
     <div class="algoCardMain">
-      <div class="algoRow">
+      <div class="algoRow" style="display: flex; align-items: center">
         <div class="algoLabel">绘制电子围栏:</div>
         <div>
           <div style="display: flex; align-items: center">
             <ElSwitch v-model="selectedAlgoDetail.electronicFenceBool" size="small" />
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              content="打开开关，绘制电子围栏。"
-              placement="top"
-            >
-              <el-icon color="#e2e2e2" class="tipIcon"><InfoCircleOutlined /></el-icon>
+            <el-tooltip class="box-item" effect="dark" placement="top">
+              <template #content>
+                默认检测全部范围，如需<br />指定范围，可打开开关，<br />在相机界面完成绘制
+              </template>
+              <el-icon color="#e2e2e2" :size="16" class="tipIcon"><InfoCircleOutlined /></el-icon>
             </el-tooltip>
             <!-- <span style="font-size: 10px; margin-left: 20px; color: #262626"
               >备注：请绘制电子围栏</span
@@ -102,7 +106,17 @@
         <span style="font-size: 12px; margin-left: 5px">S</span>
       </div>
       <div style="display: flex; justify-content: flex-end">
-        <ElButton size="small" @click="handleRemoveAlgo" :disabled="!selectedAlgoId">取消</ElButton>
+        <el-popconfirm
+          title="确认取消算法配置吗? 取消后配置的参数将不会被保存。"
+          confirm-button-text="确定"
+          cancel-button-text="取消"
+          @confirm="handleRemoveAlgo"
+          width="300px"
+        >
+          <template #reference>
+            <ElButton size="small" :disabled="!selectedAlgoId">取消</ElButton>
+          </template>
+        </el-popconfirm>
         <ElButton size="small" type="primary" @click="handleSave" :disabled="!selectedAlgoId"
           >保存</ElButton
         >
@@ -328,7 +342,7 @@
     border: 1px solid #ccc;
     border-radius: 4px;
     /* padding: 10px; */
-    width: 770px;
+    width: 780px;
   }
 
   .algoRow {
@@ -338,6 +352,8 @@
 
   .algoLabel {
     margin-right: 10px;
+    width: 90px;
+    text-align: right;
   }
   .algoTimeContent {
     display: flex;
@@ -365,7 +381,7 @@
   }
 
   .algoCardMain {
-    padding: 10px 20px;
+    padding: 10px 15px;
   }
 
   .timeAdd {
@@ -380,7 +396,7 @@
     margin-right: 5px;
   }
   .timeList {
-    width: 608px;
+    width: 610px;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
@@ -388,4 +404,8 @@
   .tipIcon {
     margin-left: 10px;
   }
+
+  :deep(.ml-4) {
+    margin-left: 0 !important;
+  }
 </style>

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

@@ -133,6 +133,7 @@
       updateCameraAlgoApi({ ...newParam, id: param.id }).then(() => {
         ElMessage.success('更新成功');
         getCameraAlgoList(cameraId);
+        selectedAlgoId.value = undefined;
       });
     }
   };