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>