eemcs_ui/src/views/boilerSys/steamHeating/components/lineChildren.vue

<template>
  <div class="line-container">
    <!-- 第一个圆点 -->
    <div class="dot dot-start"></div>
    <!-- 第一条直线 -->
    <div
      class="line line1"
      :style="{
        transform: `rotate(${angle1}deg)`,
        width: lineWidth1Rem + 'rem'
      }"
    ></div>
    <!-- 中间圆点 -->
    <div
      class="dot dot-mid"
      :style="{
        top: (1 + Math.sin((angle1 * Math.PI) / 180) * lineWidth1Rem - 0.025) + 'rem',
        left: (1 + Math.cos((angle1 * Math.PI) / 180) * lineWidth1Rem - 0.025) + 'rem'
      }"
    ></div>
    <!-- 第二条直线 -->
    <div
      class="line line2"
      :style="{
        top: (1 + Math.sin((angle1 * Math.PI) / 180) * lineWidth1Rem) + 'rem',
        left: (1 + Math.cos((angle1 * Math.PI) / 180) * lineWidth1Rem) + 'rem',
        transform: `rotate(${angle2}deg)`,
        width: lineWidth2Rem + 'rem'
      }"
    ></div>
    <!-- 最后一个圆点 -->
    <div
      class="dot dot-end"
      :style="{
        top: endDotTop + 'rem',
        left: endDotLeft + 'rem'
      }"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    // 第一条直线的角度
    angle1: {
      type: Number,
      default: 0
    },
    // 第二条直线的角度
    angle2: {
      type: Number,
      default: 0
    },
    // 第一条直线的宽度（px）
    lineWidth1: {
      type: Number,
      default: 100
    },
    // 第二条直线的宽度（px）
    lineWidth2: {
      type: Number,
      default: 100
    }
  },
  computed: {
    lineWidth1Rem() {
      return this.lineWidth1 / 100;
    },
    lineWidth2Rem() {
      return this.lineWidth2 / 100;
    },
    endDotTop() {
      // 第一条直线终点的 y 坐标
      const firstLineEndY = 1 + Math.sin((this.angle1 * Math.PI) / 180) * this.lineWidth1Rem;
      // 第二条直线在第一条直线基础上终点的 y 坐标偏移量
      const secondLineYOffset = Math.sin((this.angle2 * Math.PI) / 180) * this.lineWidth2Rem;
      return firstLineEndY + secondLineYOffset - 0.025;
    },
    endDotLeft() {
      // 第一条直线终点的 x 坐标
      const firstLineEndX = 1 + Math.cos((this.angle1 * Math.PI) / 180) * this.lineWidth1Rem;
      // 第二条直线在第一条直线基础上终点的 x 坐标偏移量
      const secondLineXOffset = Math.cos((this.angle2 * Math.PI) / 180) * this.lineWidth2Rem;
      return firstLineEndX + secondLineXOffset - 0.025;
    }
  }
};
</script>

<style scoped>
.line-container {
  position: relative;
}

.line {
  position: absolute;
  height: 1px;
  background-color: rgba(0, 255, 255, 0.5);
  transform-origin: left center;
}

.line1 {
  top: 1rem;
  left: 1rem;
}

.dot {
  position: absolute;
  width: 0.05rem;
  height: 0.05rem;
  background-color: aqua;
  border-radius: 50%;
}

.dot-start {
  top: 0.97rem;
  left: 0.97rem;
}
</style>