调整设置温度弹框样式

src/services/task/task.ts

@@ -2,17 +2,15 @@ import httpRequest, { type BaseResponse } from "../httpRequest";
 import { addTxnRecord, injectFluidsRecord } from "../txn";
 import type { OperationCmd } from "../globalCmd/globalCmd";
 
-
-export function saveTaskName(params: { name: String}) {
+export function saveTaskName(params: { name: String }) {
 	return httpRequest<BaseResponse<any>>({ url: `/api/tasks/`, method: "POST", params });
 }
 
 //结束实验
-export function stopTask(params: { taskId: String}) {
+export function stopTask(params: { taskId: String }) {
 	return httpRequest<BaseResponse<string>>({ url: `/api/tasks/stop`, method: "POST", params });
 }
 
-
 //结束实验
 export function getIngTask() {
 	return httpRequest<BaseResponse<any>>({ url: `/api/tasks/getIngTask`, method: "GET" });
@@ -25,7 +23,7 @@ export function startHeat(params: { command: OperationCmd; params: [] }) {
 }
 
 //批量加液
-export function injectFluid(params:any) {
-	const commandId = injectFluidsRecord({ injectFluids:params.injectFluids, command:'', category: "task" });
+export function injectFluid(params: any) {
+	const commandId = injectFluidsRecord({ injectFluids: params.injectFluids, command: "injectFluid", category: "task" });
 	return httpRequest<BaseResponse<string>>({ url: "/api/cmd/injectFluid", params: { ...params, commandId }, method: "POST" });
 }

src/services/txn.ts

@@ -24,13 +24,13 @@ type DebugCmdRecord = {
 
 type TaskCmdRecord = {
 	category: "task";
-	command: OperationCmd | null;
+	command: OperationCmd;
 	params: Record<string, any>;
 }
 
 type TaskCmdInjectFluidsRecord = {
 	category: "task";
-	command: '',
+	command: OperationCmd,
 	injectFluids: [];
 }
 

src/views/graphite/components/HeatPosition.vue

@@ -1,37 +1,33 @@
 <template>
-  <div
-    class="heat_main"
-    :style="`${
-      trayInfo.isSelect
-        ? 'border:4px solid rgb(66 215 76)'
-        : 'border:4px solid #ffffff'
-    }`"
-  >
+	<div class="heat_main" :style="`${trayInfo.isSelect ? 'border:4px solid rgb(66 215 76)' : 'border:4px solid #ffffff'}`">
 		<section class="heat_pos_text">
 			<div class="pos_text">{{ trayInfo.name }}</div>
 			<div class="pos_text pos_state">已放置</div>
 		</section>
 
-    <section
-      class="heat_pos"
-      :style="`background:${trayInfo?.id ? '' : ''}`"
-    >
+		<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>
+				:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div>
 			<!--执行中状态的遮罩层-->
-      <div class="craft_executing_modal" v-if="trayInfo.craftInfo?.id" :style="{background: !trayInfo.executing_craft ? '#FFDFC2' : '#8BFFBF'}">
+			<div
+				class="craft_executing_modal"
+				v-if="trayInfo.craftInfo?.id"
+				:style="{ background: !trayInfo.executing_craft ? '#FFDFC2' : '#8BFFBF' }">
 				<!--trayInfo.executing_craft 已选择工艺未执行-->
 				<div class="loading">
-          <img v-if="trayInfo.executing_craft" :src="ExecutingSvg"/>
+					<img v-if="trayInfo.executing_craft" :src="ExecutingSvg" />
 					<img v-else :src="ReadySvg" />
 				</div>
-        <div class="tray_craft" :style="{color: !trayInfo.executing_craft ? readyColor : executingColor}">{{ trayInfo.craftInfo.name }}</div>
-        <div class="tray_exce" :style="{color: !trayInfo.executing_craft ? readyColor : executingColor}">{{ !trayInfo.executing_craft ? '工艺等待执行' : '工艺执行完毕'}}</div>
+				<div class="tray_craft" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
+					{{ trayInfo.craftInfo.name }}
+				</div>
+				<div class="tray_exce" :style="{ color: !trayInfo.executing_craft ? readyColor : executingColor }">
+					{{ !trayInfo.executing_craft ? "工艺等待执行" : "工艺执行完毕" }}
+				</div>
 			</div>
 		</section>
 
@@ -39,7 +35,9 @@
 			<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>
+					<div class="heating" :style="{ color: temperature_color }">
+						{{ trayInfo.heatAearStatus?.isHeating ? "加热中" : "未加热" }}
+					</div>
 				</template>
 				<template v-else>
 					<div class="target_temp set_temp">设置目标温度</div>
@@ -50,14 +48,18 @@
 				<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"
-        >
+					@click.stop="onSelectTray">
 					选择
 				</button>
 			</div>
 		</section>
 
-    <OverlayModal :visible="tempVisible">
+		<van-overlay v-if="tempVisible" :show="true">
+			<div class="flex justify-center items-center h-full">
+				<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">
@@ -93,7 +95,7 @@
           </button>
         </footer>
       </div>
-    </OverlayModal>
+    </OverlayModal> -->
 		<!--选择工艺-->
 		<OverlayModal :visible="craftVisible">
 			<CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
@@ -107,25 +109,26 @@ import OverlayModal from "@/components/OverlayModal.vue";
 import CraftList from "./CraftList.vue";
 import ReadySvg from "@/assets/ready.svg";
 import ExecutingSvg from "@/assets/executing.svg";
+import SetTemperature from "./SetTemperature.vue";
 
 const tubeList = ref<any>([]);
 const props = defineProps({
 	heatInfo: Object,
 	tubeIndex: Number,
 });
-const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", 'onSelectCraft']);
+const emits = defineEmits(["onSelectedTray", "onSetHeatAreaTemp", "onSelectCraft"]);
 
-const selectedBackgroundColor = '#189952'
-const readyColor = '#EE8223'
-const executingColor = '#14A656'
+const selectedBackgroundColor = "#189952";
+const readyColor = "#EE8223";
+const executingColor = "#14A656";
 onMounted(() => {
-  for(let i = 0 ; i<16; i++){
+	for (let i = 0; i < 16; i++) {
 		tubeList.value.push({
-      backgroudColor:'',
-      id:i+1
-    })
+			backgroudColor: "",
+			id: i + 1,
+		});
 	}
-  reSet(props.heatInfo)
+	reSet(props.heatInfo);
 });
 
 const craftVisible = ref(false);
@@ -135,33 +138,35 @@ const trayTempType = ref(false);
 const tempVisible = ref(false);
 //加热区信息
 let trayInfo = ref<any>(props.heatInfo || {});
-let temperature_color = ref('#1677FF')
-watch(()=>trayInfo, (newVal:any) =>{
-  if(newVal.heatAearStatus.isHeating){
-    temperature_color.value = '#FE0A0A'  
-  }else{
-    temperature_color.value = '#1677FF'  
+let temperature_color = ref("#1677FF");
+watch(
+	() => trayInfo,
+	(newVal: any) => {
+		if (newVal.heatAearStatus.isHeating) {
+			temperature_color.value = "#FE0A0A";
+		} else {
+			temperature_color.value = "#1677FF";
 		}
-  
-})
-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
+	}
+);
+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
+			});
+		} else {
+			tubeList.value.forEach((item: any) => {
+				item.backgroudColor = selectedBackgroundColor;
 				item.isSelected = true;
-      })
-      heatAreaData.tubeList = tubeList.value
+			});
+			heatAreaData.tubeList = tubeList.value;
 		}
 	}
-  trayInfo.value = heatAreaData
-}
+	trayInfo.value = heatAreaData;
+};
 
 const heatAreaTemperature = ref(trayInfo.value.temperature || "");
 const currentIndex = ref();
@@ -172,7 +177,7 @@ const onSelectTray = () => {
 		trayInfo.value.isSelect = !trayInfo.value.isSelect;
 	}
 	currentIndex.value = props.tubeIndex;
-  emits("onSelectedTray", trayInfo.value, 'isClick');
+	emits("onSelectedTray", trayInfo.value, "isClick");
 };
 
 const changeVisible = () => {
@@ -181,38 +186,38 @@ const changeVisible = () => {
 
 //选择工艺
 const onChooseCraft = () => {
-  onSelectTray()
+	onSelectTray();
 	craftVisible.value = true;
 };
 const setTemperature = () => {
+	heatAreaTemperature.value = +trayInfo.value.temperature;
 	tempVisible.value = true;
 };
 
-const onConfirm = () => {
-  trayInfo.value.temperature = heatAreaTemperature.value;
+const onConfirm = (temperature: number) => {
+	trayInfo.value.temperature = temperature;
 	tempVisible.value = false;
 	//将设置的温度传给加热区
 	emits("onSetHeatAreaTemp", trayInfo.value);
 };
 
 //试管操作
-const onHandleTube = (tubeInfo: any, index:number) => {
-  if(!trayInfo.value.heatAearStatus.trayStatus)return;
+const onHandleTube = (tubeInfo: any, index: number) => {
+	if (!trayInfo.value.heatAearStatus.trayStatus) return;
 	//设置UI选中颜色
-  if(trayInfo.value.heatAearStatus.trayStatus && tubeInfo.isSelected){
-    tubeInfo.backgroudColor = ''
-  }else{
-    tubeInfo.backgroudColor = selectedBackgroundColor
+	if (trayInfo.value.heatAearStatus.trayStatus && tubeInfo.isSelected) {
+		tubeInfo.backgroudColor = "";
+	} else {
+		tubeInfo.backgroudColor = selectedBackgroundColor;
 	}
 	tubeInfo.isSelected = !tubeInfo.isSelected;
 };
 
 //选择的工艺
-const onHandleSelectedCraft = (craftData:any) => {
-  emits('onSelectCraft', craftData)
+const onHandleSelectedCraft = (craftData: any) => {
+	emits("onSelectCraft", craftData);
 	changeVisible();
-}
-
+};
 </script>
 
 <style lang="scss" scoped>
@@ -254,8 +259,6 @@ const onHandleSelectedCraft = (craftData:any) => {
 	border: 2px solid #7592a8;
 	padding-top: 0.5rem;
 	border-radius: 0.5rem;
-
-  
 }
 .inner-circle {
 	border-radius: 50%;
@@ -366,12 +369,11 @@ const onHandleSelectedCraft = (craftData:any) => {
 		margin-top: -10px;
 	}
 }
-.text_choose{
+.text_choose {
 	position: relative;
-  z-index: 111;
-  
+	// z-index: 111;
 }
-.text_color{
+.text_color {
 	background: #6893ff;
 	color: #ffffff;
 }
@@ -390,20 +392,20 @@ const onHandleSelectedCraft = (craftData:any) => {
 		justify-content: center;
 	}
 	.tray_craft {
-      font-size: .75rem;
+		font-size: 0.75rem;
 		margin-top: 0.5rem;
 		font-weight: bold;
 		display: flex;
 		justify-content: center;
-      color: #EE8223;
+		color: #ee8223;
 	}
 
 	.tray_exce {
 		font-size: 1rem;
 		font-weight: bold;
-      color: #EE8223;
+		color: #ee8223;
 		display: flex;
 		justify-content: center;
 	}
-  }
+}
 </style>

src/views/graphite/components/SetTemperature.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="w-[440px] bg-white px-5 py-[30px] rounded-lg text-text">
+		<h3 class="text-xl font-medium">设定温度</h3>
+		<section class="">
+			<div class="text-xl flex items-center h-16">
+				<span class="min-w-[100px] text-right">目标温度</span
+				><el-input v-model="temperatureVal" class="ml-5 mr-3" style="width: 200px" placeholder="请输入温度" />
+				<span>℃</span>
+			</div>
+
+			<!-- <div class="text-xl flex items-center h-16">
+				<div class="min-w-[100px]">到达温度后</div>
+				<div class="ml-5 mr-3">
+					<van-radio-group direction="horizontal" shape="dot">
+						<van-radio name="1">保持温度</van-radio>
+						<van-radio name="2">停止加热</van-radio>
+					</van-radio-group>
+				</div>
+			</div> -->
+		</section>
+
+		<footer class="mt-4 flex justify-center items-center text-sm font-medium gap-x-8">
+			<button class="btn-dark px-10 py-2 text-xl" @click="$emit('confirm', temperatureVal)">确定</button>
+			<button class="btn-light px-10 py-2 text-xl" @click="$emit('cancel')">取消</button>
+		</footer>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{ temperature: number }>();
+const temperatureVal = ref<number>(props.temperature);
+const emit = defineEmits<{
+	(e: "confirm", temperature: number): void;
+	(e: "cancel"): void;
+}>();
+</script>
+<style lang="scss" scoped></style>