402 lines
11 KiB
Vue
402 lines
11 KiB
Vue
<template>
|
|
<div class="tabs-container">
|
|
<el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%">
|
|
<el-tab-pane label="短闪">
|
|
<!-- 全局设置菜单内容 Modulation-->
|
|
|
|
<div style="display: flex">
|
|
<el-form-item abel-width="180px">
|
|
<template #label>
|
|
<el-select
|
|
v-model="form[0].flickerData.waveType"
|
|
@change="changeLable"
|
|
style="width: 170px"
|
|
>
|
|
<el-option
|
|
v-for="item in waveList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
|
|
<el-select
|
|
placeholder="请选择波动类型"
|
|
style="width: 180px"
|
|
filterable
|
|
v-model="form[0].flickerData.fchagFre"
|
|
@change="changeWaveType"
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in waveChildrenList"
|
|
:key="item.fchagFre"
|
|
:value="item.fchagFre"
|
|
:label="item.fchagFre"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div style="display: flex; justify-content: end">
|
|
<el-form-item label="变动量(%)" label-width="180px">
|
|
<el-input
|
|
placeholder="请输入变动量"
|
|
style="width: 180px"
|
|
v-model="form[0].flickerData.fchagValue"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%">
|
|
<el-tab-pane label="波形">
|
|
<!-- 全局设置菜单内容 WaveForm -->
|
|
<div>
|
|
<el-form-item label="波类型" label-width="100px">
|
|
<el-select
|
|
placeholder="请选择波类型"
|
|
style="width: 150px"
|
|
v-model="form[0].flickerData.waveFluType"
|
|
:disabled="!form[0].flickerFlag"
|
|
>
|
|
<el-option label="RECT" value="RECT"></el-option>
|
|
<el-option label="SIN" value="SIN"></el-option>
|
|
<el-option label="SQU" value="SQU"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div>
|
|
<el-form-item label="占空比(%)" label-width="100px">
|
|
<el-input
|
|
style="width: 150px"
|
|
v-model="form[0].flickerData.fdutyCycle"
|
|
:disabled="!form[0].flickerFlag"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, computed } from 'vue'
|
|
const props = defineProps({
|
|
childForm: {
|
|
type: [Array, Object] as any,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const waveList = [
|
|
{
|
|
label: '变动频度(次/min)',
|
|
value: 'CPM',
|
|
children: [
|
|
{
|
|
fchagFre: '0.1',
|
|
fchagValue: '7.4'
|
|
},
|
|
{
|
|
fchagFre: '0.2',
|
|
fchagValue: '4.58'
|
|
},
|
|
{
|
|
fchagFre: '0.4',
|
|
fchagValue: '3.54'
|
|
},
|
|
{
|
|
fchagFre: '0.6',
|
|
fchagValue: '3.2'
|
|
},
|
|
{
|
|
fchagFre: '1',
|
|
fchagValue: '2.724'
|
|
},
|
|
{
|
|
fchagFre: '2',
|
|
fchagValue: '2.211'
|
|
},
|
|
{
|
|
fchagFre: '3',
|
|
fchagValue: '1.95'
|
|
},
|
|
{
|
|
fchagFre: '5',
|
|
fchagValue: '1.64'
|
|
},
|
|
{
|
|
fchagFre: '7',
|
|
fchagValue: '1.459'
|
|
},
|
|
{
|
|
fchagFre: '10',
|
|
fchagValue: '1.29'
|
|
},
|
|
{
|
|
fchagFre: '22',
|
|
fchagValue: '1.02'
|
|
},
|
|
{
|
|
fchagFre: '39',
|
|
fchagValue: '0.906'
|
|
},
|
|
{
|
|
fchagFre: '48',
|
|
fchagValue: '0.87'
|
|
},
|
|
{
|
|
fchagFre: '68',
|
|
fchagValue: '0.81'
|
|
},
|
|
{
|
|
fchagFre: '110',
|
|
fchagValue: '0.725'
|
|
},
|
|
{
|
|
fchagFre: '176',
|
|
fchagValue: '0.64'
|
|
},
|
|
{
|
|
fchagFre: '273',
|
|
fchagValue: '0.56'
|
|
},
|
|
{
|
|
fchagFre: '375',
|
|
fchagValue: '0.5'
|
|
},
|
|
{
|
|
fchagFre: '480',
|
|
fchagValue: '0.48'
|
|
},
|
|
{
|
|
fchagFre: '585',
|
|
fchagValue: '0.42'
|
|
},
|
|
{
|
|
fchagFre: '682',
|
|
fchagValue: '0.37'
|
|
},
|
|
{
|
|
fchagFre: '796',
|
|
fchagValue: '0.32'
|
|
},
|
|
{
|
|
fchagFre: '1020',
|
|
fchagValue: '0.28'
|
|
},
|
|
{
|
|
fchagFre: '1055',
|
|
fchagValue: '0.28'
|
|
},
|
|
{
|
|
fchagFre: '1200',
|
|
fchagValue: '0.29'
|
|
},
|
|
{
|
|
fchagFre: '1390',
|
|
fchagValue: '0.34'
|
|
},
|
|
{
|
|
fchagFre: '1620',
|
|
fchagValue: '0.402'
|
|
},
|
|
{
|
|
fchagFre: '2400',
|
|
fchagValue: '0.77'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '变动频率(HZ)',
|
|
value: 'HZ',
|
|
children: [
|
|
{
|
|
fchagFre: '0.000833',
|
|
fchagValue: '7.4'
|
|
},
|
|
{
|
|
fchagFre: '0.001667',
|
|
fchagValue: '4.58'
|
|
},
|
|
{
|
|
fchagFre: '0.003333',
|
|
fchagValue: '3.54'
|
|
},
|
|
{
|
|
fchagFre: '0.005000',
|
|
fchagValue: '3.2'
|
|
},
|
|
{
|
|
fchagFre: '0.008333',
|
|
fchagValue: '2.724'
|
|
},
|
|
{
|
|
fchagFre: '0.016667',
|
|
fchagValue: '2.211'
|
|
},
|
|
{
|
|
fchagFre: '0.025000',
|
|
fchagValue: '1.95'
|
|
},
|
|
{
|
|
fchagFre: '0.041667',
|
|
fchagValue: '1.64'
|
|
},
|
|
{
|
|
fchagFre: '0.058333',
|
|
fchagValue: '1.459'
|
|
},
|
|
{
|
|
fchagFre: '0.083333',
|
|
fchagValue: '1.29'
|
|
},
|
|
{
|
|
fchagFre: '0.183333',
|
|
fchagValue: '1.02'
|
|
},
|
|
{
|
|
fchagFre: '0.325000',
|
|
fchagValue: '0.906'
|
|
},
|
|
{
|
|
fchagFre: '0.400000',
|
|
fchagValue: '0.87'
|
|
},
|
|
{
|
|
fchagFre: '0.566667',
|
|
fchagValue: '0.81'
|
|
},
|
|
{
|
|
fchagFre: '0.916667',
|
|
fchagValue: '0.725'
|
|
},
|
|
{
|
|
fchagFre: '1.466667',
|
|
fchagValue: '0.64'
|
|
},
|
|
{
|
|
fchagFre: '2.275000',
|
|
fchagValue: '0.56'
|
|
},
|
|
{
|
|
fchagFre: '3.125000',
|
|
fchagValue: '0.5'
|
|
},
|
|
{
|
|
fchagFre: '4.000000',
|
|
fchagValue: '0.48'
|
|
},
|
|
{
|
|
fchagFre: '4.875000',
|
|
fchagValue: '0.42'
|
|
},
|
|
{
|
|
fchagFre: '5.683333',
|
|
fchagValue: '0.37'
|
|
},
|
|
{
|
|
fchagFre: '6.633333',
|
|
fchagValue: '0.32'
|
|
},
|
|
{
|
|
fchagFre: '8.500000',
|
|
fchagValue: '0.28'
|
|
},
|
|
{
|
|
fchagFre: '8.791667',
|
|
fchagValue: '0.28'
|
|
},
|
|
{
|
|
fchagFre: '10.000000',
|
|
fchagValue: '0.29'
|
|
},
|
|
{
|
|
fchagFre: '11.583333',
|
|
fchagValue: '0.34'
|
|
},
|
|
{
|
|
fchagFre: '13.500000',
|
|
fchagValue: '0.402'
|
|
},
|
|
{
|
|
fchagFre: '20.000000',
|
|
fchagValue: '0.77'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
const waveChildrenList = computed(() => {
|
|
return waveList.filter((item: any) => item.value === form.value[0].flickerData.waveType)[0].children
|
|
})
|
|
const changeLable = e => {
|
|
setTimeout(() => {
|
|
let data = {
|
|
fchagFre: '',
|
|
fchagValue: ''
|
|
}
|
|
waveList.forEach((item: any, i: number) => {
|
|
item.children.forEach((item1: any, j: number) => {
|
|
if (item1.fchagFre == props.childForm[0].flickerData.fchagFre) {
|
|
data = waveList[i == 0 ? 1 : 0].children[j]
|
|
}
|
|
})
|
|
})
|
|
props.childForm[0].flickerData.fchagFre = data.fchagFre
|
|
props.childForm[0].flickerData.fchagValue = data.fchagValue
|
|
}, 100)
|
|
}
|
|
// [频率变化]
|
|
const changeWaveType = e => {
|
|
props.childForm[0].flickerData.fchagValue = waveChildrenList.value.filter(
|
|
(item: any) => item.fchagFre == e
|
|
)[0].fchagValue
|
|
}
|
|
const form: any = computed({
|
|
get() {
|
|
if (props.childForm[0].flickerData.flickerValue == null) {
|
|
props.childForm[0].flickerData.fchagValue = ''
|
|
props.childForm[0].flickerData.fchagFre = ''
|
|
}
|
|
return props.childForm
|
|
},
|
|
set(value) {}
|
|
})
|
|
|
|
onMounted(() => {})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-container {
|
|
display: flex;
|
|
justify-content: space-between; /* 使两个 el-form-item 之间有间距 */
|
|
align-items: center; /* 使两个 el-form-item 垂直居中对齐 */
|
|
}
|
|
|
|
.tabs-container {
|
|
display: flex;
|
|
justify-content: center; /* 使两个 el-tabs 居中对齐 */
|
|
align-items: stretch; /* 使两个 el-tabs 高度拉伸 */
|
|
height: 100%;
|
|
padding: 0 20px; /* 可选：添加左右间距 */
|
|
}
|
|
|
|
.fixed-width-tabs {
|
|
margin-right: 100px; /* 可选：添加右侧间距 */
|
|
}
|
|
|
|
.fixed-width-tabs:last-child {
|
|
margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
|
|
}
|
|
|
|
.el-tab-pane {
|
|
display: flex;
|
|
flex-direction: column; /* 确保内容上下排列 */
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
|
|
}
|
|
</style>
|