fix: 增加相机分组来源时隐藏部分按钮

src/modules/algo-params-setting-base/AlgoParamsSettingBase.vue

@@ -13,7 +13,7 @@
       ></div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
-          <CameraViewSetting v-if="cameraDetailStore.cameraId" :cameraAllAlgoList="props.cameraAllAlgoList" />
+          <CameraViewSetting v-if="cameraDetailStore.cameraId" />
           <div class="cameraPlaceholder" v-else>请选择左侧相机</div>
         </div>
       </div>
@@ -21,11 +21,11 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { onMounted, ref, watch } from 'vue';
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { onMounted, ref, watch, provide } from 'vue';
   import { ElIcon } from 'element-plus';
   import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
-  import CameraTreeCom from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
   import useCameraDetailStore from './store/useCameraDetailStore';
   import useCameraAlgoStore from './store/useCameraAlgoStore';
@@ -33,6 +33,8 @@
   import useFenceStore from './store/useFenceStore';
   import { IsPtz } from '@/types/camera/constant';
   import { getCameraDeatilById } from '@/api/camera/camera-preview';
+  import { PROVIDE_CONSTANTS } from './constants';
+  import { AlgoDetail } from '@/api/algo/algo';
 
   const cameraDetailStore = useCameraDetailStore();
   const cameraAlgoStore = useCameraAlgoStore();
@@ -40,7 +42,21 @@
   const presetListStore = usePresetListStore();
 
   const cameraTreeVisible = ref(true);
-  const props = defineProps<{ cameraAllAlgoList: AlgoDetail[] }>();
+
+  interface BaseProps {
+    /** 相机可分配的算法列表 */
+    cameraAllAlgoList: AlgoDetail[];
+    /** 是否是相机分组 */
+    isCameraGroup?: boolean;
+  }
+  const props = defineProps<BaseProps>();
+
+  const baseProps = computed(() => ({
+    cameraAllAlgoList: props.cameraAllAlgoList,
+    isCameraGroup: props.isCameraGroup,
+  }));
+
+  provide(PROVIDE_CONSTANTS.baseProps, baseProps);
 
   watch(
     () => cameraDetailStore.cameraId,

src/modules/algo-params-setting-base/components/AlgoCanSelect/AlgoCanSelect.vue

@@ -5,10 +5,10 @@
       <template #header> <div class="card-title">选择相机关联的算法</div> </template>
       <div class="algo-list">
         <div
-          v-for="(item, index) in props.algoList"
+          v-for="(item, index) in baseProps?.cameraAllAlgoList"
           :key="index"
           class="algo-item"
-          :class="{ active: selectedIds.includes(item.id), disabled: !hasAddPermission }"
+          :class="{ active: selectedIds.includes(item.id), disabled: !hasAddPermission || baseProps.isCameraGroup }"
           @click="handleAlgoSelect(item)"
         >
           <span class="algo-name">{{ item.name }}</span>
@@ -22,7 +22,9 @@
   import { useUserStore } from '@/store/modules/user';
   import { PERM_ALGO } from '@/types/permission/constants';
   import { ElCard } from 'element-plus';
-  import { computed, defineEmits } from 'vue';
+  import { computed, defineEmits, inject } from 'vue';
+  import { BaseProps } from '../../types';
+  import { PROVIDE_CONSTANTS } from '../../constants';
   const emit = defineEmits<{
     (e: 'select', data: number): void;
   }>();
@@ -31,8 +33,8 @@
     id: number;
   }
 
-  const props = defineProps<{ algoList: AlgoItemLabel[]; selectedIds: number[] }>();
-
+  const props = defineProps<{ selectedIds: number[] }>();
+  const baseProps = inject<BaseProps>(PROVIDE_CONSTANTS.baseProps);
   const userStore = useUserStore();
 
   // 处理方法

src/modules/algo-params-setting-base/components/AlgoSwitchCard/AlgoSwitchCard.vue

@@ -3,7 +3,9 @@
     <AlgoSwitchCardBase class="algoWrapper" :class="{ active: isAlgoOpen, selected: isSelected }">
       <div>
         <!-- <div>开关 </div> -->
-        <AlgoSwitchIcon :active="isAlgoOpen" @click.stop="toggleAlgoStatus" />
+        <div style="height: 24px">
+          <AlgoSwitchIcon :active="isAlgoOpen" @click.stop="toggleAlgoStatus" v-show="!baseProps.isCameraGroup" />
+        </div>
         <el-tooltip :content="label" v-if="label.length > 12">
           <div class="algoName">{{ label }}</div>
         </el-tooltip>
