Vent-App/pages/warndata/components/warn-zb.vue

<template>
  <view class="warn-zb">
    <view
      ref="coord"
      class="coords"
      :style="{ width: widthV, height: heightV }"
    >
      <view class="triangle-x"></view>
      <view class="triangle-y"></view>
      <view class="name-x">时间</view>
      <view class="name-y">温度(℃)</view>
      <view class="coord-dw">
        <view class="dw-item" :style="{ bottom: `${coordDw[0]}px` }">12</view>
        <view class="dw-item" :style="{ bottom: `${coordDw[1]}px` }">200</view>
      </view>
      <view class="coord-bj">
        <view
          class="bj-qfq"
          :style="{ width: widthCanvas == '302px' ? '100px' : '401px' }"
        >
          <view class="left-jt"></view>
          <view class="line"></view>
          <view class="right-jt"></view>
          <view class="text">缓慢氧化阶段</view>
        </view>
        <view
          class="bj-zrq"
          :style="{ width: widthCanvas == '302px' ? '50px' : '250px' }"
        >
          <view class="left-jt"></view>
          <view class="line"></view>
          <view class="right-jt"></view>
          <view class="text">加速氧化阶段</view>
        </view>
        <view
          class="bj-rsq"
          :style="{ width: widthCanvas == '302px' ? '100px' : '570px' }"
        >
          <view class="left-jt"></view>
          <view class="line"></view>
          <view class="text">剧烈氧化阶段</view>
        </view>
      </view>
      <view
        class="coord-area"
        :style="{
          width: 'calc(100% - 10px)',
          height: 'calc(100% - 10px)',
          overflow: 'hidden',
        }"
      >
        <canvas
          :id="`myCanvas${resetIndex}`"
          :style="{ width: widthCanvas, height: heightCanvas }"
        ></canvas>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  name: "warnZb",
  props: {
    widthV: {
      type: String,
      default: "",
    },
    heightV: {
      type: String,
      default: "",
    },
    coordDw: {
      type: Array,
      default: () => {
        return [];
      },
    },
    widthCanvas: {
      type: String,
      default: 0,
    },
    heightCanvas: {
      type: String,
      default: 0,
    },
    warnLevel: {
      type: String,
      default: "",
    },
    resetIndex: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      coord: null,
      lengY: 0,
      //与x,y轴相交最大值坐标
      maxY: 0,
      maxX: 0,
    };
  },
  watch: {
    resetIndex: {
      handler(newR, oldR) {
        this.getCanvas(newR);
      },
      immediate: true,
    },
  },
  mounted() {
    this.getAreas();
  },
  methods: {
    getAreas() {
      if (this.coord) {
        let width = this.coord.offsetWidth;
        let height = this.coord.offsetHeight;
        this.lengY = Math.ceil((height - 10) / 10);
      }
    },
    getCanvas(index) {
      let that = this;
      that.$nextTick(() => {
        // 获取canvas元素
        let canvas = document.getElementById(`myCanvas${index}`).childNodes[0];
        let ctx = canvas.getContext("2d");
        let x = 0;
        let step = that.widthCanvas == "302px" ? 0.01 : 0.05; // 设置每次递增的长度
        let y = that.widthCanvas == "302px" ? 194 : 325; // 初始y坐标
        // 设置线条样式
        ctx.strokeStyle = "#3df6ff"; // 红色线条
        ctx.lineWidth = 1; // 线宽为2
        // 初始化曲线数据
        let xValues = [];
        let yValues = [];
        for (let i = 0; i < 30000; i++) {
          x += step;
          if (that.widthCanvas == "302px") {
            y -= (step * Math.random() * i) / 12000; // 随机增加长度，使曲线更加平滑
          } 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 (that.warnLevel == "绿色预警") {
            ctx.fillStyle = "rgba(145, 230, 9)"; // 设置填充颜色
            if (that.widthCanvas == "302px" && i <= 10000) {
              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 (that.warnLevel == "黄色预警") {
            ctx.fillStyle = "rgba(255, 255, 53)"; // 设置填充颜色
            if (that.widthCanvas == "302px" && i <= 15000) {
              ctx.fillRect(
                xValues[i],
                yValues[i],
                step,
                canvas.height - yValues[i]
              );
            } else if (i <= 13000) {
              ctx.fillRect(
                xValues[i],
                yValues[i],
                step,
                canvas.height - yValues[i]
              );
            }
          } else if (that.warnLevel == "红色预警") {
            ctx.fillStyle = "rgba(255, 0, 0)"; // 设置填充颜色
            if (that.widthCanvas == "302px" && i > 15000) {
              ctx.fillRect(
                xValues[i],
                yValues[i],
                step,
                canvas.height - yValues[i]
              );
            } else if (i > 13000) {
              ctx.fillRect(
                xValues[i],
                yValues[i],
                step,
                canvas.height - yValues[i]
              );
            }
          }
        }
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(
          xValues[that.widthCanvas == "302px" ? 10000 : 8000],
          yValues[that.widthCanvas == "302px" ? 10000 : 8000],
          5,
          0,
          2 * Math.PI
        );
        ctx.fillStyle = "#ff6363";
        ctx.fill();
        //标记点2
        ctx.beginPath();
        ctx.arc(
          xValues[that.widthCanvas == "302px" ? 15000 : 13000],
          yValues[that.widthCanvas == "302px" ? 15000 : 13000],
          5,
          0,
          2 * Math.PI
        );
        ctx.fillStyle = "#ff6363";
        ctx.fill();

        // 设置线条样式（颜色、宽度等）
        ctx.strokeStyle = "rgba(14, 180, 252,.6)";
        ctx.lineWidth = 1;
        ctx.lineCap = "round";
        // 定义虚线模式：[线段长度, 间隔长度]
        ctx.setLineDash([5, 5]);
        //绘制标记点1线条-x
        ctx.beginPath();
        ctx.moveTo(0, yValues[that.widthCanvas == "302px" ? 10000 : 8000]); // 开始绘制的点
        ctx.lineTo(
          xValues[that.widthCanvas == "302px" ? 10000 : 8000],
          yValues[that.widthCanvas == "302px" ? 10000 : 8000]
        ); // 结束绘制的点
        ctx.stroke(); // 进行绘制
        //绘制标记点1线条-y
        ctx.beginPath();
        ctx.moveTo(
          xValues[that.widthCanvas == "302px" ? 10000 : 8000],
          yValues[that.widthCanvas == "302px" ? 10000 : 8000]
        ); // 开始绘制的点
        ctx.lineTo(
          xValues[that.widthCanvas == "302px" ? 10000 : 8000],
          canvas.height
        ); // 结束绘制的点
        ctx.stroke(); // 进行绘制

        //绘制标记点2线条-x
        ctx.beginPath();
        ctx.moveTo(0, yValues[that.widthCanvas == "302px" ? 15000 : 13000]); // 开始绘制的点
        ctx.lineTo(
          xValues[that.widthCanvas == "302px" ? 15000 : 13000],
          yValues[that.widthCanvas == "302px" ? 15000 : 13000]
        ); // 结束绘制的点
        ctx.stroke(); // 进行绘制
        //绘制标记点2线条-y
        ctx.beginPath();
        ctx.moveTo(
          xValues[that.widthCanvas == "302px" ? 15000 : 13000],
          yValues[that.widthCanvas == "302px" ? 15000 : 13000]
        ); // 开始绘制的点
        ctx.lineTo(
          xValues[that.widthCanvas == "302px" ? 15000 : 13000],
          canvas.height
        ); // 结束绘制的点
        ctx.stroke(); // 进行绘制
      });
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.warn-zb {
  position: relative;
  height: 100%;

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

    .triangle-x {
      position: absolute;
      left: -4px;
      top: -10px;
      width: 0px;
      height: 0px;
      border-top: 3px solid transparent;
      border-left: 4px solid transparent;
      border-right: 3px solid transparent;
      border-bottom: 8px solid #0eb4fc;
    }

    .triangle-y {
      position: absolute;
      right: -10px;
      bottom: -4px;
      width: 0px;
      height: 0px;
      border-top: 4px solid transparent;
      border-left: 8px solid #0eb4fc;
      border-right: 3px solid transparent;
      border-bottom: 3px solid transparent;
    }

    .name-x {
      position: absolute;
      right: 0px;
      bottom: -20px;
      color: #b3b8cc;
      font-size: 12px;
    }

    .name-y {
      width: 20px;
      position: absolute;
      left: -24px;
      top: 0px;
      color: #b3b8cc;
      font-size: 12px;
      text-align: center;
    }

    .coord-dw {
      position: absolute;
      left: -32px;
      top: 0;
      width: 30px;
      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: -31px;
      width: 100%;
      height: 30px;
      border-left: 1px solid #0eb4fc;

      .left-jt {
        position: absolute;
        left: -1px;
        top: 23px;
        width: 0px;
        height: 0px;
        border-top: 3px solid transparent;
        border-right: 8px solid #0eb4fc;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
      }

      .right-jt {
        position: absolute;
        right: -1px;
        top: 23px;
        width: 0px;
        height: 0px;
        border-top: 3px solid transparent;
        border-left: 8px solid #0eb4fc;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
      }

      .text {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -55%);
        font-size: 10px;
        color: #db9753;
        text-align: center;
      }

      .line {
        width: calc(100% - 20px);
        height: 1px;
        position: absolute;
        left: 10px;
        top: 26px;
        background-color: #0eb4fc;
      }

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

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

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

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