zhang_12370
2 天以前 23006c64e0d7478ff2e8c723f2bfda3781b65b09
src/views/calculator/index.vue
@@ -6,16 +6,48 @@
        <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="12">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              label-width="110"
              label-position="top"
            >
              <el-row :gutter="16">
                <el-col :span="8">
                  <el-form-item label="待配煤种数量">
                    <el-input v-model="formInline.num" type="number" clearable @change="updateCoalFields" />
                    <el-input
                      v-model="formInline.num"
                      type="number"
                      style="width: 100%"
                      @change="updateCoalFields"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-col :span="8">
                  <el-form-item label="参与配煤总吨数">
                    <el-input v-model="formInline.count" type="number" clearable />
                    <el-input
                      v-model="formInline.totalTonnage"
                      type="number"
                      style="width: 100%"
                    >
                      <template v-slot:suffix>
                        <i style="font-style: normal">吨</i>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="每铲重量">
                    <el-input
                      v-model="formInline.scoopWeight"
                      type="number"
                      style="width: 100%"
                    >
                      <template v-slot:suffix>
                        <i style="font-style: normal">吨</i>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
@@ -23,119 +55,892 @@
          </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-col :span="6">
                    <el-form-item label="每铲重量(吨/铲)">
                      <el-input v-model="formInline.count1" type="number" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
              </div>
            </el-form>
            <div class="coal-forms-container">
              <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 :gutter="16">
                    <el-col :span="6">
                      <el-form-item label="煤种类型">
                        <el-select
                          v-model="item.type"
                          placeholder="请选择"
                          style="width: 100%"
                          @change="handleCoalTypeChange(index)"
                        >
                          <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)">
                        <div class="input-wrapper">
                          <el-input
                            v-model="item.coalId"
                            v-show="item.type !== '已有煤'"
                            placeholder="请输入"
                            style="width: 100%"
                          />
                          <el-select
                            v-model="item.coalId"
                            v-show="item.type === '已有煤'"
                            placeholder="请选择"
                            style="width: 100%"
                            @change="handleCoalSelectChange(index, item.coalId)"
                          >
                            <el-option
                              v-for="ele in infoCoals"
                              :key="ele.key"
                              :label="ele.value"
                              :value="ele.key"
                              >{{ ele.value }}
                            </el-option>
                          </el-select>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="发热量">
                        <el-input
                          v-if="item.type !== '未知煤'"
                          :value="
                            infoCoals.find((coal) => coal.key === item.coalId)
                              ?.item.coalValues.find((value) => value.fieldName === '发热量')?.coalValue || '0'
                          "
                          type="number"
                          style="width: 100%"
                          :disabled="true"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">kcal</i>
                          </template>
                        </el-input>
                        <el-input
                          v-else
                          v-model="item.cv"
                          type="number"
                          placeholder="请输入发热量"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">kcal</i>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="价格">
                        <el-input
                        v-if="item.type !== '未知煤'"
                          :value="
                            infoCoals.find((coal) => coal.key === item.coalId)
                              ?.item.priceExcludingTax || 0
                          "
                          type="number"
                          style="width: 100%"
                          :disabled="item.type === '已有煤'"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">元/吨</i>
                          </template>
                        </el-input>
                        <el-input
                        v-else
                          v-model="item.price"
                          placeholder="请输入价格"
                          type="number"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">元/吨</i>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <el-form-item label="硫分">
                        <el-input
                          v-if="item.type !== '未知煤'"
                          :disabled="item.type === '已有煤'"
                          v-model="item.sulfur"
                          :value="
                            infoCoals.find((coal) => coal.key === item.coalId)
                              ?.item.coalValues.find((value) => value.fieldName === '硫分')?.coalValue || '0'
                          "
                          type="number"
                          placeholder="可选"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">%</i>
                          </template>
                        </el-input>
                        <el-input
                          v-else
                          v-model="item.sulfur"
                          type="number"
                          placeholder="可选"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">%</i>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="灰分">
                        <el-input
                          v-if="item.type !== '未知煤'"
                          :disabled="item.type === '已有煤'"
                          v-model="item.ash"
                          :value="
                            infoCoals.find((coal) => coal.key === item.coalId)
                              ?.item.coalValues.find((value) => value.fieldName === '灰分')?.coalValue || '0'
                          "
                          type="number"
                          placeholder="可选"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">%</i>
                          </template>
                        </el-input>
                        <el-input
                          v-else
                          v-model="item.ash"
                          type="number"
                          placeholder="可选"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">%</i>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="水分">
                        <el-input
                        v-if="item.type !== '未知煤'"
                        :disabled="item.type === '已有煤'"
                        v-model="item.moisture"
                        :value="
                            infoCoals.find((coal) => coal.key === item.coalId)
                              ?.item.coalValues.find((value) => value.fieldName === '水分')?.coalValue || '0'
                          "
                          type="number"
                          placeholder="可选"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">%</i>
                          </template>
                        </el-input>
                        <el-input
                        v-else
                          v-model="item.moisture"
                          type="number"
                          placeholder="可选"
                          style="width: 100%"
                        >
                          <template v-slot:suffix>
                            <i style="font-style: normal">%</i>
                          </template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-divider />
                </div>
              </el-form>
            </div>
          </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-form
              :inline="true"
              :model="constraints"
              class="demo-form-inline"
              label-width="110"
              label-position="top"
            >
              <el-row :gutter="16">
                <el-col :span="6">
                  <el-form-item label="混合煤最低发热量(CV)">
                    <el-input v-model="formInline.num" type="number" clearable @change="updateCoalFields" />
                    <el-input
                      v-model="constraints.minCalorific"
                      type="number"
                      style="width: 100%"
                    >
                      <template v-slot:suffix>
                        <i style="font-style: normal">kcal</i>
                      </template>
                    </el-input>
                  </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 label="混合煤最高硫分">
                    <el-input
                      v-model="constraints.maxSulfur"
                      type="number"
                      placeholder="可选"
                      style="width: 100%"
                    >
                      <template v-slot:suffix>
                        <i style="font-style: normal">%</i>
                      </template>
                    </el-input>
                  </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 label="混合煤最高灰分">
                    <el-input
                      v-model="constraints.maxAsh"
                      type="number"
                      placeholder="可选"
                      style="width: 100%"
                    >
                      <template v-slot:suffix>
                        <i style="font-style: normal">%</i>
                      </template>
                    </el-input>
                  </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 label="混合煤最高水分">
                    <el-input
                      v-model="constraints.maxMoisture"
                      type="number"
                      placeholder="可选"
                      style="width: 100%"
                    >
                      <template v-slot:suffix>
                        <i style="font-style: normal">%</i>
                      </template>
                    </el-input>
                  </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>
          <el-button type="primary" @click="addWarehoused" plain>
            添加至待入库
          </el-button>
          <el-button type="primary" @click="submitForm">计算最优配比</el-button>
        </div>
      </div>
      <div class="right-card">
        <div class="count-region">结果区</div>
        <div class="count-region">配煤优化结果</div>
        <div class="result-scroll">
          <!-- 错误信息 -->
          <div v-if="result.show && result.error" class="error-box">
            <el-alert
              :title="result.error"
              type="error"
              :closable="false"
              show-icon
            />
          </div>
          <!-- 最优配比结果 -->
          <div
            v-if="result.show && result.optimal && !result.error"
            class="result-section"
          >
            <div class="result-title">🎯 最优配比结果</div>
            <!-- 配比表 -->
            <div class="table-container">
              <el-table
                :data="result.optimal.instructions"
                border
                size="small"
                class="result-table"
                style="width: 100%"
              >
                <el-table-column prop="coalId" label="煤种" min-width="80">
                  <template #default="scope">
                    {{
                      infoCoals.find((coal) => coal.key === scope.row.coalId)
                        ?.value ||
                      "" ||
                      matchCoalName(scope.row.coalId)
                    }}
                  </template>
                </el-table-column>
                <el-table-column prop="ratio" label="配比" min-width="80">
                  <template #default="scope"> {{ scope.row.ratio }}% </template>
                </el-table-column>
                <el-table-column prop="quantity" label="吨数" min-width="80">
                  <template #default="scope">
                    {{ scope.row.quantity }}吨
                  </template>
                </el-table-column>
                <el-table-column prop="scoops" label="铲数" min-width="80">
                  <template #default="scope">
                    {{ scope.row.scoops }}铲
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 混合煤属性 -->
            <div class="props-section">
              <div class="props-title">📊 混合煤属性</div>
              <div class="props-grid">
                <div class="prop-item">
                  <span class="prop-label">发热量:</span>
                  <span class="prop-value"
                    >{{ result.optimal.props.cv.toFixed(2) }} kcal</span
                  >
                </div>
                <div class="prop-item">
                  <span class="prop-label">硫分:</span>
                  <span class="prop-value"
                    >{{ result.optimal.props.sulfur.toFixed(2) }}%</span
                  >
                </div>
                <div class="prop-item">
                  <span class="prop-label">灰分:</span>
                  <span class="prop-value"
                    >{{ result.optimal.props.ash.toFixed(2) }}%</span
                  >
                </div>
                <div class="prop-item">
                  <span class="prop-label">水分:</span>
                  <span class="prop-value"
                    >{{ result.optimal.props.moisture.toFixed(2) }}%</span
                  >
                </div>
                <div class="prop-item">
                  <span class="prop-label">成本:</span>
                  <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>
          </div>
          <!-- 备选方案 -->
          <div
            v-if="result.show && result.alternatives.length > 0"
            class="alternatives-section"
          >
            <div class="result-title">🔄 备选方案</div>
            <div
              v-for="(alt, index) in result.alternatives"
              :key="index"
              class="alt-item"
            >
              <div class="alt-title">{{ alt.desc }}</div>
              <div class="table-container">
                <el-table
                  :data="alt.instructions"
                  border
                  size="small"
                  class="alt-table"
                  style="width: 100%"
                >
                  <el-table-column prop="coalId" label="煤种" min-width="80">
                    <template #default="scope">
                      {{
                        infoCoals.find((coal) => coal.key === scope.row.coalId)
                          ?.value ||
                        "" ||
                        matchCoalName(scope.row.coalId)
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="ratio" label="配比" min-width="80">
                    <template #default="scope">
                      {{ scope.row.ratio }}%
                    </template>
                  </el-table-column>
                  <el-table-column prop="quantity" label="吨数" min-width="80">
                    <template #default="scope">
                      {{ scope.row.quantity }}吨
                    </template>
                  </el-table-column>
                  <el-table-column prop="scoops" label="铲数" min-width="80">
                    <template #default="scope">
                      {{ scope.row.scoops }}铲
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="alt-props">
                <span>发热量: {{ alt.props.cv.toFixed(2) }} kcal,</span>
                <span>硫分: {{ alt.props.sulfur.toFixed(2) }}%,</span>
                <span>灰分: {{ alt.props.ash.toFixed(2) }}%,</span>
                <span>水分: {{ alt.props.moisture.toFixed(2) }}%,</span>
                <span class="cost"
                  >成本: {{ alt.props.cost.toFixed(2) }} 元/吨</span
                >
              </div>
            </div>
          </div>
          <!-- 空状态 -->
          <div v-if="!result.show" class="empty-state">
            <el-empty description="点击左侧计算最优配比按钮查看结果" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs, nextTick, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getCoalInfoList } from "@/api/procureMent"; // 假设有一个API获取煤种信息
import { getCoalBlendingList,addPendingInventory } from "@/api/calculator/index.js";
const data = reactive({
  formInline: {
    num: 1
    num: 3, // 默认3个煤种
    totalTonnage: 1000, // 参与配煤总吨数
    scoopWeight: 50, // 每铲重量
  },
  // 约束条件
  constraints: {
    minCalorific: 5600, // 混合煤最低发热量
    maxSulfur: 1.2, // 混合煤最高硫分
    maxAsh: 15.0, // 混合煤最高灰分
    maxMoisture: "", // 混合煤最高水分
  },
  coalForms: [
    {
      name: '',
      ratio: 0,
      weight: 0
    }
      type: "未知煤",
      coalId: "煤A",
      cv: 6200, // 发热量
      price: 450, // 价格
      sulfur: 0.6, // 硫分
      ash: 12.0, // 灰分
      moisture: 8.0, // 水分
    },
    {
      type: "未知煤",
      coalId: "煤B",
      cv: 5800,
      price: 380,
      sulfur: 1.0,
      ash: 14.0,
      moisture: 10.0,
    },
    {
      type: "未知煤",
      coalId: "煤C",
      cv: 5400,
      price: 320,
      sulfur: 1.4,
      ash: 16.0,
      moisture: 12.0,
    },
  ],
})
const { formInline, coalForms } = toRefs(data)
  // 计算结果
  result: {
    show: false,
    optimal: null,
    alternatives: [],
    error: null,
    createCoal: null,
  },
});
const handleCoalSelectChange = (index, coalId) => {
  const selectedCoal = infoCoals.value.find(item => item.key === coalId);
  if (!selectedCoal?.item?.coalValues) {
    console.warn('未找到选中的煤种数据或数据格式不正确');
    return;
  }
  // 获取煤质参数的通用函数
  const getCoalValue = (fieldName) => {
    return selectedCoal.item.coalValues.find(
      value => value.fieldName === fieldName
    )?.coalValue || 0;
  };
  // 批量更新表单数据
  Object.assign(data.coalForms[index], {
    price: selectedCoal.item.priceExcludingTax || 0,
    cv: getCoalValue("发热量"),
    sulfur: getCoalValue("硫分"),
    ash: getCoalValue("灰分"),
    moisture: getCoalValue("水分")
  });
};
const coalInfoList = ref([]);
// 获取煤种信息
const getCoalInfo = async () => {
  try {
    const result = await getCoalInfoList();
    if (result.code === 200) {
      coalInfoList.value = result.data.map(item => ({
        value: item.coal,
        key: item.id,
      }));
    } else {
      ElMessage.error("获取煤种信息失败,请稍后重试");
    }
  } catch (error) {
    ElMessage.error("获取煤种信息失败,请稍后重试");
  }
};
// 表格展示用:匹配煤种名称
const matchCoalName = (name) => {
  if (!name || !coalInfoList.value?.length) return name;
  // 优先按 key 匹配,再按 value 匹配
  const foundCoal = coalInfoList.value.find(item =>
    String(item.key) === String(name) || item.value === name
  );
  return foundCoal?.value || name;
};
// 自动补全搜索
const querySearch = (q, cb) => {
  const results = q
    ? coalInfoList.value.filter(c => c.value.includes(q))
    : coalInfoList.value;
  cb(results);
};
// 选择/失焦处理
const handleSelect = (item) => {
  const val = item.value || item.target?.value || "";
  const found = coalInfoList.value.find(c => c.value === val || c.key === val);
  result.value.optimal.props.createCoal = found ? found.key : val;
  result.value.optimal.props.coalId = found?.key || null;
  // 更新显示名称
  const matchedName = matchCoalName(result.value.optimal.props.createCoal);
  if (matchedName !== result.value.optimal.props.createCoal) {
    result.value.optimal.props.createCoal = matchedName;
  }
};
onMounted(async () => {
  getCoalInfo();
  geInfoCoals();
});
const infoCoals = ref([]);
// 初始化煤种字段
const geInfoCoals = async () => {
  try {
    const res = await getCoalBlendingList();
    if (res.code === 200) {
      console.log("获取煤种信息成功", res.data);
      infoCoals.value = res.data.map(item => ({
        value: item.supplierCoal,
        key: item.coalId,
        item,
      }));
    } else {
      ElMessage.error("获取煤种信息失败,请稍后重试");
    }
  } catch (error) {
    ElMessage.error("获取煤种信息失败,请稍后重试");
  }
};
// 线性规划求解函数
const solveBlend = (coals, constraints) => {
  // 数据验证
  const validateConstraint = (constraintValue, fieldName, coalField) => {
    if (constraintValue && coals.some(coal => !coal[coalField] && coal[coalField] !== 0)) {
      throw new Error(`如果设置了${fieldName}约束,则所有煤种都必须提供${fieldName}数据。`);
    }
  };
  validateConstraint(constraints.maxSulfur, '最大硫分', 'sulfur');
  validateConstraint(constraints.maxAsh, '最大灰分', 'ash');
  validateConstraint(constraints.maxMoisture, '最大水分', 'moisture');
  try {
    // 简单的等权重分配作为初始解
    let ratios = new Array(coals.length).fill(1 / coals.length);
    // 验证约束条件并调整配比
    let blendProps = calcBlendProps(coals, ratios);
    if (constraints.minCalorific && blendProps.cv < constraints.minCalorific) {
      // 优先使用高发热量煤种
      const sortedCoals = coals
        .map((coal, i) => ({ index: i, cv: coal.cv }))
        .sort((a, b) => b.cv - a.cv);
      ratios = new Array(coals.length).fill(0);
      ratios[sortedCoals[0].index] = 0.6;
      if (sortedCoals[1]) ratios[sortedCoals[1].index] = 0.4;
    }
    return ratios;
  } catch (error) {
    throw error;
  }
};
// 计算混合属性
const calcBlendProps = (coals, ratios) => {
  let cv = 0,
    sulfur = 0,
    ash = 0,
    moisture = 0,
    cost = 0;
  for (let i = 0; i < coals.length; i++) {
    cv += ratios[i] * Number(coals[i].cv || 0);
    sulfur += ratios[i] * Number(coals[i].sulfur || 0);
    ash += ratios[i] * Number(coals[i].ash || 0);
    moisture += ratios[i] * Number(coals[i].moisture || 0);
    cost += ratios[i] * Number(coals[i].price || 0);
  }
  return { cv, sulfur, ash, moisture, cost };
};
// 生成操作指令
const genInstructions = (coals, ratios, total, scoop) => {
  return coals
    .map((coal, i) => {
      if (ratios[i] < 1e-6) return null;
      let quantity = ratios[i] * total;
      let scoops = quantity / scoop;
      return {
        coalId: coal.coalId,
        ratio: (ratios[i] * 100).toFixed(2),
        quantity: quantity.toFixed(1),
        scoops: scoops.toFixed(1),
      };
    })
    .filter(Boolean);
};
const cancel = () => {
  // 重置表单逻辑
  data.formInline = {
    num: 3,
    totalTonnage: 1000,
    scoopWeight: 50,
  };
  data.constraints = {
    minCalorific: 5600,
    maxSulfur: 1.2,
    maxAsh: 15.0,
    maxMoisture: "",
  };
  data.coalForms = [
    {
      type: "未知煤",
      coalId: "煤A",
      cv: 6200,
      price: 450,
      sulfur: 0.6,
      ash: 12.0,
      moisture: 8.0,
    },
    {
      type: "未知煤",
      coalId: "煤B",
      cv: 5800,
      price: 380,
      sulfur: 1.0,
      ash: 14.0,
      moisture: 10.0,
    },
    {
      type: "未知煤",
      coalId: "煤C",
      cv: 5400,
      price: 320,
      sulfur: 1.4,
      ash: 16.0,
      moisture: 12.0,
    },
  ];
  data.result = {
    show: false,
    optimal: null,
    alternatives: [],
    error: null,
  };
  ElMessage.success("表单已重置");
};
const addWarehoused = () => {
  // 验证前置条件
  const validationChecks = [
    { condition: !result.value, message: "请先计算最优配比后再添加至待入库" },
    { condition: !result.value.optimal, message: "请先计算最优配比" },
    { condition: !result.value.optimal.props.createCoal, message: "请先选择生成煤种" }
  ];
  for (const check of validationChecks) {
    if (check.condition) {
      ElMessage.error(check.message);
      return;
    }
  }
  // 验证配比中的煤种
  const coals = result.value.optimal.instructions.map(item => item.coalId);
  const allCoalsFound = coals.every(coalId =>
    coalInfoList.value.some(item => item.key === coalId)
  );
  if (!allCoalsFound) {
    ElMessage.error("配比中包含未知煤种,请先添加至煤种列表");
    return;
  }
  // 验证生成煤种
  const createCoalExists = coalInfoList.value.some(
    item => item.key === result.value.optimal.props.coalId
  );
  if (!createCoalExists) {
    ElMessage.warning("生成煤种是未知煤种,无法添加至待入库");
    return;
  }
  // 准备数据
  const optimalData = result.value.optimal;
  optimalData.props.totalTonnage = formInline.value.totalTonnage;
  optimalData.props.cost = parseFloat(optimalData.props.cost.toFixed(2));
  // 添加官方ID
  optimalData.instructions.forEach(item => {
    item.officialId = item.coalId;
  });
  const params = {
    fieldsResultList: optimalData.props,
    coalResultList: optimalData.instructions,
  };
  addPendingInventory(params).then(res => {
    if (res.code === 200 && res.data === true) {
      ElMessage.success("添加至待入库成功");
    }
  });
};
const submitForm = () => {
  // 数据验证
  const validCoals = coalForms.value.filter(
    coal => coal.coalId && coal.cv && coal.price
  );
  if (validCoals.length < 2) {
    ElMessage.error("至少需要2个有效的煤种数据(名称、发热量、价格为必填)");
    return;
  }
  try {
    // 求解最优配比
    const ratios = solveBlend(validCoals, constraints.value);
    if (!ratios) {
      data.result.error = "无可行解,请检查约束条件或煤种数据";
      data.result.show = true;
      return;
    }
    // 计算结果
    const props = calcBlendProps(validCoals, ratios);
    const instructions = genInstructions(
      validCoals,
      ratios,
      formInline.value.totalTonnage,
      formInline.value.scoopWeight
    );
    data.result = {
      show: true,
      optimal: { ratios, props, instructions },
      alternatives: [],
      error: null,
    };
    // 生成备选方案
    generateAlternatives(validCoals);
    ElMessage.success("配煤优化计算完成");
  } catch (error) {
    data.result.error = error.message || "计算过程中发生错误";
    data.result.show = true;
    ElMessage.error(data.result.error);
  }
};
const generateAlternatives = (coals) => {
  const altList = [
    { desc: "发热量降1%", mod: { minCalorific: constraints.value.minCalorific * 0.99 } },
    { desc: "发热量降2%", mod: { minCalorific: constraints.value.minCalorific * 0.98 } },
    { desc: "硫分升1%", mod: { maxSulfur: constraints.value.maxSulfur * 1.01 } },
    { desc: "硫分升2%", mod: { maxSulfur: constraints.value.maxSulfur * 1.02 } },
    {
      desc: "发热量降0.5%且硫分升0.5%",
      mod: {
        minCalorific: constraints.value.minCalorific * 0.995,
        maxSulfur: constraints.value.maxSulfur * 1.005,
      }
    },
  ];
  data.result.alternatives = altList.reduce((alternatives, alt) => {
    try {
      const altConstraints = { ...constraints.value, ...alt.mod };
      const altRatios = solveBlend(coals, altConstraints);
      if (altRatios) {
        const altProps = calcBlendProps(coals, altRatios);
        const altInstructions = genInstructions(
          coals, altRatios, formInline.value.totalTonnage, formInline.value.scoopWeight
        );
        alternatives.push({
          desc: alt.desc,
          ratios: altRatios,
          props: altProps,
          instructions: altInstructions,
        });
      }
    } catch (error) {
      console.warn(`备选方案 ${alt.desc} 计算失败:`, error);
    }
    return alternatives;
  }, []);
};
const { formInline, constraints, coalForms, result } = toRefs(data);
const updateCoalFields = () => {
  const num = parseInt(formInline.value.num);
@@ -143,34 +948,67 @@
    coalForms.value = [];
    return;
  }
  // 如果当前数组长度大于所需数量,截断
  // 截断多余的或填充不足的煤种
  if (coalForms.value.length > num) {
    coalForms.value = coalForms.value.slice(0, num);
    return;
  } else {
    while (coalForms.value.length < num) {
      coalForms.value.push({
        type: "未知煤",
        coalId: `煤${String.fromCharCode(65 + coalForms.value.length)}`,
        cv: 0,
        price: 0,
        sulfur: "",
        ash: "",
        moisture: "",
      });
    }
  }
  // 否则,填充新的空对象
  while (coalForms.value.length < num) {
    coalForms.value.push({
      name: '',
      ratio: 0,
      weight: 0
    });
  }
}
};
// 处理煤种类型变化
const handleCoalTypeChange = (index) => {
  coalForms.value[index].coalId = "";
};
</script>
<style scoped>
<style scoped lang="scss">
.view {
  display: flex;
  gap: 10px;
}
.left-card {
  background: #fff;
  width: calc(100% - 600px);
  flex: 1;
  min-width: 0;
  padding: 16px;
  margin-right: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.coal-forms-container {
  overflow-x: auto;
  padding-bottom: 8px;
}
.coal-forms-container::-webkit-scrollbar {
  height: 6px;
}
.coal-forms-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.coal-forms-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.coal-forms-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.count-region {
  font-size: 18px;
  color: #000000;
@@ -179,10 +1017,30 @@
.scroll {
  height: calc(100vh - 14em);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}
.scroll::-webkit-scrollbar {
  width: 6px;
}
.scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.title {
  font-size: 14px;
  color: #165DFF;
  color: #165dff;
  line-height: 20px;
  font-weight: 600;
  padding-left: 10px;
@@ -196,7 +1054,7 @@
  top: 3px; /* 调整垂直位置 */
  width: 4px; /* 小数条宽度 */
  height: 14px; /* 小数条高度 */
  background-color: #165DFF; /* 蓝色 */
  background-color: #165dff; /* 蓝色 */
}
.el-divider--horizontal {
  margin: 12px 0;
@@ -208,7 +1066,308 @@
.right-card {
  background: #fff;
  width: 600px;
  min-width: 400px;
  height: auto;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
.result-scroll {
  height: calc(100vh - 14em);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}
.result-scroll::-webkit-scrollbar {
  width: 6px;
}
.result-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.result-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.result-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.error-box {
  margin-bottom: 20px;
}
.result-section,
.alternatives-section {
  margin-bottom: 20px;
}
.result-title {
  font-size: 16px;
  color: #165dff;
  font-weight: 600;
  margin-bottom: 15px;
  padding-left: 10px;
  position: relative;
}
.result-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 16px;
  background-color: #165dff;
}
.result-table,
.alt-table {
  margin-bottom: 15px;
}
.table-container {
  overflow-x: auto;
  margin-bottom: 15px;
  border-radius: 4px;
}
.table-container::-webkit-scrollbar {
  height: 6px;
}
.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.input-wrapper {
  position: relative;
  min-height: 32px;
  width: 100%;
}
.input-wrapper .el-input,
.input-wrapper .el-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  transition: opacity 0.2s ease-in-out;
}
/* 确保input-wrapper内的组件宽度 */
.input-wrapper :deep(.el-input),
.input-wrapper :deep(.el-select) {
  width: 100% !important;
}
.input-wrapper :deep(.el-input__wrapper),
.input-wrapper :deep(.el-select .el-input__wrapper) {
  width: 100% !important;
}
.props-section {
  margin-top: 15px;
}
.props-title {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin-bottom: 10px;
}
.props-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.prop-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 13px;
  align-items: center;
}
.prop-label {
  color: #606266;
}
.prop-value {
  font-weight: 600;
  color: #303133;
}
.prop-value.cost {
  color: #e6a23c;
  font-weight: bold;
}
.alt-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background: #fafafa;
}
.alt-title {
  font-size: 14px;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 10px;
}
.alt-props {
  font-size: 12px;
  color: #606266;
  margin-top: 10px;
  line-height: 1.6;
}
.alt-props .cost {
  color: #e6a23c;
  font-weight: 600;
}
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
/* 防止页面抖动的样式 */
:deep(.el-input) {
  width: 100% !important;
  min-width: 100% !important;
}
:deep(.el-select) {
  width: 100% !important;
  min-width: 100% !important;
}
:deep(.el-form-item) {
  margin-bottom: 18px;
  width: 100%;
}
:deep(.el-form-item__label) {
  padding-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  height: auto;
}
:deep(.el-form-item__content) {
  min-height: 32px;
  line-height: 32px;
  width: 100%;
}
:deep(.el-col) {
  padding-right: 8px;
  box-sizing: border-box;
}
:deep(.el-col:last-child) {
  padding-right: 0;
}
/* 确保输入框容器有固定高度和宽度 */
:deep(.el-input__wrapper) {
  min-height: 32px;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 100% !important;
}
:deep(.el-select .el-input__wrapper) {
  min-height: 32px;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 100% !important;
}
/* 防止tooltip引起的抖动 */
:deep(.el-tooltip) {
  display: block;
  width: 100%;
}
/* 统一行高和间距 */
:deep(.el-row) {
  margin-bottom: 0;
}
/* 防止内容变化引起的布局跳动 */
:deep(.el-input__inner),
:deep(.el-select__input) {
  min-height: 30px;
  line-height: 30px;
}
/* 响应式设计 */
@media (max-width: 1200px) {
  .view {
    flex-direction: column;
  }
  .left-card {
    width: 100%;
  }
  .right-card {
    width: 100%;
    min-width: auto;
  }
  .scroll {
    height: calc(100vh - 20em);
  }
  .result-scroll {
    height: calc(100vh - 20em);
  }
}
@media (max-width: 768px) {
  .props-grid {
    grid-template-columns: 1fr;
  }
  .table-container {
    font-size: 12px;
  }
  :deep(.el-table .cell) {
    padding: 4px 8px;
  }
}
:deep(.el-input__wrapper) {
  min-height: 24px !important;
}
:deep(.el-input__inner) {
  min-height: 24px !important;
}
</style>