uos首页优化

src/forge/Information/Pages/homepage/component/partner.jsx

@@ -43,11 +43,11 @@ function Partner({data}) {
     );
   }
 
-  return <div className='partner_1_bg'>
+  return list && !!list.length && <div className='partner_1_bg'>
     <div className='partner_1 width1200 pt50 pb60'>
       <p className='font-bd font-30 mb10 task-hide center mb50'>{homepagePartnersTitle}</p>
       <div>{gridItems}</div>
-      {list && !list.length && <Nodata _html="暂无数据"/>}
+      {/* {list && !list.length && <Nodata _html="暂无数据"/>} */}
     </div>
   </div>
 }

src/forge/Information/Pages/homepage/component/source.jsx

@@ -56,26 +56,28 @@ function Source({data, subTitle}) {
       <div className='flex1'>
         <Spin spinning={isSpin}>
           <div className='df wrap between'>
-            {sourceList.map(i=>{
+            {sourceList.map(i => {
               const time = i.updateTime || i.createTime
-              return <div className='s_1_souce mr25 mt30'>
-                <div className='flexCenter between m15' style={{minHeight: 90}}>
-                  <div style={{width: '0'}} className='flex1'>
-                    <p className='task-hide'><Link to={`/zone/${key}/source/${i.id}`} className=" font-17 font-bd">{i.name}</Link></p>
-                    <p className="task-hide-2 color212">{i.summary}</p>
+              return <Link to={`/zone/${key}/source/${i.id}`}>
+                <div className='s_1_souce mr25 mt30'>
+                  <div className='flexCenter between m15' style={{ minHeight: 90 }}>
+                    <div style={{ width: '0' }} className='flex1'>
+                      <p className='task-hide font-17 font-bd'>{i.name}</p>
+                      <p className="task-hide-2 color212">{i.summary}</p>
+                    </div>
+                    <img src={require("../image/new3.png")} width={48} className='ml10' />
                   </div>
-                  <img src={require("../image/new3.png")} width={48} className='ml10'/>
+                  <div className='flexCenter between'>
+                    <span className='color848'>{time && time.split(" ")[0].replace(/-/g, '.')}</span>
+                    <Link className='color-blue' to={`/zone/${key}/source/${i.id}`}>
+                      <img src={require("../image/source4.png")} width={25} className='normalImg' />
+                      <img src={require("../image/source5.png")} width={25} className='hoverImg' />
+                      <span className='pl5'>下载</span>
+                    </Link>
+                  </div>
+
                 </div>
-                <div className='flexCenter between'>
-                  <span className='color848'>{time && time.split(" ")[0].replace(/-/g, '.')}</span>
-                  <Link className='color-blue' to={`/zone/${key}/source/${i.id}`}>
-                    <img src={require("../image/source4.png")} width={25} className='normalImg'/>
-                    <img src={require("../image/source5.png")} width={25} className='hoverImg'/>
-                    <span className='pl5'>下载</span>
-                  </Link>
-                </div>
-                
-              </div>
+              </Link>
             })}
           </div>
           <div style={{marginLeft: 150}}>

src/forge/Information/Pages/homepage/component/specialProjects.jsx

@@ -1,6 +1,6 @@
 import React , { useEffect, useState } from 'react';
 import { getSpecialProjectDetail, getSpecialProjectList, getSpecialProjectTypeList, getImage } from '../../../api';
-import { Col, Divider, Row, Tag } from 'antd';
+import { Col, Divider, Icon, Row, Tag } from 'antd';
 import Nodata from '../../../../Nodata';
 import '../index.scss';
 import { TypeCarousel } from './project';
@@ -12,6 +12,9 @@ function SpecialProjects({data, subTitle}) {
   const [projectList, setProjectList] = useState([]);
   const [selectedItem, setSelectedItem] = useState(null);
   const [projectDetail, setProjectDetail] = useState({});
+  const relevancyTypes = ["PAPER", "PATENT", "PROJECT"]
+  const itemsPerRow = 3;
+
 
   useEffect(()=>{
     id && getSpecialProjectTypeList(id, {
@@ -36,39 +39,51 @@ function SpecialProjects({data, subTitle}) {
     })
   }, [typeId])
 
-  useEffect(()=>{
-    selectedItem && getSpecialProjectDetail(selectedItem).then(res=>{
-      if(res){
-        const rows = res.data.rows;
-        // 根据类型分类
-        const rowsByType = rows.reduce((acc, item) => {
-          // 如果acc中没有当前item.type的数组，则创建一个
-          if (!acc[item.type]) {
-            acc[item.type] = [];
-          }
-          // 将当前item添加到对应type的数组中
-          acc[item.type].push(item);
-          return acc;
-        }, {});
-        setProjectDetail({
-          detail: projectList.find(item => item.id === selectedItem),
-          ...rowsByType
-        });
-      }
-    })
-  }, [selectedItem])
+  async function getRelevancyList(id, type, pageSize=5) {
+    const res = await getSpecialProjectDetail(id, {
+      type,
+      pageNum: 1,
+      pageSize
+    });
+    return res.data;
+  }
 
-  const itemsPerRow = 3;
-
-  const handleItemClick = (id) => {
+  const handleItemClick = async (id) => {
     setSelectedItem(selectedItem === id ? null : id);
+    if(id === selectedItem) return
+    const data = await Promise.all(relevancyTypes.map(async (item) => {
+      return {[item]: await getRelevancyList(id, item)};
+    }));
+    const [a,b,c] = data
+    setProjectDetail({
+      detail: projectList.find(item => item.id === id),
+      ...a,
+      ...b,
+      ...c
+    });
   };
 
-  const list = (title, table1, table2, table3, list)=>{
+  const showMore = (type, isShowAll) => {
+    return <p className='center color-blue mb10'>
+      <a onClick={async () => {
+        const data = await getRelevancyList(selectedItem, type, isShowAll ? 5 : 1000);
+        const detail = {
+          ...projectDetail
+        }
+        detail[type] = data
+        setProjectDetail(detail);
+      }}>{isShowAll ? '收起' : '展开'}<Icon type={isShowAll ? "up" : "down"} className="ml5" /></a>
+    </p>
+  }
+
+  const listItem = (title, table1, table2, table3, res)=>{
+    const type = title === "论文" ? "PAPER": "PATENT"
+    const {rows:list, total} = res;
+    const isShowAll = list.length === total
     return !!list.length && <React.Fragment>
       <p className='leftBox font-16 font-bd'>{title}</p>
       <Divider dashed className="margin0-20"/>
-      <Row className='s_p_rowList mb30 font-15'>
+      <Row className='s_p_rowList mb20 font-15'>
         <Col span={12} className='s_p_rowList_t font-bd'>{table1}</Col>
         <Col span={6} className='s_p_rowList_t font-bd'>{table2}</Col>
         <Col span={6} className='s_p_rowList_t font-bd'>{table3}</Col>
@@ -88,11 +103,14 @@ function SpecialProjects({data, subTitle}) {
           </React.Fragment>
         })}
       </Row>
+      {total > 5 && showMore(type, isShowAll)}
       {!list.length && <Nodata _html="暂无数据" small/>}
     </React.Fragment>
   }
 
-  const list2 = (title, table1, table2, list)=>{
+  const list2Item = (title, table1, table2, res)=>{
+    const {rows:list, total} = res;
+    const isShowAll = list.length === total
     return !!list.length && <React.Fragment>
       <p className='leftBox font-16 font-bd'>{title}</p>
       <Divider dashed className="margin0-20"/>
@@ -110,6 +128,7 @@ function SpecialProjects({data, subTitle}) {
           </React.Fragment>
         })}
       </Row>
+      {total > 5 && showMore("PROJECT", isShowAll)}
       {!list.length && <Nodata _html="暂无数据" small/>}
     </React.Fragment>
   }
@@ -140,8 +159,7 @@ function SpecialProjects({data, subTitle}) {
         
         // 如果当前行包含选中项，添加详情面板
         if (currentRow.some(item => item.key === selectedItem?.toString())) {
-          
-          const {detail, PAPER=[], PATENT=[], PROJECT=[]} = projectDetail;
+          const {detail, PAPER={rows:[]}, PATENT={rows:[]}, PROJECT={rows:[]}} = projectDetail;
           const {name, projectLeader, awards, introductionImageIdentifier} = detail || {};
           rendered.push(
             <div key={`details-${selectedItem}`} className="item-details">
@@ -153,10 +171,10 @@ function SpecialProjects({data, subTitle}) {
                   { introductionImageIdentifier &&<p className='font-15 pb5 intro imageLayerParent'>简介：<img className="intro-img pointer" src={ getImage(introductionImageIdentifier) } alt="" /></p>}
                 </div>
                 {
-                  PAPER.length + PATENT.length + PROJECT.length > 0 &&  <div style={{padding: '22px 33px'}}>
-                    {list("论文", "论文标题", "作者", "单位", PAPER)}
-                    {list("专利", "专利标题", "作者", "单位", PATENT)}
-                    {list2("开源项目", "项目名称", "参与者", PROJECT)}
+                  PAPER.rows.length + PATENT.rows.length + PROJECT.rows.length > 0 &&  <div style={{padding: '22px 33px'}}>
+                    {listItem("论文", "论文标题", "作者", "单位", PAPER)}
+                    {listItem("专利", "专利标题", "作者", "单位", PATENT)}
+                    {list2Item("开源项目", "项目名称", "参与者", PROJECT)}
                   </div>
                 }
               </div>