Просмотр исходного кода

📦 修改首页高度,数据统计,传承栏目错误,增加闽南语,村落筛选

imengyu недель назад: 4
Родитель
Сommit
37afba6c1c

+ 2 - 1
src/api/village/VillageApi.ts

@@ -72,8 +72,9 @@ export class VillageApi extends AppServerRequestModule<DataModel> {
     super();
   }
 
-  async getVillageList() {
+  async getVillageList(level?: number) {
     return (this.get('/village/village/getList', '村落列表', {
+      history_level: level,
     })) 
       .then(res => transformArrayDataModel<VillageListItem>(VillageListItem, res.data2, `村落`, true))
       .catch(e => { throw e });

+ 4 - 2
src/assets/scss/news.scss

@@ -300,7 +300,7 @@
     .entry {
       display: flex;
       flex-direction: row;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       width: 50%;
 
       &.hidden {
@@ -313,6 +313,7 @@
       }
       .value {
         color: $text-color;
+        text-align: right;
       }
     }
 
@@ -330,7 +331,8 @@
 
     img {
       width: 100%;
-      height: 50vh;
+      height: 30vh;
+      max-height: 250px;
       object-fit: contain;
       background-color: $border-split-color;
     }

+ 4 - 0
src/components/content/CommonListBlock.vue

@@ -73,6 +73,7 @@
                 <div
                   v-for="(tag, k) in item.bottomTags"
                   :key="k"
+                  :class="tag ? '' : 'd-none'"
                 >{{ tag }}</div>
               </div>
               <div v-if="item.addItems" class="extra">
@@ -274,6 +275,9 @@ const newsLoader = useSimplePagerDataLoader(props.pageSize, (page, size) => prop
 //子分类
 const selectedTag = ref(props.defaultSelectTag);
 
+watch(() => props.defaultSelectTag, (v) => {
+  selectedTag.value = v;
+})
 watch(() => props.dropDownNames, () => {
   loadDropValues();
 })

+ 10 - 0
src/router/index.ts

@@ -214,6 +214,16 @@ const router = createRouter({
       component: () => import('../views/inheritor/heritage.vue'),
     },
     {
+      path: '/inheritor/block',
+      name: 'InheritorBlock',
+      component: () => import('../views/inheritor/block.vue'),
+    },
+    {
+      path: '/inheritor/language',
+      name: 'InheritorLanguage',
+      component: () => import('../views/inheritor/language.vue'),
+    },
+    {
       path: '/inheritor/artifact-detail',
       name: 'artifact-detail',
       component: () => import('../views/details/ArtifactDetailView.vue'),

+ 4 - 4
src/views/HomeView.vue

@@ -2,11 +2,11 @@
   <!-- 首页 -->
   <div class="main-background">
     <!-- 轮播 -->
-    <Carousel v-bind="carouselConfig" class="main-header-box carousel-light">
+    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
       <Slide 
         v-for="(item, key) in bannerData.content.value"
         :key="key"
-        class="main-header-box"
+        class="main-header-box small"
       >
         <img :src="item.image" />
         <div class="d-flex flex-row main-center-text">
@@ -274,8 +274,8 @@ const newsData = useSimpleDataLoader<GetContentListItem[]>(async () => {
 });
 const statsData = useSimpleDataLoader(async () => {
   const data = (await IndexContent.getStats());
-  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 6)).total;
-  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 6)).total;
+  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 1)).total;
+  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 1)).total;
   
   return [
     {

+ 82 - 57
src/views/InheritorView.vue

@@ -13,19 +13,33 @@
     </Carousel>
 
     <!-- 数据统计 -->
-    <section class="main-section pb-0">
+    <section class="main-section main-background main-background-type2">
       <div class="content">
         <div class="title">
           <h2>数据统计</h2>
         </div>
 
         <SimplePageContentLoader :loader="statsData">
-          <div v-for="(stat,key) in statsData.content.value" :key="key" class="main-stats">
-            <h4>{{ stat.title }}</h4>
-            <div class="descs">
-              <div v-for="(data, key2) in stat.datas" :key="key2" @click="data.onClick">
-                <h5>{{ data.value }}</h5>
-                <p>{{ data.title }}</p>
+          <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 }}</h4>
+                  <div class="descs">
+                    <div 
+                      v-for="(data, key2) in stat.datas"
+                      :key="key2"
+                      @click="data.onClick"
+                    >
+                      <h5>{{ data.title }}</h5>
+                      <p>{{ data.value }}</p>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -43,11 +57,11 @@
       </div>
     </section>
 
