完善开始实验功能

src/services/task/task.ts

@@ -0,0 +1,4 @@
+import httpRequest, { type BaseResponse } from "../httpRequest";
+export function saveTaskName(params: { name: String}) {
+    return httpRequest<BaseResponse<string>>({ url: `/api/tasks/`, method: "POST", params });
+}

src/views/graphite/components/CarfList.vue

@@ -1,101 +0,0 @@
-<template>
-    <div class="carf">
-        <div class="carf_title">选择工艺</div>
-        <div>
-            <div class="carf_column_name">工艺名称</div>
-            <div v-for="item in list" class="carf_item" @click="onChooseCarf(item)">
-                <div :style="`background: ${currentItem?.id == item.id ? activeColor : ''}`" class="carf_li">{{ item.name }}</div>
-            </div>
-        </div>
-        <div class="overlay_btn">
-            <van-button type="primary" class="btn ok">确定</van-button>
-            <van-button class="btn cancel" @click="onCancel">取消</van-button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { ref, onMounted } from 'vue'
-    const currentItem = ref()
-    const activeColor = ref('#ffffff')
-    const list = ref()
-    const emits = defineEmits(['changeVisible'])
-    onMounted(()=>{
-        list.value = [{
-            id: 10,
-            name: '硫酸溶解法1'
-        },{
-            id: 20,
-            name: '硫酸溶解法2'
-        },{
-            id: 30,
-            name: '硫酸溶解法3'
-        }]
-    })
-
-    const onChooseCarf = (data:any) => {
-        activeColor.value = '#d9d9d9'
-        currentItem.value = data
-    }
-
-    const onCancel = () => {
-        emits('changeVisible')
-    }
-</script>
-
-<style lang="scss" scoped>
-    .carf{
-        height: 27.5rem;
-        width: 23.75rem;
-        background: #ffffff;
-
-        .carf_title{
-            width: 5.25rem;
-            height: 1.875rem;
-            margin-left: 1.25rem;
-            margin-top: 1.875rem;
-            color: #40474E;
-            font-weight: 500;
-            font-size: 1.25rem;
-        }
-        
-    }
-
-    .carf_column_name{
-        width: 5rem;
-        height: 1.875rem;
-        color: rgba(0, 0, 0, 0.85);
-        margin-left: 2rem;
-        margin-top: .625rem;
-    }
-
-    .carf_item{
-        .carf_li{
-            display: flex;
-            align-items: center;
-            width: 23.75rem;
-            height: 3.125rem;
-            padding-left: 1.875rem;
-            font-size: 1.25rem;
-            color: rgba(0, 0, 0, 0.85);
-        }
-    }
-
-    .overlay_btn{
-        .btn{
-            width: 6.875rem;
-            height: 2.875rem;
-            font-size: 1.25rem;
-            margin-top: 6.875rem;
-        }
-
-        .ok{
-            margin-left: 5rem;
-        }
-
-        .cancel{
-            margin-left: 2.375rem;
-        }
-
-    }
-</style>

src/views/graphite/components/CraftList.vue

