matrix_spraying_vue/src/components/SprayParam.vue

<template>
	<div class="wrapper grid grid-cols-[auto_150px_auto] gap-x-3 gap-y-4 text-base">
		<slot></slot>
		<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">{{ saveTitle || "保存" }}</button>
		</div>
	</div>
</template>

<script setup lang="ts">
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: Partial<WorkType>;
	saveTitle?: string;
}>();
const emit = defineEmits<{
	(e: "save", param: WorkType): void;
}>();

const selectCraft = ref(props.sprayParam);

defineExpose({
	sprayParam: selectCraft,
});

function needPower(need: boolean) {
	selectCraft.value.needPower = need;
}
function sprayDirection(direction: "h" | "v") {
	selectCraft.value.routeType = direction === "h" ? 1 : 2;
}
function onSaveClick() {
	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>