webview/src/components/AnalysisComponent.vue

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

type Props = AnalysisModel & { title?: string, exceptionType?: 'list' | 'group' };

const {
  title = '分析', exceptionType = 'list',
  table, result = null, cover = [],
  exception, exceptionGroup,
} = defineProps<Props>();
</script>

<template>
  <van-skeleton class="analysis" :row="5" :loading="result == null" v-if="result !== ''">
    <slot>
      <div class="card m-6 text-lg">
        <div class="card__title mb-3 text-primary text-2xl font-bold">{{ title }}</div>
        <slot name="content" :result="result" :cover="cover">
          <div class="card__content">
            <div
              class="grid grid-rows-1 gap-8"
              :class="cover?.length > 1 ? 'grid-cols-2' : 'grid-cols-1'"
              v-if="cover?.length"
            >
              <img class="m-auto w-2/4 object-contain" v-for="src in cover" :key="src" :src="src" alt="分析图像" />
            </div>
            <table class="mt-8 mb-2 w-full table-auto border border-collapse border-primary">
              <thead>
                <tr>
                  <th
                    class="py-4 px-2 text-primary border border-primary"
                    v-for="(value, i) in table?.columns"
                    :key="i"
                    v-html="value"
                  ></th>
                </tr>
              </thead>
              <tbody>
              <tr
                v-for="item in table?.data"
                :key="item.columns[0]"
                :data-exception="item.exception"
                :data-invalid="item.invalid"
              >
                <td
                    class="py-4 px-2 border border-primary text-center text-grey"
                    v-for="(value, i) in item.columns"
                    :key="i"
                    v-html="value"
                ></td>
                </tr>
              </tbody>
            </table>
          </div>
        </slot>
      </div>
      <slot name="exception">
        <div class="grid grid-rows-1 grid-cols-2 gap-8 m-6" v-if="exceptionType === 'list'">
          <div class="card text-lg" v-for="item in exception" :key="item.title">
            <div class="card__title mb-3 text-primary text-2xl font-bold">{{ item.title }}</div>
            <div class="card__content">
              <div class="flex my-6 justify-center">
                <img v-if="item.cover" class="flex-none w-2/4 object-scale-down" :src="item.cover" alt="分析异常图像" />
                <div class="flex-none ml-8">
                  <div
                    class="my-2 px-4 py-2 rounded-lg border border-primary-400 text-primary"
                    v-for="value in item.tags"
                    :key="value"
                  >
                    {{ value }}
                  </div>
                </div>
              </div>
              <div class="my-2 text-grey" v-for="description in item.descriptions" :key="description.value">
                <label>{{ description.label }}</label>
                <span v-html="description.value"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="grid grid-rows-1 grid-cols-1 gap-8 m-6" v-else-if="exceptionType === 'group'" >
          <div class="card text-lg" v-for="group in exceptionGroup" :key="group.key">
            <div class="card__content">
              <div class="flex mb-6 justify-center">
                <img v-if="group.key" class="flex-none w-2/4 max-h-[200px] object-scale-down" :src="group.key" alt="分析异常图像" />
              </div>
              <div class="my-3" v-for="item in group.exception" :key="item.title">
                <div class="card__title mb-2 text-primary text-2xl font-bold">{{ item.title }}</div>
                <div class="card__content">
                  <div class="my-2 text-grey" v-for="description in item.descriptions" :key="description.value">
                    <label>{{ description.label }}</label>
                    <span v-html="description.value"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </slot>
    </slot>
  </van-skeleton>
</template>

<style scoped lang="scss">
tr[data-exception='true'] td:nth-of-type(2) {
  color: #f87171;
}
tr[data-invalid='true'] td:nth-of-type(2) {
  color: #9ca3af;
}
</style>