pqs-9100_client/frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue

<template>
    <div class="editor-container">
        <div class="left-editor">
            <!-- 左侧编辑区域内容 -->
            <canvas ref="canvas" width="700" height="165"></canvas>
        </div>
        <div class="right-editor">
            <!-- 右侧编辑区域内容 -->
            <el-form :inline="true" label-width="auto" :model="form" class="form-two" >
                <el-form-item label="电压有效值(V)">
                    <el-input v-model="form.input1" />
                </el-form-item>
                <el-form-item label="电流有效值(A)">
                    <el-input v-model="form.input2" />
                </el-form-item>
                <el-form-item label="电压相角(°)">
                    <el-input v-model="form.input3" />
                </el-form-item>
                <el-form-item label="电流相角(°)">
                    <el-input v-model="form.input4" />
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const form = ref({
    input1: 220,
    input2: 0,
    input3: 0,
    input4: 0
})
const canvas = ref<HTMLCanvasElement | null>(null)

onMounted(() => {
    if (canvas.value) {
        const ctx = canvas.value.getContext('2d')
        if (ctx) {
            drawSineWave(ctx)
        }
    }
})

function drawSineWave(ctx: CanvasRenderingContext2D) {
    const width = canvas.value!.width
    const height = canvas.value!.height
    const amplitude = 50 // 振幅
    const frequency = 0.02 // 频率
    const offset = height / 2 // 偏移量

    // 绘制横轴
    ctx.beginPath()
    ctx.moveTo(0, offset)
    ctx.lineTo(width, offset)
    ctx.strokeStyle = 'black'
    ctx.stroke()

    // 绘制纵轴
    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(0, height)
    ctx.stroke()

    // 绘制横轴刻度
    const xStep = width / 10
    for (let x = 0; x <= width; x += xStep) {
        ctx.beginPath()
        ctx.moveTo(x, offset - 5)
        ctx.lineTo(x, offset + 5)
        ctx.stroke()

        // 添加横轴刻度标签
        ctx.font = '12px Arial'
        ctx.fillStyle = 'black'
        ctx.textAlign = 'center'
        ctx.fillText((x / xStep).toFixed(0), x, offset + 20)
    }

    // 绘制纵轴刻度
    const yStep = height / 10
    for (let y = 0; y <= height; y += yStep) {
        ctx.beginPath()
        ctx.moveTo(-5, y)
        ctx.lineTo(5, y)
        ctx.stroke()

        // 添加纵轴刻度标签
        ctx.font = '12px Arial'
        ctx.fillStyle = 'black'
        ctx.textAlign = 'right'
        ctx.fillText(((offset - y) / yStep - 5).toFixed(1), -10, y + 5)
    }

    // 绘制正弦波
    ctx.beginPath()
    ctx.moveTo(0, offset)

    for (let x = 0; x < width; x++) {
        const y = offset + amplitude * Math.sin(frequency * x)
        ctx.lineTo(x, y)
    }

    ctx.strokeStyle = 'red'
    ctx.lineWidth = 2
    ctx.stroke()
}
</script>

<style scoped>
canvas {
    border: 1px solid #ccc;
}

.editor-container {
    display: flex;
    height: 100%;
}

.left-editor {
    flex: 1; 
    margin-left: 20px; 
}

.right-editor {
    width: 600px;
    display: flex;
    align-items: center;
}
</style>