gas-injection/src/views/vent/monitorManager/alarmMonitor/common/warnZb.vue

<template>
  <div class="warnZb">
    <div ref="coord" class="coords" :style="{ width: widthV, height: heightV }">
      <div class="triangle-x"></div>
      <div class="triangle-y"></div>
      <div class="coord-dw">
        <div class="dw-item" :style="{ bottom: `${coordDw[0]}px` }">30~40℃</div>
        <div class="dw-item" :style="{ bottom: `${coordDw[1]}px` }">50~60℃</div>
        <div class="dw-item" :style="{ bottom: `${coordDw[2]}px` }">70~80℃</div>
        <div class="dw-item" :style="{ bottom: `${coordDw[3]}px` }">90~110℃</div>
        <div class="dw-item" :style="{ bottom: `${coordDw[4]}px` }">130~160℃</div>
        <div class="dw-item" :style="{ bottom: `${coordDw[5]}px` }">210~350℃</div>
      </div>
      <div class="coord-bj">
        <div class="bj-qfq" :style="{ width: widthCanvas < 600 ? '180px' : '401px' }">
          <div class="left-jt"></div>
          <div class="line"></div>
          <div class="right-jt"></div>
          <div class="text">潜伏期</div>
        </div>
        <div class="bj-zrq" :style="{ width: widthCanvas < 600 ? '360px' : '699px' }">
          <div class="left-jt"></div>
          <div class="line"></div>
          <div class="right-jt"></div>
          <div class="text">自热期</div>
        </div>
        <div class="bj-rsq" :style="{ width: widthCanvas < 600 ? '90px' : '305px' }">
          <div class="left-jt"></div>
          <div class="line"></div>
          <div class="text">燃烧期</div>
        </div>
      </div>
      <div class="coord-area" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)',overflow:'hidden' }">
        <canvas id="myCanvas" :width="widthCanvas" :height="heightCanvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';

let props = defineProps({
  widthV: {
    type: String,
    default: '',
  },
  heightV: {
    type: String,
    default: '',
  },
  coordDw: {
    type: Array,
    default: () => {
      return [];
    },
  },
  widthCanvas: {
    type: Number,
    default: 0,
  },
  heightCanvas: {
    type: Number,
    default: 0,
  },
  warnLevel: {
    type: String,
    default: ''
  }
});