@@ -19,7 +21,11 @@
           />
           <!-- <AlgoSettingIcon class="divideLine algoSettingIcon" /> -->
 
-          <div class="divideLine deleteIcon" @click.stop="emits('remove')" v-if="hasDeletePermission()">
+          <div
+            class="divideLine deleteIcon"
+            @click.stop="emits('remove')"
+            v-show="hasDeletePermission() && !baseProps.isCameraGroup"
+          >
             <img :src="deletePng" alt="删除" style="width: 16px; height: 16px" />
           </div>
         </div>
@@ -35,6 +41,11 @@
   import { useUserStore } from '@/store/modules/user';
   import { PERM_ALGO } from '@/types/permission/constants';
   import ElectronicFenceIcon from './ElectronicFenceIcon.vue';
+  import { inject } from 'vue';
+  import { PROVIDE_CONSTANTS } from '../../constants';
+  import { BaseProps } from '../../types';
+
+  const baseProps = inject<BaseProps>(PROVIDE_CONSTANTS.baseProps);
 
   interface Props {
     /** 当前算法是否选中 */

src/modules/algo-params-setting-base/components/CameraViewSetting/CameraViewSetting.vue

@@ -28,9 +28,7 @@
           <CameraLiveVideo />
         </div>
       </div>
-      <div>
-        <AlgoCanSelect :algo-list="props.cameraAllAlgoList" :selected-ids="cameraAlgoIds" @select="handleApplyAlgo"
-      /></div>
+      <div> <AlgoCanSelect :selected-ids="cameraAlgoIds" @select="handleApplyAlgo" /></div>
     </div>
 
     <div
@@ -63,7 +61,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { computed, ref } from 'vue';
   import FenceToolbar from '../FenceToolbar/FenceToolbar.vue';
   import FenceEditor from '../FenceEditorV2/FenceEditor.vue';
   import CameraLiveVideo from '../CameraLiveVideo/CameraLiveVideo.vue';
@@ -78,10 +76,9 @@
   import CameraDirectionControl from '../CameraDirectionControl/CameraDirectionControl.vue';
   import CameraViewScale from './CameraViewScale.vue';
   import { canvasHeight, canvasWidth, domHeight, domWidth } from './constants';
-  import { createCameraAlgoApi, FENCE_ENBALED_STATUS, updateCameraAlgoApi } from '@/api/camera/camera-preview';
+  import { createCameraAlgoApi, updateCameraAlgoApi } from '@/api/camera/camera-preview';
   import { RegionJudge } from '../FenceToolbar/constants';
   import AlgoCanSelect from '../AlgoCanSelect/AlgoCanSelect.vue';
-  import { AlgoDetail, queryAlgoInfoAllByCameraId } from '@/api/algo/algo';
   import { FencePolygonPoints } from '../FenceEditorV2/types';
   import useParamsSettingFn from '../../hooks/useParamsSettingFn';
 
@@ -89,8 +86,6 @@
     (e: 'changeTreeRender', render: number | string): unknown;
   }>();
 
-  const props = defineProps<{ cameraAllAlgoList: AlgoDetail[] }>();
-
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
   const paramsSettingFn = useParamsSettingFn();

src/modules/algo-params-setting-base/constants.ts

@@ -0,0 +1,3 @@
+export const PROVIDE_CONSTANTS = {
+  baseProps: 'baseProps',
+};

src/modules/algo-params-setting-base/types.d.ts

@@ -0,0 +1,8 @@
+import { AlgoDetail } from '@/api/algo/algo';
+
+export interface BaseProps {
+  /** 相机可分配的算法列表 */
+  cameraAllAlgoList: AlgoDetail[];
+  /** 是否是相机分组来源 */
+  isCameraGroup?: boolean;
+}

src/views/cameras/algo-params-setting/AlgoParamsSetting.vue

@@ -1,6 +1,6 @@
 <!-- 算法参数配置页面 -->
 <template>
-  <AlgoParamsSettingBase :cameraAllAlgoList="cameraAllAlgoList">
+  <AlgoParamsSettingBase :cameraAllAlgoList="cameraAllAlgoList" :isCameraGroup="false">
     <template #cameraTree>
       <CameraTree />
     </template>