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

<template>
  <div style="display: flex; margin-left: 16px" v-if="cameraDetailStore.detail">
    <div style="margin-top: 2px; margin-right: 4px">渲染开关</div>
    <ElSelect v-model="selectedIds" @change="changeRender" style="width: 150px" size="small">
      <ElOption value="none" label="无渲染">无渲染</ElOption>
      <ElOption value="demo" label="有渲染">有渲染</ElOption>
      <!-- <ElOption v-for="item in allAlgoList" :key="item.id" :value="item.id" :label="item.name">
        {{ item.name }}
        <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
      </ElOption> -->
    </ElSelect></div
  >
</template>
<script lang="ts" setup>
  import { ElSelect, ElOption, ElMessageBox } from 'element-plus';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import { ref } from 'vue';
  import { renderCamera } from '@/api/camera/camera-preview';
  import { watch } from 'vue';

  const cameraDetailStore = useCameraDetailStore();

  enum RenderTypes {
    none = 'none',
    demo = 'demo',
  }

  const selectedIds = ref<number | string>('');

  const changeRender = (val) => {
    const trueRender = val === RenderTypes.none ? '' : val;
    const renderData = {
      render: trueRender,
      cameraId: cameraDetailStore.cameraId,
    };
    renderCamera(renderData).catch(() => {
      selectedIds.value = RenderTypes.none;

      ElMessageBox.alert('开启数量达到上限，请关闭其他相机渲染后再开启。', '渲染开启失败', {
        type: 'warning',
      });
    });
  };

  const changeRenderWatch = () => {
    if (!cameraDetailStore.detail?.render) {
      selectedIds.value = RenderTypes.none;
    } else {
      selectedIds.value = cameraDetailStore.detail?.render;
    }
  };

  watch(() => cameraDetailStore.cameraId, changeRenderWatch, { immediate: true });
  watch(() => cameraDetailStore.detail?.render, changeRenderWatch, { immediate: true });
</script>
<style scoped></style>