优化加液

src/views/graphite/components/AddLiquid.vue

@@ -16,7 +16,7 @@
         </div>
         
         <div class="liquid_main">
-            <div class="liquid_area" v-for="(solution, index) in solutionList" :key="index">
+            <div class="liquid_area" v-for="(solution, index) in containerList" :key="index">
                 <!--左溶液瓶区-->
                 <div>
                     <div class="liquid_percentage">
@@ -60,37 +60,30 @@
 </template>
 <script setup>
     import AddSvg from '@/assets/add.svg'
-    import { ref, onMounted, computed } from 'vue'
+    import { ref, onMounted } from 'vue'
+    import { useSettingStore } from "@/stores/setting";
+    const settingStore = useSettingStore();
     const emits = defineEmits(['cancel', 'onAddSolution'])
-    const solutionData = {
-        solutionNum:null
-    };
-    const solutionList = ref([{
-        solutionId: 1,
-        solutionName:'硫酸',
-        solutionNum:null
-    }])
-    const solutionNum = ref(null)
+    const containerList = ref([])
     const selectedTubeList = ref([])
     const tubeQueue = ref([])
     const selectedColor = '#4F85FB'
     const emptyColor = '#FFFFFF'
-    const defualtTube = {
-        color:emptyColor
-    }
     const tubeList = ref([])
     const onConfirm = () => {
         //发送指令给设备进行加液
-        console.log('tubeQueue---', tubeQueue.value)
-        emits('onAddSolution', selectedTubeList.value)
+        emits('onAddSolution', tubeQueue.value)
         onCancel()
     }
 
     onMounted(()=>{
+        //获取配置的酸液
+        containerList.value = settingStore.containerConf;
+        console.log('---', containerList.value)
         tubeBaseConfig();
-        while(solutionList.value.length != 8){
-            solutionList.value.push({id:solutionList.value.length + 1})
-        }
+        // while(solutionList.value.length != 8){
+        //     solutionList.value.push({id:solutionList.value.length + 1})
+        // }
     })
 
     function tubeBaseConfig(){
@@ -103,7 +96,6 @@
         }
     }
 
-
     const onChooseTube = (tubeItem, index) => {
         if(!tubeItem.id)return
         //切换选中状态

src/views/graphite/components/CraftList.vue

@@ -42,7 +42,7 @@
     const currentItem = ref()
     const activeColor = ref('#ffffff')
     const list = ref()
-    const emits = defineEmits(['changeVisible', 'onSelectedCraft'])
+    const emits = defineEmits(['changeVisible', 'selectedCraft'])
     const craftList = ref([])
     const oreList = ref<any>([])
     const oreId = ref()
@@ -76,12 +76,13 @@
     }
 
     const onSave = () => {
-        console.log('currentItem---', currentItem.value)
-        emits('onSelectedCraft', currentItem.value)
+        emits('selectedCraft', currentItem.value)
     }
 
     const onCancel = () => {
+        emits('selectedCraft', currentItem.value)
         emits('changeVisible')
+        
     }
 </script>
 

src/views/graphite/components/HeatPosition.vue

@@ -99,7 +99,7 @@
     </OverlayModal>
     <!--选择工艺-->
     <OverlayModal :visible="craftVisible">
-      <CraftList @changeVisible="changeVisible"></CraftList>
+      <CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
     </OverlayModal>
   </div>
 </template>
@@ -140,7 +140,7 @@ const onSelectTray = () => {
     trayInfo.value.isSelect = !trayInfo.value.isSelect;
   }
   currentIndex.value = props.tubeIndex;
