优化主页面

src/views/graphite/index.vue

@@ -5,6 +5,7 @@
 				<HeatPosition
 					:heatInfo="{ ...item, index }"
 					:tubeIndex="index + 1"
+          :heatAearStatusList="heatAearStatusList"
 					@onSelectedTray="onSelectedTray"
 					@onSetHeatAreaTemp="onSetHeatAreaTemp"
 					@onSelectCraft="
@@ -53,7 +54,8 @@
 			<div class="liquid">
 				<div class="addLiquid">
 					<AddLiquid
-						:currentSelectedTube="currentSelectedTube"
+						:currentSelectedTube="tubeRack"
+            :liquidArea="liquidArea"
 						@cancel="liquidVisible = false"
 						@onAddSolution="onAddSolution"></AddLiquid>
 				</div>
@@ -85,7 +87,7 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 //@ts-ignore
 import { ElMessage, ElMessageBox } from "element-plus";
 import { createWebSocket, sharedWsUrl } from "@/services/socket";
@@ -111,12 +113,13 @@ const craftInfo = ref(craftStore.craftInfo);
 const settingStore = useSettingStore();
 const craftName = ref("选择工艺");
 const exeCraftName = ref("执行工艺");
+const liquidArea = ref()
 watch(
 	() => craftStore.craftInfo,
-	(newVal, oldVal) => {
+	(newVal) => {
     if(newVal){
       heatList.value.forEach((item:any) => {
-        if(item.id == newVal?.heatId){
+        if(item.id == newVal?.heatId && item.craftInfo){
           item.craftInfo.status = newVal?.status
           if(newVal?.status == 3){//停止执行
 						item.executing_craft = false;
@@ -134,9 +137,8 @@ watch(
 	}
 );
 
-watch(()=>statusStore.status,(newVal)=>{
+watch(()=>statusStore.status,(newVal, oldValue)=>{
   if(newVal){
-    console.log('newVal------status---', newVal)
     heatAearStatusList.value = newVal.heatArea
     updateHeatList()
 		}
@@ -145,7 +147,7 @@ watch(()=>statusStore.status,(newVal)=>{
 const heatAearStatusList = ref(statusStore.status?.heatArea || []);
 const heatList: any = ref([]);
 const craftVisible = ref(false);
-let tubeList = reactive<any>([]);
+let tubeList:any = [];
 const selectedColor = "#4F85FB";
 const emptyColor = "#FFFFFF";
 const taskName = ref("");
@@ -174,6 +176,12 @@ onMounted(() => {
         const command:any = cmdInfo.command;
         //@ts-ignore
         const cmdName = CmdDescMap[command];
+        if(command == 'moveToHeatArea'){//移至加热完成
+          console.log('tubeRack---', tubeRack)
+          //更新页面UI
+          updateHeatList()
+          //清除加液区的数据
+        }
         const result = data.data.success
           ? "执行完毕"
           : `执行失败 ${data.data.message}`;
@@ -206,8 +214,7 @@ const onSelectedTray = (heatAreaItem: any, type: string) => {
 	heatList.value[heatAreaItem.index] = heatAreaItem;
 	//取消选中，已经存在selectedTrayList中
 	let ids = selectedTrayList.value.map((tube: any) => tube.id);
-	if (type == "isClick") {
-		//点击加热区
+	if (type == "isClick") {//点击加热区
 		if (ids.includes(heatAreaItem.id)) {
 			heatAreaItem.isSelect = false;
 			selectedTrayList.value = selectedTrayList.value.filter((selectedItem: any) => selectedItem.id != heatAreaItem.id);
@@ -216,15 +223,14 @@ const onSelectedTray = (heatAreaItem: any, type: string) => {
 			selectedTrayList.value.push(heatAreaItem);
 		}
     onHeadleCraft(heatAreaItem);
-	} else {
+	} else {//点击操作区指令时，加热区选中的状态不能变
 		heatAreaItem.isSelect = true;
 	}
+  tubeList = heatAreaItem.tubeList;
 };
 
 const initHeatList = () => {
   heatList.value = settingStore.heatAreaConfig.map((item:any) => {
-		//添加一个字段，默认为未选中
-		item.isSelect = false;
     heatAearStatusList.value.forEach((areaItem:any) => {
       if(areaItem.hardwareId == item.hardwareId){
 				item = {
@@ -238,14 +244,15 @@ const initHeatList = () => {
 }
 
 const updateHeatList = () => {
+  const list = [...heatList.value]
   const selectedIds = selectedTrayList.value.map((item: any) => item.id);
-  heatList.value = heatList.value.map((item:any) => {
-		//添加一个字段，默认为未选中
+  heatList.value = list.map((item:any) => {
     heatAearStatusList.value.forEach((areaItem:any) => {
       if(areaItem.hardwareId == item.hardwareId){
 				item = {
           ...item, 
-          heatAearStatus:areaItem
+          heatAearStatus:areaItem,
+          tubeList:tubeRack.tubeList
         }
 			}
     })
@@ -254,7 +261,16 @@ const updateHeatList = () => {
     }
     return item;
   });
-  console.log('heatList.value---', heatList.value)
+}
+
+//加液区中的托盘
+let tubeRack:any = {}
+const setTubeToActionArea = (tubeRackInfo:any)=> {
+  if(tubeRackInfo){
+    tubeRack = JSON.parse(JSON.stringify(tubeRackInfo));
+    return;
+  }
+  tubeRack = tubeRackInfo
 }
 
 //选择的加热区是否选择了工艺
@@ -350,8 +366,18 @@ const onAddLiquid = () => {
 	}
 };
 
-const onAddSolution = (data: any) => {
+const onAddSolution = (data: any, sourceTube:any) => {
 	let ids = data.map((item: any) => item.id);
+  if(sourceTube){
+    sourceTube.tubeList.forEach((item:any) => {
+      if(item.selectedBackgroudColor){
+        item.backgroundColor = '#189952'
+        item.selectedBackgroudColor = null
+      }
+    })
+    setTubeToActionArea(sourceTube)
+  }
+  
 	//批量发送加液指令
 	const params = {
 		injectFluids: data,
@@ -363,13 +389,6 @@ const onAddSolution = (data: any) => {
 			ElMessage.error(res.msg);
 		}
 	});
-	// tubeList.forEach((item: any) => {
-	//   if (ids.includes(item.id)) {
-	//     item.default = defaultColor;
-	//     item.color = defaultColor;
-	//     item.isSelected = true;
-	//   }
-	// });
 };
 
 const changeVisible = () => {
@@ -463,27 +482,9 @@ const onMoveToHeat = () => {
 			ElMessage.error(res.msg);
 		}
 	});
-
-	//指令完成成更新UI
-	// let list = [...heatList.value];
-	// list.forEach((item: any) => {
-	// 	if (item.id == selectedDataItem.id) {
-	// 		item.tubeList = JSON.parse(JSON.stringify(tubeList));
-	// 		selectedDataItem.tubeList = JSON.parse(JSON.stringify(tubeList));
-	// 		//标注该加热区是选中状态
-	// 		item.isSelect = true;
-	// 	}
-	// });
-	// tubeList.forEach((item: any) => {
-	// 	item.color = "";
-	// 	item.default = "";
-	// });
-	// console.log('list--222-', list)
-	// heatList.value = [...list];
 };
 
 //移至加液区(操作区)
-const currentSelectedTube = ref({});
 const onMoveToOperationArea = () => {
 	//1、判断加液区是否有试管架(暂时获取不到这个状态)
 	//1、是否选择了试管架/加热区
@@ -503,10 +504,18 @@ const onMoveToOperationArea = () => {
 	}
 
 	let selectedDataItem = selectedTrayList.value[0];
-  console.log('selectedDataItem----', selectedDataItem)
-	currentSelectedTube.value = selectedDataItem;
+  let isTrayStatus = false
+  heatList.value.map((item:any) => {
+    if(selectedDataItem.id == item.id){
+      setTubeToActionArea(item)
+      // currentSelectedTube.value = item;
+      if(item.heatAearStatus.trayStatus == 0){
+        isTrayStatus = true
+      }
+    }
+  })
 	//3、选择的加热区有没有试管架
-	if (selectedDataItem.heatAearStatus.trayStatus == 0) {
+	if (isTrayStatus) {
 		ElMessage.error("选择的加热区没有试管架");
 		return false;
 	}
@@ -515,14 +524,6 @@ const onMoveToOperationArea = () => {
 		heatId: selectedDataItem.id,
 	};
 	onSendCmd("moveToActionArea", params);
-	//更新UI
-	// heatList.value.forEach((item: any) => {
-	// 	if (item.id == selectedDataItem.id) {
-	// 		tubeList = [...item.tubeList];
-	// 	}
-	// });
-	// onSelectedTray(selectedDataItem, "isMove");
-	return true;
 };
 
 //移至特殊区域
@@ -792,23 +793,6 @@ const onUpTray = () => {
 	});
 };
 
-//修改加热区状态 selectedValue: 0 | 1 | 2; // 0为无托盘，1为有托盘，2为托盘抬起
-const updateheatAearStatus = (selectedValue: any, heatId: string) => {
-	let heaterList = statusStore.status?.heatArea;
-	if (heaterList) {
-		heaterList.forEach((item: any) => {
-			if (item.heaterId == heatId) {
-				item.trayStatus = selectedValue;
-			}
-		});
-		const data: any = {
-			...statusStore.status,
-			heater: [...heaterList],
-		};
-		statusStore.setStatus(data);
-	}
-};
-
 const onSendCmd = (command: OperationCmd, params: any) => {
 	//发送加热指令
 	taskCmd({ command, params }).then(res => {