调整喷涂参数UI,添加合法性检查

src/assets/icon_info.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" fill="none" stroke="#26509C" stroke-width="4" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 11C25.3807 11 26.5 12.1193 26.5 13.5C26.5 14.8807 25.3807 16 24 16C22.6193 16 21.5 14.8807 21.5 13.5C21.5 12.1193 22.6193 11 24 11Z" fill="#26509C"/><path d="M24.5 34V20H23.5H22.5" stroke="#26509C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 34H28" stroke="#26509C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/components/SprayParam.vue

@@ -65,15 +65,16 @@
 </template>
 
 <script setup lang="ts">
-import type { WorkType } from "@/services/globalCmd/cmdTypes";
-import { ref } from "vue";
+import { checkSprayParamValid, type WorkType } from "@/services/globalCmd/cmdTypes";
+import { ref, watch } 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";
+import { ElMessage } from "element-plus";
 
 const props = defineProps<{
-	sprayParam: WorkType;
+	sprayParam: Partial<WorkType>;
 }>();
 const emit = defineEmits<{
 	(e: "save", param: WorkType): void;
@@ -88,7 +89,21 @@ function sprayDirection(direction: "h" | "v") {
 	selectCraft.value.routeType = direction === "h" ? 1 : 2;
 }
 function onSaveClick() {
-	//TODO 合法性检查
-	emit("save", selectCraft.value);
+	const check = checkSprayParamValid(selectCraft.value);
+	if (!check[0]) {
+		ElMessage.error(check[1]);
+		return;
+	}
+	if (!selectCraft.value.needPower) {
+		selectCraft.value.voltage = 0;
+	}
+	emit("save", selectCraft.value as WorkType);
 }
+
+watch(
+	() => props.sprayParam,
+	p => {
+		selectCraft.value = p;
+	}
+);
 </script>

src/services/globalCmd/cmdTypes.ts

@@ -17,6 +17,7 @@ type PositionType = {
 	y1: number;
 	x2: number;
 	y2: number;
+	index: number;
 };
 
 export type WorkType = {
@@ -32,6 +33,31 @@ export type WorkType = {
 	position: PositionType[];
 };
 
+export function checkSprayParamValid(p: Partial<WorkType>): [boolean, string] {
+	if (typeof p.height !== "number") {
+		return [false, "请输入正确的z轴高度"];
+	}
+	if (typeof p.nitrogenAirPressure !== "number") {
+		return [false, "请输入正确的氮气气压"];
+	}
+	if (typeof p.nitrogenFlowVelocity !== "number") {
+		return [false, "请输入正确的氮气流速"];
+	}
+	if (typeof p.matrixFlowVelocity !== "number") {
+		return [false, "请输入正确的基质流速"];
+	}
+	if (typeof p.voltage !== "number") {
+		return [false, "请输入正确的喷嘴电压"];
+	}
+	if (typeof p.movementSpeed !== "number") {
+		return [false, "请输入正确的移动速度"];
+	}
+	if (typeof p.space !== "number") {
+		return [false, "请输入正确的行间距"];
+	}
+	return [true, ""];
+}
+
 export type MachineryType = {
 	axis: string;
 	position: string | number;

src/services/globalCmd/globalCmd.ts

@@ -65,7 +65,7 @@ export function rotate(params: any) {
 	return httpRequest<BaseResponse<string>>({ url: "/api/cmd/rotate", params, method: "POST" });
 }
 
-type SprayParam = {
+export type SprayParam = {
 	matrixId: number;
 	matrixCraftId: number;
 } & WorkType;

src/views/SprayView.vue

@@ -2,11 +2,42 @@
 	<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="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')" />
 				<button class="btn-dark px-8 py-2 text-lg" @click="onStartSpray">开始喷涂</button>
 				<button class="btn-light px-8 py-2 text-lg" @click="onStopSpray">停止喷涂</button>
+				<section class="flex items-center gap-3 px-4 text-base ml-auto">
+					<div class="flex items-center">
+						<span class="self-center text-right text-primary font-medium mr-3">选择基质</span>
+						<el-select v-model="selectMatrix" placeholder="Select" style="width: 120px" @change="onMatrixChange">
+							<el-option
+								v-for="item in settingStore.matrixList"
+								:key="item.id"
+								:label="item.name"
+								:value="item.id" />
+						</el-select>
+					</div>
+					<div class="flex items-center">
+						<span class="self-center text-right text-primary font-medium mr-3">工艺</span>
+						<el-select
+							:disabled="craftList.length === 0"
+							v-model="selectCraft"
+							placeholder="Select"
+							style="width: 120px"
+							@change="onCraftChange">
+							<el-option v-for="item in craftList" :key="item.id" :label="item.name" :value="item.id" />
+						</el-select>
+					</div>
+					<el-popover placement="bottom" :width="380" trigger="click">
+						<template #reference>
+							<div class="text-primary underline flex items-center gap-1">
+								<span>详细参数</span>
+								<img src="@/assets/icon_info.svg" alt="info" />
+							</div>
+						</template>
+						<template #default>
+							<SprayParam :sprayParam="selectCraft" @save="updateSprayParam" />
+						</template>
+					</el-popover>
+				</section>
 			</div>
 
 			<section class="flex flex-col items-start">
@@ -71,60 +102,13 @@
 				</van-checkbox-group>
 			</section>
 		</div>
-		<div class="shadow-card absolute top-[calc(var(--headerHeight)+16px)] right-[calc(var(--borderWidth)+20px)] w-[400px]">
-			<el-collapse accordion>
-				<el-collapse-item name="1">
-					<template #title>
-						<section class="flex items-center gap-3 px-4 text-base">
-							<div>
-								<span class="self-center text-right text-primary font-medium mr-3">选择基质</span>
-								<!-- <input
-									type="text"
-									class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" /> -->
-
-								<el-select
-									v-model="selectMatrix"
-									placeholder="Select"
-									style="width: 120px"
-									@change="onMatrixChange">
-									<el-option
-										v-for="item in settingStore.matrixList"
-										:key="item.id"
-										:label="item.name"
-										:value="item.id" />
-								</el-select>
-							</div>
-							<div>
-								<span class="self-center text-right text-primary font-medium mr-3">工艺</span>
-								<!-- <input
-									type="text"
-									class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" /> -->
-
-								<el-select
-									:disabled="craftList.length === 0"
-									v-model="selectCraft"
-									placeholder="Select"
-									style="width: 120px"
-									@change="onCraftChange">
-									<el-option v-for="item in craftList" :key="item.id" :label="item.name" :value="item.id" />
-								</el-select>
-							</div>
-						</section>
-					</template>
-					<SprayParam :sprayParam="selectCraft" @save="updateSprayParam" />
-				</el-collapse-item>
-			</el-collapse>
-		</div>
+		<!-- <SprayParam :sprayParam="selectCraft" @save="updateSprayParam" /> -->
 	</div>
 </template>
 
 <script setup lang="ts">
-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";
 import Spray, { type GridArea } from "@/components/Spray.vue";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { startSpray, stopWork } from "@/services/globalCmd/globalCmd";
 import type { WorkType } from "@/services/globalCmd/cmdTypes";
 import { ElMessage } from "element-plus";
@@ -134,20 +118,20 @@ import type { CraftItem } from "@/services/matrix/type";
 import { getListByMatrixId } from "@/services/matrix/craft";
 import SprayParam from "@/components/SprayParam.vue";
 
-const defaultCraft: CraftItem = {
+const defaultCraft: Partial<CraftItem> = {
 	id: 0,
 	name: "default",
 	matrixId: 0,
 	routeType: 1,
-	space: 20,
-	nitrogenFlowVelocity: 20,
-	nitrogenAirPressure: 20,
-	matrixFlowVelocity: 220,
-	voltage: 220,
+	space: undefined,
+	nitrogenFlowVelocity: undefined,
+	nitrogenAirPressure: undefined,
+	matrixFlowVelocity: undefined,
+	voltage: undefined,
 	needPower: false,
-	height: 10,
-	movementSpeed: 20,
-	position: [{ x1: 10, y1: 10, x2: 20, y2: 20 }],
+	height: undefined,
+	movementSpeed: undefined,
+	position: [],
 };
 
 const settingStore = useSettingStore();
@@ -157,27 +141,27 @@ const selectMatrix = ref<MatrixItem>(
 );
 
 const craftList = ref<CraftItem[]>([]);
-const selectCraft = ref<CraftItem>(defaultCraft);
+const selectCraft = ref<Partial<CraftItem>>(defaultCraft);
 
 const selectedArea = ref<GridArea>();
 const checked = ref(["a", "b"]);
 
+onMounted(() => {
+	if (settingStore.matrixList.length > 0) {
+		onMatrixChange(settingStore.matrixList[0].id);
+	}
+});
+
 function onSelectArea(area: GridArea) {
 	selectedArea.value = area;
 }
-function needPower(need: boolean) {
-	selectCraft.value.needPower = need;
-}
-function sprayDirection(direction: "h" | "v") {
-	selectCraft.value.routeType = direction === "h" ? 1 : 2;
-}
 
 function onMatrixChange(val: number) {
 	getListByMatrixId({ matrixId: val }).then(res => {
 		if (res.success) {
 			craftList.value = res.data || [];
 			if (res.data.length > 0) {
-				selectCraft.value = res.data[0];
+				selectCraft.value = { ...res.data[0], needPower: res.data[0].voltage > 0 };
 			} else {
 				selectCraft.value = defaultCraft;
 			}
@@ -199,12 +183,17 @@ function onStartSpray() {
 			y1: selectedArea.value?.yStart || 10,
 			x2: selectedArea.value?.xEnd || 20,
 			y2: selectedArea.value?.yEnd || 20,
+			index: 0,
 		},
 	];
 	const params = selectCraft.value.needPower ? selectCraft : { ...selectCraft, voltage: 0 };
 	console.log(params);
-
-	startSpray({ ...selectCraft.value, matrixCraftId: selectCraft.value.id }).then(res => {
+	//TODO 检查参数合法性
+	startSpray({
+		...(selectCraft.value as CraftItem),
+		matrixId: selectMatrix.value.id,
+		matrixCraftId: selectCraft.value.id || 0,
+	}).then(res => {
 		if (res.success) {
 		} else {
 			ElMessage.error(res.msg);
@@ -222,7 +211,7 @@ function onStopSpray() {
 }
 
 function updateSprayParam(p: WorkType) {
-	console.log(p)
+	console.log(p);
 	selectCraft.value = p as CraftItem;
 }
 </script>