From 73a69a02987994ab14d0b6678a187302dd380308 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Mon, 10 Feb 2025 09:07:36 +0800
Subject: [PATCH 1/4] merge master

---
 src/assets/photo_icon.svg                      |   1 +
 src/views/components/Footer.vue                | 100 ++++++++++++++++++++++++-
 src/views/components/Liquid.vue                |  73 +++++++-----------
 src/views/graphite/components/TakePickture.vue |  49 +++++++++---
 src/views/graphite/index.vue                   |  34 ++++-----
 5 files changed, 180 insertions(+), 77 deletions(-)
 create mode 100644 src/assets/photo_icon.svg

diff --git a/src/assets/photo_icon.svg b/src/assets/photo_icon.svg
new file mode 100644
index 0000000..3a619cc
--- /dev/null
+++ b/src/assets/photo_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="51" height="38" viewBox="0 0 51 38"><g><path d="M34.3172,23.1571Q34.3172,24.7195,33.7294,26.0866Q33.1416,27.4537,32.1339,28.4582Q31.1262,29.4626,29.7827,30.0485Q28.4391,30.6344,26.8716,30.6344Q25.3041,30.6344,23.9605,30.0485Q22.6169,29.4626,21.6092,28.4582Q20.6015,27.4537,20.0137,26.0866Q19.4259,24.7195,19.4259,23.1571Q19.4259,21.6505,20.0137,20.2834Q20.6015,18.9163,21.6092,17.9119Q22.6169,16.9075,23.9605,16.3216Q25.3041,15.7357,26.8716,15.7357Q28.4391,15.7357,29.7827,16.3216Q31.1262,16.9075,32.1339,17.9119Q33.1416,18.9163,33.7294,20.2834Q34.3172,21.6505,34.3172,23.1571ZM6.60593,38Q5.03842,38,3.80681,37.721Q2.57519,37.442,1.73546,36.7724Q0.895719,36.1028,0.44786,34.9589Q0,33.815,0,32.0852L0,13.2247Q0,10.0999,1.48353,8.87225Q2.96707,7.64464,6.15807,7.64464L15.5631,7.64464Q16.4588,7.64464,17.0467,7.30984Q17.6345,6.97504,17.9984,6.41703Q18.3622,5.85903,18.6422,5.10573Q18.9221,4.35242,19.258,3.57122Q19.8178,2.12041,21.2173,1.06021Q22.6169,0,24.4083,0L29.6147,0Q31.6861,0,33.0017,1.14391Q34.3172,2.28781,34.7651,3.57122Q35.3809,5.24523,36.3886,6.44493Q37.3963,7.64464,38.5159,7.64464L45.6257,7.64464Q48.0889,7.58884,49.5445,8.98385Q51,10.3789,51,13.0573L51,32.1968Q51,35.0426,49.4885,36.5213Q47.9769,38,45.4577,38L6.60593,38ZM26.7596,11.4949Q24.2964,11.4949,22.169,12.4156Q20.0417,13.3363,18.4742,14.9266Q16.9067,16.5169,15.983,18.6373Q15.0593,20.7577,15.0593,23.1571Q15.0593,25.6123,15.983,27.7327Q16.9067,29.8532,18.4742,31.4156Q20.0417,32.978,22.169,33.8987Q24.2964,34.8194,26.7596,34.8194Q29.1669,34.8194,31.2942,33.8987Q33.4215,32.978,34.989,31.4156Q36.5565,29.8532,37.4802,27.7327Q38.404,25.6123,38.404,23.1571Q38.404,20.7577,37.4802,18.6373Q36.5565,16.5169,34.989,14.9266Q33.4215,13.3363,31.2942,12.4156Q29.1669,11.4949,26.7596,11.4949ZM30.6784,5.46843Q30.6784,4.57563,30.5944,4.07342Q30.5104,3.57122,29.4468,3.57122L24.8002,3.57122Q23.7366,3.51542,23.6526,4.01762Q23.5686,4.51983,23.5686,5.46843Q23.5126,6.52864,23.6806,6.97504Q23.8485,7.42144,24.8002,7.42144L29.4468,7.42144Q30.5104,7.42144,30.5944,6.91924Q30.6784,6.41704,30.6784,5.46843Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>
\ No newline at end of file
diff --git a/src/views/components/Footer.vue b/src/views/components/Footer.vue
index 1e73a02..c6d4c80 100644
--- a/src/views/components/Footer.vue
+++ b/src/views/components/Footer.vue
@@ -1,3 +1,99 @@
+
 <template>
-    <div class="h-[--footerHeight] pl-[--menuAreaWidth]">Footer</div>
-</template>
\ No newline at end of file
+    <div class="h-[--footerHeight] bg-[--bgColor] footer">
+        <div class="footer_ins">
+            <van-icon name="discount-o" size="15" style="padding:5px"/>
+            <span class="ins_text text_size">等待指令</span>
+        </div>
+
+        <div class="footer_waste">
+            <van-popover v-model:show="showContainerPopover" placement="top-end">
+                <template #reference>
+                    <div class="footer_container">
+                        <div class="circle" style="background-color: #F2652D;"></div>
+                        <div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
+                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
+                    </div>
+                </template>
+                <Liquid></Liquid>
+            </van-popover>
+        </div>
+
+        <div class="footer_normal">
+            <van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
+                <template #reference>
+                    <div class="footer_container">
+                        <div class="circle"></div>
+                        <div class="waste_status text_size">溶液正常</div>
+                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
+                    </div>
+                </template>
+                <Liquid></Liquid>
+            </van-popover>
+        </div>
+    </div>
+
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import Liquid from './Liquid.vue'
+const showContainerPopover = ref(false)
+const showWastePopover = ref(false)
+
+</script>
+<style scoped>
+    .footer{
+       display: flex; 
+       align-items: center;
+    }
+    .footer_ins{
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        background: #FFFFFF;
+        height: 80px;
+        width: 1268px;
+        margin-left: 380px;
+    }
+    .footer_waste{
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        width: 430px;
+        height: 80px;
+        background: #FFFFFF;
+        margin-left: 10px;
+    }
+
+    .footer_normal{
+        margin-left: 100px;
+    }
+
+    .text_size{
+        font-size:30px;
+        padding-right: 5px;
+    }
+    .footer_container{
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        width: 500px;
+        height: 80px;
+        background: #FFFFFF;
+        .circle {
+            width: 30px; 
+            height: 30px; 
+            background-color: green; 
+            border-radius: 50%; 
+            margin-left: 10px;
+        }
+
+        .waste_status{
+            padding:5px 5px;
+        }
+
+        .waste_detail{
+            margin-left: auto
+        }
+    }
+</style>
diff --git a/src/views/components/Liquid.vue b/src/views/components/Liquid.vue
index c356a89..6fdae36 100644
--- a/src/views/components/Liquid.vue
+++ b/src/views/components/Liquid.vue
@@ -1,24 +1,22 @@
 <template>
-    <div class="container">
-        <div>
-            <div class="waster_status">废液回收状态</div>
-            <div class="waster_pos">
-                <div class="contail_percentage"></div>
-                <div class="liquid" style="height: 50%;"></div>
-                <div class="percent_num">50%</div>
-            </div>
-            <div class="container_water_name">
-                碱中和容器
-            </div>
+    <div class="liquid">
+        <div class="liquid_status">废液回收状态</div>
+        <div class="liquid_pos">
+            <div class="contail_percentage"></div>
+            <div class="liquid_percent" style="height: 50%;"></div>
+            <div class="percent_num">50%</div>
+        </div>
+        <div class="container_water_name">
+            碱中和容器
         </div>
         <br/>
         <div>
