feat: 点击电子围栏，高亮名称

src/api/camera/camera-preview.ts

@@ -257,7 +257,7 @@ export const saveFenceApi = (data: SaveFenceParams) => {
   });
 };
 
-interface UpdateFenceParams {
+export interface UpdateFenceParams {
   /*相机id */
   cameraId: number;
 

src/views/cameras/algo-params-setting/components/CameraViewSetting/CameraViewSetting.vue

@@ -17,8 +17,9 @@
             ref="fenceEditorRef"
             :dom-width="domWidth"
             :canvas-size="{ width: canvasWidth, height: canvasHeight }"
-            :line-points="fenceStore.serverFencePoints"
+            :line-points="fenceStore.allFences"
             @save="handleSaveFence"
+            @select="handleSelectFence"
           />
         </div>
 
@@ -142,41 +143,38 @@
     }
   };
 
-  const valiateFenceDependence = () => {
+  /** 校验参数 */
+  const handleSelectFence = (nextFenceId: number) => {
+    fenceStore.currentFenceId = nextFenceId;
+  };
+
+  const handleSaveFence = (data: { fenceId?: number; polygon: FencePolygonPoints }) => {
+    console.log('提交的fenceId', data);
+    const { fenceId, polygon } = data;
+
     const cameraId = cameraDetailStore.cameraId;
+    const algoId = cameraAlgoStore.selectedAlgoId;
+    const presetToken = presetStore.currentPresetToken;
     if (!cameraId) {
       ElMessage.error('未选中相机');
-      return null;
+      return;
     }
-    const algoId = cameraAlgoStore.selectedAlgoId;
     if (!algoId) {
       ElMessage.error('未选中算法');
-      return null;
+      return;
     }
-    const presetToken = presetStore.currentPresetToken;
     if (!presetToken) {
       ElMessage.error('未选中预置位');
-      return null;
+      return;
     }
-    return { cameraId: cameraId, algoId: algoId, presetToken };
-  };
+    const param = { cameraId: cameraId, algoId: algoId, presetToken };
 
-  const handleSaveFence = (data: { fenceId: number; polygon: FencePolygonPoints }) => {
-    console.log('提交的fenceId', data);
-    const { fenceId, polygon } = data;
-    const validateResult = valiateFenceDependence();
-    if (!validateResult) return;
-    const newParam = {
-      ...validateResult,
-      fencePolygon: JSON.stringify(polygon),
-      fenceName: '名字测试1',
-    };
     if (!fenceId) {
       // 不存在的话，就新建电子围栏
-      saveFenceApi(newParam);
+      fenceStore.createFence({ ...param, fencePolygon: JSON.stringify(polygon) });
     } else {
       // 否则修改电子围栏
-      editFenceApi({ ...newParam, fenceId });
+      fenceStore.editFence({ ...param, fencePolygon: JSON.stringify(polygon), fenceId });
     }
   };
 
@@ -203,22 +201,6 @@
     });
   };
 
-  const handleSave = () => {
-    const json = fenceEditorRef.value?.toObject();
-    console.log('save json', json);
-    const validateResult = valiateFenceDependence();
-    if (!validateResult) return;
-
-    fenceStore
-      .saveFence({
-        ...validateResult,
-        fencePolygon: JSON.stringify(json),
-      })
-      ?.then(() => {
-        ElMessage.success('更新成功');
-      });
-  };
-
   // const handleUpdateViewType = (t: ViewType) => {
   //   console.log('viewType', t);
   // };
