1、煤质字段添加校验 使其唯一 2、优化首页 数据刷新 3、开发配煤计算器

zhang_12370

4 天以前 e986cee1c804ecdf6d03c080ce9a8bb187f724a4

 src/views/calculator/index.vue

@@ -90,7 +90,7 @@
                            placeholder="请输入"
                            style="width: 100%"
                          />
                          

                          <el-select
                            v-model="item.name"
                            v-show="item.type === '已有煤'"
@@ -102,8 +102,8 @@
                              :key="ele.key"
                              :label="ele.value"
                              :value="ele.key"
                            >{{ ele.value }}
                          </el-option>
                              >{{ ele.value }}
                            </el-option>
                          </el-select>
                        </div>
                      </el-form-item>
@@ -255,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>
@@ -289,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>
@@ -339,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>
@@ -457,11 +475,12 @@
    optimal: null,
    alternatives: [],
    error: null,
    createCoal: null,
  },
});
const coalInfoList = ref([]);
// onMounted
onMounted(async () => {
const getCoalInfo = async () => {
  let result = await getCoalInfoList();
  if (result.code === 200) {
    result.data.forEach((item) => {
@@ -474,6 +493,46 @@
  } 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) => {
@@ -616,9 +675,53 @@
  };
  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 = () => {
  console.log(coalForms.value)
  // 数据验证
  let validCoals = coalForms.value.filter(
    (coal) => coal.name && coal.cv && coal.price
@@ -760,7 +863,7 @@
};
</script>

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

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