minnan/src/pages/blocks/StatsBlock.vue

<template>
  <!-- 数据统计 -->
  <SimplePageContentLoader :loader="statsLoader">
    <view v-if="statsLoader.content.value" class="d-flex flex-col justify-center mt-3 pt-3 pb-3 bg-light-page radius-base">
      <view class="d-flex flex-col">
        <StatsText
          :title="statsLoader.content.value[0].title" 
          :data="statsLoader.content.value[0].datas" 
          :type="statsLoader.content.value[0].type" 
        />
        <view class="p-2">
          <HorizontalScrollText :text="statsText1" :fontSize="26" color="text.second" :outerStyle="{ height: '40rpx' }" />
        </view>
      </view>
      <view class="border-top-light-primary pt-2 mt-3"></view>
      <view class="d-flex flex-col">
        <StatsText
          :title="statsLoader.content.value[1].title" 
          :data="statsLoader.content.value[1].datas" 
          :type="statsLoader.content.value[1].type" 
        />
        <view class="p-2">
          <HorizontalScrollText :text="statsText2" :fontSize="26" color="text.second" :outerStyle="{ height: '40rpx' }" />
        </view>
      </view>
      <view class="border-top-light-primary pt-2 mt-3"></view>
      <StatsText
        :title="statsLoader.content.value[2].title" 
        :data="statsLoader.content.value[2].datas" 
        :type="statsLoader.content.value[2].type" 
      />
      <view class="border-top-light-primary pt-2 mt-3"></view>
      <StatsText
        :title="statsLoader.content.value[3].title" 
        :data="statsLoader.content.value[3].datas" 
        :type="statsLoader.content.value[3].type" 
      />
      <view class="border-top-light-primary pt-2 mt-3"></view>
      <StatsText
        :title="statsLoader.content.value[4].title" 
        :data="statsLoader.content.value[4].datas" 
        :type="statsLoader.content.value[4].type" 
      />
    </view>
  </SimplePageContentLoader>
</template>

<script setup lang="ts">
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { navTo } from '@/components/utils/PageAction';
import { ref } from 'vue';
import { navCommonList } from '../article/common/CommonContent';
import type { StatsTextItem } from '../parts/StatsText.vue';
import type { IHomeCommonCategoryBlockStatsProps } from '../article/data/CommonCategoryDefine';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import StatsText from '../parts/StatsText.vue';
import HorizontalScrollText from '@/components/typography/HorizontalScrollText.vue';
import IndexContent from '@/api/introduction/IndexContent';

const props = defineProps<IHomeCommonCategoryBlockStatsProps>()

const statsText1 = ref('');
const statsText2 = ref('');
const statsLoader = useSimpleDataLoader(async () => {
  const data = (await IndexContent.getStats());

  let sumInheritor = 0;
  let sumProject = 0;
  const topLevelProject = data.ichData.find((p: any) => p.level_text == '人类非遗')?.total || 0;
  const secondLevelProject = data.ichData.find((p: any) => p.level_text == '国家级')?.total || 0;
  const thirdLevelProject = data.ichData.find((p: any) => p.level_text == '省级')?.total || 0;
  const forthLevelProject = data.ichData.find((p: any) => p.level_text == '市级')?.total || 0;

  const topLevelInheritor = data.inheritorData.find((p: any) => p.level_text == '国家级')?.total || 0;
  const secondLevelInheritor = data.inheritorData.find((p: any) => p.level_text == '省级')?.total || 0;
  const thirdLevelInheritor = data.inheritorData.find((p: any) => p.level_text == '市级')?.total || 0;

  const projects = (data.ichData as any[]).filter((p: any) => [ '人类非遗', '国家级', '省级', '市级' ].includes(p.level_text)).map((item: any) => {
    if (item.level_text != '人类非遗')
      sumProject += item.total;
    return {
      title: item.level_text,
      value: item.total,
      titleSuffix: '项',
      type: 'forth',
      onClick: () => navTo('/pages/article/data/list', { pageConfigName: 'intangible', tab: 0, level: item.level }),
    } as StatsTextItem
  });
  const inheritors = data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级' ].includes(p.title)).map((item: any) => {
    sumInheritor += item.total;
    return {
      title: item.title,
      value: item.total,
      titleSuffix: '人',
      type: 'normal',
      onClick: () => navTo('/pages/inhert/inheritor/list', { level: item.level }),
    }
  });

  statsText1.value = `目前厦门市非遗项目市级以上共有 ${sumProject} 项，其中：国家级 ${secondLevelProject} 项（含 ${topLevelProject} 项为人类非遗）、省级 ${thirdLevelProject} 项、市级 ${forthLevelProject} 项。`;
  statsText2.value = `目前厦门市非遗传承人市级以上共有 ${sumInheritor} 人，其中：国家级 ${topLevelInheritor} 人、省级 ${secondLevelInheritor} 人、市级 ${thirdLevelInheritor} 人。`;

  const dataMap  = {
    projects,
    inheritors,
    ichCenter: data.ichCenter.map((item: any) => {
      return {
        title: item.title,
        value: item.total,
        titleSuffix: '处',
        type: 'normal',
        onClick: () => navTo('/pages/article/data/list', { pageConfigName: 'seminar', tab: 0, region: item.id }),
      }
    }),
    historyData: data.historyData.map((item: any) => {
      return {
        title: item.title,
        value: item.total,
        titleSuffix: '处',
        onClick: () => {
          switch (item.title) {
            case '世界文化遗产':
              navCommonList({
                title: '世界文化遗产',
                modelId: 17,
                mainBodyColumnId: 310
              });
              break;
            case '传统村落':
              navTo('/pages/inhert/village/list');
              break;
            case '重点区域':
              navCommonList({
                title: '重点区域',
                modelId: 17,
                mainBodyColumnId: 283
              });
              break;
          }
        },
      }
    }),
    minnanCr: data.minnanCr.map((item: any) => {
      return {
        title: item.title,
        value: item.total,
        titleSuffix: '处',
        onClick: () => navTo('/pages/inhert/artifact/list', {
          level: item.level
        }),
      }
    }),
  } as Record<string, StatsTextItem[]>;

  return props.statsNameConfig.map((item: any) => {
    return {
      ...item,
      datas: dataMap[item.name],
    }
  });
});

</script>