Skip to content

R
risk-monitor
提交 6738cddb authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

科研资助接口对接

上级 2399015e
隐藏空白字符变更
内嵌 并排
正在显示 包含 1612 行增加 和 1162 行删除
src/api/scientificFunding/overview.js 0 → 100644
浏览文件 @ 6738cddb
// 科研资助体系
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
浏览文件 @ 6738cddb
<template> <template>
<div class="com-title"> <div class="com-title">
<div class="cl1"></div> <div class="cl1"></div>
<div class="cl2"></div> <div class="cl2"></div>
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<div class="cl3"></div> <div class="cl3"></div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
// 传入的title数据 // 传入的title数据
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: "" default: ""
} }
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.com-title { .com-title {
width: 1575px; width: 1575px;
height: 42px; height: 42px;
display: flex; display: flex;
align-items: center; align-items: center;
.cl1 { .cl1 {
width: 24px; width: 24px;
height: 30px; height: 30px;
background-color: rgba(174, 214, 255, 1); background-color: rgba(174, 214, 255, 1);
margin-right: 8px; margin-right: 8px;
} }
.cl2 { .cl2 {
width: 8px; width: 8px;
height: 30px; height: 30px;
background-color: rgba(174, 214, 255, 1); background-color: rgba(174, 214, 255, 1);
margin-right: 8px; margin-right: 8px;
} }
.title { .title {
width: 152px; width: 152px;
height: 42px; height: 42px;
...@@ -51,6 +55,7 @@ const props = defineProps({ ...@@ -51,6 +55,7 @@ const props = defineProps({
line-height: 42px; line-height: 42px;
margin-right: 8px; margin-right: 8px;
} }
.cl3 { .cl3 {
width: 1367px; width: 1367px;
height: 1px; height: 1px;
...@@ -58,5 +63,4 @@ const props = defineProps({ ...@@ -58,5 +63,4 @@ const props = defineProps({
box-sizing: border-box; box-sizing: border-box;
} }
} }
</style> </style>
src/views/scientificFunding/components/askPage/index.vue
浏览文件 @ 6738cddb
...@@ -7,53 +7,51 @@ ...@@ -7,53 +7,51 @@
<div class="more" @click="handleToMoreNews">更多 +</div> <div class="more" @click="handleToMoreNews">更多 +</div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item"> <div class="box3-item" v-for="(news, index) in leftList" :key="index">
<img :src="item.image" alt=""> <div class="left">
<div class="item-content"> <img :src="news.newsImage" alt="" />
<div class="title">{{item.title}}</div> </div>
<div class="content">{{item.content}}</div> <div class="right">
<div class="time">{{item.time}}</div> <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> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right-box">
<div class="right-title"> <div class="right-title">
<img src="./assets/icon02.png" alt=""> <img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div> <div class="tit">社交媒体</div>
</div> </div>
<div class="right-main"> <div class="right-main">
<div class="trump"> <div class="box4-main-item" v-for="(item, index) in rightList" :key="index">
<img src="./assets/title01.png" alt=""> <div class="left">
<div class="trump-main"> <img :src="item.personImage" alt="" />
<div class="cl1">{{ rightList[0].name }}</div>
<div class="cl2">{{ rightList[0].content }}</div>
<div class="cl3">{{ rightList[0].time }}</div>
</div> </div>
</div> <div class="right">
<div class="mask"> <div class="right-top">
<img src="./assets/title02.png" alt=""> <div class="name">{{ item.personName }}</div>
<div class="mask-main"> <div class="time">{{ item.time + '.' + item.orgName }}</div>
<div class="cl1">{{ rightList[1].name }}</div> </div>
<div class="cl2">{{ rightList[1].content }}</div> <div class="content">{{ item.remarks }}</div>
<div class="cl3">{{ rightList[1].time }}</div>
</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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import {
getSocialMediaInfo, getNews
} from "@/api/scientificFunding/overview";
import router from "@/router" import router from "@/router"
import image01 from './assets/image01.png' import image01 from './assets/image01.png'
import image02 from './assets/image02.png' import image02 from './assets/image02.png'
...@@ -67,86 +65,115 @@ import title03 from './assets/title03.png' ...@@ -67,86 +65,115 @@ import title03 from './assets/title03.png'
const leftList = ref([ const leftList = ref([
{ {
id:1, id: 1,
title:'美国NSF寻求建立政企共同资助的研究生奖学金模式', title: '美国NSF寻求建立政企共同资助的研究生奖学金模式',
content:'美国国家科学基金会（NSF）开始寻求建立与行业合作伙伴共同资助的新研究生奖学金计划...', content: '美国国家科学基金会（NSF）开始寻求建立与行业合作伙伴共同资助的新研究生奖学金计划...',
time:'11-4 · 华盛顿邮报', time: '11-4 · 华盛顿邮报',
image:image01 image: image01
}, },
{ {
id:2, id: 2,
title:'美国NSF投资2.8亿美元支持人工智能项目开发', title: '美国NSF投资2.8亿美元支持人工智能项目开发',
content:'自7月23日白宫发布《赢得人工智能竞赛：美国人工智能行动计划》以来，美国国家科学基...', content: '自7月23日白宫发布《赢得人工智能竞赛：美国人工智能行动计划》以来，美国国家科学基...',
time:'11-4 · 纽约时报', time: '11-4 · 纽约时报',
image:image02 image: image02
}, },
{ {
id:3, id: 3,
title:'美国NASA资助地球观测和大型望远镜新技术', title: '美国NASA资助地球观测和大型望远镜新技术',
content:'美国国家航空航天局（NASA）先后资助两项任务，以促进地球观测和大型望远镜新技术的...', content: '美国国家航空航天局（NASA）先后资助两项任务，以促进地球观测和大型望远镜新技术的...',
time:'11-3 · 洛杉矶时报', time: '11-3 · 洛杉矶时报',
image:image03 image: image03
}, },
{ {
id:4, id: 4,
title:'美国NSF、NIH和FDA支持数字医学孪生技术应用开发', title: '美国NSF、NIH和FDA支持数字医学孪生技术应用开发',
content:'美国国家科学基金会（NSF）、美国国立卫生研究院（NIH）和美国食品药品监督管理局（F...', content: '美国国家科学基金会（NSF）、美国国立卫生研究院（NIH）和美国食品药品监督管理局（F...',
time:'11-3 · 今日美国', time: '11-3 · 今日美国',
image:image04 image: image04
}, },
{ {
id:5, id: 5,
title:'美国NIH拨款推进All of Us研究计划数据集应用', title: '美国NIH拨款推进All of Us研究计划数据集应用',
content:'美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据...', content: '美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据...',
time:'11-2 · ​福克斯新闻网', time: '11-2 · ​福克斯新闻网',
image:image05 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([ const rightList = ref([
{ {
id:1, id: 1,
name:'唐纳德·特朗普', name: '唐纳德·特朗普',
content:'埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。', content: '埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
time:'15:23 · 发布于真实社交', time: '15:23 · 发布于真实社交',
title:title01 title: title01
}, },
{ {
id:2, id: 2,
name:'埃隆·马斯克', name: '埃隆·马斯克',
content:'如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。', content: '如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
time:'14:49 · 发布于X', time: '14:49 · 发布于X',
title:title02 title: title02
}, },
{ {
id:3, id: 3,
name:'塞巴斯蒂安·马拉比', name: '塞巴斯蒂安·马拉比',
content:'提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。', content: '提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
time:'11:05 · 发布于X', time: '11:05 · 发布于X',
title:title03 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 handleToMoreNews = () => {
const route = router.resolve("/newsBrief"); const route = router.resolve("/newsBrief");
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
onMounted(async () => {
handleNews()
handleSocialMediaInfo()
});
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.ask-page { .ask-page {
width: 1600px; width: 1600px;
height: 450px; height: 450px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 792px; width: 792px;
height: 450px; height: 450px;
...@@ -155,11 +182,13 @@ const handleToMoreNews = () => { ...@@ -155,11 +182,13 @@ const handleToMoreNews = () => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.left-title { .left-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -167,9 +196,10 @@ const handleToMoreNews = () => { ...@@ -167,9 +196,10 @@ const handleToMoreNews = () => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
width: 80px; width: 90px;
height: 48px; height: 48px;
padding: 11px 0; padding: 11px 0;
font-size: 20px; font-size: 20px;
...@@ -178,6 +208,7 @@ const handleToMoreNews = () => { ...@@ -178,6 +208,7 @@ const handleToMoreNews = () => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -192,69 +223,98 @@ const handleToMoreNews = () => { ...@@ -192,69 +223,98 @@ const handleToMoreNews = () => {
cursor: pointer; cursor: pointer;
} }
} }
.left-main { .left-main {
width: 792px;
height: 402px; height: 402px;
padding: 20px 22px 21px 21px; overflow-y: auto;
.main-item {
width: 749px; padding-top: 6px;
height: 64px;
.box3-item {
display: flex; display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px;
img { .left {
width: 72px; width: 72px;
height: 48px; height: 48px;
margin-right: 20px; margin-top: 15px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
} }
.item-content {
.right {
width: 657px; width: 657px;
height: 50px; margin-left: 20px;
position: relative;
.title { .right-top {
font-size: 16px; width: 657px;
font-weight: 700; display: flex;
font-family: 'Microsoft YaHei'; justify-content: space-between;
line-height: 24px;
color: rgb(59, 65, 75); .title {
cursor: pointer; margin-top: 13px;
width: 520px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
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;
line-height: 22px;
}
} }
.content {
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); overflow: hidden;
cursor: pointer; text-overflow: ellipsis;
} white-space: nowrap;
.time {
position: absolute;
top: 0px;
right: 0px;
font-size: 14px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 22px;
color: rgb(95, 101, 108);
cursor: pointer;
} }
} }
} }
} }
} }
.right {
.right-box {
width: 792px; width: 792px;
height: 450px; height: 450px;
border-radius: 10px; border-radius: 10px;
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.right-title { .right-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -262,9 +322,10 @@ const handleToMoreNews = () => { ...@@ -262,9 +322,10 @@ const handleToMoreNews = () => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
width: 80px; width: 90px;
height: 48px; height: 48px;
padding: 11px 0; padding: 11px 0;
font-size: 20px; font-size: 20px;
...@@ -273,6 +334,7 @@ const handleToMoreNews = () => { ...@@ -273,6 +334,7 @@ const handleToMoreNews = () => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -287,139 +349,67 @@ const handleToMoreNews = () => { ...@@ -287,139 +349,67 @@ const handleToMoreNews = () => {
cursor: pointer; cursor: pointer;
} }
} }
.right-main { .right-main {
width: 792px;
height: 402px; height: 402px;
padding: 23px 30px 25px 21px; overflow-y: auto;
.trump { box-sizing: border-box;
width: 740px; padding-top: 8px;
height: 148px;
margin-bottom: 16px;
display: flex; .box4-main-item {
img { margin-top: 16px;
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);
}
}
}
.mask {
width: 740px;
height: 76px;
margin-bottom: 16px;
display: flex; display: flex;
img { margin-left: 21px;
.left {
margin-top: 5px;
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-right: 8.5px;
} img {
.mask-main { width: 100%;
width: 695.6px; height: 100%;
height: 76px;
background-image: url('./assets/title02bg.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);
} }
} }
}
.malaby { .right {
width: 740px; margin-left: 10px;
height: 98px; width: 690px;
margin-bottom: 16px; box-sizing: border-box;
display: flex; border: 1px solid rgba(231, 243, 255, 1);
img { background: rgba(246, 250, 255, 1);
width: 36px; padding: 10px 15px;
height: 36px;
margin-right: 8.5px; .right-top {
} display: flex;
.malaby-main { justify-content: space-between;
width: 695.6px;
height: 98px; .name {
background-image: url('./assets/title03bg.png'); height: 24px;
padding: 11px 14px 12px 22.5px; color: rgba(59, 65, 75, 1);
background-size: cover; font-family: Microsoft YaHei;
position: relative; font-size: 16px;
.cl1 { font-weight: 700;
font-size: 16px; line-height: 24px;
font-weight: 700; }
font-family: 'Microsoft YaHei';
line-height: 24px; .time {
color: rgb(59, 65, 75); height: 30px;
margin-bottom: 5px; color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
} }
.cl2 {
.content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px; 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
浏览文件 @ 6738cddb
<template> <template>
<div class="data-new"> <div class="data-new">
<div class="left"> <div class="left">
<img src="./assets/leftbtn.png" alt="" class="left-btn" /> <img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handleSwithCurDecree('left')" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" /> <img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleSwithCurDecree('right')" />
<div class="left-top"> <div class="left-top">
<img src="./assets/icon01.png" alt="" /> <img src="./assets/icon01.png" alt="" />
<div class="left-top-title">最新资助项目</div> <div class="left-top-title">最新资助项目</div>
<span>查看详情 ></span> <span>查看详情 ></span>
</div> </div>
<div class="left-center"> <el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
<img src="./assets/usImg.png" alt="" /> indicator-position="none">
<div class="left-center-main"> <el-carousel-item v-for="(itemData, indexData) in box1Data" :key="index">
<div class="left-center-main-title"> <div class="left-center">
NSF 在 EPSCoR 的管辖区投资 3000 万美元，用于能源、半导体、纳米技术和生物技术领域的研究和人才发展
<img :src="itemData.logoUrl" alt="" />
<div class="left-center-main">
<div class="left-center-main-title">
{{ itemData.projectName }}
</div>
<div class="left-center-main-ul">
<ul>
<li>
<span class="ul-title">投资主体：</span>
<span class="ul-content">美国国家科学基金会</span>
</li>
<li>
<span class="ul-title">发布日期：</span>
<span class="ul-content">{{ itemData.publicationDate }}</span>
</li>
<li>
<span class="ul-title">资助经费：</span>
<span class="ul-content">{{ itemData.amount }}</span>
</li>
<li>
<span class="ul-title">涉及领域：</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">{{ itemData.fromOrgNameList.join(',') }}</span>
</li>
</ul>
</div>
</div>
<!-- <div class="left-center-title">国会法案</div> -->
</div> </div>
<div class="left-center-main-ul"> <div class="left-bottom">
<ul> <ul>
<li> <li class="left-bottom-li">内容摘要：</li>
<span class="ul-title">投资主体：</span>
<span class="ul-content">美国国家科学基金会</span>
</li>
<li>
<span class="ul-title">发布日期：</span>
<span class="ul-content">2025年11月26日</span>
</li>
<li>
<span class="ul-title">资助经费：</span>
<span class="ul-content">3,000</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>
</li>
<li>
<span class="ul-title">资助对象：</span>
<span class="ul-content">蒙大拿理工大学、博伊西州立大学、路易斯安那州立大学等6个资助对象</span>
</li>
</ul> </ul>
<div class="left-bottom-content">{{ itemData.abstractContent }}
</div>
</div> </div>
</div> </el-carousel-item>
<!-- <div class="left-center-title">国会法案</div> --> </el-carousel>
</div>
<div class="left-bottom">
<ul>
<li class="left-bottom-li">内容摘要：</li>
</ul>
<div class="left-bottom-content">
美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州投资约 3000 万美元，建立 NSF EPSCoR
科学与技术卓越研究中心（NSF EPSCoR CREST 中心）。这些中心旨在扩展 STEM
知识，提升科研产出，并吸引更多来自这些地区的学生进入 STEM 领域。
</div>
</div>
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
<img src="./assets/icon02.png" alt="" /> <img src="./assets/icon02.png" alt="" />
<div class="right-top-title"> <div class="right-top-title">
风险信号 风险信号
<span>6</span> <span>{{ list.length }}</span>
</div> </div>
</div> </div>
<div style="margin: 6px 34px 0 23px"> <div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main"> <div v-for="item, index in list" :key="index" class="right-main">
<div <div class="main-left" :class="{
class="main-left" cl4: item.signalLevel === '特别重大',
:class="{ cl5: item.signalLevel === '重大风险',
cl4: item.title === '特别重大', cl6: item.signalLevel === '一般风险'
cl5: item.title === '重大风险', }">
cl6: item.title === '一般风险' {{ item.signalLevel }}
}"
>
{{ item.title }}
</div> </div>
<div class="main-center">{{ item.content }}</div> <div class="main-center">{{ item.signalTitle }}</div>
<div class="main-right">{{ item.time }}</div> <div class="main-right">{{ item.signalTime }}</div>
</div> </div>
</div> </div>
<div class="right-mainbtn" @click="handleToMoreRiskSignal"> <div class="right-mainbtn" @click="handleToMoreRiskSignal">
...@@ -88,7 +87,10 @@ ...@@ -88,7 +87,10 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import {
getNewProject, getRiskSignal
} from "@/api/scientificFunding/overview";
import router from "@/router"; import router from "@/router";
const list = ref([ const list = ref([
...@@ -130,11 +132,52 @@ 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 handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal"); const route = router.resolve("/riskSignal");
window.open(route.href, "_blank"); 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -142,11 +185,13 @@ const handleToMoreRiskSignal = () => { ...@@ -142,11 +185,13 @@ const handleToMoreRiskSignal = () => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.data-new { .data-new {
width: 1600px; width: 1600px;
height: 460px; height: 460px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 1064px; width: 1064px;
height: 460px; height: 460px;
...@@ -156,6 +201,7 @@ const handleToMoreRiskSignal = () => { ...@@ -156,6 +201,7 @@ const handleToMoreRiskSignal = () => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative; position: relative;
.left-btn { .left-btn {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -163,7 +209,9 @@ const handleToMoreRiskSignal = () => { ...@@ -163,7 +209,9 @@ const handleToMoreRiskSignal = () => {
top: 223px; top: 223px;
left: 0px; left: 0px;
cursor: pointer; cursor: pointer;
z-index: 1000;
} }
.right-btn { .right-btn {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -171,12 +219,15 @@ const handleToMoreRiskSignal = () => { ...@@ -171,12 +219,15 @@ const handleToMoreRiskSignal = () => {
top: 223px; top: 223px;
right: 0px; right: 0px;
cursor: pointer; cursor: pointer;
z-index: 1000;
} }
.left-top { .left-top {
width: 100%; width: 100%;
height: 48px; height: 48px;
position: relative; position: relative;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
img { img {
width: 22px; width: 22px;
height: 22px; height: 22px;
...@@ -184,6 +235,7 @@ const handleToMoreRiskSignal = () => { ...@@ -184,6 +235,7 @@ const handleToMoreRiskSignal = () => {
top: 15px; top: 15px;
left: 23px; left: 23px;
} }
span { span {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -194,9 +246,10 @@ const handleToMoreRiskSignal = () => { ...@@ -194,9 +246,10 @@ const handleToMoreRiskSignal = () => {
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
cursor: pointer; cursor: pointer;
} }
.left-top-title { .left-top-title {
margin-left: 60px; margin-left: 60px;
width: 152px; width: 156px;
height: 48px; height: 48px;
background-color: rgb(5, 95, 194); background-color: rgb(5, 95, 194);
color: #fff; color: #fff;
...@@ -208,6 +261,7 @@ const handleToMoreRiskSignal = () => { ...@@ -208,6 +261,7 @@ const handleToMoreRiskSignal = () => {
padding: 11px 16px; padding: 11px 16px;
} }
} }
.left-center { .left-center {
width: 967px; width: 967px;
height: 250px; height: 250px;
...@@ -215,15 +269,19 @@ const handleToMoreRiskSignal = () => { ...@@ -215,15 +269,19 @@ const handleToMoreRiskSignal = () => {
margin-left: 62px; margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 148px; width: 148px;
height: 148px; height: 148px;
margin-right: 21px; margin-right: 21px;
} }
display: flex; display: flex;
.left-center-main { .left-center-main {
width: 758px; width: 758px;
height: 175px; height: 175px;
.left-center-main-title { .left-center-main-title {
margin-left: 19px; margin-left: 19px;
margin-bottom: 17px; margin-bottom: 17px;
...@@ -232,15 +290,19 @@ const handleToMoreRiskSignal = () => { ...@@ -232,15 +290,19 @@ const handleToMoreRiskSignal = () => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.left-center-main-ul { .left-center-main-ul {
// width: 439px; // width: 439px;
height: 132px; height: 132px;
ul { ul {
list-style-position: inside; list-style-position: inside;
li { li {
width: 100%; width: 100%;
height: 24px; height: 24px;
margin-bottom: 12px; margin-bottom: 12px;
.ul-title { .ul-title {
display: inline-block; display: inline-block;
width: 120px; width: 120px;
...@@ -251,6 +313,7 @@ const handleToMoreRiskSignal = () => { ...@@ -251,6 +313,7 @@ const handleToMoreRiskSignal = () => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.ul-content { .ul-content {
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
...@@ -258,6 +321,7 @@ const handleToMoreRiskSignal = () => { ...@@ -258,6 +321,7 @@ const handleToMoreRiskSignal = () => {
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
.ul-pie { .ul-pie {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
...@@ -266,21 +330,25 @@ const handleToMoreRiskSignal = () => { ...@@ -266,21 +330,25 @@ const handleToMoreRiskSignal = () => {
border-radius: 4px; border-radius: 4px;
margin-right: 8px; margin-right: 8px;
} }
.cl1 { .cl1 {
border-color: rgba(186, 224, 255, 1); border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1); background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
} }
.cl2 { .cl2 {
border-color: rgba(255, 163, 158, 1); border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1); color: rgba(245, 34, 45, 1);
} }
.cl3 { .cl3 {
border-color: rgba(135, 232, 222, 1); border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1); background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1); color: rgba(19, 168, 168, 1);
} }
.cl4 { .cl4 {
border-color: rgba(211, 173, 247, 1); border-color: rgba(211, 173, 247, 1);
background-color: rgba(249, 240, 255, 1); background-color: rgba(249, 240, 255, 1);
...@@ -290,6 +358,7 @@ const handleToMoreRiskSignal = () => { ...@@ -290,6 +358,7 @@ const handleToMoreRiskSignal = () => {
} }
} }
} }
.left-center-title { .left-center-title {
padding: 3px 8px 5px; padding: 3px 8px 5px;
height: 32px; height: 32px;
...@@ -305,10 +374,13 @@ const handleToMoreRiskSignal = () => { ...@@ -305,10 +374,13 @@ const handleToMoreRiskSignal = () => {
top: -1px; top: -1px;
} }
} }
.left-bottom { .left-bottom {
margin: 17px 0 0 62px; margin: 17px 0 0 62px;
ul { ul {
list-style-position: inside; list-style-position: inside;
.left-bottom-li { .left-bottom-li {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -318,6 +390,7 @@ const handleToMoreRiskSignal = () => { ...@@ -318,6 +390,7 @@ const handleToMoreRiskSignal = () => {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.left-bottom-content { .left-bottom-content {
width: 943px; width: 943px;
margin-left: 22px; margin-left: 22px;
...@@ -329,6 +402,7 @@ const handleToMoreRiskSignal = () => { ...@@ -329,6 +402,7 @@ const handleToMoreRiskSignal = () => {
} }
} }
} }
.right { .right {
width: 520px; width: 520px;
height: 460px; height: 460px;
...@@ -337,11 +411,13 @@ const handleToMoreRiskSignal = () => { ...@@ -337,11 +411,13 @@ const handleToMoreRiskSignal = () => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative; position: relative;
.right-top { .right-top {
width: 520px; width: 520px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 21px; width: 21px;
height: 16.84px; height: 16.84px;
...@@ -349,6 +425,7 @@ const handleToMoreRiskSignal = () => { ...@@ -349,6 +425,7 @@ const handleToMoreRiskSignal = () => {
top: 15.1px; top: 15.1px;
left: 19.5px; left: 19.5px;
} }
.right-top-title { .right-top-title {
padding: 11px 16px; padding: 11px 16px;
width: 148px; width: 148px;
...@@ -361,6 +438,7 @@ const handleToMoreRiskSignal = () => { ...@@ -361,6 +438,7 @@ const handleToMoreRiskSignal = () => {
text-align: center; text-align: center;
color: #fff; color: #fff;
margin-left: 60px; margin-left: 60px;
span { span {
display: inline-block; display: inline-block;
width: 24px; width: 24px;
...@@ -376,6 +454,7 @@ const handleToMoreRiskSignal = () => { ...@@ -376,6 +454,7 @@ const handleToMoreRiskSignal = () => {
} }
} }
} }
.right-main { .right-main {
width: 468px; width: 468px;
padding-right: 5px; padding-right: 5px;
...@@ -384,9 +463,11 @@ const handleToMoreRiskSignal = () => { ...@@ -384,9 +463,11 @@ const handleToMoreRiskSignal = () => {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.main-left { .main-left {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -399,20 +480,31 @@ const handleToMoreRiskSignal = () => { ...@@ -399,20 +480,31 @@ const handleToMoreRiskSignal = () => {
padding: 6px 4px; padding: 6px 4px;
text-align: center; text-align: center;
} }
.cl4 { .cl4 {
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81); color: rgb(206, 79, 81);
} }
.cl5 { .cl5 {
background-color: rgba(255, 247, 230, 1); background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1); color: rgba(250, 140, 22, 1);
} }
.cl6 { .cl6 {
background-color: rgba(246, 255, 237, 1); background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1); color: rgba(82, 196, 26, 1);
} }
.main-center { .main-center {
width: 347px; white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
width: 200px;
/* 设置一个固定的宽度 */
height: 30px; height: 30px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -421,8 +513,9 @@ const handleToMoreRiskSignal = () => { ...@@ -421,8 +513,9 @@ const handleToMoreRiskSignal = () => {
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
margin-right: 2px; margin-right: 2px;
} }
.main-right { .main-right {
width: 60px; width: 115px;
height: 24px; height: 24px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -432,6 +525,7 @@ const handleToMoreRiskSignal = () => { ...@@ -432,6 +525,7 @@ const handleToMoreRiskSignal = () => {
text-align: right; text-align: right;
} }
} }
.right-mainbtn { .right-mainbtn {
width: 460px; width: 460px;
height: 42px; height: 42px;
...@@ -445,11 +539,13 @@ const handleToMoreRiskSignal = () => { ...@@ -445,11 +539,13 @@ const handleToMoreRiskSignal = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 8px; margin-right: 8px;
} }
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
......
src/views/scientificFunding/components/dataSub/index.vue
浏览文件 @ 6738cddb
...@@ -5,25 +5,35 @@ ...@@ -5,25 +5,35 @@
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt="" /> <img src="./assets/icon01.png" alt="" />
<div class="tit">资助领域分布情况</div> <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-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
<div class="left-main"> <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> </div>
<div class="left"> <div class="left">
<div class="left-title"> <div class="left-title">
<img src="./assets/icon03.png" alt="" /> <img src="./assets/icon03.png" alt="" />
<div class="tit">机构资助领域情况</div> <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-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
<div class="left-main1"> <div class="left-main1">
<div class="left-sankey-echarts" ref="leftSankeyRef"></div> <div class="left-sankey-echarts" ref="leftSankeyRef"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="datasub-right"> <div class="datasub-right">
...@@ -37,20 +47,20 @@ ...@@ -37,20 +47,20 @@
</div> </div>
<div class="right-main"> <div class="right-main">
<div class="right-main-echarts" ref="rightChartRef"></div> <div class="right-main-echarts" ref="rightChartRef"></div>
<div class="right-main-tit">亿美元</div> <div class="right-main-tit">亿美元</div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="right-title"> <div class="right-title">
<img src="./assets/icon03.png" alt="" /> <img src="./assets/icon03.png" alt="" />
<div class="tit">承研主体排名</div> <div class="tit">项目资助强度分布</div>
<el-select v-model="value3" placeholder="Select" class="select"> <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-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
<div class="right-main1"> <div class="right-main1">
<div class="right-boxplot-echarts" ref="boxplotChartRef"></div> <div class="right-boxplot-echarts" ref="boxplotChartRef"></div>
<div class="right-main1-tit">单位：亿美元</div> <div class="right-main1-tit">单位：亿美元</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -59,352 +69,415 @@ ...@@ -59,352 +69,415 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue"; import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import {
findFundField, findCountryProjectAreaList, getCountryFundingChange, getCountryFundProjectChange, getOrgFundsArea, getOrgFundStrength
} from "@/api/scientificFunding/overview";
import * as echarts from "echarts"; 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"; const value = ref(10);
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 options = [ const options = [
{ {
value: "近十年", value: 10,
label: "近十年" label: "近十年"
}, },
{ {
value: "近五年", value: 5,
label: "近五年" label: "近五年"
} }
]; ];
const options1 = [ const options1 = [
{ {
value: "2025年", value: "2025",
label: "2025年" label: "2025年"
}, },
{ {
value: "2024年", value: "2024",
label: "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 leftChartRef = ref(null);
const rightChartRef = ref(null); const leftChartRef1 = ref(null);
const leftSankeyRef = ref(null); // 资助体系v2.0:资助领域分布情况:资助经费
const boxplotChartRef = ref(null); const handleGetFundField = async () => {
let leftChart; try {
let rightChart; let params = {
let leftSankey; year: value1.value
let boxplotChart; }
const res = await findFundField(params);
console.log("资助领域分布情况", res);
if (res.code === 200 && res.data) {
initLeftDonut(res.data, true)
}
} catch (error) {
console.error("获取资助领域分布情况error", error);
}
};
const initBoxPlot = () => { //资助体系v2.0:资助领域分布情况:资助项目
if (!boxplotChartRef.value) { const handleFindCountryProjectAreaList = async () => {
console.warn("boxplotChartRef is null"); try {
return; let params = {
} year: value1.value
if (boxplotChart) boxplotChart.dispose(); }
boxplotChart = echarts.init(boxplotChartRef.value); const res = await findCountryProjectAreaList(params);
console.log("资助领域分布情况", res);
const categories = ["人工智能", "通信网络", "生物科技", "能源"]; if (res.code === 200 && res.data) {
const dataUS = [ initLeftDonut(res.data, false)
[28, 40, 60, 72, 82], }
[22, 32, 42, 50, 55], } catch (error) {
[52, 65, 85, 96, 105], console.error("获取资助领域分布情况error", error);
[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 option = {
legend: {
data: ["美国", "中国"],
left: 20,
top: 0,
itemWidth: 12,
itemHeight: 12,
icon: 'circle',
textStyle: {
color: "#5F656C",
fontSize: 14
}
},
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow"
}
},
grid: {
left: 50,
right: 20,
top: 60,
bottom: 40
},
xAxis: {
type: "category",
data: categories,
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#E6E6E6"
}
},
axisTick: {
show: false
},
axisLabel: {
color: "#5F656C",
fontSize: 14,
margin: 15
},
splitLine: {
show: false
}
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#F0F2F5",
type: "solid"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#5F656C",
fontSize: 14
}
},
series: [
{
name: "美国",
type: "boxplot",
data: dataUS,
boxWidth: 30,
itemStyle: {
color: "#fff",
borderColor: "#1890FF",
borderWidth: 1
},
emphasis: {
itemStyle: {
borderWidth: 2,
shadowBlur: 5,
shadowOffsetX: 1,
shadowColor: "rgba(0,0,0,0.2)"
}
}
},
{
name: "中国",
type: "boxplot",
data: dataCN,
boxWidth: 30,
itemStyle: {
color: "#fff",
borderColor: "#D15054",
borderWidth: 1
},
emphasis: {
itemStyle: {
borderWidth: 2,
shadowBlur: 5,
shadowOffsetX: 1,
shadowColor: "rgba(0,0,0,0.2)"
}
}
}
]
};
boxplotChart.setOption(option);
}; };
// 资助领域分布情况
const initLeftDonut = (rawData, show) => {
const initLeftDonut = () => { const color = [
if (!leftChartRef.value) return; 'rgba(206, 79, 81, 1)',
if (leftChart) leftChart.dispose(); 'rgba(145, 202, 255, 1)',
leftChart = echarts.init(leftChartRef.value); 'rgba(255, 169, 64, 1)',
const data = [ 'rgba(146, 84, 222, 1)',
{ name: "集成电路", value: 50 }, 'rgba(92, 219, 211, 1)',
{ name: "人工智能", value: 46 }, 'rgba(5, 95, 194, 1)'
{ name: "通信网络", value: 40 },
{ name: "能源", value: 32 },
{ name: "先进制造", value: 31 },
{ name: "生物科技", value: 31 },
{ name: "航空航天", value: 30 },
{ name: "新材料", value: 24 }
];
const colors = [
"rgba(105, 177, 255, 1)", // 集成电路
"rgba(255, 192, 105, 1)", // 人工智能
"rgba(135, 232, 222, 1)", // 通信网络
"rgba(89, 126, 247, 1)", // 能源
"rgba(214, 228, 255, 1)", // 先进制造
"rgba(255, 120, 117, 1)", // 生物科技
"rgba(179, 127, 235, 1)", // 航空航天
"rgba(255, 163, 158, 1)" // 新材料
]; ];
const option = { const option = {
color: colors, tooltip: {
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` }, 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);
// 资助体系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 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;
}
if (boxplotChart) boxplotChart.dispose();
boxplotChart = echarts.init(boxplotChartRef.value);
// 提取所有行业名称
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: ["美国", "中国"],
left: 20,
top: 0,
itemWidth: 12,
itemHeight: 12,
icon: 'circle',
textStyle: {
color: "#5F656C",
fontSize: 14
}
},
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow"
}
},
grid: {
left: 50,
right: 20,
top: 60,
bottom: 40
},
xAxis: {
type: "category",
data: categories,
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#E6E6E6"
}
},
axisTick: {
show: false
},
axisLabel: {
color: "#5F656C",
fontSize: 14,
margin: 15
},
splitLine: {
show: false
}
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#F0F2F5",
type: "solid"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#5F656C",
fontSize: 14
}
},
series: [ series: [
{ {
type: "pie", name: "美国",
radius: [96, 120], type: "boxplot",
center: ["50%", "50%"], data: dataUS,
avoidLabelOverlap: true, boxWidth: 30,
itemStyle: { borderWidth: 0 }, itemStyle: {
label: { color: "#fff",
show: true, borderColor: "#1890FF",
position: "outside", borderWidth: 1
alignTo: "edge",
formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`,
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: {
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
color: "rgb(59, 65, 75)"
},
value: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
},
percent: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
}
},
labelLine: {
show: true,
length: 30,
length2: 0,
maxSurfaceAngle: 80
}, },
labelLayout: function (params) { emphasis: {
const isLeft = params.labelRect.x < leftChart.getWidth() / 2; itemStyle: {
const points = params.labelLinePoints; borderWidth: 2,
// 导航线终点在标签下方 shadowBlur: 5,
const lineY = params.labelRect.y + params.labelRect.height; shadowOffsetX: 1,
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width; shadowColor: "rgba(0,0,0,0.2)"
points[2][1] = lineY; }
points[1][1] = lineY; }
return { },
labelLinePoints: points {
}; name: "中国",
type: "boxplot",
data: dataCN,
boxWidth: 30,
itemStyle: {
color: "#fff",
borderColor: "#D15054",
borderWidth: 1
}, },
data: data.map((d, i) => ({ emphasis: {
...d, itemStyle: {
labelLine: { lineStyle: { color: colors[i], width: 1 } } borderWidth: 2,
})) shadowBlur: 5,
shadowOffsetX: 1,
shadowColor: "rgba(0,0,0,0.2)"
}
}
} }
] ]
}; };
leftChart.setOption(option);
boxplotChart.setOption(option);
}; };
const initRightLine = () => {
let leftChart;
let leftChart1;
let rightChart;
let leftSankey;
let boxplotChart;
//资助经费变化情况
const initRightLine = (data) => {
if (!rightChartRef.value) return; if (!rightChartRef.value) return;
if (rightChart) rightChart.dispose(); if (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value); rightChart = echarts.init(rightChartRef.value);
const years = ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"]; const colorMap = [
const nsf = [75, 35, 45, 60, 72, 68, 95, 85, 82, 80, 80, 86]; "rgba(20, 89, 187, 1)",
const darpa = [55, 40, 48, 42, 60, 65, 70, 78, 60, 92, 85, 80]; "rgba(206, 79, 81, 1)",
const nasa = [60, 42, 28, 25, 30, 35, 40, 52, 38, 60, 36, 42]; "rgba(255, 172, 77, 1)",
const nih = [38, 25, 22, 28, 30, 34, 40, 60, 28, 35, 22, 34]; "rgba(19, 168, 168, 1)",
const nist = [40, 28, 22, 20, 24, 26, 30, 50, 25, 20, 18, 15]; "rgba(114, 46, 209, 1)"
const colorMap = { ];
NSF: "rgba(20, 89, 187, 1)", // 提取所有年份
DARPA: "rgba(206, 79, 81, 1)", const years = data.map(item => item.year);
NASA: "rgba(255, 172, 77, 1)",
NIH: "rgba(19, 168, 168, 1)", // 提取所有组织名称
NIST: "rgba(114, 46, 209, 1)" const orgNames = data.flatMap(item => item.fundsOrgList.map(org => org.orgName));
}; const uniqueOrgNames = [...new Set(orgNames)];
// 构建 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;
});
// 提取颜色并设置透明度为 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,
formatter: orgName, // 只显示 orgName
rich: {
[orgName]: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: color
}
}
},
areaStyle: { color: areaColor }
};
});
// 构建 ECharts 配置
const option = { const option = {
color: [colorMap.NSF, colorMap.DARPA, colorMap.NASA, colorMap.NIH, colorMap.NIST], color: colorMap,
grid: { left: 40, right: 80, top: 20, bottom: 40 }, grid: { left: 40, right: 80, top: 20, bottom: 40 },
tooltip: { trigger: "axis" }, tooltip: { trigger: "axis" },
legend: { show: false }, legend: { show: false },
...@@ -437,313 +510,161 @@ const initRightLine = () => { ...@@ -437,313 +510,161 @@ const initRightLine = () => {
lineHeight: 22 lineHeight: 22
} }
}, },
series: [ series: 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)" }
}
]
}; };
rightChart.setOption(option); rightChart.setOption(option);
}; };
const initLeftSankey = () => { const leftSankeyRef = ref(null);
if (!leftSankeyRef.value) return; const value2 = ref(2025);
if (leftSankey) leftSankey.dispose(); // 机构资助领域情况
leftSankey = echarts.init(leftSankeyRef.value); const handleGetOrgFundsArea = async () => {
const leftNodes = [ try {
{ name: "美国国防高级研究计划局DARPA" }, let params = {
{ name: "美国国家科学基金会NSF" }, year: value2.value
{ name: "美国国家航空航天局NASA" }, }
{ name: "美国国立卫生研究院NIH" }, const res = await getOrgFundsArea(params);
{ name: "美国农业部USDA" }, console.log("机构资助领域情况", res);
{ name: "国家标准与技术研究院NIST" }, if (res.code === 200 && res.data) {
{ name: "美国能源部DOE" } initLeftSankey(res.data)
]; }
const rightNodes = [ } catch (error) {
{ name: "人工智能" }, console.error("获取机构资助领域情况error", error);
{ 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 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 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 }
],
sort: 'none',
layoutIterations: 0,
draggable: false,
nodeAlign: "justify",
orient: "horizontal",
left: 10,
right: 70,
top: 0,
bottom: 0,
nodeWidth: 40,
nodeGap: 10,
lineStyle: { color: "#E7E7E8", opacity: 0.8, curveness: 0.5 },
emphasis: { focus: "adjacency" },
label: {
show: true,
color: "rgb(59, 65, 75)",
fontSize: 14,
fontFamily: "Microsoft YaHei",
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;
},
position: 'right'
}
}]
};
leftSankey.setOption(option);
}; };
const handleResize = () => { //机构资助领域情况
if (leftChart) leftChart.resize(); const initLeftSankey = (data) => {
if (rightChart) rightChart.resize(); if (!leftSankeyRef.value) return;
if (leftSankey) leftSankey.resize(); if (leftSankey) leftSankey.dispose();
if (boxplotChart) boxplotChart.resize(); leftSankey = echarts.init(leftSankeyRef.value);
// 提取所有组织名称和行业名称
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 colorMap = {
"国家地理空间情报局": "#722ED1",
"国际商业机器公司": "#0A57A6",
"成都海威华芯科技有限公司": "#2266FF",
"新一代通信技术": "#B05FA0",
"人工智能": "#5070DD"
};
// 构建 ECharts 配置
const option = {
tooltip: { trigger: "item" },
series: [{
type: "sankey",
data: nodes.map(node => ({
name: node.name,
itemStyle: { color: colorMap[node.name] || "#bbb" }
})),
links: links,
sort: 'none',
layoutIterations: 0,
draggable: false,
nodeAlign: "justify",
orient: "horizontal",
left: 10,
right: 70,
top: 0,
bottom: 0,
nodeWidth: 40,
nodeGap: 10,
lineStyle: { color: "#E7E7E8", opacity: 0.8, curveness: 0.5 },
emphasis: { focus: "adjacency" },
label: {
show: true,
color: "rgb(59, 65, 75)",
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 16,
formatter: (params) => {
return params.name;
},
position: 'right'
}
}]
};
leftSankey.setOption(option);
}; };
// const handleResize = () => {
// if (leftChart) leftChart.resize();
// if (leftChart1) leftChart1.resize();
// if (rightChart) rightChart.resize();
// if (leftSankey) leftSankey.resize();
// if (boxplotChart) boxplotChart.resize();
// };
onMounted(() => { onMounted(() => {
nextTick(() => { handleGetFundField()
initLeftDonut(); handleFindCountryProjectAreaList()
initRightLine(); handlegetCountryFundingChange()
initLeftSankey(); handlegetCountryFundProjectChange()
initBoxPlot(); handleGetOrgFundsArea()
}); handlegetOrgFundStrength()
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;
}
}); });
// 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -751,14 +672,17 @@ onBeforeUnmount(() => { ...@@ -751,14 +672,17 @@ onBeforeUnmount(() => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.datasub { .datasub {
width: 1600px; width: 1600px;
height: 936px; height: 936px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.datasub-left { .datasub-left {
width: 792px; width: 792px;
height: 936px; height: 936px;
.left { .left {
width: 792px; width: 792px;
height: 460px; height: 460px;
...@@ -767,11 +691,13 @@ onBeforeUnmount(() => { ...@@ -767,11 +691,13 @@ onBeforeUnmount(() => {
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.left-title { .left-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -779,6 +705,7 @@ onBeforeUnmount(() => { ...@@ -779,6 +705,7 @@ onBeforeUnmount(() => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
height: 48px; height: 48px;
...@@ -789,6 +716,7 @@ onBeforeUnmount(() => { ...@@ -789,6 +716,7 @@ onBeforeUnmount(() => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.select { .select {
width: 120px; width: 120px;
height: 28px; height: 28px;
...@@ -798,29 +726,37 @@ onBeforeUnmount(() => { ...@@ -798,29 +726,37 @@ onBeforeUnmount(() => {
right: 31px; right: 31px;
} }
} }
.left-main { .left-main {
width: 792px; width: 792px;
height: 412px; height: 412px;
padding: 52px 60px 78px 61px; padding: 52px 60px 78px 61px;
.left-main-echarts { .left-main-echarts {
width: 100%;
/* 确保宽度占满容器 */
height: 400px;
/* 设置一个合适的高度 */
}
}
.left-main1 {
width: 792px;
height: 412px;
padding: 30px 30px 30px 30px;
.left-sankey-echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.left-main1 {
width: 792px;
height: 412px;
padding: 30px 30px 30px 30px;
.left-sankey-echarts {
width: 100%;
height: 100%;
}
}
} }
} }
.datasub-right { .datasub-right {
width: 792px; width: 792px;
height: 936px; height: 936px;
.right { .right {
width: 792px; width: 792px;
height: 460px; height: 460px;
...@@ -828,11 +764,13 @@ onBeforeUnmount(() => { ...@@ -828,11 +764,13 @@ onBeforeUnmount(() => {
margin-bottom: 16px; margin-bottom: 16px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.right-title { .right-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -840,6 +778,7 @@ onBeforeUnmount(() => { ...@@ -840,6 +778,7 @@ onBeforeUnmount(() => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
height: 48px; height: 48px;
...@@ -850,6 +789,7 @@ onBeforeUnmount(() => { ...@@ -850,6 +789,7 @@ onBeforeUnmount(() => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.select1 { .select1 {
width: 155px; width: 155px;
height: 28px; height: 28px;
...@@ -858,6 +798,7 @@ onBeforeUnmount(() => { ...@@ -858,6 +798,7 @@ onBeforeUnmount(() => {
top: 11px; top: 11px;
right: 163px; right: 163px;
} }
.select { .select {
width: 120px; width: 120px;
height: 28px; height: 28px;
...@@ -867,50 +808,112 @@ onBeforeUnmount(() => { ...@@ -867,50 +808,112 @@ onBeforeUnmount(() => {
right: 31px; right: 31px;
} }
} }
.right-main { .right-main {
width: 792px; width: 792px;
height: 421px; height: 421px;
padding: 40px 5px 30px 22px; padding: 40px 5px 30px 22px;
position: relative; position: relative;
.right-main-echarts { .right-main-echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.right-main-tit {
position: absolute; .right-main-tit {
top: 18px; position: absolute;
right: 83px; top: 18px;
font-size: 14px; right: 83px;
font-weight: 400; font-size: 14px;
font-family: "Microsoft YaHei"; font-weight: 400;
line-height: 22px; font-family: "Microsoft YaHei";
color: rgb(132, 136, 142); line-height: 22px;
} color: rgb(132, 136, 142);
}
} }
.right-main1 {
.right-main1 {
width: 792px; width: 792px;
height: 421px; height: 421px;
padding: 20px 20px; padding: 20px 20px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
.right-boxplot-echarts {
width: 100%; .right-boxplot-echarts {
height: 100%; width: 100%;
min-height: 300px; height: 100%;
} min-height: 300px;
.right-main1-tit { }
position: absolute;
top: 18px; .right-main1-tit {
right: 31px; position: absolute;
font-size: 14px; top: 18px;
font-weight: 400; right: 31px;
font-family: "Microsoft YaHei"; font-size: 14px;
line-height: 22px; font-weight: 400;
color: rgb(132, 136, 142); font-family: "Microsoft YaHei";
z-index: 10; line-height: 22px;
} color: rgb(132, 136, 142);
z-index: 10;
}
} }
} }
} }
} }
.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> </style>
src/views/scientificFunding/components/resLib/index.vue
浏览文件 @ 6738cddb
<template> <template>
<div class="reslib-page"> <div class="reslib-page">
<div class="nav"> <div class="nav">
<div <div v-for="item in navList" :key="item.orgId" class="nav-item" :class="{ active: item.orgId === activeItem }"
v-for="item in navList" @click="activeItem = item.orgId, handleGetProjectListNew()">
:key="item" {{ item.orgName }}
class="nav-item" </div>
:class="{ active: item === activeItem }" </div>
@click="activeItem = item" <div class="select-box">
> <div class="paixu-btn" @click="handleSwithSort()">
{{ item }} <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="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> </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="main">
<div class="left"> <div class="left">
<div class="left-ti1"></div> <div class="left-ti1"></div>
<div class="left-ti2"></div> <div class="left-ti2"></div>
<div class="left-title">项目经费</div> <!-- <div class="left-title">项目经费</div>
<div class="left-content"> <div class="left-content">
<div v-for="(item, i) in dataList" :key="item.id" class="left-item"> <div v-for="(item, i) in dataList" :key="item.id" class="left-item">
<input type="checkbox" checked />{{ item.name }} <input type="checkbox" checked />{{ item.name }}
</div> </div>
</div> </div> -->
<div class="left-title cl1">涉及领域</div> <div class="left-title cl1">涉及领域</div>
<div class="left-content"> <div class="left-content">
<div v-for="(item, i) in dataList2" :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 }} <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> </div>
<div class="right"> <div class="right">
...@@ -38,40 +64,31 @@ ...@@ -38,40 +64,31 @@
</div> </div>
<div class="right-main"> <div class="right-main">
<div v-for="(item, i) in mainList" :key="item.id" class="right-item"> <div v-for="(item, i) in mainList" :key="item.id" class="right-item">
<img :src="item.img" alt="" /> <img :src="item.logoUrl" alt="" />
<div class="right-item-title">{{ item.title }}</div> <div class="right-item-title">{{ item.projectName }}</div>
<div class="right-item-content">{{ item.content }}</div> <div class="right-item-content">{{ item.abstractContent }}</div>
<div class="right-item-pie"> <div class="right-item-pie">
<div <div v-for="(pie, i) in item.areaList" :key="i" class="right-item-pie-item" :class="{
v-for="(pie, i) in item.pie" cl1: pie === '新材料',
:key="i" cl2: pie === '人工智能',
class="right-item-pie-item" cl3: pie === '量子科技',
:class="{ cl4: pie === '能源',
cl1: pie === '新材料', cl5: pie === '生物科技',
cl2: pie === '人工智能', cl6: pie === '航空航天'
cl3: pie === '量子科技', }">
cl4: pie === '能源',
cl5: pie === '生物科技',
cl6: pie === '航空航天'
}"
>
{{ pie }} {{ pie }}
</div> </div>
</div> </div>
<div class="right-item-time">{{ item.time }}</div> <div class="right-item-time">{{ item.publicationDate }}</div>
<div class="right-item-money" :style="{ color: item.color }">{{ item.money }}</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>
<div class="page"> <div class="page">
<div class="count">共1205项调查</div> <div class="count">共{{ total }}项</div>
<el-pagination <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
v-model:current-page="currentPage" layout="prev, pager, next" background @current-change="handlePageChange" />
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -80,46 +97,16 @@ ...@@ -80,46 +97,16 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import NSF from "./assets/NSF.png"; import {
import DARPA from "./assets/DARPA.png"; getProjectListNew, geFundSourceOrg, getAreaType
import NASA from "./assets/NASA.png"; } from "@/api/scientificFunding/overview";
import NIH from "./assets/NIH.png";
import DOE from "./assets/DOE.png";
const navList = ref([]);
const navList = ref(["全部限制", "NSF", "DARPA", "NASA", "NIH", "DOE", "NIST"]); const activeItem = ref("");
const activeItem = ref("全部限制");
const areaList = ref([
const value = ref("发布时间");
const options = [
{
value: "发布时间",
label: "发布时间"
},
{
value: "发布日期",
label: "发布日期"
}
];
const dataList = ref([
{
id: 1,
name: ">1亿美元"
},
{
id: 2,
name: ">1000万美元"
},
{
id: 3,
name: ">100万美元"
},
{
id: 4,
name: "<100万美元"
}
]);
const dataList2 = ref([
{ {
id: 1, id: 1,
name: "全部领域" name: "全部领域"
...@@ -157,121 +144,157 @@ const dataList2 = ref([ ...@@ -157,121 +144,157 @@ const dataList2 = ref([
name: "海洋" name: "海洋"
} }
]); ]);
const mainList = ref([
{
id: 1, // 来源机构列表
title: "NSF：量子化学合作研究项目", const handleGeFundSourceOrg = async () => {
content: "美国国家科学基金会和英国研究与创新（UKRI）正在投资八个联合研究项目，这些项目有望为量子计算带来突破......", try {
pie: ["新材料", "量子科技"], const res = await geFundSourceOrg();
time: "2025年11月26日", console.log("来源机构列表", res);
money: "$1,000万", if (res.code === 200 && res.data) {
color:"rgb(255, 149, 77)", navList.value = res.data
img: NSF activeItem.value = res.data[0].orgId
}, }
{ } catch (error) {
id: 2, console.error("获取来源机构列表error", error);
title: "NIH：All of Us研究计划数据集应用", }
content: };
"美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据集开展生物医学研究，并开发数据分析的新模型...",
pie: ["生物科技"], const checkAll = ref(false);
time: "2025年11月26日", const isIndeterminate = ref(true);
money: "$970万", const selectedAreaList = ref([]);
color:"rgb(232, 189, 11)",
img: NIH const handleCheckAllChange = val => {
}, // console.log(val, "handleCheckAllChange");
{ if (val) {
id: 3, isIndeterminate.value = false;
title: "NSF：EPSCoR管辖区投资 计划", selectedAreaList.value.length !== areaList.value.length
content: ? (selectedAreaList.value = areaList.value.map(obj => obj.id))
"美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州的机构投资约 3000 万美元，以建立 NSF EPSCoR 科学卓越研究中心......", : "";
pie: ["人工智能", "新材料", "量子科技"], } else {
time: "2025年11月26日", selectedAreaList.value = [];
money: "$3,000万", }
color:"rgb(255, 149, 77)", // selectedAreaList.value = val ? areaList : []
img: NSF // isIndeterminate.value = false
}, handleGetProjectListNew();
{ };
id: 4, const handleCheckedAreaChange = () => {
title: "NASA：创新型早期空间技术研究资助项目", // console.log(selectedAreaList.value, "handleCheckedAreaChange");
content: console.log(selectedAreaList.value, "当前选中的领域");
"NASA宣布对11所大学的研究提案进行资助（表1），这些项目旨在通过对创新型早期技术的研究，解决美国空间计划中具有较高优先度的...", selectedAreaList.value.length !== areaList.value.length
pie: ["航空航天"], ? (isIndeterminate.value = true)
time: "2025年11月26日", : ((checkAll.value = true), (isIndeterminate.value = false));
money: "$2.8亿", handleGetProjectListNew();
color:"rgb(206, 79, 81)", };
img: NASA
},
{ const pubTimeList = ref([
id: 5,
title: "DARPA：可调控生物功能微系统技术开发",
content:
"美国国防高级研究计划局（DARPA）宣布通过“微系统诱导催化”（MICA）项目资助巴特尔纪念研究所1030万美元[1]，探索使用微系统...",
pie: ["生物科技"],
time: "2025年11月26日",
money: "$1,030万",
color:"rgb(255, 149, 77)",
img: DARPA
},
{ {
id: 6, id: 2025,
title: "NSF：国家人工智能研究资源运营中心", name: "2025"
content: "美国国家科学基金会今日宣布一项新招标，旨在建立国家人工智能研究资源运营中心（NAIRR-OC）。这标志着一个关键......",
pie: ["人工智能"],
time: "2025年11月26日",
money: "$1.05亿",
color:"rgb(206, 79, 81)",
img: NSF
}, },
{ {
id: 7, id: 2024,
title: "NASA：“人体研究计划”和“空间生物学计划”的16个研究提案", name: "2024"
content:
"NASA将与俄罗斯联邦航天局（Roscosmos）合作开展国际空间站一年期驻留任务，以评估长期空间飞行对人的影响[3]。 入选“人体研究...",
pie: ["生物科技", "航空航天"],
time: "2025年11月26日",
money: "$1.9亿",
color:"rgb(206, 79, 81)",
img: NASA
}, },
{ {
id: 8, id: 2023,
title: "NSF：NVIDIA 合作 Ai2 模型创新", name: "2023"
content: "美国国家科学基金会宣布与英伟达合作，开发一套人工智能模型，这将彻底改变美国科学家利用人工智能的能力......",
pie: ["人工智能"],
time: "2025年11月26日",
money: "$240万",
color:"rgb(232, 189, 11)",
img: NSF
}, },
{ {
id: 9, id: 2022,
title: "NASA：新一轮机器人研发", name: "2022"
content:
"美国国家科学基金会（NSF）宣布将联合国家航空航天局（NASA）、国立卫生研究院（NIH）、农业部（USDA）、国防部（DoD）支持...",
pie: ["人工智能"],
time: "2025年11月26日",
money: "$850万",
color:"rgb(232, 189, 11)",
img: NASA
}, },
{ {
id: 10, id: 2021,
title: "DOE：微电网及储能技术研发", name: "2021"
content: "美国能源部电力办公室宣布两项资助信息，共计投入2210万美元，推进微电网和电网级储能技术创新发展。",
pie: ["能源"],
time: "2025年11月26日",
money: "$2,210万",
color:"rgb(255, 149, 77)",
img: DOE
} }
// {
// 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 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 total = ref(1205); const mainList = ref([]);
const pageSize = ref(121); const total = ref(0);
const currentPage = ref(5); const pageSize = ref(10);
const currentPage = ref(1);
const handlePageChange = p => { const handlePageChange = p => {
currentPage.value = 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -279,18 +302,84 @@ const handlePageChange = p => { ...@@ -279,18 +302,84 @@ const handlePageChange = p => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.reslib-page { .reslib-page {
width: 1600px; width: 1600px;
height: 1565px; height: 1565px;
position: relative; 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 { .nav {
width: 721px; width: calc(100% - 100px);
height: 42px; height: 42px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 34px; margin-bottom: 34px;
.nav-item { .nav-item {
width: 100%;
text-align: center;
cursor: pointer; cursor: pointer;
padding: 8px 20px; padding: 8px 20px;
font-size: 20px; font-size: 20px;
...@@ -299,6 +388,7 @@ const handlePageChange = p => { ...@@ -299,6 +388,7 @@ const handlePageChange = p => {
line-height: 26px; line-height: 26px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.active { .active {
background-color: rgb(5, 95, 194); background-color: rgb(5, 95, 194);
border-radius: 21px; border-radius: 21px;
...@@ -306,24 +396,28 @@ const handlePageChange = p => { ...@@ -306,24 +396,28 @@ const handlePageChange = p => {
font-weight: 700; font-weight: 700;
} }
} }
.select { .select {
width: 128px; width: 128px;
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 0px; right: 0px;
} }
.main { .main {
width: 1600px; width: 1600px;
height: 1489px; height: 1489px;
display: flex; display: flex;
.left { .left {
width: 300px; width: 300px;
height: 565px;
margin-right: 16px; margin-right: 16px;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative; position: relative;
.left-ti1 { .left-ti1 {
width: 8px; width: 8px;
height: 16px; height: 16px;
...@@ -334,6 +428,7 @@ const handlePageChange = p => { ...@@ -334,6 +428,7 @@ const handlePageChange = p => {
top: 17px; top: 17px;
left: 0px; left: 0px;
} }
.left-ti2 { .left-ti2 {
width: 8px; width: 8px;
height: 16px; height: 16px;
...@@ -344,6 +439,7 @@ const handlePageChange = p => { ...@@ -344,6 +439,7 @@ const handlePageChange = p => {
top: 207px; top: 207px;
left: 0px; left: 0px;
} }
.left-title { .left-title {
margin-left: 25px; margin-left: 25px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
...@@ -353,13 +449,27 @@ const handlePageChange = p => { ...@@ -353,13 +449,27 @@ const handlePageChange = p => {
line-height: 24px; line-height: 24px;
margin-top: 13px; margin-top: 13px;
} }
.left-content { .left-content {
width: 253px; width: 253px;
height: 132px; // height: 132px;
margin-left: 25px; margin-left: 25px;
margin-top: 13px; margin-top: 13px;
display: flex;
flex-wrap: wrap;
/* 允许内容换行 */
justify-content: space-between;
/* 两端对齐 */
.left-item { .left-item {
width: 120px; white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
width: calc(50% - 8px);
/* 每个选项占一半宽度，减去间距 */
height: 30px; height: 30px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 16px; font-size: 16px;
...@@ -367,6 +477,7 @@ const handlePageChange = p => { ...@@ -367,6 +477,7 @@ const handlePageChange = p => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
input[type="checkbox"] { input[type="checkbox"] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
...@@ -378,10 +489,12 @@ const handlePageChange = p => { ...@@ -378,10 +489,12 @@ const handlePageChange = p => {
background-color: #fff; background-color: #fff;
vertical-align: middle; vertical-align: middle;
} }
input[type="checkbox"]:checked { input[type="checkbox"]:checked {
background-color: rgb(5, 95, 194); background-color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194); border-color: rgb(5, 95, 194);
} }
input[type="checkbox"]:checked::after { input[type="checkbox"]:checked::after {
content: ""; content: "";
display: block; display: block;
...@@ -395,21 +508,25 @@ const handlePageChange = p => { ...@@ -395,21 +508,25 @@ const handlePageChange = p => {
} }
} }
} }
.cl1 { .cl1 {
margin-top: 21px; margin-top: 21px;
} }
} }
.right { .right {
width: 1284px; width: 1284px;
height: 1489px; height: 1489px;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.right-title { .right-title {
width: 1284px; width: 1284px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(235, 238, 242); border-bottom: 1px solid rgb(235, 238, 242);
position: relative; position: relative;
img { img {
width: 22px; width: 22px;
height: 19px; height: 19px;
...@@ -417,6 +534,7 @@ const handlePageChange = p => { ...@@ -417,6 +534,7 @@ const handlePageChange = p => {
top: 15px; top: 15px;
left: 20px; left: 20px;
} }
div { div {
width: 120px; width: 120px;
height: 48px; height: 48px;
...@@ -429,17 +547,20 @@ const handlePageChange = p => { ...@@ -429,17 +547,20 @@ const handlePageChange = p => {
padding: 11px 0; padding: 11px 0;
} }
} }
.right-main { .right-main {
width: 1284px; width: 1284px;
height: 1441px; height: 1441px;
padding: 19px 34px 20px 29px; padding: 19px 34px 20px 29px;
position: relative; position: relative;
.right-item { .right-item {
width: 1221px; width: 1221px;
height: 124px; height: 124px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
margin-bottom: 8px; margin-bottom: 8px;
position: relative; position: relative;
img { img {
width: 32px; width: 32px;
height: 32px; height: 32px;
...@@ -447,6 +568,7 @@ const handlePageChange = p => { ...@@ -447,6 +568,7 @@ const handlePageChange = p => {
top: 9px; top: 9px;
left: 7px; left: 7px;
} }
.right-item-title { .right-item-title {
position: absolute; position: absolute;
top: 10px; top: 10px;
...@@ -457,7 +579,16 @@ const handlePageChange = p => { ...@@ -457,7 +579,16 @@ const handlePageChange = p => {
line-height: 26px; line-height: 26px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.right-item-content { .right-item-content {
white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
width: 90%;
/* 设置一个固定的宽度或百分比 */
position: absolute; position: absolute;
top: 44px; top: 44px;
left: 56px; left: 56px;
...@@ -467,11 +598,13 @@ const handlePageChange = p => { ...@@ -467,11 +598,13 @@ const handlePageChange = p => {
line-height: 24px; line-height: 24px;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
.right-item-pie { .right-item-pie {
position: absolute; position: absolute;
top: 76px; top: 76px;
left: 56px; left: 56px;
display: flex; display: flex;
.right-item-pie-item { .right-item-pie-item {
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
...@@ -482,37 +615,44 @@ const handlePageChange = p => { ...@@ -482,37 +615,44 @@ const handlePageChange = p => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 20px; line-height: 20px;
} }
.cl1 { .cl1 {
background-color: rgba(230, 255, 251, 1); background-color: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1); border-color: rgba(135, 232, 222, 1);
color: rgba(19, 168, 168, 1); color: rgba(19, 168, 168, 1);
} }
.cl2 { .cl2 {
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1); border-color: rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1); color: rgba(245, 34, 45, 1);
} }
.cl3 { .cl3 {
background-color: rgba(249, 240, 255, 1); background-color: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1); border-color: rgba(211, 173, 247, 1);
color: rgba(114, 46, 209, 1); color: rgba(114, 46, 209, 1);
} }
.cl4 { .cl4 {
background-color: rgba(230, 255, 251, 1); background-color: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1); border-color: rgba(135, 232, 222, 1);
color: rgba(19, 168, 168, 1); color: rgba(19, 168, 168, 1);
} }
.cl5 { .cl5 {
background-color: rgba(230, 244, 255, 1); background-color: rgba(230, 244, 255, 1);
border-color: rgba(145, 202, 255, 1); border-color: rgba(145, 202, 255, 1);
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
} }
.cl6 { .cl6 {
background-color: rgba(240, 245, 255, 1); background-color: rgba(240, 245, 255, 1);
border-color: rgba(173, 198, 255, 1); border-color: rgba(173, 198, 255, 1);
color: rgba(47, 84, 235, 1); color: rgba(47, 84, 235, 1);
} }
} }
.right-item-time { .right-item-time {
position: absolute; position: absolute;
top: 13px; top: 13px;
...@@ -523,6 +663,7 @@ const handlePageChange = p => { ...@@ -523,6 +663,7 @@ const handlePageChange = p => {
line-height: 24px; line-height: 24px;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
.right-item-money { .right-item-money {
position: absolute; position: absolute;
top: 76px; top: 76px;
...@@ -533,6 +674,7 @@ const handlePageChange = p => { ...@@ -533,6 +674,7 @@ const handlePageChange = p => {
line-height: 24px; line-height: 24px;
} }
} }
.page { .page {
width: 1221px; width: 1221px;
height: 40px; height: 40px;
...@@ -543,6 +685,7 @@ const handlePageChange = p => { ...@@ -543,6 +685,7 @@ const handlePageChange = p => {
bottom: 20px; bottom: 20px;
left: 20px; left: 20px;
padding-left: 11px; padding-left: 11px;
.count { .count {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -550,10 +693,12 @@ const handlePageChange = p => { ...@@ -550,10 +693,12 @@ const handlePageChange = p => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
:deep(.el-pagination) { :deep(.el-pagination) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
:deep(.el-pagination.is-background .el-pager li) { :deep(.el-pagination.is-background .el-pager li) {
min-width: 32px; min-width: 32px;
height: 32px; height: 32px;
...@@ -567,12 +712,14 @@ const handlePageChange = p => { ...@@ -567,12 +712,14 @@ const handlePageChange = p => {
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
} }
:deep(.el-pagination.is-background .el-pager li.is-active) { :deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff; background-color: #fff;
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
border-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; // box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
} }
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) { :deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none; border: none;
background-color: transparent; background-color: transparent;
...@@ -580,6 +727,7 @@ const handlePageChange = p => { ...@@ -580,6 +727,7 @@ const handlePageChange = p => {
min-width: 16px; min-width: 16px;
margin: 0 6px; margin: 0 6px;
} }
:deep(.el-pagination.is-background .btn-prev), :deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) { :deep(.el-pagination.is-background .btn-next) {
min-width: 32px; min-width: 32px;
...@@ -592,6 +740,7 @@ const handlePageChange = p => { ...@@ -592,6 +740,7 @@ const handlePageChange = p => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
margin: 0 6px; margin: 0 6px;
} }
:deep(.el-pagination.is-background .btn-prev.is-disabled), :deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) { :deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45); color: rgba(95, 101, 108, 0.45);
......
src/views/scientificFunding/index.vue
浏览文件 @ 6738cddb
<!--科研资助体系-->
<template> <template>
<div class="coop-page"> <div class="coop-page">
<!-- 面包屑 --> <!-- 面包屑 -->
...@@ -67,12 +68,12 @@ ...@@ -67,12 +68,12 @@
</div> </div>
<!-- 6个数据 --> <!-- 6个数据 -->
<div class="data"> <div class="data">
<div v-for="item in dataList" :key="item.id" class="data-item"> <div v-for="(item, index) in dataList" :key="item.id" class="data-item">
<img :src="item.image" alt="" /> <img :src="item.logoUrl" alt="" />
<div class="data-item-title">{{ item.title }}</div> <div class="data-item-title">{{ item.orgName }}</div>
<div class="data-item-name">{{ item.name }}</div> <div class="data-item-name">{{ item.orgNameEn }}</div>
<div class="data-item-abb">{{ item.abb }}</div> <div class="data-item-abb">{{ item.orgAbbEn }}</div>
<div class="data-item-num" :style="{ color: item.color }">{{ item.num }}</div> <div class="data-item-num" :style="{ color: color[index] }">{{ item.num + '项' }}</div>
</div> </div>
</div> </div>
<!-- 最新动态 --> <!-- 最新动态 -->
...@@ -108,7 +109,7 @@ ...@@ -108,7 +109,7 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue"; import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue"; import newData from "./components/dataNew/index.vue";
...@@ -119,6 +120,11 @@ import HeaderMenu from "@/components/headerMenu.vue"; ...@@ -119,6 +120,11 @@ import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue"; import headerInfo from "@/components/headerInfo.vue";
import scrollToTop from "@/utils/scrollToTop"; import scrollToTop from "@/utils/scrollToTop";
import {
getFundSourceOrg
} from "@/api/scientificFunding/overview";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
import img01 from "./assets/images/img01.png"; import img01 from "./assets/images/img01.png";
...@@ -195,6 +201,30 @@ const dataList = ref([ ...@@ -195,6 +201,30 @@ const dataList = ref([
color: "rgb(5, 95, 194)" 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -202,9 +232,11 @@ const dataList = ref([ ...@@ -202,9 +232,11 @@ const dataList = ref([
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.coop-page { .coop-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
.breadcrumb { .breadcrumb {
width: 100%; width: 100%;
height: 64px; height: 64px;
...@@ -214,6 +246,7 @@ const dataList = ref([ ...@@ -214,6 +246,7 @@ const dataList = ref([
justify-content: space-between; justify-content: space-between;
padding: 0 160px; padding: 0 160px;
} }
.main-content { .main-content {
overflow: auto; overflow: auto;
width: 100%; width: 100%;
...@@ -221,10 +254,12 @@ const dataList = ref([ ...@@ -221,10 +254,12 @@ const dataList = ref([
background: url("./assets/images/background.png"); background: url("./assets/images/background.png");
background-size: 100% 100%; background-size: 100% 100%;
padding: 44px 160px 30px 160px; padding: 44px 160px 30px 160px;
.search { .search {
width: 960px; width: 960px;
height: 168px; height: 168px;
margin: 0 auto 122px auto; margin: 0 auto 122px auto;
.search-main { .search-main {
display: flex; display: flex;
padding-right: 3px; padding-right: 3px;
...@@ -236,9 +271,11 @@ const dataList = ref([ ...@@ -236,9 +271,11 @@ const dataList = ref([
background-color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px; border-radius: 10px;
border: 1px solid #fff; border: 1px solid #fff;
&:hover { &:hover {
border: 1px solid var(--color-main-active); border: 1px solid var(--color-main-active);
} }
.search-input { .search-input {
border: none; border: none;
outline: none; outline: none;
...@@ -252,6 +289,7 @@ const dataList = ref([ ...@@ -252,6 +289,7 @@ const dataList = ref([
line-height: 24px; line-height: 24px;
color: rgb(132, 136, 142); color: rgb(132, 136, 142);
} }
.search-btn { .search-btn {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
...@@ -267,6 +305,7 @@ const dataList = ref([ ...@@ -267,6 +305,7 @@ const dataList = ref([
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
color: #fff; color: #fff;
img { img {
width: 22px; width: 22px;
height: 22px; height: 22px;
...@@ -274,6 +313,7 @@ const dataList = ref([ ...@@ -274,6 +313,7 @@ const dataList = ref([
} }
} }
} }
.search-center { .search-center {
width: 680px; width: 680px;
height: 57px; height: 57px;
...@@ -281,10 +321,12 @@ const dataList = ref([ ...@@ -281,10 +321,12 @@ const dataList = ref([
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.search-item { .search-item {
box-sizing: border-box; box-sizing: border-box;
width: 120px; width: 120px;
height: 57px; height: 57px;
.search-item-num { .search-item-num {
width: 120px; width: 120px;
height: 22px; height: 22px;
...@@ -296,6 +338,7 @@ const dataList = ref([ ...@@ -296,6 +338,7 @@ const dataList = ref([
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.search-item-name { .search-item-name {
width: 128px; width: 128px;
height: 24px; height: 24px;
...@@ -309,6 +352,7 @@ const dataList = ref([ ...@@ -309,6 +352,7 @@ const dataList = ref([
} }
} }
} }
.search-bottom { .search-bottom {
width: 688px; width: 688px;
height: 48px; height: 48px;
...@@ -316,6 +360,7 @@ const dataList = ref([ ...@@ -316,6 +360,7 @@ const dataList = ref([
margin-top: 36px; margin-top: 36px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
// gap: 16px; // gap: 16px;
.btn { .btn {
display: flex; display: flex;
...@@ -329,9 +374,11 @@ const dataList = ref([ ...@@ -329,9 +374,11 @@ const dataList = ref([
background: #e7f3ff; background: #e7f3ff;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
background: #cae3fc; background: #cae3fc;
} }
.btn-text { .btn-text {
width: 80px; width: 80px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -342,12 +389,14 @@ const dataList = ref([ ...@@ -342,12 +389,14 @@ const dataList = ref([
margin-left: 36px; margin-left: 36px;
text-align: center; text-align: center;
} }
.btn-icon { .btn-icon {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 19px; right: 19px;
width: 6px; width: 6px;
height: 12px; height: 12px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -356,6 +405,7 @@ const dataList = ref([ ...@@ -356,6 +405,7 @@ const dataList = ref([
} }
} }
} }
.data { .data {
width: 1600px; width: 1600px;
height: 316px; height: 316px;
...@@ -364,6 +414,7 @@ const dataList = ref([ ...@@ -364,6 +414,7 @@ const dataList = ref([
justify-content: space-between; justify-content: space-between;
align-content: space-between; align-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.data-item { .data-item {
width: 520px; width: 520px;
height: 150px; height: 150px;
...@@ -374,10 +425,12 @@ const dataList = ref([ ...@@ -374,10 +425,12 @@ const dataList = ref([
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover { &:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
} }
img { img {
width: 88px; width: 88px;
height: 88px; height: 88px;
...@@ -385,7 +438,15 @@ const dataList = ref([ ...@@ -385,7 +438,15 @@ const dataList = ref([
top: 30px; top: 30px;
left: 23px; left: 23px;
} }
.data-item-title { .data-item-title {
width: 260px;
white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
position: absolute; position: absolute;
top: 19px; top: 19px;
left: 132px; left: 132px;
...@@ -395,6 +456,7 @@ const dataList = ref([ ...@@ -395,6 +456,7 @@ const dataList = ref([
line-height: 42px; line-height: 42px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.data-item-name { .data-item-name {
position: absolute; position: absolute;
top: 71px; top: 71px;
...@@ -405,6 +467,7 @@ const dataList = ref([ ...@@ -405,6 +467,7 @@ const dataList = ref([
line-height: 24px; line-height: 24px;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
.data-item-abb { .data-item-abb {
position: absolute; position: absolute;
top: 101px; top: 101px;
...@@ -415,6 +478,7 @@ const dataList = ref([ ...@@ -415,6 +478,7 @@ const dataList = ref([
line-height: 24px; line-height: 24px;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
.data-item-num { .data-item-num {
position: absolute; position: absolute;
top: 19px; top: 19px;
...@@ -427,40 +491,48 @@ const dataList = ref([ ...@@ -427,40 +491,48 @@ const dataList = ref([
} }
} }
} }
.newdata { .newdata {
width: 1600px; width: 1600px;
height: 538px; height: 538px;
margin: 36px auto 64px auto; margin: 36px auto 64px auto;
.newdata-main { .newdata-main {
width: 1600px; width: 1600px;
height: 460px; height: 460px;
margin-top: 36px; margin-top: 36px;
} }
} }
.ask { .ask {
width: 1600px; width: 1600px;
height: 528px; height: 528px;
margin: 0 auto 64px auto; margin: 0 auto 64px auto;
.ask-main { .ask-main {
width: 1600px; width: 1600px;
height: 450px; height: 450px;
margin-top: 36px; margin-top: 36px;
} }
} }
.datasub { .datasub {
width: 1600px; width: 1600px;
height: 1014px; height: 1014px;
margin: 0 auto 88px auto; margin: 0 auto 88px auto;
.datasub-main { .datasub-main {
width: 1600px; width: 1600px;
height: 936px; height: 936px;
margin-top: 36px; margin-top: 36px;
} }
} }
.reslib { .reslib {
width: 1600px; width: 1600px;
height: 1633px; height: 1633px;
margin: 0 auto 0px auto; margin: 0 auto 0px auto;
.reslib-main { .reslib-main {
width: 1600px; width: 1600px;
height: 1565px; height: 1565px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论