|
@@ -0,0 +1,219 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { Notify } from '@/platform';
|
|
|
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
|
|
|
+
|
|
|
+import { useRequest } from 'alova/client';
|
|
|
+import { putPulseMethod } from '@/request/api/pulse.api';
|
|
|
+import { processMethod3 } from '@/request/api';
|
|
|
+import type { Flow } from '@/request/model';
|
|
|
+
|
|
|
+import { useVisitor } from '@/stores';
|
|
|
+
|
|
|
+import NavHomeSelect from '@/assets/images/nav-home.select.png?url';
|
|
|
+import HandLeft from '@/assets/images/pulse-hand-left.png?url';
|
|
|
+import HandRight from '@/assets/images/pulse-hand-right.png?url';
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const Visitor = useVisitor();
|
|
|
+
|
|
|
+const pending = ref(false);
|
|
|
+const finished = ref(false);
|
|
|
+const supported = ref(true);
|
|
|
+
|
|
|
+async function handle() {
|
|
|
+ if (pending.value) return;
|
|
|
+ pending.value = true;
|
|
|
+ clearInterval(timer);
|
|
|
+
|
|
|
+ const patientId = Visitor.patientId;
|
|
|
+ try {
|
|
|
+ await load();
|
|
|
+ const result = await Bridge.pulse(patientId!!);
|
|
|
+ await submit(patientId, result);
|
|
|
+ } catch (e: any) {
|
|
|
+ let message = e.message;
|
|
|
+ if (e instanceof ReferenceError) {
|
|
|
+ supported.value = false;
|
|
|
+ message = '当前环境不支持脉诊设备,请联系管理员';
|
|
|
+ }
|
|
|
+ if (!supported.value || process.value?.current?.optional) {
|
|
|
+ done.value = next.value?.optional
|
|
|
+ ? { ...next.value, countdown: 5 }
|
|
|
+ : {
|
|
|
+ title: '返回首页',
|
|
|
+ route: '/screen',
|
|
|
+ countdown: 5,
|
|
|
+ };
|
|
|
+ next.value = void 0;
|
|
|
+ start();
|
|
|
+ } else {
|
|
|
+ done.value = void 0;
|
|
|
+ message = '请再次测量脉诊';
|
|
|
+ }
|
|
|
+ Notify.warning(message);
|
|
|
+ }
|
|
|
+ pending.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+const done = shallowRef<Partial<Flow> & { countdown: number }>();
|
|
|
+const next = shallowRef<Partial<Flow>>();
|
|
|
+
|
|
|
+const {
|
|
|
+ data: process,
|
|
|
+ loading,
|
|
|
+ send: load,
|
|
|
+} = useRequest(processMethod3, { immediate: false }).onSuccess(({ data }) => {
|
|
|
+ if (data.next.route === '/screen') {
|
|
|
+ done.value = { title: '返回首页', route: '/screen', countdown: 30 };
|
|
|
+ next.value = void 0;
|
|
|
+ } else if (data.next.route === '/pulse/result') {
|
|
|
+ done.value = data.next.optional ? { title: '返回首页', route: '/screen', countdown: 10 } : void 0;
|
|
|
+ next.value = { title: data.next.title || '查看报告', route: data.next.route };
|
|
|
+ } else {
|
|
|
+ done.value = { title: data.next.title || '获取健康调理方案', route: data.next.route, countdown: 10 };
|
|
|
+ next.value = void 0;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const {
|
|
|
+ data: report,
|
|
|
+ loading: submitting,
|
|
|
+ send: submit,
|
|
|
+} = useRequest((id, result) => putPulseMethod(id, result), { immediate: false }).onSuccess(() => {
|
|
|
+ finished.value = true;
|
|
|
+ start();
|
|
|
+});
|
|
|
+
|
|
|
+let timer: ReturnType<typeof setInterval>;
|
|
|
+const countdown = ref(5);
|
|
|
+
|
|
|
+function start(value?: number) {
|
|
|
+ if (!done.value) return;
|
|
|
+ countdown.value = value ?? done.value.countdown ?? 3;
|
|
|
+ timer = setInterval(() => {
|
|
|
+ const _countdown = countdown.value - 1;
|
|
|
+ if (_countdown <= 0) {
|
|
|
+ replace(done.value?.route);
|
|
|
+ } else {
|
|
|
+ countdown.value = _countdown;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+}
|
|
|
+
|
|
|
+function replace(path: string = '/screen') {
|
|
|
+ return router.replace({ path });
|
|
|
+}
|
|
|
+
|
|
|
+tryOnMounted(() => {
|
|
|
+ setTimeout(() => handle(), 300);
|
|
|
+});
|
|
|
+tryOnUnmounted(() => {
|
|
|
+ clearInterval(timer);
|
|
|
+});
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="page-header flex py-4 px-4">
|
|
|
+ <div class="grow shrink-0 h-full min-w-16"></div>
|
|
|
+ <div class="grow-[3] shrink mx-2 flex flex-col justify-center overflow-hidden">
|
|
|
+ <div class="font-bold text-3xl text-nowrap text-center tracking-wide overflow-ellipsis overflow-hidden">
|
|
|
+ {{ finished ? '完成脉诊采集' : '脉诊采集' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="grow shrink-0 h-full min-w-16 flex items-center justify-end overflow-hidden">
|
|
|
+ <router-link :to="{ path: '/screen' }" replace>
|
|
|
+ <img class="size-8 object-scale-down" :src="NavHomeSelect" alt="返回首页" />
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page-content flex flex-col">
|
|
|
+ <header></header>
|
|
|
+ <main class="flex flex-col justify-evenly px-24">
|
|
|
+ <template v-if="finished && report">
|
|
|
+ <img class="size-40 mx-auto" src="@/assets/images/tips.png" alt="" />
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl text-center">恭喜您!</div>
|
|
|
+ <div class="text-3xl text-center my-8">完成脉诊采集</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="report">
|
|
|
+ <div v-if="report.summaryLabel" class="flex justify-evenly">
|
|
|
+ <div v-if="report.summaryLabel?.left" class="flex flex-row-reverse justify-center">
|
|
|
+ <img :src="HandLeft" alt="左手" />
|
|
|
+ <div class="flex flex-col justify-evenly translate-y-28 h-40 text-2xl">
|
|
|
+ <div>
|
|
|
+ 寸:<span style="letter-spacing: 10px">{{ report.summaryLabel.left.cun }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 关:<span style="letter-spacing: 10px">{{ report.summaryLabel.left.guan }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 尺:<span style="letter-spacing: 10px">{{ report.summaryLabel.left.chi }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="report.summaryLabel?.right">
|
|
|
+ <div class="flex justify-center">
|
|
|
+ <img :src="HandRight" alt="右手" />
|
|
|
+ <div class="flex flex-col justify-evenly translate-y-28 h-40 text-2xl">
|
|
|
+ <div>
|
|
|
+ 寸:<span style="letter-spacing: 10px">{{ report.summaryLabel.right.cun }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 关:<span style="letter-spacing: 10px">{{ report.summaryLabel.right.guan }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 尺:<span style="letter-spacing: 10px">{{ report.summaryLabel.right.chi }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p v-if="report.results" class="text-3xl text-center">
|
|
|
+ 总体脉象:<span class="text-primary-400" style="letter-spacing: 10px">{{ report.results }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </main>
|
|
|
+ <footer class="flex flex-col justify-center items-center">
|
|
|
+ <van-button
|
|
|
+ v-if="!pending && finished && next"
|
|
|
+ class="decorate !text-xl !text-primary-400"
|
|
|
+ @click="replace(next.route)"
|
|
|
+ >
|
|
|
+ {{ next.title }}
|
|
|
+ </van-button>
|
|
|
+ <van-button
|
|
|
+ v-if="!pending && done"
|
|
|
+ class="decorate !text-xl !text-primary-400 !mb-6"
|
|
|
+ @click="replace(done.route)"
|
|
|
+ >
|
|
|
+ {{ done.title }}({{ countdown }})
|
|
|
+ </van-button>
|
|
|
+ <div v-if="supported && !finished" class="van-button decorate" @click="handle()">
|
|
|
+ <div class="van-button__content">
|
|
|
+ <van-loading v-if="loading || pending || submitting" />
|
|
|
+ <span v-else class="van-button__text">连接脉诊</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style scoped lang="scss">
|
|
|
+header {
|
|
|
+ flex: 1 1 10%;
|
|
|
+}
|
|
|
+
|
|
|
+footer {
|
|
|
+ flex: 1 1 30%;
|
|
|
+}
|
|
|
+
|
|
|
+main {
|
|
|
+ position: relative;
|
|
|
+ flex: 1 1 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.decorate {
|
|
|
+ margin: 24px 0;
|
|
|
+}
|
|
|
+</style>
|