ZM GOV AREA

src/api/allGovernment.js

@@ -7,13 +7,12 @@ import request from "@/api/request.js";
  */
 export function getAllGovernmentList(params) {
 	return request({
-    method: 'GET',
+		method: "GET",
 		url: `/api/rivalryIndex/governmentSanctionsData`,
 		params
-  })
+	});
 }
 
-
 // 全政府-获取美对华制裁措施数量趋势
 /**
  * @header token
@@ -25,21 +24,22 @@ export function getAllGovernmentList(params) {
  */
 export function getUSChinaSanctionTrend(params) {
 	return request({
-    method: 'GET',
+		method: "GET",
 		url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
 		params
-  })
+	});
 }
 
 // 全政府-美政府部门打压遏制最新动态
 /**
  * @header token
  */
-export function getUSGovernmentLatestDynamic() {
+export function getUSGovernmentLatestDynamic(params) {
 	return request({
-    method: 'GET',
-    url: `/api/rivalryIndex/governmentSanctionsDynamics`
-  })
+		method: "GET",
+		url: `/api/rivalryIndex/governmentSanctionsDynamics`,
+		params
+	});
 }
 
 // 全政府-美政府部门联合制裁排行
@@ -48,12 +48,11 @@ export function getUSGovernmentLatestDynamic() {
  */
 export function getUSGovernmentJointSanctionRank() {
 	return request({
-    method: 'GET',
+		method: "GET",
 		url: `/api/rivalryIndex/governmentJointSanctionsRanking`
-  })
+	});
 }
 
-
 // 全政府-美政府部门对我打压遏制时间线
 /**
  * @header token
@@ -66,23 +65,22 @@ export function getUSGovernmentJointSanctionRank() {
  */
 export function getUSGovernmentSanctionHistory(params) {
 	return request({
-    method: 'GET',
+		method: "GET",
 		url: `/api/rivalryIndex/getSanctionProcess`,
 		params
-  })
+	});
 }
 
-
 // 全政府-获取部门数据
 /**
  * @header token
  */
 export function getDepartmentList(params) {
 	return request({
-    method: 'GET',
+		method: "GET",
 		url: `/api/organization/summaryDepartList`,
 		params
-  })
+	});
 }
 
 // 全政府-获取制裁手段数据
@@ -91,10 +89,10 @@ export function getDepartmentList(params) {
  */
 export function getSanTypeList(params) {
 	return request({
-    method: 'GET',
+		method: "GET",
 		url: `/api/rivalryIndex/sanTypeList`,
 		params
-  })
+	});
 }
 
 // 全政府-获取未来三个月内的打压遏制时间线
@@ -103,8 +101,8 @@ export function getSanTypeList(params) {
  */
 export function getThreeMonthSanctionProcess(params) {
 	return request({
-    method: 'GET',
+		method: "GET",
 		url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
 		params
-  })
+	});
 }

src/components/SimplePagination.vue

