对接蒸汽采暖运行监测页面

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

@@ -0,0 +1,120 @@
+<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>