优化加液配置

src/assets/style/mixin.scss

@@ -1,2 +1 @@
 $textGray: #333;
-$addLiquidWidth: 410px;//加液配置 card宽度

src/router/index.ts

@@ -7,6 +7,10 @@ const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
 	routes: [
 		{
+			path: '/',
+			redirect:'/login'
+		},
+		{
 			path: "/login",
 			name: "login",
 			//@ts-ignore

src/views/Test.vue

@@ -1,82 +1,38 @@
 <template>
-    <div class="test_return">
-        <van-nav-bar
-            title="测试页面"
-            left-text="返回"
-            left-arrow
-            @click-left="onReturn"
-        />
-        <div class="card">
-            <div  v-for="(item, index) in 6" :key="index"  class="test_card">
-                {{ item }}
-                <div class="test_status">
-                    <div class="test_font">开始加样</div>
-                </div>
-            </div>
-        </div>
+    <div class="ball">
+        
     </div>
 </template>
 <script lang="ts" setup>
-    import { ref } from 'vue'
-    import { useRouter } from 'vue-router'
-    import {eventBus} from '@/eventBus'
-
-    let menuId = ref(1)
-    const router = useRouter()
+    import { onMounted } from 'vue';
 
-    const onReturn = () => {
-        menuId.value = 0
-        router.go(-1)
-    }
-    
-    const list = [6]
-    const cardList  = ref(list)
-    const simpleCard = ref(cardList)
-</script>
-<style scoped>
-    .test_return{
-        background: #ECF2FF;
-        .return{
-            display: flex;
-        }
-        span{
-            font-size: 12px;
-        }
+    onMounted(()=>{
+        canvasFn()
+    })
 
-        .card{
-            display: flex;
-            justify-content: flex-start;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
+    const canvasFn = () => {
+        const canvas = document.createElement('canvas')
+        canvas.width = 600;
+        canvas.height = 400;
+        document.body.append(canvas)
 
-        .test_card{
-            width: 30%;
-            height: 110px;
-            background: #ffffff;
-            margin-top:10px;
-            margin-left: 10px;
-            text-align: center;
-            padding-top:10px;
-            border-radius: 5px;
-            font-weight: bold;
-        }
+        const context = canvas.getContext('2d');
+        context?.moveTo(100,100);
+        context?.arcTo(200,100, 400,800, 50);
+        context?.font
+        context?.fillText('Hello, Canvas!', 50, 100);
 
-        .test_status{
-            height: 50px;
-            background: #1871F8;
-            border-radius: 5px;
-            margin: 17px 6px;
-            .test_font{
-                font-size: 15px;
-                color: #FFFFFF;
-                padding-top: 14px;
-                padding-left: 3px;
+        context?.stroke()
     }
+</script>
+<style scoped>
+    .ball{
+        animation: x 1s linear forwards;
     }
 
-
-        
+@keyframes x {
+    to{
+        transform: translateX(100px)
     }
-
+}
 </style>

src/views/addLiquid/index.vue

@@ -115,14 +115,14 @@
     }
     .add_liquid{
         background: #F4F9FF;
-        width: $addLiquidWidth;
+        width: 12.875rem;
         height: 13.5rem;
         border:1px solid #275EFB;
         margin-left: 4.25rem;
         margin-top:  5rem;
         border-radius: 10px;
         .config_title{
-            width: $addLiquidWidth;
+            width: 12.875rem;
             height: 2.5rem;
             background: rgba(25, 137, 250, 0.1216);
             padding-top: .5rem;

src/views/components/Footer.vue

@@ -2,7 +2,7 @@
 <template>
     <div class="h-[--footerHeight] bg-[--bgColor] footer">
         <div class="footer_ins">
-            <van-icon name="discount-o" size="40" style="padding:5px"/>
+            <van-icon name="discount-o" size="20" style="padding:5px"/>
             <span class="ins_text text_size">等待指令</span>
         </div>
 
@@ -51,7 +51,7 @@ const showWastePopover = ref(false)
         align-items: center;
         border-radius: 5px;
         background: #FFFFFF;
-        height: 1.25rem;
+        height: 2.5rem;
         width: 39.625rem;
         margin-left: 11.875rem;
     }

src/views/components/Header.vue

@@ -8,8 +8,12 @@
             {{ currentTime }}
         </div>
         <div class="header_user">
-            <img :src="AvatarSvg" width="40px" height="40px"/>
-            <div class="user_name">Admin</div>
+            <img :src="AvatarSvg" width="20px" height="20px"/>
+            <div class="user_name" @click="onShowMenu">Admin</div>
+            <div class="user_opt" v-show="showUserMenu">
+                <div class="updatePwd">修改密码</div>
+                <div class="login_out">退出登录</div>
+            </div>
         </div>
     </div>
 </template>
@@ -21,13 +25,18 @@
     import { getFormattedDateTime } from '@/utils' 
     const menuId = ref(0)
     const time = getFormattedDateTime()
+    const showUserMenu = ref(false)
     const currentTime = ref(time)
     onMounted(()=>{
         //测试页面返回时，需要调整菜单 
-        eventBus.on('menuId', (value:number)=>{
-            menuId.value = value
-        })
+        // eventBus.on('menuId', (value:number)=>{
+        //     menuId.value = value
+        // })
     })
+
+    const onShowMenu = () => {
+        showUserMenu.value = !showUserMenu.value;
+    }
 </script>
 <style lang="scss" scoped>
     @use "@/assets/style/mixin.scss" as *;
@@ -106,6 +115,30 @@
             font-size: 1rem;
             color: #393F46;
         }
+
+        .user_opt{
+            width: 12.25rem;
+            height: 6.25rem;
+            position:absolute;
+            top:3rem;
+            background: #ffffff;
+
+            .updatePwd{
+                color: #323233;
+                font-size: 1.125rem;
+                display: flex;
+                justify-content: center;
+                margin-top: 1.5rem;
+            }
+
+            .login_out{
+                color: #323233;
+                font-size: 1.125rem;
+                display: flex;
+                justify-content: center;
+                margin-top: .5rem;
+            }
+        }
     }
 
     .circle {

src/views/graphite/components/AddLiquid.vue

@@ -3,39 +3,55 @@
         <div>
             <div class="title">添加溶液</div>
         </div>
-        <div class="waste_main">
-            <div class="waste_area" v-for="el in 8">
+        <!--选择试管区-->
+        <div class="liquid_tube">
+            <div class="select_tube_title">
+                请选择加液试管
+            </div>
+            <div class="select_tube">
+                <div class="inner-circle" v-for="(tubeItem, index) in tubeList" :key="index" :style="{'background': tubeItem.color}" @click="onChooseTube(tubeItem, index)"></div>
+                
+            </div>
+            <div class="tube_num">已选择{{ selectedTubeList.length  }}个试管</div>
+        </div>
+        <div class="liquid_main">
+            <div class="liquid_area" v-for="(solution, index) in solutionList" :key="index">
                 <!--左溶液瓶区-->
                 <div>
-                    <div class="waste_percentage">
+                    <div class="liquid_percentage">
                         <div class="percent_num">300ml</div>
-                        <div class="waste_color" style="background-color:#26D574;"></div>
+                        <div class="liquid_color" style="background-color:#26D574;"></div>
                     </div>
-                    <div class="waste_name">硫酸</div>
+                    <div class="liquid_name">硫酸</div>
                 </div>
                 <!--右操作区-->
                 <div>
-                    <div class="waste_edit">
+                    <div class="liquid_edit">
                         <div >
                             <van-icon name="edit" />
                             <span>请输入添加值</span>
                         </div>
                         <br/>
-                        <div class="waste_field">
-                            <img :src="AddSvg"/>
-                            <van-field  placeholder="请输入" />
+                        <div class="liquid_field">
+                            <img :src="AddSvg" class="liquid_input_img"/>
+                            <input type="text" :key="index" v-model="solution.solutionNum" placeholder="请输入" class="liquid_input"/>
                             <div class="ml">ml</div>
                         </div>
                         <br/>
                         <div>
-                            <van-button class="add_btn">加酸</van-button>
+                            <button class="add_btn" @click="onSolutionToTube(solution)">加酸</button>
                         </div>
                     </div>
                     <div class="add_result">硫酸已添加100ml</div>
                 </div>
             </div>
         </div>
-        <div class="waste_button">
+        <div class="liquid_queue">
+            <van-tag v-for="item in tubeQueue" closeable size="medium" type="primary" @close="delQueueSolution">
+                {{ item.solutionName }}添加{{ item.solutionNum }}ml
+            </van-tag>
+        </div>
+        <div class="liquid_button">
             <van-button class="btn" @click="onConfirm" type="primary">确认添加</van-button>
             <van-button class="btn" @click="onCancel" style="margin-left: 50px;">取消添加</van-button>
         </div>
@@ -43,18 +59,93 @@
 </template>
 <script setup>
     import AddSvg from '@/assets/add.svg'
+    import { ref, onMounted, computed } from 'vue'
     const emits = defineEmits(['cancel'])
-
+    const solutionData = {
+        solutionNum:null
+    };
+    const solutionList = ref([{
+        solutionId: 1,
+        solutionName:'硫酸',
+        solutionNum:null
+    }])
+    const solutionNum = ref(null)
+    const selectedTubeList = ref([])
+    const tubeQueue = ref([])
+    const selectedColor = '#4F85FB'
+    const defaultColor = '#26D574'
+    const emptyColor = '#FFFFFF'
+    const defualtTube = {
+        color:emptyColor
+    }
+    const tubeList = ref([{
+        id: 1,
+        color: defaultColor
+    },{
+        id: 2,
+        color: defaultColor
+    },{
+        id: 3,
+        color: defaultColor
+    },{
+        id: 4,
+        color: defaultColor
+    }])
     const onConfirm = () => {
 
     }
 
+    onMounted(()=>{
+        while(tubeList.value.length != 16){
+            tubeList.value.push(defualtTube)
+        }
+
+        while(solutionList.value.length != 8){
+            solutionList.value.push({id:solutionList.value.length + 1})
+        }
+    })
+
+    const onChooseTube = (tubeItem, index) => {
+        if(!tubeItem.id)return
+        //切换选中状态
+        if(tubeItem.isSelected){//取消
+            tubeItem.color = defaultColor
+            selectedTubeList.value = selectedTubeList.value.filter(item => item.id != tubeItem.id)
+        }else{//选中
+            tubeItem.color = selectedColor
+            selectedTubeList.value.push(tubeItem)
+        }
+        tubeItem.isSelected = !tubeItem.isSelected;
+
+        
+    }
+
     const onCancel = () => {
         emits('cancel')
     }
 
+    //删除队列中 试管需要加的溶液
+    const delQueueSolution = () => {
+
+    }
+
+    //溶液添加到试管
+    const onSolutionToTube = ({solutionId, solutionName, solutionNum})=> {
+        if(!solutionNum)return;
+        //当前试管
+        selectedTubeList.value.forEach(item => {
+            tubeQueue.value.push({
+                solutionId,
+                solutionNum,
+                solutionName
+            })
+            
+        })
+    }
+
 </script>
-<style scoped>
+<style lang="scss" scoped>
+    @use "@/assets/style/mixin.scss" as *;
     .title{
         font-size: 1.25rem;
         font-weight: 500;
@@ -64,20 +155,58 @@
         color: #323233;
     }
 
-    .waste_main{
-        height: 28.125rem;
+    .liquid_tube{
+        height: 16.25rem;
+        display: flex;
+        .select_tube_title{
+            color: #323233;
+            font-size: 1.125rem;
+            width: 8rem;
+            height: .75rem;
+            margin-top: 2.25rem;
+            margin-left: 2.875rem;
+        }
+        .select_tube{
+            width: 15.5rem;
+            height: 15.5rem;
+            background: #384D5D;
+            opacity: 1;
+            margin-top: 0.5rem;
+            margin-left: 1.2rem;
+            display: flex;
             flex-wrap: wrap;
+            gap: 0.7rem;
+            padding-left: 0.6rem;
+            border-radius: 1.5rem;
+            .inner-circle {
+                border-radius: 50%;
+                width: 3rem;
+                height: 3rem;
+                background-color: rgb(212, 212, 212);
+            }
+        }
+        .tube_num{
             display: flex;
-        .waste_area{
-            height: 10.375rem;
+            align-items: self-end;
+            margin-bottom: 1.2rem;
+            margin-left: 1.2rem;
+        }
+    }
+    
+    .liquid_main{
+        height: 22rem;
+        flex-wrap: wrap;
+        display: flex;
+        margin-top:1rem;
+        .liquid_area{
+            height: 9.375rem;
             width: 15rem;
             border: 2px solid #275EFB;
-            margin-top: 3.125rem;
             margin-left: 2.25rem;
             background: rgb(243 251 255);
             border-radius: 20px;
             display: flex;
-            .waste_percentage{
+            .liquid_percentage{
                 position: relative;
                 width: 4.5rem;
                 height: 6.25rem;
@@ -94,9 +223,9 @@
                 position: relative;
                 top: 40%;
                 left: 22%;
-                font-size: 30px;
+                font-size:1rem;
             }
-            .waste_color{
+            .liquid_color{
                 position: absolute;
                 bottom: 0;
                 left: 0;
@@ -108,14 +237,14 @@
                 border-radius: 0 0 10px 10px;
             }
 
-            .waste_name{
+            .liquid_name{
                 margin-left: 2rem;
                 margin-top: .875rem;
                 font-size: .75rem;
                 color: #393F46;
             }
 
-            .waste_edit{
+            .liquid_edit{
                 background: #ffffff;
                 width: 8rem;
                 height: 6.875rem;
@@ -126,32 +255,38 @@
                 padding-left: 1.125rem;
             }
 
-            .waste_field{
+            .liquid_field{
                 width: 6.625rem;
                 display: flex;
                 border: 1px solid;
-                border-radius: 304px;
+                border-radius: 150px;
                 border: 1px solid #E4E5F1;
+                font-size: .7rem;
             }
            
         }
         
         .add_btn{
             background-color: #26D574;
-            font-size: 20px;
+            font-size: .625rem;
             color: #ffffff;
-            width: 6.25rem;
+            width: 6.625rem;
+            height: 1.625rem;
             border-radius: 100px;
         }
         
     }
     
-
-    .waste_button{
+    .liquid_queue{
+        display: flex;
+        height: 4.125rem;
+        background: rgba(25, 137, 250, 0.12);
+    }
+    .liquid_button{
         width: 100%;
-        padding-top: 50px;
         margin-left: 35%;
         height: 6.25rem;
+        margin-top: 1.5rem;
         .btn{
             width:13.75rem;
             height: 2.875rem;
@@ -170,4 +305,15 @@
         margin-left: 1.375rem;
     }
 
+    .liquid_input{
+        width: 4.75rem;
+    }
+
+    .liquid_input_img{
+        width: .875rem;
+        height: .875rem;
+        margin-top: 0.35rem;
+        margin-left: 5px;
+    }
+
 </style>

src/views/graphite/components/index.ts

@@ -1,4 +1,5 @@
 
 export {default as HeatPosition} from './HeatPosition.vue'
 export {default as TakePickture} from './TakePickture.vue'
-export { default as AddLiquid} from './AddLiquid.vue'
+//@ts-ignore
+export {default as AddLiquid} from './AddLiquid.vue'

src/views/graphite/index.vue

@@ -65,7 +65,7 @@
             </div>
         </div>
         <van-overlay :show="liquidVisible" style="z-index: 999;">
-            <div class="waste">
+            <div class="liquid">
                 <div class="addLiquid">
                     <AddLiquid @cancel="liquidVisible=false"></AddLiquid>
                 </div>
@@ -129,7 +129,7 @@
         justify-content: center;
         flex-wrap: wrap;
         margin: 5px;
-        gap: 20px;
+        gap: 1.25rem;
         flex-direction: row;
         padding-bottom: 100px;
         background: #FFFFFF;
@@ -175,15 +175,15 @@
         padding-top:1rem;
     }
 
-    .waste{
+    .liquid{
         display: flex;
         justify-content: center;
         width: 100%;
         height: 100%;
         align-items: center;
         .addLiquid{
-            width: 2250px;
-            height: 1235px;
+            width: 70.375rem;
+            height: 52rem;
             background: #FFFFFF;
         }
     }