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 :inline="true" label-width="auto" class="form-two">
            <!-- 右侧编辑区域内容 -->
            <el-form-item label="设定幅度(%)">
              <el-input
                  type="number"
                  @input="handleInput"
                  v-model="form[0].dipData.ftransValue"
                  :disabled="!form[0].dipFlag"
                  onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              />
            </el-form-item>
            <el-form-item label="持续时间(周波)">
              <el-input
                  type="number"
                  v-model="form[0].dipData.retainTime"
                  @input="handleInputRetainTime"
                  :disabled="!form[0].dipFlag"
                  onkeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))"
              />
            </el-form-item>
            <el-form-item label="前延时间(S)">
              <el-input
                  type="number"
                  v-model="form[0].dipData.fpreTime"
                  @input="validateFPreTime"
                  :disabled="!form[0].dipFlag"
                  onkeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))"
              />
            </el-form-item>
            <el-form-item label="后延时间(S)">
              <el-input
                  type="number"
                  v-model="form[0].dipData.fafterTime"
                  @input="validateFAfterTime"
                  :disabled="!form[0].dipFlag"
                  onkeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))"
              />
            </el-form-item>
          </el-form>
        </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() {
      console.log(props.childForm)
        return props.childForm
    },
    set(value) {}
})
const emit = defineEmits(['setRetainTime','setFPreTime','setFAfterTime'])
const handleInput = value => {
    if (value < 0) {
      ElMessage.warning("设定幅度不能小于0%")
        props.childForm[0].dipData.ftransValue = 0
    } else if (value > 180) {
      ElMessage.warning("设定幅度不能大于180%")
        props.childForm[0].dipData.ftransValue = 180
    }
}

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

const validateFPreTime = value => {
  if (value < 0.01) {
    ElMessage.warning('暂态前延时间不能低于0.01S')
    props.childForm[0].dipData.fPreTime = 0.01
    emit('setFPreTime', 0.01 )
  } else if (value > 60) {
    ElMessage.warning('暂态前延时间不能高于60S')
    props.childForm[0].dipData.fPreTime = 60
    emit('setFPreTime', 60 )
  }else{
    emit('setFPreTime', value )
  }
}

const validateFAfterTime = value => {
  if (value < 0.01) {
    ElMessage.warning('暂态后延时间不能低于0.01S')
    props.childForm[0].dipData.fafterTime = 0.01
    emit('setFAfterTime', 0.01 )
  } else if (value > 60) {
    ElMessage.warning('暂态后延时间不能高于60S')
    props.childForm[0].dipData.fafterTime = 60
    emit('setFAfterTime', 60 )
  }else{
    emit('setFAfterTime', 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;
    width: 55%;
    img {
        width: 95%;
        height: 140px;
        margin: 0 10px 20px;
    }
    .inputTop {
        position: absolute;
        top: 20px;
        width: 100%;
    }
    .inputBottom {
        position: absolute;
        bottom: -5px;
        width: 100%;
    }
}

.right-editor {
  display: flex;
  align-items: center;
    width: 45%;
    /* margin-right: 250px; 向左侧移动一点 */
}
</style>