mky-vent-base/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="name-x" >时间</div>
      <div class="name-y" >温度(℃)</div>
      <div class="coord-dw">
        <div class="dw-item" :style="{ bottom: `${coordDw[0]}px` }">30℃</div>
        <div class="dw-item" :style="{ bottom: `${coordDw[1]}px` }">70℃</div>
        <div class="dw-item" :style="{ bottom: `${coordDw[2]}px` }">120℃</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 ? '110px' : '201px' }">
          <div class="left-jt"></div>
          <div class="line"></div>
          <div class="right-jt"></div>
          <div class="text">潜伏期阶段</div>
        </div>
        <div class="bj-qfq" :style="{ width: widthCanvas < 600 ? '111px' : '200px' }">
          <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 ? '109px' : '279px' }">
          <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 ? '180px' : '500px' }">
          <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.04; // 设置每次递增的长度
  let y = props.widthCanvas < 600 ? 280 : 325; // 初始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=='绿色预警'){
      ctx.fillStyle = 'rgba(145, 230, 9)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=5500){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=5000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }else if(props.warnLevel=='黄色预警'){
      ctx.fillStyle = 'rgba(255, 255, 53)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=11000){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=10000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }else if(props.warnLevel=='橙色预警'){
      ctx.fillStyle = 'rgba(255, 111, 0)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i<=16500){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i<=17000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    } else if(props.warnLevel=='红色预警'){
      ctx.fillStyle = 'rgba(255, 0, 0)'; // 设置填充颜色
      if(props.widthCanvas < 600 && i>16500){
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }else if(i>17000) {
        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
      }
    }
  }
  ctx.stroke();

  //标记点1
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 5500 : 5000], yValues[props.widthCanvas < 600 ? 5500 : 5000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  //标记点2
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 11000 : 10000], yValues[props.widthCanvas < 600 ? 11000 : 10000], 6, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff6363';
  ctx.fill();
  //标记点3
  ctx.beginPath();
  ctx.arc(xValues[props.widthCanvas < 600 ? 16500 : 17000], yValues[props.widthCanvas < 600 ? 16500 : 17000], 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 = 'rgba(36, 74, 148,.8)';
  ctx.lineWidth = 1;
  ctx.lineCap = 'round';
  // 定义虚线模式：[线段长度, 间隔长度]
  ctx.setLineDash([5, 5]);
  //绘制标记点1线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 5500 : 5000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 5500 : 5000], yValues[props.widthCanvas < 600 ? 5500 : 5000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点2线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 5500 : 5000], yValues[props.widthCanvas < 600 ? 5500 : 5000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 5500 : 5000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  // // 在线条附近添加文字
  // ctx.font = '12px Arial';
  // ctx.fillStyle = '#2aadf3';
  // if (props.widthCanvas < 600) {
  //   ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 70, yValues[props.widthCanvas < 600 ? 9000 : 8000] + 25); // 文字位置略微偏上，以便于文字与点对齐
  //   ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 70, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 5); // 文字位置略微偏上，以便于文字与点对齐
  // } else {
  //   ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 120, yValues[props.widthCanvas < 600 ? 9000 : 8000] + 18); // 文字位置略微偏上，以便于文字与点对齐
  //   ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 120, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 5); // 文字位置略微偏上，以便于文字与点对齐
  // }
  //绘制标记点3线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 11000 : 10000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 11000 : 11000], yValues[props.widthCanvas < 600 ? 11000 : 10000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点2线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 11000 : 10000], yValues[props.widthCanvas < 600 ? 11000 : 10000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 11000 : 10000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制

  //绘制标记点2线条-x
  ctx.beginPath();
  ctx.moveTo(0, yValues[props.widthCanvas < 600 ? 16500 : 17000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 16500 : 17000], yValues[props.widthCanvas < 600 ? 16500 : 17000]); // 结束绘制的点
  ctx.stroke(); // 进行绘制
  //绘制标记点2线条-y
  ctx.beginPath();
  ctx.moveTo(xValues[props.widthCanvas < 600 ? 16500 : 17000], yValues[props.widthCanvas < 600 ? 16500 : 17000]); // 开始绘制的点
  ctx.lineTo(xValues[props.widthCanvas < 600 ? 16500 : 17000], canvas.height); // 结束绘制的点
  ctx.stroke(); // 进行绘制
}


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

    .name-x{
        position: absolute;
        right: 0;
        bottom: -35px;
        color: #fff;
        font-size: 12px;
      }
      .name-y{
        width: 20px;
        position: absolute;
        left: -40px;
        top: 0px;
        color: #fff;
        font-size: 12px;
        text-align: center;
      }

    .coord-dw {
      position: absolute;
      left: -75px;
      top: 0;
      width: 75px;
      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 {
        width: 90%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #db9753;
        text-align: center;
      }

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