合并分支 'yp-dev' 到 'master'

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/components/buttonList/buttonList.vue

 <template>
 	<div class="buttonList" :style="{ gap: gap + 'px' }">
-		<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
+		<Button
+			class="button"
+			@click="setActiveIndex(item)"
+			:is-active="isActive(item)"
+			:disabled="disabled || item.disabled"
+			v-for="item in list"
+			:key="item.id"
+		>
 			<slot name="item" :item="item">
 				{{ item.text }}
 			</slot>
@@ -29,6 +36,10 @@ const props = defineProps({
 		default: function () {
 			return [];
 		}
+	},
+	disabled: {
+		type: Boolean,
+		default: false
 	}
 });
 const emit = defineEmits(["click"]);
@@ -40,6 +51,9 @@ const isActive = item => {
 	}
 };
 function setActiveIndex(item) {
+	if (props.disabled || item.disabled) {
+		return;
+	}
 	if (!props.multiple) {
 		if (props.activeId === item.id) {
 			return;
@@ -63,5 +77,12 @@ function setActiveIndex(item) {
 	gap: 8px;
 	overflow-x: auto;
 	flex-wrap: wrap;
+
+	.button {
+		&.is-disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 }
 </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

@@ -80,7 +80,7 @@
 					</div>
 				</div>
 				<div class="news-content">
-					<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
+					<div v-for="(value, idx) in newsList" :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,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="pageSize"
+					: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();
 
@@ -386,27 +403,56 @@ const selectedFieldTimeline = ref("");
 const timelineContainerWidth = 1700;
 
 // 美政府部门打压遏制最新动态
+const allNewsList = ref([]);
 const newsList = ref([]);
 const newsCurrentPage = ref(1);
-const newsPageSize = ref(5); // 每页显示 5 条
+const pageSize = ref(5); // 每页显示 5 条
+
+// 总页数
+const totalPages = computed(() => {
+	return Math.ceil(newsList.value.length / pageSize.value) || 1;
+});
 
 // 分页后的新闻列表
 const paginatedNewsList = computed(() => {
-	const start = (newsCurrentPage.value - 1) * newsPageSize.value;
-	const end = start + newsPageSize.value;
+	const start = (newsCurrentPage.value - 1) * pageSize.value;
+	const end = start + pageSize.value;
 	return newsList.value.slice(start, end);
 });
 
+const updateNewsListByPage = () => {
+	const start = (newsCurrentPage.value - 1) * pageSize.value;
+	const end = start + pageSize.value;
+	newsList.value = allNewsList.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 {
-		const res = await getUSGovernmentLatestDynamic();
+		const params = {
+			orgId: !!deptValueForLatest.value ? deptValueForLatest.value : null,
+			pageSize: 50,
+			currentPage: newsCurrentPage.value
+		};
+		const res = await getUSGovernmentLatestDynamic(params);
 		if (res.code === 200 && res.data) {
 			// 将接口数据转换为 newsList 需要的格式
-			newsList.value = res.data.map(item => {
+			allNewsList.value = res.data.content.map(item => {
 				const dateObj = new Date(item.time);
 				const formattedDate = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
 
@@ -419,6 +465,7 @@ const getUSGovernmentLatestDynamicData = async () => {
 					content: item.content || item.title // 如果 content 为空，使用 title 填充
 				};
 			});
+			updateNewsListByPage();
 		}
 	} catch (error) {
 		console.error("获取美政府部门打压遏制最新动态失败:", error);
@@ -1390,59 +1437,103 @@ 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="pageSize"
+					: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="pageSize"
+					: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: 100,
+		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) * pageSize.value;
+	const end = start + pageSize.value;
+	dynamicList.value = allDynamicData.value.slice(start, end);
+};
+
+const updateRankListByPage = () => {
+	const start = (rankCurrentPage.value - 1) * pageSize.value;
+	const end = start + pageSize.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 pageSize = 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;
 							}

src/views/ZMOverView/components/gameProfile/index.vue

@@ -2,26 +2,45 @@
 <template>
 	<div class="content-wrapper">
 		<div class="card-box">
+			<div class="card-header">
 				<div class="card-title">
 					<img class="icon" src="../../assets/icons/title-icon1.png" />
 					<img class="text" src="../../assets/icons/title-text1.svg" />
 				</div>
-			<div style="display: flex; height: 650px; width: 100%;padding-top: 24px;">
-				<div style="width: 50%">
-					<div style="
-							display: flex;
-							justify-content: space-between;
-							margin-right: 50px;
-							line-height: 32px;
-							align-items: center;
-						">
-						<div style="display: flex; margin-left: 50px">
+				<div style="display: flex; margin-left: 50px; align-items: center">
 					数据来源:
-							<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
-								v-model="origin" @change="handleGetCompare()">
-								<el-option :value="value.id" :label="value.name" v-for="value,index in originList" :key="index" />
+					<el-select
+						class="select-item"
+						size="default"
+						style="margin-left: 15px; width: 240px; height: 32px"
+						v-model="origin"
+						@change="handleGetCompare()"
+					>
+						<el-option :value="value.id" :label="value.name" v-for="(value, index) in originList" :key="index" />
 					</el-select>
 				</div>
+			</div>
+			<div style="display: flex; height: 650px; width: 100%; padding-top: 12px">
+				<div style="width: 50%">
+					<div class="content-chart-header">
+						<button-list :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></button-list>
+						<!-- <div style="display: flex; margin-left: 50px">
+							数据来源:
+							<el-select
+								class="select-item"
+								size="default"
+								style="margin-left: 15px; width: 240px; height: 32px"
+								v-model="origin"
+								@change="handleGetCompare()"
+							>
+								<el-option
+									:value="value.id"
+									:label="value.name"
+									v-for="(value, index) in originList"
+									:key="index"
+								/>
+							</el-select>
+						</div> -->
 						<div style="display: flex">
 							<div class="china-icon"></div>
 							<div class="text" style="margin-right: 18px">中国</div>
@@ -33,25 +52,38 @@
 					<div style="width: 100%; height: 620px; padding-top: 24px" id="char"></div>
 				</div>
 				<div style="width: 778px; height: 620px; overflow: auto">
-					<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="targetCode" border
-						:tree-props="{ children: 'children' }" default-expand-all :header-cell-style="{ 'border-right': 'none' }"
-						:cell-style="{ 'border-right': 'none' }" height="600">
+					<el-table
+						:data="tableData"
+						style="width: 100%; margin-bottom: 20px"
+						row-key="targetCode"
+						border
+						:tree-props="{ children: 'children' }"
+						default-expand-all
+						:header-cell-style="{ 'border-right': 'none' }"
+						:cell-style="{ 'border-right': 'none' }"
+						height="600"
+					>
 						<!-- 自定义展开图标 -->
 
-						<el-table-column prop="targetName" label="指标名称" width="350">
-						</el-table-column>
+						<el-table-column prop="targetName" label="指标名称" width="350"> </el-table-column>
 						<el-table-column prop="usScore" label="美国">
 							<template #default="scope">
 								<div style="display: flex">
-									<div class="progress-text" style="width:90px;">
+									<div class="progress-text" style="width: 90px">
 										<div class="rank" v-show="scope.row.usScore != 0">{{ "No." + scope.row.usRank }}</div>
 										<div class="score" v-show="scope.row.usScore != 0">{{ scope.row.usScore }}</div>
 									</div>
 									<div class="progress-wrapper left">
-										<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="left-progress" :class="{
+										<el-progress
+											:percentage="scope.row.usScore"
+											:stroke-width="20"
+											class="left-progress"
+											:class="{
 												cLead: scope.row.usScore == 0,
 												leftProgress: scope.row.usScore != 0
-										}" :show-text="false" />
+											}"
+											:show-text="false"
+										/>
 									</div>
 								</div>
 							</template>
@@ -60,17 +92,29 @@
 							<template #default="scope">
 								<div style="display: flex">
 									<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
-										<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="right-progress"
-											:class="{ cLead: scope.row.chinaRank < scope.row.usRank && scope.row.chinaScore != 0 }"
-											:show-text="false" />
+										<el-progress
+											:percentage="scope.row.chinaScore"
+											:stroke-width="20"
+											class="right-progress"
+											:class="{
+												cLead: scope.row.chinaRank < scope.row.usRank && scope.row.chinaScore != 0
+											}"
+											:show-text="false"
+										/>
 									</div>
-									<div class="progress-text" style="color: rgba(206, 79, 81, 1);width:90px;">
-										<div class="rank" :class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }"
-											v-show="scope.row.chinaScore != 0">
+									<div class="progress-text" style="color: rgba(206, 79, 81, 1); width: 90px">
+										<div
+											class="rank"
+											:class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }"
+											v-show="scope.row.chinaScore != 0"
+										>
 											{{ "No." + scope.row.chinaRank }}
 										</div>
-										<div class="score" :class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }"
-											v-show="scope.row.chinaScore != 0">
+										<div
+											class="score"
+											:class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }"
+											v-show="scope.row.chinaScore != 0"
+										>
 											{{ scope.row.chinaScore }}
 										</div>
 									</div>
