增加算法批量多选功能

src/api/camera/camera-preview.ts

@@ -73,8 +73,8 @@ export interface CameraAlgoItem {
 }
 
 /** 查询某个camera下的所有算法 */
-export const getCameraAlgoListApi = (cameraId: number) => {
-  return http.request<CameraAlgoItem[]>({
+export const getCameraAlgoListApi = (cameraId: number): Promise<CameraAlgoItem[]> => {
+  return http.request({
     url: '/cameraPreview/getAlgo',
     method: 'get',
     params: { cameraId },
@@ -89,8 +89,14 @@ interface SaveCameraAlgoParam {
   electronicFence: string;
   status: 0 | 1;
 }
+
+interface CreateCameraAlgoParam {
+  algoIds: number[];
+  cameraId: number;
+}
+
 /** 保存相机的某个算法 */
-export const createCameraAlgoApi = (param: SaveCameraAlgoParam) => {
+export const createCameraAlgoApi = (param: CreateCameraAlgoParam) => {
   return http.request({
     url: '/cameraPreview/saveAlgo',
     data: param,

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

@@ -4,7 +4,7 @@
   >
 
   <ElDialog v-model="visible" title="添加算法" @close="handleClose" width="500px">
-    <ElSelect v-model="selectedId" style="width: 150px" size="small">
+    <ElSelect v-model="selectedIds" multiple style="width: 100%" size="small">
       <ElOption
         v-for="item in allAlgoList"
         :key="item.id"
@@ -30,7 +30,7 @@
   import { storeToRefs } from 'pinia';
   import { createCameraAlgoApi } from '@/api/camera/camera-preview';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
-  const selectedId = ref<number>();
+  const selectedIds = ref<number[]>([]);
   const cameraAlgoStore = useCameraAlgoStore();
 
   const { isAlgoBind } = cameraAlgoStore;
@@ -44,20 +44,16 @@
   };
 
   const handleSubmit = () => {
-    if (!selectedId.value) {
+    if (selectedIds.value?.length < 1) {
+      ElMessage.warning({ message: '请选择算法' });
       return;
     }
-
     createCameraAlgoApi({
-      algoId: selectedId.value,
+      algoIds: selectedIds.value || [],
       cameraId: cameraDetailStore.cameraId,
-      status: 0,
-      detectionFrequency: 0,
-      detectionTime: '',
-      electronicFence: '',
     }).then((res) => {
       console.log('createAlgo ok', res);
-      selectedAlgoId.value = selectedId.value;
+      selectedAlgoId.value = selectedIds.value?.[0];
       getCameraAlgoList(cameraDetailStore.cameraId);
       visible.value = false;
       ElMessage.success('添加算法成功');
@@ -66,7 +62,7 @@
 
   const showDialog = () => {
     visible.value = true;
-    selectedId.value = undefined;
+    selectedIds.value = undefined;
   };
 </script>
 <style scoped></style>

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

@@ -75,19 +75,12 @@
 <script lang="ts" setup>
   import { ElSelect, ElOption, ElSwitch, ElInputNumber, ElTimePicker } from 'element-plus';
   import { CircleCloseFilled } from '@element-plus/icons-vue';
-  import { ref, watch } from 'vue';
   import { storeToRefs } from 'pinia';
   import dayjs, { Dayjs } from 'dayjs';
   import addTimeIcon from '@/assets/icons/addTimeIcon.png';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
-  import { STATUS, TimeRangeItem } from './types';
-  import {
-    FrequencyEnum,
-    createDefaultTime,
-    frequencyOptions,
-    getDetectionJSON,
-    getDetectionTimeJSON,
-  } from './utils';
+  import { STATUS } from './types';
+  import { createDefaultTime, frequencyOptions } from './utils';
 
   // const { data: algoList, loading } = useAllAlgos();
   const cameraAlgoStore = useCameraAlgoStore();

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

@@ -20,20 +20,17 @@
           @on-remove="handleRemove"
           v-if="selectedAlgoId"
         />
+        <div style="color: #ccc; margin-top: 20px" v-else>请选择左侧算法</div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted } from 'vue';
+  import { onMounted, watch } from 'vue';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import AlgoSettingCard from './AlgoSettingCard.vue';
   import { storeToRefs } from 'pinia';
-  import {
-    deleteCameraAlgoApi,
-    createCameraAlgoApi,
-    updateCameraAlgoApi,
-  } from '@/api/camera/camera-preview';
+  import { deleteCameraAlgoApi, updateCameraAlgoApi } from '@/api/camera/camera-preview';
   import { ElMessage } from 'element-plus';
   import AlgoTag from './AlgoTag.vue';
   import useFenceStore from '../../store/useFenceStore';
@@ -42,6 +39,7 @@
   import AddAlgoDialog from './AddAlgoDialog.vue';
   import { createDefaultTime, getDetectionJSON, getDetectionTimeJSON } from './utils';
   import { AlgoStatus } from '@/api/camera/camera-preview';
+  import { watchEffect } from 'vue';
 
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
@@ -59,29 +57,34 @@
   const handleSelectAlgo = (algoId: number) => {
     if (algoId !== selectedAlgoId.value) {
       selectedAlgoId.value = algoId;
-      const detail = getAlgoDetail(algoId);
+    }
+  };
 
-      console.log('detail change', detail);
-      const detectionJSON = getDetectionJSON(detail?.detectionFrequency);
-      const enableCard = Boolean(detail?.status);
-      const electronicFenceBool = Boolean(detail?.electronicFence);
+  watchEffect(() => {
+    const algoId = selectedAlgoId.value;
+    if (!algoId) return;
+    const detail = getAlgoDetail(algoId);
+    if (!detail) return;
+    console.log('detail change', detail);
+    const detectionJSON = getDetectionJSON(detail?.detectionFrequency);
+    const enableCard = Boolean(detail?.status);
+    const electronicFenceBool = Boolean(detail?.electronicFence);
 
-      const timeRangeArr = getDetectionTimeJSON(detail?.detectionTime) || [createDefaultTime()];
+    const timeRangeArr = getDetectionTimeJSON(detail?.detectionTime) || [createDefaultTime()];
 
-      selectedAlgoDetail.value = {
-        ...detail,
-        detectionJSON,
-        enableCardBool: enableCard,
-        electronicFenceBool,
-        timeRangeArr,
-      };
-      fenceStore.getFence({
-        algoId: algoId,
-        cameraId: cameraDetailStore.cameraId,
-        presetToken: presetStore.currentPresetToken,
-      });
-    }
-  };
+    selectedAlgoDetail.value = {
+      ...detail,
+      detectionJSON,
+      enableCardBool: enableCard,
+      electronicFenceBool,
+      timeRangeArr,
+    };
+    fenceStore.getFence({
+      algoId: algoId,
+      cameraId: cameraDetailStore.cameraId,
+      presetToken: presetStore.currentPresetToken,
+    });
+  });
 
   const handleSubmit = (param) => {
     console.log('submitParam', param);
@@ -99,11 +102,6 @@
         ElMessage.success('更新成功');
         getCameraAlgoList(cameraId);
       });
-    } else {
-      createCameraAlgoApi(newParam).then(() => {
-        ElMessage.success('保存成功');
-        getCameraAlgoList(cameraId);
-      });
     }
   };
 
@@ -112,6 +110,7 @@
     deleteCameraAlgoApi({ algoId, cameraId: cameraDetailStore.cameraId }).then(() => {
       ElMessage.success('删除成功');
       getCameraAlgoList(cameraDetailStore.cameraId);
+      selectedAlgoId.value = undefined;
     });
   };
 </script>