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> -->
            <Line :options="chartsData" style="width: 700px; height: 165px" ref="lineRef" />
        </div>
        <div class="right-editor">
            <!-- 右侧编辑区域内容 -->
            <el-form :inline="true" label-width="auto" :model="form" class="form-two">
                <el-form-item :label="`电压有效值(${valueCode == 'Absolute' ? 'V' : '%'})`">
                    <el-input type="number" v-model="form[0].famp" :disabled="!form[0].channelFlag" />
                </el-form-item>
                <el-form-item label="电压相角(°)">
                    <el-input type="number" v-model="form[0].fphase" :disabled="!form[0].channelFlag" />
                </el-form-item>
                <el-form-item :label="`电流有效值(${valueCode == 'Absolute' ? 'A' : '%'})`">
                    <el-input type="number" v-model="form[1].famp" :disabled="!form[1].channelFlag" />
                </el-form-item>

                <el-form-item label="电流相角(°)">
                    <el-input type="number" v-model="form[1].fphase" :disabled="!form[1].channelFlag" />
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import Line from '@/components/echarts/line/index.vue'
// const emit = defineEmits(['update'])
const props = defineProps({
    childForm: {
        type: Array,
        required: true
    },
    valueCode: {
        type: String,
        required: true
    }
})

const lineRef: any = ref()
const chartsData = ref({})
// 解构并创建响应式变量
const form: any = computed({
    get() {
        return props.childForm
    },
    set(value) {}
})

onMounted(() => {
    drawSineWave()
})

function drawSineWave() {
    chartsData.value = {
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        grid: {
            left: 0,
            right: 0,
            top: '10px',
            bottom: '10px'
        },
        xAxis: {
            name: '',

            boundaryGap: false,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: ['#cfcfcf']
                }
            },
            axisLabel: {
                show: false
            }
        },
        yAxis: {
            name: '',
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#ccc'],
                    type: 'solid',
                    opacity: 1
                }
            }
        },
        options: {
            dataZoom: null,
            series: [
                {
                    name: '',
                    type: 'line',
                    data: [10, -10, 10, -10, 10, -10, 10, -10, 10, -10, 10],
                    showSymbol: false,
                    smooth: true
                }
            ]
        }
    }
}
</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>