配煤计算页面开发

gaoluyang

3 天以前 b66453b8b4a7ba6dc94127bb5c9a6647519e447a

配煤计算页面开发

 src/views/calculator/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,214 @@
<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>