vent-template/src/views/vent/bundle/bundleMonitorTable/modal/blastDelta.vue

<template>
  <div class="blastDelta">
    <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>
      <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>
      <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>
      <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>
      <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
        <canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
      </div>
      <!-- <div class="line-legend">
        <div class="legend-ite" v-for="ite in 4" :key="ite"></div>
      </div>
      <div class="legend-name">
        <div class="item-name" v-for="item in legendList" :key="item">{{ item.name }}</div>
      </div> -->
    </div>
    <div class="line-legend">
      <div class="legend-box" v-for="(item, index) in legendList" :key="index">
        <span class="legend-icon"></span>
        <span class="legend-label">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
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 };
    },
  },
});
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);
  // 获取canvas元素
  let canvas = document.getElementById('myCanvas');
  let ctx = canvas.getContext('2d');
  let scalcY, scalcX;
  if (coordinateB.x < 50) {
    maxX.value = 50;
    scalcY = canvas.height / maxY.value;
    scalcX = canvas.width / maxX.value;
  } else {
    maxX.value = parseInt(coordinateB.x + 10);
    scalcY = canvas.height / maxY.value;
    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点c连线
  ctx.beginPath();
  ctx.moveTo(coordinateB.x * scalcX, canvas.height - coordinateB.y * scalcY); // 开始绘制的点
  ctx.lineTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * scalcY); // 结束绘制的点
  ctx.strokeStyle = '#000';
  ctx.stroke(); // 进行绘制
  //绘制c点与坐标轴连线
  ctx.beginPath();
  ctx.moveTo(maxX.value * scalcX, canvas.height - getCoordABY(maxX.value) * 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: maxX.value * scalcX, y: canvas.height - getCoordABY(maxX.value) * scalcY },
        { 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();
  });

  // 标记点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)',
    },
  ];

  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();
  });

  // 标记点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 = 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, immediate: true }
);

onMounted(() => {
  getAreas();
});
</script>

<style lang="less" scoped>
.blastDelta {
  position: relative;
  width: 100%;
  height: 450px;

  .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;

      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(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;
        }
      }
    }
  }

  .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%;
    }

    .coord-lineX {
      display: flex;
      position: absolute;
      bottom: -5px;
      right: 10px;
      width: calc(100% - 10px);
      height: 5px;
    }

    .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>