[Feat 0000] 爆炸三角形immediate watch优化

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

@@ -3,20 +3,16 @@
     <!-- <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>
@@ -38,507 +34,506 @@
 </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, nextTick } 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(); // 进行绘制
-
-  //绘制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)',
-    },
-  ];
+  //根据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(); // 进行绘制
 
-  pointData.forEach((item, index) => {
+    //绘制AE线条
     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.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)',
+      },
+    ];
+
+    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.closePath();
-    ctx.fillStyle = item.color;
+
+    // 标记点A
+    ctx.beginPath();
+    ctx.arc(coordinateA.x * scalcX, canvas.height - coordinateA.y * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
-    ctx.strokeStyle = 'transparent';
-    ctx.lineWidth = 1;
-    ctx.stroke();
-  });
+    // 在点附近添加文字
+    ctx.font = '12px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('A', coordinateA.x * scalcX + 10, canvas.height - coordinateA.y * scalcY); // 文字位置略微偏上，以便于文字与点对齐
 
-  // 标记点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)',
-    },
-  ];
+    //标记点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); // 文字位置略微偏上，以便于文字与点对齐
 
-  pointData.forEach((item, index) => {
+    //标记点E
     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.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)',
+      },
+    ];
+
+    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.closePath();
-    ctx.fillStyle = item.color;
+
+    // 标记点A
+    ctx.beginPath();
+    ctx.arc(0, canvas.height - maxY.value * scalcY, 1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#eee';
     ctx.fill();
-    ctx.strokeStyle = 'transparent';
-    ctx.lineWidth = 1;
-    ctx.stroke();
-  });
+    // 在点附近添加文字
+    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))
+    );
+  }
 
-  // 标记点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;
-      let btTriBlasts = JSON.parse(newV.btTriBlast);
-      coordinateA.x = btTriBlasts.A_x;
-      coordinateA.y = btTriBlasts.A_y;
-      coordinateB.x = btTriBlasts.B_x;
-      coordinateB.y = btTriBlasts.B_y;
-      coordinateE.x = btTriBlasts.E_x;
-      coordinateE.y = btTriBlasts.E_y;
-      coordinateF.x = btTriBlasts.F_x;
-      coordinateF.y = btTriBlasts.F_y;
-      coordinateG.x = btTriBlasts.G_x;
-      coordinateG.y = btTriBlasts.G_y;
-      if (
-        !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
-        (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
-      ) {
-        getUnblast();
-      } else {
-        getBlast();
+  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;
+        let btTriBlasts = JSON.parse(newV.btTriBlast);
+        coordinateA.x = btTriBlasts.A_x;
+        coordinateA.y = btTriBlasts.A_y;
+        coordinateB.x = btTriBlasts.B_x;
+        coordinateB.y = btTriBlasts.B_y;
+        coordinateE.x = btTriBlasts.E_x;
+        coordinateE.y = btTriBlasts.E_y;
+        coordinateF.x = btTriBlasts.F_x;
+        coordinateF.y = btTriBlasts.F_y;
+        coordinateG.x = btTriBlasts.G_x;
+        coordinateG.y = btTriBlasts.G_y;
+        if (
+          !((coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x)) ||
+          (coordinateA.y - coordinateB.y) / (coordinateA.x - coordinateB.x) == 1
+        ) {
+          // 使用 nextTick 为了让 immediate watch 触发时等待组件挂载后执行绘制
+          nextTick(getUnblast);
+        } else {
+          nextTick(getBlast);
+        }
       }
-    }
-  },
-  { deep: true }
-);
+    },
+    { deep: true, immediate: true }
+  );
 
-onMounted(() => {
-  getAreas();
-});
+  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);
-    display: flex;
-    justify-content: space-around;
-
-    .legend-box {
+  .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;
-     
-      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;
+      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;
+          }
         }
-      }
 
-      &: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 {
+    .coords {
       position: absolute;
-      left: -25px;
-      top: -5px;
-      width: 20px;
-      height: 100%;
-    }
+      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-lineX {
-      display: flex;
-      position: absolute;
-      bottom: -5px;
-      right: 10px;
-      width: calc(100% - 10px);
-      height: 5px;
-    }
+      .coord-labelY {
+        position: absolute;
+        left: -25px;
+        top: -5px;
+        width: 20px;
+        height: 100%;
+      }
 
-    .coord-labelX {
-      display: flex;
-      justify-content: flex-end;
-      position: absolute;
-      bottom: -25px;
-      left: -5px;
-      width: 100%;
-      height: 20px;
-    }
+      .coord-lineX {
+        display: flex;
+        position: absolute;
+        bottom: -5px;
+        right: 10px;
+        width: calc(100% - 10px);
+        height: 5px;
+      }
 
-    .line-AB {
-      position: absolute;
-      left: 0;
-      top: 10px;
-    }
+      .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;
-    //   }
-    // }
+      // .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>