From 62402fe150c9809907770c9a3aa530eb80756a27 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Thu, 27 Feb 2025 19:47:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OverlayModal.vue                |   1 -
 src/views/components/chooseAcidDlg.vue         |   2 +-
 src/views/graphite/components/AddLiquid.vue    |  31 ++++----
 src/views/graphite/components/HeatPosition.vue | 106 ++++++++++---------------
 src/views/graphite/index.vue                   |  61 +++++++-------
 5 files changed, 92 insertions(+), 109 deletions(-)

diff --git a/src/components/OverlayModal.vue b/src/components/OverlayModal.vue
index c2a745c..aceefe9 100644
--- a/src/components/OverlayModal.vue
+++ b/src/components/OverlayModal.vue
@@ -21,7 +21,6 @@
         position: absolute;
         top: 0px;
         left: 0px;
-        z-index: 112
     }
     .overlay_modal{
         display: flex;
diff --git a/src/views/components/chooseAcidDlg.vue b/src/views/components/chooseAcidDlg.vue
index cf6b059..228768c 100644
--- a/src/views/components/chooseAcidDlg.vue
+++ b/src/views/components/chooseAcidDlg.vue
@@ -1,5 +1,5 @@
 <template>
-    <van-overlay :show="visible" style="z-index: 999;">
+    <van-overlay :show="visible">
         <div class="overlay_modal" >
             <div class="overlay_title">液体选择</div>
             <div class="overlay_content">
diff --git a/src/views/graphite/components/AddLiquid.vue b/src/views/graphite/components/AddLiquid.vue
index bb14ea3..302f723 100644
--- a/src/views/graphite/components/AddLiquid.vue
+++ b/src/views/graphite/components/AddLiquid.vue
@@ -31,7 +31,7 @@
                     <!--左溶液瓶区-->
                     <div>
                         <div class="liquid_percentage">
-                            <div class="percent_num">300ml</div>
+                            <div class="percent_num">{{ solution.remainQuan }}ml</div>
                             <div class="liquid_color" style="background-color:#26D574;"></div>
                         </div>
                         <div class="liquid_name">{{ solution.name }}</div>
@@ -39,10 +39,10 @@
                     <!--右操作区-->
                     <div>
                         <div class="liquid_edit">
-                            <div >
+                            <!-- <div >
                                 <van-icon name="edit" />
                                 <span>请输入添加值</span>
-                            </div>
+                            </div> -->
                             <div class="liquid_field">
                                 <img :src="AddSvg" class="liquid_input_img"/>
                                 <input type="text" :key="index" v-model="solution.solutionNum" placeholder="请输入" class="liquid_input"/>
@@ -89,18 +89,22 @@
         emits('onAddSolution', tubeQueue.value)
         onCancel()
     }
