api对接

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.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)">
@@ -130,7 +130,7 @@
 				</div> -->
 				<simple-pagination
 					v-model:current-page="newsCurrentPage"
-					:page-size="newsPageSize"
+					:page-size="pageSize"
 					:total="newsList.length"
 					@page-change="handleNewsPageChange"
 				/>
@@ -403,22 +403,29 @@ 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 / newsPageSize.value) || 1;
+	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;
 };
@@ -437,10 +444,15 @@ const handleNextPage = () => {
 
 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()}日`;
 
@@ -453,6 +465,7 @@ const getUSGovernmentLatestDynamicData = async () => {
 					content: item.content || item.title // 如果 content 为空，使用 title 填充
 				};
 			});
+			updateNewsListByPage();
 		}
 	} catch (error) {
 		console.error("获取美政府部门打压遏制最新动态失败:", error);

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

@@ -126,7 +126,7 @@
 				</div>
 				<simple-pagination
 					v-model:current-page="newsCurrentPage"
-					:page-size="newsPageSize"
+					:page-size="pageSize"
 					:total="allDynamicData.length"
 					@page-change="handleNewsPageChange"
 				/>
@@ -185,7 +185,7 @@
 
 				<simple-pagination
 					v-model:current-page="rankCurrentPage"
-					:page-size="newsPageSize"
+					:page-size="pageSize"
 					:total="rankingList.length"
 					@page-change="handleRankPageChange"
 				/>
@@ -451,7 +451,7 @@ const getUSGovernmentLatestDynamicData = async () => {
 	loadingLatestDynamic.value = true;
 	const params = {
 		orgId: !!deptValueForLatest.value ? deptValueForLatest.value : null,
-		pageSize: 50,
+		pageSize: 100,
 		currentPage: newsCurrentPage.value
 	};
 	try {
@@ -481,14 +481,14 @@ const getUSGovernmentLatestDynamicData = async () => {
 
 // 根据当前页码更新动态列表
 const updateDynamicListByPage = () => {
-	const start = (newsCurrentPage.value - 1) * newsPageSize.value;
-	const end = start + newsPageSize.value;
+	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) * newsPageSize.value;
-	const end = start + newsPageSize.value;
+	const start = (rankCurrentPage.value - 1) * pageSize.value;
+	const end = start + pageSize.value;
 	rankingList.value = allRankingList.value.slice(start, end);
 };
 // 点击科技要闻-跳转详情页
@@ -846,7 +846,7 @@ watch(
 const allDynamicData = ref([]);
 const dynamicList = ref([]);
 const newsCurrentPage = ref(1);
-const newsPageSize = ref(5); // 每页显示 5 条
+const pageSize = ref(5); // 每页显示 5 条
 
 const handleNewsPageChange = page => {
 	newsCurrentPage.value = page;

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

@@ -2,26 +2,45 @@
 <template>
 	<div class="content-wrapper">
 		<div class="card-box">
-			<div class="card-title">
-				<img class="icon" src="../../assets/icons/title-icon1.png" />
-				<img class="text" src="../../assets/icons/title-text1.svg" />
+			<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; 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>
+				</div>
 			</div>
-			<div style="display: flex; height: 650px; width: 100%;padding-top: 24px;">
+			<div style="display: flex; height: 650px; width: 100%; padding-top: 12px">
 				<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 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
+								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">
 							<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="{
-											cLead: scope.row.usScore == 0,
-											leftProgress: scope.row.usScore != 0
-										}" :show-text="false" />
+										<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"
+										/>
 									</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="{
-				background: value.background
-			}">
+			<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;