let coord = ref(null);
let lengY = ref(0);
//与x,y轴相交最大值坐标
let maxY = ref(0);
let maxX = ref(0);
function getAreas() {
  if (coord.value) {
    let width = coord.value.offsetWidth;
    let height = coord.value.offsetHeight;
    lengY.value = Math.ceil((height - 10) / 10);
  }
}
function getCanvas() {
  // 获取canvas元素
  let canvas = document.getElementById('myCanvas');
  let ctx = canvas.getContext('2d');
  let x = 0;
  let step = props.widthCanvas < 600 ? 0.02 : 0.05; // 设置每次递增的长度
  let y = props.widthCanvas < 600 ? 280 : 230; // 初始y坐标
  // 设置线条样式
  ctx.strokeStyle = '#3df6ff'; // 红色线条
  ctx.lineWidth = 2; // 线宽为2
  // 初始化曲线数据
  let xValues: any[] = [];
  let yValues: any[] = [];
  for (let i = 0; i < 30000; i++) {
    x += step;
    if (props.widthCanvas < 600) {
      y -= (step * Math.random() * i) / 15000; // 随机增加长度，使曲线更加平滑
    } else {
      y -= (step * Math.random() * i) / 30000; // 随机增加长度，使曲线更加平滑
    }

    xValues[i] = x;
    yValues[i] = y;
  }
  // 绘制递增曲线
  ctx.beginPath();
  ctx.moveTo(xValues[0], yValues[0]);
  for (var i = 1; i < xValues.length; i++) {
    ctx.lineTo(xValues[i], yValues[i]);
    if(props.warnLevel=='1'){
      ctx.fillStyle = 'rgba(145, 230, 9)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=4500){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=4000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }else if(props.warnLevel=='2'){
      ctx.fillStyle = 'rgba(0, 242, 255)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=9000){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=8000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }else if(props.warnLevel=='3'){
      ctx.fillStyle = 'rgba(255, 255, 53)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=13500){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=12000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }else if(props.warnLevel=='4'){
      ctx.fillStyle = 'rgba(255, 190, 105)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=18000){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=16000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }else if(props.warnLevel=='5'){
      ctx.fillStyle = 'rgba(255, 111, 0)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=22500){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=20000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }else if(props.warnLevel=='6'){
      ctx.fillStyle = 'rgba(255, 0, 0)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=27000){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=22000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }
  
  }
  ctx.stroke();

  //标记点1
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  //标记点2
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  //标记点3
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  // 在点附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#ff6363';
  ctx.fillText('临界', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 10, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 15); // 文字位置略微偏上，以便于文字与点对齐
  //标记点4
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  //标记点5
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  // 在点附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#ff6363';
  ctx.fillText('征兆', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 10, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
  //标记点5
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  // 在点附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#ff6363';
  ctx.fillText('火灾', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 10, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐

  // 设置线条样式（颜色、宽度等）
  ctx.strokeStyle = '#0d2973';
  ctx.lineWidth = 1;
  ctx.lineCap = 'round';
  // 定义虚线模式：[线段长度, 间隔长度]
  ctx.setLineDash([5, 5]);
  //绘制标记点1线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点1线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], yValues[props.widthCanvas < 600 ? 4500 : 4000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 4500 : 4000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  // 在线条附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#2aadf3';
  if (props.widthCanvas < 600) {
    ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] + 25); // 文字位置略微偏上，以便于文字与点对齐
    ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] - 5); // 文字位置略微偏上，以便于文字与点对齐
  } else {
    ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 120, yValues[props.widthCanvas < 600 ? 4500 : 4000] + 18); // 文字位置略微偏上，以便于文字与点对齐
    ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 120, yValues[props.widthCanvas < 600 ? 4500 : 4000] - 5); // 文字位置略微偏上，以便于文字与点对齐
  }
  //绘制标记点2线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点2线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], yValues[props.widthCanvas < 600 ? 9000 : 8000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 9000 : 8000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  // 在线条附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#2aadf3';
  if (props.widthCanvas < 600) {
    ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 160, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 12); // 文字位置略微偏上，以便于文字与点对齐
  } else {
    ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 320, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 12); // 文字位置略微偏上，以便于文字与点对齐
  }
  //绘制标记点3线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点3线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], yValues[props.widthCanvas < 600 ? 13500 : 12000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 13500 : 12000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  // 在线条附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#2aadf3';
  if (props.widthCanvas < 600) {
    ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 250, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
  } else {
    ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 520, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
  }
  //绘制标记点4线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点4线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], yValues[props.widthCanvas < 600 ? 18000 : 16000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 18000 : 16000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  // 在线条附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#2aadf3';
  if (props.widthCanvas < 600) {
    ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 340, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
  } else {
    ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 720, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
  }
  //绘制标记点5线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点5线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], yValues[props.widthCanvas < 600 ? 22500 : 20000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 22500 : 20000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  // 在线条附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#2aadf3';
  if (props.widthCanvas < 600) {
    ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 430, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 30); // 文字位置略微偏上，以便于文字与点对齐
  } else {
    ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 920, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 15); // 文字位置略微偏上，以便于文字与点对齐
  }
  //绘制标记点6线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点6线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], yValues[props.widthCanvas < 600 ? 27000 : 22000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 27000 : 22000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  // 在线条附近添加文字
  ctx.font = '12px Arial';
  ctx.fillStyle = '#2aadf3';
  if (props.widthCanvas < 600) {
    ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 520, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
  } else {
    ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 1020, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
  }
}


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

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

  .blast-title {
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translate(-50%, 0);
    font-size: 12px;
    color: #fff;
  }

  .coords {
    position: absolute;
    left: 50%;
    top: 50%;
    border-left: 1px solid #244a94;
    border-bottom: 1px solid #244a94;
    transform: translate(-50%, -55%);

    .triangle-x {
      position: absolute;
      left: -6px;
      top: -15px;
      width: 0px;
      height: 0px;
      border-top: 5px solid transparent;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid #244a94;
    }

    .triangle-y {
      position: absolute;
      right: -15px;
      bottom: -6px;
      width: 0px;
      height: 0px;
      border-top: 5px solid transparent;
      border-left: 10px solid #244a94;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .coord-dw {
      position: absolute;
      left: -100px;
      top: 0;
      width: 100px;
      height: 100%;

      .dw-item {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        color: #b3b8cc;
        font-size: 12px;
      }
    }

    .coord-bj {
      display: flex;
      position: absolute;
      left: -1px;
      bottom: -50px;
      width: 100%;
      height: 50px;
      border-left: 1px solid #244a94;

      .left-jt {
        position: absolute;
        left: 0px;
        top: 30px;
        width: 0px;
        height: 0px;
        border-top: 5px solid transparent;
        border-right: 10px solid #244a94;
        border-left: 5px solid transparent;
        border-bottom: 5px solid transparent;
      }

      .right-jt {
        position: absolute;
        right: 0px;
        top: 30px;
        width: 0px;
        height: 0px;
        border-top: 5px solid transparent;
        border-left: 10px solid #244a94;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
      }

      .text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #db9753;
      }

      .line {
        width: calc(100% - 30px);
        height: 1px;
        position: absolute;
        left: 14px;
        top: 34px;
        background-color: #244a94;
      }

      .bj-qfq {
        flex-shrink: 0;
        position: relative;
        // width: 401px;
        height: 100%;
        border-right: 1px dashed #244a94;
      }

      .bj-zrq {
        flex-shrink: 0;
        position: relative;
        // width: 699px;
        height: 100%;
        border-right: 1px dashed #244a94;
      }

      .bj-rsq {
        flex-shrink: 0;
        position: relative;
        // width: 415px;
        height: 100%;
      }
    }

    .coord-area {
      position: absolute;
      left: 0;
      top: 10px;
    }
  }
}
</style>