<template>
|
<div class="app-container">
|
<div class="view">
|
<div class="left-card">
|
<div class="count-region">数值输入区</div>
|
<div class="scroll">
|
<div>
|
<div class="title">通用设置</div>
|
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="110" label-position="top">
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="待配煤种数量">
|
<el-input v-model="formInline.num" type="number" clearable @change="updateCoalFields" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="参与配煤总吨数">
|
<el-input v-model="formInline.count" type="number" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="每铲重量(吨/铲)">
|
<el-input v-model="formInline.count1" type="number" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div>
|
<div class="title">煤种属性</div>
|
<el-form :model="coalForms" :inline="true" label-width="110" label-position="top">
|
<div v-for="(item, index) in coalForms" :key="index" style="margin-bottom: 15px;">
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="煤种类型">
|
<el-select v-model="item.type" placeholder="请选择" clearable style="width: 200px">
|
<el-option label="已有煤" value="已有煤" />
|
<el-option label="未知煤" value="未知煤" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item :label="'煤种' + (index + 1)">
|
<el-input v-model="item.name" clearable v-if="item.type !== '已有煤'" placeholder=" 请输入"/>
|
<el-select v-model="item.name" placeholder="请选择" clearable v-else style="width: 200px">
|
<el-option label="已有煤" value="已有煤" />
|
<el-option label="未知煤" value="未知煤" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="发热量(CV)">
|
<el-input v-model="item.ratio" type="number" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="价格(元/吨)">
|
<el-input v-model="item.weight" type="number" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="硫分(%)">
|
<el-input v-model="item.weight1" type="number" clearable placeholder="可选" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="灰分(%)">
|
<el-input v-model="item.weight2" type="number" clearable placeholder="可选" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="水分(%)">
|
<el-input v-model="item.weight3" type="number" clearable placeholder="可选" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-divider />
|
</div>
|
</el-form>
|
</div>
|
<div>
|
<div class="title">配煤约束条件</div>
|
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="110" label-position="top">
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="混合煤最低发热量(CV)">
|
<el-input v-model="formInline.num" type="number" clearable @change="updateCoalFields" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="混合煤最高硫分(%)">
|
<el-input v-model="formInline.count" type="number" clearable placeholder="可选"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="混合煤最高灰分(%)">
|
<el-input v-model="formInline.count1" type="number" clearable placeholder="可选"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="混合煤最高水分(%)">
|
<el-input v-model="formInline.count1" type="number" clearable placeholder="可选"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
|
<div class="footer">
|
<el-button @click="cancel">重置</el-button>
|
<el-button type="primary" @click="submitForm" plain>查看计算结果</el-button>
|
<el-button type="primary" @click="submitForm">计算入库</el-button>
|
</div>
|
</div>
|
<div class="right-card">
|
<div class="count-region">结果区</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
const data = reactive({
|
formInline: {
|
num: 1
|
},
|
coalForms: [
|
{
|
name: '',
|
ratio: 0,
|
weight: 0
|
}
|
],
|
})
|
const { formInline, coalForms } = toRefs(data)
|
|
const updateCoalFields = () => {
|
const num = parseInt(formInline.value.num);
|
if (isNaN(num) || num <= 0) {
|
coalForms.value = [];
|
return;
|
}
|
|
// 如果当前数组长度大于所需数量，截断
|
if (coalForms.value.length > num) {
|
coalForms.value = coalForms.value.slice(0, num);
|
return;
|
}
|
|
// 否则，填充新的空对象
|
while (coalForms.value.length < num) {
|
coalForms.value.push({
|
name: '',
|
ratio: 0,
|
weight: 0
|
});
|
}
|
}
|
</script>
|
|
<style scoped>
|
.view {
|
display: flex;
|
}
|
.left-card {
|
background: #fff;
|
width: calc(100% - 600px);
|
padding: 16px;
|
margin-right: 10px;
|
}
|
.count-region {
|
font-size: 18px;
|
color: #000000;
|
line-height: 25px;
|
}
|
.scroll {
|
height: calc(100vh - 14em);
|
overflow-y: auto;
|
}
|
.title {
|
font-size: 14px;
|
color: #165DFF;
|
line-height: 20px;
|
font-weight: 600;
|
padding-left: 10px;
|
position: relative;
|
margin: 6px 0;
|
}
|
.title::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 3px; /* 调整垂直位置 */
|
width: 4px; /* 小数条宽度 */
|
height: 14px; /* 小数条高度 */
|
background-color: #165DFF; /* 蓝色 */
|
}
|
.el-divider--horizontal {
|
margin: 12px 0;
|
}
|
.footer {
|
text-align: right;
|
}
|
|
.right-card {
|
background: #fff;
|
width: 600px;
|
height: auto;
|
padding: 16px;
|
}
|
</style>
|
