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

<template>
  <!-- <ElButton type="primary" @click="showDialog" size="small" style="margin-top: 10px">
    + 添加算法</ElButton
  > -->
  <AlgoAddBtn @click="showDialog"></AlgoAddBtn>

  <ElDialog
    v-model="visible"
    title="添加算法"
    @close="handleClose"
    width="500px"
    :close-on-click-modal="!algoListVisiable"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <span>算法：</span>
      <ElSelect
        v-model="selectedIds"
        multiple
        style="width: 224px"
        size="small"
        @visible-change="handleVisibleChange"
        placeholder="请为该相机选择关联的算法"
      >
        <ElOption
          v-for="item in curOptionsByCode"
          :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>
    </div>

    <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, onMounted } from 'vue';
  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
  import { storeToRefs } from 'pinia';
  import { createCameraAlgoApi } from '@/api/camera/camera-preview';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import AlgoAddBtn from '../AlgoSwitchCard/AlgoAddBtn.vue';
  import { AlgoDetail, queryAlgoInfoAll } from '@/api/algo/algo';

  const selectedIds = ref<number[]>([]);
  const cameraAlgoStore = useCameraAlgoStore();

  const { isAlgoBind } = cameraAlgoStore;
  // const { allAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
  const { getCameraAlgoList } = cameraAlgoStore;
  const cameraDetailStore = useCameraDetailStore();
  const { detail } = storeToRefs(cameraDetailStore);

  const visible = ref(false);
  const algoListVisiable = ref(false);
  const handleClose = () => {
    visible.value = false;
  };

  const curOptionsByCode = ref<AlgoDetail[]>([]);

  onMounted(() => {
    queryAlgoInfoAll().then((res) => {
      curOptionsByCode.value = res;
    });
  });

  const handleVisibleChange = (visible: boolean) => {
    const t = setTimeout(() => {
      algoListVisiable.value = visible;
      clearTimeout(t);
    }, 100);
  };

  const handleSubmit = () => {
    if (selectedIds.value?.length < 1) {
      ElMessage.warning({ message: '请选择算法' });
      return;
    }
    createCameraAlgoApi({
      algoIds: selectedIds.value || [],
      cameraId: cameraDetailStore.cameraId,
    }).then((res) => {
      console.log('createAlgo ok', res);
      // selectedAlgoId.value = selectedIds.value?.[0];
      getCameraAlgoList(cameraDetailStore.cameraId);
      ElMessage.success('添加成功，请完成算法参数配置后生效');
      visible.value = false;
    });
  };

  const showDialog = () => {
    visible.value = true;
    selectedIds.value = [];
  };
</script>
<style scoped>
  :deep(.el-select .el-input__inner) {
    min-height: 32px;
  }
</style>