Browse Source

优化提示文案

master
zhangjiming 5 months ago
parent
commit
b008ae300c
  1. 6
      src/App.vue
  2. 11
      src/components/Dialog.vue
  3. 2
      src/views/HomeView.vue
  4. 80
      src/views/PreSpray.vue

6
src/App.vue

@ -20,22 +20,19 @@ wsClient.dataOb.subscribe(data => {
} else if (data.type === "warn") {
if (data.data.code === "wash_complete") {
dialogContent.value = {
title: "提示",
desc: "清洗管道已经完成",
type: "alert",
};
showDialog.value = true;
} else if (data.data.code === "prefill_complete") {
dialogContent.value = {
title: "提示",
desc: "预充管道已经完成",
type: "alert",
};
showDialog.value = true;
} else if (data.data.code === "dehumidify_complete") {
dialogContent.value = {
title: "提示",
desc: "除湿已完成",
desc: "湿度已达到设定值,氮气已置换完毕。",
type: "confirm",
okText: "去喷涂",
_brand: "dehumidify_complete",
@ -43,7 +40,6 @@ wsClient.dataOb.subscribe(data => {
showDialog.value = true;
} else if (data.data.code === "spray_complete") {
dialogContent.value = {
title: "提示",
desc: "喷涂结束,建议回首页清洗管道",
type: "confirm",
okText: "去清洗",

11
src/components/Dialog.vue

@ -1,11 +1,11 @@
<template>
<div class="min-w-[420px] max-w-[540px] text-primary bg-white rounded-lg">
<h1 class="my-8 text-lg font-medium text-center px-8">{{ props.title || "提示" }}</h1>
<div class="text-lg px-4 text-center">
<div class="text-lg px-4 text-center whitespace-pre-wrap">
{{ props.desc }}
</div>
<footer class="flex justify-center items-center gap-6 py-10">
<button class="btn-dark px-8 py-2 text-lg min-w-[120px]" @click="$emit('onOk')">{{ okText || "" }}</button>
<button class="btn-dark px-8 py-2 text-lg min-w-[120px]" @click="$emit('onOk')">{{ okText || "" }}</button>
<button v-if="props.type === 'confirm'" class="btn-light px-8 py-2 text-lg min-w-[120px]" @click="$emit('onCancel')">
{{ cancelText || "取消" }}
</button>
@ -13,15 +13,14 @@
</div>
</template>
<script setup lang="ts">
export type DialogParam = {
title?: string; //
title?: string; //
desc: string;
type?: "alert" | "confirm"; // alert confirm
okText?: string;
cancelText?: string;
_brand?: string;
}
_brand?: string;
};
const props = defineProps<DialogParam>();
const emit = defineEmits<{
(e: "onCancel"): void;

2
src/views/HomeView.vue

@ -84,11 +84,9 @@ const router = useRouter();
const statusStore = useEquipmentStatusStore();
const dialogContent = ref<DialogParam>({
title: "提示",
desc: "确定清洗管道?",
type: "confirm",
okText: "清洗",
cancelText: "关闭",
_brand: "wash",
});

80
src/views/PreSpray.vue

@ -4,9 +4,24 @@
<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
<div class="flex items-center gap-6">
<p class="text-lg">清洗管道</p>
<button :disabled="statusStore.workStatus !== 'idle'" class="btn-dark px-8 py-2 text-lg" @click="onStartWash('injector')">清洗注射器管路</button>
<button :disabled="statusStore.workStatus !== 'idle'" class="btn-dark px-8 py-2 text-lg" @click="onStartWash('nozzle')">清洗喷涂部分</button>
<button :disabled="statusStore.workStatus !== 'washing'" class="btn-dark px-8 py-2 text-lg" @click="onStopWash">停止清洗</button>
<button
:disabled="statusStore.workStatus !== 'idle'"
class="btn-dark px-8 py-2 text-lg"
@click="onStartWash('injector')">
清洗注射器管路
</button>
<button
:disabled="statusStore.workStatus !== 'idle'"
class="btn-dark px-8 py-2 text-lg"
@click="onStartWash('nozzle')">
清洗喷涂部分
</button>
<button
:disabled="statusStore.workStatus !== 'washing'"
class="btn-dark px-8 py-2 text-lg"
@click="onStopWash">
停止清洗
</button>
</div>
</main>
<header
@ -20,8 +35,18 @@
<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
<div class="flex items-center gap-6">
<p class="text-lg">预充管道</p>
<button :disabled="statusStore.workStatus !== 'idle'" class="btn-dark px-8 py-2 text-lg" @click="onStartPrefill">开始预充</button>
<button :disabled="statusStore.workStatus !== 'prefilling'" class="btn-dark px-8 py-2 text-lg" @click="onStopPrefill">结束预充</button>
<button
:disabled="statusStore.workStatus !== 'idle'"
class="btn-dark px-8 py-2 text-lg"
@click="onStartPrefill">
开始预充
</button>
<button
:disabled="statusStore.workStatus !== 'prefilling'"
class="btn-dark px-8 py-2 text-lg"
@click="onStopPrefill">
结束预充
</button>
</div>
</main>
<header
@ -44,7 +69,12 @@
class="border-none outline-none h-[32px] w-[60px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />%RH
</p>
<button :disabled="statusStore.workStatus !== 'idle'" class="btn-dark px-8 py-2 text-lg" @click="onStartDehumidify">开始除湿</button>
<button
:disabled="statusStore.workStatus !== 'idle'"
class="btn-dark px-8 py-2 text-lg"
@click="onStartDehumidify">
开始除湿
</button>
</div>
</main>
<header
@ -118,12 +148,7 @@ const router = useRouter();
const statusStore = useEquipmentStatusStore();
const dialogContent = ref<DialogParam>({
title: "已完成",
desc: "湿度已达到50%RH,氮气已置换完毕。",
type: "confirm",
okText: "去喷涂",
cancelText: "关闭",
_brand: "humidity_complete",
desc: "描述",
});
const showDialog = ref(false);
@ -134,35 +159,30 @@ function onStartDehumidify() {
ElMessage.error("请输入要求湿度");
return;
}
startDehumidify({ humidity: humidity.value }).then(res => {
if (res.success) {
} else {
ElMessage.error(res.msg);
}
});
dialogContent.value = {
title: "已完成",
desc: "湿度已达到50%RH,氮气已置换完毕。",
desc: "请确认已关闭载物台门和注射器门",
type: "confirm",
okText: "去喷涂",
cancelText: "关闭",
_brand: "humidity_complete",
_brand: "start_dehumidify",
};
showDialog.value = true;
}
function onOk() {
showDialog.value = false;
router.push("/spray");
if (dialogContent.value._brand === "start_dehumidify") {
startDehumidify({ humidity: humidity.value! }).then(res => {
if (res.success) {
} else {
ElMessage.error(res.msg);
}
});
} else {
router.push("/spray");
}
}
function onGoSpray() {
dialogContent.value = {
title: "提示",
desc: "请确认 清洗、预充、除湿均已完成",
desc: "请确认 清洗、预充、除湿均已完成,\n且外部氮气压力大于0.35MPa",
type: "confirm",
okText: "确认",
cancelText: "取消",
_brand: "goSpray",
};
showDialog.value = true;

Loading…
Cancel
Save