sl-sfy-safety/src/views/cameras/algo-params-setting/components/FenceToolbar/FenceToolbar.vue

<template>
  <div class="fenceWrapper">
    <div>
      <div>电子围栏</div>
      <ElSwitch size="small" class="fenceSwitchBtn" />
    </div>
    <PresetSelect />

    <div style="display: flex"> <ElCheckbox label="检测围栏外部" /> <ElCheckbox label="前台画面显示" /> </div>
    <div><FenceNameItem /></div>

    <div class="toolbar">
      <!-- <div class="fenceDrawingTip" v-if="isEdit">
        {{ cameraAlgoStore.selectedAlgoDetail?.algoInfo?.name }}算法电子围栏绘制中
      </div> -->
      <template v-if="props.isEdit">
        <!-- <ToolbarIcon
        :src="deleteIcon"
        :active="false"
        @click="emits('toggleFence')"
        tip="检测范围反选"
      /> -->
        <ToggleFenceStatus @click="emits('toggleRange')" />
        <ToolbarIcon :src="deleteIcon" :active="false" @click="emits('remove')" tip="删除电子围栏" />
        <ToolbarIcon :src="saveIcon" :active="false" @click="emits('save')" tip="保存电子围栏" />
      </template>

      <ElButton type="primary" size="small" @click="toggleEdit">{{
        props.isEdit ? '退出编辑' : '编辑电子围栏'
      }}</ElButton>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { defineEmits } from 'vue';
  import { ElButton, ElSwitch } from 'element-plus';
  import ToolbarIcon from '../ToolbarIcon/ToolbarIcon.vue';
  import saveIcon from '@/assets/images/camera/save.png';
  import deleteIcon from '@/assets/images/camera/delete.png';
  import ToggleFenceStatus from './ToggleFenceStatus.vue';
  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
  import PresetSelect from '../PresetSelect/PresetSelect.vue';
  import FenceNameItem from './FenceNameItem.vue';

  const cameraAlgoStore = useCameraAlgoStore();

  const props = defineProps<{ isEdit: boolean }>();

  const emits = defineEmits<{
    (e: 'toggleEditable', editState: boolean): unknown;
    (e: 'toggleRange'): unknown;
    (e: 'remove'): unknown;
    (e: 'save'): unknown;
  }>();

  const toggleEdit = () => {
    emits('toggleEditable', !props.isEdit);
  };
</script>

<style scoped>
  .toolbar {
    display: flex;

    align-items: center;
    z-index: 10;
    padding: 5px;
    border-radius: 50px;
  }
  .fenceDrawingTip {
    background: #e8f5ff;
    border-radius: 6px;
    border: 1px solid #bae0ff;
    text-align: center;
    font-size: 12px;
    padding: 2px 20px;
    margin-right: 30px;
    color: #1890ff;
  }

  .fenceSwitchBtn {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .fenceWrapper {
    padding: 15px;
  }
</style>