160 lines
5.4 KiB
Vue
160 lines
5.4 KiB
Vue
<template>
|
|
<SecondSheet>
|
|
<div class="tolerance-curve">
|
|
<el-form label-width="auto" :inline="true">
|
|
<el-form-item>
|
|
<el-select v-model="form.name" placeholder="Select">
|
|
<el-option
|
|
v-for="item in selectOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="form.name" placeholder="Select">
|
|
<el-option
|
|
v-for="item in selectOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="form.name" placeholder="Select">
|
|
<el-option
|
|
v-for="item in selectOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div style="display: flex; flex: 1">
|
|
<el-form label-width="auto" label-position="top">
|
|
<el-form-item label="耐受曲线">
|
|
<el-select v-model="form.name" placeholder="Select">
|
|
<el-option
|
|
v-for="item in selectOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="耐受能力（膝点坐标）">
|
|
<el-select v-model="form.name" placeholder="Select">
|
|
<el-option
|
|
v-for="item in selectOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="上限曲线膝点">
|
|
<div>
|
|
<div>
|
|
<el-input-number v-model="form.num" controls-position="right" />
|
|
<span class="ml10" style="color: #333">p.u.</span>
|
|
</div>
|
|
<div class="mt10">
|
|
<el-input-number v-model="form.num" controls-position="right" />
|
|
<span class="ml10" style="color: #333">ms</span>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="下限曲线膝点">
|
|
<div>
|
|
<div>
|
|
<el-input-number v-model="form.num" controls-position="right" />
|
|
<span class="ml10" style="color: #333">p.u.</span>
|
|
</div>
|
|
<div class="mt10">
|
|
<el-input-number v-model="form.num" controls-position="right" />
|
|
<span class="ml10" style="color: #333">ms</span>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div style="flex: 1" class="ml10">
|
|
<MyEchart :options="options" v-if="options"></MyEchart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SecondSheet>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import SecondSheet from '@/components/secondSheet/index.vue'
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
import { reactive, ref } from 'vue'
|
|
const options = ref({
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: [150, 230, 224, 218, 135, 147, 260],
|
|
type: 'line'
|
|
},
|
|
{
|
|
data: [50, 30, 124, 318, 175, 127, 160],
|
|
type: 'line'
|
|
}
|
|
],
|
|
options: {
|
|
dataZoom: null
|
|
}
|
|
})
|
|
const form = reactive({
|
|
name: '',
|
|
num: 1
|
|
})
|
|
const selectOptions = [
|
|
{
|
|
value: 'Option1',
|
|
label: 'Option1'
|
|
},
|
|
{
|
|
value: 'Option2',
|
|
label: 'Option2'
|
|
},
|
|
{
|
|
value: 'Option3',
|
|
label: 'Option3'
|
|
},
|
|
{
|
|
value: 'Option4',
|
|
label: 'Option4'
|
|
},
|
|
{
|
|
value: 'Option5',
|
|
label: 'Option5'
|
|
}
|
|
]
|
|
const search = () => {
|
|
// 从父组件tableStore获取参数
|
|
}
|
|
defineExpose({ search })
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tolerance-curve {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
border: 1px solid var(--el-border-color);
|
|
}
|
|
</style>
|