From 732f7cccf729959979610431388df8052d127efe Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Sat, 1 Mar 2025 20:27:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=96=B7=E6=B6=82=E6=B7=BB=E5=8A=A0=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/SprayView.vue | 95 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 76 insertions(+), 19 deletions(-)

diff --git a/src/views/SprayView.vue b/src/views/SprayView.vue
index aa78f3c..2920dc8 100644
--- a/src/views/SprayView.vue
+++ b/src/views/SprayView.vue
@@ -1,12 +1,14 @@
 <template>
-	<div class="px-6 pt-6 pb-3 flex justify-between">
+	<div class="px-6 pt-4 pb-3 flex justify-between">
 		<div class="w-full">
 			<div class="flex items-center mb-3 gap-5">
 				<p class="font-medium text-primary">喷涂路线</p>
 				<img :src="route_v" alt="icon" />
 				<img :src="route_h2" alt="icon" />
+				<button class="btn-dark px-8 py-2 text-lg" @click="startSpray">开始喷涂</button>
+				<button class="btn-light px-8 py-2 text-lg" @click="stopSpray">停止喷涂</button>
 			</div>
-			<!-- <p class="mx-9 mt-5 mb-4 font-medium text-primary">选择喷涂区域</p> -->
+
 			<section class="">
 				<Spray
 					:width="840"
@@ -19,10 +21,16 @@
 					:rows="3"
 					:cell-num="25"
 					@select-area="onSelectArea" />
-				<van-checkbox-group shape="square" v-model="checked" checked-color="#26509c" icon-size="28px" direction="horizontal" class="flex justify-around w-[840px] mt-3 ">
+				<van-checkbox-group
+					shape="square"
+					v-model="checked"
+					checked-color="#26509c"
+					icon-size="28px"
+					direction="horizontal"
+					class="flex justify-around w-[840px] mt-3">
 					<van-checkbox name="a"></van-checkbox>
 					<van-checkbox name="b"></van-checkbox>
-                    <van-checkbox name="c"></van-checkbox>
+					<van-checkbox name="c"></van-checkbox>
 					<van-checkbox name="d"></van-checkbox>
 				</van-checkbox-group>
 			</section>
@@ -49,48 +57,54 @@
 					<div class="wrapper grid grid-cols-3 gap-x-3 gap-y-4">
 						<span class="self-center text-right text-primary font-medium">Z轴高度</span>
 						<input
-							type="text"
+							type="number"
+							v-model.number="dto.height"
 							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 						<span class="self-center text-primary font-medium">毫米</span>
 
 						<span class="self-center text-right text-primary font-medium">氮气流速</span>
 						<input
-							type="text"
+							type="number"
+							v-model.number="dto.nitrogenFlowVelocity"
 							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 						<span class="self-center text-primary font-medium">毫米/每秒</span>
 
 						<span class="self-center text-right text-primary font-medium">氮气气压</span>
 						<input
-							type="text"
+							type="number"
+							v-model.number="dto.nitrogenAirPressure"
 							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 						<span class="self-center text-primary font-medium">MPa≥0.35</span>
 
 						<span class="self-center text-right text-primary font-medium">基质流速</span>
 						<input
-							type="text"
+							type="number"
+							v-model.number="dto.matrixFlowVelocity"
 							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 						<span class="self-center text-primary font-medium">ul/min</span>
 
 						<span class="self-center text-right text-primary font-medium">是否加电</span>
-						<div class="flex items-center gap-x-8 col-span-2">
-							<div class="true">是</div>
-							<div class="false">否</div>
+						<div class="flex items-center justify-between">
+							<div :class="dto.needPower ? 'true' : 'false'" @click="needPower(true)">是</div>
+							<div :class="dto.needPower ? 'false' : 'true'" @click="needPower(false)">否</div>
+							<input
+								type="number"
+								v-model.number="dto.voltage"
+								class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[54px]" />
 						</div>
-						<span class="self-center text-right text-primary font-medium">喷雾电压</span>
-						<input
-							type="text"
-							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 						<span class="self-center text-primary font-medium">V</span>
 
 						<span class="self-center text-right text-primary font-medium">移动速度</span>
 						<input
-							type="text"
+							type="number"
+							v-model.number="dto.movementSpeed"
 							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 						<span class="self-center text-primary font-medium">毫米/每秒</span>
 
 						<span class="self-center text-right text-primary font-medium">行间距</span>
 						<input
-							type="text"
+							type="number"
+							v-model.number="dto.space"
 							class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 						<span class="self-center text-primary font-medium">毫米</span>
 					</div>
@@ -105,14 +119,57 @@ import route_v2 from "@/assets/route_vertical2.png";
 import route_h from "@/assets/route_horizontal.png";
 import route_h2 from "@/assets/route_horizontal2.png";
 import Spray, { type GridArea } from "@/components/Spray.vue";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
+type DTO = {
+	direction: 1 | 2;
+	space: number;
+	nitrogenFlowVelocity: number;
+	nitrogenAirPressure: number;
+	matrixFlowVelocity: number;
+	voltage: number;
+	needPower: boolean;
+	height: number;
+	movementSpeed: number;
+	position: Array<{
+		x: number;
+		y: number;
+	}>;
+};
+const dto = reactive<DTO>({
+	direction: 1,
+	space: 20,
+	nitrogenFlowVelocity: 20,
+	nitrogenAirPressure: 20,
+	matrixFlowVelocity: 220,
+	voltage: 220,
+	needPower: false,
+	height: 10,
+	movementSpeed: 20,
+	position: [
+		{ x: 10, y: 10 },
+		{ x: 20, y: 20 },
+	],
+});
 const selectedArea = ref<GridArea>();
-const checked = ref(['a', 'b']);
+const checked = ref(["a", "b"]);
 
 function onSelectArea(area: GridArea) {
 	selectedArea.value = area;
 }
+function needPower(need: boolean) {
+	dto.needPower = need;
+}
+
+function startSpray() {
+	const params = dto.needPower ? dto : { ...dto, voltage: 0 };
+	console.log(params);
+	// 调用方法
+}
+
+function stopSpray() {
+	// 调用方法
+}
 </script>
 <style lang="scss" scoped>
 :deep(.el-collapse-item__header) {