From b66453b8b4a7ba6dc94127bb5c9a6647519e447a Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 04 六月 2025 13:40:00 +0800
Subject: [PATCH] 配煤计算页面开发
---
src/views/calculator/index.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/src/views/calculator/index.vue b/src/views/calculator/index.vue
new file mode 100644
index 0000000..280d2c1
--- /dev/null
+++ b/src/views/calculator/index.vue
@@ -0,0 +1,214 @@
+<template>
+ <div class="app-container">
+ <div class="view">
+ <div class="left-card">
+ <div class="count-region">鏁板�艰緭鍏ュ尯</div>
+ <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="8">
+ <el-form-item label="寰呴厤鐓ょ鏁伴噺">
+ <el-input v-model="formInline.num" type="number" clearable @change="updateCoalFields" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="鍙備笌閰嶇叅鎬诲惃鏁�">
+ <el-input v-model="formInline.count" type="number" clearable />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="姣忛摬閲嶉噺(鍚�/閾�)">
+ <el-input v-model="formInline.count1" type="number" clearable />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </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-row>
+ <el-divider />
+ </div>
+ </el-form>
+ </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-col :span="6">
+ <el-form-item label="娣峰悎鐓ゆ渶浣庡彂鐑噺(CV)">
+ <el-input v-model="formInline.num" type="number" clearable @change="updateCoalFields" />
+ </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>
+ </el-col>
+ <el-col :span="6">
+ <el-form-item label="娣峰悎鐓ゆ渶楂樼伆鍒�(%)">
+ <el-input v-model="formInline.count1" 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 placeholder="鍙��"/>
+ </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>
+ </div>
+ </div>
+ <div class="right-card">
+ <div class="count-region">缁撴灉鍖�</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+const data = reactive({
+ formInline: {
+ num: 1
+ },
+ coalForms: [
+ {
+ name: '',
+ ratio: 0,
+ weight: 0
+ }
+ ],
+})
+const { formInline, coalForms } = toRefs(data)
+
+const updateCoalFields = () => {
+ const num = parseInt(formInline.value.num);
+ if (isNaN(num) || num <= 0) {
+ coalForms.value = [];
+ return;
+ }
+
+ // 濡傛灉褰撳墠鏁扮粍闀垮害澶т簬鎵�闇�鏁伴噺锛屾埅鏂�
+ if (coalForms.value.length > num) {
+ coalForms.value = coalForms.value.slice(0, num);
+ return;
+ }
+
+ // 鍚﹀垯锛屽～鍏呮柊鐨勭┖瀵硅薄
+ while (coalForms.value.length < num) {
+ coalForms.value.push({
+ name: '',
+ ratio: 0,
+ weight: 0
+ });
+ }
+}
+</script>
+
+<style scoped>
+.view {
+ display: flex;
+}
+.left-card {
+ background: #fff;
+ width: calc(100% - 600px);
+ padding: 16px;
+ margin-right: 10px;
+}
+.count-region {
+ font-size: 18px;
+ color: #000000;
+ line-height: 25px;
+}
+.scroll {
+ height: calc(100vh - 14em);
+ overflow-y: auto;
+}
+.title {
+ font-size: 14px;
+ color: #165DFF;
+ line-height: 20px;
+ font-weight: 600;
+ padding-left: 10px;
+ position: relative;
+ margin: 6px 0;
+}
+.title::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 3px; /* 璋冩暣鍨傜洿浣嶇疆 */
+ width: 4px; /* 灏忔暟鏉″搴� */
+ height: 14px; /* 灏忔暟鏉￠珮搴� */
+ background-color: #165DFF; /* 钃濊壊 */
+}
+.el-divider--horizontal {
+ margin: 12px 0;
+}
+.footer {
+ text-align: right;
+}
+
+.right-card {
+ background: #fff;
+ width: 600px;
+ height: auto;
+ padding: 16px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3