Skip to content

R
risk-monitor
提交 2397d65d authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !85
上级 35b081bb 1fdd290c
隐藏空白字符变更
内嵌 并排
正在显示 包含 1684 行增加 和 1242 行删除
src/api/scientificFunding/overview.js 0 → 100644
浏览文件 @ 2397d65d
// 科研资助体系
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
浏览文件 @ 2397d65d
<template>
<div class="com-title">
<div class="cl1"></div>
<div class="com-title">
<div class="cl1"></div>
<div class="cl2"></div>
<div class="title">{{ title }}</div>
<div class="cl3"></div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
// 传入的title数据
const props = defineProps({
title: {
type: String,
default: ""
}
title: {
type: String,
default: ""
}
});
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
.com-title {
width: 1575px;
height: 42px;
width: 1575px;
height: 42px;
display: flex;
align-items: center;
.cl1 {
width: 24px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
}
.cl2 {
width: 8px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
}
.title {
width: 152px;
height: 42px;
......@@ -51,6 +55,7 @@ const props = defineProps({
line-height: 42px;
margin-right: 8px;
}
.cl3 {
width: 1367px;
height: 1px;
......@@ -58,5 +63,4 @@ const props = defineProps({
box-sizing: border-box;
}
}
</style>
src/views/scientificFunding/components/askPage/index.vue
浏览文件 @ 2397d65d
......@@ -7,53 +7,51 @@
<div class="more" @click="handleToMoreNews">更多 +</div>
</div>
<div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item">
<img :src="item.image" alt="">
<div class="item-content">
<div class="title">{{item.title}}</div>
<div class="content">{{item.content}}</div>
<div class="time">{{item.time}}</div>
<div class="box3-item" v-for="(news, index) in leftList" :key="index">
<div class="left">
<img :src="news.newsImage" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">{{ news.newsDate + '.' + news.newsOrg }}</div>
</div>
<div class="right-footer">{{ news.newsContent }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-box">
<div class="right-title">
<img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div>
</div>
<div class="right-main">
<div class="trump">
<img src="./assets/title01.png" alt="">
<div class="trump-main">
<div class="cl1">{{ rightList[0].name }}</div>
<div class="cl2">{{ rightList[0].content }}</div>
<div class="cl3">{{ rightList[0].time }}</div>
<div class="box4-main-item" v-for="(item, index) in rightList" :key="index">
<div class="left">
<img :src="item.personImage" alt="" />
</div>
</div>
<div class="mask">
<img src="./assets/title02.png" alt="">
<div class="mask-main">
<div class="cl1">{{ rightList[1].name }}</div>
<div class="cl2">{{ rightList[1].content }}</div>
<div class="cl3">{{ rightList[1].time }}</div>
</div>
</div>
<div class="malaby">
<img src="./assets/title03.png" alt="">
<div class="malaby-main">
<div class="cl1">{{ rightList[2].name }}</div>
<div class="cl2">{{ rightList[2].content }}</div>
<div class="cl3">{{ rightList[2].time }}</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.personName }}</div>
<div class="time">{{ item.time + '.' + item.orgName }}</div>
</div>
<div class="content">{{ item.remarks }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import {
getSocialMediaInfo, getNews
} from "@/api/scientificFunding/overview";
import router from "@/router"
import image01 from './assets/image01.png'
import image02 from './assets/image02.png'
......@@ -67,86 +65,115 @@ import title03 from './assets/title03.png'
const leftList = ref([
{
id:1,
title:'美国NSF寻求建立政企共同资助的研究生奖学金模式',
content:'美国国家科学基金会（NSF）开始寻求建立与行业合作伙伴共同资助的新研究生奖学金计划...',
time:'11-4 · 华盛顿邮报',
image:image01
{
id: 1,
title: '美国NSF寻求建立政企共同资助的研究生奖学金模式',
content: '美国国家科学基金会（NSF）开始寻求建立与行业合作伙伴共同资助的新研究生奖学金计划...',
time: '11-4 · 华盛顿邮报',
image: image01
},
{
id:2,
title:'美国NSF投资2.8亿美元支持人工智能项目开发',
content:'自7月23日白宫发布《赢得人工智能竞赛：美国人工智能行动计划》以来，美国国家科学基...',
time:'11-4 · 纽约时报',
image:image02
{
id: 2,
title: '美国NSF投资2.8亿美元支持人工智能项目开发',
content: '自7月23日白宫发布《赢得人工智能竞赛：美国人工智能行动计划》以来，美国国家科学基...',
time: '11-4 · 纽约时报',
image: image02
},
{
id:3,
title:'美国NASA资助地球观测和大型望远镜新技术',
content:'美国国家航空航天局（NASA）先后资助两项任务，以促进地球观测和大型望远镜新技术的...',
time:'11-3 · 洛杉矶时报',
image:image03
{
id: 3,
title: '美国NASA资助地球观测和大型望远镜新技术',
content: '美国国家航空航天局（NASA）先后资助两项任务，以促进地球观测和大型望远镜新技术的...',
time: '11-3 · 洛杉矶时报',
image: image03
},
{
id:4,
title:'美国NSF、NIH和FDA支持数字医学孪生技术应用开发',
content:'美国国家科学基金会（NSF）、美国国立卫生研究院（NIH）和美国食品药品监督管理局（F...',
time:'11-3 · 今日美国',
image:image04
{
id: 4,
title: '美国NSF、NIH和FDA支持数字医学孪生技术应用开发',
content: '美国国家科学基金会（NSF）、美国国立卫生研究院（NIH）和美国食品药品监督管理局（F...',
time: '11-3 · 今日美国',
image: image04
},
{
id:5,
title:'美国NIH拨款推进All of Us研究计划数据集应用',
content:'美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据...',
time:'11-2 · ​福克斯新闻网',
image:image05
{
id: 5,
title: '美国NIH拨款推进All of Us研究计划数据集应用',
content: '美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据...',
time: '11-2 · ​福克斯新闻网',
image: image05
}
])
//// 新闻资讯
const handleNews = async () => {
try {
const res = await getNews();
console.log("获取新闻资讯", res);
if (res.code === 200 && res.data) {
leftList.value = res.data
}
} catch (error) {
console.error("获取新闻资讯error", error);
}
};
const rightList = ref([
{
id:1,
name:'唐纳德·特朗普',
content:'埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
time:'15:23 · 发布于真实社交',
title:title01
id: 1,
name: '唐纳德·特朗普',
content: '埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。',
time: '15:23 · 发布于真实社交',
title: title01
},
{
id:2,
name:'埃隆·马斯克',
content:'如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
time:'14:49 · 发布于X',
title:title02
id: 2,
name: '埃隆·马斯克',
content: '如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。',
time: '14:49 · 发布于X',
title: title02
},
{
id:3,
name:'塞巴斯蒂安·马拉比',
content:'提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
time:'11:05 · 发布于X',
title:title03
id: 3,
name: '塞巴斯蒂安·马拉比',
content: '提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。',
time: '11:05 · 发布于X',
title: title03
}
])
//// 社交媒体
const handleSocialMediaInfo = async () => {
try {
const res = await getSocialMediaInfo();
console.log("获取社交媒体", res);
if (res.code === 200 && res.data) {
rightList.value = res.data
}
} catch (error) {
console.error("获取社交媒体error", error);
}
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
onMounted(async () => {
handleNews()
handleSocialMediaInfo()
});
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
.ask-page {
width: 1600px;
height: 450px;
display: flex;
justify-content: space-between;
justify-content: space-between;
.left {
width: 792px;
height: 450px;
......@@ -155,11 +182,13 @@ const handleToMoreNews = () => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -167,9 +196,10 @@ const handleToMoreNews = () => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
width: 90px;
height: 48px;
padding: 11px 0;
font-size: 20px;
......@@ -178,6 +208,7 @@ const handleToMoreNews = () => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
......@@ -192,69 +223,98 @@ const handleToMoreNews = () => {
cursor: pointer;
}
}
.left-main {
width: 792px;
height: 402px;
padding: 20px 22px 21px 21px;
.main-item {
width: 749px;
height: 64px;
overflow-y: auto;
padding-top: 6px;
.box3-item {
display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px;
img {
.left {
width: 72px;
height: 48px;
margin-right: 20px;
cursor: pointer;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.item-content {
.right {
width: 657px;
height: 50px;
position: relative;
.title {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
width: 520px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
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-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
cursor: pointer;
}
.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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.right {
.right-box {
width: 792px;
height: 450px;
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -262,9 +322,10 @@ const handleToMoreNews = () => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
width: 80px;
width: 90px;
height: 48px;
padding: 11px 0;
font-size: 20px;
......@@ -273,6 +334,7 @@ const handleToMoreNews = () => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.more {
width: 49px;
height: 24px;
......@@ -287,139 +349,67 @@ const handleToMoreNews = () => {
cursor: pointer;
}
}
.right-main {
width: 792px;
height: 402px;
padding: 23px 30px 25px 21px;
.trump {
width: 740px;
height: 148px;
margin-bottom: 16px;
display: flex;
img {
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;
overflow-y: auto;
box-sizing: border-box;
padding-top: 8px;
.box4-main-item {
margin-top: 16px;
display: flex;
img {
margin-left: 21px;
.left {
margin-top: 5px;
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.mask-main {
width: 695.6px;
height: 76px;
background-image: url('./assets/title02bg.png');
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.cl2 {
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
right: 14px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 30px;
color: rgb(95, 101, 108);
img {
width: 100%;
height: 100%;
}
}
}
.malaby {
width: 740px;
height: 98px;
margin-bottom: 16px;
display: flex;
img {
width: 36px;
height: 36px;
margin-right: 8.5px;
}
.malaby-main {
width: 695.6px;
height: 98px;
background-image: url('./assets/title03bg.png');
padding: 11px 14px 12px 22.5px;
background-size: cover;
position: relative;
.cl1 {
font-size: 16px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
.right {
margin-left: 10px;
width: 690px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
padding: 10px 15px;
.right-top {
display: flex;
justify-content: space-between;
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.time {
height: 30px;
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-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 24px;
color: rgb(59, 65, 75);
}
.cl3 {
position: absolute;
top: 11px;
right: 14px;
font-size: 16px;
font-weight: 400;
font-family: 'Microsoft YaHei';
line-height: 30px;
color: rgb(95, 101, 108);
}
}
}
......
src/views/scientificFunding/components/dataNew/index.vue
浏览文件 @ 2397d65d
<template>
<div class="data-new">
<div class="left">
<img src="./assets/leftbtn.png" alt="" class="left-btn" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" />
<img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handleSwithCurDecree('left')" />
<img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleSwithCurDecree('right')" />
<div class="left-top">
<img src="./assets/icon01.png" alt="" />
<div class="left-top-title">最新资助项目</div>
<span>查看详情 ></span>
</div>
<div class="left-center">
<img src="./assets/usImg.png" alt="" />
<div class="left-center-main">
<div class="left-center-main-title">
NSF 在 EPSCoR 的管辖区投资 3000 万美元，用于能源、半导体、纳米技术和生物技术领域的研究和人才发展
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel-item v-for="(itemData, indexData) in box1Data" :key="index">
<div class="left-center">
<img :src="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 class="left-center-main-ul">
<div class="left-bottom">
<ul>
<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>
<li class="left-bottom-li">内容摘要：</li>
</ul>
<div class="left-bottom-content">{{ itemData.abstractContent }}
</div>
</div>
</div>
<!-- <div class="left-center-title">国会法案</div> -->
</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>
</el-carousel-item>
</el-carousel>
</div>
<div class="right">
<div class="right-top">
<img src="./assets/icon02.png" alt="" />
<div class="right-top-title">
风险信号
<span>6</span>
<span>{{ list.length }}</span>
</div>
</div>
<div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main">
<div
class="main-left"
:class="{
cl4: item.title === '特别重大',
cl5: item.title === '重大风险',
cl6: item.title === '一般风险'
}"
>
{{ item.title }}
<div v-for="item, index in list" :key="index" class="right-main">
<div class="main-left" :class="{
cl4: item.signalLevel === '特别重大',
cl5: item.signalLevel === '重大风险',
cl6: item.signalLevel === '一般风险'
}">
{{ item.signalLevel }}
</div>
<div class="main-center">{{ item.content }}</div>
<div class="main-right">{{ item.time }}</div>
<div class="main-center">{{ item.signalTitle }}</div>
<div class="main-right">{{ item.signalTime }}</div>
</div>
</div>
<div class="right-mainbtn" @click="handleToMoreRiskSignal">
......@@ -88,7 +87,10 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import {
getNewProject, getRiskSignal
} from "@/api/scientificFunding/overview";
import router from "@/router";
const list = ref([
......@@ -130,11 +132,52 @@ const list = ref([
}
]);
//// 获取风险信号
const handleGetRiskSignal = async () => {
try {
const res = await getRiskSignal();
console.log("获取风险信号", res);
if (res.code === 200 && res.data) {
list.value = res.data
}
} catch (error) {
console.error("获取风险信号error", error);
}
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
const box1Data = ref([])
const carouselRef = ref(null);
// 切换当前智库
const handleSwithCurDecree = name => {
console.log(name, carouselRef.value);
if (name === "left") {
carouselRef.value.prev();
} else {
carouselRef.value.next();
}
};
//// 最新资助项目
const handleGetNewProject = async () => {
try {
const res = await getNewProject();
console.log("最新资助项目", res);
if (res.code === 200 && res.data) {
box1Data.value = res.data
}
} catch (error) {
console.error("获取最新资助项目error", error);
}
};
onMounted(async () => {
handleGetRiskSignal()
handleGetNewProject()
});
</script>
<style scoped lang="scss">
......@@ -142,11 +185,13 @@ const handleToMoreRiskSignal = () => {
margin: 0;
padding: 0;
}
.data-new {
width: 1600px;
height: 460px;
display: flex;
justify-content: space-between;
.left {
width: 1064px;
height: 460px;
......@@ -156,6 +201,7 @@ const handleToMoreRiskSignal = () => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.left-btn {
width: 24px;
height: 48px;
......@@ -163,7 +209,9 @@ const handleToMoreRiskSignal = () => {
top: 223px;
left: 0px;
cursor: pointer;
z-index: 1000;
}
.right-btn {
width: 24px;
height: 48px;
......@@ -171,12 +219,15 @@ const handleToMoreRiskSignal = () => {
top: 223px;
right: 0px;
cursor: pointer;
z-index: 1000;
}
.left-top {
width: 100%;
height: 48px;
position: relative;
border-bottom: 1px solid rgb(234, 236, 238);
img {
width: 22px;
height: 22px;
......@@ -184,6 +235,7 @@ const handleToMoreRiskSignal = () => {
top: 15px;
left: 23px;
}
span {
font-size: 16px;
font-weight: 400;
......@@ -194,9 +246,10 @@ const handleToMoreRiskSignal = () => {
color: rgb(5, 95, 194);
cursor: pointer;
}
.left-top-title {
margin-left: 60px;
width: 152px;
width: 156px;
height: 48px;
background-color: rgb(5, 95, 194);
color: #fff;
......@@ -208,6 +261,7 @@ const handleToMoreRiskSignal = () => {
padding: 11px 16px;
}
}
.left-center {
width: 967px;
height: 250px;
......@@ -215,15 +269,19 @@ const handleToMoreRiskSignal = () => {
margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 148px;
height: 148px;
margin-right: 21px;
}
display: flex;
.left-center-main {
width: 758px;
height: 175px;
.left-center-main-title {
margin-left: 19px;
margin-bottom: 17px;
......@@ -232,15 +290,19 @@ const handleToMoreRiskSignal = () => {
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
}
.left-center-main-ul {
// width: 439px;
height: 132px;
ul {
list-style-position: inside;
li {
width: 100%;
height: 24px;
margin-bottom: 12px;
.ul-title {
display: inline-block;
width: 120px;
......@@ -251,6 +313,7 @@ const handleToMoreRiskSignal = () => {
line-height: 24px;
color: rgb(59, 65, 75);
}
.ul-content {
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
......@@ -258,6 +321,7 @@ const handleToMoreRiskSignal = () => {
font-weight: 400;
line-height: 24px;
}
.ul-pie {
display: inline-block;
box-sizing: border-box;
......@@ -266,21 +330,25 @@ const handleToMoreRiskSignal = () => {
border-radius: 4px;
margin-right: 8px;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.cl3 {
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.cl4 {
border-color: rgba(211, 173, 247, 1);
background-color: rgba(249, 240, 255, 1);
......@@ -290,6 +358,7 @@ const handleToMoreRiskSignal = () => {
}
}
}
.left-center-title {
padding: 3px 8px 5px;
height: 32px;
......@@ -305,10 +374,13 @@ const handleToMoreRiskSignal = () => {
top: -1px;
}
}
.left-bottom {
margin: 17px 0 0 62px;
ul {
list-style-position: inside;
.left-bottom-li {
font-size: 16px;
font-weight: 700;
......@@ -318,6 +390,7 @@ const handleToMoreRiskSignal = () => {
margin-bottom: 10px;
}
}
.left-bottom-content {
width: 943px;
margin-left: 22px;
......@@ -329,6 +402,7 @@ const handleToMoreRiskSignal = () => {
}
}
}
.right {
width: 520px;
height: 460px;
......@@ -337,11 +411,13 @@ const handleToMoreRiskSignal = () => {
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative;
.right-top {
width: 520px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 21px;
height: 16.84px;
......@@ -349,6 +425,7 @@ const handleToMoreRiskSignal = () => {
top: 15.1px;
left: 19.5px;
}
.right-top-title {
padding: 11px 16px;
width: 148px;
......@@ -361,6 +438,7 @@ const handleToMoreRiskSignal = () => {
text-align: center;
color: #fff;
margin-left: 60px;
span {
display: inline-block;
width: 24px;
......@@ -376,6 +454,7 @@ const handleToMoreRiskSignal = () => {
}
}
}
.right-main {
width: 468px;
padding-right: 5px;
......@@ -384,9 +463,11 @@ const handleToMoreRiskSignal = () => {
display: flex;
align-items: center;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.main-left {
width: 40px;
height: 40px;
......@@ -399,20 +480,31 @@ const handleToMoreRiskSignal = () => {
padding: 6px 4px;
text-align: center;
}
.cl4 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
}
.cl5 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.cl6 {
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.main-center {
width: 347px;
white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
width: 200px;
/* 设置一个固定的宽度 */
height: 30px;
font-size: 16px;
font-weight: 400;
......@@ -421,8 +513,9 @@ const handleToMoreRiskSignal = () => {
color: rgb(59, 65, 75);
margin-right: 2px;
}
.main-right {
width: 60px;
width: 115px;
height: 24px;
font-size: 16px;
font-weight: 400;
......@@ -432,6 +525,7 @@ const handleToMoreRiskSignal = () => {
text-align: right;
}
}
.right-mainbtn {
width: 460px;
height: 42px;
......@@ -445,11 +539,13 @@ const handleToMoreRiskSignal = () => {
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
......
src/views/scientificFunding/components/dataSub/index.vue
浏览文件 @ 2397d65d
......@@ -5,25 +5,35 @@
<div class="left-title">
<img src="./assets/icon01.png" alt="" />
<div class="tit">资助领域分布情况</div>
<el-select v-model="value1" placeholder="Select" class="select">
<div :class="radio1 === true ? 'btn-select' : 'btn'" style=" right:250px;" @click="changeradio1()">
资助经费
</div>
<div :class="radio1 === false ? 'btn-select' : 'btn'" style=" right: 150px;" @click="changeradio1()">
资助项目
</div>
<el-select v-model="value1" placeholder="Select" class="select" style=" right: 31px;">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="left-main">
<div class="left-main-echarts" ref="leftChartRef"></div>
<div class="left-main-echarts" ref="leftChartRef" v-show="radio1 === true">资助经费</div>
<div class="left-main-echarts" ref="leftChartRef1" v-show="radio1 === false">资助项目</div>
</div>
</div>
<div class="left">
<div class="left-title">
<img src="./assets/icon03.png" alt="" />
<div class="tit">机构资助领域情况</div>
<el-select v-model="value2" placeholder="Select" class="select">
<el-select v-model="value2" placeholder="Select" class="select" @change="handleGetOrgFundsArea">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="left-main1">
<div class="left-sankey-echarts" ref="leftSankeyRef"></div>
</div>
<div class="left-main1">
<div class="left-sankey-echarts" ref="leftSankeyRef"></div>
</div>
</div>
</div>
<div class="datasub-right">
......@@ -37,20 +47,20 @@
</div>
<div class="right-main">
<div class="right-main-echarts" ref="rightChartRef"></div>
<div class="right-main-tit">亿美元</div>
<div class="right-main-tit">亿美元</div>
</div>
</div>
<div class="right">
<div class="right-title">
<img src="./assets/icon03.png" alt="" />
<div class="tit">承研主体排名</div>
<div class="tit">项目资助强度分布</div>
<el-select v-model="value3" placeholder="Select" class="select">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="right-main1">
<div class="right-boxplot-echarts" ref="boxplotChartRef"></div>
<div class="right-main1-tit">单位：亿美元</div>
<div class="right-main1-tit">单位：亿美元</div>
</div>
</div>
</div>
......@@ -59,322 +69,231 @@
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import {
findFundField, findCountryProjectAreaList, getCountryFundingChange, getCountryFundProjectChange, getOrgFundsArea, getOrgFundStrength
} from "@/api/scientificFunding/overview";
import * as echarts from "echarts";
import NSF from "./assets/NSF.png";
import DARPA from "./assets/DARPA.png";
import NASA from "./assets/NASA.png";
import NIH from "./assets/NIH.png";
import NIST from "./assets/NIST.png";
import img01 from "./assets/斯坦福大学.png"
import img02 from "./assets/加州大学旧金山分校.png"
import img03 from "./assets/宾夕法尼亚大学.png"
import img04 from "./assets/约翰斯·霍普金斯大学.png"
import img05 from "./assets/康奈尔大学.png"
import img06 from "./assets/华盛顿大学.png"
import img07 from "./assets/麻省理工大学.png"
const value = ref("近十年");
const value1 = ref("2025年");
const value2 = ref("2025年");
const value3 = ref("2025年");
const universityData = [
{
name: "斯坦福大学",
img: img01,
value: 24,
color: "linear-gradient(270deg, #D15054 0%, rgba(209,80,84,0) 100%)"
},
{
name: "加州大学旧金山分校",
img: img02,
value: 18,
color: "linear-gradient(270deg, #F69C45 0%, rgba(246,156,69,0) 100%)"
},
{
name: "宾夕法尼亚大学",
img: img03,
value: 12,
color: "linear-gradient(270deg, #EBC818 0%, rgba(235,200,24,0) 100%)"
},
{
name: "约翰斯·霍普金斯大学",
img: img04,
value: 11,
color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
},
{
name: "康奈尔大学",
img: img05,
value: 10,
color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
},
{
name: "华盛顿大学（圣路易斯）",
img: img06,
value: 6,
color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
},
{
name: "麻省理工大学",
img: img07,
value: 4,
color: "linear-gradient(270deg, #236EF6 0%, rgba(35,110,246,0) 100%)"
}
];
const value = ref(10);
const options = [
{
value: "近十年",
value: 10,
label: "近十年"
},
{
value: "近五年",
value: 5,
label: "近五年"
}
];
const options1 = [
{
value: "2025年",
value: "2025",
label: "2025年"
},
{
value: "2024年",
value: "2024",
label: "2024年"
}
];
//获取当前时间x年前的日期
function getDateYearsAgo(years) {
// 获取当前日期
const currentDate = new Date();
// 计算指定年数之前的日期
const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
// 格式化日期为 "YYYY-MM-DD" 的形式
const year = pastDate.getFullYear();
const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
const day = String(pastDate.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}
const radio1 = ref(true)
const changeradio1 = () => {
radio1.value = !radio1.value
}
const value1 = ref(2025);
const leftChartRef = ref(null);
const rightChartRef = ref(null);
const leftSankeyRef = ref(null);
const boxplotChartRef = ref(null);
let leftChart;
let rightChart;
let leftSankey;
let boxplotChart;
const leftChartRef1 = ref(null);
// 资助体系v2.0:资助领域分布情况:资助经费
const handleGetFundField = async () => {
try {
let params = {
year: value1.value
}
const res = await findFundField(params);
console.log("资助领域分布情况", res);
if (res.code === 200 && res.data) {
initLeftDonut(res.data, true)
}
} catch (error) {
console.error("获取资助领域分布情况error", error);
}
};
const initBoxPlot = () => {
if (!boxplotChartRef.value) {
console.warn("boxplotChartRef is null");
return;
}
if (boxplotChart) boxplotChart.dispose();
boxplotChart = echarts.init(boxplotChartRef.value);
const categories = ["人工智能", "通信网络", "生物科技", "能源"];
const dataUS = [
[28, 40, 60, 72, 82],
[22, 32, 42, 50, 55],
[52, 65, 85, 96, 105],
[18, 30, 52, 62, 72]
];
const dataCN = [
[30, 35, 58, 80, 95],
[15, 20, 22, 30, 31],
[55, 58, 82, 105, 118],
[20, 25, 48, 72, 85]
];
const 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);
//资助体系v2.0:资助领域分布情况:资助项目
const handleFindCountryProjectAreaList = async () => {
try {
let params = {
year: value1.value
}
const res = await findCountryProjectAreaList(params);
console.log("资助领域分布情况", res);
if (res.code === 200 && res.data) {
initLeftDonut(res.data, false)
}
} catch (error) {
console.error("获取资助领域分布情况error", error);
}
};
// 资助领域分布情况
const initLeftDonut = (rawData, show) => {
const initLeftDonut = () => {
if (!leftChartRef.value) return;
if (leftChart) leftChart.dispose();
leftChart = echarts.init(leftChartRef.value);
const categories = ["集成电路", "人工智能", "通信网络", "能源", "先进制造", "生物科技", "航空航天", "新材料"];
const usData = [50, 46, 40, 32, 31, 31, 30, 24];
const cnData = [45, 42, 35, 28, 28, 33, 25, 20];
const colors = [
"#D15054", // 红色
"#91CCFF", // 浅蓝
"#FFAB4C", // 橙色
"#975FE4", // 紫色
"#5CDBD3", // 青色
"#005FCB", // 深蓝
"#B37FEB", // 浅紫
"#FFA39E" // 浅红
const color = [
'rgba(206, 79, 81, 1)',
'rgba(145, 202, 255, 1)',
'rgba(255, 169, 64, 1)',
'rgba(146, 84, 222, 1)',
'rgba(92, 219, 211, 1)',
'rgba(5, 95, 194, 1)'
];
const series = categories.map((name, index) => ({
name: name,
type: 'bar',
stack: 'total',
barWidth: 46,
itemStyle: {
color: colors[index],
borderWidth: 0
},
data: [cnData[index], usData[index]]
}));
// 计算总和用于右侧显示
const usTotal = usData.reduce((a, b) => a + b, 0);
const cnTotal = cnData.reduce((a, b) => a + b, 0);
// 添加一个辅助系列用于显示右侧的总数值
series.push({
name: 'Total',
type: 'bar',
stack: 'total',
itemStyle: {
color: 'transparent'
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
label: {
show: true,
position: 'right',
formatter: (params) => {
const totals = [cnTotal, usTotal];
return `{val|${totals[params.dataIndex]}}{unit| 亿美元}`;
},
rich: {
val: {
fontSize: 18,
color: '#3B414B',
fontWeight: 400,
padding: [0, 0, 0, 15]
},
unit: {
fontSize: 16,
color: '#3B414B'
}
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: false // 不展示X轴文字
}
},
data: [0.1, 0.1] // 给予极小数值以触发label渲染
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 = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: (params) => {
let res = `${params[0].name}<br/>`;
params.forEach(item => {
if (item.seriesName !== 'Total') {
res += `${item.marker} ${item.seriesName}: ${item.value} 亿美元<br/>`;
}
});
return res;
}
},
legend: {
data: categories,
data: ["美国", "中国"],
left: 20,
top: 0,
itemWidth: 12,
......@@ -385,62 +304,180 @@ const initLeftDonut = () => {
fontSize: 14
}
},
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow"
}
},
grid: {
left: '5%',
right: '20%',
top: '10%',
bottom: '10%',
containLabel: true
left: 50,
right: 20,
top: 60,
bottom: 40
},
xAxis: {
type: 'value',
show: true,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: {
show: true,
lineStyle: {
color: '#E6E6E6',
type: 'dashed'
}
}
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: 'category',
data: ['中国', '美国'],
axisLine: { show: false },
axisTick: { show: false },
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#F0F2F5",
type: "solid"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 20,
color: '#3B414B',
margin: 30
color: "#5F656C",
fontSize: 14
}
},
series: series
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)"
}
}
}
]
};
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 (rightChart) rightChart.dispose();
rightChart = echarts.init(rightChartRef.value);
const years = ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"];
const nsf = [75, 35, 45, 60, 72, 68, 95, 85, 82, 80, 80, 86];
const darpa = [55, 40, 48, 42, 60, 65, 70, 78, 60, 92, 85, 80];
const nasa = [60, 42, 28, 25, 30, 35, 40, 52, 38, 60, 36, 42];
const nih = [38, 25, 22, 28, 30, 34, 40, 60, 28, 35, 22, 34];
const nist = [40, 28, 22, 20, 24, 26, 30, 50, 25, 20, 18, 15];
const colorMap = {
NSF: "rgba(20, 89, 187, 1)",
DARPA: "rgba(206, 79, 81, 1)",
NASA: "rgba(255, 172, 77, 1)",
NIH: "rgba(19, 168, 168, 1)",
NIST: "rgba(114, 46, 209, 1)"
};
const colorMap = [
"rgba(20, 89, 187, 1)",
"rgba(206, 79, 81, 1)",
"rgba(255, 172, 77, 1)",
"rgba(19, 168, 168, 1)",
"rgba(114, 46, 209, 1)"
];
// 提取所有年份
const years = data.map(item => item.year);
// 提取所有组织名称
const 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 = {
color: [colorMap.NSF, colorMap.DARPA, colorMap.NASA, colorMap.NIH, colorMap.NIST],
color: colorMap,
grid: { left: 40, right: 80, top: 20, bottom: 40 },
tooltip: { trigger: "axis" },
legend: { show: false },
......@@ -473,313 +510,161 @@ const initRightLine = () => {
lineHeight: 22
}
},
series: [
{
name: "NSF",
type: "line",
data: nsf,
symbol: "none",
showSymbol: false,
endLabel: {
show: true,
formatter: () => `{NSF| } {t_NSF|NSF}`,
rich: {
NSF: { backgroundColor: { image: NSF }, width: 16, height: 16 },
t_NSF: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: colorMap.NSF
}
}
},
areaStyle: { color: "rgba(20,89,187,0.12)" }
},
{
name: "DARPA",
type: "line",
data: darpa,
symbol: "none",
showSymbol: false,
endLabel: {
show: true,
formatter: () => `{DARPA| } {t_DARPA|DARPA}`,
rich: {
DARPA: { backgroundColor: { image: DARPA }, width: 16, height: 16 },
t_DARPA: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: colorMap.DARPA
}
}
},
areaStyle: { color: "rgba(206,79,81,0.12)" }
},
{
name: "NASA",
type: "line",
data: nasa,
symbol: "none",
showSymbol: false,
endLabel: {
show: true,
formatter: () => `{NASA| } {t_NASA|NASA}`,
rich: {
NASA: { backgroundColor: { image: NASA }, width: 16, height: 16 },
t_NASA: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: colorMap.NASA
}
}
},
areaStyle: { color: "rgba(255,172,77,0.12)" }
},
{
name: "NIH",
type: "line",
data: nih,
symbol: "none",
showSymbol: false,
endLabel: {
show: true,
formatter: () => `{NIH| } {t_NIH|NIH}`,
rich: {
NIH: { backgroundColor: { image: NIH }, width: 16, height: 16 },
t_NIH: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: colorMap.NIH
}
}
},
areaStyle: { color: "rgba(19,168,168,0.12)" }
},
{
name: "NIST",
type: "line",
data: nist,
symbol: "none",
showSymbol: false,
endLabel: {
show: true,
formatter: () => `{NIST| } {t_NIST|NIST}`,
rich: {
NIST: { backgroundColor: { image: NIST }, width: 16, height: 16 },
t_NIST: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: colorMap.NIST
}
}
},
areaStyle: { color: "rgba(114,46,209,0.12)" }
}
]
series: series
};
rightChart.setOption(option);
rightChart.setOption(option);
};
const initLeftSankey = () => {
if (!leftSankeyRef.value) return;
if (leftSankey) leftSankey.dispose();
leftSankey = echarts.init(leftSankeyRef.value);
const leftNodes = [
{ name: "美国国防高级研究计划局DARPA" },
{ name: "美国国家科学基金会NSF" },
{ name: "美国国家航空航天局NASA" },
{ name: "美国国立卫生研究院NIH" },
{ name: "美国农业部USDA" },
{ name: "国家标准与技术研究院NIST" },
{ name: "美国能源部DOE" }
];
const rightNodes = [
{ name: "人工智能" },
{ name: "生物科技" },
{ name: "量子科技" },
{ name: "新材料" },
{ name: "集成电路" },
{ name: "通信网络" },
{ name: "能源" },
{ name: "先进制造" },
{ name: "航空航天" }
];
const nodes = [...leftNodes, ...rightNodes];
const links = [
{ source: "美国国防高级研究计划局DARPA", target: "人工智能", value: 20 },
{ source: "美国国防高级研究计划局DARPA", target: "量子科技", value: 10 },
{ source: "美国国防高级研究计划局DARPA", target: "通信网络", value: 8 },
{ source: "美国国家科学基金会NSF", target: "生物科技", value: 16 },
{ source: "美国国家科学基金会NSF", target: "集成电路", value: 12 },
{ source: "美国国家科学基金会NSF", target: "新材料", value: 9 },
{ source: "美国国家航空航天局NASA", target: "航空航天", value: 22 },
{ source: "美国国家航空航天局NASA", target: "通信网络", value: 6 },
{ source: "美国国立卫生研究院NIH", target: "生物科技", value: 24 },
{ source: "美国农业部USDA", target: "先进制造", value: 8 },
{ source: "国家标准与技术研究院NIST", target: "集成电路", value: 14 },
{ source: "国家标准与技术研究院NIST", target: "新材料", value: 10 },
{ source: "美国能源部DOE", target: "能源", value: 18 },
{ source: "美国能源部DOE", target: "通信网络", value: 6 }
];
const 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 leftSankeyRef = ref(null);
const value2 = ref(2025);
// 机构资助领域情况
const handleGetOrgFundsArea = async () => {
try {
let params = {
year: value2.value
}
const res = await getOrgFundsArea(params);
console.log("机构资助领域情况", res);
if (res.code === 200 && res.data) {
initLeftSankey(res.data)
}
} catch (error) {
console.error("获取机构资助领域情况error", error);
}
};
const handleResize = () => {
if (leftChart) leftChart.resize();
if (rightChart) rightChart.resize();
if (leftSankey) leftSankey.resize();
if (boxplotChart) boxplotChart.resize();
//机构资助领域情况
const initLeftSankey = (data) => {
if (!leftSankeyRef.value) return;
if (leftSankey) leftSankey.dispose();
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(() => {
nextTick(() => {
initLeftDonut();
initRightLine();
initLeftSankey();
initBoxPlot();
});
window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", handleResize);
if (leftChart) {
leftChart.dispose();
leftChart = null;
}
if (rightChart) {
rightChart.dispose();
rightChart = null;
}
if (leftSankey) {
leftSankey.dispose();
leftSankey = null;
}
if (boxplotChart) {
boxplotChart.dispose();
boxplotChart = null;
}
handleGetFundField()
handleFindCountryProjectAreaList()
handlegetCountryFundingChange()
handlegetCountryFundProjectChange()
handleGetOrgFundsArea()
handlegetOrgFundStrength()
});
// onBeforeUnmount(() => {
// window.removeEventListener("resize", handleResize);
// if (leftChart) {
// leftChart.dispose();
// leftChart = null;
// }
// if (leftChart1) {
// leftChart1.dispose();
// leftChart1 = null;
// }
// if (rightChart) {
// rightChart.dispose();
// rightChart = null;
// }
// if (leftSankey) {
// leftSankey.dispose();
// leftSankey = null;
// }
// if (boxplotChart) {
// boxplotChart.dispose();
// boxplotChart = null;
// }
// });
</script>
<style lang="scss" scoped>
......@@ -787,14 +672,17 @@ onBeforeUnmount(() => {
margin: 0;
padding: 0;
}
.datasub {
width: 1600px;
height: 936px;
display: flex;
justify-content: space-between;
.datasub-left {
width: 792px;
height: 936px;
.left {
width: 792px;
height: 460px;
......@@ -803,11 +691,13 @@ onBeforeUnmount(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -815,6 +705,7 @@ onBeforeUnmount(() => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
height: 48px;
......@@ -825,6 +716,7 @@ onBeforeUnmount(() => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.select {
width: 120px;
height: 28px;
......@@ -834,29 +726,37 @@ onBeforeUnmount(() => {
right: 31px;
}
}
.left-main {
width: 792px;
height: 412px;
padding: 52px 60px 78px 61px;
.left-main-echarts {
width: 100%;
/* 确保宽度占满容器 */
height: 400px;
/* 设置一个合适的高度 */
}
}
.left-main1 {
width: 792px;
height: 412px;
padding: 30px 30px 30px 30px;
.left-sankey-echarts {
width: 100%;
height: 100%;
}
}
.left-main1 {
width: 792px;
height: 412px;
padding: 30px 30px 30px 30px;
.left-sankey-echarts {
width: 100%;
height: 100%;
}
}
}
}
.datasub-right {
width: 792px;
height: 936px;
.right {
width: 792px;
height: 460px;
......@@ -864,11 +764,13 @@ onBeforeUnmount(() => {
margin-bottom: 16px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
position: relative;
img {
width: 19px;
height: 19px;
......@@ -876,6 +778,7 @@ onBeforeUnmount(() => {
top: 16px;
left: 21px;
}
.tit {
margin-left: 60px;
height: 48px;
......@@ -886,6 +789,7 @@ onBeforeUnmount(() => {
line-height: 26px;
color: rgb(5, 95, 194);
}
.select1 {
width: 155px;
height: 28px;
......@@ -894,6 +798,7 @@ onBeforeUnmount(() => {
top: 11px;
right: 163px;
}
.select {
width: 120px;
height: 28px;
......@@ -903,50 +808,112 @@ onBeforeUnmount(() => {
right: 31px;
}
}
.right-main {
width: 792px;
height: 421px;
padding: 40px 5px 30px 22px;
position: relative;
position: relative;
.right-main-echarts {
width: 100%;
height: 100%;
}
.right-main-tit {
position: absolute;
top: 18px;
right: 83px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(132, 136, 142);
}
.right-main-tit {
position: absolute;
top: 18px;
right: 83px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(132, 136, 142);
}
}
.right-main1 {
.right-main1 {
width: 792px;
height: 421px;
padding: 20px 20px;
position: relative;
box-sizing: border-box;
.right-boxplot-echarts {
width: 100%;
height: 100%;
min-height: 300px;
}
.right-main1-tit {
position: absolute;
top: 18px;
right: 31px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(132, 136, 142);
z-index: 10;
}
position: relative;
box-sizing: border-box;
.right-boxplot-echarts {
width: 100%;
height: 100%;
min-height: 300px;
}
.right-main1-tit {
position: absolute;
top: 18px;
right: 31px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
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>
src/views/scientificFunding/components/resLib/index.vue
浏览文件 @ 2397d65d
<template>
<div class="reslib-page">
<div class="nav">
<div
v-for="item in navList"
:key="item"
class="nav-item"
:class="{ active: item === activeItem }"
@click="activeItem = item"
>
{{ item }}
<div v-for="item in navList" :key="item.orgId" class="nav-item" :class="{ active: item.orgId === activeItem }"
@click="activeItem = item.orgId, handleGetProjectListNew()">
{{ item.orgName }}
</div>
</div>
<div class="select-box">
<div class="paixu-btn" @click="handleSwithSort()">
<div class="icon1">
<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
</div>
<div class="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>
<el-select v-model="value" placeholder="Select" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div class="main">
<div class="left">
<div class="left-section">
<div class="left-title-wrapper">
<div class="left-indicator"></div>
<div class="left-title">科技领域</div>
</div>
<div class="left-content">
<div v-for="(item, i) in techFields" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }}
</div>
<div class="left-ti1"></div>
<div class="left-ti2"></div>
<!-- <div class="left-title">项目经费</div>
<div class="left-content">
<div v-for="(item, i) in dataList" :key="item.id" class="left-item">
<input type="checkbox" checked />{{ item.name }}
</div>
</div> -->
<div class="left-title cl1">涉及领域</div>
<div class="left-content">
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="all-checkbox"
@change="handleCheckAllChange">
全部领域
</el-checkbox>
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList" :label="research.id"
@change="handleCheckedAreaChange()" class="filter-checkbox">
{{ research.name }}
</el-checkbox>
<!-- <div v-for="(item, i) in areaList" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }}
</div> -->
</div>
<div class="left-section">
<div class="left-title-wrapper">
<div class="left-indicator"></div>
<div class="left-title">发布时间</div>
</div>
<div class="left-content">
<div v-for="(item, i) in releaseTimes" :key="item.id" class="left-item">
<input type="checkbox" :checked="i === 0" />{{ item.name }}
</div>
</div>
<div class="left-title cl1">发布时间</div>
<div class="left-content">
<el-checkbox v-model="checkAllTime" class="all-checkbox" :indeterminate="isIndeterminateTime"
@change="handleCheckAllChangeTime">
全部时间
</el-checkbox>
<el-checkbox-group v-model="selectedPubTimeList">
<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
@change="handleCheckedAreaChangeTime()">
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="right">
......@@ -46,40 +64,31 @@
</div>
<div class="right-main">
<div v-for="(item, i) in mainList" :key="item.id" class="right-item">
<img :src="item.img" alt="" />
<div class="right-item-title">{{ item.title }}</div>
<div class="right-item-content">{{ item.content }}</div>
<img :src="item.logoUrl" alt="" />
<div class="right-item-title">{{ item.projectName }}</div>
<div class="right-item-content">{{ item.abstractContent }}</div>
<div class="right-item-pie">
<div
v-for="(pie, i) in item.pie"
:key="i"
class="right-item-pie-item"
:class="{
cl1: pie === '新材料',
cl2: pie === '人工智能',
cl3: pie === '量子科技',
cl4: pie === '能源',
cl5: pie === '生物科技',
cl6: pie === '航空航天'
}"
>
<div v-for="(pie, i) in item.areaList" :key="i" class="right-item-pie-item" :class="{
cl1: pie === '新材料',
cl2: pie === '人工智能',
cl3: pie === '量子科技',
cl4: pie === '能源',
cl5: pie === '生物科技',
cl6: pie === '航空航天'
}">
{{ pie }}
</div>
</div>
<div class="right-item-time">{{ item.time }}</div>
<div class="right-item-money" :style="{ color: item.color }">{{ item.money }}</div>
<div class="right-item-time">{{ item.publicationDate }}</div>
<div class="right-item-money"
:style="{ color: item.amount <= 1000 ? 'rgba(232, 189, 11, 1)' : item.amount <= 10000 ? 'rgba(255, 149, 77, 1)' : 'rgba(206, 79, 81, 1)' }">
{{ '$' + item.amount + '万' }}</div>
</div>
<div class="page">
<div class="count">共1205项调查</div>
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
<div class="count">共{{ total }}项</div>
<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
layout="prev, pager, next" background @current-change="handlePageChange" />
</div>
</div>
</div>
......@@ -88,168 +97,204 @@
</template>
<script setup>
import { ref } from "vue";
import NSF from "./assets/NSF.png";
import DARPA from "./assets/DARPA.png";
import NASA from "./assets/NASA.png";
import NIH from "./assets/NIH.png";
import DOE from "./assets/DOE.png";
const navList = ref(["全部资助项目", "NSF", "DARPA", "NASA", "NIH", "DOE", "NIST"]);
const activeItem = ref("全部资助项目");
const value = ref("发布时间");
const options = [
{
value: "发布时间",
label: "发布时间"
},
{
value: "发布日期",
label: "发布日期"
}
];
const techFields = ref([
{ id: 1, name: "全部领域" },
{ id: 2, name: "人工智能" },
{ id: 3, name: "集成电路" },
{ id: 4, name: "量子科技" },
{ id: 5, name: "新一代信息技术" },
{ id: 6, name: "生物技术" },
{ id: 7, name: "新能源" },
{ id: 8, name: "航空航天" },
{ id: 9, name: "先进制造" },
{ id: 10, name: "海洋" },
{ id: 11, name: "新材料" },
{ id: 12, name: "深海" },
{ id: 13, name: "极地" },
{ id: 14, name: "核" },
{ id: 15, name: "其他" }
]);
const releaseTimes = ref([
{ id: 1, name: "全部时间" },
{ id: 2, name: "2025年" },
{ id: 3, name: "2024年" },
{ id: 4, name: "2023年" },
{ id: 5, name: "2022年" },
{ id: 6, name: "2021年" },
{ id: 7, name: "更早" }
]);
const mainList = ref([
import { ref, onMounted } from "vue";
import {
getProjectListNew, geFundSourceOrg, getAreaType
} from "@/api/scientificFunding/overview";
const navList = ref([]);
const activeItem = ref("");
const areaList = ref([
{
id: 1,
title: "NSF：量子化学合作研究项目",
content: "美国国家科学基金会和英国研究与创新（UKRI）正在投资八个联合研究项目，这些项目有望为量子计算带来突破......",
pie: ["新材料", "量子科技"],
time: "2025年11月26日",
money: "$1,000万",
color:"rgb(255, 149, 77)",
img: NSF
name: "全部领域"
},
{
id: 2,
title: "NIH：All of Us研究计划数据集应用",
content:
"美国国立卫生研究院（NIH）宣布拨款970万美元，支持利用“All of Us”研究计划的数据集开展生物医学研究，并开发数据分析的新模型...",
pie: ["生物科技"],
time: "2025年11月26日",
money: "$970万",
color:"rgb(232, 189, 11)",
img: NIH
name: "人工智能"
},
{
id: 3,
title: "NSF：EPSCoR管辖区投资 计划",
content:
"美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州的机构投资约 3000 万美元，以建立 NSF EPSCoR 科学卓越研究中心......",
pie: ["人工智能", "新材料", "量子科技"],
time: "2025年11月26日",
money: "$3,000万",
color:"rgb(255, 149, 77)",
img: NSF
name: "集成电路"
},
{
id: 4,
title: "NASA：创新型早期空间技术研究资助项目",
content:
"NASA宣布对11所大学的研究提案进行资助（表1），这些项目旨在通过对创新型早期技术的研究，解决美国空间计划中具有较高优先度的...",
pie: ["航空航天"],
time: "2025年11月26日",
money: "$2.8亿",
color:"rgb(206, 79, 81)",
img: NASA
name: "通信网络"
},
{
id: 5,
title: "DARPA：可调控生物功能微系统技术开发",
content:
"美国国防高级研究计划局（DARPA）宣布通过“微系统诱导催化”（MICA）项目资助巴特尔纪念研究所1030万美元[1]，探索使用微系统...",
pie: ["生物科技"],
time: "2025年11月26日",
money: "$1,030万",
color:"rgb(255, 149, 77)",
img: DARPA
name: "量子科技"
},
{
id: 6,
title: "NSF：国家人工智能研究资源运营中心",
content: "美国国家科学基金会今日宣布一项新招标，旨在建立国家人工智能研究资源运营中心（NAIRR-OC）。这标志着一个关键......",
pie: ["人工智能"],
time: "2025年11月26日",
money: "$1.05亿",
color:"rgb(206, 79, 81)",
img: NSF
name: "能源"
},
{
id: 7,
title: "NASA：“人体研究计划”和“空间生物学计划”的16个研究提案",
content:
"NASA将与俄罗斯联邦航天局（Roscosmos）合作开展国际空间站一年期驻留任务，以评估长期空间飞行对人的影响[3]。 入选“人体研究...",
pie: ["生物科技", "航空航天"],
time: "2025年11月26日",
money: "$1.9亿",
color:"rgb(206, 79, 81)",
img: NASA
name: "生物科技"
},
{
id: 8,
title: "NSF：NVIDIA 合作 Ai2 模型创新",
content: "美国国家科学基金会宣布与英伟达合作，开发一套人工智能模型，这将彻底改变美国科学家利用人工智能的能力......",
pie: ["人工智能"],
time: "2025年11月26日",
money: "$240万",
color:"rgb(232, 189, 11)",
img: NSF
name: "航空航天"
},
{
id: 9,
title: "NASA：新一轮机器人研发",
content:
"美国国家科学基金会（NSF）宣布将联合国家航空航天局（NASA）、国立卫生研究院（NIH）、农业部（USDA）、国防部（DoD）支持...",
pie: ["人工智能"],
time: "2025年11月26日",
money: "$850万",
color:"rgb(232, 189, 11)",
img: NASA
name: "海洋"
}
]);
// 来源机构列表
const handleGeFundSourceOrg = async () => {
try {
const res = await geFundSourceOrg();
console.log("来源机构列表", res);
if (res.code === 200 && res.data) {
navList.value = res.data
activeItem.value = res.data[0].orgId
}
} catch (error) {
console.error("获取来源机构列表error", error);
}
};
const checkAll = ref(false);
const isIndeterminate = ref(true);
const selectedAreaList = ref([]);
const handleCheckAllChange = val => {
// console.log(val, "handleCheckAllChange");
if (val) {
isIndeterminate.value = false;
selectedAreaList.value.length !== areaList.value.length
? (selectedAreaList.value = areaList.value.map(obj => obj.id))
: "";
} else {
selectedAreaList.value = [];
}
// selectedAreaList.value = val ? areaList : []
// isIndeterminate.value = false
handleGetProjectListNew();
};
const handleCheckedAreaChange = () => {
// console.log(selectedAreaList.value, "handleCheckedAreaChange");
console.log(selectedAreaList.value, "当前选中的领域");
selectedAreaList.value.length !== areaList.value.length
? (isIndeterminate.value = true)
: ((checkAll.value = true), (isIndeterminate.value = false));
handleGetProjectListNew();
};
const pubTimeList = ref([
{
id: 2025,
name: "2025"
},
{
id: 10,
title: "DOE：微电网及储能技术研发",
content: "美国能源部电力办公室宣布两项资助信息，共计投入2210万美元，推进微电网和电网级储能技术创新发展。",
pie: ["能源"],
time: "2025年11月26日",
money: "$2,210万",
color:"rgb(255, 149, 77)",
img: DOE
id: 2024,
name: "2024"
},
{
id: 2023,
name: "2023"
},
{
id: 2022,
name: "2022"
},
{
id: 2021,
name: "2021"
}
// {
// id: "更早时间",
// name: "更早时间"
// }
]);
const selectedPubTimeList = ref([""]);
const checkAllTime = ref(false);
const isIndeterminateTime = ref(true);
const sort = ref(false);
const handleSwithSort = () => {
sort.value = !sort.value;
handleGetProjectListNew();
};
const 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 pageSize = ref(121);
const currentPage = ref(5);
const mainList = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const handlePageChange = p => {
currentPage.value = p;
handleGetProjectListNew()
};
// 资助体系v2.0:资助项目列表分页
const handleGetProjectListNew = async () => {
try {
let params = {
arealist: selectedAreaList.value,
currentPage: currentPage.value,
pageSize: 10,
yearlist: selectedPubTimeList.value.map(item => item.toString().trim()).filter(item => item !== ""),
funSort: sort.value ? 'desc' : 'asc',
orgId: activeItem.value
}
const res = await getProjectListNew(params);
console.log("资助项目列表分页", res);
if (res.code === 200 && res.data) {
mainList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取资助项目列表分页error", error);
}
};
onMounted(async () => {
await handleGeFundSourceOrg()
await handleGetAreaType()
handleGetProjectListNew()
});
</script>
<style scoped lang="scss">
......@@ -257,18 +302,84 @@ const handlePageChange = p => {
margin: 0;
padding: 0;
}
.reslib-page {
width: 1600px;
height: 1565px;
position: relative;
.select-box {
width: 128px;
position: absolute;
top: 7px;
right: 0px;
.paixu-btn {
display: flex;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
}
}
.nav {
width: 721px;
width: calc(100% - 100px);
height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 34px;
.nav-item {
width: 100%;
text-align: center;
cursor: pointer;
padding: 8px 20px;
font-size: 20px;
......@@ -277,6 +388,7 @@ const handlePageChange = p => {
line-height: 26px;
color: rgb(59, 65, 75);
}
.active {
background-color: rgb(5, 95, 194);
border-radius: 21px;
......@@ -284,105 +396,138 @@ const handlePageChange = p => {
font-weight: 700;
}
}
.select {
width: 128px;
position: absolute;
top: 7px;
right: 0px;
}
.main {
width: 1600px;
height: 1489px;
display: flex;
.left {
width: 300px;
min-height: 565px;
margin-right: 16px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
padding: 20px 0;
.left-section {
margin-bottom: 30px;
.left-title-wrapper {
display: flex;
align-items: center;
margin-bottom: 20px;
.left-indicator {
width: 8px;
height: 16px;
position: relative;
.left-ti1 {
width: 8px;
height: 16px;
background-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 17px;
left: 0px;
}
.left-ti2 {
width: 8px;
height: 16px;
background-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 207px;
left: 0px;
}
.left-title {
margin-left: 25px;
color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
margin-top: 13px;
}
.left-content {
width: 253px;
// height: 132px;
margin-left: 25px;
margin-top: 13px;
display: flex;
flex-wrap: wrap;
/* 允许内容换行 */
justify-content: space-between;
/* 两端对齐 */
.left-item {
white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
width: calc(50% - 8px);
/* 每个选项占一半宽度，减去间距 */
height: 30px;
margin-bottom: 4px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
margin-right: 8px;
border: 1px solid rgb(200, 204, 210);
border-radius: 4px;
background-color: #fff;
vertical-align: middle;
}
input[type="checkbox"]:checked {
background-color: rgb(5, 95, 194);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-right: 17px;
}
.left-title {
color: rgb(5, 95, 194);
font-size: 18px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
}
}
.left-content {
display: flex;
flex-wrap: wrap;
padding-left: 25px;
.left-item {
width: 50%;
height: 30px;
margin-bottom: 12px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
display: flex;
align-items: center;
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin-right: 12px;
border: 1px solid rgb(200, 204, 210);
border-radius: 4px;
background-color: #fff;
cursor: pointer;
position: relative;
}
input[type="checkbox"]:checked {
background-color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 4px;
height: 8px;
position: absolute;
left: 50%;
top: 45%;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: translate(-50%, -50%) rotate(45deg);
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 4px;
height: 8px;
margin: 1px auto 0;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
}
}
.cl1 {
margin-top: 21px;
}
}
.right {
width: 1284px;
height: 1489px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.right-title {
width: 1284px;
height: 48px;
border-bottom: 1px solid rgb(235, 238, 242);
position: relative;
img {
width: 22px;
height: 19px;
......@@ -390,6 +535,7 @@ const handlePageChange = p => {
top: 15px;
left: 20px;
}
div {
width: 120px;
height: 48px;
......@@ -402,17 +548,20 @@ const handlePageChange = p => {
padding: 11px 0;
}
}
.right-main {
width: 1284px;
height: 1441px;
padding: 19px 34px 20px 29px;
position: relative;
.right-item {
width: 1221px;
height: 124px;
border-bottom: 1px solid rgb(234, 236, 238);
margin-bottom: 8px;
position: relative;
img {
width: 32px;
height: 32px;
......@@ -420,6 +569,7 @@ const handlePageChange = p => {
top: 9px;
left: 7px;
}
.right-item-title {
position: absolute;
top: 10px;
......@@ -430,7 +580,16 @@ const handlePageChange = p => {
line-height: 26px;
color: rgb(59, 65, 75);
}
.right-item-content {
white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
width: 90%;
/* 设置一个固定的宽度或百分比 */
position: absolute;
top: 44px;
left: 56px;
......@@ -440,11 +599,13 @@ const handlePageChange = p => {
line-height: 24px;
color: rgb(95, 101, 108);
}
.right-item-pie {
position: absolute;
top: 76px;
left: 56px;
display: flex;
.right-item-pie-item {
padding: 2px 8px;
border-radius: 4px;
......@@ -455,37 +616,44 @@ const handlePageChange = p => {
font-family: "Microsoft YaHei";
line-height: 20px;
}
.cl1 {
background-color: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
color: rgba(19, 168, 168, 1);
}
.cl2 {
background-color: rgba(255, 241, 240, 1);
border-color: rgba(255, 163, 158, 1);
color: rgba(245, 34, 45, 1);
}
.cl3 {
background-color: rgba(249, 240, 255, 1);
border-color: rgba(211, 173, 247, 1);
color: rgba(114, 46, 209, 1);
}
.cl4 {
background-color: rgba(230, 255, 251, 1);
border-color: rgba(135, 232, 222, 1);
color: rgba(19, 168, 168, 1);
}
.cl5 {
background-color: rgba(230, 244, 255, 1);
border-color: rgba(145, 202, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl6 {
background-color: rgba(240, 245, 255, 1);
border-color: rgba(173, 198, 255, 1);
color: rgba(47, 84, 235, 1);
}
}
.right-item-time {
position: absolute;
top: 13px;
......@@ -496,6 +664,7 @@ const handlePageChange = p => {
line-height: 24px;
color: rgb(95, 101, 108);
}
.right-item-money {
position: absolute;
top: 76px;
......@@ -506,6 +675,7 @@ const handlePageChange = p => {
line-height: 24px;
}
}
.page {
width: 1221px;
height: 40px;
......@@ -516,6 +686,7 @@ const handlePageChange = p => {
bottom: 20px;
left: 20px;
padding-left: 11px;
.count {
font-size: 16px;
font-weight: 400;
......@@ -523,10 +694,12 @@ const handlePageChange = p => {
line-height: 24px;
color: rgb(59, 65, 75);
}
:deep(.el-pagination) {
display: flex;
align-items: center;
}
:deep(.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
......@@ -540,12 +713,14 @@ const handlePageChange = p => {
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
// box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
}
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
......@@ -553,6 +728,7 @@ const handlePageChange = p => {
min-width: 16px;
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
min-width: 32px;
......@@ -565,6 +741,7 @@ const handlePageChange = p => {
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
......
src/views/scientificFunding/index.vue
浏览文件 @ 2397d65d
<!--科研资助体系-->
<template>
<div class="coop-page">
<!-- 面包屑 -->
......@@ -67,12 +68,12 @@
</div>
<!-- 6个数据 -->
<div class="data">
<div v-for="item in dataList" :key="item.id" class="data-item">
<img :src="item.image" alt="" />
<div class="data-item-title">{{ item.title }}</div>
<div class="data-item-name">{{ item.name }}</div>
<div class="data-item-abb">{{ item.abb }}</div>
<div class="data-item-num" :style="{ color: item.color }">{{ item.num }}</div>
<div v-for="(item, index) in dataList" :key="item.id" class="data-item">
<img :src="item.logoUrl" alt="" />
<div class="data-item-title">{{ item.orgName }}</div>
<div class="data-item-name">{{ item.orgNameEn }}</div>
<div class="data-item-abb">{{ item.orgAbbEn }}</div>
<div class="data-item-num" :style="{ color: color[index] }">{{ item.num + '项' }}</div>
</div>
</div>
<!-- 最新动态 -->
......@@ -108,7 +109,7 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue";
......@@ -119,6 +120,11 @@ import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue";
import scrollToTop from "@/utils/scrollToTop";
import {
getFundSourceOrg
} from "@/api/scientificFunding/overview";
import { useContainerScroll } from "@/hooks/useScrollShow";
import img01 from "./assets/images/img01.png";
......@@ -195,6 +201,30 @@ const dataList = ref([
color: "rgb(5, 95, 194)"
}
]);
const color = ref([
"rgb(206, 79, 81)",
"rgba(114, 46, 209, 1)",
"rgba(19, 168, 168, 1)",
"rgba(64, 150, 255, 1)",
"rgb(33, 129, 57)",
"rgb(5, 95, 194)"
])
//// 来源机构列表
const handleGetFundSourceOrg = async () => {
try {
const res = await getFundSourceOrg();
console.log("来源机构列表", res);
if (res.code === 200 && res.data) {
dataList.value = res.data
}
} catch (error) {
console.error("获取来源机构列表error", error);
}
};
onMounted(async () => {
handleGetFundSourceOrg()
});
</script>
<style scoped lang="scss">
......@@ -202,9 +232,11 @@ const dataList = ref([
margin: 0;
padding: 0;
}
.coop-page {
width: 100%;
height: 100%;
.breadcrumb {
width: 100%;
height: 64px;
......@@ -214,6 +246,7 @@ const dataList = ref([
justify-content: space-between;
padding: 0 160px;
}
.main-content {
overflow: auto;
width: 100%;
......@@ -221,10 +254,12 @@ const dataList = ref([
background: url("./assets/images/background.png");
background-size: 100% 100%;
padding: 44px 160px 30px 160px;
.search {
width: 960px;
height: 168px;
margin: 0 auto 122px auto;
.search-main {
display: flex;
padding-right: 3px;
......@@ -236,9 +271,11 @@ const dataList = ref([
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
......@@ -252,6 +289,7 @@ const dataList = ref([
line-height: 24px;
color: rgb(132, 136, 142);
}
.search-btn {
cursor: pointer;
display: flex;
......@@ -267,6 +305,7 @@ const dataList = ref([
font-family: "Microsoft YaHei";
line-height: 24px;
color: #fff;
img {
width: 22px;
height: 22px;
......@@ -274,6 +313,7 @@ const dataList = ref([
}
}
}
.search-center {
width: 680px;
height: 57px;
......@@ -281,10 +321,12 @@ const dataList = ref([
display: flex;
align-items: center;
justify-content: space-between;
.search-item {
box-sizing: border-box;
width: 120px;
height: 57px;
.search-item-num {
width: 120px;
height: 22px;
......@@ -296,6 +338,7 @@ const dataList = ref([
text-align: center;
cursor: pointer;
}
.search-item-name {
width: 128px;
height: 24px;
......@@ -309,6 +352,7 @@ const dataList = ref([
}
}
}
.search-bottom {
width: 688px;
height: 48px;
......@@ -316,6 +360,7 @@ const dataList = ref([
margin-top: 36px;
display: flex;
justify-content: space-between;
// gap: 16px;
.btn {
display: flex;
......@@ -329,9 +374,11 @@ const dataList = ref([
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -342,12 +389,14 @@ const dataList = ref([
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -356,6 +405,7 @@ const dataList = ref([
}
}
}
.data {
width: 1600px;
height: 316px;
......@@ -364,6 +414,7 @@ const dataList = ref([
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
.data-item {
width: 520px;
height: 150px;
......@@ -374,10 +425,12 @@ const dataList = ref([
position: relative;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
img {
width: 88px;
height: 88px;
......@@ -385,7 +438,15 @@ const dataList = ref([
top: 30px;
left: 23px;
}
.data-item-title {
width: 260px;
white-space: nowrap;
/* 保持在一行内 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
position: absolute;
top: 19px;
left: 132px;
......@@ -395,6 +456,7 @@ const dataList = ref([
line-height: 42px;
color: rgb(59, 65, 75);
}
.data-item-name {
position: absolute;
top: 71px;
......@@ -405,6 +467,7 @@ const dataList = ref([
line-height: 24px;
color: rgb(95, 101, 108);
}
.data-item-abb {
position: absolute;
top: 101px;
......@@ -415,6 +478,7 @@ const dataList = ref([
line-height: 24px;
color: rgb(95, 101, 108);
}
.data-item-num {
position: absolute;
top: 19px;
......@@ -427,40 +491,48 @@ const dataList = ref([
}
}
}
.newdata {
width: 1600px;
height: 538px;
margin: 36px auto 64px auto;
.newdata-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.ask {
width: 1600px;
height: 528px;
margin: 0 auto 64px auto;
.ask-main {
width: 1600px;
height: 450px;
margin-top: 36px;
}
}
.datasub {
width: 1600px;
height: 1014px;
margin: 0 auto 88px auto;
.datasub-main {
width: 1600px;
height: 936px;
margin-top: 36px;
}
}
.reslib {
width: 1600px;
height: 1633px;
margin: 0 auto 0px auto;
.reslib-main {
width: 1600px;
height: 1565px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论