健康分析报告页 因设备性能问题禁止同时展示左右手脉象3D图

src/components/AnalysisPulseComponent.vue

@@ -10,6 +10,7 @@ import { getURLSearchParamsByUrl } from '@/tools';
 import HandLeft from '@/assets/images/pulse-hand-left.png?url';
 import HandRight from '@/assets/images/pulse-hand-right.png?url';
 import { useVisitor } from '@/stores';
+import { Toast } from '@/platform';
 
 type Props = Partial<SimplePulseModel> & { title?: string; results?: string; disabled?: boolean; simple?: boolean };
 
@@ -116,18 +117,33 @@ const load = async (panel: 'left' | 'right' | boolean = true, simple = false) =>
     }
   }
 };
+
+const panelWrapperRef = useTemplateRef('panel-wrapper-ref');
 const open = async (panel?: 'left' | 'right', scroll = true) => {
   if (disabled) return;
 
+  toast = Toast.loading(500);
   await load(panel);
-  if (scroll) getHeightAndScrollTop();
-  else {
+  if (scroll) {
+    const last = panelConfig.height;
+    getHeightAndScrollTop();
+    if (last === panelConfig.height) {
+      const el = panelWrapperRef.value?.$el?.querySelector(`.van-floating-panel__content`);
+      el.scroll({ top: 0, behavior: 'smooth' });
+      console.log(panelWrapperRef.value.$el);
+    }
+  } else {
     const height = window.innerHeight * 0.8;
     panelConfig.anchors = [0, height];
     panelConfig.height = height;
   }
 };
 
+let toast;
+function iframeLoaded() {
+  toast?.close();
+}
+
 tryOnMounted(() => {
   if (!slots.exception) load(false, simple);
   preview.clickMainPanelPreviewable = !!slots.exception;
@@ -146,7 +162,7 @@ watchPostEffect(() => {
 <template>
   <van-skeleton class="analysis" :row="5" :loading="report?.results == null" v-if="report?.results !== ''">
     <PreviewSlot v-slot="{ src }">
-      <iframe v-if="src" :src="src" :class="{ simple: !src.includes('Hand=true') }"></iframe>
+      <iframe v-if="src" :src="src" :class="{ simple: !src.includes('Hand=true') }" @load="iframeLoaded()"></iframe>
     </PreviewSlot>
     <slot>
       <div ref="card" class="card m-6 text-lg" @click="panelConfig.height = 0">
@@ -154,7 +170,7 @@ watchPostEffect(() => {
         <slot name="content" :report="report">
           <div class="card__content">
             <div v-if="report?.summaryLabel" class="flex justify-evenly">
-              <div v-if="report?.summaryLabel?.left" class="flex flex-row-reverse justify-center" @click.stop="preview.clickMainPanelPreviewable && open('left')">
+              <div v-if="report?.summaryLabel?.left" class="part flex flex-row-reverse justify-center" @click.stop="preview.clickMainPanelPreviewable && open('left')">
                 <img style="width: 100px; height: 200px" :src="HandLeft" alt="左手" />
                 <div class="flex flex-col justify-evenly translate-y-2 h-40 text-xl" :class="{ highlight: preview.showLeftPanel }">
                   <div>寸：<span style="letter-spacing: 4px">{{ report.summaryLabel.left.cun }}</span></div>
@@ -162,14 +178,16 @@ watchPostEffect(() => {
                   <div>尺：<span style="letter-spacing: 4px">{{ report.summaryLabel.left.chi }}</span>
                   </div>
                 </div>
+                <div v-if="!disabled && preview.clickMainPanelPreviewable" class="absolute bottom-2 text-primary text-sm">查看脉象详情</div>
               </div>
-              <div v-if="report?.summaryLabel?.right" class="flex justify-center" @click.stop="preview.clickMainPanelPreviewable && open('right')">
+              <div v-if="report?.summaryLabel?.right" class="part flex justify-center" @click.stop="preview.clickMainPanelPreviewable && open('right')">
                 <img style="width: 100px; height: 200px" :src="HandRight" alt="右手" />
                 <div class="flex flex-col justify-evenly translate-y-2 h-40 text-xl" :class="{ highlight: preview.showRightPanel }">
                   <div>寸：<span style="letter-spacing: 4px">{{ report.summaryLabel.right.cun }}</span></div>
                   <div>关：<span style="letter-spacing: 4px">{{ report.summaryLabel.right.guan }}</span></div>
                   <div>尺：<span style="letter-spacing: 4px">{{ report.summaryLabel.right.chi }}</span></div>
                 </div>
+                <div v-if="!disabled && preview.clickMainPanelPreviewable" class="absolute bottom-2 text-primary text-sm">查看脉象详情</div>
               </div>
             </div>
             <p v-if="report?.results" class="text-2xl text-center" @click.stop="preview.clickMainPanelPreviewable && open()">
@@ -201,7 +219,7 @@ watchPostEffect(() => {
         </div>
       </slot>
     </slot>
-    <van-floating-panel class="pulse-info-panel" :content-draggable="false" :lock-scroll="true" :anchors="panelConfig.anchors" v-model:height="panelConfig.height">
+    <van-floating-panel ref="panel-wrapper-ref" class="pulse-info-panel" :content-draggable="false" :lock-scroll="true" :anchors="panelConfig.anchors" v-model:height="panelConfig.height">
       <template #header>
         <div class="van-floating-panel__header !justify-between">
           <div></div>
@@ -209,11 +227,11 @@ watchPostEffect(() => {
           <van-icon class="pr-2" name="cross" @click="panelConfig.height = 0" />
         </div>
       </template>
-      <div class="area" :class="{ last: !preview.showRightPanel }" v-if="report?.summaryLabel?.left" v-show="preview.showLeftPanel">
+      <div class="area" :class="{ last: !preview.showRightPanel }" v-if="preview.showLeftPanel && report?.summaryLabel?.left">
         <div class="title">左手脉象: {{ report.summaryLabel.left.summary?.join('、') }}</div>
         <ReusePreview :src="preview.leftPanelUrl"></ReusePreview>
       </div>
-      <div class="area" v-if="report?.summaryLabel?.right" v-show="preview.showRightPanel">
+      <div class="area" v-if="preview.showRightPanel && report?.summaryLabel?.right">
         <div class="title">右手脉象: {{ report.summaryLabel.right.summary?.join('、') }}</div>
         <ReusePreview :src="preview.rightPanelUrl"></ReusePreview>
       </div>
@@ -222,8 +240,15 @@ watchPostEffect(() => {
 </template>
 
 <style scoped lang="scss">
+.part {
+  position: relative;
+  width: 50%;
+}
 .highlight {
   color: rgb(52 167 107 / var(--tw-text-opacity, 1));
+  & + div {
+    opacity: 0.5;
+  }
 }
 
 $h: 1660px;

src/modules/report/report.page.vue

@@ -6,13 +6,14 @@ import NavScheme         from '@/assets/images/nav-scheme.png?url';
 
 import PhysiqueChart                           from '@/modules/report/PhysiqueChart.vue';
 import SyndromeChart                           from '@/modules/report/SyndromeChart.vue';
-import { Notify, Toast } from '@/platform';
+import { Notify, platformIsAIO, Toast } from '@/platform';
 import { getReportMethod, updateReportMethod } from '@/request/api';
 
 import { useRouteParams }         from '@vueuse/router';
 import { useRequest, useWatcher } from 'alova/client';
 import { useRouter }              from 'vue-router';
 
+const hidePulseExceptionTemplate = computed(() => platformIsAIO())
 
 const id = useRouteParams<string>('id');
 const { data, loading } = useWatcher(() => getReportMethod(id.value), [ id ], {
@@ -182,7 +183,9 @@ const scrollable = computed(() => !data.value.payLock &&
             </template>
             <template #exception><div><!--空占位符--></div></template>
           </AnalysisComponent>
-          <AnalysisPulseComponent title="脉象分析" v-bind="data.pulse" simple></AnalysisPulseComponent>
+          <AnalysisPulseComponent title="脉象分析" v-bind="data.pulse" simple>
+            <template #exception v-if="hidePulseExceptionTemplate"><div><!--空占位符--></div></template>
+          </AnalysisPulseComponent>
           <div class="card m-6 text-lg" v-if="data['中医证素']?.length">
             <div class="card__title mb-3 text-primary text-2xl font-bold">中医证素</div>
             <div class="card__content">

src/request/model/analysis.model.ts

@@ -18,7 +18,7 @@ export function fromAnalysisModel(
       return fromPulseAnalysisModel(data);
   }
 
-  const group = groupBy<AnalysisException>(model.exception, (item) => item.cover ?? '');
+  const group = groupBy<AnalysisException>(model.exception, (item) => item.cover ?? '') ?? {};
   model.exceptionGroup = Object.entries(group).map(([key, exception]) => ({ key, exception }));
   return model;
 }