minnan-website/src/pages/inheritor.vue

<template>
  <!-- 保护传承页 -->
  <div class="main-background main-background-type0">
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
      <Slide class="main-header-box small">
        <img src="@/assets/images/inheritor/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 数据统计 -->
    <section class="main-section main-background main-background-type2">
      <div class="content">
        <div class="title">
          <h2>数据统计</h2>
        </div>

        <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"
                      :key="key2"
                      :href="data.link"
                    >
                      <h5>{{ data.title }}</h5>
                      <p>{{ data.value }}</p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </SimplePageContentLoader>
      </div>
    </section>

    <!-- 非遗传承 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>非遗传承</h2>
        </div>
        <ThreeImageList :list="list1" />
      </div>
    </section>

    <!-- 世界文化遗产 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>世界文化遗产</h2>
        </div>
        <LeftRightBox 
          title="世界文化遗产"
          :desc="overviewsLoader.content.value?.[0]"
          :image="Image9"
          :showExpand="false"
          :rightItems="(heritageData.content.value as any)"
          :moreLink="router.resolve('/inheritor/heritage').href"
        />
      </div>
    </section>

    <!-- 重要相关文物古迹 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>重要相关文物古迹</h2>
        </div>
        <ThreeImageList :list="list2" />
      </div>
    </section>

    <!-- 历史文化街区 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>历史文化街区</h2>
        </div>
        <LeftRightBox 
          title="历史文化街区"
          :desc="overviewsLoader.content.value?.[1]"
          :image="Image11"
          :showExpand="false"
          left
          :rightItems="(areaData.content.value as any)"
          :moreLink="router.resolve('/inheritor/block').href"
        />
      </div>
    </section>

    <!-- 重要闽南记忆遗产 -->
    <section class="main-section">
      <div class="content">
        <div class="title">
          <h2>重要闽南记忆遗产</h2>
        </div>
        <LeftRightBox 
          title="重要闽南记忆遗产"
          :desc="overviewsLoader.content.value?.[3]"
          :image="Image10"
          :showExpand="false"
          :rightItems="(minnanyuLoader.content.value as any)"
          :moreLink="router.resolve('/inheritor/language').href"
        />
      </div>
    </section>

  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref } from 'vue';
import Image1 from '@/assets/images/inheritor/Image1.jpg'
import Image2 from '@/assets/images/inheritor/Image2.jpg'
import Image3 from '@/assets/images/inheritor/Image3.jpg'
import Image4 from '@/assets/images/inheritor/Image4.jpg'
import Image5 from '@/assets/images/inheritor/Image5.jpg'
import Image7 from '@/assets/images/inheritor/Image7.jpg'
import Image8 from '@/assets/images/inheritor/Image8.jpg'
import Image9 from '@/assets/images/inheritor/Image9.jpg'
import Image10 from '@/assets/images/inheritor/Image10.jpg'
import Image11 from '@/assets/images/inheritor/Image11.jpg'
import LeftRightBox from '@/components/parts/LeftRightBox.vue';
import ThreeImageList from '@/components/parts/ThreeImageList.vue';
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import CommonContent, { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import IndexContent from '@/api/introduction/IndexContent';
import SeminarContent from '@/api/inheritor/SeminarContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';

const NO_CONTENT_STRING = '';
const router = useRouter();

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}
const list1 = [
  {
    title: '非遗项目',
    desc: '让文化因传承而永存',
    image: Image1,
    link: router.resolve('/inheritor/projects').href,
  },
  {
    title: '非遗传承人',
    desc: '让文化因传承而永存',
    image: Image2,
    link: router.resolve('/inheritor/inheritor').href,
  },
  /* {
    title: '非遗作品',
    desc: '让文化因传承而永存',
    image: Image3,
    link: router.resolve('/inheritor/products').href,
  },
  {
    title: '非遗活动',
    desc: '让文化因传承而永存',
    image: Image4,
    link: router.resolve('/inheritor/activity').href,
  }, */
  {
    title: '非遗传习所',
    desc: '让文化因传承而永存',
    image: Image5,
    link: router.resolve('/inheritor/seminar').href,
  },
]
const list2 = [
  {
    title: '不可移动文物',
    desc: '让文化因传承而永存',
    image: Image7,
    link: router.resolve('/inheritor/unmoveable').href,
  },
  {
    title: '可移动文物',
    desc: '让文化因传承而永存',
    image: Image8,
    link: router.resolve('/inheritor/moveable').href,
  },
  {
    title: '',
    desc: '',
    image: '',
    link: '',
  },
]

const areaData = await useSSrSimpleDataLoader('area', async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(286)
  , 1, 6)).list.map(p => p.toJSON())
)
const heritageData = await useSSrSimpleDataLoader('heritage', async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(310)
  , 1, 6)).list.map(p => p.toJSON())
)
const blockData = await useSSrSimpleDataLoader('block', async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(286)
  , 1, 6)).list.map(p => p.toJSON())
)
const minnanyuLoader = await useSSrSimpleDataLoader('minnanyu', async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(18)
    .setMainBodyColumnId(318)
  , 1, 6)).list.map(p => p.toJSON())
)
const overviewsLoader = await useSSrSimpleDataLoader('overviews', async () => {
  return [
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(17)
        .setMainBodyColumnId(310)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(17)
        .setMainBodyColumnId(286)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(17)
        .setMainBodyColumnId(235)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(18)
        .setMainBodyColumnId(318)
    )).list[0]?.overview || NO_CONTENT_STRING,
  ]
});

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;
  
  return [
    {
      title: '非遗代表性项目',
      type: '1',
      datas: data.ichData.filter((p: any) => [ '人类非遗', '国家级', '省级', '市级' ].includes(p.level_text)).map((item: any) => {
        return {
          title: item.level_text,
          value: item.total,
          link: router.resolve({ path: '/inheritor/projects', query: { level: item.level } }).href,
        }
      })
    },
    {
      title: '非遗代表性传承人',
      type: '2',
      datas: data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级'/* , '区县级' */ ].includes(p.title)).map((item: any) => {
        return {
          title: item.title,
          value: item.total,
          link: router.resolve({ path: '/inheritor/inheritor', query: { level: item.level } }).href
        }
      })
    },
    {
      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/index' }).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
        }
      })
    },*/
  ];
});

const carousel3Config = ref({
  itemsToShow: 4,
  mouseWheel: true,
  wrapAround: true,
  autoplay: 3000,
});

onMounted(() => {
  if (window.innerWidth <= 435) {
    carousel3Config.value.itemsToShow = 1;
  } else if (window.innerWidth <= 768) {
    carousel3Config.value.itemsToShow = 2;
  } 
})



</script>

<style lang="scss">


@media (max-width: 425px) {
  
}
</style>