132 lines
4.0 KiB
Vue
132 lines
4.0 KiB
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 > 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 > 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>
|