创新主体首页、详情页（学校详情、科研实力接口对接）

src/api/innovationSubject/overview.js

 // 智库概览信息
 import request from "@/api/request.js";
 
+
+// 获取新闻资讯
+/**
+ * @param {moduleId} 
+ */
+export function getNews(moduleId = "0105") {
+  return request({
+    method: 'GET',
+    url: `/api/commonFeature/news/${moduleId}`,
+  })
+}
+
+
+/**
+ * 社交媒体
+ */
+export function getSocialMediaInfo(moduleId = "0105") {
+  return request({
+    method: "GET",
+    url: `/api/commonFeature/remarks/${moduleId}`
+  })
+}
+
+// 获取法案风险信号
+/**
+ * @param {moduleId} 
+ */
+export function getBillRiskSignal(moduleId = "0105") {
+  return request({
+    method: 'GET',
+    url: `/api/commonFeature/riskSignal/${moduleId}`,
+  })
+}
+
+
 //创新主体主页:统计不同创新主体类型对应的主体数量
 export function getCountSubjectType() {
   return request({
@@ -59,4 +94,86 @@ export function getResearchFieldSubjectType(params) {
     params
   })
 }
+/***********详情页 */
+//创新主体详情:基本信息
+export function getInfo(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/info/${params.id}`,
+    params
+  })
+}
+
+//最新动态
+export function getDynamics(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/dynamics/${params.orgId}`,
+    params
+  })
+}
+
+//创新主体详情:历史事件轴
+export function getEventList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/eventList/${params.id}`,
+    params
+  })
+}
+
+//创新主体详情:重点人物
+export function getPersonList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/personList/${params.id}`,
+    params
+  })
+}
+
+//创新主体科研实力:专利数量统计
+export function getPatentList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/patentList/${params.id}`,
+    params
+  })
+}
+
+
+// 创新主体科研实力:论文数量统计
+export function getPaperList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/paperList/${params.id}`,
+    params
+  })
+}
+
+//创新主体科研实力:经费增长情况
+export function getFundGrowth(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/fundGrowth/${params.id}`,
+    params
+  })
+}
+
+//创新主体科研实力:经费来源
+export function getFundFromList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/fundFromList/${params.id}`,
+    params
+  })
+}
+
+//创新主体科研实力:经费分配
+export function getFundToList(params) {
+  return request({
+    method: 'GET',
+    url: `/api/innovateSubject/fundToList/${params.id}`,
+    params
+  })
+}
 

src/router/modules/InnovationSubject.js

@@ -3,7 +3,7 @@ import InnovationSubject from "@/views/innovationSubject/index.vue";
 import InnovationInstitution from "@/views/innovationSubject/innovativeInstitutions/index.vue";
 
 const innovationSubjectRoutes = [
-   //创新主体
+  //创新主体
   {
     path: "/innovationSubject",
     name: "InnovationSubject",
@@ -13,7 +13,7 @@ const innovationSubjectRoutes = [
     }
   },
   {
-    path: "/InnovativeInstitutions",
+    path: "/InnovativeInstitutions/:id",
     name: "InnovativeInstitutions",
     component: InnovationInstitution,
     meta: {

src/views/bill/background/index.vue

@@ -39,13 +39,8 @@
 							{{ `共有${total}条${box1BtnActive === 1 ? "涉华" : "全部"}背景` }}
 						</div>
 						<div class="page-box">
-							<el-pagination
-								background
-								layout="prev, pager, next"
-								:total="total"
-								v-model:current-page="currentPage"
-								@current-change="handleGetBillBackground"
-							/>
+							<el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"
+								@current-change="handleGetBillBackground" />
 						</div>
 					</div>
 				</div>
@@ -119,21 +114,13 @@
           </div> -->
 					<div class="right-box1-main">
 						<div class="right-box1-main-top">
-							<el-icon
-								style="margin-top: 20px; cursor: pointer"
-								size="20"
-								:color="currentIndex > 0 ? '#5f656c' : '#ccc'"
-								@click="handlePrev"
-								><CaretLeft
-							/></el-icon>
+							<el-icon style="margin-top: 20px; cursor: pointer" size="20"
+								:color="currentIndex > 0 ? '#5f656c' : '#ccc'" @click="handlePrev">
+								<CaretLeft />
+							</el-icon>
 							<div class="user-list-container">
 								<div class="user-list-wrapper" :style="{ transform: `translateX(-${currentIndex * 110}px)` }">
-									<div
-										class="user-box"
-										v-for="(item, index) in personList"
-										:key="index"
-										@click="handleClickUser(item)"
-									>
+									<div class="user-box" v-for="(item, index) in personList" :key="index" @click="handleClickUser(item)">
 										<div class="img-box">
 											<img :src="item.image" alt="" />
 											<div class="icon1">
@@ -149,21 +136,14 @@
 									</div>
 								</div>
 							</div>
-							<el-icon
-								style="margin-top: 20px; cursor: pointer"
-								size="20"
-								:color="currentIndex < personList.length - 4 ? '#5f656c' : '#ccc'"
-								@click="handleNext"
-								><CaretRight
-							/></el-icon>
+							<el-icon style="margin-top: 20px; cursor: pointer" size="20"
+								:color="currentIndex < personList.length - 4 ? '#5f656c' : '#ccc'" @click="handleNext">
+								<CaretRight />
+							</el-icon>
 						</div>
 						<div class="right-box1-main-bottom">
-							<WordCloudMap
-								:data="wordCloudData"
-								:selectedName="selectedIndustryName"
-								shape="circle"
-								@wordClick="handleWordClick"
-							/>
+							<WordCloudMap :data="wordCloudData" :selectedName="selectedIndustryName" shape="circle"
+								@wordClick="handleWordClick" />
 						</div>
 					</div>
 				</div>
@@ -320,7 +300,7 @@ const handleGetBillBackground = async () => {
 		console.log("立法背景", res);
 		backgroundList.value = res.data.content;
 		total.value = res.data.totalElements; // 假设API返回totalElements
-	} catch (error) {}
+	} catch (error) { }
 };
 
 // 获取相关事件
@@ -345,7 +325,7 @@ const handleGetRelatedEvent = async () => {
 				item.image = event5;
 			}
 		});
-	} catch (error) {}
+	} catch (error) { }
 };
 
 // 议员相关性分析
@@ -386,7 +366,7 @@ const handleGetBillPersonAnalyze = async isOppose => {
 			wordCloudData.value = [];
 			aboutUserList.value = [];
 		}
-	} catch (error) {}
+	} catch (error) { }
 };
 
 
@@ -408,7 +388,7 @@ const handleGetBillPersonAnalyzeDy = async () => {
 			icon: userIcon,
 			icon1: m.party === "共和党" ? userIcon2 : userIcon1
 		}));
