diff --git a/src/components/SprayParam.vue b/src/components/SprayParam.vue
new file mode 100644
index 0000000..5d880d1
--- /dev/null
+++ b/src/components/SprayParam.vue
@@ -0,0 +1,94 @@
+<template>
+	<div class="wrapper grid grid-cols-[auto_150px_auto] gap-x-3 gap-y-4 text-base">
+		<span class="self-center text-right text-primary font-medium">喷涂路线</span>
+		<div class="flex items-center gap-x-4 col-span-2">
+			<img :src="selectCraft.routeType === 1 ? route_v : route_v2" alt="icon" @click="sprayDirection('v')" />
+			<img :src="selectCraft.routeType === 1 ? route_h2 : route_h" alt="icon" @click="sprayDirection('h')" />
+		</div>
+		<span class="self-center text-right text-primary font-medium">Z轴高度</span>
+		<input
+			type="number"
+			v-model.number="selectCraft.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="number"
+			v-model.number="selectCraft.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="number"
+			v-model.number="selectCraft.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="number"
+			v-model.number="selectCraft.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 justify-between">
+			<div :class="selectCraft.needPower ? 'true' : 'false'" @click="needPower(true)">是</div>
+			<div :class="selectCraft.needPower ? 'false' : 'true'" @click="needPower(false)">否</div>
+			<input
+				type="number"
+				v-model.number="selectCraft.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-primary font-medium">V</span>
+
+		<span class="self-center text-right text-primary font-medium">移动速度</span>
+		<input
+			type="number"
+			v-model.number="selectCraft.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="number"
+			v-model.number="selectCraft.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 class="col-span-3 flex justify-center items-center">
+			<button class="btn-dark px-10 py-2 text-base" @click="onSaveClick">保存</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { WorkType } from "@/services/globalCmd/cmdTypes";
+import { ref } from "vue";
+import route_v from "@/assets/route_vertical.png";
+import route_v2 from "@/assets/route_vertical2.png";
+import route_h from "@/assets/route_horizontal.png";
+import route_h2 from "@/assets/route_horizontal2.png";
+
+const props = defineProps<{
+	sprayParam: WorkType;
+}>();
+const emit = defineEmits<{
+	(e: "save", param: WorkType): void;
+}>();
+
+const selectCraft = ref(props.sprayParam);
+
+function needPower(need: boolean) {
+	selectCraft.value.needPower = need;
+}
+function sprayDirection(direction: "h" | "v") {
+	selectCraft.value.routeType = direction === "h" ? 1 : 2;
+}
+function onSaveClick() {
+	//TODO 合法性检查
+	emit("save", selectCraft.value);
+}
+</script>
diff --git a/src/views/SprayView.vue b/src/views/SprayView.vue
index 201fc67..1b25475 100644
--- a/src/views/SprayView.vue
+++ b/src/views/SprayView.vue
@@ -111,64 +111,7 @@
 							</div>
 						</section>
 					</template>
-					<div class="wrapper grid grid-cols-[auto_150px_auto] gap-x-3 gap-y-4 text-base">
-						<span class="self-center text-right text-primary font-medium">Z轴高度</span>
-						<input
-							type="number"
-							v-model.number="selectCraft.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="number"
-							v-model.number="selectCraft.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="number"
-							v-model.number="selectCraft.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="number"
-							v-model.number="selectCraft.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 justify-between">
-							<div :class="selectCraft.needPower ? 'true' : 'false'" @click="needPower(true)">是</div>
-							<div :class="selectCraft.needPower ? 'false' : 'true'" @click="needPower(false)">否</div>
-							<input
-								type="number"
-								v-model.number="selectCraft.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-primary font-medium">V</span>
-
-						<span class="self-center text-right text-primary font-medium">移动速度</span>
-						<input
-							type="number"
-							v-model.number="selectCraft.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="number"
-							v-model.number="selectCraft.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 class="col-span-3 flex justify-center items-center">
-							<button class="btn-dark px-10 py-2 text-base">保存</button>
-						</div>
-					</div>
+					<SprayParam :sprayParam="selectCraft" @save="updateSprayParam" />
 				</el-collapse-item>
 			</el-collapse>
 		</div>
@@ -189,6 +132,7 @@ import type { MatrixItem } from "./matrixManage/type";
 import { useSettingStore } from "@/stores/setting";
 import type { CraftItem } from "@/services/matrix/type";
 import { getListByMatrixId } from "@/services/matrix/craft";
+import SprayParam from "@/components/SprayParam.vue";
 
 const defaultCraft: CraftItem = {
 	id: 0,
@@ -276,6 +220,11 @@ function onStopSpray() {
 		}
 	});
 }
+
+function updateSprayParam(p: WorkType) {
+	console.log(p)
+	selectCraft.value = p as CraftItem;
+}
 </script>
 
 <style lang="scss" scoped>