sl-sfy-safety/src/views/map-config/mini-map/components/DefaultTip.vue

<template>
  <div class="tip-content">
    <span v-show="isDefault">默认摄像头</span>
    <span>{{ positionText }}</span>
    <span>{{ sizeText }}</span>
    <div v-if="props.position === TipPositionEnum.TOP" class="tip-narrow bottom"></div>
    <div v-else-if="props.position === TipPositionEnum.BOTTOM" class="tip-narrow top"></div>
    <div v-else-if="props.position === TipPositionEnum.RIGHT" class="tip-narrow left"></div>
    <div v-else class="tip-narrow right"></div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { TipPositionEnum, camerasGroupType } from '../type';

const props = withDefaults(defineProps<{ position: TipPositionEnum; isDefault: boolean, cameraInfo: camerasGroupType | undefined }>(), {
  position: TipPositionEnum.TOP,
});
const positionText = computed(() => {
  const cameraInfo = props.cameraInfo;
  if (!cameraInfo) return ''
  const x = cameraInfo.groupConfig.x?.toFixed(2);
  const y = cameraInfo.groupConfig.y?.toFixed(2);
  return `位置：（x：${x}，y：${y}）`
})
const sizeText = computed(() => {
  const cameraInfo = props.cameraInfo;
  if (!cameraInfo) return ''
  const scaleX = cameraInfo.groupConfig.scaleX ? cameraInfo.groupConfig.scaleX : 1;
  const scaleY = cameraInfo.groupConfig.scaleY ? cameraInfo.groupConfig.scaleY : 1;
  const w = Math.round(cameraInfo.config.width! * scaleX)
  const h = Math.round(cameraInfo.config.height! * scaleY)
  return `大小：（w：${w}，h：${h}）`
})
</script>

<style scoped lang="scss">
.tip-content {
  position: relative;
  padding: 5px;
  background-color: #3c3c3d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  margin: 5px;
}

.tip-narrow {
  position: absolute;
  border: 5px solid transparent;

  &.bottom {
    top: 100%;
    left: 50%;
    border-top-color: #3c3c3d;
    transform: translateX(-50%);
  }

  &.top {
    top: 0%;
    left: 50%;
    border-bottom-color: #3c3c3d;
    transform: translate(-50%, -100%);
  }

  &.left {
    top: 50%;
    left: 0%;
    border-right-color: #3c3c3d;
    transform: translate(-100%, -50%);
  }

  &.right {
    top: 50%;
    right: 0%;
    border-left-color: #3c3c3d;
    transform: translate(100%, -50%);
  }
}
</style>