-    <!-- 文物保护 -->
+    <!-- 重要相关文物古迹 -->
     <section class="main-section pb-0">
       <div class="content">
         <div class="title">
-          <h2>文物保护</h2>
+          <h2>重要相关文物古迹</h2>
         </div>
         <ThreeImageList :list="list2" />
       </div>
@@ -71,56 +85,38 @@
       </div>
     </section>
 
-    <!-- 重要相关文物古迹 -->
+    <!-- 历史文化街区 -->
     <section class="main-section pb-0">
       <div class="content">
         <div class="title">
-          <h2>重要相关文物古迹</h2>
+          <h2>历史文化街区</h2>
         </div>
         <LeftRightBox 
-          title="重要相关文物古迹"
+          title="历史文化街区"
           :desc="overviewsLoader.content.value?.[1]"
           :image="Image11"
           :showExpand="false"
           left
           :rightItems="areaData.content.value"
           @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
-          @moreClick="navTo('/inheritor/area')"
+          @moreClick="navTo('/inheritor/block')"
         />
       </div>
     </section>
 
-    <!-- 历史文化街区 -->
-    <section class="main-section pb-0">
+    <!-- 闽南语 -->
+    <section class="main-section">
       <div class="content">
         <div class="title">
-          <h2>历史文化街区</h2>
+          <h2>闽南语</h2>
         </div>
         <LeftRightBox 
-          title="历史文化街区"
-          :desc="overviewsLoader.content.value?.[2]"
+          title="闽南语"
           :image="Image10"
           :showExpand="false"
-          :rightItems="blockData.content.value"
+          :rightItems="minnanyuLoader.content.value"
           @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
-          @moreClick="navTo('/village/index')"
-        />
-      </div>
-    </section>
-
-
-
-    <!-- 申报入口 -->
-    <section class="main-section">
-      <div class="content">
-        <div class="title">
-          <h2>申报入口</h2>
-        </div>
-        <img
-          class="main-clickable mt-4 w-100"
-          src="@/assets/images/inheritor/SubmitButton.png"
-          alt="申报入口按钮"
-          @click="navTo('/inheritor/submit')"
+          @moreClick="navTo('/inheritor/language')"
         />
       </div>
     </section>
@@ -147,9 +143,11 @@ import { usePageAction } from '@/composeable/PageAction';
 import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
 import CommonContent, { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
 import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
-import { NO_CONTENT_STRING } from '@/common/ConstStrings';
 import IndexContent from '@/api/introduction/IndexContent';
+import SeminarContent from '@/api/inheritor/SeminarContent';
+import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
 
+const NO_CONTENT_STRING = '';
 const { navTo } = usePageAction();
 
 const carouselConfig = {
@@ -232,6 +230,12 @@ const blockData = useSimpleDataLoader(async () =>
     .setMainBodyColumnId(286)
   , 1, 6)).list
 )
+const minnanyuLoader = useSimpleDataLoader(async () => 
+ (await CommonContent.getContentList(new GetContentListParams()
+    .setModelId(5)
+    .setMainBodyColumnId([257,235,237,210])
+  , 1, 6)).list
+)
 const overviewsLoader = useSimpleDataLoader(async () => {
   return [
     (await IndexContent.getColumList(
@@ -252,27 +256,11 @@ const overviewsLoader = useSimpleDataLoader(async () => {
   ]
 });
 
-
-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;
-  } 
-})
-
-
 const statsData = useSimpleDataLoader(async () => {
   const data = (await IndexContent.getStats());
-  console.log(data);
-  
+  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 1)).total;
+  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 1)).total;
+
   return [
     {
       title: '非遗项目',
@@ -300,6 +288,26 @@ const statsData = useSimpleDataLoader(async () => {
         }
       })
     },
