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>
@@ -281,7 +289,11 @@
                class="result-table"
                style="width: 100%"
              >
                <el-table-column prop="name" label="煤种" min-width="80" />
                <el-table-column prop="name" label="煤种" min-width="80">
                  <template #default="scope">
                    {{ matchCoalName(scope.row.name) }}
                  </template>
                </el-table-column>
                <el-table-column prop="ratio" label="配比" min-width="80">
                  <template #default="scope"> {{ scope.row.ratio }}% </template>
                </el-table-column>
@@ -331,6 +343,20 @@
                  <span class="prop-value cost"
                    >{{ 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>
@@ -397,8 +423,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: {
@@ -448,9 +475,65 @@
    optimal: null,
    alternatives: [],
    error: null,
    createCoal: 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 匹配中文名,再用 value 匹配,最后原样返回
const matchCoalName = (name) => {
  if (!name || !Array.isArray(coalInfoList.value) || coalInfoList.value.length === 0) return name;
  // key 匹配
  const byKey = coalInfoList.value.find(item => String(item.key) === String(name));
  if (byKey) return byKey.value;
  // value 匹配
  const byValue = coalInfoList.value.find(item => item.value === name);
  if (byValue) return byValue.value;
  // 原样返回
  return name;
};
// 自动补全搜索
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;
  // 新增:如果匹配成功,留一个id字段
  if (found) {
    result.value.optimal.props.createCoalId = found.key;
  } else {
    result.value.optimal.props.createCoalId = null;
  }
  let match = matchCoalName(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 +675,52 @@
  };
  ElMessage.success("表单已重置");
};
const addWarehoused = () => {
  console.log(coalInfoList.value);
  if (!result.value) {
    ElMessage.error("请先计算最优配比后再添加至待入库");
    return;
  }
  if (result.value.optimal === null) {
    ElMessage.error("请先计算最优配比");
    return;
  }
  if (!result.value.optimal.props.createCoal) {
    ElMessage.error("请先选择生成煤种");
    return;
  }
  const coals = result.value.optimal.instructions.map((item) => item.name);
  let allFound = true;
  for (const element of coals) {
    let found = false;
    for (const item of coalInfoList.value) {
      if (item.key === element) {
        found = true;
        break;
      }
    }
    if (!found) {
      allFound = false;
      break;
    }
  }
  if (!allFound) {
    ElMessage.error("配比中包含未知煤种,请先添加至煤种列表");
    return;
  }
  let createCoalFound = false;
  for (const item of coalInfoList.value) {
    if (item.key === result.value.optimal.props.createCoalId) {
      console.log("生成煤种已存在");
      createCoalFound = true;
      break;
    }
  }
  if (!createCoalFound) {
    ElMessage.warning("生成煤种是未知煤种,无法添加至待入库");
    return;
  }
};
const submitForm = () => {
  // 数据验证
  let validCoals = coalForms.value.filter(
@@ -724,17 +852,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 +1095,7 @@
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 13px;
  align-items: center;
}
.prop-label {
@@ -1124,4 +1254,10 @@
    padding: 4px 8px;
  }
}
:deep(.el-input__wrapper) {
  min-height: 24px !important;
}
:deep(.el-input__inner) {
  min-height: 24px !important;
}
</style>