@@ -234,7 +216,7 @@
     const electronicFenceBool = cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool;
 
     if (presetStore.currentPresetToken && cameraAlgoStore.selectedAlgoId && electronicFenceBool) {
-      const points = fenceStore.serverFencePoints || [];
+      const points = fenceStore.allFences || [];
       if (!points) {
         fenceEditorRef.value?.clear();
         return;

src/views/cameras/algo-params-setting/components/FenceEditorV2/FenceEditor.vue

@@ -47,10 +47,11 @@
   }>();
 
   // 保存修改后的电子围栏, fenceId为空表示新建的,否则表示编辑已存在的
-  interface Save {
+  interface EmitsEvents {
     (e: 'save', data: { fenceId?: number; polygon: FencePolygonPoints }): unknown;
+    (e: 'select', fenceId: number): unknown;
   }
-  const emits = defineEmits<Save>();
+  const emits = defineEmits<EmitsEvents>();
 
   const scale = computed(() => {
     return props.domWidth / props.canvasSize.width;
@@ -210,6 +211,10 @@
 
   const handleSelectGroup = (groupId: string) => {
     currentGroupId.value = groupId;
+    const thisFence = fenceGroups.value.find((x) => x.uid === groupId);
+    if (thisFence?.fenceId) {
+      emits('select', thisFence.fenceId);
+    }
   };
 
   /** 清空所有元素 */

src/views/cameras/algo-params-setting/components/FenceToolbar/FenceNameItem.vue

@@ -1,10 +1,22 @@
 <!-- 电子围栏名称的一项 -->
 <template>
-  <div :class="props.active ? 'active' : ''">{{ props.name }}</div>
+  <div :class="props.active ? 'active' : ''">
+    <div>
+      {{ props.detail.name }}
+    </div>
+
+    <ElTag type="primary" v-if="props.detail.label">{{ props.detail.label }}</ElTag>
+  </div>
 </template>
 
 <script lang="ts" setup>
-  const props = defineProps<{ name: string; id: number; active: boolean }>();
+  import { ElTag } from 'element-plus';
+  interface FenceDetail {
+    name: string;
+    id: number;
+    label: string;
+  }
+  const props = defineProps<{ detail: FenceDetail; active: boolean }>();
 </script>
 
 <style>

src/views/cameras/algo-params-setting/components/FenceToolbar/FenceToolbar.vue

@@ -7,27 +7,33 @@
     <PresetSelect />
 
     <div style="display: flex"> <ElCheckbox label="检测围栏外部" /> <ElCheckbox label="前台画面显示" /> </div>
-    <div><FenceNameItem /></div>
+    <div
+      ><FenceNameItem
+        :active="item.id === fenceStore.currentFenceId"
+        v-for="item in fenceStore.allFences"
+        :detail="item"
+        :key="item.id"
+    /></div>
 
     <div class="toolbar">
       <!-- <div class="fenceDrawingTip" v-if="isEdit">
         {{ cameraAlgoStore.selectedAlgoDetail?.algoInfo?.name }}算法电子围栏绘制中
       </div> -->
-      <template v-if="props.isEdit">
-        <!-- <ToolbarIcon
+      <!-- <template v-if="props.isEdit"> -->
+      <!-- <ToolbarIcon
         :src="deleteIcon"
         :active="false"
         @click="emits('toggleFence')"
         tip="检测范围反选"
       /> -->
-        <ToggleFenceStatus @click="emits('toggleRange')" />
+      <!-- <ToggleFenceStatus @click="emits('toggleRange')" />
         <ToolbarIcon :src="deleteIcon" :active="false" @click="emits('remove')" tip="删除电子围栏" />
         <ToolbarIcon :src="saveIcon" :active="false" @click="emits('save')" tip="保存电子围栏" />
-      </template>
+      </template> -->
 
-      <ElButton type="primary" size="small" @click="toggleEdit">{{
+      <!-- <ElButton type="primary" size="small" @click="toggleEdit">{{
         props.isEdit ? '退出编辑' : '编辑电子围栏'
-      }}</ElButton>
+      }}</ElButton> -->
     </div>
   </div>
 </template>
@@ -41,9 +47,12 @@
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import PresetSelect from '../PresetSelect/PresetSelect.vue';
   import FenceNameItem from './FenceNameItem.vue';
+  import useFenceStore from '../../store/useFenceStore';
 
   const cameraAlgoStore = useCameraAlgoStore();
 
+  const fenceStore = useFenceStore();
+
   const props = defineProps<{ isEdit: boolean }>();
 
   const emits = defineEmits<{

src/views/cameras/algo-params-setting/store/useFenceStore.ts

@@ -1,16 +1,21 @@
-import { GetFenceParams, getFenceApi, saveFenceApi, SaveFenceParams, editFenceApi } from '@/api/camera/camera-preview';
+import {
+  GetFenceParams,
+  getFenceApi,
+  saveFenceApi,
+  SaveFenceParams,
+  editFenceApi,
+  UpdateFenceParams,
+} from '@/api/camera/camera-preview';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { ServerLine, ServerLines } from '../components/FenceEditor/constants';
-import { ElMessage } from 'element-plus';
 import safeParse from '@/utils/safeParse';
 
 /** 当前电子围栏的store */
 export const useFenceStore = defineStore('electronicFencePolygonStore', () => {
-  /** 后端返回的电子围栏点 */
-  const serverFencePoints = ref<ServerLines>([]);
-  /** 当前编辑的电子围栏的点 */
-  const currentFencePoints = ref<ServerLines>([]);
+  /** 当前相机-预置位-算法对应的所有的电子围栏 */
+  const allFences = ref<ServerLines>([]);
+  /** 当前正在操作的电子围栏id */
   const currentFenceId = ref<number>();
   const loading = ref(false);
 
@@ -20,54 +25,44 @@ export const useFenceStore = defineStore('electronicFencePolygonStore', () => {
     if (!param.algoId || !param.cameraId || !param.presetToken) return;
     return getFenceApi(param)
       .then((res) => {
-        currentFenceId.value = res.id;
         const fence = res.electronicFence ? (JSON.parse(res.electronicFence) as []) : ([] as { polygon: string }[]);
         // const pointsJSON = points.poly
         const newFence = fence.map((x) => {
           return { ...x, polygon: safeParse(x.polygon) as ServerLine };
         }) as unknown as ServerLines;
-        currentFencePoints.value = newFence;
-        serverFencePoints.value = newFence;
+        allFences.value = newFence;
       })
       .catch(() => {
         currentFenceId.value = undefined;
-        currentFencePoints.value = [];
-        serverFencePoints.value = [];
+        allFences.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, fenceId: currentFenceId.value });
-    }
-    return saveFenceApi(param).then((res) => {
+  /** 新建电子围栏 */
+  const createFence = (param: SaveFenceParams) => {
+    // 还需要把名字加上。
+
+    return saveFenceApi({ fenceName: '电子围栏', ...param }).then((res) => {
       console.log('save success', res);
       currentFenceId.value = res;
+      getFence(param);
     });
   };
 
+  /** 修改电子围栏信息 */
+  const editFence = (param: UpdateFenceParams) => {
+    return editFenceApi(param).then(() => getFence(param));
+  };
+
   const clear = () => {
-    serverFencePoints.value = [];
-    currentFencePoints.value = [];
+    allFences.value = [];
     currentFenceId.value = undefined;
   };
 
-  return { serverFencePoints, currentFencePoints, currentFenceId, getFence, saveFence, clear };
+  return { allFences, currentFenceId, getFence, createFence, editFence, clear };
 });
 
 export default useFenceStore;