matrix_spraying_vue/src/views/HomeView.vue

<template>
	<main class="h-full flex justify-center items-center">
		<div class="h-[70%] w-[90%] grid grid-cols-3 grid-rows-2 gap-6 text-white">
			<div
				class="row-span-2 relative bg-[url(@/assets/entry/entry_bg1.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
				@click="onSprayEntryClick">
				<p class="text-[32px] font-semibold absolute left-6 bottom-6">喷涂设置</p>
				<img src="@/assets/entry/entry_icon_1.svg" alt="icon" class="w-[90px] absolute right-6 top-6" />
			</div>
			<div
				class="relative bg-[url(@/assets/entry/entry_bg2.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
				@click="onHistoryEntryClick">
				<p class="text-[32px] font-semibold absolute left-6 bottom-6">历史喷涂</p>
				<img src="@/assets/entry/entry_icon_2.svg" alt="icon" class="w-[50px] absolute right-6 top-6" />
			</div>
			<div
				class="relative bg-[url(@/assets/entry/entry_bg3.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
				@click="onCraftEntryClick">
				<p class="text-[32px] font-semibold absolute left-6 bottom-6">工艺管理</p>
				<img src="@/assets/entry/entry_icon_3.svg" alt="icon" class="w-[55px] absolute right-6 top-6" />
			</div>
			<div
				class="relative bg-[url(@/assets/entry/entry_bg4.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
				@click="onWashEntryClick">
				<p class="text-[32px] font-semibold absolute left-6 bottom-6">清洗管道</p>
				<img src="@/assets/entry/entry_icon_4.svg" alt="icon" class="w-[50px] absolute right-6 top-6" />
			</div>
			<div
				class="relative bg-[url(@/assets/entry/entry_bg5.svg)] bg-cover bg-center bg-no-repeat rounded-[16px]"
				@click="onInjectorEntryClick">
				<p class="text-[32px] font-semibold absolute left-6 bottom-6">基质管理</p>
				<img src="@/assets/entry/entry_icon_5.svg" alt="icon" class="w-[80px] absolute right-4 top-4" />
			</div>
		</div>
		<van-overlay v-if="showWashDialog" :show="true">
			<div class="flex justify-center items-center h-full">
				<div class="min-w-[480px] max-w-[540px] text-primary bg-white rounded-lg">
					<h1 class="my-8 text-lg font-medium text-center px-8">提示</h1>
					<div class="text-lg px-4 text-center">
						{{ statusStore.workStatus === "washing" ? "设备正在清洗中，是否停止清洗" : "请选择清洗类型：" }}
					</div>
					<footer v-if="statusStore.workStatus === 'washing'" class="flex justify-center items-center gap-6 py-10">
						<button class="btn-dark px-8 py-2 text-lg min-w-[120px]" @click="onStopWash">停止清洗</button>
						<button class="btn-light px-8 py-2 text-lg min-w-[120px]" @click="showWashDialog = false">取消</button>
					</footer>
					<footer v-else class="flex flex-col justify-center items-center gap-6 py-10">
						<button class="btn-dark px-8 py-2 text-lg min-w-[120px]" @click="onStartWash('injector')">
							清洗注射器管路
						</button>
						<button class="btn-dark px-8 py-2 text-lg min-w-[120px]" @click="onStartWash('nozzle')">
							清洗喷涂部分
						</button>

						<button class="btn-light px-8 py-2 text-lg min-w-[120px]" @click="showWashDialog = false">取消</button>
					</footer>
				</div>
			</div>
		</van-overlay>
		<van-overlay v-if="showDialog" :show="true">
			<div class="flex justify-center items-center h-full">
				<Dialog
					:title="dialogContent.title"
					:desc="dialogContent.desc"
					:type="dialogContent.type"
					:ok-text="dialogContent.okText"
					:cancel-text="dialogContent.cancelText"
					@on-ok="onOk"
					@on-cancel="showDialog = false"></Dialog>
			</div>
		</van-overlay>
	</main>
</template>

<script setup lang="ts">
import type { DialogParam } from "@/components/Dialog.vue";
import { startWash, stopWash, type WashType } from "@/services/globalCmd/globalCmd";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import Dialog from "@/components/Dialog.vue";
import { useEquipmentStatusStore } from "@/stores/equipmentStatus";

const router = useRouter();
const statusStore = useEquipmentStatusStore();

const dialogContent = ref<DialogParam>({
	title: "提示",
	desc: "确定清洗管道？",
	type: "confirm",
	okText: "清洗",
	cancelText: "关闭",
	_brand: "wash",
});

const showDialog = ref(false);
const showWashDialog = ref(false);

function onEnvironmentEntryClick() {
	router.push("/environment");
}
function onHistoryEntryClick() {
	router.push("/history");
}
function onSprayEntryClick() {
	router.push("/preSpray");
}
function onCraftEntryClick() {
	router.push("/matrixCraft");
}
function onInjectorEntryClick() {
	router.push("/matrixManage");
}
function onPrintEntryClick() {
	router.push("/print");
}
function onWashEntryClick() {
	if (statusStore.workStatus === "idle" || statusStore.workStatus === "washing") {
		showWashDialog.value = true;
	} else {
		ElMessage.warning("设备正在工作中，请稍候清洗");
	}
}
function onOk() {
	showDialog.value = false;
}
function onStartWash(type: WashType) {
	showWashDialog.value = false;
	startWash({ type }).then(res => {
		if (res.success) {
		} else {
			ElMessage.error(res.msg);
		}
	});
}
function onStopWash() {
	showWashDialog.value = false;
	stopWash({}).then(res => {
		if (res.success) {
		} else {
			ElMessage.error(res.msg);
		}
	});
}
</script>