-            <div class="waster_status">溶液容器状态</div>
+            <div class="liquid_status">溶液容器状态</div>
             <div class="solu_list">
                 <div v-for="solu in solutionList" :key="solu.id">
-                    <div class="waster_pos">
+                    <div class="liquid_pos">
                         <div class="contail_percentage"></div>
-                        <div class="liquid" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
+                        <div class="liquid_percent" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
                         <div class="percent_num">{{ solu.percentage }}</div>
                     </div>
                     <div class="solu_name">
@@ -57,60 +55,48 @@
         percentage: '50%',
         color:"#cf67e7"
     },{
-        id : 1,
+        id : 6,
         name: '硫酸',
         percentage: '10%',
         color:"#cf67e7"
     },{
-        id : 2,
+        id : 7,
         name: '硫酸',
         percentage: '20%',
         color:"#07a16e"
     },{
-        id : 3,
+        id : 8,
         name: '硫酸',
         percentage: '30%',
-    },{
-        id : 4,
-        name: '硫酸',
-        percentage: '40%',
-        color:"#cf67e7"
-    },{
-        id : 5,
-        name: '硫酸',
-        percentage: '50%',
-        color:'#3586c6'
     }])
 
 </script>
 <style lang="css" scoped>
-    .container{
+    .liquid{
         background: #EEEFF8;
-        width: 1200px;
-        height: 900px;
+        width: 680px;
+        height: 690px;
         
-        .waster_pos{
+        .liquid_pos{
             position: relative;
             width: 100px;
-            height: 150px;
-            margin: 50px 60px;
+            height: 116px;
+            margin-top: 36px;
+            margin-left: 50px;
         }
-        .waster_status{
+        .liquid_status{
             height: 29px;
             font-family: Source Han Sans;
             font-size: 30px;
             font-weight: 500;
             color: #40474E;
-            padding-left: 26px;
             padding-top: 19px;
         }
 
         .contail_percentage{
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            width: 83px;
+            height: 116px;
             background-image: url('@/assets/container.svg');
             background-size: cover;
             background-position: center;
@@ -118,11 +104,10 @@
             border-radius: 10px;
         }
 
-        .liquid {
+        .liquid_percent {
             position: absolute;
             bottom: 0;
-            left: 0;
-            width: 100%;
+            width: 83px;
             background-color: blue;
             opacity: 0.5;
             z-index: 2;
@@ -135,14 +120,13 @@
             font-weight: 500;
             color: #9E9E9E;
             margin-left: 45px;
-            margin-top: -35px;
         }
     }
     .solu_list{
         display: flex;    
         justify-content: center;
         flex-wrap: wrap;
-        margin-top: 50px;
+        gap:2px
     }
 
     .solu_name{
@@ -151,7 +135,6 @@
         font-weight: 500;
         color: #9E9E9E;
         margin-left: 65px;
-        margin-top: -35px;
     }
 
     .percent_num{
diff --git a/src/views/graphite/components/TakePickture.vue b/src/views/graphite/components/TakePickture.vue
index d011854..cf80288 100644
--- a/src/views/graphite/components/TakePickture.vue
+++ b/src/views/graphite/components/TakePickture.vue
@@ -1,23 +1,54 @@
 <template>
-    <div class="picture">
-        <van-button class="area">拍照</van-button>
-            
+    <div class="graphite_right">
+        <div class="picture">
+            <div class="area">
+                <div class="area_btn">
+                    <img :src="PhotoSvg" class="photo_icon"/>
+                    拍照
+                </div>
+            </div>
+        </div>
     </div>
+    
 </template>
 <script lang="ts" setup>
-
+    import PhotoSvg from '@/assets/photo_icon.svg'
 </script>
 <style scoped>
+    .graphite_right{
+        width: 1040px;
+        display: flex;
+        justify-content: center;
+    }
+
     .picture{
-        height: 820px;
+        height: 726px;
+        width: 911px;
         background-image: url('@/assets/picture.svg');
         background-repeat: no-repeat;
+        margin-top:100px;
     }
+    
     .area{
-        margin-left: 80%;
-        margin-top: 760px;
+        background: rgba(255, 255, 255, 0.5);
         font-size: 26px;
-        width: 130px;
-        
+        width: 911px;
+        height: 126px;
+        position: absolute;
+        margin-top: 600px;
+        .area_btn{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 126px;
+            font-size: 42px;
+            font-weight: bold;
+            color: #FFFFFF;
+            gap:10px;
+            .photo_icon{
+                width: 51px;
+                height: 38px;
+            }
+        }
     }
 </style>
\ No newline at end of file
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index 697b8d7..b2e4279 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="graphite_home" id="home">
+    <div class="graphite_home component-page">
         <div class="heat_area">
             <div v-for="item in heatList" :key="item">
                 <HeatPosition :heatInfo="item"></HeatPosition>
@@ -7,13 +7,10 @@
         </div>
         <!--拍照区-->
         <div class="pickture_area">
-            <div class="pickture">
-                <TakePickture></TakePickture>
-            </div>
+            <TakePickture></TakePickture>
             <!--操作区-->
             <div class="graphite_btn">
-                <div><van-button size="large" class="btn_size" style="width: 840px;">开门</van-button></div>
-                <br/>
+                <div><van-button size="large" class="btn_size open">开门</van-button></div>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">开始任务</van-button>
@@ -22,7 +19,6 @@
                         <van-button  size="large" class="btn_size">结束任务</van-button>
                     </van-col>
                 </van-row>
-                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">选择配方</van-button>
@@ -31,7 +27,6 @@
                         <van-button  size="large" class="btn_size">执行配方</van-button>
                     </van-col>
                 </van-row>
-                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size" @click="onAddWaste">添加溶液</van-button>
@@ -40,9 +35,8 @@
                         <van-button  size="large" class="btn_size">摇匀</van-button>
                     </van-col>
                 </van-row>
-                <br/>
                 <van-row class="graphite_operate">
-                    <van-col span="7">
+                    <van-col style="width:306px">
                         <van-button  size="large" class="btn_size">移至加热</van-button>
                     </van-col>
                     <van-col span="7">
@@ -52,7 +46,6 @@
                         <van-button  size="large" class="btn_size">移至特殊</van-button>
                     </van-col>
                 </van-row>
-                <br/>
                 <van-row class="graphite_operate">
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">开始加热</van-button>
@@ -90,20 +83,15 @@
     .graphite_home{
         display: flex;
         background: #F6F6F6;
-        height: 1840px;
-        width: 2800px;
-        
     }
     .heat_area{
         width: 1268px;
-        height: 1586px;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         margin: 5px;
         gap: 20px;
         flex-direction: row;
-        padding-top:10px;
         padding-bottom: 100px;
         background: #FFFFFF;
         border-radius: 20px;
@@ -111,17 +99,15 @@
 
     .pickture_area{
         width: 1040px;
-        height: 1586px;
         margin: 5px;
         margin-left: 20px;
         background: #FFFFFF;
-        padding: 50px;
         border-radius: 20px;
     }
 
     .graphite_btn{
-        padding-top: 50px;
-        margin-left: 30px;
+        margin-left: 68px;
+        margin-top: 2rem;
     }
 
     .btn_size{
@@ -129,10 +115,16 @@
         height: 80px;
         color: #1989FA;
         border: 3px solid #1989FA;
+        
+    }
+
+    .open{
+        width: 906px;
     }
 
     .graphite_operate{
-        gap: 40px;
+        gap: 15px;
+        padding-top:30px;
     }
 
     .waste{

From e8e0b9b6365ebe08556b17aae8b855511552b6e0 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Sat, 8 Feb 2025 19:11:32 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A4=B4=E5=83=8Ficon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/avatar.svg | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/assets/avatar.svg

diff --git a/src/assets/avatar.svg b/src/assets/avatar.svg
new file mode 100644
index 0000000..ea89d9c
--- /dev/null
+++ b/src/assets/avatar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><defs><clipPath id="master_svg0_609_03555/609_03497"><rect x="8" y="8" width="24" height="24" rx="0"/></clipPath></defs><g><rect x="0" y="0" width="40" height="40" rx="20" fill="#1989FA" fill-opacity="1"/><g clip-path="url(#master_svg0_609_03555/609_03497)"><g><path d="M28.120604907226564,25.896875C27.67840490722656,24.849575,27.03680490722656,23.898375,26.231504907226565,23.096075C25.428604907226564,22.291475,24.47750490722656,21.649974999999998,23.430704907226563,21.207075C23.421304907226563,21.202375,23.41200490722656,21.199975000000002,23.40260490722656,21.195275000000002C24.862704907226565,20.140625,25.812004907226562,18.422655,25.812004907226562,16.484375C25.812004907226562,13.273435,23.21040490722656,10.671875,19.99946490722656,10.671875C16.788524907226563,10.671875,14.186964907226562,13.273435,14.186964907226562,16.484375C14.186964907226562,18.422655,15.136184907226562,20.140625,16.596334907226563,21.197675C16.586964907226562,21.202375,16.577584907226562,21.204675,16.56821490722656,21.209375C15.518214907226563,21.652375,14.576024907226563,22.287475,13.767434907226562,23.098475C12.962844907226563,23.901375,12.321344907226562,24.852475,11.878369907226563,25.899175C11.443186907226563,26.924075,11.208483707226563,28.022775,11.186963515026562,29.135975C11.186337956226563,29.160975,11.190725517226563,29.185875,11.199867807226562,29.209175C11.209010107226563,29.232375,11.222722007226562,29.253675,11.240195707226562,29.271575C11.257669407226562,29.289475,11.278551207226563,29.303675,11.301610907226562,29.313375C11.324669907226562,29.323175,11.349440907226562,29.328175,11.374463907226563,29.328075C11.374463907226563,29.328075,12.780714907226562,29.328075,12.780714907226562,29.328075C12.883834907226563,29.328075,12.965864907226562,29.246075,12.968214907226562,29.145275C13.015084907226562,27.335975,13.741654907226563,25.641375,15.026024907226562,24.357075000000002C16.354934907226564,23.028174999999997,18.119774907226564,22.296875,19.99946490722656,22.296875C21.879104907226562,22.296875,23.644004907226563,23.028174999999997,24.972904907226564,24.357075000000002C26.257304907226562,25.641375,26.983804907226563,27.335975,27.030704907226564,29.145275C27.033104907226562,29.248475,27.115104907226563,29.328075,27.218204907226564,29.328075C27.218204907226564,29.328075,28.624504907226562,29.328075,28.624504907226562,29.328075C28.64950490722656,29.328175,28.674304907226563,29.323175,28.697304907226563,29.313375C28.720404907226563,29.303675,28.741304907226564,29.289475,28.758704907226562,29.271575C28.776204907226564,29.253675,28.789904907226564,29.232375,28.799104907226564,29.209175C28.808204907226564,29.185875,28.81260490722656,29.160975,28.812004907226562,29.135975C28.788504907226564,28.015675,28.55650490722656,26.925775,28.120604907226564,25.896875C28.120604907226564,25.896875,28.120604907226564,25.896875,28.120604907226564,25.896875ZM19.99946490722656,20.515625C18.923684907226562,20.515625,17.911184907226563,20.096095,17.149464907226562,19.334375C16.387744907226562,18.572655,15.968214907226564,17.560155,15.968214907226564,16.484375C15.968214907226564,15.408595,16.387744907226562,14.396094999999999,17.149464907226562,13.634375C17.911184907226563,12.872655,18.923684907226562,12.453125,19.99946490722656,12.453125C21.075244907226562,12.453125,22.087704907226563,12.872655,22.84950490722656,13.634375C23.611204907226565,14.396094999999999,24.030704907226564,15.408595,24.030704907226564,16.484375C24.030704907226564,17.560155,23.611204907226565,18.572655,22.84950490722656,19.334375C22.087704907226563,20.096095,21.075244907226562,20.515625,19.99946490722656,20.515625Z" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file

From cfc02ca44b1ebfa0d595924baf3ada6164199f3f Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Mon, 10 Feb 2025 09:08:04 +0800
Subject: [PATCH 3/4] merge master

---
 src/assets/arrow.svg             |   1 +
 src/assets/logo.svg              |   2 +-
 src/assets/style/mixin.scss      |   3 +-
 src/views/addLiquid/index.vue    | 144 ++++++++++++++++++++++++++++++++++++++-
 src/views/components/Header.vue  | 117 +++++++++++--------------------
 src/views/liquidConfig/index.vue |   2 +-
 6 files changed, 186 insertions(+), 83 deletions(-)
 create mode 100644 src/assets/arrow.svg

diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg
new file mode 100644
index 0000000..157995c
--- /dev/null
+++ b/src/assets/arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="23" height="15" viewBox="0 0 23 15"><g transform="matrix(0,-1,1,0,-15,15)"><path d="M12.4365,15C12.4365,15,15,17.37044,15,17.37044C15,17.37044,5.12696,26.5,5.12696,26.5C5.12696,26.5,15,35.629599999999996,15,35.629599999999996C15,35.629599999999996,12.4365,38,12.4365,38C12.4365,38,0,26.5,0,26.5C0,26.5,12.4365,15,12.4365,15C12.4365,15,12.4365,15,12.4365,15Z" fill-rule="evenodd" fill="#1989FA" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index 7565660..771b0a2 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="224" height="233" viewBox="0 0 224 233"><g><g><path d="M223.99979977416993,114.45162603759766C223.99979977416993,124.83402603759765,215.86279977416993,133.25062603759767,205.82579977416992,133.25062603759767C195.7877997741699,133.25062603759767,89.86419977416992,119.90242603759765,46.42679977416992,114.45162603759766C95.25419977416992,108.22022603759766,195.7877997741699,95.65262603759766,205.82579977416992,95.65262603759766C215.86279977416993,95.65264605499766,223.99979977416993,104.06923603759766,223.99979977416993,114.45162603759766Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M201.21678225097656,176.92624592285156C201.23438225097658,182.56134592285156,196.82298225097657,187.13904592285155,191.37518225097656,187.13904592285155C185.94078225097655,187.13904592285155,128.59708225097657,179.92384592285157,105.07118225097656,176.95904592285157C131.50778225097656,173.58095592285156,185.94078225097655,166.77894592285156,191.37518225097656,166.77894592285156C196.79818225097657,166.77890588795157,201.19928225097658,171.31673592285156,201.21678225097656,176.92624592285156Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M215.93901684570312,149.52852961425782C215.94201684570314,157.61312961425782,209.60701684570313,164.16892961425782,201.79101684570313,164.16892961425782C193.97901684570314,164.16892961425782,114.44741684570312,153.77242961425782,80.63601684570312,149.52852961425782C118.64531684570312,144.68120961425782,193.97901684570314,134.8947296142578,201.79101684570313,134.8947296142578C209.60501684570312,134.8947296142578,215.93901684570312,141.44651961425782,215.93901684570312,149.52852961425782Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M112.735,0.0000200174C33.3546,-0.0135318,-21.121,82.656,7.90892,159.078C36.9389,235.5,131.249,257.697,189.387,201.791C181.175,201.01,163.001,198.721,131.435,194.661L127.085,194.11C85.6178,216.585,34.3882,200.014,12.688,157.106C-9.01216,114.197,7.04277,61.2171,48.539,38.7996C90.0352,16.382,141.243,33.0249,162.887,75.9634C169.261,88.781,184.624,93.5998,196.807,86.6023C208.989,79.6049,213.157,63.5677,206.008,51.1954C185.072,19.1593,150.118,-0.0260227,112.735,0.0000200174Z" fill="#275EFB" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/style/mixin.scss b/src/assets/style/mixin.scss
index 83d4fda..9c9fae4 100644
--- a/src/assets/style/mixin.scss
+++ b/src/assets/style/mixin.scss
@@ -1 +1,2 @@
-$textGray: #333;
\ No newline at end of file
+$textGray: #333;
+$addLiquidWidth: 410px;//加液配置 card宽度
\ No newline at end of file
diff --git a/src/views/addLiquid/index.vue b/src/views/addLiquid/index.vue
index f4c3a41..4277e9d 100644
--- a/src/views/addLiquid/index.vue
+++ b/src/views/addLiquid/index.vue
@@ -1,3 +1,143 @@
 <template>
-    <div>溶液配置</div>
-</template>
\ No newline at end of file
+    <div class="add_liquid_bottle">
+        <div class="add_liquid">
+            <div class="config_title">
+                <div class="config_name">
+                    <div>1 硝酸</div>
+                    <img :src="ArrowSvg" class="arrow_img"/>
+                </div>
+            </div>
+            <div class="bottle_ml">
+                <div class="liquid_pos">
+                    <div class="contail_percentage"></div>
+                    <div class="liquid_percent bottle_wd"></div>
+                    <div class="percent_num">300ml</div>
+                </div>
+                <div class="ml_name">
+                    300ml
+                </div>
+            </div>
+        </div>
+
+        <div class="add_liquid">
+            <div class="config_title">
+                <div class="config_name">
+                    <div>1 硝酸</div>
+                    <img :src="ArrowSvg" class="arrow_img"/>
+                </div>
+            </div>
+            <div class="bottle_ml">
+                <div class="liquid_pos">
+                    <div class="contail_percentage"></div>
+                    <div class="liquid_percent bottle_wd"></div>
+                    <div class="percent_num">300ml</div>
+                </div>
+                <div class="ml_name">
+                    300ml
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import ArrowSvg from '@/assets/arrow.svg'
+</script>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
+    .add_liquid_bottle{
+        display: flex;
+    }
+    .add_liquid{
+        background: #F4F9FF;
+        width: $addLiquidWidth;
+        height: 430px;
+        border:1px solid #275EFB;
+        margin-left: 135px;
+        margin-top:  160px;
+        border-radius: 20px;
+        .config_title{
+            width: $addLiquidWidth;
+            height: 80px;
+            background: rgba(25, 137, 250, 0.1216);
+            padding-top: 16px;
+            .config_name{
+                width: 248px;
+                height: 50px;
+                background: #FFFFFF;
+                margin-left: 80px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 50px;
+                .arrow_img{
+                    width: 15px;
+                    height: 23px;
+                }
+            }
+        }
+
+        .bottle_ml{
+            
+            .liquid_pos{
+                position: relative;
+                width: 162px;
+                height: 228px;
+                margin-top: 36px;
+                margin-left: 120px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .bottle_wd{
+                    height: 30%;
+                    background-color:red;
+                    width: 162px;
+                }
+            }
+            .liquid_status{
+                height: 29px;
+                font-family: Source Han Sans;
+                font-size: 30px;
+                font-weight: 500;
+                color: #40474E;
+                padding-top: 19px;
+            }
+
+            .contail_percentage{
+                position: absolute;
+                width: 162px;
+                height: 228px;
+                background-image: url('@/assets/container.svg');
+                background-size: cover;
+                background-position: center;
+                z-index: 1;
+                border-radius: 10px;
+            }
+
+            .liquid_percent {
+                position: absolute;
+                bottom: 0;
+                width: 83px;
+                background-color: blue;
+                opacity: 0.5;
+                z-index: 2;
+                border-radius: 0 0 10px 10px;
+            }
+
+            
+        }
+        .percent_num{
+            font-size: 30px;
+            position: relative;
+            z-index: 2;
+        }
+        .ml_name{
+            width: 174px;
+            height: 50px;
+            background: #FFFFFF;
+            margin-left: 120px;
+            text-align: center;
+            margin-top: 15px;
+            border-radius: 195px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
index 03b723d..68d43cd 100644
--- a/src/views/components/Header.vue
+++ b/src/views/components/Header.vue
@@ -1,111 +1,67 @@
 <template>
     <div class="header">
         <div class="header_logo">
-            <img :src="logo"/>
+            <img :src="logo" class="logo"/>
+            <div>长春黄金研究院有限公司</div>
         </div>
-        <!--时间区-->
-        <div class="header_menu">
+        <div class="header_time">
             {{ currentTime }}
         </div>
-        <!--指令区-->
-        <div class="header_ins">
-            <van-icon name="discount-o" size="30" style="padding:5px"/>
-            <span class="ins_text text_size">等待指令</span>
-        </div>
-
-        <div>
-            <van-popover v-model:show="showContainerPopover">
-                <template #reference>
-                    <div class="header_container">
-                        <div class="circle" style="background-color: #F2652D;"></div>
-                        <div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
-                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
-                    </div>
-                </template>
-                <div>
-                    <Liquid></Liquid>
-                </div>
-            </van-popover>
-        </div>
-
-        <div>
-            <van-popover v-model:show="showWastePopover">
-                <template #reference>
-                    <div class="header_container">
-                        <div class="circle"></div>
-                        <div class="waste_status text_size">溶液正常</div>
-                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
-                    </div>
-                </template>
-                <div>
-                    <Liquid></Liquid>
-                </div>
-            </van-popover>
-        </div>
-
         <div class="header_user">
-            <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" size="70"/>
-            <div style="font-size: 30px;">Admin</div>
+            <img :src="AvatarSvg" width="40px" height="40px"/>
+            <div class="user_name">Admin</div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-    import logo from '@/assets/logo.png'
+    import logo from '@/assets/logo.svg'
+    import AvatarSvg from '@/assets/avatar.svg'
     import { ref, onMounted } from 'vue'
-    import { useRouter } from 'vue-router'
     import {eventBus} from '@/eventBus'
-    import Liquid from './Liquid.vue'
     import { getFormattedDateTime } from '@/utils' 
-    const router = useRouter()
-    const menus = [{
-        text: '菜单',
-        value: 0
-    },{
-        text: '测试页面',
-        value: 1
-    }]
     const menuId = ref(0)
-    const menuList = ref(menus)
     const time = getFormattedDateTime()
     const currentTime = ref(time)
-    const showContainerPopover = ref(false)
-    const showWastePopover = ref(false)
     onMounted(()=>{
         //测试页面返回时，需要调整菜单 
         eventBus.on('menuId', (value:number)=>{
             menuId.value = value
         })
     })
-    const onHandleMenu = () => {
-        //跳转测试页面
-        if(menuId.value === 0){
-            router.push('/')
-        }
-        if(menuId.value === 1){
-            router.push('/test')
-        }
-    }
-
 </script>
-<style scoped>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
     .header{
-        width: 100%;
         display: flex;
         align-items: center;
-
+        background: #e9e9e9;
+        align-items: center;
         height: var(--headerHeight);
         .header_logo{
-            padding:10px 10px;
+            display: flex;
+            font-size: 36px;
+            align-items: center;
+            width: 700px;
+            color: #8799AB;
+            gap: 5px;
+            padding-left: 50px;
+            
+            .logo{
+                height:85px;
+                width:85px;
+            }
         }
         
-        .header_menu{
-            margin-left:12px;
-            width: 361px;
-            padding-top:5px;
+        .header_time{
+            width: 375px;
+            height: 80px;
             font-size: 28px;
-            .header_menu_item{
-                color:#FFFFFF
-            }
+            display: flex;
+            align-items: center;
+            margin-left: 54%;
+            background: white;
+            justify-content: center;
+            border-radius: 10px;
         }
 
         .header_ins{
@@ -140,10 +96,15 @@
         .header_user{
             display: flex;
             align-items: center;
-            width: 25%;
             justify-content: flex-end;
-            padding-right: 20px;
             gap: 5px;
+            margin-left: 30px;            
+
+        }
+
+        .user_name{
+            font-size: 34px;
+            color: #393F46;
         }
     }
 
diff --git a/src/views/liquidConfig/index.vue b/src/views/liquidConfig/index.vue
index c2c2c27..f4c3a41 100644
--- a/src/views/liquidConfig/index.vue
+++ b/src/views/liquidConfig/index.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>加液配置</div>
+    <div>溶液配置</div>
 </template>
\ No newline at end of file

From d371cd335d2e32dc8ebf1952320e2dea1d125474 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Mon, 10 Feb 2025 15:32:35 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=BA=B6=E6=B6=B2?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue                  |  46 -------
 src/components/OverlayModal.vue                |  59 +++++++++
 src/views/addLiquid/index.vue                  | 162 ++++++++++++++++-------
 src/views/components/chooseAcidDlg.vue         |  73 +++++++++++
 src/views/graphite/components/AddLiquid.vue    | 173 +++++++++++++++++++++++++
 src/views/graphite/components/AddWaste.vue     | 173 -------------------------
 src/views/graphite/components/CarfList.vue     | 101 +++++++++++++++
 src/views/graphite/components/HeatPosition.vue |   2 -
 src/views/graphite/components/index.ts         |   2 +-
 src/views/graphite/index.vue                   |  57 ++++----
 src/views/liquidConfig/index.vue               |   2 +-
 11 files changed, 557 insertions(+), 293 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/OverlayModal.vue
 create mode 100644 src/views/components/chooseAcidDlg.vue
 create mode 100644 src/views/graphite/components/AddLiquid.vue
 delete mode 100644 src/views/graphite/components/AddWaste.vue
 create mode 100644 src/views/graphite/components/CarfList.vue

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 3402ee1..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { showToast } from "vant";
-
-defineProps<{
-	msg: string;
-}>();
-const value = ref<number>(50);
-const onChange = (value: number) => showToast("当前值：" + value);
-</script>
-
-<template>
-	<div class="greetings">
-		<h1 class="green">{{ msg }}</h1>
-		<h3>
-			You’ve successfully created a project with
-			<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-			<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-		</h3>
-		<span class="text-lg font-medium">{{ value }}</span>
-		<van-slider class="my-8" :step="0.5" v-model="value" @change="onChange" />
-	</div>
-</template>
-
-<style scoped>
-.greetings {
-	--van-slider-bar-height: 6px;
-	--van-slider-button-width: 32px;
-	--van-slider-button-height: 32px;
-}
-h1 {
-	font-weight: 500;
-	font-size: 2.6rem;
-	position: relative;
-	top: -10px;
-}
-
-h3 {
-	font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-	text-align: center;
-}
-</style>
diff --git a/src/components/OverlayModal.vue b/src/components/OverlayModal.vue
new file mode 100644
index 0000000..d8ca6d0
--- /dev/null
+++ b/src/components/OverlayModal.vue
@@ -0,0 +1,59 @@
+<template>
+    <van-overlay :show="visible" style="z-index: 999;">
+        <div class="overlay_modal" >
+          <slot></slot>
+        </div>
+      </van-overlay>
+</template>
+<script lang="ts" setup>
+    import { ref, onMounted, watch } from "vue"
+    const emits = defineEmits(['confirm', 'changeVisible'])
+
+    const props = defineProps({
+        title:{
+            type: String,
+            default: ''
+        },
+        visible:{
+            type: Boolean,
+            default: false
+        },
+        list:{
+            type: Array,
+            default: ()=>[]
+        },
+        width:{
+            type:String,
+            default:'32rem'
+        },
+        height:{
+            type:String,
+            default:'25rem'
+        },
+        item:{
+            type: Object
+        }
+    })
+
+    const columnsList = ref<any>(props.list)
+
+    const onSubmit = () => {
+        emits('confirm')
+    }
+
+    const onCancel = ()=> {
+        emits("changeVisible", false)
+    }
+</script>
+<style scoped>
+    .overlay_modal{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 12.5rem;
+    }
+    .picker_title{
+        font-size: 2rem;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/views/addLiquid/index.vue b/src/views/addLiquid/index.vue
index 4277e9d..85c2f70 100644
--- a/src/views/addLiquid/index.vue
+++ b/src/views/addLiquid/index.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="add_liquid_bottle">
-        <div class="add_liquid">
-            <div class="config_title">
+    <div class="component-page add_liquid_bottle">
+        <div v-for="(corros, index) in corrosionList" class="add_liquid">
+            <div class="config_title" @click="onChooseLiquid(corros)">
                 <div class="config_name">
-                    <div>1 硝酸</div>
+                    <div>{{ index + 1 }} {{ corros.name }}</div>
                     <img :src="ArrowSvg" class="arrow_img"/>
                 </div>
             </div>
@@ -11,60 +11,126 @@
                 <div class="liquid_pos">
                     <div class="contail_percentage"></div>
                     <div class="liquid_percent bottle_wd"></div>
-                    <div class="percent_num">300ml</div>
+                    <div class="percent_num">{{ corros.ml }}</div>
                 </div>
                 <div class="ml_name">
-                    300ml
-                </div>
-            </div>
-        </div>
-
-        <div class="add_liquid">
-            <div class="config_title">
-                <div class="config_name">
-                    <div>1 硝酸</div>
-                    <img :src="ArrowSvg" class="arrow_img"/>
-                </div>
-            </div>
-            <div class="bottle_ml">
-                <div class="liquid_pos">
-                    <div class="contail_percentage"></div>
-                    <div class="liquid_percent bottle_wd"></div>
-                    <div class="percent_num">300ml</div>
-                </div>
-                <div class="ml_name">
-                    300ml
+                    {{ `${corros.ml}/${corros.totalMl}` }}
                 </div>
             </div>
         </div>
+        <choose-acid-dlg ref="chooseAcidDlg"></choose-acid-dlg>
     </div>
 </template>
 <script lang="ts" setup>
+    import { ref } from 'vue'
+    import ChooseAcidDlg from '../components/chooseAcidDlg.vue'
     import ArrowSvg from '@/assets/arrow.svg'
+    interface Corrosion {
+    }
+    const visible  = ref(false)
+    const chooseAcidDlg = ref()
+    const corrosion = ref<Corrosion>()
+    const temp_list = [{
+        text: '硫酸1', 
+        value: '11' 
+    },{
+        text: '硫酸2', 
+        value: '12' 
+    },{
+        text: '硫酸3', 
+        value: '13' 
+    },{
+        text: '硫酸4', 
+        value: '14' 
+    }]
+    const selectList = ref(temp_list)
+    const list = [{
+        name:'硝酸',
+        id: 10,
+        ml: '100ml',
+        color: '#26D574',
+        totalMl: '500ml'
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    },{
+        name:'硫酸',
+        id: 20,
+        ml: '200ml',
+        color: '#26D574',
+        totalMl: "500ml"
+    }]
+
+    const corrosionList = ref(list)
+
+    const onChooseLiquid = (item={}) => {
+        console.log('------item--------', item)
+        visible.value = true;
+        corrosion.value = item;
+        chooseAcidDlg.value.showDlg()
+    }
+
+    const changeVisible = (value=false) => {
+        visible.value = value;
+    }
 </script>
 <style lang="scss" scoped>
     @use "@/assets/style/mixin.scss" as *;
     .add_liquid_bottle{
         display: flex;
+        flex-wrap: wrap;
     }
     .add_liquid{
         background: #F4F9FF;
         width: $addLiquidWidth;
-        height: 430px;
+        height: 13.5rem;
         border:1px solid #275EFB;
-        margin-left: 135px;
-        margin-top:  160px;
-        border-radius: 20px;
+        margin-left: 4.25rem;
+        margin-top:  5rem;
+        border-radius: 10px;
         .config_title{
             width: $addLiquidWidth;
-            height: 80px;
+            height: 2.5rem;
             background: rgba(25, 137, 250, 0.1216);
-            padding-top: 16px;
+            padding-top: .5rem;
             .config_name{
-                width: 248px;
-                height: 50px;
+                width: 7.875rem;
+                height: 1.625rem;
                 background: #FFFFFF;
-                margin-left: 80px;
+                margin-left: 2.5rem;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -80,32 +146,32 @@
             
             .liquid_pos{
                 position: relative;
-                width: 162px;
-                height: 228px;
+                width: 5.125rem;
+                height: 7.25rem;
                 margin-top: 36px;
-                margin-left: 120px;
+                margin-left: 3.75rem;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 .bottle_wd{
                     height: 30%;
                     background-color:red;
-                    width: 162px;
+                    width: 5.15rem;
                 }
             }
             .liquid_status{
-                height: 29px;
+                height: 1rem;
                 font-family: Source Han Sans;
-                font-size: 30px;
+                font-size: 1rem;
                 font-weight: 500;
                 color: #40474E;
-                padding-top: 19px;
+                padding-top: 20px;
             }
 
             .contail_percentage{
                 position: absolute;
-                width: 162px;
-                height: 228px;
+                width: 5rem;
+                height: 7.125rem;
                 background-image: url('@/assets/container.svg');
                 background-size: cover;
                 background-position: center;
@@ -116,7 +182,7 @@
             .liquid_percent {
                 position: absolute;
                 bottom: 0;
-                width: 83px;
+                width: 2.625rem;
                 background-color: blue;
                 opacity: 0.5;
                 z-index: 2;
@@ -131,13 +197,13 @@
             z-index: 2;
         }
         .ml_name{
-            width: 174px;
-            height: 50px;
+            width: 4.125rem;
+            height: 1.625rem;
             background: #FFFFFF;
-            margin-left: 120px;
+            margin-left: 3.75rem;
             text-align: center;
             margin-top: 15px;
-            border-radius: 195px;
+            border-radius: 6.25rem;
         }
     }
 </style>
\ No newline at end of file
diff --git a/src/views/components/chooseAcidDlg.vue b/src/views/components/chooseAcidDlg.vue
new file mode 100644
index 0000000..cf6b059
--- /dev/null
+++ b/src/views/components/chooseAcidDlg.vue
@@ -0,0 +1,73 @@
+<template>
+    <van-overlay :show="visible" style="z-index: 999;">
+        <div class="overlay_modal" >
+            <div class="overlay_title">液体选择</div>
+            <div class="overlay_content">
+
+            </div>
+            <div class="overlay_btn">
+                <van-button type="primary" class="btn ok">确定</van-button>
+                <van-button class="btn cancel" @click="onCancel">取消</van-button>
+            </div>
+        </div>
+    </van-overlay>
+</template>
+<script lang="ts" setup>
+    import { ref, onMounted, watch, defineExpose } from "vue"
+    
+    const visible = ref(false)
+    const emits = defineEmits(['confirm', 'changeVisible'])
+    const props = defineProps({})
+
+    const showDlg = ()=>{
+        visible.value = true;
+    }
+
+    const onCancel = ()=> {
+        visible.value = false;
+    }
+    defineExpose({
+        showDlg
+    });
+</script>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
+    .overlay_modal{
+        width:56.25rem;
+        height: 32.5rem;
+        margin-left: 19.75rem;
+        margin-top: 12.5rem;
+        background: #ffffff;
+
+        .overlay_content{
+            width: 53.125rem;
+            height: 23.125rem;
+        }
+
+        .overlay_title{
+            width: 8.5rem;
+            height: 1.875rem;
+            padding-left: 1.5rem;
+            padding-top: 1.875rem;
+            font-size: 1.25rem;
+        }
+
+        .overlay_btn{
+            .btn{
+                width: 13.625rem;
+                height: 2.875rem;
+                font-size: 1.25rem;
+                
+            }
+
+            .ok{
+                margin-left: 14.375rem;
+            }
+
+            .cancel{
+                margin-left: 2.375rem;
+            }
+
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/AddLiquid.vue b/src/views/graphite/components/AddLiquid.vue
new file mode 100644
index 0000000..00c696a
--- /dev/null
+++ b/src/views/graphite/components/AddLiquid.vue
@@ -0,0 +1,173 @@
+<template>
+    <div>
+        <div>
+            <div class="title">添加溶液</div>
+        </div>
+        <div class="waste_main">
+            <div class="waste_area" v-for="el in 8">
+                <!--左溶液瓶区-->
+                <div>
+                    <div class="waste_percentage">
+                        <div class="percent_num">300ml</div>
+                        <div class="waste_color" style="background-color:#26D574;"></div>
+                    </div>
+                    <div class="waste_name">硫酸</div>
+                </div>
+                <!--右操作区-->
+                <div>
+                    <div class="waste_edit">
+                        <div >
+                            <van-icon name="edit" />
+                            <span>请输入添加值</span>
+                        </div>
+                        <br/>
+                        <div class="waste_field">
+                            <img :src="AddSvg"/>
+                            <van-field  placeholder="请输入" />
+                            <div class="ml">ml</div>
+                        </div>
+                        <br/>
+                        <div>
+                            <van-button class="add_btn">加酸</van-button>
+                        </div>
+                    </div>
+                    <div class="add_result">硫酸已添加100ml</div>
+                </div>
+            </div>
+        </div>
+        <div class="waste_button">
+            <van-button class="btn" @click="onConfirm" type="primary">确认添加</van-button>
+            <van-button class="btn" @click="onCancel" style="margin-left: 50px;">取消添加</van-button>
+        </div>
+    </div>
+</template>
+<script setup>
+    import AddSvg from '@/assets/add.svg'
+    const emits = defineEmits(['cancel'])
+
+    const onConfirm = () => {
+
+    }
+
+    const onCancel = () => {
+        emits('cancel')
+    }
+
+</script>
+<style scoped>
+    .title{
+        font-size: 40px;
+        font-weight: 500;
+        line-height: 22px;
+        padding-top: 80px;
+        margin-left:90px;
+        color: #323233;
+    }
+    
+    .waste_main{
+        height: 900px;
+        flex-wrap: wrap;
+        display: flex;
+        .waste_area{
+            height: 330px;
+            width: 480px;
+            border: 2px solid #275EFB;
+            margin-top: 100px;
+            margin-left: 70px;
+            background: rgb(243 251 255);
+            border-radius: 20px;
+            display: flex;
+            .waste_percentage{
+                position: relative;
+                width: 141px;
+                height: 198px;
+                background-image: url('@/assets/container.svg');
+                background-size: cover;
+                background-position: center;
+                z-index: 1;
+                border-radius: 10px;
+                margin-top: 33px;
+                margin-left: 32px;
+            }
+
+            .percent_num{
+                position: relative;
+                top: 40%;
+                left: 22%;
+                font-size: 30px;
+            }
+            .waste_color{
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 141px;
+                height: 50%;
+                background-color: blue;
+                opacity: 0.5;
+                z-index: 2;
+                border-radius: 0 0 10px 10px;
+            }
+
+            .waste_name{
+                margin-left: 76px;
+                margin-top: 27px;
+                font-size: 26px;
+                color: #393F46;
+            }
+
+            .waste_edit{
+                background: #ffffff;
+                width: 256px;
+                height: 220px;
+                margin-left: 30px;
+                margin-top: 20px;
+                padding-top: 30px;
+                font-size: 20px;
+                padding-left: 35px;
+            }
+
+            .waste_field{
+                width: 210px;
+                display: flex;
+                border: 1px solid;
+                border-radius: 304px;
+                border: 1px solid #E4E5F1;
+            }
+           
+        }
+        
+        .add_btn{
+            background-color: #26D574;
+            font-size: 20px;
+            color: #ffffff;
+            width: 200px;
+            border-radius: 100px;
+        }
+        
+    }
+    
+
+    .waste_button{
+        width: 100%;
+        padding-top: 50px;
+        margin-left: 35%;
+        height: 200px;
+        .btn{
+            width:438px;
+            height: 90px;
+            font-size: 40px;
+        }
+    }
+    .ml{
+        margin-right: 20px;
+        padding-top: 5px;
+    }
+
+    .add_result{
+        font-size: 26px;
+        color: #393f46; 
+        margin-top: 18px;
+        margin-left: 45px;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/AddWaste.vue b/src/views/graphite/components/AddWaste.vue
deleted file mode 100644
index 00c696a..0000000
--- a/src/views/graphite/components/AddWaste.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-    <div>
-        <div>
-            <div class="title">添加溶液</div>
-        </div>
-        <div class="waste_main">
-            <div class="waste_area" v-for="el in 8">
-                <!--左溶液瓶区-->
-                <div>
-                    <div class="waste_percentage">
-                        <div class="percent_num">300ml</div>
-                        <div class="waste_color" style="background-color:#26D574;"></div>
-                    </div>
-                    <div class="waste_name">硫酸</div>
-                </div>
-                <!--右操作区-->
-                <div>
-                    <div class="waste_edit">
-                        <div >
-                            <van-icon name="edit" />
-                            <span>请输入添加值</span>
-                        </div>
-                        <br/>
-                        <div class="waste_field">
-                            <img :src="AddSvg"/>
-                            <van-field  placeholder="请输入" />
-                            <div class="ml">ml</div>
-                        </div>
-                        <br/>
-                        <div>
-                            <van-button class="add_btn">加酸</van-button>
-                        </div>
-                    </div>
-                    <div class="add_result">硫酸已添加100ml</div>
-                </div>
-            </div>
-        </div>
-        <div class="waste_button">
-            <van-button class="btn" @click="onConfirm" type="primary">确认添加</van-button>
-            <van-button class="btn" @click="onCancel" style="margin-left: 50px;">取消添加</van-button>
-        </div>
-    </div>
-</template>
-<script setup>
-    import AddSvg from '@/assets/add.svg'
-    const emits = defineEmits(['cancel'])
-
-    const onConfirm = () => {
-
-    }
-
-    const onCancel = () => {
-        emits('cancel')
-    }
-
-</script>
-<style scoped>
-    .title{
-        font-size: 40px;
-        font-weight: 500;
-        line-height: 22px;
-        padding-top: 80px;
-        margin-left:90px;
-        color: #323233;
-    }
-    
-    .waste_main{
-        height: 900px;
-        flex-wrap: wrap;
-        display: flex;
-        .waste_area{
-            height: 330px;
-            width: 480px;
-            border: 2px solid #275EFB;
-            margin-top: 100px;
-            margin-left: 70px;
-            background: rgb(243 251 255);
-            border-radius: 20px;
-            display: flex;
-            .waste_percentage{
-                position: relative;
-                width: 141px;
-                height: 198px;
-                background-image: url('@/assets/container.svg');
-                background-size: cover;
-                background-position: center;
-                z-index: 1;
-                border-radius: 10px;
-                margin-top: 33px;
-                margin-left: 32px;
-            }
-
-            .percent_num{
-                position: relative;
-                top: 40%;
-                left: 22%;
-                font-size: 30px;
-            }
-            .waste_color{
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 141px;
-                height: 50%;
-                background-color: blue;
-                opacity: 0.5;
-                z-index: 2;
-                border-radius: 0 0 10px 10px;
-            }
-
-            .waste_name{
-                margin-left: 76px;
-                margin-top: 27px;
-                font-size: 26px;
-                color: #393F46;
-            }
-
-            .waste_edit{
-                background: #ffffff;
-                width: 256px;
-                height: 220px;
-                margin-left: 30px;
-                margin-top: 20px;
-                padding-top: 30px;
-                font-size: 20px;
-                padding-left: 35px;
-            }
-
-            .waste_field{
-                width: 210px;
-                display: flex;
-                border: 1px solid;
-                border-radius: 304px;
-                border: 1px solid #E4E5F1;
-            }
-           
-        }
-        
-        .add_btn{
-            background-color: #26D574;
-            font-size: 20px;
-            color: #ffffff;
-            width: 200px;
-            border-radius: 100px;
-        }
-        
-    }
-    
-
-    .waste_button{
-        width: 100%;
-        padding-top: 50px;
-        margin-left: 35%;
-        height: 200px;
-        .btn{
-            width:438px;
-            height: 90px;
-            font-size: 40px;
-        }
-    }
-    .ml{
-        margin-right: 20px;
-        padding-top: 5px;
-    }
-
-    .add_result{
-        font-size: 26px;
-        color: #393f46; 
-        margin-top: 18px;
-        margin-left: 45px;
-    }
-
-</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/CarfList.vue b/src/views/graphite/components/CarfList.vue
new file mode 100644
index 0000000..c99e26f
--- /dev/null
+++ b/src/views/graphite/components/CarfList.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="carf">
+        <div class="carf_title">选择工艺</div>
+        <div>
+            <div class="carf_column_name">工艺名称</div>
+            <div v-for="item in list" class="carf_item" @click="onChooseCarf(item)">
+                <div :style="`background: ${currentItem?.id == item.id ? activeColor : ''}`" class="carf_li">{{ item.name }}</div>
+            </div>
+        </div>
+        <div class="overlay_btn">
+            <van-button type="primary" class="btn ok">确定</van-button>
+            <van-button class="btn cancel" @click="onCancel">取消</van-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref, onMounted } from 'vue'
+    const currentItem = ref()
+    const activeColor = ref('#ffffff')
+    const list = ref()
+    const emits = defineEmits(['changeVisible'])
+    onMounted(()=>{
+        list.value = [{
+            id: 10,
+            name: '硫酸溶解法1'
+        },{
+            id: 20,
+            name: '硫酸溶解法2'
+        },{
+            id: 30,
+            name: '硫酸溶解法3'
+        }]
+    })
+
+    const onChooseCarf = (data:any) => {
+        activeColor.value = '#d9d9d9'
+        currentItem.value = data
+    }
+
+    const onCancel = () => {
+        emits('changeVisible')
+    }
+</script>
+
+<style lang="scss" scoped>
+    .carf{
+        height: 27.5rem;
+        width: 23.75rem;
+        background: #ffffff;
+
+        .carf_title{
+            width: 5.25rem;
+            height: 1.875rem;
+            margin-left: 1.25rem;
+            margin-top: 1.875rem;
+            color: #40474E;
+            font-weight: 500;
+            font-size: 1.25rem;
+        }
+        
+    }
+
+    .carf_column_name{
+        width: 5rem;
+        height: 1.875rem;
+        color: rgba(0, 0, 0, 0.85);
+        margin-left: 2rem;
+        margin-top: .625rem;
+    }
+
+    .carf_item{
+        .carf_li{
+            display: flex;
+            align-items: center;
+            width: 23.75rem;
+            height: 3.125rem;
+            padding-left: 1.875rem;
+            font-size: 1.25rem;
+            color: rgba(0, 0, 0, 0.85);
+        }
+    }
+
+    .overlay_btn{
+        .btn{
+            width: 6.875rem;
+            height: 2.875rem;
+            font-size: 1.25rem;
+            margin-top: 6.875rem;
+        }
+
+        .ok{
+            margin-left: 5rem;
+        }
+
+        .cancel{
+            margin-left: 2.375rem;
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/graphite/components/HeatPosition.vue b/src/views/graphite/components/HeatPosition.vue
index 7b7099a..1f52ec3 100644
--- a/src/views/graphite/components/HeatPosition.vue
+++ b/src/views/graphite/components/HeatPosition.vue
@@ -62,8 +62,6 @@
       formulaVisible.value = true;
       formulaList.value = [{ text: '硫酸', value: '1' }]
       formulaList.value.push({ text: '硫酸', value: '1' })
-      console.log('----------选择配方-----------')
-
     }
 
     const onConfirmFormula = (value:any) => {
diff --git a/src/views/graphite/components/index.ts b/src/views/graphite/components/index.ts
index 6874727..6a67c69 100644
--- a/src/views/graphite/components/index.ts
+++ b/src/views/graphite/components/index.ts
@@ -1,4 +1,4 @@
 
 export {default as HeatPosition} from './HeatPosition.vue'
 export {default as TakePickture} from './TakePickture.vue'
-export { default as AddWaste} from './AddWaste.vue'
+export { default as AddLiquid} from './AddLiquid.vue'
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index b2e4279..0222997 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -21,15 +21,15 @@
                 </van-row>
                 <van-row class="graphite_operate">
                     <van-col span="11">
-                        <van-button  size="large" class="btn_size">选择配方</van-button>
+                        <van-button  size="large" class="btn_size" @click="onChooseCaft">选择工艺</van-button>
                     </van-col>
                     <van-col span="11">
-                        <van-button  size="large" class="btn_size">执行配方</van-button>
+                        <van-button  size="large" class="btn_size">执行工艺</van-button>
                     </van-col>
                 </van-row>
                 <van-row class="graphite_operate">
                     <van-col span="11">
-                        <van-button  size="large" class="btn_size" @click="onAddWaste">添加溶液</van-button>
+                        <van-button  size="large" class="btn_size" @click="onAddLiquid">添加溶液</van-button>
                     </van-col>
                     <van-col span="11">
                         <van-button  size="large" class="btn_size">摇匀</van-button>
@@ -57,25 +57,38 @@
 
             </div>
         </div>
-        <van-overlay :show="wasteVisible" style="z-index: 999;">
+        <van-overlay :show="liquidVisible" style="z-index: 999;">
             <div class="waste">
-                <div class="addWaste">
-                    <AddWaste @cancel="wasteVisible=false"></AddWaste>
+                <div class="addLiquid">
+                    <AddLiquid @cancel="liquidVisible=false"></AddLiquid>
                 </div>
             </div>
         </van-overlay>
+        <!--选择工艺-->
+        <OverlayModal :visible="carfVisible">
+            <CarfList @changeVisible="changeVisible"></CarfList>
+        </OverlayModal>
     </div>
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue';
-    import {HeatPosition, TakePickture, AddWaste} from './components'
-
+    import {HeatPosition, TakePickture, AddLiquid} from './components'
+    import OverlayModal from '@/components/OverlayModal.vue';
+    import CarfList from './components/CarfList.vue';
     const heatList:any = ref([1,2,3,4,5,6])
-
+    const carfVisible = ref(false)
     //添加溶液
-    const wasteVisible = ref(false)
-    const onAddWaste = () => {
-        wasteVisible.value = true;
+    const liquidVisible = ref(false)
+    const onAddLiquid = () => {
+        liquidVisible.value = true;
+    }
+
+    const changeVisible = () => {
+        carfVisible.value = false;
+    }
+    //选择工艺
+    const onChooseCaft = () => {
+        carfVisible.value = true;
     }
 </script>
 <style>
@@ -85,7 +98,7 @@
         background: #F6F6F6;
     }
     .heat_area{
-        width: 1268px;
+        width: 79.25rem;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
@@ -98,33 +111,33 @@
     }
 
     .pickture_area{
-        width: 1040px;
+        width: 65rem;
         margin: 5px;
-        margin-left: 20px;
+        margin-left: 1.25rem;
         background: #FFFFFF;
         border-radius: 20px;
     }
 
     .graphite_btn{
-        margin-left: 68px;
+        margin-left: 2.125rem;
         margin-top: 2rem;
     }
 
     .btn_size{
-        font-size: 30px;
-        height: 80px;
+        font-size: .9375rem;
+        height: 2.5rem;
         color: #1989FA;
         border: 3px solid #1989FA;
         
     }
 
     .open{
-        width: 906px;
+        width: 28.125rem;
     }
 
     .graphite_operate{
-        gap: 15px;
-        padding-top:30px;
+        gap: 10px;
+        padding-top:1rem;
     }
 
     .waste{
@@ -133,7 +146,7 @@
         width: 100%;
         height: 100%;
         align-items: center;
-        .addWaste{
+        .addLiquid{
             width: 2250px;
             height: 1235px;
             background: #FFFFFF;
diff --git a/src/views/liquidConfig/index.vue b/src/views/liquidConfig/index.vue
index f4c3a41..99b7bb0 100644
--- a/src/views/liquidConfig/index.vue
+++ b/src/views/liquidConfig/index.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>溶液配置</div>
+    <div class="component-page">溶液配置</div>
 </template>
\ No newline at end of file