@@ -94,8 +138,10 @@
 						<div class="card-item" v-for="(val, idx) in course" :key="idx">
 							<div class="card-item-top">{{ val.eventStrategy }}</div>
 							<div class="card-item-line"></div>
-							<div class="card-item-main"
-								:class="{ cnBackground: val.eventCountry === '中国', usBackground: val.eventCountry === '美国' }">
+							<div
+								class="card-item-main"
+								:class="{ cnBackground: val.eventCountry === '中国', usBackground: val.eventCountry === '美国' }"
+							>
 								<div class="logo">
 									<img :src="val.eventCountryImg" alt="" />
 								</div>
@@ -125,20 +171,38 @@
 						</div>
 					</div>
 				</div>
-				<img src="@/assets/icons/card-btn-left.png" alt="" class="left-btn" @click="prev"
-					:class="{ disabled: currentIndex === 0 }" />
-				<img src="@/assets/icons/card-btn-right.png" alt="" class="right-btn" @click="next"
-					:class="{ disabled: currentIndex >= course.length - 5 }" />
+				<img
+					src="@/assets/icons/card-btn-left.png"
+					alt=""
+					class="left-btn"
+					@click="prev"
+					:class="{ disabled: currentIndex === 0 }"
+				/>
+				<img
+					src="@/assets/icons/card-btn-right.png"
+					alt=""
+					class="right-btn"
+					@click="next"
+					:class="{ disabled: currentIndex >= course.length - 5 }"
+				/>
 			</div>
 		</div>
 		<div class="btn-box">
