health.admin/src/widgets/ReportAnalysisWidgetTongue.vue

<script setup lang="ts">
import type { ReportModel } from '@/model';


const props = withDefaults(defineProps<{
  dataset: ReportModel;
  title?: string;
  loading?: boolean;
}>(), {
  title: '舌象分析',
});

const openTongueAnalysis = ref(false);
const exceptionPanelKeys = ref<string[]>([]);
const exceptionData = computed(() => {
  const keys = [ 'tongueColor', 'tongueCoatingColor', 'tongueShape', 'tongueCoating', 'bodyFluid', 'sublingualVein' ];
  const data: Record<string, string>[] = [];
  for ( const key of keys ) {
    const list = props.dataset?.[ key ]?.actualList ?? [];
    for ( const item of list ) if ( item?.contrast && item.contrast !== 's' ) data.push(item);
  }
  exceptionPanelKeys.value = data.map(t => t.actualValue);
  return data;
});
</script>
<template>
  <a-card class="card" size="small" :title="props.title" :loading="props.loading">
    <a-descriptions :column="3" size="small">
      <a-descriptions-item>
        <a-image :width="200" :src="props.dataset.upImg" :preview="true" v-if="props.dataset.upImg" />
      </a-descriptions-item>
      <a-descriptions-item>
        <a-image :width="200" :src="props.dataset.downImg" :preview="true" v-if="props.dataset.downImg" />
      </a-descriptions-item>
      <a-descriptions-item v-if="props.dataset.tongueAnalysisResult">
        <div class="flex flex-col">
          {{ props.dataset.tongueAnalysisResult }}
          <a-button
            v-if="exceptionData.length" type="dashed" danger style="padding: 0;margin-top: 12px;"
            @click="openTongueAnalysis=true"
          >异常舌象分析
          </a-button>
        </div>
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions :column="3" bordered size="small">
      <a-descriptions-item style="font-size: 16px;font-weight: 600;">舌象维度</a-descriptions-item>
      <a-descriptions-item style="font-size: 16px;font-weight: 600;">检测结果</a-descriptions-item>
      <a-descriptions-item style="font-size: 16px;font-weight: 600;">标准值</a-descriptions-item>
      <template v-if="props.dataset.tongueColor?.actualList">
        <a-descriptions-item>舌色</a-descriptions-item>
        <a-descriptions-item>
            <span class="tongue-value" v-for="item in props.dataset.tongueColor.actualList" :key="item?.actualValue">
              <span>{{ item.actualValue }}</span>
              <span v-if="item.contrast !== 's'">({{ item.contrast }})</span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>{{ props.dataset.tongueColor.standardValue }}</a-descriptions-item>
      </template>
      <template v-if="props.dataset.tongueCoatingColor?.actualList">
        <a-descriptions-item>苔色</a-descriptions-item>
        <a-descriptions-item>
            <span class="tongue-value" v-for="item in props.dataset.tongueCoatingColor.actualList"
                  :key="item?.actualValue"
            >
              <span>{{ item.actualValue }}</span>
              <span v-if="item.contrast !== 's'">({{ item.contrast }})</span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>{{ props.dataset.tongueCoatingColor.standardValue }}</a-descriptions-item>
      </template>
      <template v-if="props.dataset.tongueShape?.actualList">
        <a-descriptions-item>舌形</a-descriptions-item>
        <a-descriptions-item>
            <span class="tongue-value" v-for="item in props.dataset.tongueShape.actualList" :key="item?.actualValue">
              <span>{{ item.actualValue }}</span>
              <span v-if="item.contrast !== 's'">({{ item.contrast }})</span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>{{ props.dataset.tongueShape.standardValue }}</a-descriptions-item>
      </template>
      <template v-if="props.dataset.tongueCoating?.actualList">
        <a-descriptions-item>苔质</a-descriptions-item>
        <a-descriptions-item>
            <span class="tongue-value" v-for="item in props.dataset.tongueCoating.actualList" :key="item?.actualValue">
              <span>{{ item.actualValue }}</span>
              <span v-if="item.contrast !== 's'">({{ item.contrast }})</span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>{{ props.dataset.tongueCoating.standardValue }}</a-descriptions-item>
      </template>
      <template v-if="props.dataset.bodyFluid?.actualList">
        <a-descriptions-item>津液</a-descriptions-item>
        <a-descriptions-item>
            <span class="tongue-value" v-for="item in props.dataset.bodyFluid.actualList" :key="item?.actualValue">
              <span>{{ item.actualValue }}</span>
              <span v-if="item.contrast !== 's'">({{ item.contrast }})</span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>{{ props.dataset.bodyFluid.standardValue }}</a-descriptions-item>
      </template>
      <template v-if="props.dataset.sublingualVein?.actualList">
        <a-descriptions-item>舌下</a-descriptions-item>
        <a-descriptions-item>
            <span class="" v-for="item in props.dataset.sublingualVein.actualList" :key="item?.actualValue">
              <span>{{ item.actualValue }}</span>
              <span v-if="item.contrast !== 's'">({{ item.contrast }})</span>
            </span>
        </a-descriptions-item>
        <a-descriptions-item>{{ props.dataset.sublingualVein.standardValue }}</a-descriptions-item>
      </template>
    </a-descriptions>
    <vxe-modal
      title="异常舌象分析" v-model="openTongueAnalysis"
      resize show-maximize :width="600" :height="400"
    >
      <a-collapse :bordered="false" v-model:activeKey="exceptionPanelKeys">
        <a-collapse-panel v-for="(panel, index) in exceptionData" :key="panel.actualValue" :header="panel.actualValue">
          <a-descriptions :column="1" bordered size="small" :label-style="{width: '120px',textAlign:'center' }">
            <a-descriptions-item>
              <div class="flex flex-row">
                <a-image v-if="panel.splitImage" :src="panel.splitImage" :width="200" :preview="true" />
                <a-space v-if="panel.attrs" direction="vertical">
                  <a-tag v-for="v in panel.attrs" color="#cd201f" style="margin-left: 8px;margin-right: 0;">{{ v }}
                  </a-tag>
                </a-space>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="特征">{{ panel.features }}</a-descriptions-item>
            <a-descriptions-item label="临床意义">{{ panel.clinicalSignificance }}</a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
    </vxe-modal>
  </a-card>
</template>
<style scoped lang="scss">
</style>