sl-sfy-safety/src/views/cameras/preview/components/AlgorithmsSetting/AlgorithmsSetting.vue

<template>
  <div>
    <div style="font-size: 14px; font-weight: bold">算法配置</div>
    <div style="display: flex">
      <div class="algoTagWrapper">
        <AddAlgoDialog />

        <AlgoTag
          v-for="item in cameraAlgoList"
          :key="item.code"
          :label="item.algoInfo?.name"
          :is-active="item.algoId === selectedAlgoId"
          @click="handleSelectAlgo(item.algoId)"
          :is-open="item.status === ALGO_ENABLED_STATUS.enabled"
        />
      </div>
      <div>
        <AlgoSettingCard
          @on-submit="handleSubmit"
          @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 useCameraAlgoStore from '../../store/useCameraAlgoStore';
  import AlgoSettingCard from './AlgoSettingCard.vue';
  import { storeToRefs } from 'pinia';
  import {
    deleteCameraAlgoApi,
    updateCameraAlgoApi,
    FENCE_ENBALED_STATUS,
  } from '@/api/camera/camera-preview';
  import { ElMessage } from 'element-plus';
  import AlgoTag from './AlgoTag.vue';
  import useFenceStore from '../../store/useFenceStore';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import usePresetListStore from '../../store/usePresetListStore';
  import AddAlgoDialog from './AddAlgoDialog.vue';
  import { createDefaultTime, getDetectionJSON, getDetectionTimeJSON } from './utils';
  import { ALGO_ENABLED_STATUS } from '@/api/camera/camera-preview';
  import { watchEffect } from 'vue';

  const cameraAlgoStore = useCameraAlgoStore();
  const fenceStore = useFenceStore();
  const presetStore = usePresetListStore();

  const { getCameraAlgoList, getAlgoDetail } = cameraAlgoStore;
  const { cameraAlgoList, selectedAlgoId, selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
  const cameraDetailStore = useCameraDetailStore();

  const handleSelectAlgo = (algoId: number) => {
    if (algoId !== selectedAlgoId.value) {
      selectedAlgoId.value = algoId;
    }
  };

  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 = detail?.status === ALGO_ENABLED_STATUS.enabled ? true : false;
    const electronicFenceBool =
      detail?.electronicFence === FENCE_ENBALED_STATUS.enabled ? true : false;

    const timeRangeArr = getDetectionTimeJSON(detail?.detectionTime) || [createDefaultTime()];

    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);
    const cameraId = cameraDetailStore.cameraId;
    const newParam = {
      cameraId: cameraId,
      electronicFence: param.electronicFence,
      algoId: param.algoId,
      detectionFrequency: param.detectionFrequency,
      detectionTime: param.detectionTime,
      status: param.status,
    };
    if (param.id) {
      updateCameraAlgoApi({ ...newParam, id: param.id }).then(() => {
        ElMessage.success('更新成功');
        getCameraAlgoList(cameraId);
      });
    }
  };

  const handleRemove = (algoId: number) => {
    console.log('remove', algoId);
    deleteCameraAlgoApi({ algoId, cameraId: cameraDetailStore.cameraId }).then(() => {
      ElMessage.success('删除成功');
      getCameraAlgoList(cameraDetailStore.cameraId);
      selectedAlgoId.value = undefined;
    });
  };
</script>
<style scoped>
  .algoTagWrapper {
    min-width: 150px;
    margin-right: 15px;
  }
</style>