From fe9b7707e2c9a3e7f043ab211587ed25f1df00ef Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 23 十月 2025 13:20:20 +0800
Subject: [PATCH] 智能巡检前端页面
---
src/views/calculator/index.vue | 586 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 336 insertions(+), 250 deletions(-)
diff --git a/src/views/calculator/index.vue b/src/views/calculator/index.vue
index fa71e86..e9da943 100644
--- a/src/views/calculator/index.vue
+++ b/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>
@@ -581,92 +609,98 @@
const handleCoalSelectChange = (index, coalId) => {
const selectedCoal = infoCoals.value.find(item => item.key === coalId);
- if (selectedCoal && selectedCoal.item && selectedCoal.item.coalValues) {
- console.log('閫変腑鐨勭叅绉�:', selectedCoal);
-
- // 瀹夊叏鍦拌幏鍙栧悇椤圭叅璐ㄥ弬鏁�
- const getCoalValue = (fieldName) => {
- const coalValue = selectedCoal.item.coalValues.find(
- (value) => value.fieldName === fieldName
- );
- return coalValue ? coalValue.coalValue : '';
- };
-
- // 鏇存柊琛ㄥ崟鏁版嵁
- data.coalForms[index].price = selectedCoal.item.priceExcludingTax || 0;
- data.coalForms[index].cv = getCoalValue("鍙戠儹閲�") || 0;
- data.coalForms[index].sulfur = getCoalValue("纭垎") || 0;
- data.coalForms[index].ash = getCoalValue("鐏板垎") || 0;
- data.coalForms[index].moisture = getCoalValue("姘村垎") || 0;
-
- // 璁剧疆浠锋牸锛堝鏋滄湁鐨勮瘽锛�
- if (selectedCoal.item.priceExcludingTax) {
- data.coalForms[index].price = selectedCoal.item.priceExcludingTax;
- }
-
- console.log('鏇存柊鍚庣殑琛ㄥ崟鏁版嵁:', data.coalForms[index]);
- } else {
+ 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([]);
-// onMounted
+// 鑾峰彇鐓ょ淇℃伅
const getCoalInfo = async () => {
- let result = await getCoalInfoList();
- if (result.code === 200) {
- result.data.forEach((item) => {
- let obj = {
+ try {
+ const result = await getCoalInfoList();
+ if (result.code === 200) {
+ coalInfoList.value = result.data.map(item => ({
value: item.coal,
key: item.id,
- };
- coalInfoList.value.push(obj);
- });
- } else {
+ }));
+ } else {
+ ElMessage.error("鑾峰彇鐓ょ淇℃伅澶辫触锛岃绋嶅悗閲嶈瘯");
+ }
+ } catch (error) {
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 (!name || !coalInfoList.value?.length) return name;
+
+ // 浼樺厛鎸� key 鍖归厤锛屽啀鎸� value 鍖归厤
+ const foundCoal = coalInfoList.value.find(item =>
+ String(item.key) === String(name) || item.value === name
);
- if (byKey) return byKey.value;
- // value 鍖归厤
- const byValue = coalInfoList.value.find((item) => item.value === name);
- if (byValue) return byValue.value;
- // 鍘熸牱杩斿洖
- return name;
+
+ return foundCoal?.value || name;
};
// 鑷姩琛ュ叏鎼滅储
const querySearch = (q, cb) => {
- const res = q
- ? coalInfoList.value.filter((c) => c.value.includes(q))
+ const results = q
+ ? coalInfoList.value.filter(c => c.value.includes(q))
: coalInfoList.value;
- cb(res);
+ cb(results);
};
-// 閫夋嫨/澶辩劍鏃讹紝浼樺厛瀛� 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
- );
+ 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;
- // 鏂板锛氬鏋滃尮閰嶆垚鍔燂紝鐣欎竴涓猧d瀛楁
- if (found) {
- result.value.optimal.props.coalId = found.key;
- } else {
- result.value.optimal.props.coalId = null;
+ 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;
}
- let match = matchCoalName(result.value.optimal.props.createCoal);
- if (match && match !== result.value.optimal.props.createCoal) {
- result.value.optimal.props.createCoal = match;
+};
+
+// 澶勭悊鏁伴噺杈撳叆
+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 () => {
@@ -676,67 +710,51 @@
const infoCoals = ref([]);
// 鍒濆鍖栫叅绉嶅瓧娈�
const geInfoCoals = async () => {
- let res = await getCoalBlendingList();
- if (res.code === 200) {
- infoCoals.value = res.data.map((item) => ({
- value: item.supplierCoal,
- key: item.coalId,
- item,
- }));
- console.log(infoCoals.value);
- } else {
+ 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) => {
// 鏁版嵁楠岃瘉
- if (constraints.maxSulfur) {
- let missingSulfur = coals.some((coal) => !coal.sulfur && coal.sulfur !== 0);
- if (missingSulfur) {
- throw new Error(
- "濡傛灉璁剧疆浜嗘渶澶х～鍒嗙害鏉燂紝鍒欐墍鏈夊弬涓庨厤姣旂殑鐓ょ閮藉繀椤绘彁渚涚～鍒嗘暟鎹��"
- );
+ const validateConstraint = (constraintValue, fieldName, coalField) => {
+ if (constraintValue && coals.some(coal => !coal[coalField] && coal[coalField] !== 0)) {
+ throw new Error(`濡傛灉璁剧疆浜�${fieldName}绾︽潫锛屽垯鎵�鏈夌叅绉嶉兘蹇呴』鎻愪緵${fieldName}鏁版嵁銆俙);
}
- }
- if (constraints.maxAsh) {
- let missingAsh = coals.some((coal) => !coal.ash && coal.ash !== 0);
- if (missingAsh) {
- throw new Error("濡傛灉璁剧疆浜嗘渶澶х伆鍒嗙害鏉燂紝鍒欐墍鏈夌叅绉嶉兘蹇呴』鎻愪緵鐏板垎鏁版嵁銆�");
- }
- }
- if (constraints.maxMoisture) {
- let missingMoisture = coals.some(
- (coal) => !coal.moisture && coal.moisture !== 0
- );
- if (missingMoisture) {
- throw new Error("濡傛灉璁剧疆浜嗘渶澶ф按鍒嗙害鏉燂紝鍒欐墍鏈夌叅绉嶉兘蹇呴』鎻愪緵姘村垎鏁版嵁銆�");
- }
- }
+ };
- // 绠�鍗曠殑绾挎�ц鍒掓眰瑙ｏ紙鏈�灏忓寲鎴愭湰锛�
- // 杩欓噷浣跨敤绠�鍖栫殑绠楁硶锛屽疄闄呴」鐩腑鍙互闆嗘垚鏇翠笓涓氱殑姹傝В鍣�
+ validateConstraint(constraints.maxSulfur, '鏈�澶х～鍒�', 'sulfur');
+ validateConstraint(constraints.maxAsh, '鏈�澶х伆鍒�', 'ash');
+ validateConstraint(constraints.maxMoisture, '鏈�澶ф按鍒�', 'moisture');
+
try {
- // 妯℃嫙姹傝В杩囩▼
- let totalCoals = coals.length;
- let ratios = new Array(totalCoals).fill(0);
-
// 绠�鍗曠殑绛夋潈閲嶅垎閰嶄綔涓哄垵濮嬭В
- let avgRatio = 1 / totalCoals;
- ratios = ratios.map(() => avgRatio);
+ let ratios = new Array(coals.length).fill(1 / coals.length);
- // 楠岃瘉绾︽潫鏉′欢
+ // 楠岃瘉绾︽潫鏉′欢骞惰皟鏁撮厤姣�
let blendProps = calcBlendProps(coals, ratios);
if (constraints.minCalorific && blendProps.cv < constraints.minCalorific) {
- // 璋冩暣閰嶆瘮浠ユ弧瓒虫渶浣庡彂鐑噺
- let highCvCoals = coals
+ // 浼樺厛浣跨敤楂樺彂鐑噺鐓ょ
+ const sortedCoals = coals
.map((coal, i) => ({ index: i, cv: coal.cv }))
.sort((a, b) => b.cv - a.cv);
- ratios = new Array(totalCoals).fill(0);
- ratios[highCvCoals[0].index] = 0.6;
- ratios[highCvCoals[1] ? highCvCoals[1].index : 0] = 0.4;
+ ratios = new Array(coals.length).fill(0);
+ ratios[sortedCoals[0].index] = 0.6;
+ if (sortedCoals[1]) ratios[sortedCoals[1].index] = 0.4;
}
return ratios;
@@ -830,77 +848,60 @@
ElMessage.success("琛ㄥ崟宸查噸缃�");
};
const addWarehoused = () => {
+ // 楠岃瘉鍓嶇疆鏉′欢
+ const validationChecks = [
+ { condition: !result.value, message: "璇峰厛璁＄畻鏈�浼橀厤姣斿悗鍐嶆坊鍔犺嚦寰呭叆搴�" },
+ { condition: !result.value.optimal, message: "璇峰厛璁＄畻鏈�浼橀厤姣�" },
+ { condition: !result.value.optimal.props.createCoal, message: "璇峰厛閫夋嫨鐢熸垚鐓ょ" },
+ { condition: !result.value.optimal.props.createCoalQuantity || result.value.optimal.props.createCoalQuantity <= 0, message: "璇疯緭鍏ユ湁鏁堢殑鐢熶骇鏁伴噺" }
+ ];
- 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.coalId);
- 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;
+ for (const check of validationChecks) {
+ if (check.condition) {
+ ElMessage.error(check.message);
+ return;
}
}
- if (!allFound) {
+
+ // 楠岃瘉閰嶆瘮涓殑鐓ょ
+ 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;
}
- let createCoalFound = false;
- for (const item of coalInfoList.value) {
- if (item.key === result.value.optimal.props.coalId) {
- createCoalFound = true;
- break;
- }
- }
- if (!createCoalFound) {
- ElMessage.warning("鐢熸垚鐓ょ鏄湭鐭ョ叅绉嶏紝鏃犳硶娣诲姞鑷冲緟鍏ュ簱");
- return;
- }
- // result.value.optimal.props fieldsResultList
- // result.value.optimal.instructions 琛ㄦ牸鏁版嵁coalResultList
- console.log("娣诲姞鑷冲緟鍏ュ簱鏁版嵁锛�", result.value.optimal);
- // cost淇濈暀涓や綅灏忔暟
- result.value.optimal.props.totalTonnage = formInline.value.totalTonnage;
- result.value.optimal.instructions.forEach((item) => {
- item.officialId = item.coalId; // 娣诲姞瀹樻柟ID瀛楁
- });
- result.value.optimal.props.cost = parseFloat(
- result.value.optimal.props.cost.toFixed(2)
+
+ // 楠岃瘉鐢熸垚鐓ょ
+ const createCoalExists = coalInfoList.value.some(
+ item => item.key === result.value.optimal.props.coalId
);
- result.value.optimal.props.totalTonnage = formInline.value.totalTonnage;
- let arr = [result.value.optimal.props, [...result.value.optimal.instructions]];
- let params = {
- fieldsResultList: arr[0],
- coalResultList: arr[1],
+ // 鍑嗗鏁版嵁
+ const optimalData = result.value.optimal;
+ 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("娣诲姞鑷冲緟鍏ュ簱鎴愬姛");
- }
- })
+
+ addPendingInventory(params).then(res => {
+ if (res.code === 200 && res.data === true) {
+ ElMessage.success("娣诲姞鑷冲緟鍏ュ簱鎴愬姛");
+ }
+ });
};
const submitForm = () => {
- console.log("鐓ょ淇℃伅锛�", coalForms.value);
// 鏁版嵁楠岃瘉
- let validCoals = coalForms.value.filter(
- (coal) => coal.coalId && coal.cv && coal.price
+ const validCoals = coalForms.value.filter(
+ coal => coal.coalId && coal.cv && coal.price
);
if (validCoals.length < 2) {
@@ -910,7 +911,7 @@
try {
// 姹傝В鏈�浼橀厤姣�
- let ratios = solveBlend(validCoals, constraints.value);
+ const ratios = solveBlend(validCoals, constraints.value);
if (!ratios) {
data.result.error = "鏃犲彲琛岃В锛岃妫�鏌ョ害鏉熸潯浠舵垨鐓ょ鏁版嵁";
data.result.show = true;
@@ -918,21 +919,21 @@
}
// 璁＄畻缁撴灉
- let props = calcBlendProps(validCoals, ratios);
- let instructions = genInstructions(
+ const props = calcBlendProps(validCoals, ratios);
+ const instructions = genInstructions(
validCoals,
ratios,
- formInline.value.totalTonnage,
formInline.value.scoopWeight
);
+ // 鍒濆鍖栨墿灞曞睘鎬�
+ props.createCoal = "";
+ props.createCoalQuantity = 0;
+ props.coalId = null;
+
data.result = {
show: true,
- optimal: {
- ratios,
- props,
- instructions,
- },
+ optimal: { ratios, props, instructions },
alternatives: [],
error: null,
};
@@ -950,57 +951,42 @@
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%",
+ { 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 = [];
-
- for (let alt of altList) {
+ data.result.alternatives = altList.reduce((alternatives, alt) => {
try {
- let altConstraints = Object.assign({}, constraints.value, alt.mod);
- let altRatios = solveBlend(coals, altConstraints);
- if (!altRatios) continue;
+ 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.scoopWeight
+ );
- let altProps = calcBlendProps(coals, altRatios);
- let altInstructions = genInstructions(
- coals,
- altRatios,
- formInline.value.totalTonnage,
- formInline.value.scoopWeight
- );
-
- data.result.alternatives.push({
- desc: alt.desc,
- ratios: altRatios,
- props: altProps,
- instructions: altInstructions,
- });
+ 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);
@@ -1012,29 +998,26 @@
return;
}
- // 濡傛灉褰撳墠鏁扮粍闀垮害澶т簬鎵�闇�鏁伴噺锛屾埅鏂�
+ // 鎴柇澶氫綑鐨勬垨濉厖涓嶈冻鐨勭叅绉�
if (coalForms.value.length > num) {
coalForms.value = coalForms.value.slice(0, num);
- return;
- }
-
- // 鍚﹀垯锛屽～鍏呮柊鐨勭┖瀵硅薄
- while (coalForms.value.length < num) {
- coalForms.value.push({
- type: "鏈煡鐓�",
- coalId: `鐓�${String.fromCharCode(65 + coalForms.value.length)}`,
- cv: 0,
- price: 0,
- sulfur: "",
- ash: "",
- moisture: "",
- });
+ } else {
+ while (coalForms.value.length < num) {
+ coalForms.value.push({
+ type: "鏈煡鐓�",
+ coalId: `鐓�${String.fromCharCode(65 + coalForms.value.length)}`,
+ cv: 0,
+ price: 0,
+ sulfur: "",
+ ash: "",
+ moisture: "",
+ });
+ }
}
};
// 澶勭悊鐓ょ绫诲瀷鍙樺寲
const handleCoalTypeChange = (index) => {
- // 褰撶叅绉嶇被鍨嬫敼鍙樻椂锛屾竻绌虹叅绉嶅悕绉帮紝閬垮厤鏁版嵁娣蜂贡
coalForms.value[index].coalId = "";
};
</script>
@@ -1258,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;
@@ -1418,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 {
@@ -1429,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;
@@ -1436,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>
--
Gitblit v1.9.3