配煤计算器

zhang_12370

2025-07-03 0853f9d313128ab2117ff6361e2ecbba9e6c9653

 src/views/calculator/index.vue

@@ -68,7 +68,8 @@
                  style="margin-bottom: 15px"
                >
                  <el-row :gutter="16">
                    <el-col :span="6">                      <el-form-item label="煤种类型">
                    <el-col :span="6">
                      <el-form-item label="煤种类型">
                        <el-select
                          v-model="item.type"
                          placeholder="请选择"
@@ -79,7 +80,8 @@
                          <el-option label="未知煤" value="未知煤" />
                        </el-select>
                      </el-form-item>
                    </el-col>                    <el-col :span="6">
                    </el-col>
                    <el-col :span="6">
                      <el-form-item :label="'煤种' + (index + 1)">
                        <div class="input-wrapper">
                          <el-input
@@ -88,14 +90,20 @@
                            placeholder="请输入"
                            style="width: 100%"
                          />

                          <el-select
                            v-model="item.name"
                            v-show="item.type === '已有煤'"
                            placeholder="请选择"
                            style="width: 100%"
                          >
                            <el-option label="已有煤" value="已有煤" />
                            <el-option label="未知煤" value="未知煤" />
                            <el-option
                              v-for="ele in coalInfoList"
                              :key="ele.key"
                              :label="ele.value"
                              :value="ele.key"
                              >{{ ele.value }}
                            </el-option>
                          </el-select>
                        </div>
                      </el-form-item>
@@ -247,8 +255,8 @@
        </div>
        <div class="footer">
          <el-button @click="cancel">重置</el-button>
          <el-button type="primary" @click="submitForm" plain>
            查看计算结果
          <el-button type="primary" @click="addWarehoused" plain>
            添加至待入库
          </el-button>
          <el-button type="primary" @click="submitForm">计算最优配比</el-button>
        </div>
@@ -332,6 +340,20 @@
                    >{{ result.optimal.props.cost.toFixed(2) }} 元/吨</span
                  >
                </div>
                <div class="prop-item">
                  <span class="prop-label">生成:</span>
                  <el-autocomplete
                    v-model="result.optimal.props.createCoal"
                    :fetch-suggestions="querySearch"
                    clearable
                    size="small"
                    class="inline-input red-border"
                    style="width: 180px; min-height: 24px !important"
                    placeholder="请输入生成煤种"
                    @blur="handleSelect($event)"
                    @select="handleSelect($event)"
                  />
                </div>
              </div>
            </div>
          </div>
@@ -397,8 +419,9 @@
</template>

<script setup>
import { reactive, toRefs, nextTick } from "vue";
import { reactive, toRefs, nextTick, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getCoalInfoList } from "@/api/procureMent"; // 假设有一个API获取煤种信息

const data = reactive({
  formInline: {
@@ -450,7 +473,48 @@
    error: null,
  },
});

const coalInfoList = ref([]);
// onMounted
const getCoalInfo = async () => {
  let result = await getCoalInfoList();
  if (result.code === 200) {
    result.data.forEach((item) => {
      let obj = {
        value: item.coal,
        key: item.id,
      };
      coalInfoList.value.push(obj);
    });
  } else {
    ElMessage.error("获取煤种信息失败，请稍后重试");
  }
};
// 根据 key 返回中文名，否则原样返回
const matchCoal = value => {
  if (!value) return "";
  const found = coalInfoList.value.find(c => c.key === value);
  return found ? found.value : value;
};
// 自动补全搜索
const querySearch = (q, cb) => {
  const res = q
    ? coalInfoList.value.filter(c => c.value.includes(q))
    : coalInfoList.value;
  cb(res);
};
// 选择/失焦时，优先存 key，找不到则存原值
const handleSelect = item => {
  const val = item.value || (item.target && item.target.value) || "";
  const found = coalInfoList.value.find(c => c.value === val || c.key === val);
  result.value.optimal.props.createCoal = found ? found.key : val;
  let match = matchCoal(result.value.optimal.props.createCoal);
  if (match && match !== result.value.optimal.props.createCoal) {
    result.value.optimal.props.createCoal = match;
  }
};
onMounted(async () => {
  getCoalInfo();
});
// 线性规划求解函数
const solveBlend = (coals, constraints) => {
  // 数据验证
@@ -592,7 +656,17 @@
  };
  ElMessage.success("表单已重置");
};

const addWarehoused = () => {
  if(!result.value){
    ElMessage.warning("请先计算最优配比后再添加至待入库");
    return;
  }
  if(result.value.optimal.props.createCoal === "") {
    ElMessage.warning("请先选择生成煤种");
    return;
  }
  console.log(result.value)
};
const submitForm = () => {
  // 数据验证
  let validCoals = coalForms.value.filter(
@@ -724,17 +798,18 @@
      sulfur: "",
      ash: "",
      moisture: "",
    });  }
    });
  }
};

// 处理煤种类型变化
const handleCoalTypeChange = (index) => {
  // 当煤种类型改变时，清空煤种名称，避免数据混乱
  coalForms.value[index].name = '';
  coalForms.value[index].name = "";
};
</script>

<style scoped>
<style scoped lang="scss">
.view {
  display: flex;
  gap: 10px;
@@ -966,6 +1041,7 @@
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 13px;
  align-items: center;
}

.prop-label {
@@ -1124,4 +1200,10 @@
    padding: 4px 8px;
  }
}
:deep(.el-input__wrapper) {
  min-height: 24px !important;
}
:deep(.el-input__inner) {
  min-height: 24px !important;
}
</style>