@@ -21,6 +21,8 @@
     const list = ref()
     const emits = defineEmits(['changeVisible'])
     onMounted(()=>{
+        //获取工艺列表
+        
         list.value = [{
             id: 10,
             name: '硫酸溶解法1'

src/views/graphite/index.vue

@@ -40,7 +40,7 @@
         <van-button size="large" class="btn_size op_open_door" @click="onOPen"
           >开门</van-button
         >
-        <van-button size="large" class="btn_size op_start_task"
+        <van-button size="large" class="btn_size op_start_task" @click="taskNameVisible = true"
           >开始实验</van-button
         >
         <van-button size="large" class="btn_size op_stop_task"
@@ -71,7 +71,7 @@
         <van-button size="large" class="btn_size op_move_act" @click="onMoveToOperationArea"
           >移至加液</van-button
         >
-        <van-button size="large" class="btn_size op_move_exception"
+        <van-button size="large" class="btn_size op_move_exception" @click="onMoveToSpecial"
           >移至特殊</van-button
         >
         <van-button size="large" class="btn_size op_start_heat" @click="onStartHeat"
@@ -96,6 +96,24 @@
     <OverlayModal :visible="craftVisible">
       <CraftList @changeVisible="changeVisible"></CraftList>
     </OverlayModal>
+
+	<!--实验名称-->
+	<OverlayModal :visible="taskNameVisible">
+		<div class="task_name">
+			<div class="task_title">
+				开始新实验
+			</div>
+			<div class="task_name_content">
+				实验名称：<input v-model="taskName" class="task_input">
+			</div>
+
+			<br/>
+			<footer class="task_button">
+				<button class="btn-dark px-2 py-1 min-w-20" @click="onSave">保存</button>
+				<button class="px-4 py-1 min-w-20" @click="onCancel">取消</button>
+			</footer>
+		</div>
+	</OverlayModal>
   </div>
 </template>
 <script lang="ts" setup>
@@ -108,6 +126,7 @@ import OverlayModal from "@/components/OverlayModal.vue";
 import CraftList from "@/views/graphite/components/CraftList.vue";
 import { graphiteMock } from "./components/mock";
 import { useStatusStore } from "@/stores/status";
+import { saveTaskName } from '@/services/task/task';
 import {
   CmdDescMap,
   taskCmd,
@@ -127,6 +146,7 @@ let tubeList = reactive<any>([]);
 const selectedColor = "#4F85FB";
 const emptyColor = "#FFFFFF";
 const defaultColor = "#189952";
+const taskName = ref('')
 onMounted(() => {
   //6个加热区数据
   heatList.value = settingStore.heatAreaConfig;
@@ -318,6 +338,65 @@ const onMoveToOperationArea = () => {
 	onSelectedTray(selectedDataItem)
 }
 
+//移至特殊区域
+const onMoveToSpecial = () => {
+	//检查是否设置了异常区域
+	const systemSetting = settingStore.systemSetting
+	let specialArea:any = {}
+	if(systemSetting && systemSetting.length){
+		systemSetting.forEach(item => {
+			if(item.code == "sys_setting_abnormal_area"){
+				specialArea = item;
+			}
+		})
+
+		if(!specialArea.id){
+			ElMessage.error('未设置异常区域，请在系统配置中设置')
+			return;
+		}
+
+		//是否选择了加热区的试管架
+		if (!selectedTrayList.value.length) {
+			ElMessage.error("请选择试管架");
+			return;
+		}
+		//2、只能选择一个试管架/加热区
+		if (selectedTrayList.value.length != 1) {
+			ElMessage.error("只能选择一个试管架");
+			return;
+		}
+		let selectedDataItem = selectedTrayList.value[0];
+		selectedDataItem.isSelect = false
+		onSelectedTray(selectedDataItem)
+
+		const params = {
+			areaId:selectedDataItem.id
+		}
+		onSendCmd('moveToActionArea', params)
+	}
+}
+
+//开始实验
+const taskNameVisible = ref(false)
+const onSave = ()=> {
+	const params = {
+		name: taskName.value
+	}
+	saveTaskName(params).then(res => {
+		if(res.success){
+			console.log('保存实验名称===', res)
+			ElMessage.success('保存成功')
+			onCancel()
+		}else{
+			ElMessage.error(res.msg)
+		}
+	})
+}
+
+
+const onCancel = ()=> {
+	taskNameVisible.value = false;
+}
 
 //开门
 const onOPen = () => {
@@ -374,7 +453,6 @@ const onStartHeat = () => {
 			}
 		})
 	})
-	console.log('cmdList---', cmdList)
 	onSendCmd("startHeat", cmdList)
 }
 
@@ -388,6 +466,7 @@ const onSendCmd = (command:OperationCmd,params:any)=> {
 		}
 	});
 }
+
 </script>
 <style lang="scss" scoped>
 @use "@/assets/style/mixin.scss" as *;
@@ -550,14 +629,14 @@ const onSendCmd = (command:OperationCmd,params:any)=> {
 }
 
 .home_tube {
-  height: 12rem;
+  height: 13rem;
   background: #384d5d;
   opacity: 1;
   margin-top: 0.5rem;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
-  padding-left: 0.4rem;
+  justify-content: center;
+  gap: 0.6rem;
   padding-top: 0.2rem;
   border-radius: 1.5rem;
   .inner-circle {
@@ -567,4 +646,34 @@ const onSendCmd = (command:OperationCmd,params:any)=> {
     background-color: rgb(212, 212, 212);
   }
 }
+
+.task_name{
+	height:17.25rem;
+	width: 27.5rem;
+	background: #ffffff;
+
+	.task_title{
+		font-size: 1.25rem;
+		color: #40474E;
+		margin-left: 1.25rem;
+		margin-top: 1.875rem
+	}
+
+	.task_name_content{
+		margin-top:1.875rem;
+		margin-left: 1.5rem;
+		font-size: 1.25rem;
+		color: #40474E;
+		.task_input{
+			border: 1px solid #dcdcdc;
+			border-radius: 8px;
+			height: 3rem;
+		}
+	}
+
+	.task_button{
+		display: flex;
+		justify-content: center;
+	}
+}
 </style>