1、完善表格逻辑 2、完善配煤计算器 3、完善设备管理 4、完善采购管理

zhang_12370

2025-07-23 2c9fbc6f1a3ccd1418efa9c348ec12faf1ab3258

 src/views/calculator/index.vue

@@ -403,7 +403,9 @@
            <!-- 混合煤属性 -->
            <div class="props-section">
              <div class="props-title">📊 混合煤属性</div>
              <div class="props-grid">
              
              <!-- 基础属性展示区 -->
              <div class="props-display-grid">
                <div class="prop-item">
                  <span class="prop-label">发热量:</span>
                  <span class="prop-value"
@@ -434,19 +436,45 @@
                    >{{ 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 class="props-input-section">
                <div class="input-row">
                  <div class="input-item">
                    <label class="input-label">生成煤种:</label>
                    <el-autocomplete
                      v-model="result.optimal.props.createCoal"
                      :fetch-suggestions="querySearch"
                      clearable
                      size="small"
                      class="coal-input"
                      placeholder="请输入/选择生成煤种"
                      @blur="handleSelect($event)"
                      @select="handleSelect($event)"
                    />
                  </div>
                  <div class="input-item">
                    <label class="input-label">生产数量:</label>
                    <el-input 
                      type="number"
                      clearable
                      size="small"
                      class="quantity-input"
                      v-model="result.optimal.props.createCoalQuantity"
                      placeholder="请输入生产数量"
                      :min="0"
                      :max="999999"
                      :step="0.1"
                      :precision="2"
                      @input="handleQuantityInput"
                      @blur="handleQuantityBlur"
                    >
                      <template #suffix>
                        <span style="color: #909399; font-size: 12px;">吨</span>
                      </template>
                    </el-input>
                  </div>
                </div>
              </div>
            </div>
@@ -652,6 +680,29 @@
    result.value.optimal.props.createCoal = matchedName;
  }
};

// 处理数量输入
const handleQuantityInput = (value) => {
  // 限制输入范围和精度
  if (value !== null && value !== undefined && value !== '') {
    const numValue = parseFloat(value);
    if (numValue < 0) {
      result.value.optimal.props.createCoalQuantity = 0;
    } else if (numValue > 999999) {
      result.value.optimal.props.createCoalQuantity = 999999;
    }
  }
};

// 处理数量失焦
const handleQuantityBlur = (event) => {
  const value = event.target.value;
  if (value && !isNaN(value)) {
    // 格式化为两位小数
    const formatted = parseFloat(value).toFixed(2);
    result.value.optimal.props.createCoalQuantity = formatted;
  }
};
onMounted(async () => {
  getCoalInfo();
  geInfoCoals();
@@ -801,7 +852,8 @@
  const validationChecks = [
    { condition: !result.value, message: "请先计算最优配比后再添加至待入库" },
    { condition: !result.value.optimal, message: "请先计算最优配比" },
    { condition: !result.value.optimal.props.createCoal, message: "请先选择生成煤种" }
    { condition: !result.value.optimal.props.createCoal, message: "请先选择生成煤种" },
    { condition: !result.value.optimal.props.createCoalQuantity || result.value.optimal.props.createCoalQuantity <= 0, message: "请输入有效的生产数量" }
  ];

  for (const check of validationChecks) {
@@ -828,7 +880,6 @@
  );
  // 准备数据
  const optimalData = result.value.optimal;
  optimalData.props.totalTonnage = formInline.value.totalTonnage;
  optimalData.props.cost = parseFloat(optimalData.props.cost.toFixed(2));
  
  // 添加官方ID
@@ -872,9 +923,13 @@
    const instructions = genInstructions(
      validCoals,
      ratios,
      formInline.value.totalTonnage,
      formInline.value.scoopWeight
    );

    // 初始化扩展属性
    props.createCoal = "";
    props.createCoalQuantity = 0;
    props.coalId = null;

    data.result = {
      show: true,
@@ -917,7 +972,7 @@
      if (altRatios) {
        const altProps = calcBlendProps(coals, altRatios);
        const altInstructions = genInstructions(
          coals, altRatios, formInline.value.totalTonnage, formInline.value.scoopWeight
          coals, altRatios, formInline.value.scoopWeight
        );

        alternatives.push({
@@ -1186,6 +1241,66 @@
  margin-bottom: 10px;
}

/* 基础属性展示网格 */
.props-display-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 15px;
}

/* 输入操作区域 */
.props-input-section {
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}

.input-row {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.input-item {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.input-label {
  font-size: 13px;
  color: #606266;
  margin-bottom: 6px;
  font-weight: 500;
}

.coal-input,
.quantity-input {
  width: 100%;
  border-radius: 4px;
}

.coal-input :deep(.el-input__wrapper),
.quantity-input :deep(.el-input__wrapper) {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: all 0.2s;
  min-height: 32px;
}

.coal-input :deep(.el-input__wrapper):hover,
.quantity-input :deep(.el-input__wrapper):hover {
  border-color: #c0c4cc;
}

.coal-input :deep(.el-input__wrapper.is-focus),
.quantity-input :deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.props-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
@@ -1346,8 +1461,18 @@
}

@media (max-width: 768px) {
  .props-grid {
  .props-display-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .input-row {
    flex-direction: column;
    gap: 12px;
  }

  .input-item {
    min-width: 100%;
  }

  .table-container {
@@ -1357,6 +1482,21 @@
  :deep(.el-table .cell) {
    padding: 4px 8px;
  }

  .right-card {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 1024px) {
  .props-display-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .input-row {
    gap: 12px;
  }
}
:deep(.el-input__wrapper) {
  min-height: 24px !important;
@@ -1364,4 +1504,22 @@
:deep(.el-input__inner) {
  min-height: 24px !important;
}

/* 数量输入框样式优化 */
.coal-input :deep(.el-input__suffix),
.quantity-input :deep(.el-input__suffix) {
  display: flex;
  align-items: center;
  padding-right: 8px;
}

/* 输入框的后缀单位样式 */
.coal-input :deep(.el-input__suffix-inner),
.quantity-input :deep(.el-input__suffix-inner) {
  display: flex;
  align-items: center;
  font-style: normal;
  color: #909399;
  font-size: 12px;
}
</style>