-  emits("onSelectedTray", trayInfo.value);
+  emits("onSelectedTray", trayInfo.value, 'isClick');
 };
 
 const changeVisible = () => {
@@ -166,9 +166,13 @@ const onConfirm = () => {
 const onHandleTube = (tubeInfo: any) => {
   //选择试管时判断试管架是否为选中状态
   if (!isSelect.value) onSelectTray();
-
-  console.log("tubeInfo---", tubeInfo, '加热区位置', props.tubeIndex);
 };
+
+//选择的工艺
+const onHandleSelectedCraft = (craftData:any) => {
+	changeVisible();	
+}
+
 </script>
 
 <style lang="scss" scoped>

src/views/graphite/index.vue

@@ -32,8 +32,8 @@
           v-for="(tubeItem, index) in tubeList"
           :key="index"
           :style="{ background: tubeItem.color }"
-          @click="onChooseTube(tubeItem, index)"
-        ></div>
+          
+        ></div><!--@click="onChooseTube(tubeItem, index)"-->
       </div>
       <!--操作区-->
       <div class="graphite_btn_container">
@@ -93,8 +93,8 @@
       </div>
     </van-overlay>
     <!--选择工艺-->
-    <OverlayModal :visible="craftVisible">
-      <CraftList @changeVisible="changeVisible" @onSelectedCraft="onSelectedCraft"></CraftList>
+    <OverlayModal :visible="craftVisible"> 
+      <CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
     </OverlayModal>
 
 	<!--实验名称-->
@@ -149,7 +149,11 @@ const defaultColor = "#189952";
 const taskName = ref('')
 onMounted(() => {
   //6个加热区数据
-  heatList.value = settingStore.heatAreaConfig;
+  heatList.value = settingStore.heatAreaConfig.map((item:any) => {
+    //添加一个字段，默认为未选中
+    item.isSelect = false;
+    return item;
+  });
   //设备16个试管的基础数据
   tubeBaseConfig();
   //连接socket
@@ -176,17 +180,31 @@ onMounted(() => {
   });
 });
 
-//选择的托盘
+//选中的托盘
 const selectedTrayList = ref<any>([]);
 const selectedTrayObj: any = {};
-const onSelectedTray = (data: any) => {
-	console.log("data==操作加热区：=", data);
-	if (!data.isSelect) {
-		delete selectedTrayObj[data.id];
-	} else {
-		selectedTrayObj[data.id] = data;
-	}
-	selectedTrayList.value = Object.values(selectedTrayObj);
+const onSelectedTray = (tubeItem: any, type:string) => {
+  heatList.value[tubeItem.index] = tubeItem;
+	//取消选中，已经存在selectedTrayList中
+  let ids = selectedTrayList.value.map((tube:any) =>tube.id)
+  if(type == 'isClick'){//点击加热区
+    if(ids.includes(tubeItem.id)){
+      tubeItem.isSelect = false;
+      selectedTrayList.value = selectedTrayList.value.filter((selectedItem:any) => selectedItem.id != tubeItem.id)
+    }else{
+      tubeItem.isSelect = true;
+      selectedTrayList.value.push(tubeItem)
+    }
+  }else{
+    tubeItem.isSelect = true;
+  }
+  heatList.value.forEach((item:any) => {
+    if(item.id == tubeItem.id){
+      item = tubeItem
+    }
+  })
+ 
+	// selectedTrayList.value = Object.values(selectedTrayObj);
   
 };
 
@@ -214,8 +232,9 @@ const onAddLiquid = () => {
 };
 
 //选择的工艺
-const onSelectedCraft = (craftData:any) => {
-	console.log('craftData===', craftData)
+const onHandleSelectedCraft = (craftData:any) => {
+	changeVisible();	
+
 }
 
 const onAddSolution = (data: any) => {
@@ -269,7 +288,7 @@ const onMoveToHeat = () => {
   }
  
   let selectedDataItem = selectedTrayList.value[0];
-  //2、判断选择的加热区是否已经有了试管架
+  //2、判断选择的加热区是否已经有了试管架, 加热区是否有试管是通过设备上报的数据获取的。此处为mock的数据。 TODO
   let heatAearStatus: any = statusStore.status?.trayStatus || graphiteMock.heatAreaStatus;
   if (!heatAearStatus[selectedDataItem.index]) {
     ElMessage.error("选择的加热区已有试管架，重新选择加热区");
@@ -294,14 +313,14 @@ const onMoveToHeat = () => {
   list.forEach((item: any) => {
     if (item.id == selectedDataItem.id) {
       item.tubeList = JSON.parse(JSON.stringify(tubeList));
-	  
-	  selectedTrayObj[item.id] = item;
-	  selectedTrayList.value = Object.values(selectedTrayObj);
+      selectedDataItem.tubeList = JSON.parse(JSON.stringify(tubeList));
+      //标注该加热区是选中状态
+      item.isSelect = true;
     }
   });
   tubeList.forEach((item:any) => {
-	item.color = '';
-	item.default = ''
+    item.color = '';
+    item.default = ''
   });
   heatList.value = [...list];
 };
@@ -320,7 +339,6 @@ const onMoveToOperationArea = () => {
 		return;
 	}
 	let selectedDataItem = selectedTrayList.value[0];
-	selectedDataItem.isSelect = false
 	//3、选择的加热区有没有试管架
 	if(!selectedDataItem.tubeList || !selectedDataItem.tubeList.length){
 		ElMessage.error("选择的加热区没有试管架");
@@ -337,10 +355,9 @@ const onMoveToOperationArea = () => {
 		if(item.id == selectedDataItem.id){
 			tubeList  = [...item.tubeList]
 			item.tubeList = null;
-			
 		}
 	})
-	onSelectedTray(selectedDataItem)
+	onSelectedTray(selectedDataItem, 'isMove')
 }
 
 //移至特殊区域
@@ -372,7 +389,7 @@ const onMoveToSpecial = () => {
 		}
 		let selectedDataItem = selectedTrayList.value[0];
 		selectedDataItem.isSelect = false
-		onSelectedTray(selectedDataItem)
+		onSelectedTray(selectedDataItem, 'isMove')
 
 		const params = {
 			areaId:selectedDataItem.id
@@ -389,7 +406,6 @@ const onSave = ()=> {
 	}
 	saveTaskName(params).then(res => {
 		if(res.success){
-			console.log('保存实验名称===', res)
 			ElMessage.success('保存成功')
 			onCancel()
 		}else{
@@ -430,7 +446,6 @@ const onStartHeat = () => {
 	selectedTrayList.value.forEach((item:any) => {
 		let tubeList = item.tubeList;
 		if(!tubeList || !tubeList.length){
-			
 			existTubeRack = false;
 		}
 		if(!item.temperature){