-	} catch (error) {}
+	} catch (error) { }
 };
 
 onMounted(() => {
@@ -424,10 +404,12 @@ onMounted(() => {
 	height: 100%;
 	box-sizing: border-box;
 	display: flex;
+
 	.box-header {
 		height: 56px;
 		display: flex;
 		position: relative;
+
 		.header-left {
 			margin-top: 18px;
 			width: 8px;
@@ -435,6 +417,7 @@ onMounted(() => {
 			border-radius: 0 4px 4px 0;
 			background: var(--color-main-active);
 		}
+
 		.title {
 			margin-left: 14px;
 			margin-top: 14px;
@@ -445,15 +428,18 @@ onMounted(() => {
 			font-size: 20px;
 			font-weight: 700;
 		}
+
 		.header-btn-box {
 			position: absolute;
 			top: 14px;
 			right: 84px;
 			display: flex;
+
 			.btn {
 				margin-left: 8px;
 			}
 		}
+
 		.header-right {
 			position: absolute;
 			top: 14px;
@@ -461,9 +447,11 @@ onMounted(() => {
 			display: flex;
 			justify-content: flex-end;
 			gap: 4px;
+
 			.icon {
 				width: 28px;
 				height: 28px;
+
 				img {
 					width: 100%;
 					height: 100%;
@@ -471,14 +459,17 @@ onMounted(() => {
 			}
 		}
 	}
+
 	.background-wrap-left {
 		width: 1150px;
 		margin-top: 16px;
+
 		.background-wrap-left-box1 {
 			width: 1150px;
 			height: 415px;
 			background: #fff;
 			border-radius: 4px;
+
 			.box1-main {
 				.box1-main-center {
 					margin: 0 22px;
@@ -488,6 +479,7 @@ onMounted(() => {
 					flex-wrap: wrap;
 					justify-content: space-between;
 					align-content: flex-start;
+
 					.box1-main-item {
 						width: 544px;
 						height: 48px;
@@ -497,6 +489,7 @@ onMounted(() => {
 						background: rgba(255, 255, 255, 1);
 						display: flex;
 						margin-top: 8px;
+
 						.id {
 							width: 24px;
 							height: 24px;
@@ -509,6 +502,7 @@ onMounted(() => {
 							font-weight: 400;
 							margin: 12px 16px 12px 18px;
 						}
+
 						.title {
 							width: 440px;
 							height: 48px;
@@ -520,6 +514,7 @@ onMounted(() => {
 							text-align: left;
 							overflow: hidden;
 						}
+
 						.share {
 							margin-left: 13px;
 							margin-top: 16px;
@@ -527,6 +522,7 @@ onMounted(() => {
 							height: 16px;
 							padding: 2px;
 							cursor: pointer;
+
 							img {
 								width: 100%;
 								height: 100%;
@@ -534,11 +530,13 @@ onMounted(() => {
 						}
 					}
 				}
+
 				.box1-main-footer {
 					margin: 30px 22px 0 22px;
 					height: 22px;
 					display: flex;
 					justify-content: space-between;
+
 					.info {
 						height: 22px;
 						line-height: 22px;
@@ -551,18 +549,21 @@ onMounted(() => {
 				}
 			}
 		}
+
 		.background-wrap-left-box2 {
 			margin-top: 15px;
 			width: 1150px;
 			height: 415px;
 			background: #fff;
 			border-radius: 4px;
+
 			.box2-main {
 				// margin-top: 9px;
 				width: 1110px;
 				margin-left: 23px;
 				height: 349px;
 				overflow-y: auto;
+
 				.box2-main-item {
 					width: 1103px;
 					height: 60px;
@@ -570,21 +571,26 @@ onMounted(() => {
 					box-sizing: border-box;
 					padding: 6px 8px;
 					display: flex;
+
 					&:hover {
 						background: rgba(225, 225, 225, 0.3);
 					}
+
 					.left {
 						width: 64px;
 						height: 48px;
 						border-radius: 2px;
+
 						img {
 							width: 64px;
 							height: 48px;
 						}
 					}
+
 					.center {
 						margin-left: 14px;
 						width: 900px;
+
 						.title {
 							height: 22px;
 							color: rgba(59, 65, 75, 1);
@@ -598,6 +604,7 @@ onMounted(() => {
 							text-overflow: ellipsis;
 							white-space: nowrap;
 						}
+
 						.content {
 							margin-top: 2px;
 							height: 22px;
@@ -613,6 +620,7 @@ onMounted(() => {
 							white-space: nowrap;
 						}
 					}
+
 					.right {
 						margin-left: 25px;
 						line-height: 60px;
@@ -626,14 +634,17 @@ onMounted(() => {
 					}
 				}
 			}
+
 			.box2-footer {
 				margin-top: 7px;
 				display: flex;
 				justify-content: center;
+
 				.btn-more {
 					width: 108px;
 					height: 32px;
 					cursor: pointer;
+
 					img {
 						width: 100%;
 						height: 100%;
@@ -642,6 +653,7 @@ onMounted(() => {
 			}
 		}
 	}
+
 	.background-wrap-right {
 		margin-right: 18px;
 		margin-left: 16px;
@@ -650,22 +662,27 @@ onMounted(() => {
 		height: 845px;
 		background: #fff;
 		border-radius: 4px;
+
 		.background-wrap-right-main {
 			.right-box1 {
 				height: 365px;
+
 				.right-box1-header {
 					height: 22px;
 					margin-left: 22px;
 					display: flex;
+
 					.icon {
 						margin: 1px 12px 3px 0;
 						width: 16px;
 						height: 16px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.title {
 						height: 22px;
 						color: rgba(95, 101, 108, 1);
@@ -677,37 +694,45 @@ onMounted(() => {
 						text-align: left;
 					}
 				}
+
 				.right-box1-main {
 					width: 502px;
 					margin-top: 17px;
+
 					.right-box1-main-top {
 						margin-left: 16px;
 						width: 544px;
 						display: flex;
 						justify-content: space-between;
+
 						.user-list-container {
 							width: 440px; // 4个 user-box 的宽度 (110 * 4)
 							overflow: hidden;
+
 							.user-list-wrapper {
 								display: flex;
 								transition: transform 0.3s ease;
 							}
 						}
+
 						.user-box {
 							width: 110px;
 							flex-shrink: 0;
 							height: 80px;
+
 							.img-box {
 								width: 48px;
 								height: 48px;
 								position: relative;
 								margin: 0 auto;
+
 								img {
 									width: 100%;
 									height: 100%;
 									border-radius: 50%; // 圆形头像
 									object-fit: cover;
 								}
+
 								.icon1 {
 									position: absolute;
 									left: 5px;
@@ -717,11 +742,13 @@ onMounted(() => {
 									border-radius: 10px;
 									padding: 2px;
 									background: rgba(255, 255, 255, 0.8);
+
 									img {
 										width: 100%;
 										height: 100%;
 									}
 								}
+
 								.icon2 {
 									position: absolute;
 									right: 5px;
@@ -731,12 +758,14 @@ onMounted(() => {
 									border-radius: 10px;
 									padding: 2px;
 									background: rgba(255, 255, 255, 0.8);
+
 									img {
 										width: 100%;
 										height: 100%;
 									}
 								}
 							}
+
 							.name {
 								margin-top: 10px;
 								height: 14px;
@@ -756,6 +785,7 @@ onMounted(() => {
 							}
 						}
 					}
+
 					.right-box1-main-bottom {
 						margin: 17px 16px 0 16px;
 						border-top: 1px solid rgba(243, 243, 244, 1);
@@ -781,8 +811,10 @@ onMounted(() => {
 						// }
 					}
 				}
+
 				.right-box1-footer {
 					display: flex;
+
 					.left {
 						width: 70px;
 						height: 18px;
@@ -794,6 +826,7 @@ onMounted(() => {
 						margin-left: 26px;
 						margin-top: 23px;
 					}
+
 					.right {
 						flex: 1;
 						display: flex;
@@ -801,6 +834,7 @@ onMounted(() => {
 						margin-right: 20px;
 						margin-top: 20px;
 						justify-content: space-between;
+
 						.right-tag {
 							padding: 1px 8px 1px 8px;
 							// box-sizing: border-box;
@@ -812,21 +846,25 @@ onMounted(() => {
 							font-size: 14px;
 							font-weight: 400;
 						}
+
 						.tag1 {
 							border: 1px solid rgba(186, 224, 255, 1);
 							background: rgba(230, 244, 255, 1);
 							color: rgba(22, 119, 255, 1);
 						}
+
 						.tag2 {
 							border: 1px solid rgba(217, 247, 190, 1);
 							background: rgba(246, 255, 237, 1);
 							color: rgba(82, 196, 26, 1);
 						}
+
 						.tag3 {
 							border: 1px solid rgba(255, 204, 199, 1);
 							background: rgba(255, 241, 240, 1);
 							color: rgba(255, 77, 79, 1);
 						}
+
 						.tag4 {
 							border: 1px solid rgba(255, 241, 184, 1);
 							background: rgba(255, 251, 230, 1);
@@ -835,22 +873,27 @@ onMounted(() => {
 					}
 				}
 			}
+
 			.right-box2 {
 				height: 423px;
+
 				.right-box2-header {
 					height: 22px;
 					margin-left: 22px;
 					padding-top: 10px;
 					display: flex;
+
 					.icon {
 						margin: 1px 12px 3px 0;
 						width: 16px;
 						height: 16px;
+
 						img {
 							width: 100%;
 							height: 100%;
 						}
 					}
+
 					.title {
 						height: 22px;
 						color: rgba(95, 101, 108, 1);
@@ -860,6 +903,7 @@ onMounted(() => {
 						line-height: 22px;
 						letter-spacing: 0px;
 						text-align: left;
+
 						.title-active {
 							color: var(--color-main-active);
 							font-family: Microsoft YaHei;
@@ -868,6 +912,7 @@ onMounted(() => {
 						}
 					}
 				}
+
 				.right-box2-center {
 					height: 345px;
 					overflow: auto;
@@ -875,6 +920,7 @@ onMounted(() => {
 					margin-top: 19px;
 					margin-left: 16px;
 					width: 544px;
+
 					.user-box {
 						cursor: pointer;
 						width: 538px;
@@ -883,22 +929,27 @@ onMounted(() => {
 						border-bottom: 1px solid rgba(241, 243, 246, 1);
 						margin-bottom: 0;
 						display: flex;
+
 						&:last-child {
 							border-bottom: none;
 						}
+
 						.user-left {
 							margin-left: 14px;
 							margin-top: 12px;
+
 							.img-box {
 								width: 56px;
 								height: 56px;
 								position: relative;
+
 								img {
 									width: 100%;
 									height: 100%;
 									border-radius: 50%;
 									object-fit: cover;
 								}
+
 								.icon1 {
 									position: absolute;
 									left: -2px;
@@ -912,12 +963,14 @@ onMounted(() => {
 									display: flex;
 									align-items: center;
 									justify-content: center;
+
 									img {
 										width: 14px;
 										height: 14px;
 										border-radius: 0;
 									}
 								}
+
 								.icon2 {
 									position: absolute;
 									right: -2px;
@@ -931,6 +984,7 @@ onMounted(() => {
 									display: flex;
 									align-items: center;
 									justify-content: center;
+
 									img {
 										width: 14px;
 										height: 14px;
@@ -939,12 +993,15 @@ onMounted(() => {
 								}
 							}
 						}
+
 						.user-right {
 							margin-left: 16px;
 							flex: 1;
+
 							:deep(.text-ellipsis) {
 								white-space: normal;
 							}
+
 							.name {
 								margin-top: 10px;
 								height: 24px;
@@ -954,6 +1011,7 @@ onMounted(() => {
 								font-size: 16px;
 								font-weight: 700;
 							}
+
 							.content {
 								margin-top: 4px;
 								color: #666;
@@ -972,6 +1030,7 @@ onMounted(() => {
 						}
 					}
 				}
+
 				// .right-box2-footer {
 				// 	margin-top: 7px;
 				// 	display: flex;
@@ -994,15 +1053,18 @@ onMounted(() => {
 :deep(.el-steps--simple) {
 	padding: 6px 10px;
 }
+
 :deep(.el-timeline-item) {
 	padding-bottom: 5px !important;
 }
+
 :deep(.el-timeline-item__timestamp) {
 	color: rgba(95, 101, 108, 1) !important;
 	font-family: Microsoft YaHei !important;
 	font-size: 14px !important;
 	font-weight: 600 !important;
 }
+
 .timeline-content {
 	color: rgba(132, 136, 142, 1);
 	font-family: Microsoft YaHei;

src/views/innovationSubject/index.vue

@@ -158,16 +158,16 @@
 						<div class="box2-main">
 							<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
 								<div class="item-left" :class="{
-									itemLeftStatus1: item.status === '一般风险',
-									itemLeftStatus2: item.status === '重大风险'
+									itemLeftStatus1: item.signalLevel === '一般风险',
+									itemLeftStatus2: item.signalLevel === '重大风险'
 								}">
-									{{ item.status }}
+									{{ item.signalLevel }}
 								</div>
 								<div class="item-right">
 									<div class="text">
-										{{ item.title }}
+										{{ item.signalTitle }}
 									</div>
-									<div class="time">{{ item.time }}</div>
+									<div class="time">{{ item.signalTime }}</div>
 								</div>
 							</div>
 						</div>
@@ -194,14 +194,14 @@
 						<div class="box3-main">
 							<div class="box3-item" v-for="(news, index) in newsList" :key="index">
 								<div class="left">
-									<img :src="news.img" alt="" />
+									<img :src="news.newsImage" alt="" />
 								</div>
 								<div class="right">
 									<div class="right-top">
-										<div class="title">{{ news.title }}</div>
-										<div class="time">{{ news.from }}</div>
+										<div class="title">{{ news.newsTitle }}</div>
+										<div class="time">{{ news.newsDate + '.' + news.newsOrg }}</div>
 									</div>
-									<div class="right-footer">{{ news.content }}</div>
+									<div class="right-footer">{{ news.newsContent }}</div>
 								</div>
 							</div>
 						</div>
@@ -216,14 +216,14 @@
 						<div class="box4-main">
 							<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
 								<div class="left">
-									<img :src="item.img" alt="" />
+									<img :src="item.personImage" alt="" />
 								</div>
 								<div class="right">
 									<div class="right-top">
-										<div class="name">{{ item.name }}</div>
-										<div class="time">{{ item.time }}</div>
+										<div class="name">{{ item.personName }}</div>
+										<div class="time">{{ item.time + '.' + item.orgName }}</div>
 									</div>
-									<div class="content">{{ item.content }}</div>
+									<div class="content">{{ item.remarks }}</div>
 								</div>
 							</div>
 						</div>
@@ -367,7 +367,8 @@
 				</div>
 				<div class="home-main-footer-main">
 					<div style="    width: 1600px;">
-						<div class="footer-main-item" v-for="item in universityList" :key="item.name" @click="handleClickToDetail">
+						<div class="footer-main-item" v-for="item in universityList" :key="item.name"
+							@click="handleClickToDetail(item.orgId)">
 							<img :src="item.logoUrl" style="height: 32px; width: 32px;" />
 							<div class="item-text">{{ item.orgName }}</div>
 							<div class="item-text2">{{ item.address }}</div>
@@ -411,6 +412,9 @@ import getCalendarHeatChart from "./utils/cleandarHeat";
 import EChart from "@/components/Chart/index.vue";
 import { pieOption, raderOption } from "./utils/charts";
 import {
+	getNews,
+	getSocialMediaInfo,
+	getBillRiskSignal,
 	getCountGeography,
 	getCountSubjectType,
 	getSubjectTypeList,
@@ -559,9 +563,11 @@ const handleGetCountGeography = async () => {
 	}
 };
 // 点击查看详情
-const handleClickToDetail = () => {
-	const route = router.resolve("/InnovativeInstitutions");
-	window.open(route.href, "_blank");
+const handleClickToDetail = (university) => {
+	const curRoute = router.resolve({ name: "InnovativeInstitutions", params: { id: university } });
+	window.open(curRoute.href, "_blank");
+	// const route = router.resolve("/InnovativeInstitutions");
+	// window.open(route.href, "_blank");
 };
 
 // 查看更多风险信号
@@ -614,7 +620,17 @@ const warningList = ref([
 		status: "重大风险"
 	}
 ]);
-
+const handleGetBillRiskSignal = async () => {
+	try {
+		const res = await getBillRiskSignal();
+		console.log("风险信号", res);
+		if (res.code === 200 && res.data) {
+			warningList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取风险信号error", error);
+	}
+};
 // 新闻资讯
 const newsList = ref([
 	{
@@ -648,6 +664,18 @@ const newsList = ref([
 		from: "11-2 ·  ​福克斯新闻网"
 	}
 ]);
+const handleGetNews = async () => {
+	try {
+		const res = await getNews();
+		console.log("新闻资讯", res);
+		if (res.code === 200 && res.data) {
+			newsList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取新闻资讯error", error);
+	}
+};
+
 
 // 社交媒体
 const messageList = ref([
@@ -670,7 +698,17 @@ const messageList = ref([
 		content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
 	}
 ]);
-
+const handleGetSocialMediaInfo = async () => {
+	try {
+		const res = await getSocialMediaInfo();
+		console.log("社交媒体", res);
+		if (res.code === 200 && res.data) {
+			messageList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取社交媒体error", error);
+	}
+};
 
 // 政令涉及领域
 const chart1Data = ref([
@@ -935,7 +973,6 @@ const areaList = ref([
 
 const categoryList1 = ref(["研究型大学", "国家实验室", "科技企业", "国防承包商"]);
 const activeCate1 = ref('');
-
 //类型列表
 const handleGetSubjectTypeList = async () => {
 	try {
@@ -1000,6 +1037,9 @@ const handleToPosi = id => {
 };
 
 onMounted(async () => {
+	handleGetNews()
+	handleGetSocialMediaInfo()
+	handleGetBillRiskSignal()
 	await handleGetSubjectTypeList()
 	handleGetCountGeography()
 	handleGetCountSubjectType()
@@ -1664,7 +1704,7 @@ onMounted(async () => {
 								display: flex;
 
 								.text {
-									width: 348px;
+									width: 310px;
 									color: rgba(59, 65, 75, 1);
 									font-family: Microsoft YaHei;
 									font-size: 16px;

src/views/innovationSubject/innovativeInstitutions/index.vue

@@ -2,14 +2,14 @@
 	<div class="wrap">
 		<div class="header">
 			<div class="header-left">
-				<img src="./assets/images/icon-harvard.png" alt="" />
+				<img :src="institutionInfo.logoUrl" alt="" />
 			</div>
 			<div class="header-right">
-				<div class="title">{{ institutionInfo.name }}</div>
-				<div class="en-title">{{ institutionInfo.enName }}</div>
-				<div class="desc">{{ institutionInfo.desc }}</div>
+				<div class="title">{{ institutionInfo.orgName }}</div>
+				<div class="en-title">{{ institutionInfo.orgNameEn }}</div>
+				<div class="desc">{{ institutionInfo.orgIntroduction }}</div>
 				<div class="tag-box">
-					<div class="tag" v-for="(tag, index) in institutionInfo.tagList" :key="index">
+					<div class="tag" v-for="(tag, index) in institutionInfo.taglist" :key="index">
 						{{ tag }}
 					</div>
 				</div>
@@ -18,17 +18,12 @@
 				<div class="icon">
 					<img src="@/assets/images/links-icon.png" alt="" />
 				</div>
-				<div class="text">{{ "查看官网" }}</div>
+				<div class="text" @click="toURL(institutionInfo.url)">{{ "查看官网" }}</div>
 			</div>
 		</div>
 		<div class="tab-box">
-			<div
-				class="tab"
-				@click="handleClickTab(item, index)"
-				:class="{ tabActive: item.active }"
-				v-for="(item, index) in tabList"
-				:key="index"
-			>
+			<div class="tab" @click="handleClickTab(item, index)" :class="{ tabActive: item.active }"
+				v-for="(item, index) in tabList" :key="index">
 				{{ item.name }}
 			</div>
 		</div>
@@ -47,6 +42,11 @@ import overView from "./overView/index.vue";
 import researchStrength from "./researchStrength/index.vue";
 import cooperationStatus from "./cooperationStatus/index.vue";
 import otherStatus from "./otherStatus/index.vue";
+import { useRouter } from "vue-router";
+import {
+	getInfo
+} from "@/api/innovationSubject/overview.js";
+const router = useRouter();
 
 const institutionInfo = ref({
 	name: "哈佛大学",
@@ -55,6 +55,23 @@ const institutionInfo = ref({
 	tagList: ["常春藤", "精英摇篮"]
 });
 
+const handleGetInfo = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getInfo(params);
+		console.log("创新主体详情", res);
+		if (res.code === 200 && res.data) {
+			institutionInfo.value = res.data
+		}
+	} catch (error) {
+		console.error("获取创新主体详情error", error);
+	}
+};
+const toURL = (url) => {
+
+}
 const activeTabName = ref("学校详情");
 
 const tabList = ref([
@@ -83,6 +100,11 @@ const handleClickTab = (val, index) => {
 	tabList.value[index].active = true;
 	activeTabName.value = val.name;
 };
+
+onMounted(async () => {
+	handleGetInfo()
+
+});
 </script>
 
 <style lang="scss" scoped>
@@ -92,7 +114,8 @@ const handleClickTab = (val, index) => {
 	background-image: url("./assets/images/bg.png");
 	background-repeat: no-repeat;
 	background-size: 100% auto;
-    padding-top: 16px;
+	padding-top: 16px;
+
 	.header {
 		width: 1600px;
 		height: 200px;
@@ -104,17 +127,21 @@ const handleClickTab = (val, index) => {
 		background: rgba(255, 255, 255, 0.8);
 		display: flex;
 		position: relative;
+
 		.header-left {
 			width: 160px;
 			height: 160px;
 			margin: 20px;
+
 			img {
 				width: 100%;
 				height: 100%;
 			}
 		}
+
 		.header-right {
 			margin-left: 24px;
+
 			.title {
 				margin-top: 26px;
 				height: 42px;
@@ -126,6 +153,7 @@ const handleClickTab = (val, index) => {
 				letter-spacing: 0px;
 				text-align: left;
 			}
+
 			.en-title {
 				margin-top: 8px;
 				height: 24px;
@@ -137,6 +165,7 @@ const handleClickTab = (val, index) => {
 				letter-spacing: 0px;
 				text-align: left;
 			}
+
 			.desc {
 				margin-top: 6px;
 				height: 24px;
@@ -148,10 +177,12 @@ const handleClickTab = (val, index) => {
 				letter-spacing: 0px;
 				text-align: justify;
 			}
+
 			.tag-box {
 				margin-top: 14px;
 				display: flex;
 				gap: 8px;
+
 				.tag {
 					height: 24px;
 					padding: 0px 8px;
@@ -166,6 +197,7 @@ const handleClickTab = (val, index) => {
 				}
 			}
 		}
+
 		.header-btn {
 			position: absolute;
 			top: 26px;
@@ -179,14 +211,17 @@ const handleClickTab = (val, index) => {
 			justify-content: center;
 			align-items: center;
 			cursor: pointer;
+
 			.icon {
 				width: 16px;
 				height: 16px;
+
 				img {
 					width: 100%;
 					height: 100%;
 				}
 			}
+
 			.text {
 				height: 22px;
 				color: rgba(255, 255, 255, 1);
@@ -197,6 +232,7 @@ const handleClickTab = (val, index) => {
 			}
 		}
 	}
+
 	.tab-box {
 		width: 1600px;
 		height: 64px;
@@ -209,6 +245,7 @@ const handleClickTab = (val, index) => {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+
 		.tab {
 			width: 397px;
 			height: 54px;
@@ -223,10 +260,12 @@ const handleClickTab = (val, index) => {
 			font-weight: 400;
 			letter-spacing: 0px;
 			cursor: pointer;
+
 			&:hover {
 				background: rgba(231, 243, 255, 1);
 			}
 		}
+
 		.tabActive {
 			border: 2px solid rgba(174, 214, 255, 1);
 			background: rgba(231, 243, 255, 1);
@@ -235,6 +274,7 @@ const handleClickTab = (val, index) => {
 			font-weight: 700;
 		}
 	}
+
 	.main {
 		width: 1600px;
 		margin: 16px auto;

src/views/innovationSubject/innovativeInstitutions/overView/index.vue

+<!--学校详情-->
 <template>
 	<div class="detail-wrap">
 		<div class="left box">
@@ -5,9 +6,10 @@
 				<div class="header-left"></div>
 				<div class="title">最新动态</div>
 				<div class="header-right">
-					<el-checkbox checked="true" label="只看涉华动态" />
-					<div class="btnRightActive">机构动态</div>
-					<div class="btnRight">主官动态</div>
+					<el-checkbox :checked="cRelated" label="只看涉华动态" @change="handleGetDynamics()" />
+					<div :class="dynamicsType === 'org' ? 'btnRightActive' : 'btnRight'" @click="changedynamicsType()">机构动态</div>
+					<div :class="dynamicsType === 'person' ? 'btnRightActive' : 'btnRight'" @click="changedynamicsType()">主官动态
+					</div>
 					<div class="icon">
 						<img src="@/assets/icons/box-header-icon2.png" alt="" />
 					</div>
@@ -18,10 +20,10 @@
 			</div>
 			<div class="left-main">
 				<div class="left-main-item" v-for="(item, index) in curList" :key="index">
-					<div class="line" ></div>
+					<div class="line"></div>
 					<div class="time">
-						<div class="timetext">{{ item.time }}</div> 
-						<div class="timetext">{{ item.date }}</div> 
+						<div class="timetext">{{ item.time }}</div>
+						<div class="timetext">{{ item.date }}</div>
 					</div>
 					<div class="icon">
 						<img src="./assets/images/small-harvard.png" alt="" />
@@ -39,10 +41,11 @@
 			</div>
 			<div class="left-footer">
 				<div class="info">
-					{{ `共有153项动态` }}
+					{{ `共有` + total + `项动态` }}
 				</div>
 				<div class="page-box">
-					<el-pagination background layout="prev, pager, next" :total="153" />
+					<el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"
+						@current-change="handleGetDynamics" />
 				</div>
 			</div>
 		</div>
@@ -62,24 +65,24 @@
 				</div>
 				<div class="right-main">
 					<div class="img-box">
-						<img :src="basicInfo.image" alt="" />
+						<img :src="basicInfo.logoUrl" alt="" />
 					</div>
 					<div class="info-box">
 						<div class="info-item">
 							<div class="info-item-left">{{ "成立时间：" }}</div>
-							<div class="info-item-right">{{ basicInfo.shijian }}</div>
+							<div class="info-item-right">{{ basicInfo.establishmentDate }}</div>
 						</div>
 						<div class="info-item">
 							<div class="info-item-left">{{ "总部地址：" }}</div>
-							<div class="info-item-right">{{ basicInfo.dizhi }}</div>
+							<div class="info-item-right">{{ basicInfo.address }}</div>
 						</div>
 						<div class="info-item">
 							<div class="info-item-left">{{ "组织性质：" }}</div>
-							<div class="info-item-right">{{ basicInfo.xingzhi }}</div>
+							<div class="info-item-right">{{ basicInfo.companyType }}</div>
 						</div>
 						<div class="info-item">
 							<div class="info-item-left">{{ "在校人数：" }}</div>
-							<div class="info-item-right">{{ basicInfo.stuNum }}</div>
+							<div class="info-item-right">{{ basicInfo.numberOfEmployees }}</div>
 						</div>
 						<div class="info-item">
 							<div class="info-item-left">{{ "教职工数：" }}</div>
@@ -89,7 +92,7 @@
 							<div class="info-item-left">{{ "QS排名：" }}</div>
 							<div class="info-item-right">{{ basicInfo.rate }}</div>
 						</div>
-						
+
 						<div class="info-item">
 							<div class="info-item-left">{{ "QS排名：" }}</div>
 							<div class="taglist">
@@ -102,9 +105,9 @@
 							{{ "重点人物：" }}
 						</div>
 						<div class="user-content">
-							<div class="user-item" v-for="(item, index) in basicInfo.keyUser" :key="index">
+							<div class="user-item" v-for="(item, index) in personList" :key="index">
 								<div class="user-item-left">
-									<img :src="item.img" alt="" />
+									<img :src="item.avatarUrl" alt="" />
 								</div>
 								<div class="user-item-right">
 									<div class="name">{{ item.name }}</div>
@@ -139,9 +142,9 @@
 					<div class="timeline"></div>
 					<div class="historyList">
 						<div class="historyPoint" v-for="item in historyList">
-							<div class="historytime">{{ item.time }}</div>
+							<div class="historytime">{{ item.createTime }}</div>
 							<img src="./assets/images/timepoint.png" alt="" style="z-index: 2;" />
-							<div class="historyitem">{{ item.event }}</div>
+							<div class="historyitem">{{ item.content }}</div>
 						</div>
 					</div>
 				</div>
@@ -152,22 +155,32 @@
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
-
+import { useRouter } from "vue-router";
+import {
+	getDynamics,
+	getInfo,
+	getEventList,
+	getPersonList
+} from "@/api/innovationSubject/overview.js";
 import Img from "./assets/images/img.png";
 import User1 from "./assets/images/user1.png";
 import User2 from "./assets/images/user2.png";
 import User3 from "./assets/images/user3.png";
 import User4 from "./assets/images/user4.png";
 
+const router = useRouter();
+//只看涉华动态
+const cRelated = ref(false)
+const dynamicsType = ref('org')
 const basicInfo = ref({
 	image: Img,
 	shijian: "1636年",
 	dizhi: "剑桥市，马萨诸塞州，美国",
-	xingzhi:"私立研究型大学",
-	stuNum:"约22,000人",
-	teaNum:"约2,400人",
-	rate:"#1",
-	tag:["癌症精准医疗","气候变化解决方案","人工智能伦理","可持续发展能源"],
+	xingzhi: "私立研究型大学",
+	stuNum: "约22,000人",
+	teaNum: "约2,400人",
+	rate: "#1",
+	tag: ["癌症精准医疗", "气候变化解决方案", "人工智能伦理", "可持续发展能源"],
 	keyUser: [
 		{
 			name: "艾伦·M·加伯",
@@ -290,51 +303,128 @@ const curList = ref([
 	}
 ]);
 
+const changedynamicsType = () => {
+	dynamicsType.value === 'person' ? dynamicsType.value = 'org' : dynamicsType.value = 'person'
+	handleGetDynamics()
+}
+
+const handleGetInfo = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getInfo(params);
+		console.log("创新主体基本信息", res);
+		if (res.code === 200 && res.data) {
+			basicInfo.value = res.data
+		}
+	} catch (error) {
+		console.error("获取基本信息error", error);
+	}
+};
+const personList = ref([])
+//重点人物
+const handleGetPersonList = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getPersonList(params);
+		console.log("重点人物", res);
+		if (res.code === 200 && res.data) {
+			personList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取重点人物error", error);
+	}
+};
+
+const total = ref(0)
+const currentPage = ref(1)
+const handleGetDynamics = async () => {
+	try {
+		let params = {
+			currentPage: 1,
+			pageSize: 10,
+			cRelated: cRelated.value ? null : 'N',
+			dynamicsType: dynamicsType.value,
+			orgId: router.currentRoute._value.params.id
+		}
+		const res = await getDynamics(params);
+		console.log("创新主体最新动态", res);
+		if (res.code === 200 && res.data) {
+			curList.value = res.data.content
+			total.value = res.data.totalElements
+		}
+	} catch (error) {
+		console.error("获取最新动态error", error);
+	}
+};
 const awardsList = ref([
 	{
-		name:"诺贝尔奖",
-		num:161
+		name: "诺贝尔奖",
+		num: 161
 	},
 	{
-		name:"图灵奖",
-		num:18
+		name: "图灵奖",
+		num: 18
 	},
 	{
-		name:"菲尔兹奖",
-		num:14
+		name: "菲尔兹奖",
+		num: 14
 	},
 	{
-		name:"美国院士",
-		num:273
+		name: "美国院士",
+		num: 273
 	}
 ]);
-
 const historyList = ref([
 	{
-		time:"2023年",
-		event:"克劳丁·盖伊成为首位非裔女校长"
+		time: "2023年",
+		event: "克劳丁·盖伊成为首位非裔女校长"
 	},
 	{
-		time:"1999年",
-		event:"拉德克利夫学院转型为“拉德克利夫高等研究院”"
+		time: "1999年",
+		event: "拉德克利夫学院转型为“拉德克利夫高等研究院”"
 	},
 	{
-		time:"1977年",
-		event:"哈佛与拉德克利夫学院正式合并招生"
+		time: "1977年",
+		event: "哈佛与拉德克利夫学院正式合并招生"
 	},
 	{
-		time:"1950年",
-		event:"逐步废除招生中的宗教、种族限制，学生群体多元化"
+		time: "1950年",
+		event: "逐步废除招生中的宗教、种族限制，学生群体多元化"
 	},
 	{
-		time:"1908年",
-		event:"哈佛商学院成立，首创MBA案例教学法"
+		time: "1908年",
+		event: "哈佛商学院成立，首创MBA案例教学法"
 	},
 	{
-		time:"1869年",
-		event:"查尔斯·W·艾略特任校长40年，推行选修制、重建法学院、改革医学院、新建商学院等"
+		time: "1869年",
+		event: "查尔斯·W·艾略特任校长40年，推行选修制、重建法学院、改革医学院、新建商学院等"
 	}
 ]);
+
+const handleGetEventList = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getEventList(params);
+		console.log("历史动态", res);
+		if (res.code === 200 && res.data) {
+			historyList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取历史动态error", error);
+	}
+};
+onMounted(async () => {
+	handleGetInfo()
+	handleGetDynamics()
+	handleGetEventList()
+	handleGetPersonList()
+});
 </script>
 
 <style lang="scss" scoped>
@@ -342,16 +432,19 @@ const historyList = ref([
 	display: flex;
 	gap: 16px;
 	padding-bottom: 30px;
+
 	.box {
 		border: 1px solid rgba(234, 236, 238, 1);
 		border-radius: 10px;
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		background: rgba(255, 255, 255, 1);
 	}
+
 	.box-header {
 		height: 56px;
 		display: flex;
 		position: relative;
+
 		.header-left {
 			margin-top: 18px;
 			width: 8px;
@@ -359,6 +452,7 @@ const historyList = ref([
 			border-radius: 0 4px 4px 0;
 			background: rgba(10, 87, 166, 1);
 		}
+
 		.title {
 			margin-left: 14px;
 			margin-top: 14px;
@@ -370,11 +464,13 @@ const historyList = ref([
 			letter-spacing: 0px;
 			text-align: left;
 		}
+
 		.header-btn-box {
 			position: absolute;
 			top: 14px;
 			right: 52px;
 			display: flex;
+
 			.btn {
 				margin-left: 8px;
 				height: 28px;
@@ -391,12 +487,14 @@ const historyList = ref([
 				font-weight: 400;
 				cursor: pointer;
 			}
+
 			.btnActive {
 				border: 1px solid rgba(10, 87, 166, 1);
 				background: rgba(246, 250, 255, 1);
 				color: rgba(10, 87, 166, 1);
 			}
 		}
+
 		.header-info {
 			height: 22px;
 			position: absolute;
@@ -404,16 +502,19 @@ const historyList = ref([
 			top: 17px;
 			display: flex;
 			justify-content: flex-end;
+
 			.icon {
 				margin-top: 3px;
 				width: 14px;
 				height: 14px;
 				margin-right: 8px;
+
 				img {
 					width: 100%;
 					height: 100%;
 				}
 			}
+
 			.text {
 				height: 22px;
 				color: rgba(95, 101, 108, 1);
@@ -423,6 +524,7 @@ const historyList = ref([
 				line-height: 22px;
 			}
 		}
+
 		.header-right {
 			position: absolute;
 			top: 14px;
@@ -430,15 +532,18 @@ const historyList = ref([
 			display: flex;
 			justify-content: flex-end;
 			gap: 8px;
+
 			.icon {
 				width: 28px;
 				height: 28px;
+
 				img {
 					width: 100%;
 					height: 100%;
 				}
 			}
-			.checkboxRight{
+
+			.checkboxRight {
 				color: rgba(132, 136, 142, 1);
 				font-family: Microsoft YaHei;
 				font-size: 16px;
@@ -447,7 +552,8 @@ const historyList = ref([
 				letter-spacing: 0px;
 				text-align: justify;
 			}
-			.btnRightActive{
+
+			.btnRightActive {
 				width: 80px;
 				height: 28px;
 				display: flex;
@@ -466,7 +572,8 @@ const historyList = ref([
 				letter-spacing: 0px;
 				text-align: center;
 			}
-			.btnRight{
+
+			.btnRight {
 				width: 80px;
 				height: 28px;
 				display: flex;
@@ -487,12 +594,15 @@ const historyList = ref([
 			}
 		}
 	}
+
 	.left {
 		width: 1064px;
 		height: 2083px;
+
 		.left-main {
 			border-top: 1px solid rgba(234, 236, 238, 1);
 			height: 1905px;
+
 			.left-main-item {
 				display: flex;
 				margin-top: 20px;
@@ -500,6 +610,7 @@ const historyList = ref([
 				margin-left: 31px;
 				height: 130px;
 				position: relative;
+
 				.line {
 					background: #e6e7e8;
 					width: 2px;
@@ -508,10 +619,12 @@ const historyList = ref([
 					top: 24px;
 					left: 106px;
 				}
+
 				.time {
 					display: flex;
 					flex-direction: column;
-					.timetext{
+
+					.timetext {
 						width: 79px;
 						color: rgba(5, 95, 194, 1);
 						font-family: Microsoft YaHei;
@@ -522,20 +635,25 @@ const historyList = ref([
 						text-align: right;
 					}
 				}
+
 				.icon {
 					width: 24px;
 					height: 24px;
+
 					img {
 						width: 100%;
 						height: 100%;
 					}
 				}
+
 				.info {
 					width: 862px;
+
 					.header {
 						height: 26px;
 						display: flex;
 						justify-content: space-between;
+
 						.title {
 							color: rgba(59, 65, 75, 1);
 							font-family: Microsoft YaHei;
@@ -544,6 +662,7 @@ const historyList = ref([
 							line-height: 26px;
 						}
 					}
+
 					.content {
 						margin-top: 8px;
 						color: rgba(95, 101, 108, 1);
@@ -552,10 +671,12 @@ const historyList = ref([
 						font-weight: 400;
 						line-height: 24px;
 					}
+
 					.tag-box {
 						margin-top: 12px;
 						display: flex;
 						gap: 8px;
+
 						.tag {
 							height: 28px;
 							padding: 0 8px;
@@ -571,6 +692,7 @@ const historyList = ref([
 				}
 			}
 		}
+
 		.left-footer {
 			height: 75px;
 			border-top: 1px solid rgba(234, 236, 238, 1);
@@ -580,32 +702,40 @@ const historyList = ref([
 			padding: 0 20px;
 		}
 	}
-	.rightcontent{
+
+	.rightcontent {
 		display: flex;
 		flex-direction: column;
 		width: 520px;
 		gap: 16px;
+
 		.right {
 			width: 520px;
 			height: 874px;
+
 			.right-main {
 				width: 469px;
 				margin: 3px auto;
+
 				.img-box {
 					width: 469px;
 					height: 240px;
+
 					img {
 						width: 100%;
 						height: 100%;
 					}
 				}
+
 				.info-box {
 					margin-top: 26px;
 					padding-bottom: 50px;
 					border-bottom: 1px solid rgba(234, 236, 238, 1);
+
 					.info-item {
 						display: flex;
 						margin-top: 12px;
+
 						.info-item-left {
 							width: 88px;
 							height: 24px;
@@ -617,6 +747,7 @@ const historyList = ref([
 							letter-spacing: 1px;
 							text-align: left;
 						}
+
 						.info-item-right {
 							width: 356px;
 							color: rgba(59, 65, 75, 1);
@@ -627,12 +758,14 @@ const historyList = ref([
 							letter-spacing: 0px;
 							text-align: left;
 						}
-						.taglist{
+
+						.taglist {
 							width: 358px;
 							display: flex;
 							gap: 8px;
 							flex-wrap: wrap;
-							.tagdirec{
+
+							.tagdirec {
 								height: 24px;
 								justify-content: center;
 								align-items: center;
@@ -652,8 +785,10 @@ const historyList = ref([
 						}
 					}
 				}
+
 				.user-box {
 					padding-top: 19px;
+
 					.user-header {
 						height: 24px;
 						color: rgba(59, 65, 75, 1);
@@ -664,24 +799,29 @@ const historyList = ref([
 						letter-spacing: 1px;
 						text-align: left;
 					}
+
 					.user-content {
 						margin-top: 19px;
 						display: flex;
 						flex-wrap: wrap;
 						gap: 16px 73px;
 						justify-content: start;
+
 						.user-item {
 							height: 49px;
 							display: flex;
 							gap: 8px;
+
 							.user-item-left {
 								width: 48px;
 								height: 48px;
+
 								img {
 									width: 100%;
 									height: 100%;
 								}
 							}
+
 							.user-item-right {
 								.name {
 									height: 24px;
@@ -693,6 +833,7 @@ const historyList = ref([
 									letter-spacing: 0px;
 									text-align: left;
 								}
+
 								.position {
 									height: 24px;
 									color: rgba(95, 101, 108, 1);
@@ -709,13 +850,14 @@ const historyList = ref([
 				}
 			}
 		}
-		.right-Num{
+
+		.right-Num {
 			display: flex;
 			flex-wrap: wrap;
 			width: 520px;
 			gap: 8px;
-			
-			.numbox{
+
+			.numbox {
 				display: flex;
 				width: 256px;
 				height: 80px;
@@ -725,12 +867,14 @@ const historyList = ref([
 				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 				background: rgba(255, 255, 255, 1);
 				align-items: center;
-				.iconrec{
+
+				.iconrec {
 					width: 4px;
 					height: 49px;
 					background: rgba(5, 95, 194, 1);
 				}
-				.awards{
+
+				.awards {
 					margin-left: 24px;
 					color: rgba(59, 65, 75, 1);
 					font-family: Microsoft YaHei;
@@ -740,8 +884,9 @@ const historyList = ref([
 					letter-spacing: 0px;
 					text-align: left;
 				}
-				.awardsNum{
-					margin-left: 72px; 
+
+				.awardsNum {
+					margin-left: 72px;
 					color: rgba(5, 95, 194, 1);
 					font-family: Microsoft YaHei;
 					font-size: 30px;
@@ -752,7 +897,8 @@ const historyList = ref([
 				}
 			}
 		}
-		.right-history{
+
+		.right-history {
 			width: 520px;
 			height: 1009px;
 			border: 1px solid rgba(234, 236, 238, 1);
@@ -760,30 +906,34 @@ const historyList = ref([
 			/* 业务系统/模块阴影 */
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background: rgba(255, 255, 255, 1);
-			.historytimeline{
+
+			.historytimeline {
 				display: flex;
 				margin-left: 37px;
 				margin-top: 29px;
-				.timeline{
+
+				.timeline {
 					position: absolute;
 					width: 8px;
 					height: 910px;
 					background: url("./assets/images/arrow.png") repeat;
-					
+
 				}
-				.historyList{
-					
+
+				.historyList {
+
 					margin-left: -2px;
 					display: flex;
 					flex-direction: column;
 					margin-top: 42px;
 					gap: 56px;
-					
-					.historyPoint{
+
+					.historyPoint {
 						width: 458px;
 						height: 89px;
 						gap: 6px;
-						.historytime{
+
+						.historytime {
 							margin-left: 24px;
 							color: rgba(5, 95, 194, 1);
 							font-family: Microsoft YaHei;
@@ -793,7 +943,8 @@ const historyList = ref([
 							letter-spacing: 1px;
 							text-align: left;
 						}
-						.historyitem{
+
+						.historyitem {
 							margin-left: 24px;
 							color: rgba(59, 65, 75, 1);
 							font-family: Microsoft YaHei;
@@ -813,14 +964,13 @@ const historyList = ref([
 
 
 
-::v-deep .el-checkbox__label{
-        color: rgba(132, 136, 142, 1);
-		font-family: Microsoft YaHei;
-		font-size: 16px;
-		font-weight: 400;
-		line-height: 24px;
-        padding-left: 3px;
-		padding-right: 10px;
-      }
-
+::v-deep .el-checkbox__label {
+	color: rgba(132, 136, 142, 1);
+	font-family: Microsoft YaHei;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+	padding-left: 3px;
+	padding-right: 10px;
+}
 </style>
\ No newline at end of file

src/views/innovationSubject/innovativeInstitutions/researchStrength/index.vue

+<!--科研实力-->
 <template>
 	<div class="detail-wrap">
 		<div class="row">
@@ -15,7 +16,7 @@
 					</div>
 				</div>
 				<div class="statisticsChart">
-					<Echarts :option="barOption" height="100%"></Echarts>
+					<Echarts :option="barOption(patentList)" height="100%"></Echarts>
 				</div>
 				<div class="statisticsAI">
 					<div class="AIbox">
@@ -39,7 +40,7 @@
 					</div>
 				</div>
 				<div class="statisticsChart">
-					<Echarts :option="lineChart" height="100%"></Echarts>
+					<Echarts :option="lineChart(paperList)" height="100%"></Echarts>
 				</div>
 				<div class="statisticsAI">
 					<div class="AIbox">
@@ -89,7 +90,7 @@
 					</div>
 				</div>
 				<div class="statisticsChart">
-					<Echarts :option="lineChart1" height="100%"></Echarts>
+					<Echarts :option="lineChart1(fundGrowth)" height="100%"></Echarts>
 				</div>
 				<div class="statisticsAI">
 					<div class="AIbox">
@@ -115,7 +116,7 @@
 					</div>
 				</div>
 				<div class="statisticsChart">
-					<Echarts :option="pieOption1" height="100%"></Echarts>
+					<Echarts :option="pieOption1(fundFromList)" height="100%"></Echarts>
 				</div>
 				<div class="statisticsAI">
 					<div class="AIbox">
@@ -146,7 +147,7 @@
 					letter-spacing: 0px;
 					text-align: right;">（亿美元）</div>
 				<div class="statisticsChart" style="height: 298px; ">
-					<Echarts :option="horizontalBaroption" height="100%" ></Echarts>
+					<Echarts :option="horizontalBaroption(fundToList)" height="100%"></Echarts>
 				</div>
 				<div class="statisticsAI">
 					<div class="AIbox">
@@ -164,8 +165,103 @@
 import { ref, computed, onMounted } from "vue";
 import Echarts from "@/components/Chart/index.vue";
 import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalBaroption } from "../../utils/charts.js";
+import {
+	getPatentList,
+	getPaperList, getFundGrowth, getFundFromList, getFundToList
+} from "@/api/innovationSubject/overview.js";
+import { useRouter } from "vue-router";
+const router = useRouter();
+//专利数量统计
+const patentList = ref([])
+const handleGetPatentList = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getPatentList(params);
+		console.log("专利数量统计", res);
+		if (res.code === 200 && res.data) {
+			patentList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取专利数量统计error", error);
+	}
+};
+//论文数量统计
+const paperList = ref([])
+const handleGetPaperList = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getPaperList(params);
+		console.log("论文数量统计", res);
+		if (res.code === 200 && res.data) {
+			paperList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取论文数量统计error", error);
+	}
+};
+
+//经费增长情况
+const fundGrowth = ref([])
+const handleGetFundGrowth = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getFundGrowth(params);
+		console.log("经费增长情况", res);
+		if (res.code === 200 && res.data) {
+			fundGrowth.value = res.data
+		}
+	} catch (error) {
+		console.error("获取经费增长情况error", error);
+	}
+};
+
+//经费来源
+const fundFromList = ref([])
+const handleGetFundFromList = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getFundFromList(params);
+		console.log("经费来源", res);
+		if (res.code === 200 && res.data) {
+			fundFromList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取经费来源error", error);
+	}
+};
 
+//学院经费分配排序 
+const fundToList = ref([])
+const handlegGetFundToList = async () => {
+	try {
+		let params = {
+			id: router.currentRoute._value.params.id
+		}
+		const res = await getFundToList(params);
+		console.log("学院经费分配排序", res);
+		if (res.code === 200 && res.data) {
+			fundToList.value = res.data
+		}
+	} catch (error) {
+		console.error("获取学院经费分配排序error", error);
+	}
+};
 
+onMounted(async () => {
+	handleGetPatentList()
+	handleGetPaperList()
+	handleGetFundGrowth()
+	handleGetFundFromList()
+	handlegGetFundToList()
+});
 
 </script>
 
@@ -175,16 +271,19 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 	flex-direction: column;
 	gap: 16px;
 	padding-bottom: 30px;
+
 	.box {
 		border: 1px solid rgba(234, 236, 238, 1);
 		border-radius: 10px;
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		background: rgba(255, 255, 255, 1);
 	}
+
 	.box-header {
 		height: 56px;
 		display: flex;
 		position: relative;
+
 		.header-left {
 			margin-top: 18px;
 			width: 8px;
@@ -192,6 +291,7 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 			border-radius: 0 4px 4px 0;
 			background: rgba(10, 87, 166, 1);
 		}
+
 		.title {
 			margin-left: 14px;
 			margin-top: 14px;
@@ -203,11 +303,13 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 			letter-spacing: 0px;
 			text-align: left;
 		}
+
 		.header-btn-box {
 			position: absolute;
 			top: 14px;
 			right: 52px;
 			display: flex;
+
 			.btn {
 				margin-left: 8px;
 				height: 28px;
@@ -224,12 +326,14 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 				font-weight: 400;
 				cursor: pointer;
 			}
+
 			.btnActive {
 				border: 1px solid rgba(10, 87, 166, 1);
 				background: rgba(246, 250, 255, 1);
 				color: rgba(10, 87, 166, 1);
 			}
 		}
+
 		.header-info {
 			height: 22px;
 			position: absolute;
@@ -237,16 +341,19 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 			top: 17px;
 			display: flex;
 			justify-content: flex-end;
+
 			.icon {
 				margin-top: 3px;
 				width: 14px;
 				height: 14px;
 				margin-right: 8px;
+
 				img {
 					width: 100%;
 					height: 100%;
 				}
 			}
+
 			.text {
 				height: 22px;
 				color: rgba(95, 101, 108, 1);
@@ -256,6 +363,7 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 				line-height: 22px;
 			}
 		}
+
 		.header-right {
 			position: absolute;
 			top: 14px;
@@ -263,15 +371,18 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 			display: flex;
 			justify-content: flex-end;
 			gap: 8px;
+
 			.icon {
 				width: 28px;
 				height: 28px;
+
 				img {
 					width: 100%;
 					height: 100%;
 				}
 			}
-			.checkboxRight{
+
+			.checkboxRight {
 				color: rgba(132, 136, 142, 1);
 				font-family: Microsoft YaHei;
 				font-size: 16px;
@@ -280,7 +391,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 				letter-spacing: 0px;
 				text-align: justify;
 			}
-			.btnRightActive{
+
+			.btnRightActive {
 				width: 80px;
 				height: 28px;
 				display: flex;
@@ -299,7 +411,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 				letter-spacing: 0px;
 				text-align: center;
 			}
-			.btnRight{
+
+			.btnRight {
 				width: 80px;
 				height: 28px;
 				display: flex;
@@ -320,20 +433,24 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 			}
 		}
 	}
-	.row{
+
+	.row {
 		display: flex;
 		width: 1600px;
 		height: 500px;
 		gap: 16px;
-		.statisticsItem{
+
+		.statisticsItem {
 			width: 792px;
 			height: 500px;
-			.statisticsChart{
+
+			.statisticsChart {
 				width: 736px;
 				height: 321px;
 				margin: 20px auto;
 			}
-			.statisticsAI{
+
+			.statisticsAI {
 				margin: 0 auto;
 				width: 760px;
 				height: 64px;
@@ -345,11 +462,12 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 				gap: 10;
 				padding: 6px 12px 6px 12px;
 				box-sizing: border-box;
-				border: 1px solid  rgba(231, 243, 255, 1);
+				border: 1px solid rgba(231, 243, 255, 1);
 				border-radius: 4px;
 				background: rgba(246, 250, 255, 1);
-				.AIbox{
-					
+
+				.AIbox {
+
 					width: 736px;
 					height: 52px;
 					/* 自动布局 */
@@ -359,7 +477,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 					align-items: center;
 					gap: 13px;
 					padding: 2px 0px 2px 0px;
-					.AItext{
+
+					.AItext {
 						width: 667px;
 						height: 48px;
 						display: flex;
@@ -377,13 +496,8 @@ import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalB
 				}
 			}
 		}
-		
+
 	}
 
 }
-
-
-
-
-
 </style>
\ No newline at end of file

src/views/innovationSubject/utils/charts.js

@@ -91,71 +91,68 @@ var data1 = [
   }
 ];
 
+export const pieOption1 = (data) => {
+  // 提取部门名称和对应的金额 
+  const colors = [
+    'rgba(105, 177, 255, 1)',
+    'rgba(255, 236, 61, 1)',
+    'rgba(135, 232, 222, 1)',
+    'rgba(133, 165, 255, 1)',
+    'rgba(255, 120, 117, 1)'
+  ];
+  // 提取部门名称和对应的金额
+  const departmentNames = data.map(item => item.departmentName);
+  const amounts = data.map(item => item.amount);
 
-export const pieOption1 = {
-  legend: {
-    orient: 'vertical',
-    x: 'right',
-    y: 'center',
-    align: 'left',
-    left: '60%',
-    data: data1.map(item => item.name),
-    textStyle: { // 图例字体样式
-      color: "rgba(59, 65, 75, 1)",
-      fontSize: 16
-    },
-    formatter: function (name) {
-      var total = getTotal(data1);
-      var item = data1.find(item => item.name === name);
-      var percentage = ((item.value / total) * 100).toFixed(2);
-      return `${name} ${percentage}%`;
-    }
-  },
-  series: [
-    {
-      name: '频度',
-      type: 'pie',
-      center: ['30%', '50%'],
-      radius: ['40%', '70%'],
-      avoidLabelOverlap: false,
-      label: {
-        show: false,
-        position: 'center'
-      },
+  // 计算总金额
+  const getTotal = (data) => {
+    return data.reduce((total, item) => total + item.amount, 0);
+  };
 
-      labelLine: {
-        show: false
+  // 饼图配置
+  const option = {
+    legend: {
+      orient: 'vertical',
+      x: 'right',
+      y: 'center',
+      align: 'left',
+      left: '60%',
+      data: departmentNames,
+      textStyle: { // 图例字体样式
+        color: "rgba(59, 65, 75, 1)",
+        fontSize: 16
       },
-      data: [
-        {
-          name: "捐赠基金",
-          value: 27,
-          itemStyle: { color: 'rgba(105, 177, 255, 1)' }
-        },
-        {
-          name: "政府拨款",
-          value: 22,
-          itemStyle: { color: 'rgba(255, 236, 61, 1)' }
-        },
-        {
-          name: "企业合作",
-          value: 18,
-          itemStyle: { color: 'rgba(135, 232, 222, 1)' }
+      formatter: function (name) {
+        var total = getTotal(data);
+        var item = data.find(item => item.departmentName === name);
+        var percentage = ((item.amount / total) * 100).toFixed(2);
+        return `${name} ${percentage}%`;
+      }
+    },
+    series: [
+      {
+        name: '频度',
+        type: 'pie',
+        center: ['30%', '50%'],
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
         },
-        {
-          name: "学费收入",
-          value: 15,
-          itemStyle: { color: 'rgba(133, 165, 255, 1)' }
+        labelLine: {
+          show: false
         },
-        {
-          name: "其他来源",
-          value: 12,
-          itemStyle: { color: 'rgba(255, 120, 117, 1)' }
-        }
-      ]
-    }
-  ]
-};
+        data: data.map((item, index) => ({
+          name: item.departmentName,
+          value: item.amount,
+          itemStyle: { color: colors[index % colors.length] } // 使用颜色列表
+        }))
+      }
+    ]
+  };
+  return option;
+}
 
 export const raderOption = (data) => {
   // 提取所有可能的 areaName
@@ -265,293 +262,290 @@ export const raderOption1 = {
     }
   ]
 };
-
-export const barOption = {
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow"
-    }
-  },
-  grid: {
-    top: '3%',
-    right: '3%',
-    bottom: '1%',
-    left: '1%',
-    containLabel: true
-  },
-
-  xAxis: [{
-    axisLine: {
-      lineStyle: {
-        width: 1,
-        color: "rgba(231, 243, 255, 1)"
-      }
-    },
-    axisTick:
-      { show: false },
-    type: "category",
-    boundaryGap: [100, 100],
-    axisLabel: {
-      color: "rgba(95, 101, 108, 1)",
-      // fontSize: 22,
-      // fontWeight: 400
-    },
-    data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
-  }],
-
-  yAxis: {
-    type: "value",
-    axisLine: {
-      lineStyle: {
-        type: "dashed"
+export const barOption = (data) => {
+  // 提取年份和对应的专利数量
+  const years = data.map(item => item.year.toString());
+  const counts = data.map(item => item.countNum);
+  // 柱状图配置
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
       }
     },
-
-    axisLabel: {
-      color: "rgba(95, 101, 108, 1)",
-      // fontSize: 22,
-      // fontWeight: 400
+    grid: {
+      top: '3%',
+      right: '3%',
+      bottom: '1%',
+      left: '1%',
+      containLabel: true
     },
-    splitNumber: 5,
-    splitLine: {
-      lineStyle: {
-        width: 1,
-        type: "dashed",
-        color: "rgba(231, 243, 255, 1)"
+    xAxis: [{
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "rgba(231, 243, 255, 1)"
+        }
       },
-
-    }
-  },
-  series: [
-    {
-      name: "专利数量",
-      data: [80, 90, 110, 130, 140, 160, 200, 250, 300, 340],
-      type: "bar",
-      barWidth: 20,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "rgba(46, 165, 255, 1)" },
-          // { offset: 0.5, color: '#188df0' },
-          { offset: 1, color: "rgba(46, 165, 255, 0)" }
-        ])
-        // borderRadius: [6, 6, 0, 0]
+      axisTick: { show: false },
+      type: "category",
+      boundaryGap: [100, 100],
+      axisLabel: {
+        color: "rgba(95, 101, 108, 1)",
+        // fontSize: 22,
+        // fontWeight: 400
       },
-      label: {
-        show: false,
-        position: 'top',
-        textStyle: {
-          fontSize: '20px',
-          fontWeight: 400,
-          color: 'rgba(255, 255, 255, 1)'
+      data: years, // 动态设置 xAxis 数据
+    }],
+    yAxis: {
+      type: "value",
+      axisLine: {
+        lineStyle: {
+          type: "dashed"
         }
-
+      },
+      axisLabel: {
+        color: "rgba(95, 101, 108, 1)",
+        // fontSize: 22,
+        // fontWeight: 400
+      },
+      splitNumber: 5,
+      splitLine: {
+        lineStyle: {
+          width: 1,
+          type: "dashed",
+          color: "rgba(231, 243, 255, 1)"
+        },
       }
-    }
-  ]
-};
-
-export const lineChart = {
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow"
-    }
-  },
-  grid: {
-    left: '2%',
-    top: '8%',
-    right: '2%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    splitLine: {
-      show: false
     },
-    axisLine: {
-      show: false
-    },
-    data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
-  },
-  yAxis: {
-    type: 'value',
-    splitLine: {
-      show: true, lineStyle: {
-        type: "dashed",
-        color: "#E7F3FF"
+    series: [
+      {
+        name: "专利数量",
+        data: counts, // 动态设置 series 数据
+        type: "bar",
+        barWidth: 20,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "rgba(46, 165, 255, 1)" },
+            { offset: 1, color: "rgba(46, 165, 255, 0)" }
+          ])
+        },
+        label: {
+          show: false,
+          position: 'top',
+          textStyle: {
+            fontSize: '20px',
+            fontWeight: 400,
+            color: 'rgba(255, 255, 255, 1)'
+          }
+        }
+      }
+    ]
+  };
+  return option;
+
+}
+export const lineChart = (data) => {
+  // 提取年份和对应的专利数量
+  const years = data.map(item => item.year.toString());
+  const counts = data.map(item => item.countNum);
+  // 折线图配置
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
       }
     },
-    axisLine: {
-      show: false
+    grid: {
+      left: '2%',
+      top: '8%',
+      right: '2%',
+      bottom: '3%',
+      containLabel: true
     },
-
-  },
-  color: ['rgba(255, 149, 77, 1)'],
-  series: [
-    {
-      data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
-      type: 'line',
-      emphasis: {
-        focus: 'series'
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      splitLine: {
+        show: false
       },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0,
-          color: 'rgba(255, 149, 77, 0.5)' // 起始颜色：深色
-        }, {
-          offset: 1,
-          color: 'rgba(255, 149, 77, 0)' // 结束颜色：浅色且透明度降低
-        }])
+      axisLine: {
+        show: false
       },
-    }
-  ]
-
-};
-
-export const lineChart1 = {
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow"
-    }
-  },
-  grid: {
-    left: '2%',
-    top: '8%',
-    right: '2%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    splitLine: {
-      show: false
+      data: years, // 动态设置 xAxis 数据
     },
-    axisLine: {
-      show: false
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "#E7F3FF"
+        }
+      },
+      axisLine: {
+        show: false
+      },
     },
-    data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
-  },
-  yAxis: {
-    type: 'value',
-    splitLine: {
-      show: true, lineStyle: {
-        type: "dashed",
-        color: "#E7F3FF"
+    color: ['rgba(255, 149, 77, 1)'],
+    series: [
+      {
+        data: counts, // 动态设置 series 数据
+        type: 'line',
+        emphasis: {
+          focus: 'series'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(255, 149, 77, 0.5)' }, // 起始颜色：深色
+            { offset: 1, color: 'rgba(255, 149, 77, 0)' } // 结束颜色：浅色且透明度降低
+          ])
+        },
+      }
+    ]
+  };
+  return option;
+}
+export const lineChart1 = (data) => {
+  // 提取年份和对应的 fundAmount
+  const years = data.map(item => item.year.toString());
+  const fundAmounts = data.map(item => item.fundAmount);
+  // 折线图配置
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
       }
     },
-    axisLine: {
-      show: false
+    grid: {
+      left: '2%',
+      top: '8%',
+      right: '2%',
+      bottom: '3%',
+      containLabel: true
     },
-
-  },
-  color: ['rgba(33, 129, 57, 1)'],
-  series: [
-    {
-      data: [50, 60, 80, 100, 110, 140, 180, 260, 280, 330],
-      type: 'line',
-      emphasis: {
-        focus: 'series'
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      splitLine: {
+        show: false
       },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0,
-          color: 'rgba(33, 129, 57, 0.5)' // 起始颜色：深色
-        }, {
-          offset: 1,
-          color: 'rgba(33, 129, 57, 0)' // 结束颜色：浅色且透明度降低
-        }])
+      axisLine: {
+        show: false
       },
-    }
-  ]
-
-};
+      data: years, // 动态设置 xAxis 数据
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "#E7F3FF"
+        }
+      },
+      axisLine: {
+        show: false
+      },
+    },
+    color: ['rgba(33, 129, 57, 1)'],
+    series: [
+      {
+        data: fundAmounts, // 动态设置 series 数据
+        type: 'line',
+        emphasis: {
+          focus: 'series'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(33, 129, 57, 0.5)' }, // 起始颜色：深色
+            { offset: 1, color: 'rgba(33, 129, 57, 0)' } // 结束颜色：浅色且透明度降低
+          ])
+        },
+      }
+    ]
+  };
+  return option;
+}
 
 
 const nameList = ["教育学院", "文理学院", "法学院", "商学院", "工程学院", "医学院"];
 const valueList = [21, 21, 25, 79, 95, 109];
+export const horizontalBaroption = (data) => {
+  // 提取部门名称和对应的金额
+  const departmentNames = data.map(item => item.departmentName);
+  const amounts = data.map(item => item.amount);
 
-export const horizontalBaroption = {
-  grid: {
-    top: '0',
-    right: '3%',
-    bottom: '1%',
-    left: '1%',
-    containLabel: true
-  },
-  color: ['#ce4f51', '#1778ff'],
-  xAxis: {
-    type: 'value',
-    splitLine: {
-      show: false
-    },
-    show: false
-  },
-  yAxis: {
-    type: 'category',
-    data: nameList,
-    splitLine: {
-      show: false
-    },
-    axisTick: {
-      show: false
+  // 水平柱状图配置
+  const option = {
+    grid: {
+      top: '0',
+      right: '3%',
+      bottom: '1%',
+      left: '1%',
+      containLabel: true
     },
-    axisLine: {
+    color: ['#ce4f51', '#1778ff'],
+    xAxis: {
+      type: 'value',
+      splitLine: {
+        show: false
+      },
       show: false
     },
-    axisLabel: {
-      show: true
-    }
-  },
-  series: [{
-    type: 'bar',
-    data: valueList.map((item, index) => {
-      return {
-        value: item,
-        label: {
-          textStyle: {
-            color: index < 3 ? '#1778ff' : '#ce4f51'
-          }
-        }
-      };
-    }),
-    label: {
-      show: true,
-      position: [650, -2]
+    yAxis: {
+      type: 'category',
+      data: departmentNames, // 动态设置 yAxis 数据
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true
+      }
     },
-    barWidth: 8,
-    itemStyle: {
-      color: function (params) {
-        if (params.dataIndex < 3) {
-          return new echarts.graphic.LinearGradient(0, 0, 1, 0,
-            [{
-              offset: 0,
-              color: 'rgba(22, 119, 255, 0)'
-            },
-            {
-              offset: 1,
-              color: '#1778ff'
+    series: [{
+      type: 'bar',
+      data: amounts.map((item, index) => {
+        return {
+          value: item,
+          label: {
+            textStyle: {
+              color: index < 3 ? '#1778ff' : '#ce4f51'
             }
+          }
+        };
+      }),
+      label: {
+        show: true,
+        position: [650, -2]
+      },
+      barWidth: 8,
+      itemStyle: {
+        color: function (params) {
+          if (params.dataIndex < 3) {
+            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(22, 119, 255, 0)' },
+              { offset: 1, color: '#1778ff' }
             ]);
-        } else {
-          return new echarts.graphic.LinearGradient(0, 0, 1, 0,
-            [{
-              offset: 0,
-              color: 'rgba(206, 79, 81, 0)'
-            },
-            {
-              offset: 1,
-              color: '#ce4f51'
-            }
+          } else {
+            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(206, 79, 81, 0)' },
+              { offset: 1, color: '#ce4f51' }
             ]);
-        }
-
-      },
-      barBorderRadius: 4,
-    }
-  }]
-};
+          }
+        },
+        barBorderRadius: 4,
+      }
+    }]
+  };
+  return option;
\ No newline at end of file
+}
\ No newline at end of file