隐藏无数据

src/api/knowledge/types.ts

@@ -24,7 +24,8 @@ export interface UserDetail {
 //导航栏查询
 export interface NaviQuery {
   atParentId: string;
-  
+  userkey: String,
+  usertoken: String,
 }
 //导航栏信息
 export interface Navi{
@@ -42,7 +43,8 @@ export interface Navi{
   atUid:string;
   //排序
   atSort:string;
-
+   //该导航栏中有无card
+  hasCard:Boolean; 
 }
 export type cardList = PageResult<Graphicform[]>
 //卡片
@@ -157,3 +159,9 @@ interface PageResultJava<T> {
   pageNum:number;
 
 }
+
+//标题下有无内容
+export interface ShowTitle {
+  atIdAndGParentSun: string;//导航栏id
+  hasCard:Boolean;//是否展示
+}

src/store/modules/knowledge.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { ShowTitle } from '@/api/knowledge/types';
+// 第一个参数是应用程序中 store 的唯一 id
+export const useKnowledgeStore = defineStore('knowledge', {
+
+    state: () => {
+        //const knowledgeTitlesShow = ref<Array<ShowTitle>>([]);
+        const knowledgeTitlesShow = ref<ShowTitle[]>([]);
+
+        return {knowledgeTitlesShow};
+
+    },
+    getters: {
+        // 自动将返回类型推断为数字
+        getArray(state) {
+          return state
+        },
+        
+      },
+   
+})

src/views/knowledge/knowledge/components/KnowledgeContent.vue

@@ -43,7 +43,7 @@ watch(() => props.isShow, () => {
         } else {
             pdfIframeShow.value = true
         }
-        console.log(pdfIframeShow.value)
+        //console.log(pdfIframeShow.value)
     }
 })
 onMounted(() => {

src/views/knowledge/knowledge/components/Navili.vue

@@ -1,5 +1,6 @@
 <script lang='ts' setup>
 import { scrollTo } from '@/api/knowledge/scroll'
+const showli = ref(true);
 const props = defineProps({
     oneli: {
         type: Object,
@@ -13,12 +14,18 @@ const props = defineProps({
     active: {
         type: Number,
         default: 0
+    },
+    knowledgeStore: {
+        type: Object,
+    },
+    fatherisReady1: {
+        type: Number,
     }
 })
-const liIndex = props.index + 1;
+
 </script>
 <template>
-    <li :class="{ active: active === index }" @click="scrollTo(index)">
+    <li :class="{ active: active === index }" @click="scrollTo(index)" v-if="showli">
         {{ oneli?.atTitle }}
     </li>
 </template>

src/views/knowledge/knowledge/components/archivestype.vue

@@ -1,18 +1,21 @@
 <script lang='ts' setup>
 import { useUserStore } from "@/store/modules/user"
 import { ref, watch } from 'vue'
-import { getUserDetail, getZxxyNavis, getTuijian } from '@/api/knowledge/index'
+import { getTuijian } from '@/api/knowledge/index'
 import KnowledgeContent from '@/views/knowledge/knowledge/components/KnowledgeContent.vue'
-import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types'
+import { UserDetail, NaviQuery, Navi, Graphicform, PageParam, ShowTitle } from '@/api/knowledge/types'
 import { formatDate } from '@/api/knowledge/scroll'
-import { useRouter } from 'vue-router'
 import errimg from '@/assets/404_images/imgNotFound.png'
+import { useKnowledgeStore } from "@/store/modules/knowledge"
+
+const showArea = ref(true);
+
 const props = defineProps({
   liContent: {
     type: Object,
 
   },
-  routerUrl:{
+  routerUrl: {
     type: String,
   },
 
@@ -27,14 +30,12 @@ const props = defineProps({
   fatherisReady: {
     type: Number,
     default: 0
-  }
+  },
+
 })
 
 const userStore = useUserStore();
 const { userKey, userToken } = userStore;
-
-
-
 const userDetail = ref<UserDetail>({
   //证件号码
   idcardno: ["1", "2"],
@@ -51,15 +52,12 @@ const userDetail = ref<UserDetail>({
 });
 const tuijianPage = ref<Graphicform[]>();
 
-/* const naviList = ref<Navi[]>(); */
-/* //用户信息查询参数
-const userQueryParam = reactive<UserQuery>({
-  userkey: userKey,
-  usertoken: userToken,
-}); */
+
 //navi查询参数
 const naviQueryParam = reactive<NaviQuery>({
   atParentId: "",//知识库
+  userkey: userKey,
+  usertoken: userToken,
 });
 const pageParamTuijian = reactive<PageParam>({
   total: 0,
@@ -81,75 +79,55 @@ function errorImg(e: any) {
   //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
   e.srcElement.onerror = null; //防止闪图
 }
-onMounted(() => {
-
-  //console.log(props.liContent?.gParentSun)
 
+watch(() => [props.fatherisReady, props.liContent, props.routerUrl], (newVal, oldVal) => {
+  //console.log(newVal, oldVal); // [11, 22], [1, 2]
+  const routerUrl = oldVal[2] as String;
+  const liContent = newVal[1] as any;
+  //console.log(newVal[1])
+  //console.log(oldVal[2])
+
+  //console.log(routerUrl)
+  if (routerUrl?.endsWith("index")) {//此时页面为知识库
+    naviQueryParam.atParentId = '16213848089876281'
+    pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
+  } else if (routerUrl?.endsWith("news")) {//此时页面为新闻资讯
+    naviQueryParam.atParentId = '16213847972425134'
+    pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
+  }
 
-
-
-});
-
-watch(() => [props.fatherisReady, props.liContent,props.routerUrl], (newVal, oldVal) => {
-    //console.log(newVal, oldVal); // [11, 22], [1, 2]
-    const routerUrl = oldVal[2] as String;
-    const liContent = newVal[1] as any;
-    //console.log(newVal[1])
-    //console.log(oldVal[2])
-    
-    //console.log(routerUrl)
-    if (routerUrl?.endsWith("index")) {//此时页面为知识库
-      naviQueryParam.atParentId = '16213848089876281'
-      pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
-    } else if (routerUrl?.endsWith("news")) {//此时页面为新闻资讯
-      naviQueryParam.atParentId = '16213847972425134'
-      pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
-    }
-
-    pageParamTuijian.gParentSun = liContent.atId;
-    //console.log(pageParamTuijian.gParentSun)
-    //推荐 
+  pageParamTuijian.gParentSun = liContent.atId;
+  //推荐 
+  if (props.liContent?.hasCard == true) {
+    //console.log(props.liContent?.hasCard)
     getTuijian(pageParamTuijian)
       .then(({ data }) => {
         tuijianPage.value = data.list
+        //console.log(tuijianPage.value)
         pageParamTuijian.page = data.pageNum
         pageParamTuijian.total = data.total
-        if(pageParamTuijian.total>0){
+        if (pageParamTuijian.total > 0) {
           showCards.value = 1;
         }
-        
-      });
-
-})
+        const KnowledgeStore = useKnowledgeStore();
 
 
+        if (tuijianPage.value.length > 0) {
+          //本标题下有数据
+          KnowledgeStore.$patch((state) => {
+            state.knowledgeTitlesShow.push({ atIdAndGParentSun: liContent.atId, hasCard: true })
+          })
+          showArea.value = true;
+        } else {
+          KnowledgeStore.$patch((state) => {
+            state.knowledgeTitlesShow.push({ atIdAndGParentSun: liContent.atId, hasCard: false })
 
-/* watch(props.fatherisReady, (value) => {
-    console.log(props);
-    //childList.value = nweProps.listData
-    let router = useRouter()
-    let routerUrl = toRaw(router).currentRoute.value.fullPath
-    console.log(routerUrl)
-    if (routerUrl.endsWith("index")) {//此时页面为知识库
-      naviQueryParam.atParentId = '16213848089876281'
-      pageParamTuijian.archivesTypeAtParentId = '16213848089876281'
-    } else if (routerUrl.endsWith("news")) {//此时页面为新闻资讯
-      naviQueryParam.atParentId = '16213847972425134'
-      pageParamTuijian.archivesTypeAtParentId = '16213847972425134'
-    }
-
-    pageParamTuijian.gParentSun = props.liContent?.gParentSun;
-    //推荐 
-    getTuijian(pageParamTuijian)
-      .then(({ data }) => {
-        tuijianPage.value = data.list
-        pageParamTuijian.page = data.pageNum
-        pageParamTuijian.total = data.total
-        console.log(tuijianPage.value)
+          })
+          //showArea.value = false;
+        }
       });
-
-  }) */
-
+  }
+})
 
 function handleCurrentChange() {
 
@@ -158,8 +136,6 @@ function handleCurrentChange() {
       tuijianPage.value = data.list
       pageParamTuijian.page = data.pageNum
       pageParamTuijian.total = data.total
-
-      console.log(tuijianPage.value)
     });
 }
 
@@ -169,11 +145,12 @@ const showCards = ref(0)
 
 //dialog
 const cardContentSource = ref<Graphicform>({});
-const showContentBox= ref(false);	//详情弹窗
-function showContentDialog(item:any){
+const showContentBox = ref(false);	//详情弹窗
+function showContentDialog(item: any) {
 
   showContentBox.value = true;
-  cardContentSource.value=item;
+  cardContentSource.value = item;
+
 }
 
 
@@ -186,12 +163,12 @@ function showContentDialog(item:any){
       <h3>{{ props.liContent?.atTitle }}</h3>
 
     </div>
-    <div v-show="!showCards" style="text-align: center;padding-top: 5%;" >暂无数据</div>
+    <div v-show="!showCards" style="text-align: center;padding-top: 5%;">暂无数据</div>
     <div class="grid-tuijian" v-show="showCards">
 
 
       <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)">
-        <img style="width: 140px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
+        <img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
           referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
 
         <div class="card-right">
@@ -218,7 +195,7 @@ function showContentDialog(item:any){
 <style>
 .models {
   width: 100%;
-   min-height: 200px;
+  min-height: 200px;
 
 
 }
@@ -232,7 +209,7 @@ function showContentDialog(item:any){
 .grid-tuijian {
   /* border-top: solid 1px; */
   display: grid;
-  grid-template-columns: repeat(auto-fill, 415px);
+  grid-template-columns: repeat(auto-fill, 484px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -240,7 +217,7 @@ function showContentDialog(item:any){
 
 .tuijian-card {
   display: flex;
-  width: 412px;
+  width: 481px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;

src/views/knowledge/knowledge/index.vue

@@ -1,5 +1,6 @@
 <script lang='ts' setup>
 import { useUserStore } from "@/store/modules/user"
+
 import { ref } from 'vue'
 import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index'
 import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue'
@@ -17,7 +18,6 @@ const userStore = useUserStore();
 const { userKey, userToken } = userStore;
 
 
-
 const userDetail = ref<UserDetail>({
   //证件号码
   idcardno: ["1", "2"],
@@ -35,6 +35,7 @@ const userDetail = ref<UserDetail>({
 const tuijianPage = ref<Graphicform[]>();
 
 const naviList = ref<Navi[]>();
+const naviList1 = ref<Navi[]>();
 //用户信息查询参数
 const userQueryParam = reactive<UserQuery>({
   userkey: userKey,
@@ -43,6 +44,8 @@ const userQueryParam = reactive<UserQuery>({
 //navi查询参数
 const naviQueryParam = reactive<NaviQuery>({
   atParentId: "",//知识库
+  userkey: userKey,
+  usertoken: userToken,
 });
 const pageParamTuijian = reactive<PageParam>({
   total: 0,
@@ -65,9 +68,15 @@ function errorImg(e: any) {
   e.srcElement.onerror = null; //防止闪图
 }
 const fatherisReady = ref(0);
+
 const router = useRouter()
 const routerUrl = toRaw(router).currentRoute.value.fullPath
 onBeforeMount(() => {
+  //当前登录用户详细信息
+  getUserDetail(userQueryParam)
+    .then(({ data }) => {
+      userDetail.value = data
+    });
 
 })
 
@@ -86,42 +95,23 @@ onMounted(() => {
   getZxxyNavis(naviQueryParam)
     .then(({ data }) => {
       naviList.value = data
-      //console.log(naviList.value)
-
-    }).finally(() => {
-      fatherisReady.value = 100;
-    })
-
-  //当前登录用户详细信息
-  getUserDetail(userQueryParam)
-    .then(({ data }) => {
-      userDetail.value = data
-      //console.log(userDetail.value)
-    });
-
-
-
+      }).finally(() => {
+        fatherisReady.value = 100;
+      })
   //推荐 
   getTuijian(pageParamTuijian)
     .then(({ data }) => {
       tuijianPage.value = data.list
       pageParamTuijian.page = data.pageNum
       pageParamTuijian.total = data.total
-      //console.log(tuijianPage.value)
     });
   getCarousel(pageParamTuijian)
     .then(({ data }) => {
       carousel.value = data.list
-
-
-      //console.log(tuijianPage.value)
     });
+});
 
 
-
-  //setTimeout(function(){  fatherisReady.value = 100;}, 3000);　　//三秒之后执行函数
-
-});
 function jsScroll() {
   active.value = onScroll();
 }
@@ -137,28 +127,26 @@ function handleCurrentChange() {
       tuijianPage.value = data.list
       pageParamTuijian.page = data.pageNum
       pageParamTuijian.total = data.total
-
-      //console.log(tuijianPage.value)
     });
 
 }
 
 //dialog
 const cardContentSource = ref<Graphicform>({});
-const showContentBox= ref(false);	//详情弹窗
-function showContentDialog(item:any){
+const showContentBox = ref(false);	//详情弹窗
 
+function showContentDialog(item: any) {
   showContentBox.value = true;
-  cardContentSource.value=item;
+  cardContentSource.value = item;
 }
 
 
 </script>
 <template>
-  <div class="know-main">
+  <div class="app-container">
     <KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent>
     <!-- 内容区域 -->
-    <div class="content" style="margin-left: 10% ;padding-right: 15%;">
+    <div class="content">
 
       <div class="models ">
 
@@ -167,16 +155,16 @@ function showContentDialog(item:any){
 
         </div>
         <div class="grid-tuijian">
-          <el-carousel indicator-position="outside" class="mycarousel" style="width: 412px;height:290px; " arrow="always">
-            <el-carousel-item v-for="(item, index) in carousel" :key="index" >
-              <!-- <h3 text="2xl" justify="center">{{ item.gThumbnail }}</h3> -->
-              <img style="width: 412px; height: 300px;border-radius:16px;margin-top: 4px; margin-left: 4px;"
+          <el-carousel indicator-position="outside" class="mycarousel" arrow="always">
+            <el-carousel-item v-for="(item, index) in carousel" :key="index">
+
+              <img style="width: 495px; height: 300px;border-radius:16px;margin-top: 4px; margin-left: 4px;"
                 referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
             </el-carousel-item>
           </el-carousel>
 
           <div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)">
-            <img style="width: 140px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
+            <img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
               referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
 
             <div class="card-right">
@@ -200,58 +188,66 @@ function showContentDialog(item:any){
           @current-change="handleCurrentChange" />
       </div>
       <!-- 各知识/新闻分区 -->
-      <Archivestype v-for="(item, index) in naviList" :liContent=item :index=(index) :fatherisReady="fatherisReady"
-        :routerUrl="routerUrl" >
-      </Archivestype>
+
+      <template v-for="(item, index) in naviList">
+        <Archivestype :liContent=item :index=(index) :fatherisReady="fatherisReady" :routerUrl="routerUrl"></Archivestype>
+      </template>
+
 
 
 
     </div>
 
     <!-- 导航区域 -->
+
     <ul class="navs">
       <li :class="{ active: active === 0 }" @click="scrollTo(0)">
         推荐
       </li>
-      <Navili v-for="(item, index) in naviList" :class="{ active: active === index+1 }" :oneli=item :index=(index+1)
-        :active=active @click="scrollTo(index+1)"></Navili>
 
-    </ul>
+      <template v-for="(item, index) in naviList">
+        <Navili :class="{ active: active === index+1 }" :oneli=item :index=(index+1) v-if="item.hasCard" :active=active
+          @click="scrollTo(index + 1)"></Navili>
+      </template>
 
+    </ul>
   </div>
-  
 </template>
 
 
 
 <style scoped>
-/* 内容区的样式 */
 .content {
   background-color: white;
-  width: 100%;
+  width: 89.1%;
+  margin-left: 190px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-radius: 5px;
 }
 
-.models {
-  width: 100%;
-  /*  min-height: 500px; */
-
 
-}
 
 
 /* 导航栏的样式 */
 .navs {
+
+
+
+  width: 192px;
   position: fixed;
-  top: 100px;
+  height: auto;
+  top: 95px;
 
 }
 
 .navs li {
 
-  padding: 0 40px;
-  line-height: 2.6;
-  font-size: 15px;
+  text-align: center;
+  line-height: 3;
+  font-size: 15.5px;
   color: #909399;
+  background-color: white;
+  margin-right: 15px;
 }
 
 .navs li:hover {
@@ -265,12 +261,15 @@ function showContentDialog(item:any){
 }
 
 .model-title {
+  margin-top: -9px;
   height: 30px;
 }
 
 .grid-tuijian {
+
+
   display: grid;
-  grid-template-columns: repeat(auto-fill, 415px);
+  grid-template-columns: repeat(auto-fill, 484px);
   gap: 10px;
   grid-auto-flow: row dense;
 
@@ -278,26 +277,27 @@ function showContentDialog(item:any){
 
 .tuijian-card {
   display: flex;
-  width: 412px;
+  width: 481px;
   height: 140px;
   padding: 3px;
   border-radius: 8px;
   flex-direction: row;
   flex-wrap: wrap;
-  /* border:#909399 1px solid; */
-  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 
 .mycarousel {
+
   grid-row-start: 1;
   grid-row-end: 3;
   border-radius: 15px;
+  width: 480px;
+  height: 290px;
 }
 
 .card-right {
   display: flex;
-  width: 260px;
+  width: 300px;
   flex-direction: column;
   flex-wrap: wrap;
   padding-left: 8px;
@@ -305,15 +305,6 @@ function showContentDialog(item:any){
 
 .card-title {
 
-  /* height: 1.5em !important;
-  overflow: hidden; 
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  line-height: 25px;
-  height: 85px; */
-
 
   height: 1.5em !important;
   display: -webkit-box;