minnan-website/components/parts/IndexStats.vue

<template>
  <SimplePageContentLoader :loader="statsData">
    <div class="d-flex row">
      <div 
        class="col-12 col-md-6 col-lg-4 col-xl-4" 
        v-for="(stat,key) in statsData.content.value" 
        :key="key"
      >
        <div :class="`main-card-box type${stat.type}`">
          <div class="content">
            <h4>{{ stat.title || '\u200b' }}</h4>
            <div class="descs">
              <a 
                v-for="(data, key2) in stat.datas"
                :class="['box', {'long': data.long}]"
                :key="key2"
                :href="data.link"
              >
                <h5>{{ data.title }}</h5>
                <p>{{ data.value }}
                  <span v-if="data.valueExtra">{{ data.valueExtra }}</span>
                </p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </SimplePageContentLoader>
</template>

<script setup lang="ts">
import { GetContentListParams } from '~/api/CommonContent';
import SeminarContent from '~/api/inheritor/SeminarContent';
import UnmoveableContent from '~/api/inheritor/UnmoveableContent';
import IndexContent from '~/api/introduction/IndexContent';
import { useSSrSimpleDataLoader } from '~/composeable/SimpleDataLoader';

const router = useRouter();
const statsData = await useSSrSimpleDataLoader('stats', async () => {
  const data = (await IndexContent.getStats());
  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 1)).total;
  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 1)).total;
  
  let sumInheritor = 0;
  let sumProject = 0;
  const topLevelProject = data.ichData.find((p: any) => p.level_text == '人类非遗')?.total || 0;
  
  return [
    {
      title: '非遗代表性项目',
      type: '1',
      datas: data.ichData.filter((p: any) => [ '国家级', '省级', '市级' ].includes(p.level_text)).map((item: any) => {
        sumProject += item.total;
        return {
          title: item.level_text,
          value: item.total + ' 项',
          valueExtra: (item.level_text == '国家级' ? ` (其中${topLevelProject}项为人类非遗)` : ''),
          long: item.level_text == '国家级',
          link: router.resolve({ path: '/inheritor/projects', query: { level: item.level } }).href,
        }
      }).concat([
        {
          title: `目前厦门市非遗项目市级以上共有${sumProject}项`,
          value: '',
          long: true,
        }
      ])
    },
    {
      title: '非遗代表性传承人',
      type: '2',
      datas: data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级'/* , '区县级' */ ].includes(p.title)).map((item: any) => {
        sumInheritor += item.total;
        return {
          title: item.title,
          value: item.total,
          link: router.resolve({ path: '/inheritor/inheritor', query: { level: item.level } }).href
        }
      }).concat([
        {
          title: '',
          value: '',
        }
      ], [
        {
          title:  `目前厦门市非遗传承人市级以上共有${sumInheritor}人`,
          value: '',
          long: true,
        }
      ]),
    },
    {
      title: '其他传承项目',
      type: '1',
      datas: [
        {
          title: '传习所',
          value: semiCount,
          link: router.resolve({ path: '/inheritor/seminar' }).href,
        },
        {
          title: '传统村落',
          value: data.villageData[0]?.total ?? 0,
          link: router.resolve({ path: '/village/' }).href,
        },
        {
          title: '文物古迹',
          value: unmoveableCount,
          link: router.resolve({ path: '/inheritor/unmoveable' }).href,
        },
      ],
    },
    /*{
      title: '不可移动文物',
      type: '3',
      datas: data.crData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '闽南文化重要相关文物古迹',
      type: '2',
      datas: data.minnanCr.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '重要相关历史风貌区',
      type: '1',
      datas: data.historyData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '传习中心',
      type: '3',
      datas: data.ichCenter.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },*/
  ];
});

</script>