修改tag的颜色

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

@@ -1,14 +1,28 @@
 <template>
   <div class="tagWrapper">
-    <ElTag hit :type="props.isActive ? '' : 'info'">{{ props.label }}</ElTag>
+    <ElTag
+      hit
+      :type="props.isActive ? '' : 'info'"
+      :class="{ isOpen: props.isOpen, isClose: !props.isOpen }"
+      >{{ props.label }}</ElTag
+    >
   </div>
 </template>
 <script lang="ts" setup>
-  const props = defineProps<{ isActive: boolean; label: string }>();
+  const props = defineProps<{ isActive: boolean; label: string; isOpen: boolean }>();
 </script>
 <style scoped>
   .tagWrapper {
     margin: 10px 0;
     cursor: pointer;
   }
+  .el-tag.isOpen {
+    /* border-color: #f00; */
+  }
+
+  .el-tag--info.isClose {
+    background-color: #fafafa;
+    color: #bfbfbf;
+    border-color: #dadada;
+  }
 </style>

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

@@ -11,6 +11,7 @@
           :label="item.algoInfo?.name"
           :is-active="item.algoId === selectedAlgoId"
           @click="handleSelectAlgo(item.algoId)"
+          :is-open="item.status === AlgoStatus.enabled"
         />
       </div>
       <div>
@@ -40,6 +41,7 @@
   import usePresetListStore from '../../store/usePresetListStore';
   import AddAlgoDialog from './AddAlgoDialog.vue';
   import { createDefaultTime, getDetectionJSON, getDetectionTimeJSON } from './utils';
+  import { AlgoStatus } from '@/api/camera/camera-preview';
 
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();

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

@@ -17,7 +17,7 @@
 
       <div class="cameraVideo"><CameraLiveVideo /></div>
       <div class="presetAddWrapper">
-        <CameraDirectionControl />
+        <!-- <CameraDirectionControl /> -->
         <ElButton type="primary" @click="handleAddPreset" size="small">添加预置位</ElButton>
         <AddPresetModal
           v-if="addPresetModalVisible"
@@ -34,7 +34,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, ref, watch } from 'vue';
+  import { computed, ref, watch, watchEffect } from 'vue';
   import FenceToolbar from '../FenceToolbar/FenceToolbar.vue';
   import FenceEditor from '../FenceEditor/FenceEditor.vue';
   import CameraLiveVideo from '../CameraLiveVideo/CameraLiveVideo.vue';
@@ -126,20 +126,25 @@
     console.log('viewType', t);
   };
 
-  const handleUpdatePreset = (val: string) => {
-    console.log('val', val);
-  };
-  watch(
-    () => fenceStore.serverFencePoints,
-    (newVal) => {
-      console.log('newVal', newVal);
-      if (!newVal) {
+  const drawable = computed(() => {
+    if (!presetStore.currentPresetToken) return false;
+    if (!cameraAlgoStore.selectedAlgoId) return false;
+    if (!cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool) return false;
+    return true;
+  });
+
+  watchEffect(() => {
+    if (
+      presetStore.currentPresetToken &&
+      cameraAlgoStore.selectedAlgoId &&
+      cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool
+    ) {
+      const points = fenceStore.serverFencePoints;
+      if (!points) {
         fenceEditorRef.value?.clear();
         return;
       }
-      // const rawLinePoints = newVal[0];
-
-      const rawLinePoints = newVal.map((x) => {
+      const rawLinePoints = points.map((x) => {
         const points: number[] = [];
         x.forEach((line) => {
           points.push(line[0], line[1]);
@@ -150,30 +155,11 @@
       /** 先清空原有的 */
       fenceEditorRef.value?.clear();
       fenceEditorRef.value?.createLines(rawLinePoints);
-    },
-    { immediate: true },
-  );
-
-  watch(
-    () => cameraAlgoStore.selectedAlgoDetail?.status,
-    (newVal) => {
-      if (newVal) {
-        fenceEditorRef.value?.setEditMode();
-      } else {
-        fenceEditorRef.value?.exitEditMode();
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  );
-
-  const drawable = computed(() => {
-    if (!presetStore.currentPresetToken) return false;
-    if (!cameraAlgoStore.selectedAlgoId) return false;
-    if (!cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool) return false;
-    return true;
+      fenceEditorRef.value?.setEditMode();
+      return;
+    }
+    fenceEditorRef.value?.exitEditMode();
+    fenceEditorRef.value?.clear();
   });
 
   const handleAddPreset = () => {