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

<template>
    <div class="editor-container">
        <div class="left-editor">
            <!-- 左侧编辑区域内容 -->

            <img src="@/assets/images/transient.png" />
            <!-- <div class="inputTop">
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 4%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 22%" :disabled="!form[0].dipFlag"> 
                    <template #append>S</template>
                </el-input>
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 40%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
            </div>
            <div class="inputBottom">
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 21%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 40%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
            </div> -->
        </div>
        <div class="right-editor">
            <!-- 右侧编辑区域内容 -->
            <el-form-item label-width="120px" label="设定幅度(%)">
                <el-input
                    type="number"
                    @input="handleInput"
                    v-model="form[0].dipData.ftransValue"
                    style="width: 150px"
                    :disabled="!form[0].dipFlag"
                    onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                />
            </el-form-item>
            <el-form-item label-width="120px" label="持续时间(周波)">
                <el-input
                    type="number"
                    v-model="form[0].dipData.retainTime"
                    @input="handleInputRetainTime"
                    style="width: 150px"
                    :disabled="!form[0].dipFlag"
                    onkeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))"
                />
            </el-form-item>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
const props = defineProps({
    childForm: {
        type: Array,
        required: true
    }
})
const form: any = computed({
    get() {
        return props.childForm
    },
    set(value) {}
})
const emit = defineEmits(['setRetainTime'])  
const handleInput = value => {
    if (value < 0) {
      ElMessage.warning("设定幅度不能小于0%")
        props.childForm[0].dipData.ftransValue = 0
    } else if (value > 140) {
      ElMessage.warning("设定幅度不能大于140%")
        props.childForm[0].dipData.ftransValue = 140
    }
}

const handleInputRetainTime = value => {
    if (value < 0) {
      ElMessage.warning("持续时间不能小于0周波")
      props.childForm[0].dipData.retainTime = 0
      emit('setRetainTime', 0 )
    }else if (value > 300) {
      ElMessage.warning("持续时间不能大于300周波")
      props.childForm[0].dipData.retainTime = 300
      emit('setRetainTime', 300 )
    }else{
     console.log(props);
     
        emit('setRetainTime', value )
    }
}

</script>

<style lang="scss" scoped>
canvas {
    border: 1px solid #ccc;
}

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

.left-editor {
    flex: 1; /* 左侧区域占据 3/4 的宽度 */
    position: relative;
    img {
        width: 90%;
        height: 140px;
        margin: 0 10px 20px;
    }
    .inputTop {
        position: absolute;
        top: 20px;
        width: 100%;
    }
    .inputBottom {
        position: absolute;
        bottom: -5px;
        width: 100%;
    }
}

.right-editor {
    width: 400px;
    /* margin-right: 250px; 向左侧移动一点 */
}
</style>