+    {
+      type: '1',
+      datas: [
+        {
+          title: '传习所',
+          value: semiCount,
+          onClick: () => navTo('/inheritor/seminar'),
+        },
+        {
+          title: '传统村落',
+          value: data.villageData[0].total,
+          onClick: () => navTo('/village/index'),
+        },
+        {
+          title: '文物古迹',
+          value: unmoveableCount,
+          onClick: () => navTo('/inheritor/unmoveable'),
+        },
+      ],
+    },
     /* {
       title: '不可移动文物',
       type: '3',
@@ -344,6 +352,23 @@ const statsData = useSimpleDataLoader(async () => {
 
 });
 
+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">

+ 7 - 4
src/views/NewsView.vue

@@ -121,10 +121,13 @@ const regionData = ref([
 ]);
 
 const newsLoader = useSimplePagerDataLoader(10, async (page, pageSize) => {
-  const res = await NewsIndexContent.getContentList(new GetContentListParams().setSelfValues({
-    keywords: searchValue.value,
-    region: searchRegion.value === 0 ? undefined : searchRegion.value,
-  }), page, pageSize);
+  const res = await NewsIndexContent.getContentList(new GetContentListParams()
+    .setMainBodyColumnId([ 228, 298, 299 ])
+    .setKeywords(searchValue.value)
+    .setSelfValues({
+      region: searchRegion.value === 0 ? undefined : searchRegion.value,
+    })
+  , page, pageSize);
   return {
     data: res.list,
     total: res.total,

+ 48 - 0
src/views/inheritor/block.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- 文化传承 - 历史文化街区 -->
+  <CommonListPage
+    :title="'历史文化街区'"
+    :prevPage="{ title: '文化传承' }"
+    :dropDownNames="[]"
+    :showSearch="true"
+    :pageSize="8"
+    :load="loadData"
+    :detailsParams="{ modelId: 17 }"
+  />
+</template>
+
+<script setup lang="ts">
+import CommonContent, { GetContentListParams } from '@/api/CommonContent';
+
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await CommonContent.getContentList(new GetContentListParams()
+    .setKeywords(searchText)
+    .setModelId(17)
+    .setMainBodyColumnId(286)
+  , page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+</script>
+
+<style>
+</style>
+

+ 52 - 0
src/views/inheritor/language.vue

@@ -0,0 +1,52 @@
+<template>
+  <!-- 文化传承 - 闽南语 -->
+  <CommonListPage
+    :title="'闽南语'"
+    :prevPage="{ title: '文化传承' }"
+    :dropDownNames="[]"
+    :showSearch="true"
+    :pageSize="8"
+    :load="loadData"
+    :loadDetail="loadDetail"
+  />
+</template>
+
+<script setup lang="ts">
+import { GetContentListParams } from '@/api/CommonContent';
+import LanguageContent from '@/api/introduction/LanguageContent';
+
+async function loadDetail(id: number, item: any) {
+  return await LanguageContent.getContentDetail(id);
+}
+async function loadData(
+  page: number, 
+  pageSize: number,
+  selectedTag: number,
+  searchText: string,
+  dropDownValues: number[]
+) {
+
+  const res = await LanguageContent.getContentList(new GetContentListParams()
+    .setMainBodyColumnId([257,235,237,210])
+    .setModelId(5)
+    .setKeywords(searchText)
+  , page, pageSize);
+
+  return { 
+    page: page,
+    total: res.total,
+    data: res.list.map((item, index) => {
+      return {
+        id: item.id,
+        title: item.title,
+        desc: item.desc,
+        image: item.image,
+      };
+    }),
+  }
+}
+</script>
+
+<style>
+</style>
+

+ 60 - 47
src/views/village/detail.vue

@@ -1,56 +1,65 @@
 <template>
   <div class="d-flex flex-column village-details">
-    <!-- 轮播图 -->
-    <ImageSwiper
-      v-if="data.images && data.images.length > 0"
-      :items="data.images"
-      :autoplay="2500"
-      style="height:300px"
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center align-items-center"
+      style="min-height: 200px;"
     >
-      <template #item="{ item }">
-        <img class="swiper-slide" :src="item" />
-      </template>
-    </ImageSwiper>
-    <img 
-      v-else 
-      :src="data.image" 
-      class="swiper-slide"
-    />
-    <div class="mt-3" />
-    <div class="d-flex flex-col content-box">
-      <SimpleRichHtml
-        v-if="data.overview"
-        :contents="[ data.overview ]"
-        :tag-style="{
-          a: 'text-decoration: underline ; color: #fff;',
-          p: 'color: #fff; margin-bottom: 20px;',
-          img: 'border-radius: 10px;'
-        }"
-      />
-      <span v-else>无内容,请添加内容!</span>
+      <a-spin tip="加载中" />
     </div>
-    <div class="mt-3" />
-    <div class="d-flex flex-row flex-wrap">
-      <div
-        v-for="(i, k) in tagsData"
-        :key="k"
-        class="tag-item"
-        @click="handleGoDetail(i)"
+    <template v-else>
+      <!-- 轮播图 -->
+      <ImageSwiper
+        v-if="data.images && data.images.length > 0"
+        :items="data.images"
+        :autoplay="2500"
+        style="height:300px"
       >
-        <img :src="i.image" />
-        <span>{{ i.title }}</span>
-      </div>
-    </div>
-    <div class="mt-3" />
-    <div class="map-container">
-      <el-amap
-        style="width: 100%;"
-        :center="center"
-        :zoom="zoom"
-        @init="handleInit"
+        <template #item="{ item }">
+          <img class="swiper-slide" :src="item" />
+        </template>
+      </ImageSwiper>
+      <img 
+        v-else 
+        :src="data.image" 
+        class="swiper-slide"
       />
-    </div>
-    <div class="mt-3" />
+      <div class="mt-3" />
+      <div class="d-flex flex-col content-box">
+        <SimpleRichHtml
+          v-if="data.overview"
+          :contents="[ data.overview ]"
+          :tag-style="{
+            a: 'text-decoration: underline ; color: #fff;',
+            p: 'color: #fff; margin-bottom: 20px;',
+            img: 'border-radius: 10px;'
+          }"
+        />
+        <span v-else>无内容,请添加内容!</span>
+      </div>
+      <div class="mt-3" />
+      <div class="d-flex flex-row flex-wrap">
+        <div
+          v-for="(i, k) in tagsData"
+          :key="k"
+          class="tag-item"
+          @click="handleGoDetail(i)"
+        >
+          <img :src="i.image" />
+          <span>{{ i.title }}</span>
+        </div>
+      </div>
+      <div class="mt-3" />
+      <div class="map-container">
+        <el-amap
+          style="width: 100%;"
+          :center="center"
+          :zoom="zoom"
+          @init="handleInit"
+        />
+      </div>
+      <div style="height: 40px;flex-shrink: 0;" />
+    </template>
   </div>
 </template>
 
@@ -74,6 +83,7 @@ const data = ref({
   mainBodyColumnId: 0,
   region: 0,
 })
+const loading = ref(true);
 const zoom = ref(12);
 const center = ref([121.59996, 31.197646]);
 let map: any = null;
@@ -83,12 +93,14 @@ function handleInit(mapRef: any) {
 }
 
 watch(route, () => {
+  loading.value = true;
   setTimeout(() => {
     loadInfo();
   }, 500);
 }, { immediate: true })
 
 async function loadInfo() {
+  loading.value = true;
   const id = Number(route.query.id);
   data.value = {
     ...data.value,
@@ -106,6 +118,7 @@ async function loadInfo() {
 
   const menu = await VillageApi.getVillageMenuList(id);
 
+  loading.value = false;
   tagsData.value = menu.map((item, index) => {
     return {
       title: item.name,

+ 33 - 15
src/views/village/index.vue

@@ -10,7 +10,7 @@
     :load="loadData"
     :showDetail="showDetail"
     :tagsData="tagsData"
-    :defaultSelectTag="tagsData[0].id"
+    :defaultSelectTag="tagsData[1]?.id"
   />
     <!--  -->
   <ContentDialog v-model:show="popupContentShow" light :small="smallDialog">
@@ -20,10 +20,11 @@
 
 <script setup lang="ts">
 import router from '@/router';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import VillageApi from '@/api/village/VillageApi';
 import ContentDialog from '@/components/parts/ContentDialog.vue';
+import CommonContent from '@/api/CommonContent';
 
 const route = useRoute();
 const popupContentShow = ref(false);
@@ -50,27 +51,44 @@ async function loadData(
   dropDownValues: number[]
 ) {
 
-  const res = await VillageApi.getVillageList();
+  const res = await VillageApi.getVillageList(selectedTag);
 
   return { 
     page: page,
     total: res.length,
-    data: res.map((item, index) => {
-      return {
-        title: item.villageName,
-        desc: item.ichLevelText,
-        ...item,
-        addItems: [],
-      };
-    }),
+    data: res
+      .filter(p => (!searchText || searchText.includes(p.villageName)))
+      .map((item, index) => {
+        return {
+          title: item.villageName,
+          desc: item.desc,
+          ...item,
+          addItems: [],
+          bottomTags: [
+            item.levelText, 
+            item.batchText,
+            item.historyLevelText,
+          ],
+        };
+      })
+    ,
   }
 }
 
 //子分类
-const tagsData = ref([
-  { id: 38, name: '省级传统村落' },
-  { id: 39, name: '未分级' },
-]);
+const tagsData = ref<{
+  id: number,
+  name: string,
+}[]>([]);
+
+onMounted(async () => {
+  const res = await CommonContent.getCategoryList(151);
+  const it1 = res.find(p => p.title == '国家级');
+  const it2 = res.find(p => p.title == '省级');
+  if (it1) it1.title = '特色村舍';
+  if (it2) it2.title = '传统村落';
+  tagsData.value = res.map((p) => ({ id: p.id, name: p.title }));
+})
 </script>