优化移至加液

src/views/components/confirm/index.ts

@@ -0,0 +1,18 @@
+import { ElMessageBox } from 'element-plus'
+const confirm = ({content, type,title, callback}:any) => {
+    ElMessageBox.confirm(
+        content,
+        title,
+        {
+            confirmButtonText: 'OK',
+            cancelButtonText: 'Cancel',
+            type,
+        }
+    )
+    .then(() => {
+        callback && callback()
+    })
+    .catch(() => {
+    })
+}
+

src/views/graphite/components/AddLiquid.vue

@@ -2,13 +2,19 @@
     <div>
         <div class="title">添加溶液</div>
         <!--选择试管区-->
-        <section>
+        <section class="main">
             <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 
+                        class="inner-circle" 
+                        v-for="(tubeItem, index) in tubeList" 
+                        :key="index" 
+                        :style="{'border': `2px solid ${tubeItem.color}`,'background':tubeItem.selectedBackgroudColor || tubeItem.backgroudColor}" 
+                        @click="onChooseTube(tubeItem, index)">
+                    </div>
                 </div>
                 <div class="tube_num">已选择{{ selectedTubeList.length  }}个试管</div>
             </div>
@@ -44,11 +50,11 @@
                 </div>
             </div>
 
-            <div class="liquid_queue">
+            <!-- <div class="liquid_queue">
                 <van-tag style="height: 2.5rem; border-radius: 10px;margin-left: 10px;" v-for="item in tubeQueue" closeable size="medium" type="primary" @close="delQueueSolution(item)">
-                    {{ item.name }}添加{{ item.solutionNum }}ml
+                   {{ item.tubeCode }} : {{ item.name }}添加{{ item.volume }}ml
                 </van-tag>
-            </div>
+            </div> -->
         </section>
         <footer class="liquid_button">
             <van-button class="btn" @click="onConfirm" type="primary">确认添加</van-button>
@@ -65,16 +71,25 @@
     const solutionList = ref([])
     const selectedTubeList = ref([])
     const tubeQueue = ref([])
-    const selectedColor = '#4F85FB'
+    const selectedColor = 'red';//'#189952'
     const emptyColor = '#FFFFFF'
     const tubeList = ref([])
+    const selectedBackgroundColor = '#1989FA'//'#189952'
 
+    const props = defineProps({
+        currentSelectedTube:{
+            type:Object,
+            default:()=>{}
+        }
+    });
+    
     const onConfirm = () => {
         //发送指令给设备进行加液
         emits('onAddSolution', tubeQueue.value)
         onCancel()
     }
 
+    console.log('props.currentSelectedTube---', props.currentSelectedTube)
     onMounted(()=>{
         //获取配置的酸液
         const containerList = settingStore.containerConf;
@@ -88,7 +103,11 @@
                 })
             }
         })
