minnan-tv/src/views/Content/TabInherit.vue

<template>
  <SimplePageListContentLoader class="d-flex flex-col flex-fill" :loader="loader">
    <Tab 
      v-model="tab" 
      :tabs="[
        { label: '文物' },
        { label: '非遗' },
      ]" 
      autoSize
      itemWidth="100px" 
    />
    <div v-if="tab === 0" class="content flex-fill gap-s">
      <div class="round-box introduction">
        <h1>闽南建筑文化简介</h1>
        <Vue3Marquee class="introduction-content" :duration="60" vertical>
          <p>闽南建筑风格独特。闽南建筑风格以红墙、红瓦、燕尾脊为特征，给人以鲜明、热烈的视觉感受。建筑中大量使用装饰性构件，如砖雕、石雕、木雕等，这些雕刻工艺精湛，图案丰富，具有很高的艺术价值。同时，建筑内部的布局和装饰也充满了闽南文化的特色，如“出砖入石”的墙体、精细的石雕和木雕、富有地方特色的彩绘等。</p>
          <p>闽南建筑融合了多元文化。闽南地区历史上是中原移民的重要聚居地，同时又与东南亚地区交往密切，因此闽南建筑文化中融合了中原文化、东南亚文化等多元文化因素。例如，闽南建筑的屋顶形式、装饰风格等受到中原文化的影响；而建筑中的雕刻艺术、建筑材料等则体现了东南亚文化的特色。这种多元文化的融合使得闽南建筑具有更加丰富的文化内涵</p>
          <p>通过了解这些闽南建筑文物的特点，人们能够更好地认识和了解闽南文化。同时，这些文物也是传承和弘扬闽南文化的重要载体。在今天的社会中，随着城市化进程的加速和传统文化的逐渐消失，保护和传承这些宝贵的文化遗产显得尤为重要。</p>
        </Vue3Marquee>
        <div class="d-flex flex-row chart-container">
          <v-chart class="chart" :option="chartOptionCity" autoresize />
          <v-chart class="chart" :option="chartOptionRegion" autoresize />
        </div>
      </div>
      <div class="d-flex flex-col map">
        <div class="round-box box main-any-button" :tabindex="1" />
        <GridList 
          :list="loader.content.value?.list"
          item-style-type="round-box main-any-button" 
          @itemClick="handleItemClick"
        />
      </div>
    </div>
    <div v-else-if="tab === 1" class="content flex-fill">
      <div></div>
      <div class="d-flex flex-col">
        <h1>非遗传承</h1>
        <p>以“闽南人”与“闽南建筑文化”为纽带构建三种精神：闽南精神、闽台精神、海丝精神体现闽南“魂”</p>
        <div class="intangible-list">
          <div
            v-for="(value, key) in intangibleList"
            :key="key"
            :style="{ background: `url(${value.image}) center center / cover` }"
            :tabindex="1"
            class="main-any-button"
            @click="handleIntangibleClick(value)"
          >
            {{ value.title }}
          </div>
      </div>
      </div>
    </div>
  </SimplePageListContentLoader>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useRouter } from 'vue-router';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
import GridList from '@/components/small/GridList.vue';
import VChart from 'vue-echarts';
import Tab from '@/components/small/Tab.vue';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import { Vue3Marquee } from 'vue3-marquee';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import IndexContent from '@/api/introduction/IndexContent';

use([
  TitleComponent,
  CanvasRenderer,
  PieChart,
  TooltipComponent,
]);

const emit = defineEmits(['itemClick']);
const router = useRouter();
const loader = useSimpleDataLoader(async () => {

  const stats = await IndexContent.getStats();
  stats.crData.forEach((i: any) => {
    const existsItem = chartOptionCity.value.series[0].data.find((p) => p.name === i.title);
    if (existsItem)
      existsItem.value = i.total;
  });
  stats.ichData.forEach((i: any) => {
    const existsItem = chartOptionRegion.value.series[0].data.find((p) => p.name === i.title);
    if (existsItem)
      existsItem.value = i.total;
  });

  return CommonContent.getContentList(new GetContentListParams().setModelId(1), 1, 12)
});

const tab = ref(0);
const chartOptionCity = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  title: {
    text: '厦门市文物统计',
    left: 'center',
  },
  series: [
    {
      name: '厦门市文物统计',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { name: '湖里区', value: 126 },
        { name: '思明区', value: 178 },
        { name: '海沧区', value: 478 },
        { name: '鼓浪屿', value: 151 },
        { name: '集美区', value: 220 },
        { name: '同安区', value: 503 },
        { name: '翔安区', value: 365 },
      ],
      label: {
        show: true,
        formatter: '{b}: {c}'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});
const chartOptionRegion = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  title: {
    text: '厦门市非遗统计',
    left: 'center',
  },
  series: [
    {
      name: '厦门市非遗统计',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { name: '国家级', value: 48 },
        { name: '省级', value: 57 },
        { name: '市级', value: 88 },
        { name: '县级', value: 35 },
        { name: '区级', value: 54 },
      ],
      label: {
        show: true,
        formatter: '{b}: {c}'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});
const intangibleList = [
  {
    image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_1.png',
    title: '非遗项目',
    modelId: 2,
  },
  {
    image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_2.png',
    title: '传承人',
    modelId: 7,
    mainBodyColumnId: 38,
  },
  {
    image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_3.png',
    title: '非遗产品',
    modelId: 9,
  },
  {
    image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_4.png',
    title: '非遗活动',
    modelId: 18,
    mainBodyColumnId: 290,
  }
];

function handleIntangibleClick(item: any) {
  router.push({ name: 'IntangibleList', query: { 
    modelId: item.modelId,
    mainBodyColumnId: item.mainBodyColumnId,
  } });
}
function handleItemClick(item: any) {
  router.push({ name: 'ArtifactDetail', query: { id: item.id } });
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;

  > div {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;

  }
}

.round-box {
  padding: 1vw;
  border-radius: 1vw;
  box-sizing: border-box;
  border: var(--color-primary) solid 3px;
  overflow: hidden;
}
.introduction {
  background: url(https://huli-app.wenlvti.net/app_static/minnanhun/image/jzjs_bg.jpg) no-repeat center;
  background-size: cover;
  color: var(--color-text-primary);
  font-size: 0.8rem;

  .introduction-content {
    width: 100%;
    height: 50%;
  }
  .chart-container {
    position: relative;
    width: 100%;
    height: 48%;
    margin-top: 2%;
  }
  .chart {
    width: 50%;
    height: 100%;
  }
}
.map {
  position: relative;

  .box {
    width: 100%;
    height: 26%;
    background: url('@/assets/images/Inherit/map.jpg') no-repeat center;
    background-size: cover;
  }
  :deep(.grid-container) {
    height: 72%;
    margin-top: 2%;
    grid-template-rows: repeat(3, 1fr);
  }
  :deep(.round-box) {
    padding: 1vw;
    border-radius: 1vw;
    box-sizing: border-box;
    border: var(--color-primary) solid 3px;
    overflow: hidden;
  }
}
.intangible-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;

  > div {
    width: 48%;
    aspect-ratio: 3 / 1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20%;
    color: var(--color-text-primary);
  }
}

h1 {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--color-text-primary);
}
p {
  font-size: 0.8rem;
  color: var(--color-text);
}

</style>