修改添加算法

src/api/camera/camera-preview.ts

@@ -137,13 +137,13 @@ export interface SaveFenceParams {
   algoId: number;
   cameraId: number;
   electronicFencePolygon: string;
-  presetToken: number;
+  presetToken: string;
 }
 /** 添加电子围栏 */
 export const saveFenceApi = (data: SaveFenceParams) => {
   return http.request({
-    url: '/cameraPreview/updateFence',
-    method: 'put',
+    url: '/cameraPreview/saveFence',
+    method: 'post',
     data,
   });
 };
@@ -153,7 +153,7 @@ interface UpdateFenceParams {
   cameraId: number;
   electronicFencePolygon: string;
   id: number;
-  presetToken: number;
+  presetToken: string;
 }
 /** 编辑电子围栏 */
 export const editFenceApi = (data: UpdateFenceParams) => {

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

@@ -0,0 +1,72 @@
+<template>
+  <ElButton type="primary" @click="showDialog" size="small" style="margin-top: 10px">
+    + 添加算法</ElButton
+  >
+
+  <ElDialog v-model="visible" title="添加算法" @close="handleClose" width="500px">
+    <ElSelect v-model="selectedId" style="width: 150px" size="small">
+      <ElOption
+        v-for="item in allAlgoList"
+        :key="item.id"
+        :value="item.id"
+        :label="item.name"
+        :disabled="!!isAlgoBind(item.id)"
+      >
+        {{ item.name }}
+        <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
+      </ElOption>
+    </ElSelect>
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit"> 保存 </el-button>
+    </template>
+  </ElDialog>
+</template>
+<script lang="ts" setup>
+  import { ElDialog, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus';
+  import { ref } from 'vue';
+  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
+  import { storeToRefs } from 'pinia';
+  import { createCameraAlgoApi } from '@/api/camera/camera-preview';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
+  const selectedId = ref<number>();
+  const cameraAlgoStore = useCameraAlgoStore();
+
+  const { isAlgoBind } = cameraAlgoStore;
+  const { allAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
+  const { getCameraAlgoList } = cameraAlgoStore;
+  const cameraDetailStore = useCameraDetailStore();
+
+  const visible = ref(false);
+  const handleClose = () => {
+    visible.value = false;
+  };
+
+  const handleSubmit = () => {
+    if (!selectedId.value) {
+      return;
+    }
+
+    createCameraAlgoApi({
+      algoId: selectedId.value,
+      cameraId: cameraDetailStore.cameraId,
+      status: 0,
+      detectionFrequency: 0,
+      detectionTime: '',
+      electronicFence: '',
+    }).then((res) => {
+      console.log('createAlgo ok', res);
+      selectedAlgoId.value = selectedId.value;
+      getCameraAlgoList(cameraDetailStore.cameraId);
+      visible.value = false;
+      ElMessage.success('添加算法成功');
+    });
+  };
+
+  const showDialog = () => {
+    visible.value = true;
+    selectedId.value = undefined;
+  };
+</script>
+<style scoped></style>

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

@@ -1,12 +1,7 @@
 <template>
   <div class="algoCardWrapper">
     <div class="algoCardTitle">
-      <ElSelect v-model="selectedAlgoId" style="width: 150px" size="small">
-        <ElOption v-for="item in allAlgoList" :key="item.id" :value="item.id" :label="item.name">
-          {{ item.name }}
-          <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
-        </ElOption>
-      </ElSelect>
+      <div>{{ selectedAlgoDetail?.algoInfo?.name }}</div>
       <ElSwitch v-model="enableCard" size="small" />
     </div>
     <div class="algoCardMain">
@@ -195,6 +190,7 @@
   }
   .presetList {
     font-size: 12px;
+    display: none;
   }
   .removeIcon {
     margin-left: 10px;
@@ -211,6 +207,7 @@
     display: flex;
     justify-content: space-between;
     padding: 4px 20px;
+    align-items: center;
   }
 
   .algoCardMain {

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

@@ -3,6 +3,8 @@
     <div style="font-size: 12px; font-weight: bold">算法配置</div>
     <div style="display: flex">
       <div class="algoTagWrapper">
+        <AddAlgoDialog />
+
         <AlgoTag
           v-for="item in cameraAlgoList"
           :key="item.code"
@@ -12,7 +14,11 @@
         />
       </div>
       <div>
-        <AlgoSettingCard @on-submit="handleSubmit" @on-remove="handleRemove" />
+        <AlgoSettingCard
+          @on-submit="handleSubmit"
+          @on-remove="handleRemove"
+          v-if="selectedAlgoId"
+        />
       </div>
     </div>
   </div>
@@ -32,6 +38,7 @@
   import useFenceStore from '../../store/useFenceStore';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import usePresetListStore from '../../store/usePresetListStore';
+  import AddAlgoDialog from './AddAlgoDialog.vue';
 
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
@@ -49,15 +56,11 @@
   const handleSelectAlgo = (id: number) => {
     if (id !== selectedAlgoId.value) {
       selectedAlgoId.value = id;
-      fenceStore
-        .getFence({
-          algoId: id,
-          cameraId: cameraDetailStore.cameraId,
-          presetToken: presetStore.currentPresetToken,
-        })
-        .then((res) => {
-          console.log('fence detail', res);
-        });
+      fenceStore.getFence({
+        algoId: id,
+        cameraId: cameraDetailStore.cameraId,
+        presetToken: presetStore.currentPresetToken,
+      });
     }
   };
 

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

@@ -45,15 +45,18 @@
   import { onMounted } from 'vue';
   import usePresetListStore from '../../store/usePresetListStore';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import AlgorithmsSetting from '../AlgorithmsSetting/AlgorithmsSetting.vue';
   import CameraParams from '../CameraParams/CameraParams.vue';
+  import { ElMessage } from 'element-plus';
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
   const fenceStore = useFenceStore();
 
-  const { data, getPresetList } = usePresetListStore();
+  const presetStore = usePresetListStore();
   const cameraDetailStore = useCameraDetailStore();
+  const cameraAlgoStore = useCameraAlgoStore();
 
   const viewType = ref<ViewType>(ViewType.window1);
 
@@ -66,7 +69,7 @@
   };
 
   const handleAddPresetOk = () => {
-    getPresetList(cameraDetailStore.cameraId);
+    presetStore.getPresetList(cameraDetailStore.cameraId);
     handleClose();
   };
 
@@ -75,7 +78,7 @@
     fenceEditorRef.value?.remove();
   };
 
-  const isEdit = ref(true);
+  const isEdit = ref(false);
 
   /** 退出编辑模式 */
   const toggleEditable = (val: boolean) => {
@@ -90,7 +93,32 @@
   const handleSave = () => {
     const json = fenceEditorRef.value?.toObject();
     console.log('save json', json);
-    fenceStore.saveFence({ cameraId: '', });
+    const cameraId = cameraDetailStore.cameraId;
+    if (!cameraId) {
+      ElMessage.error('未选中相机');
+      return;
+    }
+    const algoId = cameraAlgoStore.selectedAlgoId;
+    if (!algoId) {
+      ElMessage.error('未选中算法');
+      return;
+    }
+    const presetToken = presetStore.currentPresetToken;
+    if (!presetToken) {
+      ElMessage.error('未选中预置位');
+      return;
+    }
+
+    fenceStore
+      .saveFence({
+        cameraId: cameraId,
+        algoId: algoId,
+        presetToken,
+        electronicFencePolygon: JSON.stringify(json),
+      })
+      ?.then((res) => {
+        ElMessage.success('更新成功');
+      });
   };
 
   const handleUpdateViewType = (t: ViewType) => {
@@ -125,6 +153,21 @@
     { immediate: true },
   );
 
+  watch(
+    () => cameraAlgoStore.selectedAlgoDetail?.status,
+    (newVal) => {
+      if (newVal) {
+        fenceEditorRef.value?.setEditMode();
+      } else {
+        fenceEditorRef.value?.exitEditMode();
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
   const handleAddPreset = () => {
     addPresetModalVisible.value = true;
   };
@@ -132,7 +175,7 @@
   onMounted(() => {
     const cameraId = cameraDetailStore.cameraId;
     if (cameraId) {
-      getPresetList(cameraId);
+      presetStore.getPresetList(cameraId);
     }
   });
 </script>

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

@@ -13,7 +13,7 @@
   const mapRef = ref<HTMLCanvasElement | null>(null);
   let currentTool: ToolObjectItem = toolObject[1];
 
-  let isEdit = true;
+  let isEdit = false;
 
   let stage: Konva.Stage | null = null;
   let layer: Konva.Layer | null = null;
@@ -457,12 +457,12 @@
         default:
           break;
       }
-      ElMessage({
-        message: '修改成功！',
-        type: 'success',
-        center: true,
-        duration: 1000,
-      });
+      // ElMessage({
+      //   message: '修改成功！',
+      //   type: 'success',
+      //   center: true,
+      //   duration: 1000,
+      // });
       e.cancelBubble = true;
     });
     return circle;
@@ -576,12 +576,12 @@
       layer?.draw();
       /*   vc_setMaskData(); */
 
-      ElMessage({
-        message: '修改成功！',
-        type: 'success',
-        center: true,
-        duration: 1000,
-      });
+      // ElMessage({
+      //   message: '修改成功！',
+      //   type: 'success',
+      //   center: true,
+      //   duration: 1000,
+      // });
       setStageCursor('crosshair');
       //设置组不能拖动
       currentDrawingShape?.setAttr('draggable', false);

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

@@ -31,18 +31,18 @@
   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' },
-  // ]);
+  import useFenceStore from '../../store/useFenceStore';
+  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
 
   const presetListStore = usePresetListStore();
+  const cameraAlgoStore = useCameraAlgoStore();
 
   const cameraDetailStore = useCameraDetailStore();
 
   const { data: presetOptions, currentPresetToken } = storeToRefs(presetListStore);
 
+  const fenceStore = useFenceStore();
+
   const handleDeletePreset = (token: string) => {
     ElMessageBox({
       message:
@@ -71,8 +71,12 @@
   };
 
   const handleChangeValue = (val) => {
-    console.log('changeValue', val);
     currentPresetToken.value = val;
+    fenceStore.getFence({
+      presetToken: val,
+      algoId: cameraAlgoStore.selectedAlgoId!,
+      cameraId: cameraDetailStore.cameraId,
+    });
   };
 </script>
 <style scoped>

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

@@ -3,10 +3,12 @@ import {
   getFenceApi,
   saveFenceApi,
   SaveFenceParams,
+  editFenceApi,
 } from '@/api/camera/camera-preview';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { ServerLines } from '../components/FenceEditor/constants';
+import { ElMessage } from 'element-plus';
 
 /** 当前电子围栏的store */
 export const useFenceStore = defineStore('electronicFencePolygonStore', () => {
@@ -15,39 +17,47 @@ export const useFenceStore = defineStore('electronicFencePolygonStore', () => {
   /** 当前编辑的电子围栏的点 */
   const currentFencePoints = ref([]);
   const currentFenceId = ref<number>();
+  const loading = ref(false);
 
   /** 获取电子围栏 */
   const getFence = (param: GetFenceParams) => {
-    // return new Promise((resolve) => {
-    //   setTimeout(() => {
-    //     const res = {
-    //       id: 2,
-    //       electronicFencePolygon:
-    //         Math.random() > 0.5
-    //           ? ``
-    //           : `[[[150.9196038878118,103.42855053676564],[350.91958691002293,54.42855423815479],[464.91957723268325,211.42854237860183],[222.9195977758078,225.42854132106206],[60.91961152781679,175.42854509798977]],[[325.9195890322465,259.42853875275125],[534.9195712904572,249.42853950813677],[624.9195636504521,362.42853097228016],[509.91957341268073,380.4285296125862],[309.91959039046964,345.4285322564356]]]`,
-    //     };
-    //     currentFenceId.value = res.id;
-    //     const points = res.electronicFencePolygon
-    //       ? (JSON.parse(res.electronicFencePolygon) as [])
-    //       : [];
-    //     currentFencePoints.value = points;
-    //     serverFencePoints.value = points;
-    //     resolve();
-    //   }, 200);
-    // });
-
-    return getFenceApi(param).then((res) => {
-      currentFenceId.value = res.id;
-      const points = res.electronicFencePolygon
-        ? (JSON.parse(res.electronicFencePolygon) as [])
-        : [];
-      currentFencePoints.value = points;
-      serverFencePoints.value = points;
-    });
+    loading.value = true;
+    if (!param.algoId || !param.cameraId || !param.presetToken) return;
+    return getFenceApi(param)
+      .then((res) => {
+        currentFenceId.value = res.id;
+        const points = res.electronicFencePolygon
+          ? (JSON.parse(res.electronicFencePolygon) as [])
+          : [];
+        currentFencePoints.value = points;
+        serverFencePoints.value = points;
+      })
+      .catch(() => {
+        currentFenceId.value = undefined;
+        currentFencePoints.value = [];
+        serverFencePoints.value = [];
+      })
+      .finally(() => {
+        loading.value = false;
+      });
   };
 
   const saveFence = (param: SaveFenceParams) => {
+    if (!param.cameraId) {
+      ElMessage.error('未选中相机');
+      return;
+    }
+    if (!param.algoId) {
+      ElMessage.error('未选中算法');
+      return;
+    }
+    if (!param.presetToken) {
+      ElMessage.error('未选中预置位');
+      return;
+    }
+    if (currentFenceId.value) {
+      return editFenceApi({ ...param, id: currentFenceId.value });
+    }
     return saveFenceApi(param).then((res) => {
       console.log('save success', res);
     });