-			<div v-for="(value, index) in btnList" :key="index" class="btn-item" @click="handleClickBottomBtn" :style="{
+			<div
+				v-for="(value, index) in btnList"
+				:key="index"
+				class="btn-item"
+				@click="handleClickBottomBtn"
+				:style="{
 					background: value.background
-			}">
+				}"
+			>
 				<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
 				{{ value.text }}
-				<img :src="`./icon/ZM/btn-icon-arrow.png`"
-					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
+				<img
+					:src="`./icon/ZM/btn-icon-arrow.png`"
+					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px"
+				/>
 
 				<!-- <img src="./assets/images/btn-icon-arrow.png"
 					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" /> -->
@@ -153,6 +217,7 @@ import * as echarts from "echarts";
 import { ArrowRight, CaretBottom } from "@element-plus/icons-vue";
 import Timeline from "./Timeline.vue";
 import tableShow from "./tableShow.vue";
+import ButtonList from "@/components/buttonList/buttonList.vue";
 
 import radarChart from "./radarChart3.js";
 import { getCompare, getChartDict, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js";
@@ -174,6 +239,22 @@ import Img7 from "./assets/images/btn-icon-6.png";
 import Img8 from "./assets/images/btn-icon-7.png";
 import { ElMessage } from "element-plus";
 
+const buttonList = ref([
+	{
+		id: 1,
+		text: "趋势变化",
+		disabled: true
+	},
+	{
+		id: 2,
+		text: "指数对比"
+	}
+]);
+const activeButtonId = ref(buttonList.value[1]?.id || 1);
+const setActiveButtonId = id => {
+	activeButtonId.value = id;
+};
+
 const course = ref([
 	{
 		time: "2025-01-15",
@@ -493,9 +574,15 @@ const handleClickBottomBtn = () => {
 		/* 业务系统/模块阴影 */
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		background: rgba(255, 255, 255, 1);
-
+		.card-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding-right: 20px;
+			height: 54px;
+		}
 		.card-title {
-			width: 100%;
+			// width: 100%;
 			height: 48px;
 			display: flex;
 
@@ -514,6 +601,14 @@ const handleClickBottomBtn = () => {
 			}
 		}
 
+		.content-chart-header {
+			display: flex;
+			justify-content: space-between;
+			margin: 0 50px;
+			// line-height: 32px;
+			align-items: center;
+		}
+
 		.card-main {
 			height: 650px;
 			position: relative;