+NEW_FILE_CODE
+<template>
+	<div class="simple-pagination">
+		<div class="pagination-wrapper">
+			<el-icon class="pagination-btn" @click="handlePrevPage" :class="{ disabled: currentPage === 1 }">
+				<el-icon :size="16">
+					<ArrowLeft />
+				</el-icon>
+			</el-icon>
+			<div class="pagination-info">
+				<span class="current-page">{{ currentPage }}</span>
+				<span>/</span>
+				<span>{{ totalPages }}</span>
+			</div>
+			<el-icon class="pagination-btn" @click="handleNextPage" :class="{ disabled: currentPage === totalPages }">
+				<el-icon :size="16">
+					<ArrowRight />
+				</el-icon>
+			</el-icon>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+
+const props = defineProps({
+	// 当前页码
+	currentPage: {
+		type: Number,
+		default: 1
+	},
+	// 每页显示条数
+	pageSize: {
+		type: Number,
+		default: 5
+	},
+	// 总记录数
+	total: {
+		type: Number,
+		default: 0
+	}
+});
+
+const emit = defineEmits(["update:currentPage", "page-change"]);
+
+// 计算总页数
+const totalPages = computed(() => {
+	return Math.ceil(props.total / props.pageSize) || 1;
+});
+
+// 处理上一页
+const handlePrevPage = () => {
+	if (props.currentPage > 1) {
+		const newPage = props.currentPage - 1;
+		emit("update:currentPage", newPage);
+		emit("page-change", newPage);
+	}
+};
+
+// 处理下一页
+const handleNextPage = () => {
+	if (props.currentPage < totalPages.value) {
+		const newPage = props.currentPage + 1;
+		emit("update:currentPage", newPage);
+		emit("page-change", newPage);
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.simple-pagination {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 16px 0;
+
+	.pagination-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+
+		.pagination-btn {
+			width: 24px;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: rgba(231, 243, 255, 1);
+			// border: 1px solid #dcdfe6;
+			border: none;
+			border-radius: 4px;
+			color: #055fc2;
+			font-size: 20px;
+			cursor: pointer;
+			transition: all 0.3s;
+
+			&:hover:not(.disabled) {
+				background-color: #f5f7fa;
+				border-color: #c0c4cc;
+			}
+
+			&.disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+				background-color: #f5f7fa;
+				color: #c0c4cc;
+			}
+		}
+
+		.pagination-info {
+			font-size: 14px;
+			color: rgba(5, 95, 194, 1);
+			// min-width: 60px;
+			text-align: center;
+			display: flex;
+			gap: 5px;
+			// letter-spacing: 5px;
+		}
+	}
+}
+</style>

src/views/ZMOverView/components/fourSuppress/components/addDomain/index-back.vue

@@ -80,7 +80,7 @@
 					</div>
 				</div>
 				<div class="news-content">
-					<div v-for="(value, idx) in newsList" :key="idx" class="news-item">
+					<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
 						<div class="news-item-title">
 							<div class="tag-container">
 								<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
@@ -109,6 +109,25 @@
 						</el-tooltip>
 					</div>
 				</div>
+				<div class="news-pagination">
+					<div class="pagination-wrapper">
+						<el-button
+							class="pagination-btn"
+							type="primary"
+							@click="handlePrevPage"
+							:disabled="newsCurrentPage === 1"
+							:icon="ArrowLeft"
+						/>
+						<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
+						<el-button
+							class="pagination-btn"
+							type="primary"
+							@click="handleNextPage"
+							:disabled="newsCurrentPage === totalPages"
+							:icon="ArrowRight"
+						/>
+					</div>
+				</div>
 			</div>
 			<div class="empty-section">
 				<div class="bottom-item">
@@ -296,6 +315,7 @@ import {
 } from "@/api/zmOverview/allDomains";
 import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
 import { ElMessage } from "element-plus";
+import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
 
 const router = useRouter();
 
@@ -377,6 +397,36 @@ const timelineContainerWidth = 1700;
 
 // 美政府部门打压遏制最新动态
 const newsList = ref([]);