-
-    console.log('props.currentSelectedTube---', props.currentSelectedTube)
     onMounted(()=>{
         //获取配置的酸液
+        console.log('currentSelectedTube---', props.currentSelectedTube)
         const containerList = settingStore.containerConf;
         const liquidMap = settingStore.liquidIdMap
         containerList.forEach(item => {
             if(item.type == 0){
+                const {capacityTotal, capacityUsed} = item;
+                const remainQuan = capacityTotal - capacityUsed
                 solutionList.value.push({
                     id: item.id,//溶器ID(加液泵)
                     name: liquidMap[item.solutionId] && liquidMap[item.solutionId].name,
                     solutionId : item.solutionId,//酸液ID
+                    capacityTotal:item.capacityTotal,
+                    capacityUsed:item.capacityUsed,
+                    remainQuan
                 })
             }
         })
@@ -116,7 +120,8 @@
         for(let i = 0; i < 16; i++){
             tubeList.value.push({
                 id: i + 1,
-                color:emptyColor
+                color:emptyColor,
+                backgroudColor:'#189952',
             })
         }
     }
@@ -270,7 +275,6 @@
                 background-image: url('@/assets/container.svg');
                 background-size: cover;
                 background-position: center;
-                z-index: 1;
                 border-radius: 10px;
                 margin-top: 1rem;
                 margin-left: 1rem;
@@ -278,8 +282,8 @@
 
             .percent_num{
                 position: relative;
-                top: 40%;
-                left: 22%;
+                top: 2.5rem;
+                left: 0.6rem;
                 font-size:1rem;
             }
             .liquid_color{
@@ -290,12 +294,11 @@
                 height: 50%;
                 background-color: blue;
                 opacity: 0.5;
-                z-index: 2;
                 border-radius: 0 0 10px 10px;
             }
 
             .liquid_name{
-                margin-left: 2rem;
+                margin-left: 2.5rem;
                 margin-top: .5rem;
                 font-size: .75rem;
                 color: #393F46;
@@ -326,12 +329,12 @@
         
         .add_btn{
             background-color: #26D574;
-            font-size: .625rem;
+            font-size: 1rem;
             color: #ffffff;
             width: 6.625rem;
-            height: 1.625rem;
+            height: 1.8rem;
             border-radius: 100px;
-            margin-top:5px;
+            margin-top:1.2rem;
         }
         
     }
diff --git a/src/views/graphite/components/HeatPosition.vue b/src/views/graphite/components/HeatPosition.vue
index ce73c00..c15d238 100644
--- a/src/views/graphite/components/HeatPosition.vue
+++ b/src/views/graphite/components/HeatPosition.vue
@@ -13,13 +13,31 @@
     </section>
 
 		<section class="heat_pos" :style="`background:${trayInfo?.id ? '' : ''}`">
+
 			<div
 				v-for="(tube, index) in trayInfo.tubeList || tubeList"
 				:key="index"
 				class="inner-circle"
 				@click.stop="onHandleTube(tube, index)"
 				:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div>
-			<!--执行中状态的遮罩层-->
+			
+
+      <div class="heat_footer">
+        <div class="heat_temperature" @click="setTemperature">
+          <template v-if="trayInfo?.id">
+            <div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
+            <div class="heating" :style="{ color: temperature_color }">
+              {{ trayInfo.heatAearStatus?.isHeating ? "加热中" : "未加热" }}
+            </div>
+          </template>
+          <template v-else>
+            <div class="target_temp set_temp">设置目标温度</div>
+          </template>
+        </div>
+        <div class="temp_text">{{ trayInfo.heatAearStatus?.temperature }}</div>
+      </div>
+
+      <!--执行中状态的遮罩层-->
 			<div
 				class="craft_executing_modal"
 				v-if="trayInfo.craftInfo?.id"
@@ -36,29 +54,16 @@
 					{{ !trayInfo.executing_craft ? "工艺等待执行" : "工艺执行完毕" }}
 				</div>
 			</div>
-		</section>
 
-		<section class="heat_footer">
-			<div class="heat_temperature" @click="setTemperature">
-				<template v-if="trayInfo?.id">
-					<div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
-					<div class="heating" :style="{ color: temperature_color }">
-						{{ trayInfo.heatAearStatus?.isHeating ? "加热中" : "未加热" }}
-					</div>
-				</template>
-				<template v-else>
-					<div class="target_temp set_temp">设置目标温度</div>
-				</template>
-			</div>
-
-			<div class="flex items-center py-4 justify-between px-2">
-				<div class="temp_text">{{ trayInfo.heatAearStatus?.temperature }}</div>
-				<button
-					:class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
-					@click.stop="onSelectTray">
-					选择
-				</button>
-			</div>
+      <div class="heat_footer_choose">
+        <div class="flex items-center py-4 justify-between px-2">
+          <button
+            :class="`btn-light text-sm px-4 text_choose ${trayInfo.isSelect ? 'text_color' : ''}`"
+            @click.stop="onSelectTray">
+            选择
+          </button>
+        </div>
+      </div>
 		</section>
 
 		<van-overlay v-if="tempVisible" :show="true">
@@ -66,43 +71,6 @@
 				<SetTemperature @cancel="tempVisible = false" :temperature="heatAreaTemperature" @confirm="onConfirm" />
 			</div>
 		</van-overlay>
-		<!-- <OverlayModal :visible="tempVisible">
-      <div class="set_temp_modal_content">
-        <h3 class="set_temp_title">设定温度</h3>
-        <section class="temp_label">
-          <div class="text-xl">
-            目标温度：<input
-              type="number"
-              v-model="heatAreaTemperature"
-              class="temp_input"
-              placeholder="请输入温度"
-            />
-          </div>
-          <div class="text-xl temp_status flex">
-            <div>到达温度后</div>
-            <van-radio-group
-              v-model="trayTempType"
-              shape="square"
-              class="flex temp_radio"
-            >
-              <van-radio name="1">保持温度</van-radio>
-              <van-radio name="2">停止加热</van-radio>
-            </van-radio-group>
-          </div>
-        </section>
-
-        <footer
-          class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5"
-        >
-          <button class="btn-dark px-10 py-2 w-15" @click="onConfirm">
-            确定
-          </button>
-          <button class="btn-light px-10 py-2" @click="tempVisible = false">
-            取消
-          </button>
-        </footer>
-      </div>
-    </OverlayModal> -->
 		<!--选择工艺-->
 		<OverlayModal :visible="craftVisible">
 			<CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
@@ -160,7 +128,6 @@ const reset = (heatInfo:any) => {
   if(heatAreaData.heatAearStatus?.trayStatus){
     if(heatAreaData.tubeList && heatAreaData.tubeList.length){
       heatAreaData.tubeList.forEach((item:any) => {
-        item.backgroudColor = selectedBackgroundColor
         item.isSelected = true;
       })
     }else{
@@ -265,6 +232,7 @@ const onHandleSelectedCraft = (craftData: any) => {
 	border: 2px solid #7592a8;
 	padding-top: 0.5rem;
 	border-radius: 0.5rem;
+  position: relative;
 }
 .inner-circle {
 	border-radius: 50%;
@@ -273,7 +241,8 @@ const onHandleSelectedCraft = (craftData: any) => {
 	background-color: rgb(212, 212, 212);
 }
 .heat_footer {
-	margin-top: 10px;
+  position: absolute;
+	margin-top: 10.5rem;
 	margin-left: 5px;
 	.heat_temperature {
 		height: 1.625rem;
@@ -300,9 +269,16 @@ const onHandleSelectedCraft = (craftData: any) => {
 		font-size: 1.125rem;
 		font-weight: bold;
 		color: #4d6882;
+    padding-top:1rem;
+    padding-left: 0.5rem;
 	}
 }
 
+.heat_footer_choose{
+  padding-top:3.2rem;
+  padding-left: 5rem;
+}
+
 .heat_overlay {
 	border: 1px solid #e9f3ff;
 	width: 9.375rem;
@@ -377,21 +353,19 @@ const onHandleSelectedCraft = (craftData: any) => {
 }
 .text_choose {
 	position: relative;
-	// z-index: 111;
 }
 .text_color {
 	background: #6893ff;
 	color: #ffffff;
 }
 .craft_executing_modal {
-	position: relative;
+	position: absolute;
 	width: 11.2rem;
 	height: 17.8rem;
 	padding-top: 0.5rem;
 	border-radius: 0.5rem;
 	opacity: 0.8;
-	z-index: 99;
-	margin-top: -11.5rem;
+	margin-top: -2.5rem;
 	.loading {
 		margin-top: 4rem;
 		display: flex;
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index 238b86d..6df9048 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -1,11 +1,10 @@
 <template>
 	<div class="graphite_home component-page overflow-auto" id="heatArea">
-		<div class="heat_area">
+		<div class="heat_area" v-if="heatList && heatList.length">
 			<div v-for="(item, index) in heatList" :key="item.id">
 				<HeatPosition
 					:heatInfo="{ ...item, index }"
 					:tubeIndex="index + 1"
-          :heatAearStatusList="heatAearStatusList"
 					@onSelectedTray="onSelectedTray"
 					@onSetHeatAreaTemp="onSetHeatAreaTemp"
 					@onSelectCraft="
@@ -16,6 +15,9 @@
 			</div>
 			<!--执行中状态的遮罩层-->
 		</div>
+    <div v-else class="heat_area">
+      正在加载
+    </div>
 		<!--拍照区-->
 		<div class="picture_area">
 			<!--加液区和拍照区可切换-->
@@ -50,11 +52,11 @@
 				<van-button size="large" class="btn_size op_up_tray" @click="onUpTray">抬起托盘</van-button>
 			</div>
 		</div>
-		<van-overlay :show="liquidVisible" v-if="liquidVisible" style="z-index: 9999">
+		<van-overlay :show="liquidVisible" v-if="liquidVisible">
 			<div class="liquid">
 				<div class="addLiquid">
 					<AddLiquid
-						:currentSelectedTube="tubeRack"
+						:currentSelectedTube="JSON.parse(JSON.stringify(tubeRack))"
             :liquidArea="liquidArea"
 						@cancel="liquidVisible = false"
 						@onAddSolution="onAddSolution"></AddLiquid>
@@ -87,7 +89,7 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, watch, shallowRef } from "vue";
 //@ts-ignore
 import { ElMessage, ElMessageBox } from "element-plus";
 import { createWebSocket, sharedWsUrl } from "@/services/socket";
@@ -137,15 +139,14 @@ watch(
 	}
 );
 
-watch(()=>statusStore.status,(newVal, oldValue)=>{
+watch(()=>settingStore.heatAreaConfig,(newVal, oldValue)=>{
   if(newVal){
-    heatAearStatusList.value = newVal.heatArea
-    updateHeatList()
-		}
+    initHeatList()  
+	}
 })
 
 const heatAearStatusList = ref(statusStore.status?.heatArea || []);
-const heatList: any = ref([]);
+const heatList = shallowRef<any>([]);
 const craftVisible = ref(false);
 let tubeList:any = [];
 const selectedColor = "#4F85FB";
@@ -176,11 +177,10 @@ onMounted(() => {
         const command:any = cmdInfo.command;
         //@ts-ignore
         const cmdName = CmdDescMap[command];
+        updateHeatList(command)
         if(command == 'moveToHeatArea'){//移至加热完成
-          console.log('tubeRack---', tubeRack)
-          //更新页面UI
-          updateHeatList()
           //清除加液区的数据
+          setTubeToActionArea(null)
         }
         const result = data.data.success
           ? "执行完毕"
@@ -211,6 +211,7 @@ onMounted(() => {
 const selectedTrayList = ref<any>([]);
 const selectedTrayObj: any = {};
 const onSelectedTray = (heatAreaItem: any, type: string) => {
+  //此处发生变化后，不需要更新组件
 	heatList.value[heatAreaItem.index] = heatAreaItem;
 	//取消选中，已经存在selectedTrayList中
 	let ids = selectedTrayList.value.map((tube: any) => tube.id);
@@ -226,12 +227,15 @@ const onSelectedTray = (heatAreaItem: any, type: string) => {
 	} else {//点击操作区指令时，加热区选中的状态不能变
 		heatAreaItem.isSelect = true;
 	}
+  console.log('selectedTrayList.value---', selectedTrayList.value)
   tubeList = heatAreaItem.tubeList;
 };
 
 const initHeatList = () => {
+  let heatAearStatusList = statusStore.status.heatArea
+  console.log('settingStore.heatAreaConfig---', settingStore.heatAreaConfig)
   heatList.value = settingStore.heatAreaConfig.map((item:any) => {
-    heatAearStatusList.value.forEach((areaItem:any) => {
+    heatAearStatusList.forEach((areaItem:any) => {
       if(areaItem.hardwareId == item.hardwareId){
 				item = {
           ...item, 
@@ -241,23 +245,27 @@ const initHeatList = () => {
     })
 		return item;
 	});
+  console.log('初始化加温区数据：==========', heatList.value)
 }
 
-const updateHeatList = () => {
+const updateHeatList = (command:any) => {
   const list = [...heatList.value]
+  let heatAearStatusList = statusStore.status.heatArea
   const selectedIds = selectedTrayList.value.map((item: any) => item.id);
   heatList.value = list.map((item:any) => {
-    heatAearStatusList.value.forEach((areaItem:any) => {
+    heatAearStatusList.forEach((areaItem:any) => {
       if(areaItem.hardwareId == item.hardwareId){
 				item = {
           ...item, 
           heatAearStatus:areaItem,
-          tubeList:tubeRack.tubeList
         }
 			}
     })
     if(selectedIds.includes(item.id)){
       item.isSelect = true;
+      if(command == 'moveToHeatArea'){
+        item.tubeList = tubeRack.tubeList;
+      }
     }
     return item;
   });
@@ -456,9 +464,9 @@ const onMoveToHeat = () => {
 	let selectedDataItem = selectedTrayList.value[0];
 	//2、判断选择的加热区是否已经有了试管架, 加热区是否有试管是通过设备上报的数据获取的
 	let hardwareId = selectedDataItem.hardwareId;
-	// let trayStatus = heatAearStatusList.value[selectedDataItem.index].trayStatus;
+  let heatAearStatusList = statusStore.status.heatArea
 	let trayStatus;
-	heatAearStatusList.value.forEach((item: any) => {
+	heatAearStatusList.forEach((item: any) => {
 		if (hardwareId == item.hardwareId) {
 			trayStatus = item.trayStatus;
 		}
@@ -683,15 +691,15 @@ const onStartHeat = () => {
 	let existTubeRack = true;
 	//加热区是否设置了加热温度
 	let hasSetTemp = true;
-	selectedTrayList.value.forEach((item: any) => {
-		let tubeList = item.tubeList;
-		if (!tubeList || !tubeList.length) {
-			existTubeRack = false;
-		}
-		if (!item.temperature) {
+  const selectedIds = selectedTrayList.value.map((item: any) => item.id);
+  heatList.value.forEach((item: any) => {
+    if (selectedIds.includes(item.id) && item.heatAearStatus.trayStatus == 0) {
+      existTubeRack = true;
+    }
+    if (!item.temperature) {
 			hasSetTemp = false;
 		}
-	});
+  });
 
 	if (!existTubeRack) {
 		ElMessage.error("选择的加热区未放置试管架，请重新选择");
@@ -869,7 +877,6 @@ const onSendCmd = (command: OperationCmd, params: any) => {
 		height: 18rem;
 		background: rgb(230, 230, 230);
 		opacity: 0.5;
-		z-index: 9999;
 	}
 }