[Revt 0000] 恢复爆炸三角形代码

src/views/vent/monitorManager/deviceMonitor/components/device/modal/blastDelta.vue

@@ -3,16 +3,20 @@
     <!-- <div class="blast-title">爆炸三角形</div> -->
     <div ref="coord" class="coords">
       <div class="coord-lineY">
-        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
+        <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10"
+          :key="item"></div>
       </div>
       <div class="coord-labelY">
-        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
+        <div :style="{ width: '20px', height: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 10" :key="ind">{{ ind
+          == 0 ? maxY : '' }}</div>
       </div>
       <div class="coord-lineX">
-        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
+        <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15"
+          :key="item"></div>
       </div>
       <div class="coord-labelX">
-        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
+        <div :style="{ height: '20px', width: `${lengY}px`, color: '#fff' }" v-for="(ite, ind) in 15" :key="ind">{{ ind
+          == 14 ? maxX : '' }}</div>
       </div>
       <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
         <canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
@@ -34,236 +38,333 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, watch } from 'vue';
-
-  let props = defineProps({
-    posMonitor: {
-      type: Object,
-      default: () => {
-        return {};
-      },
+import { ref, reactive, onMounted, watch } from 'vue';
+
+let props = defineProps({
+  posMonitor: {
+    type: Object,
+    default: () => {
+      return {};
     },
-    canvasSize: {
-      type: Object,
-      default: () => {
-        return { width: 348, height: 245 };
-      },
+  },
+  canvasSize: {
+    type: Object,
+    default: () => {
+      return { width: 348, height: 245 };
     },
-  });
-  let coord = ref(null);
-  let lengY = ref(0);
-  //与x,y轴相交最大值坐标
-  let maxY = ref(0);
-  let maxX = ref(0);
-  let maxY1 = ref(0);
-  let maxX1 = ref(0);
-
-  //A点坐标
-  let coordinateA = reactive({
-    x: 0,
-    y: 0,
-  });
-  //B点坐标
-  let coordinateB = reactive({
-    x: 0,
-    y: 0,
-  });
-  //E点坐标
-  let coordinateE = reactive({
-    x: 0,
-    y: 0,
-  });
-  //F点坐标
-  let coordinateF = reactive({
-    x: 0,
-    y: 0,
-  });
-  //G点坐标
-  let coordinateG = reactive({
-    x: 0,
-    y: 0,
-  });
-
-  let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
-
-  function getAreas() {
-    if (coord.value) {
-      let width = coord.value.offsetWidth;
-      let height = coord.value.offsetHeight;
-      lengY.value = Math.ceil((height - 10) / 10);
-    }
+  },
+});
+let coord = ref(null);
+let lengY = ref(0);
+//与x,y轴相交最大值坐标
+let maxY = ref(0);
+let maxX = ref(0);
+let maxY1 = ref(0);
+let maxX1 = ref(0);
+
+//A点坐标
+let coordinateA = reactive({
+  x: 0,
+  y: 0,
+});
+//B点坐标
+let coordinateB = reactive({
+  x: 0,
+  y: 0,
+});
+//E点坐标
+let coordinateE = reactive({
+  x: 0,
+  y: 0,
+});
+//F点坐标
+let coordinateF = reactive({
+  x: 0,
+  y: 0,
+});
+//G点坐标
+let coordinateG = reactive({
+  x: 0,
+  y: 0,
+});
+
+let legendList = ref<any[]>([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
+
+function getAreas() {
+  if (coord.value) {
+    let width = coord.value.offsetWidth;
+    let height = coord.value.offsetHeight;
+    lengY.value = Math.ceil((height - 10) / 10);
   }
-  //根据A,B,E,G等点坐标绘制爆炸三角形
-  function getBlast() {
-    maxY.value = getCoordABY(0);
-    // maxX.value = getCoordABX(0);
-    maxX.value = 50;
-    // 获取canvas元素
-    let canvas = document.getElementById('myCanvas');
-    let ctx = canvas.getContext('2d');
-    let scalcY = canvas.height / maxY.value;
-    let scalcX = canvas.width / maxX.value;
-
-    //绘制AB点线条
-    ctx.beginPath();
-    ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
-    ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
-    ctx.strokeStyle = '#000';
-    ctx.stroke(); // 进行绘制
-
-    // 标记点A
-    ctx.beginPath();
-    ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
-    ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
-
-    //标记点B
-    ctx.beginPath();
-    ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
-    ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+}
+//根据A,B,E,G等点坐标绘制爆炸三角形
+function getBlast() {
+  maxY.value = getCoordABY(0);
+  // maxX.value = getCoordABX(0);
+  maxX.value = 50;
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas');
+  let ctx = canvas.getContext('2d');
+  let scalcY = canvas.height / maxY.value;
+  let scalcX = canvas.width / maxX.value;
+
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制AE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制BE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制A点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制B点与坐标轴连线
+  ctx.beginPath();
+  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制E,F线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  //绘制GE线条
+  ctx.beginPath();
+  ctx.moveTo(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY); // 开始绘制的点
+  ctx.lineTo(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+        { x: 0, y: canvas.height - maxY.value * scalcY },
+      ],
+      color: 'rgb(1, 127, 2, .9)',
+    },
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateG.x * scalcX, y: canvas.height - coordinateG.y * scalcY }, //G
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateF.x * scalcX, y: canvas.height - coordinateF.y * scalcY }, //F
+        { x: maxX.value * scalcX, y: canvas.height },
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+      ],
+      color: 'rgb(255, 255, 0, .9)',
+    },
+    {
+      arr: [
+        { x: coordinateE.x * scalcX, y: canvas.height - coordinateE.y * scalcY }, //E
+        { x: coordinateB.x * scalcX, y: canvas.height - coordinateB.y * scalcY }, //B
+        { x: coordinateA.x * scalcX, y: canvas.height - coordinateA.y * scalcY }, //A
+      ],
+      color: 'rgb(255, 0, 0, .9)',
+    },
+  ];
 
-    //标记点E
+  pointData.forEach((item, index) => {
     ctx.beginPath();
-    ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
+    });
+    ctx.closePath();
+    ctx.fillStyle = item.color;
     ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
 
-    //标记点G
-    ctx.beginPath();
-    ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
-    ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
-    //标记点F
-    ctx.beginPath();
-    ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
-    ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
-    //标记点
-    ctx.beginPath();
-    ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
-    ctx.fillStyle = 'blue';
-    ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
-  }
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点B
+  ctx.beginPath();
+  ctx.arc(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', coordinateB.x * scalcX + 10, canvas.height - coordinateB.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点E
+  ctx.beginPath();
+  ctx.arc(coordinateE.x * scalcX, canvas.height - coordinateE.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('E', coordinateE.x * scalcX + 5, canvas.height - coordinateE.y * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+
+  //标记点G
+  ctx.beginPath();
+  ctx.arc(coordinateG.x * scalcX, canvas.height - coordinateG.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('G', coordinateG.x * scalcX + 5, canvas.height - coordinateG.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点F
+  ctx.beginPath();
+  ctx.arc(coordinateF.x * scalcX, canvas.height - coordinateF.y * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('F', coordinateF.x * scalcX + 10, canvas.height - coordinateF.y * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//绘制不爆炸三角形
+function getUnblast() {
+  maxY.value = 21;
+  maxX.value = 50;
+  // 获取canvas元素
+  let canvas = document.getElementById('myCanvas');
+  let ctx = canvas.getContext('2d');
+  let scalcY = canvas.height / maxY.value;
+  let scalcX = canvas.width / maxX.value;
+
+  //绘制AB点线条
+  ctx.beginPath();
+  ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
+  ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
+  ctx.strokeStyle = '#000';
+  ctx.stroke(); // 进行绘制
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  let pointData = [
+    {
+      arr: [
+        { x: 0, y: canvas.height }, //原点
+        { x: 0, y: canvas.height - maxY.value * scalcY }, //A
+        { x: maxX.value * scalcX, y: canvas.height }, //B
+      ],
+      color: 'rgb(127, 254, 2, .9)',
+    },
+  ];
 
-  //绘制不爆炸三角形
-  function getUnblast() {
-    maxY.value = 21;
-    maxX.value = 100;
-    // 获取canvas元素
-    let canvas = document.getElementById('myCanvas');
-    let ctx = canvas.getContext('2d');
-    let scalcY = canvas.height / maxY.value;
-    let scalcX = canvas.width / maxX.value;
-
-    //绘制AB点线条
+  pointData.forEach((item, index) => {
     ctx.beginPath();
-    ctx.moveTo(0, canvas.height - maxY.value * scalcY); // 开始绘制的点
-    ctx.lineTo(maxX.value * scalcX, canvas.height); // 结束绘制的点
-    ctx.strokeStyle = '#000';
-    ctx.stroke(); // 进行绘制
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    let pointData = [
-      {
-        arr: [
-          { x: 0, y: canvas.height }, //原点
-          { x: 0, y: canvas.height - maxY.value * scalcY }, //A
-          { x: maxX.value * scalcX, y: canvas.height }, //B
-        ],
-        color: 'rgb(127, 254, 2, .9)',
-      },
-    ];
-
-    pointData.forEach((item, index) => {
-      ctx.beginPath();
-      ctx.moveTo(item.arr[0].x, item.arr[0].y);
-      item.arr.forEach((items, ind) => {
-        if (ind != 0) {
-          ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
-        }
-      });
-      ctx.closePath();
-      ctx.fillStyle = item.color;
-      ctx.fill();
-      ctx.strokeStyle = 'transparent';
-      ctx.lineWidth = 1;
-      ctx.stroke();
+    ctx.moveTo(item.arr[0].x, item.arr[0].y);
+    item.arr.forEach((items, ind) => {
+      if (ind != 0) {
+        ctx.lineTo(item.arr[ind].x, item.arr[ind].y);
+      }
     });
-
-    // 标记点A
-    ctx.beginPath();
-    ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
-    ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
-    // 标记点B
-    ctx.beginPath();
-    ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
-    ctx.fillStyle = '#eee';
-    ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
-    //标记点
-    ctx.beginPath();
-    ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
-    ctx.fillStyle = 'blue';
+    ctx.closePath();
+    ctx.fillStyle = item.color;
     ctx.fill();
-    // 在点附近添加文字
-    ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
-    ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
-  }
-  //根据横坐标获取直线AB纵坐标
-  function getCoordABY(params) {
-    return Math.ceil(
-      ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
-        parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
-        parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
-        (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
-    );
-  }
-  //根据纵坐标获取直线AB横坐标
-  function getCoordABX(params1) {
-    return Math.floor(
-      ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
-        parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
-        parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
-        (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
-    );
-  }
+    ctx.strokeStyle = 'transparent';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  });
 
-  // 单独写为一个方法是为了兼容未初始化时已经有数据的情况下也能正确显示三角形
-  function watchHandler(newV) {
+  // 标记点A
+  ctx.beginPath();
+  ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('A', 10, canvas.height - maxY.value * scalcY + 10); // 文字位置略微偏上，以便于文字与点对齐
+  // 标记点B
+  ctx.beginPath();
+  ctx.arc(maxX.value * scalcX, canvas.height, 1, 0, 2 * Math.PI);
+  ctx.fillStyle = '#eee';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('B', maxX.value * scalcX - 10, canvas.height - 10); // 文字位置略微偏上，以便于文字与点对齐
+  //标记点
+  ctx.beginPath();
+  ctx.arc(maxX1.value * scalcX, canvas.height - maxY1.value * scalcY, 5, 0, 2 * Math.PI);
+  ctx.fillStyle = 'blue';
+  ctx.fill();
+  // 在点附近添加文字
+  ctx.font = '12px Arial';
+  ctx.fillStyle = '#fff';
+  ctx.fillText('', maxX1.value * scalcX + 10, canvas.height - maxY1.value * scalcY - 10); // 文字位置略微偏上，以便于文字与点对齐
+}
+//根据横坐标获取直线AB纵坐标
+function getCoordABY(params) {
+  return Math.ceil(
+    ((parseFloat(coordinateB.y) - parseFloat(coordinateA.y)) * params -
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) +
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+    (parseFloat(coordinateB.x) - parseFloat(coordinateA.x))
+  );
+}
+//根据纵坐标获取直线AB横坐标
+function getCoordABX(params1) {
+  return Math.floor(
+    ((parseFloat(coordinateB.x) - parseFloat(coordinateA.x)) * params1 +
+      parseFloat(coordinateA.x) * parseFloat(coordinateB.y) -
+      parseFloat(coordinateB.x) * parseFloat(coordinateA.y)) /
+    (parseFloat(coordinateB.y) - parseFloat(coordinateA.y))
+  );
+}
+
+watch(
+  () => props.posMonitor,
+  (newV, oldV) => {
     if (newV.btTriBlast) {
       maxY1.value = parseFloat(newV.o2val);
       maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
@@ -287,156 +388,157 @@
         getBlast();
       }
     }
-  }
+  },
+  { deep: true }
+);
 
-  watch(() => props.posMonitor, watchHandler, { deep: true });
-
-  onMounted(() => {
-    getAreas();
-    watchHandler(props.posMonitor);
-  });
+onMounted(() => {
+  getAreas();
+});
 </script>
 
 <style lang="less" scoped>
-  .blastDelta {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    // .blast-title {
-    //   position: absolute;
-    //   left: 50%;
-    //   top: 24px;
-    //   transform: translate(-50%, 0);
-    //   font-size: 12px;
-    //   color: #fff;
-    // }
-
-    .line-legend {
-      position: absolute;
-      left: 50%;
-      top: 20px;
-      width: 75%;
-      height: 20px;
-      transform: translate(-50%, 0);
+.blastDelta {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  // .blast-title {
+  //   position: absolute;
+  //   left: 50%;
+  //   top: 24px;
+  //   transform: translate(-50%, 0);
+  //   font-size: 12px;
+  //   color: #fff;
+  // }
+
+  .line-legend {
+    position: absolute;
+    left: 50%;
+    top: 20px;
+    width: 75%;
+    height: 20px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: space-around;
+
+    .legend-box {
       display: flex;
-      justify-content: space-around;
-
-      .legend-box {
-        display: flex;
-
-        height: 100%;
-        justify-content: center;
-        align-items: center;
-        font-size: 12px;
-
-        &:nth-child(1) {
-          flex: 1;
-          .legend-icon {
-            width: 10px;
-            height: 10px;
-            background-color: #7ffe02;
-            margin-right: 5px;
-          }
+     
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+
+      &:nth-child(1) {
+        flex: 1;
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #7ffe02;
+          margin-right: 5px;
         }
+      }
 
-        &:nth-child(2) {
-          flex: 1.5;
-          .legend-icon {
-            width: 10px;
-            height: 10px;
-            background-color: #017f02;
-            margin-right: 5px;
-          }
+      &:nth-child(2) {
+        flex: 1.5;
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #017f02;
+          margin-right: 5px;
         }
+      }
 
-        &:nth-child(3) {
-          flex: 1;
-          .legend-icon {
-            width: 10px;
-            height: 10px;
-            background-color: #ff0000;
-            margin-right: 5px;
-          }
+      &:nth-child(3) {
+        flex:1;
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ff0000;
+          margin-right: 5px;
         }
+      }
 
-        &:nth-child(4) {
-          flex: 1;
-          .legend-icon {
-            width: 10px;
-            height: 10px;
-            background-color: #ffff00;
-            margin-right: 5px;
-          }
+      &:nth-child(4) {
+        flex:1;
+        .legend-icon {
+          width: 10px;
+          height: 10px;
+          background-color: #ffff00;
+          margin-right: 5px;
         }
       }
     }
+  }
 
-    .coords {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 90%;
-      height: 80%;
-      border-left: 1px solid #006c9d;
-      border-bottom: 1px solid #006c9d;
-      transform: translate(-45%, -46%);
-
-      .coord-lineY {
-        position: absolute;
-        left: -5px;
-        top: 10px;
-        width: 5px;
-        height: calc(100% - 10px);
-      }
 
-      .coord-labelY {
-        position: absolute;
-        left: -25px;
-        top: -5px;
-        width: 20px;
-        height: 100%;
-      }
+  .coords {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 90%;
+    height: 80%;
+    border-left: 1px solid #006c9d;
+    border-bottom: 1px solid #006c9d;
+    transform: translate(-45%, -46%);
 
-      .coord-lineX {
-        display: flex;
-        position: absolute;
-        bottom: -5px;
-        right: 10px;
-        width: calc(100% - 10px);
-        height: 5px;
-      }
+    .coord-lineY {
+      position: absolute;
+      left: -5px;
+      top: 10px;
+      width: 5px;
+      height: calc(100% - 10px);
+    }
 
-      .coord-labelX {
-        display: flex;
-        justify-content: flex-end;
-        position: absolute;
-        bottom: -25px;
-        left: -5px;
-        width: 100%;
-        height: 20px;
-      }
+    .coord-labelY {
+      position: absolute;
+      left: -25px;
+      top: -5px;
+      width: 20px;
+      height: 100%;
+    }
 
-      .line-AB {
-        position: absolute;
-        left: 0;
-        top: 10px;
-      }
+    .coord-lineX {
+      display: flex;
+      position: absolute;
+      bottom: -5px;
+      right: 10px;
+      width: calc(100% - 10px);
+      height: 5px;
+    }
 
-      // .legend-name {
-      //   position: absolute;
-      //   right: 0;
-      //   top: 20px;
-      //   height: 80px;
-
-      //   .item-name {
-      //     height: 20px;
-      //     line-height: 20px;
-      //     font-size: 10px;
-      //     color: #fff;
-      //     letter-spacing: 2px;
-      //   }
-      // }
+    .coord-labelX {
+      display: flex;
+      justify-content: flex-end;
+      position: absolute;
+      bottom: -25px;
+      left: -5px;
+      width: 100%;
+      height: 20px;
+    }
+
+    .line-AB {
+      position: absolute;
+      left: 0;
+      top: 10px;
     }
+
+
+    // .legend-name {
+    //   position: absolute;
+    //   right: 0;
+    //   top: 20px;
+    //   height: 80px;
+
+    //   .item-name {
+    //     height: 20px;
+    //     line-height: 20px;
+    //     font-size: 10px;
+    //     color: #fff;
+    //     letter-spacing: 2px;
+    //   }
+    // }
   }
+}
 </style>