+const newsCurrentPage = ref(1);
+const newsPageSize = ref(3); // 每页显示 5 条
+
+// 总页数
+const totalPages = computed(() => {
+	return Math.ceil(newsList.value.length / newsPageSize.value) || 1;
+});
+
+// 分页后的新闻列表
+const paginatedNewsList = computed(() => {
+	const start = (newsCurrentPage.value - 1) * newsPageSize.value;
+	const end = start + newsPageSize.value;
+	return newsList.value.slice(start, end);
+});
+
+const handleNewsPageChange = page => {
+	newsCurrentPage.value = page;
+};
+
+const handlePrevPage = () => {
+	if (newsCurrentPage.value > 1) {
+		newsCurrentPage.value--;
+	}
+};
+
+const handleNextPage = () => {
+	if (newsCurrentPage.value < totalPages.value) {
+		newsCurrentPage.value++;
+	}
+};
 
 const getUSGovernmentLatestDynamicData = async () => {
 	try {
@@ -1359,11 +1409,115 @@ watch(activeDate, () => {
 	.news-section {
 		width: 792px;
 		height: 700px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
 
 		.news-title {
 			padding: 8px;
 		}
 
+		// .news-pagination {
+		// 	display: flex;
+		// 	justify-content: center;
+		// 	align-items: center;
+		// 	padding: 16px 0;
+
+		// 	:deep(.el-pagination) {
+		// 		&.is-background .el-pager li {
+		// 			background-color: #fff;
+		// 			border: 1px solid #dcdfe6;
+		// 			border-radius: 4px;
+		// 			font-size: 14px;
+		// 			min-width: 32px;
+		// 			height: 32px;
+		// 			line-height: 32px;
+		// 			margin: 0 4px;
+
+		// 			&.is-active {
+		// 				background-color: #055fc2;
+		// 				color: #fff;
+		// 				border-color: #055fc2;
+		// 			}
+
+		// 			&:hover {
+		// 				background-color: #f5f7fa;
+		// 			}
+		// 		}
+
+		// 		.btn-prev,
+		// 		.btn-next {
+		// 			background-color: rgba(231, 243, 255, 1);
+		// 			// border: 1px solid #dcdfe6;
+		// 			border: none;
+		// 			border-radius: 4px;
+		// 			font-size: 14px;
+		// 			// min-width: 32px;
+		// 			// height: 32px;
+		// 			line-height: 32px;
+		// 			margin-right: 4px;
+		// 			.el-icon {
+		// 				font-size: 16px;
+		// 				color: #055fc2;
+		// 				font-weight: 800;
+		// 			}
+
+		// 			&:hover:not(.is-disabled) {
+		// 				background-color: #f5f7fa;
+		// 			}
+
+		// 			&.is-disabled {
+		// 				opacity: 0.5;
+		// 				cursor: not-allowed;
+		// 			}
+		// 		}
+		// 	}
+		// }
+
+		.news-pagination {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 16px 0;
+
+			.pagination-wrapper {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+
+				.pagination-btn {
+					padding: 6px;
+					background-color: rgba(231, 243, 255, 1);
+					// border: 1px solid #dcdfe6;
+					border: none;
+					border-radius: 4px;
+					font-size: 14px;
+					color: #606266;
+					cursor: pointer;
+					transition: all 0.3s;
+
+					&:hover:not(:disabled) {
+						background-color: #f5f7fa;
+						// border-color: #c0c4cc;
+					}
+
+					&:disabled {
+						opacity: 0.5;
+						cursor: not-allowed;
+						background-color: #f5f7fa;
+					}
+				}
+
+				.pagination-info {
+					font-size: 14px;
+					color: rgba(5, 95, 194, 1);
+					min-width: 60px;
+					text-align: center;
+					letter-spacing: 4px;
+				}
+			}
+		}
+
 		.tag-container {
 			display: flex;
 			align-items: center;
@@ -1753,11 +1907,12 @@ watch(activeDate, () => {
 .news-content {
 	overflow-y: auto;
 	overflow-x: hidden;
+	margin-bottom: auto;
 }
 .news-item {
 	/* 全政府-动态 (四全-最新动态) */
 	width: 737px;
-	height: 124px;
+	height: 116px;
 	margin: 0 28px;
 	/* 自动布局 */
 	display: flex;
@@ -1825,7 +1980,7 @@ watch(activeDate, () => {
 		letter-spacing: 0px;
 		text-align: left;
 		color: rgba(59, 65, 75, 1);
-		margin-top: 8px;
+		// margin-top: 8px;
 		/* 单行省略 */
 		display: -webkit-box;
 		-webkit-box-orient: vertical;

src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue

@@ -109,16 +109,31 @@
 						</el-tooltip>
 					</div>
 				</div>
-				<div class="news-pagination">
-					<el-pagination
-						layout="prev, pager, next"
-						:total="newsList.length"
-						:page-size="newsPageSize"
-						v-model:current-page="newsCurrentPage"
-						size="small"
-						@current-change="handleNewsPageChange"
+				<!-- <div class="news-pagination">
+					<div class="pagination-wrapper">
+						<el-button
+							class="pagination-btn"
+							type="primary"
+							@click="handlePrevPage"
+							:disabled="newsCurrentPage === 1"
+							:icon="ArrowLeft"
+						/>
+						<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
+						<el-button
+							class="pagination-btn"
+							type="primary"
+							@click="handleNextPage"
+							:disabled="newsCurrentPage === totalPages"
+							:icon="ArrowRight"
 						/>
 					</div>
+				</div> -->
+				<simple-pagination
+					v-model:current-page="newsCurrentPage"
+					:page-size="newsPageSize"
+					:total="newsList.length"
+					@page-change="handleNewsPageChange"
+				/>
 			</div>
 			<div class="empty-section">
 				<div class="bottom-item">
@@ -306,6 +321,8 @@ import {
 } from "@/api/zmOverview/allDomains";
 import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
 import { ElMessage } from "element-plus";
+import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import SimplePagination from "@/components/SimplePagination.vue";
 
 const router = useRouter();
 
@@ -390,6 +407,11 @@ const newsList = ref([]);
 const newsCurrentPage = ref(1);
 const newsPageSize = ref(5); // 每页显示 5 条
 
+// 总页数
+const totalPages = computed(() => {
+	return Math.ceil(newsList.value.length / newsPageSize.value) || 1;
+});
+
 // 分页后的新闻列表
 const paginatedNewsList = computed(() => {
 	const start = (newsCurrentPage.value - 1) * newsPageSize.value;
@@ -401,6 +423,18 @@ const handleNewsPageChange = page => {
 	newsCurrentPage.value = page;
 };
 
+const handlePrevPage = () => {
+	if (newsCurrentPage.value > 1) {
+		newsCurrentPage.value--;
+	}
+};
+
+const handleNextPage = () => {
+	if (newsCurrentPage.value < totalPages.value) {
+		newsCurrentPage.value++;
+	}
+};
+
 const getUSGovernmentLatestDynamicData = async () => {
 	try {
 		const res = await getUSGovernmentLatestDynamic();
@@ -1390,60 +1424,104 @@ watch(activeDate, () => {
 			padding: 8px;
 		}
 
+		// .news-pagination {
+		// 	display: flex;
+		// 	justify-content: center;
+		// 	align-items: center;
+		// 	padding: 16px 0;
+
+		// 	:deep(.el-pagination) {
+		// 		&.is-background .el-pager li {
+		// 			background-color: #fff;
+		// 			border: 1px solid #dcdfe6;
+		// 			border-radius: 4px;
+		// 			font-size: 14px;
+		// 			min-width: 32px;
+		// 			height: 32px;
+		// 			line-height: 32px;
+		// 			margin: 0 4px;
+
+		// 			&.is-active {
+		// 				background-color: #055fc2;
+		// 				color: #fff;
+		// 				border-color: #055fc2;
+		// 			}
+
+		// 			&:hover {
+		// 				background-color: #f5f7fa;
+		// 			}
+		// 		}
+
+		// 		.btn-prev,
+		// 		.btn-next {
+		// 			background-color: rgba(231, 243, 255, 1);
+		// 			// border: 1px solid #dcdfe6;
+		// 			border: none;
+		// 			border-radius: 4px;
+		// 			font-size: 14px;
+		// 			// min-width: 32px;
+		// 			// height: 32px;
+		// 			line-height: 32px;
+		// 			margin-right: 4px;
+		// 			.el-icon {
+		// 				font-size: 16px;
+		// 				color: #055fc2;
+		// 				font-weight: 800;
+		// 			}
+
+		// 			&:hover:not(.is-disabled) {
+		// 				background-color: #f5f7fa;
+		// 			}
+
+		// 			&.is-disabled {
+		// 				opacity: 0.5;
+		// 				cursor: not-allowed;
+		// 			}
+		// 		}
+		// 	}
+		// }
+
 		.news-pagination {
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			padding: 16px 0;
 
-			:deep(.el-pagination) {
-				&.is-background .el-pager li {
-					background-color: #fff;
-					border: 1px solid #dcdfe6;
-					border-radius: 4px;
-					font-size: 14px;
-					min-width: 32px;
-					height: 32px;
-					line-height: 32px;
-					margin: 0 4px;
-
-					&.is-active {
-						background-color: #055fc2;
-						color: #fff;
-						border-color: #055fc2;
-					}
-
-					&:hover {
-						background-color: #f5f7fa;
-					}
-				}
+			.pagination-wrapper {
+				display: flex;
+				align-items: center;
+				gap: 12px;
 
-				.btn-prev,
-				.btn-next {
+				.pagination-btn {
+					padding: 6px;
 					background-color: rgba(231, 243, 255, 1);
 					// border: 1px solid #dcdfe6;
 					border: none;
 					border-radius: 4px;
 					font-size: 14px;
-					// min-width: 32px;
-					// height: 32px;
-					line-height: 32px;
-					margin-right: 4px;
-					.el-icon {
-						font-size: 16px;
-						color: #055fc2;
-						font-weight: 800;
-					}
+					color: #606266;
+					cursor: pointer;
+					transition: all 0.3s;
 
-					&:hover:not(.is-disabled) {
+					&:hover:not(:disabled) {
 						background-color: #f5f7fa;
+						// border-color: #c0c4cc;
 					}
 
-					&.is-disabled {
+					&:disabled {
 						opacity: 0.5;
 						cursor: not-allowed;
+						background-color: #f5f7fa;
 					}
 				}
+
+				.pagination-info {
+					font-size: 14px;
+					color: rgba(5, 95, 194, 1);
+					min-width: 60px;
+					text-align: center;
+					letter-spacing: 4px;
+				}
 			}
 		}
 

src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue

@@ -69,15 +69,34 @@
 				</div>
 			</div>
 			<div class="charts-content">
-				<div ref="chartRef" class="chart-container"></div>
+				<!-- <div ref="chartRef" class="chart-container"></div> -->
+				<Echarts :option="usChinaSanctionTrendOptions" height="100%"></Echarts>
 			</div>
 		</div>
 		<div class="main-text">
 			<div class="text-item">
+				<div class="title">
 					<div class="text-item-title">
 						<img :src="icon2" alt="" />
 						<span>美政府部门打压遏制最新动态</span>
 					</div>
+					<div class="title-right">
+						<el-select
+							v-model="deptValueForLatest"
+							placeholder="全部部门"
+							class="custom-select"
+							@change="handleDeptValueChange"
+						>
+							<el-option label="全部部门" value="" />
+							<el-option
+								v-for="item in departmentList"
+								:key="item.departId"
+								:label="item.departName"
+								:value="item.departId"
+							/>
+						</el-select>
+					</div>
+				</div>
 				<div class="text-item-content">
 					<div v-for="(item, index) in dynamicList" :key="index" class="dynamic-item">
 						<img :src="item.logoUrl ? item.logoUrl : defaultImg" alt="" class="item-icon" />
@@ -105,6 +124,12 @@
 						</div>
 					</div>
 				</div>
+				<simple-pagination
+					v-model:current-page="newsCurrentPage"
+					:page-size="newsPageSize"
+					:total="allDynamicData.length"
+					@page-change="handleNewsPageChange"
+				/>
 			</div>
 			<div class="text-item">
 				<div class="text-item-title">
@@ -130,7 +155,8 @@
 								<span class="joint-count">{{ rank.count }}次联合制裁</span>
 							</div>
 						</div>
-						<div class="ranking-body">
+						<!-- 暂时不展示 -->
+						<div class="ranking-body" v-if="false">
 							<div v-for="(item, iIndex) in rank.items" :key="iIndex" class="ranking-item">
 								<div class="item-left">
 									<span class="item-type" :class="item.type === '法案' ? 'type-bill' : 'type-order'">{{
@@ -156,6 +182,13 @@
 						</div>
 					</div>
 				</div>
+
+				<simple-pagination
+					v-model:current-page="rankCurrentPage"
+					:page-size="newsPageSize"
+					:total="rankingList.length"
+					@page-change="handleRankPageChange"
+				/>
 			</div>
 		</div>
 		<div class="main-bottom">
@@ -242,6 +275,8 @@
 <script setup>
 import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
+import Echarts from "@/components/Chart/index.vue";
+import SimplePagination from "@/components/SimplePagination.vue";
 import * as echarts from "echarts";
 import defaultIcon from "../../assets/defaultIcon.png";
 import leftBtn from "../../assets/left-btn.png";
@@ -338,37 +373,37 @@ const getUSGovernmentSanctionHistoryData = async () => {
 			});
 
 			//统计完成后生成新的数组
-			let fArr = []
-			rawList.forEach((item)=>{
-				fArr.push(item.endDate)
-			})
+			let fArr = [];
+			rawList.forEach(item => {
+				fArr.push(item.endDate);
+			});
 
 			let timeLine = Object.values(grouped);
 			//重新遍历timeLine，根据日期数组额外增加数据
-			timeLine.forEach((item) => {
+			timeLine.forEach(item => {
 				// 根据日期数组构建空数据
-				const data = []
+				const data = [];
 				for (let i = 0; i < fArr.length; i++) {
 					const option = {
 						date: fArr[i],
 						noData: true
+					};
+					data.push(option);
 				}
-					data.push(option)
-				}
-				item.events.forEach((ele) => {
+				item.events.forEach(ele => {
 					for (let m = 0; m < data.length; m++) {
-						if(ele.time == data[m].date && data[m].noData){
-							data[m] = ele
-							data[m].noData = false
-							break
+						if (ele.time == data[m].date && data[m].noData) {
+							data[m] = ele;
+							data[m].noData = false;
+							break;
 						}
 					}
-				})
-				item.events = data
-			})
+				});
+				item.events = data;
+			});
 
 			// timelineList.value = Object.values(grouped);
-			timelineList.value = timeLine
+			timelineList.value = timeLine;
 			console.log("timelineList", timelineList.value);
 
 			initSlider();
@@ -387,7 +422,7 @@ const getUSGovernmentJointSanctionRankData = async () => {
 	try {
 		const res = await getUSGovernmentJointSanctionRank();
 		if (res.code === 200 && res.data) {
-			rankingList.value = res.data.map(item => ({
+			allRankingList.value = res.data.map(item => ({
 				depts: (item.organizations || item.org || []).map(o => ({
 					name: o.orgName,
 					icon: o.logoUrl ? o.logoUrl.trim() : ""
@@ -400,6 +435,8 @@ const getUSGovernmentJointSanctionRankData = async () => {
 					date: s.postDate ? s.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : ""
 				}))
 			}));
+
+			updateRankListByPage();
 		}
 	} catch (error) {
 		console.error("获取美政府部门联合制裁排行失败:", error);
@@ -412,12 +449,17 @@ const getUSGovernmentJointSanctionRankData = async () => {
 const loadingLatestDynamic = ref(false);
 const getUSGovernmentLatestDynamicData = async () => {
 	loadingLatestDynamic.value = true;
+	const params = {
+		orgId: !!deptValueForLatest.value ? deptValueForLatest.value : null,
+		pageSize: 50,
+		currentPage: newsCurrentPage.value
+	};
 	try {
-		const res = await getUSGovernmentLatestDynamic();
+		const res = await getUSGovernmentLatestDynamic(params);
 		if (res.code === 200 && res.data) {
 			console.log("美政府部门打压遏制最新动态", res);
 
-			dynamicList.value = res.data.map(item => ({
+			allDynamicData.value = res.data.content.map(item => ({
 				title: item.orgName ? `${item.orgName}：${item.title}` : item.title,
 				date: item.time ? item.time.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
 				type: item.sanTypeName || "",
@@ -427,6 +469,8 @@ const getUSGovernmentLatestDynamicData = async () => {
 				orgName: item.orgName || "",
 				logoUrl: item.logoUrl
 			}));
+
+			updateDynamicListByPage();
 		}
 	} catch (error) {
 		console.error("获取美政府部门打压遏制最新动态失败:", error);
@@ -434,6 +478,19 @@ const getUSGovernmentLatestDynamicData = async () => {
 		loadingLatestDynamic.value = false;
 	}
 };
+
+// 根据当前页码更新动态列表
+const updateDynamicListByPage = () => {
+	const start = (newsCurrentPage.value - 1) * newsPageSize.value;
+	const end = start + newsPageSize.value;
+	dynamicList.value = allDynamicData.value.slice(start, end);
+};
+
+const updateRankListByPage = () => {
+	const start = (rankCurrentPage.value - 1) * newsPageSize.value;
+	const end = start + newsPageSize.value;
+	rankingList.value = allRankingList.value.slice(start, end);
+};
 // 点击科技要闻-跳转详情页
 const handleNewsClick = item => {
 	if (!item || !item.id) return;
@@ -463,6 +520,8 @@ const handleJointRankItemClick = item => {
 // 全政府-获取美对华制裁措施数量趋势
 const usChinaSanctionTrend = ref([]);
 const loadingTrend = ref(false);
+const usChinaSanctionTrendOptions = ref({});
+
 const getUSChinaSanctionTrendData = async () => {
 	loadingTrend.value = true;
 	try {
@@ -507,7 +566,8 @@ const getUSChinaSanctionTrendData = async () => {
 				xAxisData = Object.keys(monthlyMap).sort();
 				seriesData = xAxisData.map(key => monthlyMap[key]);
 			}
-			initChart(xAxisData, seriesData);
+			// initChart(xAxisData, seriesData);
+			usChinaSanctionTrendOptions.value = getChartOption(xAxisData, seriesData);
 		}
 	} catch (error) {
 		console.error("获取美对华制裁措施数量趋势失败:", error);
@@ -696,6 +756,8 @@ const fieldValue = ref("");
 const deptValue = ref("");
 const methodValue = ref("");
 
+const deptValueForLatest = ref("");
+
 const measureType = ref("history");
 const selectedField = ref("");
 const fieldOptions = ref([
@@ -781,7 +843,29 @@ watch(
 	}
 );
 
+const allDynamicData = ref([]);
 const dynamicList = ref([]);
+const newsCurrentPage = ref(1);
+const newsPageSize = ref(5); // 每页显示 5 条
+
+const handleNewsPageChange = page => {
+	newsCurrentPage.value = page;
+	updateDynamicListByPage();
+	// getUSGovernmentLatestDynamicData();
+};
+
+const handleDeptValueChange = dep => {
+	console.log("最新动态部门选择改变", dep);
+	deptValueForLatest.value = !!dep ? dep : null;
+	newsCurrentPage.value = 1;
+	getUSGovernmentLatestDynamicData();
+};
+
+const rankCurrentPage = ref(1);
+const handleRankPageChange = page => {
+	rankCurrentPage.value = page;
+	updateRankListByPage();
+};
 
 const getColorName = tag => {
 	const tagColorMap = {
@@ -838,6 +922,7 @@ const filteredTimelineList = computed(() => {
 const timelineList = ref([]);
 
 const rankingList = ref([]);
+const allRankingList = ref([]);
 
 const chartRef = ref(null);
 let myChart = null;
@@ -963,9 +1048,9 @@ const initSlider = () => {
 	});
 };
 
-const initChart = (xAxisData = [], seriesData = []) => {
-	if (!chartRef.value) return;
-	myChart = echarts.init(chartRef.value);
+const getChartOption = (xAxisData = [], seriesData = []) => {
+	// if (!chartRef.value) return;
+	// myChart = echarts.init(chartRef.value);
 	const option = {
 		tooltip: {
 			trigger: "axis",
@@ -1054,7 +1139,8 @@ const initChart = (xAxisData = [], seriesData = []) => {
 			}
 		]
 	};
-	myChart.setOption(option);
+	return option;
+	// myChart.setOption(option);
 };
 
 const activeSanctionId = ref(null);
@@ -1084,7 +1170,7 @@ watch([() => measureType.value, () => selectedField.value], () => {
 onMounted(() => {
 	getDepartmentListData();
 	handleGetSanList();
-	initChart();
+	// initChart();
 	initSlider();
 	getGovernmentList();
 	getUSChinaSanctionTrendData();
@@ -1226,14 +1312,20 @@ const prev = () => {
 					align-items: center;
 					height: 30px;
 
-					.stat-label,
-					.stat-value {
+					.stat-label {
 						font-family: "Microsoft YaHei";
 						font-size: 16px;
 						font-weight: 400;
 						line-height: 30px;
 						color: rgba(255, 255, 255, 0.8);
 					}
+					.stat-value {
+						font-family: "YouSheBiaoTiHei";
+						font-size: 20px;
+						font-weight: 400;
+						line-height: 30px;
+						color: rgba(255, 255, 255, 0.8);
+					}
 				}
 			}
 		}
@@ -1287,7 +1379,7 @@ const prev = () => {
 
 		.charts-title {
 			width: 100%;
-			height: 48px;
+			height: 54px;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
@@ -1390,6 +1482,19 @@ const prev = () => {
 			border: 1px solid rgba(255, 255, 255, 1);
 			border-radius: 10px;
 			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			.title {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				position: relative;
+				.title-right {
+					position: absolute;
+					right: 10px;
+					width: 140px;
+				}
+			}
 			.text-item-title {
 				width: 100%;
 				height: 48px;
@@ -1418,9 +1523,10 @@ const prev = () => {
 			.text-item-content {
 				width: 100%;
 				height: 652px;
-				padding: 6px 27px 22px 27px;
+				padding: 10px 27px 14px 27px;
 				box-sizing: border-box;
 				overflow-y: auto;
+				margin-bottom: auto;
 
 				.dynamic-item {
 					width: 100%;
@@ -1478,7 +1584,7 @@ const prev = () => {
 							font-family: "Microsoft YaHei";
 							font-size: 16px;
 							font-weight: 400;
-							line-height: 30px;
+							line-height: 24px;
 							color: rgb(95, 101, 108);
 							margin-top: 0; // 紧贴标题行
 							width: 100%;
@@ -1553,8 +1659,9 @@ const prev = () => {
 
 				.ranking-card {
 					width: 100%;
-					border-radius: 10px;
-					border: 1px solid rgb(234, 236, 238);
+					// border-radius: 10px;
+					// border: 1px solid rgb(234, 236, 238);
+					border-bottom: 1px solid rgb(234, 236, 238);
 					padding: 12px 24px;
 					margin-bottom: 12px;
 					box-sizing: border-box;
@@ -1567,7 +1674,7 @@ const prev = () => {
 						display: flex;
 						justify-content: space-between;
 						align-items: center;
-						margin-bottom: 12px;
+						// margin-bottom: 12px;
 
 						.header-left {
 							display: flex;
@@ -1685,7 +1792,7 @@ const prev = () => {
 		}
 
 		.text-item:last-child {
-			padding-bottom: 22px;
+			// padding-bottom: 22px;
 		}
 	}
 
@@ -2055,7 +2162,7 @@ const prev = () => {
 									}
 								}
 							}
-							.event-no-card{
+							.event-no-card {
 								width: 240px;
 								height: 130px;
 							}