合并分支 'dev_hhq' 到 'master'

src/api/scientificFunding/overview.js

+// 科研资助体系
+import request from "@/api/request.js";
+
+
+// 资助体系:来源机构列表
+/**
+ * @param {moduleId} 
+ */
+export function getFundSourceOrg() {
+  return request({
+    method: 'GET',
+    url: `/api/fund/fundSourceOrg`,
+  })
+}
+
+
+/**
+ * 资助体系:最新资助项目
+ */
+export function getNewProject() {
+  return request({
+    method: "GET",
+    url: `/api/fund/newProject`
+  })
+}
+
+
+// 获取新闻资讯
+/**
+ * @param {moduleId} 
+ */
+export function getNews(moduleId = "0107") {
+  return request({
+    method: 'GET',
+    url: `/api/commonFeature/news/${moduleId}`,
+  })
+}
+
+
+/**
+ * 社交媒体
+ */
+export function getSocialMediaInfo(moduleId = "0107") {
+  return request({
+    method: "GET",
+    url: `/api/commonFeature/remarks/${moduleId}`
+  })
+}
+
+// 获取风险信号
+/**
+ * @param {moduleId} 
+ */
+export function getRiskSignal(moduleId = "0107") {
+  return request({
+    method: 'GET',
+    url: `/api/commonFeature/riskSignal/${moduleId}`,
+  })
+}
+
+
+//资助体系v2.0:资助领域分布情况:资助经费
+export function findFundField(params) {
+  return request({
+    method: 'GET',
+    url: `/api/fund/countryFundsAreaList/${params.year}`,
+
+  })
+}
+
+//资助体系v2.0:资助领域分布情况:资助项目
+
+export function findCountryProjectAreaList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/fund/countryProjectAreaList/${params.year}`,
+
+  })
+}
+//资助体系v2.0:资助经费变化情况:资助经费
+export function getCountryFundingChange(params) {
+  return request({
+    method: 'GET',
+    url: `/api/fund/countryFundingChange/${params.startDate}`
+  })
+}
+
+//资助体系v2.0:资助经费变化情况:资助项目
+export function getCountryFundProjectChange(params) {
+  return request({
+    method: 'GET',
+    url: `/api/fund/countryFundProjectChange/${params.startDate}`
+  })
+}
+
+//资助体系v2.0:机构资助领域情况
+export function getOrgFundsArea(params) {
+  return request({
+    method: 'GET',
+    url: `/api/fund/countryFundsArea/${params.year}`,
+  })
+}
+
+//资助体系v2.0:项目资助强度分布
+export function getOrgFundStrength(params) {
+  return request({
+    method: 'GET',
+    url: `/api/fund/orgFundStrength/${params.year}`,
+  })
+}
+
+
+//资助体系:来源机构列表
+export function geFundSourceOrg() {
+  return request({
+    method: 'GET',
+    url: `/api/fund/fundSourceOrg`,
+  })
+}
+
+// 获取行业领域列表
+export function getAreaType() {
+  return request({
+    method: 'GET',
+    url: `/api/commonDict/areaType`,
+  })
+}
+
+//资助体系v2.0:资助项目列表分页
+export function getProjectListNew(params) {
+  return request({
+    method: 'GET',
+    url: `/api/fund/getProjectListNew`,
+    params
+  })
+}

src/views/scientificFunding/common/comTitle.vue

@@ -24,23 +24,27 @@ const props = defineProps({
     margin: 0;
     padding: 0;
 }
+
 .com-title {
     width: 1575px;
     height: 42px;
     display: flex;
     align-items: center;
+
     .cl1 {
         width: 24px;
         height: 30px;
         background-color: rgba(174, 214, 255, 1);
         margin-right: 8px;
     }
+
     .cl2 {
         width: 8px;
         height: 30px;
         background-color: rgba(174, 214, 255, 1);
         margin-right: 8px;
     }
+
     .title {
         width: 152px;
         height: 42px;
@@ -51,6 +55,7 @@ const props = defineProps({
         line-height: 42px;
         margin-right: 8px;
     }
+
     .cl3 {
         width: 1367px;
         height: 1px;
@@ -58,5 +63,4 @@ const props = defineProps({
         box-sizing: border-box;
     }
 }
-
 </style>

src/views/scientificFunding/components/askPage/index.vue

@@ -7,53 +7,51 @@
                 <div class="more" @click="handleToMoreNews">更多 +</div>
             </div>
             <div class="left-main">
-                <div v-for="item in leftList" :key="item.id" class="main-item">
-                    <img :src="item.image" alt="">
-                    <div class="item-content">
-                        <div class="title">{{item.title}}</div>
-                        <div class="content">{{item.content}}</div>
-                        <div class="time">{{item.time}}</div>
+                <div class="box3-item" v-for="(news, index) in leftList" :key="index">
+                    <div class="left">
+                        <img :src="news.newsImage" alt="" />
                     </div>
+                    <div class="right">
+                        <div class="right-top">
+                            <div class="title">{{ news.newsTitle }}</div>
+                            <div class="time">{{ news.newsDate + '.' + news.newsOrg }}</div>
                         </div>
+                        <div class="right-footer">{{ news.newsContent }}</div>
                     </div>
                 </div>
-        <div class="right">
+
+            </div>
+        </div>
+        <div class="right-box">
             <div class="right-title">
                 <img src="./assets/icon02.png" alt="">
                 <div class="tit">社交媒体</div>
+
             </div>
             <div class="right-main">
-                <div class="trump">
-                    <img src="./assets/title01.png" alt="">
-                    <div class="trump-main">
-                        <div class="cl1">{{ rightList[0].name }}</div>
-                        <div class="cl2">{{ rightList[0].content }}</div>
-                        <div class="cl3">{{ rightList[0].time }}</div>
-                    </div>
-                </div>
-                <div class="mask">
-                    <img src="./assets/title02.png" alt="">
-                    <div class="mask-main">
-                        <div class="cl1">{{ rightList[1].name }}</div>
-                        <div class="cl2">{{ rightList[1].content }}</div>
-                        <div class="cl3">{{ rightList[1].time }}</div>
+                <div class="box4-main-item" v-for="(item, index) in rightList" :key="index">
+                    <div class="left">
+                        <img :src="item.personImage" alt="" />
                     </div>
+                    <div class="right">
+                        <div class="right-top">
+                            <div class="name">{{ item.personName }}</div>
+                            <div class="time">{{ item.time + '.' + item.orgName }}</div>
                         </div>
-                <div class="malaby">
-                    <img src="./assets/title03.png" alt="">
-                    <div class="malaby-main">
-                        <div class="cl1">{{ rightList[2].name }}</div>
-                        <div class="cl2">{{ rightList[2].content }}</div>
-                        <div class="cl3">{{ rightList[2].time }}</div>
+                        <div class="content">{{ item.remarks }}</div>
                     </div>
                 </div>
+
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import {
+    getSocialMediaInfo, getNews
+} from "@/api/scientificFunding/overview";
 import router from "@/router"
 import image01 from './assets/image01.png'
 import image02 from './assets/image02.png'
@@ -68,73 +66,100 @@ import title03 from './assets/title03.png'
 
 const leftList = ref([
     {
-        id:1,
-        title:'美国NSF寻求建立政企共同资助的研究生奖学金模式',
-        content:'美国国家科学基金会（NSF）开始寻求建立与行业合作伙伴共同资助的新研究生奖学金计划...',
-        time:'11-4 · 华盛顿邮报',
-        image:image01
+        id: 1,
+        title: '美国NSF寻求建立政企共同资助的研究生奖学金模式',
+        content: '美国国家科学基金会（NSF）开始寻求建立与行业合作伙伴共同资助的新研究生奖学金计划...',
+        time: '11-4 · 华盛顿邮报',
+        image: image01
     },
     {
-        id:2,
-        title:'美国NSF投资2.8亿美元支持人工智能项目开发',
-        content:'自7月23日白宫发布《赢得人工智能竞赛：美国人工智能行动计划》以来，美国国家科学基...',
-        time:'11-4 · 纽约时报',
-        image:image02
+        id: 2,
+        title: '美国NSF投资2.8亿美元支持人工智能项目开发',
+        content: '自7月23日白宫发布《赢得人工智能竞赛：美国人工智能行动计划》以来，美国国家科学基...',
+        time: '11-4 · 纽约时报',
+        image: image02
     },
     {
-        id:3,
-        title:'美国NASA资助地球观测和大型望远镜新技术',
-        content:'美国国家航空航天局（NASA）先后资助两项任务，以促进地球观测和大型望远镜新技术的...',
-        time:'11-3 · 洛杉矶时报',
-        image:image03
+        id: 3,
+        title: '美国NASA资助地球观测和大型望远镜新技术',
+        content: '美国国家航空航天局（NASA）先后资助两项任务，以促进地球观测和大型望远镜新技术的...',
+        time: '11-3 · 洛杉矶时报',
+        image: image03
     },
     {
-        id:4,
-        title:'美国NSF、NIH和FDA支持数字医学孪生技术应用开发',
-        content:'美国国家科学基金会（NSF）、美国国立卫生研究院（NIH）和美国食品药品监督管理局（F...',
-        time:'11-3 · 今日美国',
-        image:image04
+        id: 4,
+        title: '美国NSF、NIH和FDA支持数字医学孪生技术应用开发',
+        content: '美国国家科学基金会（NSF）、美国国立卫生研究院（NIH）和美国食品药品监督管理局（F...',
+        time: '11-3 · 今日美国',
+        image: image04
     },
     {
-        id:5,
-        title:'美国NIH拨款推进All of Us研究计划数据集应用',
-        content:'美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据...',
-        time:'11-2 ·  ​福克斯新闻网',
-        image:image05
+        id: 5,
+        title: '美国NIH拨款推进All of Us研究计划数据集应用',
+        content: '美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据...',
+        time: '11-2 ·  ​福克斯新闻网',
+        image: image05
     }
 ])
 
+//// 新闻资讯
+const handleNews = async () => {
+    try {
+        const res = await getNews();
+        console.log("获取新闻资讯", res);
+        if (res.code === 200 && res.data) {
+            leftList.value = res.data
+        }
+    } catch (error) {
+        console.error("获取新闻资讯error", error);
+    }
+};
+
 const rightList = ref([
     {
-        id:1,
-        name:'唐纳德·特朗普',
-        content:'埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
-        time:'15:23 · 发布于真实社交',
-        title:title01
+        id: 1,
+        name: '唐纳德·特朗普',
+        content: '埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
+        time: '15:23 · 发布于真实社交',
+        title: title01
     },
     {
-        id:2,
-        name:'埃隆·马斯克',
-        content:'如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
-        time:'14:49 · 发布于X',
-        title:title02
+        id: 2,
+        name: '埃隆·马斯克',
+        content: '如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
+        time: '14:49 · 发布于X',
+        title: title02
     },
     {
-        id:3,
-        name:'塞巴斯蒂安·马拉比',
-        content:'提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
-        time:'11:05 · 发布于X',
-        title:title03
+        id: 3,
+        name: '塞巴斯蒂安·马拉比',
+        content: '提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
+        time: '11:05 · 发布于X',
+        title: title03
     }
 ])
 
-
+//// 社交媒体
+const handleSocialMediaInfo = async () => {
+    try {
+        const res = await getSocialMediaInfo();
+        console.log("获取社交媒体", res);
+        if (res.code === 200 && res.data) {
+            rightList.value = res.data
+        }
+    } catch (error) {
+        console.error("获取社交媒体error", error);
+    }
+};
 // 查看更多新闻资讯
 const handleToMoreNews = () => {
     const route = router.resolve("/newsBrief");
     window.open(route.href, "_blank");
 };
-
+onMounted(async () => {
+    handleNews()
+    handleSocialMediaInfo()
+});
 </script>
 
 <style scoped lang="scss">
@@ -142,11 +167,13 @@ const handleToMoreNews = () => {
     margin: 0;
     padding: 0;
 }
+
 .ask-page {
     width: 1600px;
     height: 450px;
     display: flex;
     justify-content: space-between;
+
     .left {
         width: 792px;
         height: 450px;
@@ -155,11 +182,13 @@ const handleToMoreNews = () => {
         border: 1px solid rgb(234, 236, 238);
         box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
         background-color: #fff;
+
         .left-title {
             width: 792px;
             height: 48px;
             border-bottom: 1px solid rgb(234, 236, 238);
             position: relative;
+
             img {
                 width: 19px;
                 height: 19px;
@@ -167,9 +196,10 @@ const handleToMoreNews = () => {
                 top: 16px;
                 left: 21px;
             }
+
             .tit {
                 margin-left: 60px;
-                width: 80px;
+                width: 90px;
                 height: 48px;
                 padding: 11px 0;
                 font-size: 20px;
@@ -178,6 +208,7 @@ const handleToMoreNews = () => {
                 line-height: 26px;
                 color: rgb(5, 95, 194);
             }
+
             .more {
                 width: 49px;
                 height: 24px;
@@ -192,69 +223,98 @@ const handleToMoreNews = () => {
                 cursor: pointer;
             }
         }
+
         .left-main {
-            width: 792px;
             height: 402px;
-            padding: 20px 22px 21px 21px;
-            .main-item {
-                width: 749px;
-                height: 64px;
+            overflow-y: auto;
+
+            padding-top: 6px;
+
+            .box3-item {
                 display: flex;
+                height: 77px;
+                width: 749px;
+                margin-left: 21px;
                 border-bottom: 1px solid rgba(240, 242, 244, 1);
-                margin-bottom: 14px;
-                img {
+
+                .left {
                     width: 72px;
                     height: 48px;
-                    margin-right: 20px;
-                    cursor: pointer;
+                    margin-top: 15px;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
                     }
-                .item-content {
+                }
+
+                .right {
                     width: 657px;
-                    height: 50px;
-                    position: relative;
+                    margin-left: 20px;
+
+                    .right-top {
+                        width: 657px;
+                        display: flex;
+                        justify-content: space-between;
+
                         .title {
+                            margin-top: 13px;
+                            width: 520px;
+                            height: 24px;
+                            color: rgba(59, 65, 75, 1);
+                            font-family: Microsoft YaHei;
                             font-size: 16px;
                             font-weight: 700;
-                        font-family: 'Microsoft YaHei';
                             line-height: 24px;
-                        color: rgb(59, 65, 75);
-                        cursor: pointer;
-                    }
-                    .content {
-                        font-size: 16px;
-                        font-weight: 400;
-                        font-family: 'Microsoft YaHei';
-                        line-height: 24px;
-                        color: rgb(59, 65, 75);
-                        cursor: pointer;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
                         }
+
                         .time {
-                        position: absolute;
-                        top: 0px;
-                        right: 0px;
+                            flex: 1;
+                            text-align: right;
+                            height: 22px;
+                            margin-top: 19px;
+                            color: rgba(95, 101, 108, 1);
+                            font-family: Microsoft YaHei;
                             font-size: 14px;
                             font-weight: 400;
-                        font-family: 'Microsoft YaHei';
                             line-height: 22px;
-                        color: rgb(95, 101, 108);
-                        cursor: pointer;
                         }
                     }
+
+                    .right-footer {
+                        width: 657px;
+                        height: 24px;
+                        color: rgba(59, 65, 75, 1);
+                        font-family: Microsoft YaHei;
+                        font-size: 16px;
+                        font-weight: 400;
+                        line-height: 24px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
                     }
                 }
             }
-    .right {
+        }
+    }
+
+    .right-box {
         width: 792px;
         height: 450px;
         border-radius: 10px;
         border: 1px solid rgb(234, 236, 238);
         box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
         background-color: #fff;
+
         .right-title {
             width: 792px;
             height: 48px;
             border-bottom: 1px solid rgb(234, 236, 238);
             position: relative;
+
             img {
                 width: 19px;
                 height: 19px;
@@ -262,9 +322,10 @@ const handleToMoreNews = () => {
                 top: 16px;
                 left: 21px;
             }
+
             .tit {
                 margin-left: 60px;
-                width: 80px;
+                width: 90px;
                 height: 48px;
                 padding: 11px 0;
                 font-size: 20px;
@@ -273,6 +334,7 @@ const handleToMoreNews = () => {
                 line-height: 26px;
                 color: rgb(5, 95, 194);
             }
+
             .more {
                 width: 49px;
                 height: 24px;
@@ -287,139 +349,67 @@ const handleToMoreNews = () => {
                 cursor: pointer;
             }
         }
+
         .right-main {
-            width: 792px;
             height: 402px;
-            padding: 23px 30px 25px 21px;
-            .trump {
-                width: 740px;
-                height: 148px;
-                margin-bottom: 16px;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding-top: 8px;
+
+
+            .box4-main-item {
+                margin-top: 16px;
                 display: flex;
-                img {
+                margin-left: 21px;
+
+                .left {
+                    margin-top: 5px;
                     width: 36px;
                     height: 36px;
-                    margin-right: 8.5px;
-                }
-                .trump-main {
-                    width: 695.6px;
-                    height: 148px;
-                    background-image: url('./assets/title01bg.png');
-                    padding: 11px 14px 12px 22.5px;
-                    background-size: cover;
-                    position: relative;
-                    .cl1 {
-                        font-size: 16px;
-                        font-weight: 700;
-                        font-family: 'Microsoft YaHei';
-                        line-height: 24px;
-                        color: rgb(59, 65, 75);
-                        margin-bottom: 5px;
-                    }
-                    .cl2 {
-                        font-size: 16px;
-                        font-weight: 400;
-                        font-family: 'Microsoft YaHei';
-                        line-height: 24px;
-                        color: rgb(59, 65, 75);
-                    }
-                    .cl3 {
-                        position: absolute;
-                        top: 11px;
-                        right: 14px;
-                        font-size: 16px;
-                        font-weight: 400;
-                        font-family: 'Microsoft YaHei';
-                        line-height: 30px;
-                        color: rgb(95, 101, 108);
-                    }
+
+                    img {
+                        width: 100%;
+                        height: 100%;
                     }
                 }
-            .mask {
-                width: 740px;
-                height: 76px;
-                margin-bottom: 16px;
+
+                .right {
+                    margin-left: 10px;
+                    width: 690px;
+                    box-sizing: border-box;
+                    border: 1px solid rgba(231, 243, 255, 1);
+                    background: rgba(246, 250, 255, 1);
+                    padding: 10px 15px;
+
+                    .right-top {
                         display: flex;
-                img {
-                    width: 36px;
-                    height: 36px;
-                    margin-right: 8.5px;
-                }
-                .mask-main {
-                    width: 695.6px;
-                    height: 76px;
-                    background-image: url('./assets/title02bg.png');
-                    padding: 11px 14px 12px 22.5px;
-                    background-size: cover;
-                    position: relative;
-                    .cl1 {
+                        justify-content: space-between;
+
+                        .name {
+                            height: 24px;
+                            color: rgba(59, 65, 75, 1);
+                            font-family: Microsoft YaHei;
                             font-size: 16px;
                             font-weight: 700;
-                        font-family: 'Microsoft YaHei';
-                        line-height: 24px;
-                        color: rgb(59, 65, 75);
-                        margin-bottom: 5px;
-                    }
-                    .cl2 {
-                        font-size: 16px;
-                        font-weight: 400;
-                        font-family: 'Microsoft YaHei';
                             line-height: 24px;
-                        color: rgb(59, 65, 75);
                         }
-                    .cl3 {
-                        position: absolute;
-                        top: 11px;
-                        right: 14px;
+
+                        .time {
+                            height: 30px;
+                            color: rgba(95, 101, 108, 1);
+                            font-family: Microsoft YaHei;
                             font-size: 16px;
                             font-weight: 400;
-                        font-family: 'Microsoft YaHei';
                             line-height: 30px;
-                        color: rgb(95, 101, 108);
-                    }
                         }
                     }
-            .malaby {
-                width: 740px;
-                height: 98px;
-                margin-bottom: 16px;
-                display: flex;
-                img {
-                    width: 36px;
-                    height: 36px;
-                    margin-right: 8.5px;
-                }
-                .malaby-main {
-                    width: 695.6px;
-                    height: 98px;
-                    background-image: url('./assets/title03bg.png');
-                    padding: 11px 14px 12px 22.5px;
-                    background-size: cover;
-                    position: relative;
-                    .cl1 {
-                        font-size: 16px;
-                        font-weight: 700;
-                        font-family: 'Microsoft YaHei';
-                        line-height: 24px;
-                        color: rgb(59, 65, 75);
-                        margin-bottom: 5px;
-                    }
-                    .cl2 {
+
+                    .content {
+                        color: rgba(59, 65, 75, 1);
+                        font-family: Microsoft YaHei;
                         font-size: 16px;
                         font-weight: 400;
-                        font-family: 'Microsoft YaHei';
                         line-height: 24px;
-                        color: rgb(59, 65, 75);
-                    }
-                    .cl3 {
-                        position: absolute;
-                        top: 11px;
-                        right: 14px;
-                        font-size: 16px;
-                        font-weight: 400;
-                        font-family: 'Microsoft YaHei';
-                        line-height: 30px;
-                        color: rgb(95, 101, 108);
                     }
                 }
             }

src/views/scientificFunding/components/dataNew/index.vue

 <template>
 	<div class="data-new">
 		<div class="left">
-			<img src="./assets/leftbtn.png" alt="" class="left-btn" />
-			<img src="./assets/rightbtn.png" alt="" class="right-btn" />
+			<img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handleSwithCurDecree('left')" />
+			<img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleSwithCurDecree('right')" />
 			<div class="left-top">
 				<img src="./assets/icon01.png" alt="" />
 				<div class="left-top-title">最新资助项目</div>
 				<span>查看详情 ></span>
 			</div>
+			<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
+				indicator-position="none">
+				<el-carousel-item v-for="(itemData, indexData) in box1Data" :key="index">
 					<div class="left-center">
-				<img src="./assets/usImg.png" alt="" />
+
+						<img :src="itemData.logoUrl" alt="" />
 						<div class="left-center-main">
 							<div class="left-center-main-title">
-						NSF 在 EPSCoR 的管辖区投资 3000 万美元，用于能源、半导体、纳米技术和生物技术领域的研究和人才发展
+								{{ itemData.projectName }}
 							</div>
 							<div class="left-center-main-ul">
 								<ul>
@@ -22,22 +26,20 @@
 									</li>
 									<li>
 										<span class="ul-title">发布日期：</span>
-								<span class="ul-content">2025年11月26日</span>
+										<span class="ul-content">{{ itemData.publicationDate }}</span>
 									</li>
 									<li>
 										<span class="ul-title">资助经费：</span>
-								<span class="ul-content">3,000</span>
+										<span class="ul-content">{{ itemData.amount }}</span>
 									</li>
 									<li>
 										<span class="ul-title">涉及领域：</span>
-								<span class="ul-pie cl1">能源</span>
-								<span class="ul-pie cl2">集成电路</span>
-								<span class="ul-pie cl3">新材料</span>
-								<span class="ul-pie cl4">生物科技</span>
+										<span class="ul-pie cl1" v-for="value in itemData.toOrgNameList">{{ value }}</span>
+
 									</li>
 									<li>
 										<span class="ul-title">资助对象：</span>
-								<span class="ul-content">蒙大拿理工大学、博伊西州立大学、路易斯安那州立大学等6个资助对象</span>
+										<span class="ul-content">{{ itemData.fromOrgNameList.join(',') }}</span>
 									</li>
 								</ul>
 							</div>
@@ -48,35 +50,32 @@
 						<ul>
 							<li class="left-bottom-li">内容摘要：</li>
 						</ul>
-				<div class="left-bottom-content">
-					美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州投资约 3000 万美元，建立 NSF EPSCoR
-					科学与技术卓越研究中心（NSF EPSCoR CREST 中心）。这些中心旨在扩展 STEM
-					知识，提升科研产出，并吸引更多来自这些地区的学生进入 STEM 领域。
+						<div class="left-bottom-content">{{ itemData.abstractContent }}
 						</div>
 					</div>
+				</el-carousel-item>
+			</el-carousel>
+
 		</div>
 		<div class="right">
 			<div class="right-top">
 				<img src="./assets/icon02.png" alt="" />
 				<div class="right-top-title">
 					风险信号
-					<span>6</span>
+					<span>{{ list.length }}</span>
 				</div>
 			</div>
 			<div style="margin: 6px 34px 0 23px">
-				<div v-for="item in list" :key="item.id" class="right-main">
-					<div
-						class="main-left"
-						:class="{
-							cl4: item.title === '特别重大',
-							cl5: item.title === '重大风险',
-							cl6: item.title === '一般风险'
-						}"
-					>
-						{{ item.title }}
+				<div v-for="item, index in list" :key="index" class="right-main">
+					<div class="main-left" :class="{
+						cl4: item.signalLevel === '特别重大',
+						cl5: item.signalLevel === '重大风险',
+						cl6: item.signalLevel === '一般风险'
+					}">
+						{{ item.signalLevel }}
 					</div>
-					<div class="main-center">{{ item.content }}</div>
-					<div class="main-right">{{ item.time }}</div>
+					<div class="main-center">{{ item.signalTitle }}</div>
+					<div class="main-right">{{ item.signalTime }}</div>
 				</div>
 			</div>
 			<div class="right-mainbtn" @click="handleToMoreRiskSignal">
@@ -88,7 +87,10 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import {
+	getNewProject, getRiskSignal
+} from "@/api/scientificFunding/overview";
 import router from "@/router";
 
 const list = ref([
@@ -130,11 +132,52 @@ const list = ref([
 	}
 ]);
 
+//// 获取风险信号
+const handleGetRiskSignal = async () => {
+	try {
+		const res = await getRiskSignal();
+		console.log("获取风险信号", res);
+		if (res.code === 200 && res.data) {
+			list.value = res.data
+		}
+	} catch (error) {
+		console.error("获取风险信号error", error);
+	}
+};
+
 // 查看更多风险信号
 const handleToMoreRiskSignal = () => {
 	const route = router.resolve("/riskSignal");
 	window.open(route.href, "_blank");
 };
+const box1Data = ref([])
+const carouselRef = ref(null);
+// 切换当前智库
+const handleSwithCurDecree = name => {
+	console.log(name, carouselRef.value);
+	if (name === "left") {
+		carouselRef.value.prev();
+	} else {
+		carouselRef.value.next();
+	}
+};
+//// 最新资助项目
+const handleGetNewProject = async () => {
+	try {
+		const res = await getNewProject();
+		console.log("最新资助项目", res);
+		if (res.code === 200 && res.data) {
+			box1Data.value = res.data
+		}
+	} catch (error) {
+		console.error("获取最新资助项目error", error);
+	}
+};
+
+onMounted(async () => {
+	handleGetRiskSignal()
+	handleGetNewProject()
+});
 </script>
 
 <style scoped lang="scss">
@@ -142,11 +185,13 @@ const handleToMoreRiskSignal = () => {
 	margin: 0;
 	padding: 0;
 }
+
 .data-new {
 	width: 1600px;
 	height: 460px;
 	display: flex;
 	justify-content: space-between;
+
 	.left {
 		width: 1064px;
 		height: 460px;
@@ -156,6 +201,7 @@ const handleToMoreRiskSignal = () => {
 		border: 1px solid rgb(234, 236, 238);
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		position: relative;
+
 		.left-btn {
 			width: 24px;
 			height: 48px;
@@ -163,7 +209,9 @@ const handleToMoreRiskSignal = () => {
 			top: 223px;
 			left: 0px;
 			cursor: pointer;
+			z-index: 1000;
 		}
+
 		.right-btn {
 			width: 24px;
 			height: 48px;
@@ -171,12 +219,15 @@ const handleToMoreRiskSignal = () => {
 			top: 223px;
 			right: 0px;
 			cursor: pointer;
+			z-index: 1000;
 		}
+
 		.left-top {
 			width: 100%;
 			height: 48px;
 			position: relative;
 			border-bottom: 1px solid rgb(234, 236, 238);
+
 			img {
 				width: 22px;
 				height: 22px;
@@ -184,6 +235,7 @@ const handleToMoreRiskSignal = () => {
 				top: 15px;
 				left: 23px;
 			}
+
 			span {
 				font-size: 16px;
 				font-weight: 400;
@@ -194,9 +246,10 @@ const handleToMoreRiskSignal = () => {
 				color: rgb(5, 95, 194);
 				cursor: pointer;
 			}
+
 			.left-top-title {
 				margin-left: 60px;
-				width: 152px;
+				width: 156px;
 				height: 48px;
 				background-color: rgb(5, 95, 194);
 				color: #fff;
@@ -208,6 +261,7 @@ const handleToMoreRiskSignal = () => {
 				padding: 11px 16px;
 			}
 		}
+
 		.left-center {
 			width: 967px;
 			height: 250px;
@@ -215,15 +269,19 @@ const handleToMoreRiskSignal = () => {
 			margin-left: 62px;
 			border-bottom: 1px solid rgb(234, 236, 238);
 			position: relative;
+
 			img {
 				width: 148px;
 				height: 148px;
 				margin-right: 21px;
 			}
+
 			display: flex;
+
 			.left-center-main {
 				width: 758px;
 				height: 175px;
+
 				.left-center-main-title {
 					margin-left: 19px;
 					margin-bottom: 17px;
@@ -232,15 +290,19 @@ const handleToMoreRiskSignal = () => {
 					font-family: "Microsoft YaHei";
 					color: rgb(5, 95, 194);
 				}
+
 				.left-center-main-ul {
 					// width: 439px;
 					height: 132px;
+
 					ul {
 						list-style-position: inside;
+
 						li {
 							width: 100%;
 							height: 24px;
 							margin-bottom: 12px;
+
 							.ul-title {
 								display: inline-block;
 								width: 120px;
@@ -251,6 +313,7 @@ const handleToMoreRiskSignal = () => {
 								line-height: 24px;
 								color: rgb(59, 65, 75);
 							}
+
 							.ul-content {
 								color: rgb(59, 65, 75);
 								font-family: "Microsoft YaHei";
@@ -258,6 +321,7 @@ const handleToMoreRiskSignal = () => {
 								font-weight: 400;
 								line-height: 24px;
 							}
+
 							.ul-pie {
 								display: inline-block;
 								box-sizing: border-box;
@@ -266,21 +330,25 @@ const handleToMoreRiskSignal = () => {
 								border-radius: 4px;
 								margin-right: 8px;
 							}
+
 							.cl1 {
 								border-color: rgba(186, 224, 255, 1);
 								background-color: rgba(230, 244, 255, 1);
 								color: rgba(22, 119, 255, 1);
 							}
+
 							.cl2 {
 								border-color: rgba(255, 163, 158, 1);
 								background-color: rgba(255, 241, 240, 1);
 								color: rgba(245, 34, 45, 1);
 							}
+
 							.cl3 {
 								border-color: rgba(135, 232, 222, 1);
 								background-color: rgba(230, 255, 251, 1);
 								color: rgba(19, 168, 168, 1);
 							}
+
 							.cl4 {
 								border-color: rgba(211, 173, 247, 1);
 								background-color: rgba(249, 240, 255, 1);
@@ -290,6 +358,7 @@ const handleToMoreRiskSignal = () => {
 					}
 				}
 			}
+
 			.left-center-title {
 				padding: 3px 8px 5px;
 				height: 32px;
@@ -305,10 +374,13 @@ const handleToMoreRiskSignal = () => {
 				top: -1px;
 			}
 		}
+
 		.left-bottom {
 			margin: 17px 0 0 62px;
+
 			ul {
 				list-style-position: inside;
+
 				.left-bottom-li {
 					font-size: 16px;
 					font-weight: 700;
@@ -318,6 +390,7 @@ const handleToMoreRiskSignal = () => {
 					margin-bottom: 10px;
 				}
 			}
+
 			.left-bottom-content {
 				width: 943px;
 				margin-left: 22px;
@@ -329,6 +402,7 @@ const handleToMoreRiskSignal = () => {
 			}
 		}
 	}
+
 	.right {
 		width: 520px;
 		height: 460px;
@@ -337,11 +411,13 @@ const handleToMoreRiskSignal = () => {
 		border: 1px solid rgb(234, 236, 238);
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		position: relative;
+
 		.right-top {
 			width: 520px;
 			height: 48px;
 			border-bottom: 1px solid rgb(234, 236, 238);
 			position: relative;
+
 			img {
 				width: 21px;
 				height: 16.84px;
@@ -349,6 +425,7 @@ const handleToMoreRiskSignal = () => {
 				top: 15.1px;
 				left: 19.5px;
 			}
+
 			.right-top-title {
 				padding: 11px 16px;
 				width: 148px;
@@ -361,6 +438,7 @@ const handleToMoreRiskSignal = () => {
 				text-align: center;
 				color: #fff;
 				margin-left: 60px;
+
 				span {
 					display: inline-block;
 					width: 24px;
@@ -376,6 +454,7 @@ const handleToMoreRiskSignal = () => {
 				}
 			}
 		}
+
 		.right-main {
 			width: 468px;
 			padding-right: 5px;
@@ -384,9 +463,11 @@ const handleToMoreRiskSignal = () => {
 			display: flex;
 			align-items: center;
 			cursor: pointer;
+
 			&:hover {
 				background: var(--color-bg-hover);
 			}
+
 			.main-left {
 				width: 40px;
 				height: 40px;
@@ -399,20 +480,31 @@ const handleToMoreRiskSignal = () => {
 				padding: 6px 4px;
 				text-align: center;
 			}
+
 			.cl4 {
 				background-color: rgba(255, 241, 240, 1);
 				color: rgb(206, 79, 81);
 			}
+
 			.cl5 {
 				background-color: rgba(255, 247, 230, 1);
 				color: rgba(250, 140, 22, 1);
 			}
+
 			.cl6 {
 				background-color: rgba(246, 255, 237, 1);
 				color: rgba(82, 196, 26, 1);
 			}
+
 			.main-center {
-				width: 347px;
+				white-space: nowrap;
+				/* 保持在一行内 */
+				overflow: hidden;
+				/* 隐藏超出部分 */
+				text-overflow: ellipsis;
+				/* 超出部分显示省略号 */
+				width: 200px;
+				/* 设置一个固定的宽度 */
 				height: 30px;
 				font-size: 16px;
 				font-weight: 400;
@@ -421,8 +513,9 @@ const handleToMoreRiskSignal = () => {
 				color: rgb(59, 65, 75);
 				margin-right: 2px;
 			}
+
 			.main-right {
-				width: 60px;
+				width: 115px;
 				height: 24px;
 				font-size: 16px;
 				font-weight: 400;
@@ -432,6 +525,7 @@ const handleToMoreRiskSignal = () => {
 				text-align: right;
 			}
 		}
+
 		.right-mainbtn {
 			width: 460px;
 			height: 42px;
@@ -445,11 +539,13 @@ const handleToMoreRiskSignal = () => {
 			align-items: center;
 			justify-content: center;
 			cursor: pointer;
+
 			img {
 				width: 16px;
 				height: 16px;
 				margin-right: 8px;
 			}
+
 			font-size: 16px;
 			font-weight: 400;
 			font-family: "Microsoft YaHei";

src/views/scientificFunding/components/dataSub/index.vue

@@ -5,19 +5,29 @@
 				<div class="left-title">
 					<img src="./assets/icon01.png" alt="" />
 					<div class="tit">资助领域分布情况</div>
-					<el-select v-model="value1" placeholder="Select" class="select">
+					<div :class="radio1 === true ? 'btn-select' : 'btn'" style="		right:250px;" @click="changeradio1()">
+						资助经费
+					</div>
+					<div :class="radio1 === false ? 'btn-select' : 'btn'" style="		right: 150px;" @click="changeradio1()">
+						资助项目
+					</div>
+
+					<el-select v-model="value1" placeholder="Select" class="select" style="		right: 31px;">
 						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</div>
 				<div class="left-main">
-					<div class="left-main-echarts" ref="leftChartRef"></div>
+
+					<div class="left-main-echarts" ref="leftChartRef" v-show="radio1 === true">资助经费</div>
+					<div class="left-main-echarts" ref="leftChartRef1" v-show="radio1 === false">资助项目</div>
+
 				</div>
 			</div>
 			<div class="left">
 				<div class="left-title">
 					<img src="./assets/icon03.png" alt="" />
 					<div class="tit">机构资助领域情况</div>
-					<el-select v-model="value2" placeholder="Select" class="select">
+					<el-select v-model="value2" placeholder="Select" class="select" @change="handleGetOrgFundsArea">
 						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</div>
@@ -43,7 +53,7 @@
 			<div class="right">
 				<div class="right-title">
 					<img src="./assets/icon03.png" alt="" />
-					<div class="tit">承研主体排名</div>
+					<div class="tit">项目资助强度分布</div>
 					<el-select v-model="value3" placeholder="Select" class="select">
 						<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
@@ -59,103 +69,202 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+import {
+	findFundField, findCountryProjectAreaList, getCountryFundingChange, getCountryFundProjectChange, getOrgFundsArea, getOrgFundStrength
+} from "@/api/scientificFunding/overview";
+
 import * as echarts from "echarts";
-import NSF from "./assets/NSF.png";
-import DARPA from "./assets/DARPA.png";
-import NASA from "./assets/NASA.png";
-import NIH from "./assets/NIH.png";
-import NIST from "./assets/NIST.png";
-
-import img01 from "./assets/斯坦福大学.png"
-import img02 from "./assets/加州大学旧金山分校.png"
-import img03 from "./assets/宾夕法尼亚大学.png"
-import img04 from "./assets/约翰斯·霍普金斯大学.png"
-import img05 from "./assets/康奈尔大学.png"
-import img06 from "./assets/华盛顿大学.png"
-import img07 from "./assets/麻省理工大学.png"
-
-
-const value = ref("近十年");
-const value1 = ref("2025年");
-const value2 = ref("2025年");
-const value3 = ref("2025年");
-
-const universityData = [
-	{
-		name: "斯坦福大学",
-		img: img01,
-		value: 24,
-		color: "linear-gradient(270deg, #D15054 0%, rgba(209,80,84,0) 100%)"
-	},
-	{
-		name: "加州大学旧金山分校",
-		img: img02,
-		value: 18,
-		color: "linear-gradient(270deg, #F69C45 0%, rgba(246,156,69,0) 100%)"
-	},
-	{
-		name: "宾夕法尼亚大学",
-		img: img03,
-		value: 12,
-		color: "linear-gradient(270deg, #EBC818 0%, rgba(235,200,24,0) 100%)"
-	},
-	{
-		name: "约翰斯·霍普金斯大学",
-		img: img04,
-		value: 11,
-		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
-	},
-	{
-		name: "康奈尔大学",
-		img: img05,
-		value: 10,
-		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
-	},
-	{
-		name: "华盛顿大学（圣路易斯）",
-		img: img06,
-		value: 6,
-		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
-	},
-	{
-		name: "麻省理工大学",
-		img: img07,
-		value: 4,
-		color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
-	}
-];
+
+
+
+const value = ref(10);
+
+
+
 
 const options = [
 	{
-		value: "近十年",
+		value: 10,
 		label: "近十年"
 	},
 	{
-		value: "近五年",
+		value: 5,
 		label: "近五年"
 	}
 ];
 const options1 = [
 	{
-		value: "2025年",
+		value: "2025",
 		label: "2025年"
 	},
 	{
-		value: "2024年",
+		value: "2024",
 		label: "2024年"
 	}
 ];
-
+//获取当前时间x年前的日期
+function getDateYearsAgo(years) {
+	// 获取当前日期
+	const currentDate = new Date();
+	// 计算指定年数之前的日期
+	const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
+	// 格式化日期为 "YYYY-MM-DD" 的形式
+	const year = pastDate.getFullYear();
+	const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
+	const day = String(pastDate.getDate()).padStart(2, "0");
+	return `${year}-${month}-${day}`;
+}
+const radio1 = ref(true)
+const changeradio1 = () => {
+	radio1.value = !radio1.value
+}
+const value1 = ref(2025);
 const leftChartRef = ref(null);
+const leftChartRef1 = ref(null);
+// 资助体系v2.0:资助领域分布情况:资助经费
+const handleGetFundField = async () => {
+	try {
+		let params = {
+			year: value1.value
+		}
+		const res = await findFundField(params);
+		console.log("资助领域分布情况", res);
+		if (res.code === 200 && res.data) {
+			initLeftDonut(res.data, true)
+		}
+	} catch (error) {
+		console.error("获取资助领域分布情况error", error);
+	}
+};
+
+//资助体系v2.0:资助领域分布情况:资助项目
+const handleFindCountryProjectAreaList = async () => {
+	try {
+		let params = {
+			year: value1.value
+		}
+		const res = await findCountryProjectAreaList(params);
+		console.log("资助领域分布情况", res);
+		if (res.code === 200 && res.data) {
+			initLeftDonut(res.data, false)
+		}
+	} catch (error) {
+		console.error("获取资助领域分布情况error", error);
+	}
+};
+// 资助领域分布情况
+const initLeftDonut = (rawData, show) => {
+
+	const color = [
+		'rgba(206, 79, 81, 1)',
+		'rgba(145, 202, 255, 1)',
+		'rgba(255, 169, 64, 1)',
+		'rgba(146, 84, 222, 1)',
+		'rgba(92, 219, 211, 1)',
+		'rgba(5, 95, 194, 1)'
+	];
+
+	const option = {
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'shadow'
+			}
+		},
+
+		xAxis: {
+			type: 'value',
+			boundaryGap: [0, 0.01],
+			axisLabel: {
+				show: false // 不展示X轴文字
+			}
+		},
+		yAxis: {
+			type: 'category',
+			data: rawData.map(item => item.countryName)
+		},
+		series: rawData.flatMap(country => {
+			return country.fundAreaList.map((area, index) => ({
+				name: area.areaName,
+				type: 'bar',
+				stack: country.countryName,
+				itemStyle: {
+					color: color[index % color.length]
+				},
+				data: country.fundAreaList.map(a => a.amount)
+			}));
+		}).map((seriesItem, index) => ({
+			...seriesItem,
+			data: seriesItem.data.map((amount, i) => ({
+				value: amount,
+				name: rawData[i].countryName
+			}))
+		}))
+	};
+	if (show == true) {
+
+		leftChart = echarts.init(leftChartRef.value);
+		leftChart.setOption(option);
+	} else {
+
+		leftChart1 = echarts.init(leftChartRef1.value);
+		leftChart1.setOption(option);
+	}
+
+};
 const rightChartRef = ref(null);
-const leftSankeyRef = ref(null);
-const boxplotChartRef = ref(null);
-let leftChart;
-let rightChart;
-let leftSankey;
-let boxplotChart;
+// 资助体系v2.0:资助经费变化情况:资助经费 
+const handlegetCountryFundingChange = async () => {
+	try {
+		let params = {
+			startDate: getDateYearsAgo(value.value)
+		}
+		const res = await getCountryFundingChange(params);
+		console.log("资助经费变化情况", res);
+		if (res.code === 200 && res.data) {
+			initRightLine(res.data, true)
+		}
+	} catch (error) {
+		console.error("获取资助经费变化情况error", error);
+	}
+};
+//资助体系v2.0:资助经费变化情况:资助项目
+// getCountryFundProjectChange
+const fundProjectChange = ref([])
+const handlegetCountryFundProjectChange = async () => {
+	try {
+		let params = {
+			startDate: getDateYearsAgo(value.value)
+		}
+		const res = await getCountryFundProjectChange(params);
+		console.log("资助项目变化情况", res);
+		if (res.code === 200 && res.data) {
+			initRightLine(res.data)
+		}
+	} catch (error) {
+		console.error("获取资助项目变化情况error", error);
+	}
+};
 
-const initBoxPlot = () => {
+//项目资助强度分布
+const value3 = ref(2025);
+const boxplotChartRef = ref(null);
+const handlegetOrgFundStrength = async () => {
+	try {
+		let params = {
+			year: value3.value
+		}
+		const res = await getOrgFundStrength(params);
+		console.log("项目资助强度分布", res);
+		if (res.code === 200 && res.data) {
+			initBoxPlot(res.data)
+		}
+	} catch (error) {
+		console.error("获取项目资助强度分布error", error);
+	}
+};
+//项目资助强度分布
+const initBoxPlot = (data) => {
 	if (!boxplotChartRef.value) {
 		console.warn("boxplotChartRef is null");
 		return;
@@ -163,20 +272,25 @@ const initBoxPlot = () => {
 	if (boxplotChart) boxplotChart.dispose();
 	boxplotChart = echarts.init(boxplotChartRef.value);
 
-    const categories = ["人工智能", "通信网络", "生物科技", "能源"];
-    const dataUS = [
-        [28, 40, 60, 72, 82],
-        [22, 32, 42, 50, 55],
-        [52, 65, 85, 96, 105],
-        [18, 30, 52, 62, 72]
-    ];
-    const dataCN = [
-        [30, 35, 58, 80, 95],
-        [15, 20, 22, 30, 31],
-        [55, 58, 82, 105, 118],
-        [20, 25, 48, 72, 85]
-    ];
+	// 提取所有行业名称
+	const categories = data.map(item => item.industryName);
+
+	// 初始化数据数组
+	const dataUS = [];
+	const dataCN = [];
+
+	// 遍历数据，填充每个行业的数据
+	data.forEach(item => {
+		const { industryName, orgDonationSourceVOList } = item;
+		const usData = orgDonationSourceVOList.find(org => org.orgName === "美国")?.amount || 0;
+		const cnData = orgDonationSourceVOList.find(org => org.orgName === "中国")?.amount || 0;
+
+		// 生成箱线图所需的五数概括（最小值、Q1、中位数、Q3、最大值）
+		dataUS.push([usData, usData, usData, usData, usData]); // 示例数据，实际应根据数据计算
+		dataCN.push([cnData, cnData, cnData, cnData, cnData]); // 示例数据，实际应根据数据计算
+	});
 
+	// 构建 ECharts 配置
 	const option = {
 		legend: {
 			data: ["美国", "中国"],
@@ -289,158 +403,81 @@ const initBoxPlot = () => {
 			}
 		]
 	};
+
 	boxplotChart.setOption(option);
 };
 
-const initLeftDonut = () => {
-	if (!leftChartRef.value) return;
-	if (leftChart) leftChart.dispose();
-	leftChart = echarts.init(leftChartRef.value);
 
-	const categories = ["集成电路", "人工智能", "通信网络", "能源", "先进制造", "生物科技", "航空航天", "新材料"];
-	const usData = [50, 46, 40, 32, 31, 31, 30, 24];
-	const cnData = [45, 42, 35, 28, 28, 33, 25, 20];
-	
-	const colors = [
-		"#D15054", // 红色
-		"#91CCFF", // 浅蓝
-		"#FFAB4C", // 橙色
-		"#975FE4", // 紫色
-		"#5CDBD3", // 青色
-		"#005FCB", // 深蓝
-		"#B37FEB", // 浅紫
-		"#FFA39E"  // 浅红
+
+let leftChart;
+let leftChart1;
+let rightChart;
+let leftSankey;
+let boxplotChart;
+
+
+
+//资助经费变化情况
+const initRightLine = (data) => {
+	if (!rightChartRef.value) return;
+	if (rightChart) rightChart.dispose();
+	rightChart = echarts.init(rightChartRef.value);
+	const colorMap = [
+		"rgba(20, 89, 187, 1)",
+		"rgba(206, 79, 81, 1)",
+		"rgba(255, 172, 77, 1)",
+		"rgba(19, 168, 168, 1)",
+		"rgba(114, 46, 209, 1)"
 	];
+	// 提取所有年份
+	const years = data.map(item => item.year);
 
-	const series = categories.map((name, index) => ({
-		name: name,
-		type: 'bar',
-		stack: 'total',
-		barWidth: 46,
-		itemStyle: {
-			color: colors[index],
-            borderWidth: 0
-		},
-		data: [cnData[index], usData[index]]
-	}));
+	// 提取所有组织名称
+	const orgNames = data.flatMap(item => item.fundsOrgList.map(org => org.orgName));
+	const uniqueOrgNames = [...new Set(orgNames)];
 
-	// 计算总和用于右侧显示
-	const usTotal = usData.reduce((a, b) => a + b, 0);
-	const cnTotal = cnData.reduce((a, b) => a + b, 0);
+	// 构建 series 数据
+	const series = uniqueOrgNames.map((orgName, index) => {
+		const values = years.map(year => {
+			const yearData = data.find(d => d.year === year);
+			if (yearData) {
+				const orgData = yearData.fundsOrgList.find(o => o.orgName === orgName);
+				return orgData ? orgData.amount : 0;
+			}
+			return 0;
+		});
 
-	// 添加一个辅助系列用于显示右侧的总数值
-	series.push({
-		name: 'Total',
-		type: 'bar',
-		stack: 'total',
-		itemStyle: {
-			color: 'transparent'
-		},
-		label: {
+		// 提取颜色并设置透明度为 0.2
+		const color = colorMap[index % colorMap.length];
+		const areaColor = color.replace("1)", "0.2)");
+
+		return {
+			name: orgName,
+			type: "line",
+			data: values,
+			symbol: "none",
+			showSymbol: false,
+			endLabel: {
 				show: true,
-			position: 'right',
-			formatter: (params) => {
-				const totals = [cnTotal, usTotal];
-				return `{val|${totals[params.dataIndex]}}{unit| 亿美元}`;
-			},
+				formatter: orgName, // 只显示 orgName
 				rich: {
-				val: {
-					fontSize: 18,
-					color: '#3B414B',
+					[orgName]: {
+						fontSize: 14,
+						fontFamily: "Microsoft YaHei",
 						fontWeight: 400,
-					padding: [0, 0, 0, 15]
-				},
-				unit: {
-					fontSize: 16,
-					color: '#3B414B'
+						lineHeight: 22,
+						color: color
 					}
 				}
 			},
-		data: [0.1, 0.1] // 给予极小数值以触发label渲染
-	});
+			areaStyle: { color: areaColor }
+		};
 
-	const option = {
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: { type: 'shadow' },
-			formatter: (params) => {
-				let res = `${params[0].name}<br/>`;
-				params.forEach(item => {
-					if (item.seriesName !== 'Total') {
-						res += `${item.marker} ${item.seriesName}: ${item.value} 亿美元<br/>`;
-					}
 	});
-				return res;
-			}
-		},
-		legend: {
-			data: categories,
-			left: 20,
-			top: 0,
-			itemWidth: 12,
-			itemHeight: 12,
-			icon: 'circle',
-			textStyle: {
-				color: "#5F656C",
-				fontSize: 14
-			}
-		},
-		grid: {
-			left: '5%',
-			right: '20%',
-			top: '10%',
-			bottom: '10%',
-			containLabel: true
-		},
-		xAxis: {
-			type: 'value',
-			show: true,
-            axisLine: { show: false },
-            axisTick: { show: false },
-            axisLabel: { show: false },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: '#E6E6E6',
-                    type: 'dashed'
-                }
-            }
-		},
-		yAxis: {
-			type: 'category',
-			data: ['中国', '美国'],
-			axisLine: { show: false },
-			axisTick: { show: false },
-			axisLabel: {
-				fontSize: 20,
-				color: '#3B414B',
-				margin: 30
-			}
-		},
-		series: series
-	};
-	leftChart.setOption(option);
-};
 
-const initRightLine = () => {
-	if (!rightChartRef.value) return;
-	if (rightChart) rightChart.dispose();
-	rightChart = echarts.init(rightChartRef.value);
-	const years = ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"];
-	const nsf = [75, 35, 45, 60, 72, 68, 95, 85, 82, 80, 80, 86];
-	const darpa = [55, 40, 48, 42, 60, 65, 70, 78, 60, 92, 85, 80];
-	const nasa = [60, 42, 28, 25, 30, 35, 40, 52, 38, 60, 36, 42];
-	const nih = [38, 25, 22, 28, 30, 34, 40, 60, 28, 35, 22, 34];
-	const nist = [40, 28, 22, 20, 24, 26, 30, 50, 25, 20, 18, 15];
-	const colorMap = {
-		NSF: "rgba(20, 89, 187, 1)",
-		DARPA: "rgba(206, 79, 81, 1)",
-		NASA: "rgba(255, 172, 77, 1)",
-		NIH: "rgba(19, 168, 168, 1)",
-		NIST: "rgba(114, 46, 209, 1)"
-	};
+	// 构建 ECharts 配置
 	const option = {
-		color: [colorMap.NSF, colorMap.DARPA, colorMap.NASA, colorMap.NIH, colorMap.NIST],
+		color: colorMap,
 		grid: { left: 40, right: 80, top: 20, bottom: 40 },
 		tooltip: { trigger: "axis" },
 		legend: { show: false },
@@ -473,240 +510,89 @@ const initRightLine = () => {
 				lineHeight: 22
 			}
 		},
-		series: [
-			{
-				name: "NSF",
-				type: "line",
-				data: nsf,
-				symbol: "none",
-				showSymbol: false,
-				endLabel: {
-					show: true,
-					formatter: () => `{NSF| }  {t_NSF|NSF}`,
-					rich: {
-						NSF: { backgroundColor: { image: NSF }, width: 16, height: 16 },
-						t_NSF: {
-							fontSize: 14,
-							fontFamily: "Microsoft YaHei",
-							fontWeight: 400,
-							lineHeight: 22,
-							color: colorMap.NSF
-						}
-					}
-				},
-				areaStyle: { color: "rgba(20,89,187,0.12)" }
-			},
-			{
-				name: "DARPA",
-				type: "line",
-				data: darpa,
-				symbol: "none",
-				showSymbol: false,
-				endLabel: {
-					show: true,
-					formatter: () => `{DARPA| }  {t_DARPA|DARPA}`,
-					rich: {
-						DARPA: { backgroundColor: { image: DARPA }, width: 16, height: 16 },
-						t_DARPA: {
-							fontSize: 14,
-							fontFamily: "Microsoft YaHei",
-							fontWeight: 400,
-							lineHeight: 22,
-							color: colorMap.DARPA
-						}
-					}
-				},
-				areaStyle: { color: "rgba(206,79,81,0.12)" }
-			},
-			{
-				name: "NASA",
-				type: "line",
-				data: nasa,
-				symbol: "none",
-				showSymbol: false,
-				endLabel: {
-					show: true,
-					formatter: () => `{NASA| }  {t_NASA|NASA}`,
-					rich: {
-						NASA: { backgroundColor: { image: NASA }, width: 16, height: 16 },
-						t_NASA: {
-							fontSize: 14,
-							fontFamily: "Microsoft YaHei",
-							fontWeight: 400,
-							lineHeight: 22,
-							color: colorMap.NASA
-						}
-					}
-				},
-				areaStyle: { color: "rgba(255,172,77,0.12)" }
-			},
-			{
-				name: "NIH",
-				type: "line",
-				data: nih,
-				symbol: "none",
-				showSymbol: false,
-				endLabel: {
-					show: true,
-					formatter: () => `{NIH| }  {t_NIH|NIH}`,
-					rich: {
-						NIH: { backgroundColor: { image: NIH }, width: 16, height: 16 },
-						t_NIH: {
-							fontSize: 14,
-							fontFamily: "Microsoft YaHei",
-							fontWeight: 400,
-							lineHeight: 22,
-							color: colorMap.NIH
-						}
-					}
-				},
-				areaStyle: { color: "rgba(19,168,168,0.12)" }
-			},
-			{
-				name: "NIST",
-				type: "line",
-				data: nist,
-				symbol: "none",
-				showSymbol: false,
-				endLabel: {
-					show: true,
-					formatter: () => `{NIST| }  {t_NIST|NIST}`,
-					rich: {
-						NIST: { backgroundColor: { image: NIST }, width: 16, height: 16 },
-						t_NIST: {
-							fontSize: 14,
-							fontFamily: "Microsoft YaHei",
-							fontWeight: 400,
-							lineHeight: 22,
-							color: colorMap.NIST
-						}
-					}
-				},
-				areaStyle: { color: "rgba(114,46,209,0.12)" }
-			}
-		]
+		series: series
 	};
 	rightChart.setOption(option);
 };
 
-const initLeftSankey = () => {
+const leftSankeyRef = ref(null);
+const value2 = ref(2025);
+// 机构资助领域情况
+const handleGetOrgFundsArea = async () => {
+	try {
+		let params = {
+			year: value2.value
+		}
+		const res = await getOrgFundsArea(params);
+		console.log("机构资助领域情况", res);
+		if (res.code === 200 && res.data) {
+			initLeftSankey(res.data)
+		}
+	} catch (error) {
+		console.error("获取机构资助领域情况error", error);
+	}
+};
+//机构资助领域情况
+const initLeftSankey = (data) => {
 	if (!leftSankeyRef.value) return;
 	if (leftSankey) leftSankey.dispose();
 	leftSankey = echarts.init(leftSankeyRef.value);
-    const leftNodes = [
-        { name: "美国国防高级研究计划局DARPA" },
-        { name: "美国国家科学基金会NSF" },
-        { name: "美国国家航空航天局NASA" },
-        { name: "美国国立卫生研究院NIH" },
-        { name: "美国农业部USDA" },
-        { name: "国家标准与技术研究院NIST" },
-        { name: "美国能源部DOE" }
-    ];
-    const rightNodes = [
-        { name: "人工智能" },
-        { name: "生物科技" },
-        { name: "量子科技" },
-        { name: "新材料" },
-        { name: "集成电路" },
-        { name: "通信网络" },
-        { name: "能源" },
-        { name: "先进制造" },
-        { name: "航空航天" }
-    ];
-    const nodes = [...leftNodes, ...rightNodes];
-    const links = [
-        { source: "美国国防高级研究计划局DARPA", target: "人工智能", value: 20 },
-        { source: "美国国防高级研究计划局DARPA", target: "量子科技", value: 10 },
-        { source: "美国国防高级研究计划局DARPA", target: "通信网络", value: 8 },
-        { source: "美国国家科学基金会NSF", target: "生物科技", value: 16 },
-        { source: "美国国家科学基金会NSF", target: "集成电路", value: 12 },
-        { source: "美国国家科学基金会NSF", target: "新材料", value: 9 },
-        { source: "美国国家航空航天局NASA", target: "航空航天", value: 22 },
-        { source: "美国国家航空航天局NASA", target: "通信网络", value: 6 },
-        { source: "美国国立卫生研究院NIH", target: "生物科技", value: 24 },
-        { source: "美国农业部USDA", target: "先进制造", value: 8 },
-        { source: "国家标准与技术研究院NIST", target: "集成电路", value: 14 },
-        { source: "国家标准与技术研究院NIST", target: "新材料", value: 10 },
-        { source: "美国能源部DOE", target: "能源", value: 18 },
-        { source: "美国能源部DOE", target: "通信网络", value: 6 }
+
+	// 提取所有组织名称和行业名称
+	const orgNames = new Set();
+	const industryNames = new Set();
+	const links = [];
+
+	data.forEach(item => {
+		const { industryName, usadonationSourceVOList, chinaDonationSourceVOList } = item;
+		industryNames.add(industryName);
+
+		// 处理美国捐赠数据
+		usadonationSourceVOList.forEach(org => {
+			orgNames.add(org.orgName);
+			links.push({
+				source: org.orgName,
+				target: industryName,
+				value: org.amount
+			});
+		});
+
+		// 处理中国捐赠数据
+		chinaDonationSourceVOList.forEach(org => {
+			orgNames.add(org.orgName);
+			links.push({
+				source: org.orgName,
+				target: industryName,
+				value: org.amount
+			});
+		});
+	});
+
+	// 构建节点数组
+	const nodes = [
+		...Array.from(orgNames).map(name => ({ name })),
+		...Array.from(industryNames).map(name => ({ name }))
 	];
-    const leftColor = {
-        "美国国防高级研究计划局DARPA": "#722ED1",
-        "美国国家科学基金会NSF": "#0A57A6",
-        "美国国家航空航天局NASA": "#2266FF",
-        "美国国立卫生研究院NIH": "#FFCC00",
-        "美国农业部USDA": "#AA0000",
-        "国家标准与技术研究院NIST": "#FF8888",
-        "美国能源部DOE": "#0088AA"
-    };
-    const rightColor = {
-        人工智能: "#B05FA0",
-        生物科技: "#5070DD",
-        量子科技: "#8AAA7C",
-        新材料: "#6D7860",
-        集成电路: "#0CA8DF",
-        通信网络: "#6D7860",
-        能源: "#8AAA7C",
-        先进制造: "#B47B5D",
-        航空航天: "#A7C74C"
+
+	// 定义颜色映射
+	const colorMap = {
+		"国家地理空间情报局": "#722ED1",
+		"国际商业机器公司": "#0A57A6",
+		"成都海威华芯科技有限公司": "#2266FF",
+		"新一代通信技术": "#B05FA0",
+		"人工智能": "#5070DD"
 	};
+
+	// 构建 ECharts 配置
 	const option = {
 		tooltip: { trigger: "item" },
 		series: [{
 			type: "sankey",
-            data: nodes.map(n => ({ name: n.name, itemStyle: { color: leftColor[n.name] || rightColor[n.name] || "#bbb" } })),
-            links: [
-                { source: "美国国防高级研究计划局DARPA", target: "人工智能", value: 25 },
-                { source: "美国国防高级研究计划局DARPA", target: "量子科技", value: 8 },
-                { source: "美国国防高级研究计划局DARPA", target: "新材料", value: 10 },
-                { source: "美国国防高级研究计划局DARPA", target: "集成电路", value: 10 },
-                { source: "美国国防高级研究计划局DARPA", target: "通信网络", value: 9 },
-                { source: "美国国防高级研究计划局DARPA", target: "先进制造", value: 8 },
-
-                { source: "美国国家科学基金会NSF", target: "人工智能", value: 20 },
-                { source: "美国国家科学基金会NSF", target: "生物科技", value: 12 },
-                { source: "美国国家科学基金会NSF", target: "量子科技", value: 8 },
-                { source: "美国国家科学基金会NSF", target: "新材料", value: 12 },
-                { source: "美国国家科学基金会NSF", target: "集成电路", value: 20 },
-                { source: "美国国家科学基金会NSF", target: "通信网络", value: 9 },
-                { source: "美国国家科学基金会NSF", target: "能源", value: 4 },
-                { source: "美国国家科学基金会NSF", target: "先进制造", value: 10 },
-                { source: "美国国家科学基金会NSF", target: "航空航天", value: 6 },
-
-                { source: "美国国家航空航天局NASA", target: "人工智能", value: 15 },
-                { source: "美国国家航空航天局NASA", target: "量子科技", value: 6 },
-                { source: "美国国家航空航天局NASA", target: "集成电路", value: 15 },
-                { source: "美国国家航空航天局NASA", target: "通信网络", value: 9 },
-                { source: "美国国家航空航天局NASA", target: "能源", value: 6 },
-                { source: "美国国家航空航天局NASA", target: "先进制造", value: 10 },
-                { source: "美国国家航空航天局NASA", target: "航空航天", value: 18 },
-
-                { source: "美国国立卫生研究院NIH", target: "人工智能", value: 20 },
-                { source: "美国国立卫生研究院NIH", target: "量子科技", value: 4 },
-                { source: "美国国立卫生研究院NIH", target: "集成电路", value: 15 },
-                { source: "美国国立卫生研究院NIH", target: "通信网络", value: 8 },
-                { source: "美国国立卫生研究院NIH", target: "能源", value: 6 },
-                { source: "美国国立卫生研究院NIH", target: "先进制造", value: 10 },
-                { source: "美国国立卫生研究院NIH", target: "航空航天", value: 4 },
-
-                { source: "美国农业部USDA", target: "人工智能", value: 20 },
-                { source: "美国农业部USDA", target: "新材料", value: 11 },
-                { source: "美国农业部USDA", target: "通信网络", value: 5 },
-                { source: "美国农业部USDA", target: "能源", value: 2 },
-                { source: "美国农业部USDA", target: "先进制造", value: 10 },
-                { source: "美国农业部USDA", target: "航空航天", value: 4 },
-
-                { source: "国家标准与技术研究院NIST", target: "量子科技", value: 4 },
-                { source: "国家标准与技术研究院NIST", target: "先进制造", value: 4 },
-                { source: "国家标准与技术研究院NIST", target: "航空航天", value: 4 },
-
-                { source: "美国能源部DOE", target: "新材料", value: 11 },
-                { source: "美国能源部DOE", target: "集成电路", value: 20 },
-                { source: "美国能源部DOE", target: "通信网络", value: 5 },
-                { source: "美国能源部DOE", target: "能源", value: 12 },
-                { source: "美国能源部DOE", target: "先进制造", value: 8 },
-                { source: "美国能源部DOE", target: "航空航天", value: 4 }
-            ],
+			data: nodes.map(node => ({
+				name: node.name,
+				itemStyle: { color: colorMap[node.name] || "#bbb" }
+			})),
+			links: links,
 			sort: 'none',
 			layoutIterations: 0,
 			draggable: false,
@@ -728,58 +614,57 @@ const initLeftSankey = () => {
 				fontWeight: 400,
 				lineHeight: 16,
 				formatter: (params) => {
-                    const map = {
-                        "美国国防高级研究计划局DARPA": "美国国防高级研究计划局\nDARPA",
-                        "美国国家科学基金会NSF": "美国国家科学基金会\nNSF",
-                        "美国国家航空航天局NASA": "美国国家航空航天局\nNASA",
-                        "美国国立卫生研究院NIH": "美国国立卫生研究院\nNIH",
-                        "美国农业部USDA": "美国农业部\nUSDA",
-                        "国家标准与技术研究院NIST": "国家标准与技术研究院\nNIST",
-                        "美国能源部DOE": "美国能源部\nDOE"
-                    };
-                    return map[params.name] || params.name;
+					return params.name;
 				},
 				position: 'right'
 			}
 		}]
 	};
+
 	leftSankey.setOption(option);
 };
-const handleResize = () => {
-    if (leftChart) leftChart.resize();
-    if (rightChart) rightChart.resize();
-    if (leftSankey) leftSankey.resize();
-    if (boxplotChart) boxplotChart.resize();
-};
+
+
+// const handleResize = () => {
+// 	if (leftChart) leftChart.resize();
+// 	if (leftChart1) leftChart1.resize();
+// 	if (rightChart) rightChart.resize();
+// 	if (leftSankey) leftSankey.resize();
+// 	if (boxplotChart) boxplotChart.resize();
+// };
 
 onMounted(() => {
-    nextTick(() => {
-        initLeftDonut();
-        initRightLine();
-        initLeftSankey();
-        initBoxPlot();
-    });
-    window.addEventListener("resize", handleResize);
-});
-onBeforeUnmount(() => {
-    window.removeEventListener("resize", handleResize);
-    if (leftChart) {
-        leftChart.dispose();
-        leftChart = null;
-    }
-    if (rightChart) {
-        rightChart.dispose();
-        rightChart = null;
-    }
-    if (leftSankey) {
-        leftSankey.dispose();
-        leftSankey = null;
-    }
-    if (boxplotChart) {
-        boxplotChart.dispose();
-        boxplotChart = null;
-    }
+	handleGetFundField()
+	handleFindCountryProjectAreaList()
+	handlegetCountryFundingChange()
+	handlegetCountryFundProjectChange()
+	handleGetOrgFundsArea()
+	handlegetOrgFundStrength()
+
 });
+// onBeforeUnmount(() => {
+// 	window.removeEventListener("resize", handleResize);
+// 	if (leftChart) {
+// 		leftChart.dispose();
+// 		leftChart = null;
+// 	}
+// 	if (leftChart1) {
+// 		leftChart1.dispose();
+// 		leftChart1 = null;
+// 	}
+// 	if (rightChart) {
+// 		rightChart.dispose();
+// 		rightChart = null;
+// 	}
+// 	if (leftSankey) {
+// 		leftSankey.dispose();
+// 		leftSankey = null;
+// 	}
+// 	if (boxplotChart) {
+// 		boxplotChart.dispose();
+// 		boxplotChart = null;
+// 	}
+// });
 </script>
 
 <style lang="scss" scoped>
@@ -787,14 +672,17 @@ onBeforeUnmount(() => {
 	margin: 0;
 	padding: 0;
 }
+
 .datasub {
 	width: 1600px;
 	height: 936px;
 	display: flex;
 	justify-content: space-between;
+
 	.datasub-left {
 		width: 792px;
 		height: 936px;
+
 		.left {
 			width: 792px;
 			height: 460px;
@@ -803,11 +691,13 @@ onBeforeUnmount(() => {
 			border-radius: 10px;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background-color: #fff;
+
 			.left-title {
 				width: 792px;
 				height: 48px;
 				border-bottom: 1px solid rgb(234, 236, 238);
 				position: relative;
+
 				img {
 					width: 19px;
 					height: 19px;
@@ -815,6 +705,7 @@ onBeforeUnmount(() => {
 					top: 16px;
 					left: 21px;
 				}
+
 				.tit {
 					margin-left: 60px;
 					height: 48px;
@@ -825,6 +716,7 @@ onBeforeUnmount(() => {
 					line-height: 26px;
 					color: rgb(5, 95, 194);
 				}
+
 				.select {
 					width: 120px;
 					height: 28px;
@@ -834,19 +726,25 @@ onBeforeUnmount(() => {
 					right: 31px;
 				}
 			}
+
 			.left-main {
 				width: 792px;
 				height: 412px;
 				padding: 52px 60px 78px 61px;
+
 				.left-main-echarts {
 					width: 100%;
-					height: 100%;
+					/* 确保宽度占满容器 */
+					height: 400px;
+					/* 设置一个合适的高度 */
 				}
 			}
+
 			.left-main1 {
 				width: 792px;
 				height: 412px;
 				padding: 30px 30px 30px 30px;
+
 				.left-sankey-echarts {
 					width: 100%;
 					height: 100%;
@@ -854,9 +752,11 @@ onBeforeUnmount(() => {
 			}
 		}
 	}
+
 	.datasub-right {
 		width: 792px;
 		height: 936px;
+
 		.right {
 			width: 792px;
 			height: 460px;
@@ -864,11 +764,13 @@ onBeforeUnmount(() => {
 			margin-bottom: 16px;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background-color: #fff;
+
 			.right-title {
 				width: 792px;
 				height: 48px;
 				border-bottom: 1px solid rgb(234, 236, 238);
 				position: relative;
+
 				img {
 					width: 19px;
 					height: 19px;
@@ -876,6 +778,7 @@ onBeforeUnmount(() => {
 					top: 16px;
 					left: 21px;
 				}
+
 				.tit {
 					margin-left: 60px;
 					height: 48px;
@@ -886,6 +789,7 @@ onBeforeUnmount(() => {
 					line-height: 26px;
 					color: rgb(5, 95, 194);
 				}
+
 				.select1 {
 					width: 155px;
 					height: 28px;
@@ -894,6 +798,7 @@ onBeforeUnmount(() => {
 					top: 11px;
 					right: 163px;
 				}
+
 				.select {
 					width: 120px;
 					height: 28px;
@@ -903,15 +808,18 @@ onBeforeUnmount(() => {
 					right: 31px;
 				}
 			}
+
 			.right-main {
 				width: 792px;
 				height: 421px;
 				padding: 40px 5px 30px 22px;
 				position: relative;
+
 				.right-main-echarts {
 					width: 100%;
 					height: 100%;
 				}
+
 				.right-main-tit {
 					position: absolute;
 					top: 18px;
@@ -923,17 +831,20 @@ onBeforeUnmount(() => {
 					color: rgb(132, 136, 142);
 				}
 			}
+
 			.right-main1 {
 				width: 792px;
 				height: 421px;
 				padding: 20px 20px;
 				position: relative;
 				box-sizing: border-box;
+
 				.right-boxplot-echarts {
 					width: 100%;
 					height: 100%;
 					min-height: 300px;
 				}
+
 				.right-main1-tit {
 					position: absolute;
 					top: 18px;
@@ -949,4 +860,60 @@ onBeforeUnmount(() => {
 		}
 	}
 }
+
+.btn {
+	position: absolute;
+	top: 11px;
+
+	/* 切换按钮 */
+	width: 85px;
+	height: 28px;
+	/* 自动布局 */
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 8;
+	padding: 1px 8px 1px 8px;
+
+	color: rgba(59, 65, 75, 1);
+	box-sizing: border-box;
+	border: 1px solid rgba(230, 231, 232, 1);
+	border-radius: 4px;
+	background: rgba(255, 255, 255, 1);
+	font-family: Microsoft YaHei;
+	font-style: Regular;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: 0px;
+	text-align: left;
+}
+
+.btn-select {
+	position: absolute;
+	top: 11px;
+	/* 切换按钮 */
+	width: 85px;
+	height: 28px;
+	/* 自动布局 */
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 8;
+	padding: 1px 8px 1px 8px;
+	color: rgba(5, 95, 194, 1);
+	box-sizing: border-box;
+	border: 1px solid rgba(5, 95, 194, 1);
+	border-radius: 4px;
+	background: rgba(231, 243, 255, 1);
+	font-family: Microsoft YaHei;
+	font-style: Regular;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: 0px;
+	text-align: left;
+}
 </style>

src/views/scientificFunding/components/resLib/index.vue

 <template>
 	<div class="reslib-page">
 		<div class="nav">
-			<div
-				v-for="item in navList"
-				:key="item"
-				class="nav-item"
-				:class="{ active: item === activeItem }"
-				@click="activeItem = item"
-			>
-				{{ item }}
+			<div v-for="item in navList" :key="item.orgId" class="nav-item" :class="{ active: item.orgId === activeItem }"
+				@click="activeItem = item.orgId, handleGetProjectListNew()">
+				{{ item.orgName }}
 			</div>
 		</div>
-		<el-select v-model="value" placeholder="Select" class="select">
-			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-		</el-select>
-		<div class="main">
-			<div class="left">
-				<div class="left-section">
-					<div class="left-title-wrapper">
-						<div class="left-indicator"></div>
-						<div class="left-title">科技领域</div>
+		<div class="select-box">
+			<div class="paixu-btn" @click="handleSwithSort()">
+				<div class="icon1">
+					<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
+					<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
 				</div>
-					<div class="left-content">
-						<div v-for="(item, i) in techFields" :key="item.id" class="left-item">
-							<input type="checkbox" :checked="i === 0" />{{ item.name }}
+				<div class="text">{{ "发布时间" }}</div>
+				<div class="icon2">
+					<img v-if="sort" src="@/assets/icons/shengxu2.png" alt="" />
+					<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
 				</div>
 			</div>
 		</div>
-				<div class="left-section">
-					<div class="left-title-wrapper">
-						<div class="left-indicator"></div>
-						<div class="left-title">发布时间</div>
+		<div class="main">
+			<div class="left">
+				<div class="left-ti1"></div>
+				<div class="left-ti2"></div>
+				<!-- <div class="left-title">项目经费</div>
+				<div class="left-content">
+					<div v-for="(item, i) in dataList" :key="item.id" class="left-item">
+						<input type="checkbox" checked />{{ item.name }}
 					</div>
+				</div> -->
+				<div class="left-title cl1">涉及领域</div>
 				<div class="left-content">
-						<div v-for="(item, i) in releaseTimes" :key="item.id" class="left-item">
+					<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="all-checkbox"
+						@change="handleCheckAllChange">
+						全部领域
+					</el-checkbox>
+					<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList" :label="research.id"
+						@change="handleCheckedAreaChange()" class="filter-checkbox">
+						{{ research.name }}
+					</el-checkbox>
+					<!-- <div v-for="(item, i) in areaList" :key="item.id" class="left-item">
 						<input type="checkbox" :checked="i === 0" />{{ item.name }}
+					</div> -->
 				</div>
-					</div>
+				<div class="left-title cl1">发布时间</div>
+				<div class="left-content">
+					<el-checkbox v-model="checkAllTime" class="all-checkbox" :indeterminate="isIndeterminateTime"
+						@change="handleCheckAllChangeTime">
+						全部时间
+					</el-checkbox>
+					<el-checkbox-group v-model="selectedPubTimeList">
+						<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
+							@change="handleCheckedAreaChangeTime()">
+							{{ time.name }}
+						</el-checkbox>
+					</el-checkbox-group>
 				</div>
 			</div>
 			<div class="right">
@@ -46,40 +64,31 @@
 				</div>
 				<div class="right-main">
 					<div v-for="(item, i) in mainList" :key="item.id" class="right-item">
-						<img :src="item.img" alt="" />
-						<div class="right-item-title">{{ item.title }}</div>
-						<div class="right-item-content">{{ item.content }}</div>
+						<img :src="item.logoUrl" alt="" />
+						<div class="right-item-title">{{ item.projectName }}</div>
+						<div class="right-item-content">{{ item.abstractContent }}</div>
 						<div class="right-item-pie">
-							<div
-								v-for="(pie, i) in item.pie"
-								:key="i"
-								class="right-item-pie-item"
-								:class="{
+							<div v-for="(pie, i) in item.areaList" :key="i" class="right-item-pie-item" :class="{
 								cl1: pie === '新材料',
 								cl2: pie === '人工智能',
 								cl3: pie === '量子科技',
 								cl4: pie === '能源',
 								cl5: pie === '生物科技',
 								cl6: pie === '航空航天'
-								}"
-							>
+							}">
 								{{ pie }}
 							</div>
 						</div>
-						<div class="right-item-time">{{ item.time }}</div>
-						<div class="right-item-money" :style="{ color: item.color }">{{ item.money }}</div>
+						<div class="right-item-time">{{ item.publicationDate }}</div>
+						<div class="right-item-money"
+							:style="{ color: item.amount <= 1000 ? 'rgba(232, 189, 11, 1)' : item.amount <= 10000 ? 'rgba(255, 149, 77, 1)' : 'rgba(206, 79, 81, 1)' }">
+							{{ '$' + item.amount + '万' }}</div>
 					</div>
 
 					<div class="page">
-						<div class="count">共1205项调查</div>
-						<el-pagination
-							v-model:current-page="currentPage"
-							:page-size="pageSize"
-							:total="total"
-							layout="prev, pager, next"
-							background
-							@current-change="handlePageChange"
-						/>
+						<div class="count">共{{ total }}项</div>
+						<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
+							layout="prev, pager, next" background @current-change="handlePageChange" />
 					</div>
 				</div>
 			</div>
@@ -88,168 +97,204 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import NSF from "./assets/NSF.png";
-import DARPA from "./assets/DARPA.png";
-import NASA from "./assets/NASA.png";
-import NIH from "./assets/NIH.png";
-import DOE from "./assets/DOE.png";
-
-const navList = ref(["全部资助项目", "NSF", "DARPA", "NASA", "NIH", "DOE", "NIST"]);
-const activeItem = ref("全部资助项目");
-
-const value = ref("发布时间");
-const options = [
-	{
-		value: "发布时间",
-		label: "发布时间"
-	},
-	{
-		value: "发布日期",
-		label: "发布日期"
-	}
-];
-const techFields = ref([
-	{ id: 1, name: "全部领域" },
-	{ id: 2, name: "人工智能" },
-	{ id: 3, name: "集成电路" },
-	{ id: 4, name: "量子科技" },
-	{ id: 5, name: "新一代信息技术" },
-	{ id: 6, name: "生物技术" },
-	{ id: 7, name: "新能源" },
-	{ id: 8, name: "航空航天" },
-	{ id: 9, name: "先进制造" },
-	{ id: 10, name: "海洋" },
-	{ id: 11, name: "新材料" },
-	{ id: 12, name: "深海" },
-	{ id: 13, name: "极地" },
-	{ id: 14, name: "核" },
-	{ id: 15, name: "其他" }
-]);
-const releaseTimes = ref([
-	{ id: 1, name: "全部时间" },
-	{ id: 2, name: "2025年" },
-	{ id: 3, name: "2024年" },
-	{ id: 4, name: "2023年" },
-	{ id: 5, name: "2022年" },
-	{ id: 6, name: "2021年" },
-	{ id: 7, name: "更早" }
-]);
-const mainList = ref([
+import { ref, onMounted } from "vue";
+import {
+	getProjectListNew, geFundSourceOrg, getAreaType
+} from "@/api/scientificFunding/overview";
+
+
+const navList = ref([]);
+const activeItem = ref("");
+
+const areaList = ref([
 	{
 		id: 1,
-		title: "NSF：量子化学合作研究项目",
-		content: "美国国家科学基金会和英国研究与创新（UKRI）正在投资八个联合研究项目，这些项目有望为量子计算带来突破......",
-		pie: ["新材料", "量子科技"],
-		time: "2025年11月26日",
-		money: "$1,000万",
-		color:"rgb(255, 149, 77)",
-		img: NSF
+		name: "全部领域"
 	},
 	{
 		id: 2,
-		title: "NIH：All of Us研究计划数据集应用",
-		content:
-			"美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据集开展生物医学研究，并开发数据分析的新模型...",
-		pie: ["生物科技"],
-		time: "2025年11月26日",
-		money: "$970万",
-		color:"rgb(232, 189, 11)",
-		img: NIH
+		name: "人工智能"
 	},
 	{
 		id: 3,
-		title: "NSF：EPSCoR管辖区投资 计划",
-		content:
-			"美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州的机构投资约 3000 万美元，以建立 NSF EPSCoR 科学卓越研究中心......",
-		pie: ["人工智能", "新材料", "量子科技"],
-		time: "2025年11月26日",
-		money: "$3,000万",
-		color:"rgb(255, 149, 77)",
-		img: NSF
+		name: "集成电路"
 	},
 	{
 		id: 4,
-		title: "NASA：创新型早期空间技术研究资助项目",
-		content:
-			"NASA宣布对11所大学的研究提案进行资助（表1），这些项目旨在通过对创新型早期技术的研究，解决美国空间计划中具有较高优先度的...",
-		pie: ["航空航天"],
-		time: "2025年11月26日",
-		money: "$2.8亿",
-		color:"rgb(206, 79, 81)",
-		img: NASA
+		name: "通信网络"
 	},
 	{
 		id: 5,
-		title: "DARPA：可调控生物功能微系统技术开发",
-		content:
-			"美国国防高级研究计划局（DARPA）宣布通过“微系统诱导催化”（MICA）项目资助巴特尔纪念研究所1030万美元[1]，探索使用微系统...",
-		pie: ["生物科技"],
-		time: "2025年11月26日",
-		money: "$1,030万",
-		color:"rgb(255, 149, 77)",
-		img: DARPA
+		name: "量子科技"
 	},
 	{
 		id: 6,
-		title: "NSF：国家人工智能研究资源运营中心",
-		content: "美国国家科学基金会今日宣布一项新招标，旨在建立国家人工智能研究资源运营中心（NAIRR-OC）。这标志着一个关键......",
-		pie: ["人工智能"],
-		time: "2025年11月26日",
-		money: "$1.05亿",
-		color:"rgb(206, 79, 81)",
-		img: NSF
+		name: "能源"
 	},
 	{
 		id: 7,
-		title: "NASA：“人体研究计划”和“空间生物学计划”的16个研究提案",
-		content:
-			"NASA将与俄罗斯联邦航天局（Roscosmos）合作开展国际空间站一年期驻留任务，以评估长期空间飞行对人的影响[3]。 入选“人体研究...",
-		pie: ["生物科技", "航空航天"],
-		time: "2025年11月26日",
-		money: "$1.9亿",
-		color:"rgb(206, 79, 81)",
-		img: NASA
+		name: "生物科技"
 	},
 	{
 		id: 8,
-		title: "NSF：NVIDIA 合作 Ai2 模型创新",
-		content: "美国国家科学基金会宣布与英伟达合作，开发一套人工智能模型，这将彻底改变美国科学家利用人工智能的能力......",
-		pie: ["人工智能"],
-		time: "2025年11月26日",
-		money: "$240万",
-		color:"rgb(232, 189, 11)",
-		img: NSF
+		name: "航空航天"
 	},
 	{
 		id: 9,
-		title: "NASA：新一轮机器人研发",
-		content:
-			"美国国家科学基金会（NSF）宣布将联合国家航空航天局（NASA）、国立卫生研究院（NIH）、农业部（USDA）、国防部（DoD）支持...",
-		pie: ["人工智能"],
-		time: "2025年11月26日",
-		money: "$850万",
-		color:"rgb(232, 189, 11)",
-		img: NASA
+		name: "海洋"
+	}
+]);
+
+
+// 来源机构列表
+const handleGeFundSourceOrg = async () => {
+	try {
+		const res = await geFundSourceOrg();
+		console.log("来源机构列表", res);
+		if (res.code === 200 && res.data) {
+			navList.value = res.data
+			activeItem.value = res.data[0].orgId
+		}
+	} catch (error) {
+		console.error("获取来源机构列表error", error);
+	}
+};
+
+const checkAll = ref(false);
+const isIndeterminate = ref(true);
+const selectedAreaList = ref([]);
+
+const handleCheckAllChange = val => {
+	// console.log(val, "handleCheckAllChange");
+	if (val) {
+		isIndeterminate.value = false;
+		selectedAreaList.value.length !== areaList.value.length
+			? (selectedAreaList.value = areaList.value.map(obj => obj.id))
+			: "";
+	} else {
+		selectedAreaList.value = [];
+	}
+	// selectedAreaList.value = val ? areaList : []
+	// isIndeterminate.value = false
+	handleGetProjectListNew();
+};
+const handleCheckedAreaChange = () => {
+	// console.log(selectedAreaList.value, "handleCheckedAreaChange");
+	console.log(selectedAreaList.value, "当前选中的领域");
+	selectedAreaList.value.length !== areaList.value.length
+		? (isIndeterminate.value = true)
+		: ((checkAll.value = true), (isIndeterminate.value = false));
+	handleGetProjectListNew();
+};
+
+
+const pubTimeList = ref([
+	{
+		id: 2025,
+		name: "2025"
+	},
+	{
+		id: 2024,
+		name: "2024"
+	},
+	{
+		id: 2023,
+		name: "2023"
 	},
 	{
-		id: 10,
-		title: "DOE：微电网及储能技术研发",
-		content: "美国能源部电力办公室宣布两项资助信息，共计投入2210万美元，推进微电网和电网级储能技术创新发展。",
-		pie: ["能源"],
-		time: "2025年11月26日",
-		money: "$2,210万",
-		color:"rgb(255, 149, 77)",
-		img: DOE
+		id: 2022,
+		name: "2022"
+	},
+	{
+		id: 2021,
+		name: "2021"
 	}
+	// {
+	// 	id: "更早时间",
+	// 	name: "更早时间"
+	// }
 ]);
+const selectedPubTimeList = ref([""]);
+const checkAllTime = ref(false);
+const isIndeterminateTime = ref(true);
+const sort = ref(false);
+const handleSwithSort = () => {
+	sort.value = !sort.value;
+	handleGetProjectListNew();
+};
 
-const total = ref(1205);
-const pageSize = ref(121);
-const currentPage = ref(5);
+const handleCheckAllChangeTime = val => {
+	// console.log(val, "handleCheckAllChange");
+	if (val) {
+		isIndeterminateTime.value = false;
+		selectedPubTimeList.value.length !== pubTimeList.value.length
+			? (selectedPubTimeList.value = pubTimeList.value.map(obj => obj.id))
+			: "";
+	} else {
+		selectedPubTimeList.value = [];
+	}
+	// selectedAreaList.value = val ? areaList : []
+	// isIndeterminate.value = false
+	handleGetProjectListNew();
+};
+const handleCheckedAreaChangeTime = () => {
+	// console.log(selectedAreaList.value, "handleCheckedAreaChange");
+	console.log(selectedPubTimeList.value, "当前选中的时间");
+	selectedPubTimeList.value.length !== pubTimeList.value.length
+		? (isIndeterminateTime.value = true)
+		: ((checkAllTime.value = true), (isIndeterminateTime.value = false));
+	handleGetProjectListNew();
+};
+
+// 获取行业领域列表
+const handleGetAreaType = async () => {
+	try {
+		const res = await getAreaType();
+		console.log("获取行业领域列表", res);
+		if (res.code === 200 && res.data) {
+			areaList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取行业领域列表error", error);
+	}
+};
+
+const mainList = ref([]);
+const total = ref(0);
+const pageSize = ref(10);
+const currentPage = ref(1);
 const handlePageChange = p => {
 	currentPage.value = p;
+	handleGetProjectListNew()
+};
+// 资助体系v2.0:资助项目列表分页
+const handleGetProjectListNew = async () => {
+	try {
+		let params = {
+			arealist: selectedAreaList.value,
+			currentPage: currentPage.value,
+			pageSize: 10,
+			yearlist: selectedPubTimeList.value.map(item => item.toString().trim()).filter(item => item !== ""),
+			funSort: sort.value ? 'desc' : 'asc',
+			orgId: activeItem.value
+		}
+		const res = await getProjectListNew(params);
+		console.log("资助项目列表分页", res);
+		if (res.code === 200 && res.data) {
+			mainList.value = res.data.content
+			total.value = res.data.totalElements
+		}
+	} catch (error) {
+		console.error("获取资助项目列表分页error", error);
+	}
 };
+
+onMounted(async () => {
+	await handleGeFundSourceOrg()
+	await handleGetAreaType()
+	handleGetProjectListNew()
+});
+
 </script>
 
 <style scoped lang="scss">
@@ -257,18 +302,84 @@ const handlePageChange = p => {
 	margin: 0;
 	padding: 0;
 }
+
 .reslib-page {
 	width: 1600px;
 	height: 1565px;
 	position: relative;
+
+	.select-box {
+
+		width: 128px;
+		position: absolute;
+		top: 7px;
+		right: 0px;
+
+		.paixu-btn {
+			display: flex;
+			width: 120px;
+			height: 32px;
+			box-sizing: border-box;
+			border: 1px solid rgba(230, 231, 232, 1);
+			border-radius: 4px;
+			background: rgba(255, 255, 255, 1);
+
+			&:hover {
+				background: var(--color-bg-hover);
+			}
+
+			cursor: pointer;
+
+			.icon1 {
+				width: 11px;
+				height: 14px;
+				margin-top: 10px;
+				margin-left: 9px;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.text {
+				height: 19px;
+				color: rgba(95, 101, 108, 1);
+				font-family: Microsoft YaHei;
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: 0px;
+				text-align: left;
+				margin-top: 7px;
+				margin-left: 9px;
+			}
+
+			.icon2 {
+				width: 10px;
+				height: 5px;
+				margin-top: 5px;
+				margin-left: 13px;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+
 	.nav {
-		width: 721px;
+		width: calc(100% - 100px);
 		height: 42px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		margin-bottom: 34px;
+
 		.nav-item {
+			width: 100%;
+			text-align: center;
 			cursor: pointer;
 			padding: 8px 20px;
 			font-size: 20px;
@@ -277,6 +388,7 @@ const handlePageChange = p => {
 			line-height: 26px;
 			color: rgb(59, 65, 75);
 		}
+
 		.active {
 			background-color: rgb(5, 95, 194);
 			border-radius: 21px;
@@ -284,105 +396,138 @@ const handlePageChange = p => {
 			font-weight: 700;
 		}
 	}
+
 	.select {
 		width: 128px;
 		position: absolute;
 		top: 7px;
 		right: 0px;
 	}
+
 	.main {
 		width: 1600px;
 		height: 1489px;
 		display: flex;
+
 		.left {
 			width: 300px;
-			min-height: 565px;
 			margin-right: 16px;
 			border-radius: 10px;
 			background-color: #fff;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-			padding: 20px 0;
-			.left-section {
-				margin-bottom: 30px;
-				.left-title-wrapper {
-					display: flex;
-					align-items: center;
-					margin-bottom: 20px;
-					.left-indicator {
+			position: relative;
+
+			.left-ti1 {
 				width: 8px;
 				height: 16px;
 				background-color: rgb(5, 95, 194);
 				border-top-right-radius: 3px;
 				border-bottom-right-radius: 3px;
-						margin-right: 17px;
+				position: absolute;
+				top: 17px;
+				left: 0px;
+			}
+
+			.left-ti2 {
+				width: 8px;
+				height: 16px;
+				background-color: rgb(5, 95, 194);
+				border-top-right-radius: 3px;
+				border-bottom-right-radius: 3px;
+				position: absolute;
+				top: 207px;
+				left: 0px;
 			}
+
 			.left-title {
+				margin-left: 25px;
 				color: rgb(5, 95, 194);
-						font-size: 18px;
+				font-size: 16px;
 				font-weight: 700;
 				font-family: "Microsoft YaHei";
 				line-height: 24px;
+				margin-top: 13px;
 			}
-				}
+
 			.left-content {
+				width: 253px;
+				// height: 132px;
+				margin-left: 25px;
+				margin-top: 13px;
 				display: flex;
 				flex-wrap: wrap;
-					padding-left: 25px;
+				/* 允许内容换行 */
+				justify-content: space-between;
+
+				/* 两端对齐 */
 				.left-item {
-						width: 50%;
+					white-space: nowrap;
+					/* 保持在一行内 */
+					overflow: hidden;
+					/* 隐藏超出部分 */
+					text-overflow: ellipsis;
+					/* 超出部分显示省略号 */
+					width: calc(50% - 8px);
+					/* 每个选项占一半宽度，减去间距 */
 					height: 30px;
-						margin-bottom: 12px;
+					margin-bottom: 4px;
 					font-size: 16px;
 					font-weight: 400;
 					font-family: "Microsoft YaHei";
 					line-height: 24px;
 					color: rgb(95, 101, 108);
-						display: flex;
-						align-items: center;
+
 					input[type="checkbox"] {
 						-webkit-appearance: none;
 						appearance: none;
-							width: 16px;
-							height: 16px;
-							margin-right: 12px;
+						width: 14px;
+						height: 14px;
+						margin-right: 8px;
 						border: 1px solid rgb(200, 204, 210);
 						border-radius: 4px;
 						background-color: #fff;
-							cursor: pointer;
-							position: relative;
+						vertical-align: middle;
 					}
+
 					input[type="checkbox"]:checked {
 						background-color: rgb(5, 95, 194);
-							border-color: rgb(5, 95, 194);
+						border-top-right-radius: 3px;
+						border-bottom-right-radius: 3px;
+						margin-right: 17px;
 					}
+
 					input[type="checkbox"]:checked::after {
 						content: "";
 						display: block;
 						width: 4px;
 						height: 8px;
-							position: absolute;
-							left: 50%;
-							top: 45%;
+						margin: 1px auto 0;
 						border: 2px solid #fff;
 						border-top: none;
 						border-left: none;
-							transform: translate(-50%, -50%) rotate(45deg);
+						transform: rotate(45deg);
 					}
 				}
 			}
+
+			.cl1 {
+				margin-top: 21px;
 			}
 		}
+
 		.right {
 			width: 1284px;
 			height: 1489px;
 			border-radius: 10px;
 			background-color: #fff;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+
 			.right-title {
 				width: 1284px;
 				height: 48px;
 				border-bottom: 1px solid rgb(235, 238, 242);
 				position: relative;
+
 				img {
 					width: 22px;
 					height: 19px;
@@ -390,6 +535,7 @@ const handlePageChange = p => {
 					top: 15px;
 					left: 20px;
 				}
+
 				div {
 					width: 120px;
 					height: 48px;
@@ -402,17 +548,20 @@ const handlePageChange = p => {
 					padding: 11px 0;
 				}
 			}
+
 			.right-main {
 				width: 1284px;
 				height: 1441px;
 				padding: 19px 34px 20px 29px;
 				position: relative;
+
 				.right-item {
 					width: 1221px;
 					height: 124px;
 					border-bottom: 1px solid rgb(234, 236, 238);
 					margin-bottom: 8px;
 					position: relative;
+
 					img {
 						width: 32px;
 						height: 32px;
@@ -420,6 +569,7 @@ const handlePageChange = p => {
 						top: 9px;
 						left: 7px;
 					}
+
 					.right-item-title {
 						position: absolute;
 						top: 10px;
@@ -430,7 +580,16 @@ const handlePageChange = p => {
 						line-height: 26px;
 						color: rgb(59, 65, 75);
 					}
+
 					.right-item-content {
+						white-space: nowrap;
+						/* 保持在一行内 */
+						overflow: hidden;
+						/* 隐藏超出部分 */
+						text-overflow: ellipsis;
+						/* 超出部分显示省略号 */
+						width: 90%;
+						/* 设置一个固定的宽度或百分比 */
 						position: absolute;
 						top: 44px;
 						left: 56px;
@@ -440,11 +599,13 @@ const handlePageChange = p => {
 						line-height: 24px;
 						color: rgb(95, 101, 108);
 					}
+
 					.right-item-pie {
 						position: absolute;
 						top: 76px;
 						left: 56px;
 						display: flex;
+
 						.right-item-pie-item {
 							padding: 2px 8px;
 							border-radius: 4px;
@@ -455,37 +616,44 @@ const handlePageChange = p => {
 							font-family: "Microsoft YaHei";
 							line-height: 20px;
 						}
+
 						.cl1 {
 							background-color: rgba(230, 255, 251, 1);
 							border-color: rgba(135, 232, 222, 1);
 							color: rgba(19, 168, 168, 1);
 						}
+
 						.cl2 {
 							background-color: rgba(255, 241, 240, 1);
 							border-color: rgba(255, 163, 158, 1);
 							color: rgba(245, 34, 45, 1);
 						}
+
 						.cl3 {
 							background-color: rgba(249, 240, 255, 1);
 							border-color: rgba(211, 173, 247, 1);
 							color: rgba(114, 46, 209, 1);
 						}
+
 						.cl4 {
 							background-color: rgba(230, 255, 251, 1);
 							border-color: rgba(135, 232, 222, 1);
 							color: rgba(19, 168, 168, 1);
 						}
+
 						.cl5 {
 							background-color: rgba(230, 244, 255, 1);
 							border-color: rgba(145, 202, 255, 1);
 							color: rgba(22, 119, 255, 1);
 						}
+
 						.cl6 {
 							background-color: rgba(240, 245, 255, 1);
 							border-color: rgba(173, 198, 255, 1);
 							color: rgba(47, 84, 235, 1);
 						}
 					}
+
 					.right-item-time {
 						position: absolute;
 						top: 13px;
@@ -496,6 +664,7 @@ const handlePageChange = p => {
 						line-height: 24px;
 						color: rgb(95, 101, 108);
 					}
+
 					.right-item-money {
 						position: absolute;
 						top: 76px;
@@ -506,6 +675,7 @@ const handlePageChange = p => {
 						line-height: 24px;
 					}
 				}
+
 				.page {
 					width: 1221px;
 					height: 40px;
@@ -516,6 +686,7 @@ const handlePageChange = p => {
 					bottom: 20px;
 					left: 20px;
 					padding-left: 11px;
+
 					.count {
 						font-size: 16px;
 						font-weight: 400;
@@ -523,10 +694,12 @@ const handlePageChange = p => {
 						line-height: 24px;
 						color: rgb(59, 65, 75);
 					}
+
 					:deep(.el-pagination) {
 						display: flex;
 						align-items: center;
 					}
+
 					:deep(.el-pagination.is-background .el-pager li) {
 						min-width: 32px;
 						height: 32px;
@@ -540,12 +713,14 @@ const handlePageChange = p => {
 						font-weight: 400;
 						font-family: "Microsoft YaHei";
 					}
+
 					:deep(.el-pagination.is-background .el-pager li.is-active) {
 						background-color: #fff;
 						color: rgba(22, 119, 255, 1);
 						border-color: rgba(22, 119, 255, 1);
 						// box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
 					}
+
 					:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
 						border: none;
 						background-color: transparent;
@@ -553,6 +728,7 @@ const handlePageChange = p => {
 						min-width: 16px;
 						margin: 0 6px;
 					}
+
 					:deep(.el-pagination.is-background .btn-prev),
 					:deep(.el-pagination.is-background .btn-next) {
 						min-width: 32px;
@@ -565,6 +741,7 @@ const handlePageChange = p => {
 						font-family: "Microsoft YaHei";
 						margin: 0 6px;
 					}
+
 					:deep(.el-pagination.is-background .btn-prev.is-disabled),
 					:deep(.el-pagination.is-background .btn-next.is-disabled) {
 						color: rgba(95, 101, 108, 0.45);

src/views/scientificFunding/index.vue

+<!--科研资助体系-->
 <template>
 	<div class="coop-page">
 		<!-- 面包屑 -->
@@ -67,12 +68,12 @@
 			</div>
 			<!-- 6个数据 -->
 			<div class="data">
-				<div v-for="item in dataList" :key="item.id" class="data-item">
-					<img :src="item.image" alt="" />
-					<div class="data-item-title">{{ item.title }}</div>
-					<div class="data-item-name">{{ item.name }}</div>
-					<div class="data-item-abb">{{ item.abb }}</div>
-					<div class="data-item-num" :style="{ color: item.color }">{{ item.num }}</div>
+				<div v-for="(item, index) in dataList" :key="item.id" class="data-item">
+					<img :src="item.logoUrl" alt="" />
+					<div class="data-item-title">{{ item.orgName }}</div>
+					<div class="data-item-name">{{ item.orgNameEn }}</div>
+					<div class="data-item-abb">{{ item.orgAbbEn }}</div>
+					<div class="data-item-num" :style="{ color: color[index] }">{{ item.num + '项' }}</div>
 				</div>
 			</div>
 			<!-- 最新动态 -->
@@ -108,7 +109,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import comTitle from "./common/comTitle.vue";
 import newData from "./components/dataNew/index.vue";
@@ -119,6 +120,11 @@ import HeaderMenu from "@/components/headerMenu.vue";
 import headerInfo from "@/components/headerInfo.vue";
 import scrollToTop from "@/utils/scrollToTop";
 
+
+import {
+	getFundSourceOrg
+} from "@/api/scientificFunding/overview";
+
 import { useContainerScroll } from "@/hooks/useScrollShow";
 
 import img01 from "./assets/images/img01.png";
@@ -195,6 +201,30 @@ const dataList = ref([
 		color: "rgb(5, 95, 194)"
 	}
 ]);
+const color = ref([
+	"rgb(206, 79, 81)",
+	"rgba(114, 46, 209, 1)",
+	"rgba(19, 168, 168, 1)",
+	"rgba(64, 150, 255, 1)",
+	"rgb(33, 129, 57)",
+	"rgb(5, 95, 194)"
+])
+//// 来源机构列表
+const handleGetFundSourceOrg = async () => {
+	try {
+		const res = await getFundSourceOrg();
+		console.log("来源机构列表", res);
+		if (res.code === 200 && res.data) {
+			dataList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取来源机构列表error", error);
+	}
+};
+
+onMounted(async () => {
+	handleGetFundSourceOrg()
+});
 </script>
 
 <style scoped lang="scss">
@@ -202,9 +232,11 @@ const dataList = ref([
 	margin: 0;
 	padding: 0;
 }
+
 .coop-page {
 	width: 100%;
 	height: 100%;
+
 	.breadcrumb {
 		width: 100%;
 		height: 64px;
@@ -214,6 +246,7 @@ const dataList = ref([
 		justify-content: space-between;
 		padding: 0 160px;
 	}
+
 	.main-content {
 		overflow: auto;
 		width: 100%;
@@ -221,10 +254,12 @@ const dataList = ref([
 		background: url("./assets/images/background.png");
 		background-size: 100% 100%;
 		padding: 44px 160px 30px 160px;
+
 		.search {
 			width: 960px;
 			height: 168px;
 			margin: 0 auto 122px auto;
+
 			.search-main {
 				display: flex;
 				padding-right: 3px;
@@ -236,9 +271,11 @@ const dataList = ref([
 				background-color: rgba(255, 255, 255, 0.65);
 				border-radius: 10px;
 				border: 1px solid #fff;
+
 				&:hover {
 					border: 1px solid var(--color-main-active);
 				}
+
 				.search-input {
 					border: none;
 					outline: none;
@@ -252,6 +289,7 @@ const dataList = ref([
 					line-height: 24px;
 					color: rgb(132, 136, 142);
 				}
+
 				.search-btn {
 					cursor: pointer;
 					display: flex;
@@ -267,6 +305,7 @@ const dataList = ref([
 					font-family: "Microsoft YaHei";
 					line-height: 24px;
 					color: #fff;
+
 					img {
 						width: 22px;
 						height: 22px;
@@ -274,6 +313,7 @@ const dataList = ref([
 					}
 				}
 			}
+
 			.search-center {
 				width: 680px;
 				height: 57px;
@@ -281,10 +321,12 @@ const dataList = ref([
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
+
 				.search-item {
 					box-sizing: border-box;
 					width: 120px;
 					height: 57px;
+
 					.search-item-num {
 						width: 120px;
 						height: 22px;
@@ -296,6 +338,7 @@ const dataList = ref([
 						text-align: center;
 						cursor: pointer;
 					}
+
 					.search-item-name {
 						width: 128px;
 						height: 24px;
@@ -309,6 +352,7 @@ const dataList = ref([
 					}
 				}
 			}
+
 			.search-bottom {
 				width: 688px;
 				height: 48px;
@@ -316,6 +360,7 @@ const dataList = ref([
 				margin-top: 36px;
 				display: flex;
 				justify-content: space-between;
+
 				// gap: 16px;
 				.btn {
 					display: flex;
@@ -329,9 +374,11 @@ const dataList = ref([
 					background: #e7f3ff;
 					cursor: pointer;
 					position: relative;
+
 					&:hover {
 						background: #cae3fc;
 					}
+
 					.btn-text {
 						width: 80px;
 						color: var(--color-main-active);
@@ -342,12 +389,14 @@ const dataList = ref([
 						margin-left: 36px;
 						text-align: center;
 					}
+
 					.btn-icon {
 						position: absolute;
 						top: 16px;
 						right: 19px;
 						width: 6px;
 						height: 12px;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -356,6 +405,7 @@ const dataList = ref([
 				}
 			}
 		}
+
 		.data {
 			width: 1600px;
 			height: 316px;
@@ -364,6 +414,7 @@ const dataList = ref([
 			justify-content: space-between;
 			align-content: space-between;
 			flex-wrap: wrap;
+
 			.data-item {
 				width: 520px;
 				height: 150px;
@@ -374,10 +425,12 @@ const dataList = ref([
 				position: relative;
 				cursor: pointer;
 				transition: transform 0.3s ease, box-shadow 0.3s ease;
+
 				&:hover {
 					transform: translateY(-3px);
 					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 				}
+
 				img {
 					width: 88px;
 					height: 88px;
@@ -385,7 +438,15 @@ const dataList = ref([
 					top: 30px;
 					left: 23px;
 				}
+
 				.data-item-title {
+					width: 260px;
+					white-space: nowrap;
+					/* 保持在一行内 */
+					overflow: hidden;
+					/* 隐藏超出部分 */
+					text-overflow: ellipsis;
+					/* 超出部分显示省略号 */
 					position: absolute;
 					top: 19px;
 					left: 132px;
@@ -395,6 +456,7 @@ const dataList = ref([
 					line-height: 42px;
 					color: rgb(59, 65, 75);
 				}
+
 				.data-item-name {
 					position: absolute;
 					top: 71px;
@@ -405,6 +467,7 @@ const dataList = ref([
 					line-height: 24px;
 					color: rgb(95, 101, 108);
 				}
+
 				.data-item-abb {
 					position: absolute;
 					top: 101px;
@@ -415,6 +478,7 @@ const dataList = ref([
 					line-height: 24px;
 					color: rgb(95, 101, 108);
 				}
+
 				.data-item-num {
 					position: absolute;
 					top: 19px;
@@ -427,40 +491,48 @@ const dataList = ref([
 				}
 			}
 		}
+
 		.newdata {
 			width: 1600px;
 			height: 538px;
 			margin: 36px auto 64px auto;
+
 			.newdata-main {
 				width: 1600px;
 				height: 460px;
 				margin-top: 36px;
 			}
 		}
+
 		.ask {
 			width: 1600px;
 			height: 528px;
 			margin: 0 auto 64px auto;
+
 			.ask-main {
 				width: 1600px;
 				height: 450px;
 				margin-top: 36px;
 			}
 		}
+
 		.datasub {
 			width: 1600px;
 			height: 1014px;
 			margin: 0 auto 88px auto;
+
 			.datasub-main {
 				width: 1600px;
 				height: 936px;
 				margin-top: 36px;
 			}
 		}
+
 		.reslib {
 			width: 1600px;
 			height: 1633px;
 			margin: 0 auto 0px auto;
+
 			.reslib-main {
 				width: 1600px;
 				height: 1565px;