updage

src/api/zmOverview/allDomains/index.js

+import request from "@/api/request.js";
+// 全领域
+
+// 全领域统计
+export function getAllDomainCount() {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/AllDomainCount`,
+  })
+}
+
+// 美对华制裁措施数量趋势
+export function getDomainContainmentTrend() {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/DomainContainmentTrend`,
+  })
+}
+
+// 最新动态
+export function getTechnologyGameAnalysis() {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/TechnologyGameAnalysis`,
+  })
+}
+
+// 领域打压遏制排行
+/**
+ * @param {currentPage, pageSize} 
+ */
+export function getDomainContainmentRanking() {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/DomainContainmentRanking`,
+  })
+}
+
+// 领域打压遏制时间线
+/**
+ * @param {currentPage, pageSize} 
+ */
+export function getDomainContainmentTimeline(params) {
+  return request({
+    method: 'GET',
+    url: `/api/rivalryIndexV2/DomainContainmentTimeline`,
+    params
+  })
+}
+

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

@@ -3,23 +3,33 @@
 <template>
 	<div class="content-wrapper">
 		<div class="btn-wrapper">
-			<div class="btn-box">
-				<div v-for="(value, index) in buttonsData" class="btn-item" :style="{ background: value.background }">
-					<div
-						:style="{
-							backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${index}.png` + ')'
-						}"
-						class="btn-left-text"
-					>
-						{{ value.text }}
-					</div>
-					<div class="btn-right">
-						{{ value.count + "次" }}
+			<div class="cards-mask">
+				<div class="btn-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
+					<div class="btn-item-outer" v-for="(item, indexx) in buttonsData" :key="indexx">
+						<div
+							v-for="(value, index) in item"
+							:key="index"
+							class="btn-item"
+							:style="{ background: value.background }"
+						>
+							<div
+								:style="{
+									backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${index % 10}.png` + ')'
+								}"
+								class="btn-left-text"
+							>
+								{{ value.text }}
+							</div>
+							<div class="btn-right">
+								{{ value.count + "次" }}
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<img :src="leftBtn" alt="" class="left-btn" />
-			<img :src="rightBtn" alt="" class="right-btn" />
+
+			<img :src="leftBtn" alt="" @click="prev" class="left-btn" />
+			<img :src="rightBtn" alt="" @click="next" class="right-btn" />
 		</div>
 		<div class="main-charts">
 			<div class="charts-title">
@@ -198,6 +208,14 @@ import icon3 from "./icon/icon-3.png";
 import icon4 from "./icon/icon-4.png";
 import defaultImg from "../../../../assets/images/default-icon2.png";
 
+import {
+	getAllDomainCount,
+	getDomainContainmentTrend,
+	getTechnologyGameAnalysis,
+	getDomainContainmentRanking,
+	getDomainContainmentTimeline
+} from "@/api/zmOverview/allDomains";
+
 const select1 = ref("");
 const rankType = ref("institution");
 const selectedField = ref("");
@@ -422,7 +440,10 @@ const fieldOptions = ref([
 	{ label: "人工智能", value: "人工智能" },
 	{ label: "量子科技", value: "量子科技" }
 ]);
-const buttonsData = [
+
+// 全领域统计
+const buttonsData = ref([]);
+const bgList = [
 	{
 		text: "集成电路",
 		count: 101,
@@ -474,6 +495,28 @@ const buttonsData = [
 		background: "linear-gradient(180.00deg, rgba(153, 204, 255, 1),rgba(153, 204, 255, 0.5) 100%)"
 	}
 ];
+const handleGetAllDomainCount = async () => {
+	try {
+		const res = await getAllDomainCount();
+		console.log("全领域统计", res);
+		if (res.code === 200 && res.data) {
+			buttonsData.value = res.data.map((item, index) => {
+				return {
+					text: item.countName,
+					count: item.countNum,
+					background: bgList[index % 10].background
+				};
+			});
+			const chunkSize = 2;
+			buttonsData.value = Array.from({ length: Math.ceil(buttonsData.value.length / chunkSize) }, (_, i) =>
+				buttonsData.value.slice(i * chunkSize, i * chunkSize + chunkSize)
+			);
+
+			console.log("buttonsData", buttonsData.value);
+		}
+	} catch (error) {}
+};
+
 const box5Data = ref({
 	title: [
 		"2024-12",
@@ -657,9 +700,24 @@ const getProgressWidth = count => {
 	return (count / maxCount) * 100 + "%";
 };
 
+const currentIndex = ref(0);
+const next = () => {
+	if (currentIndex.value < buttonsData.value.length - 5) {
+		currentIndex.value++;
+	}
+};
+
+const prev = () => {
+	if (currentIndex.value > 0) {
+		currentIndex.value--;
+	}
+};
+
 onMounted(() => {
 	let Chart = getMultiLineChart(box5Data.value);
 	setChart(Chart, "chartRef");
+
+	handleGetAllDomainCount();
 });
 </script>
 
@@ -674,10 +732,17 @@ onMounted(() => {
 	width: 1601px;
 }
 
+.cards-mask {
+	width: 100%;
+	overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
+}
+
 .btn-box {
 	margin-top: 16px;
 	width: 100%;
+	width: max-content;
 	height: 176px;
+	overflow: hidden;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -685,6 +750,7 @@ onMounted(() => {
 	align-items: stretch;
 	gap: 16px;
 	padding: 0;
+	transition: transform 0.5s ease; // 平滑过渡动画
 }
 
 .left-btn {
@@ -719,6 +785,7 @@ onMounted(() => {
 	align-items: center;
 	justify-content: space-between;
 	padding: 0 16px;
+	margin-bottom: 10px;
 	.btn-left-text {
 		width: fit-content;
 		min-width: 60px;
@@ -879,7 +946,7 @@ onMounted(() => {
 				font-size: 14px;
 				font-weight: 400;
 				font-family: "Microsoft YaHei";
-				border: 1px solid transparent; 
+				border: 1px solid transparent;
 				&.tag-blue {
 					color: rgba(9, 88, 217, 1);
 					background: rgba(230, 244, 255, 1);