-        tubeBaseConfig();
+        if(!props.currentSelectedTube || !props.currentSelectedTube.tubeList){
+            tubeBaseConfig();
+        }else{
+            tubeList.value = props.currentSelectedTube.tubeList
+        }
     })
 
     function tubeBaseConfig(){
@@ -104,16 +123,17 @@
     const onChooseTube = (tubeItem, index) => {
         if(!tubeItem.id)return
         //试管编码
-        tubeItem.tubeNum = index + 1
+        tubeItem.tubeCode = index + 1
         //切换选中状态
-        if(tubeItem.isSelected){//取消
+        if(tubeItem.isSelectedByLiquid){//取消
             tubeItem.color = emptyColor
-            selectedTubeList.value = selectedTubeList.value.filter(item => item.id != tubeItem.id)
+            // solutionList.value = selectedTubeList.value.filter(item => item.id != tubeItem.id)
         }else{//选中
             tubeItem.color = selectedColor
-            selectedTubeList.value.push(tubeItem)
+            // solutionList.value.push(tubeItem)
         }
-        tubeItem.isSelected = !tubeItem.isSelected;
+        tubeItem.isSelectedByLiquid = !tubeItem.isSelectedByLiquid;
+        console.log('')
     }
 
     const onCancel = () => {
@@ -122,25 +142,53 @@
 
     //删除队列中 试管需要加的溶液
     const delQueueSolution = (data) => {
-        tubeQueue.value = tubeQueue.value.filter(item => (data.tubeId != item.tubeId || data.solutionId != item.solutionId) )
+        tubeList.value.forEach((item) => {
+            if(item.id == data.id){
+                item.solutionIds = item.solutionIds.filter(e => e!=data.solutionId)
+                item.backgroudColor= item.solutionIds && item.solutionIds.length  ? selectedBackgroundColor : item.backgroudColor ? item.backgroudColor : ''
+                item.selectedBackgroudColor= ''
+            }
+        })
+        
+        tubeQueue.value = tubeQueue.value.filter(item => data.optId != item.optId )
     }
 
     //溶液添加到试管
     const onSolutionToTube = ({solutionId, name, solutionNum})=> {
         if(!solutionNum)return;
         //当前试管
-        selectedTubeList.value.forEach((item) => {
-            tubeQueue.value.push({
-                id:item.id,
-                solutionId,
-                volume:solutionNum,
-                name,
-                tubeNum: item.tubeNum
-            })
+        console.log('tubeList---', tubeList)
+        tubeList.value.forEach((item) => {
+            if(item.isSelectedByLiquid){
+                const tubeId = generateRandomNumber()
+                //试管可以加多种液solutionId
+                if(item.solutionIds){
+                    item.solutionIds.push(solutionId)
+                }else{
+                    item.solutionIds = [solutionId]
+                }
+                item.selectedBackgroudColor= selectedBackgroundColor
+                tubeQueue.value.push({
+                    id: item.id,//item.id,//试管ID
+                    optId:tubeId,
+                    solutionId,
+                    volume:solutionNum,
+                    name,
+                    tubeCode: item.tubeCode,
+                    backgroudColor:item.backgroudColor
+                })
+            }
+            
             
         })
     }
-
+    const generateRandomNumber = () => {
+        // 生成一个 0 到 99999 之间的随机数
+        const randomNumber = Math.floor(Math.random() * 100000);
+        
+        // 确保生成的随机数是 5 位数，如果不足 5 位则在前面补零
+        return String(randomNumber).padStart(5, '0');
+    }
 </script>
 <style lang="scss" scoped>
     @use "@/assets/style/mixin.scss" as *;
@@ -153,9 +201,14 @@
         color: #323233;
     }
 
+    .main{
+        display: flex;
+        height: 45rem;
+    }
+
     .liquid_tube{
         height: 16.25rem;
-        display: flex;
+        width: 2080px;
         .select_tube_title{
             color: #323233;
             font-size: 1.125rem;
@@ -181,6 +234,7 @@
                 width: 3rem;
                 height: 3rem;
                 background-color: rgb(212, 212, 212);
+                border: 2px solid rgb(212, 212, 212);
             }
         }
         .tube_num{
@@ -195,12 +249,12 @@
         height: 22rem;
         flex-wrap: wrap;
         display: flex;
-        margin-top:1rem;
         .liquid_area{
             height: 9.375rem;
             width: 15rem;
             border: 2px solid #275EFB;
             margin-left: 2.25rem;
+            margin-top: 1rem;
             background: rgb(243 251 255);
             border-radius: 20px;
             display: flex;
@@ -256,7 +310,6 @@
             .liquid_field{
                 width: 6.625rem;
                 display: flex;
-                border: 1px solid;
                 border-radius: 10px;
                 border: 1px solid #E4E5F1;
                 font-size: .7rem;
@@ -285,10 +338,8 @@
         align-items: center;
     }
     .liquid_button{
-        width: 100%;
         margin-left: 35%;
         height: 6.25rem;
-        margin-top: 1.5rem;
         .btn{
             width:13.75rem;
             height: 2.875rem;

src/views/graphite/components/HeatPosition.vue

@@ -15,14 +15,13 @@
     <section
       class="heat_pos"
       :style="`background:${trayInfo?.id ? '' : ''}`"
-      @click="onSelectTray"
     >
       <div
         v-for="(tube, index) in trayInfo.tubeList || tubeList"
         :key="index"
         class="inner-circle"
-        @click.stop="onHandleTube(tube)"
-        :style="{ background: tube.color || 'rgb(212, 212, 212)' }"
+        @click.stop="onHandleTube(tube, index)"
+        :style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"
       ></div>
       <!--执行中状态的遮罩层-->
       <div class="craft_executing_modal" v-if="trayInfo.executing_craft">
@@ -46,10 +45,10 @@
       </div>
 
       <div class="flex items-center py-4 justify-between px-2">
-        <div class="temp_text">120℃</div>
+        <div class="temp_text">{{ trayInfo.heatAearStatus.temperature }}</div>
         <button
           class="btn-light text-sm px-4"
-          @click="onChooseCraft"
+          @click.stop="onSelectTray"
         >
           选择
         </button>
@@ -101,33 +100,54 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { ref, watch, onMounted, getCurrentInstance } from "vue";
 import OverlayModal from "@/components/OverlayModal.vue";
 import CraftList from "./CraftList.vue";
 import LoadingSvg from "@/assets/loading.svg";
-const tubeList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
+const tubeList = ref<any>([]);
 const props = defineProps({
   heatInfo: Object,
   tubeIndex: Number,
 });
 const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", 'onSelectCraft']);
-
-onMounted(() => {});
+const selectedBackgroundColor = '#189952'
+onMounted(() => {
+  for(let i = 0 ; i<16; i++){
+    tubeList.value.push({
+      backgroudColor:'',
+      id:i+1
+    })
+  }
+  reSet(props.heatInfo)
+});
 
 const craftVisible = ref(false);
 
 //设置温度
 const trayTempType = ref(false);
 const tempVisible = ref(false);
-//托盘信息
+//加热区信息
 let trayInfo = ref<any>(props.heatInfo || {});
-watch(()=>props.heatInfo, (newVal)=>{
-  trayInfo.value = newVal
-})
+const reSet = (newVal:any) => {
+  let heatAreaData = {...newVal}
+  if(heatAreaData.heatAearStatus.trayStatus){
+    if(heatAreaData.tubeList && heatAreaData.tubeList.length){
+      heatAreaData.tubeList.forEach((item:any) => {
+        item.backgroudColor = selectedBackgroundColor
+        item.isSelected = true;
+      })
+    }else{
+      tubeList.value.forEach((item:any) => {
+        item.backgroudColor = selectedBackgroundColor
+        item.isSelected = true;
+      })
+      heatAreaData.tubeList = tubeList.value
+    }
+  }
+  trayInfo.value = heatAreaData
+}
 
 const heatAreaTemperature = ref(trayInfo.value.temperature || "");
-//选中托盘
-const isSelect = ref(false);
 const currentIndex = ref();
 const onSelectTray = () => {
   if (currentIndex.value !== props.tubeIndex) {
@@ -160,9 +180,14 @@ const onConfirm = () => {
 };
 
 //试管操作
-const onHandleTube = (tubeInfo: any) => {
-  //选择试管时判断试管架是否为选中状态
-  if (!isSelect.value) onSelectTray();
+const onHandleTube = (tubeInfo: any, index:number) => {
+  //设置UI选中颜色
+  if(trayInfo.value.heatAearStatus.trayStatus && tubeInfo.isSelected){
+    tubeInfo.backgroudColor = ''
+  }else{
+    tubeInfo.backgroudColor = selectedBackgroundColor
+  }
+  tubeInfo.isSelected = !tubeInfo.isSelected;
 };
 
 //选择的工艺

src/views/graphite/index.vue

@@ -15,19 +15,8 @@
     <!--拍照区-->
     <div class="picture_area">
       <!--加液区和拍照区可切换-->
-      <div style="display: flex; justify-content: center; align-items: center">
-		  <div style="font-size: 1rem; margin-left: 0.3rem">加液区</div>
-        <van-switch
-          v-model="switchModule"
-          size="1rem"
-          active-color="#ee0a24"
-          inactive-color="green"
-        />
-        <div style="font-size: 1rem; margin-left: 0.3rem">拍照区</div>
-      </div>
-
-      <TakePickture v-if="switchModule"></TakePickture>
-      <div v-else style="display: flex;justify-content: center;">
+      <TakePickture></TakePickture>
+      <!-- <div v-else style="display: flex;justify-content: center;">
         <div class="home_tube">
           <div
             class="inner-circle"
@@ -35,9 +24,9 @@
             :key="index"
             :style="{ background: tubeItem.color }"
             
-          ></div><!--@click="onChooseTube(tubeItem, index)"-->
+          ></div>
         </div>
-      </div>
+      </div> -->
       <!--操作区-->
       <div class="graphite_btn_container">
         <van-button v-if="doorStatus" size="large" class="btn_size op_open_door" @click="onCloseDoor"
@@ -98,6 +87,7 @@
       <div class="liquid">
         <div class="addLiquid">
           <AddLiquid
+            :currentSelectedTube="currentSelectedTube"
             @cancel="liquidVisible = false"
             @onAddSolution="onAddSolution"
           ></AddLiquid>
@@ -175,7 +165,7 @@ onMounted(() => {
     heatAearStatusList.value.forEach((areaItem:any) => {
       if(areaItem.hardwareId == item.hardwareId){
         item = {
-          ...item,
+          ...item, 
           heatAearStatus:areaItem
         }
       }
@@ -237,9 +227,7 @@ const onSelectedTray = (heatAreaItem: any, type:string) => {
       item = heatAreaItem
     }
   })
- 
-	// selectedTrayList.value = Object.values(selectedTrayObj);
-  
+  console.log('selectedTrayList---', selectedTrayList.value)
 };
 
 //设置加热区温度
@@ -305,8 +293,13 @@ const tubeBaseConfig = () => {
 //添加溶液
 const liquidVisible = ref(false);
 const onAddLiquid = () => {
-  //检查加液区是否有试管。但是现在没有这个状态，暂时不考虑。
-  liquidVisible.value = true;
+  //检查加液区是否有试管。
+  const liquidArea = statusStore.status?.liquidArea
+  if(liquidArea){
+    liquidVisible.value = true;
+  }else{
+    ElMessage.error('加液区未检测到托盘，无法进行加液操作')
+  }
 };
 
 //选择的工艺
@@ -430,25 +423,26 @@ const onMoveToHeat = () => {
 };
 
 //移至加液区(操作区)
+const currentSelectedTube = ref({})
 const onMoveToOperationArea = () => {
 	//1、判断加液区是否有试管架(暂时获取不到这个状态)
 	//1、是否选择了试管架/加热区
 	if (!selectedTrayList.value.length) {
-		ElMessage.error("请选择试管架");
-		return;
+		ElMessage.error("请选择加热区");
+		return false;
 	}
 	//2、只能选择一个试管架/加热区
 	if (selectedTrayList.value.length != 1) {
-		ElMessage.error("只能选择一个试管架");
-		return;
+		ElMessage.error("只能选择一个加热区");
+		return false;
 	}
 	let selectedDataItem = selectedTrayList.value[0];
+  currentSelectedTube.value = selectedDataItem
 	//3、选择的加热区有没有试管架
 	if(!selectedDataItem.tubeList || !selectedDataItem.tubeList.length){
 		ElMessage.error("选择的加热区没有试管架");
-		return;
+		return false;
 	}
-
 	//4、发送移至加液区指令
 	const params = {
 		heatId: selectedDataItem.id
@@ -458,10 +452,10 @@ const onMoveToOperationArea = () => {
 	heatList.value.forEach((item:any) => {
 		if(item.id == selectedDataItem.id){
 			tubeList  = [...item.tubeList]
-			item.tubeList = null;
 		}
 	})
 	onSelectedTray(selectedDataItem, 'isMove')
+  return true;
 }
 
 //移至特殊区域