制裁轮播

src/views/exportControl/v2.0EntityList/components/deepMining/index.vue

@@ -32,14 +32,14 @@
 						<div class="list-header">
 							<div class="count">共{{ sanctionList.length }}次制裁</div>
 							<!-- 暂时隐藏，说这里可能是轮播图的效果 -->
-							<!-- <div class="pagination">
-							<div class="page-btn prev">
-								<el-icon><ArrowLeft /></el-icon>
-							</div>
-							<div class="page-btn next">
-								<el-icon><ArrowRight /></el-icon>
+							<div class="pagination">
+								<div class="page-btn prev" @click="handlePrevClick">
+									<el-icon><ArrowLeft /></el-icon>
+								</div>
+								<div class="page-btn next" @click="handleNextClick">
+									<el-icon><ArrowRight /></el-icon>
+								</div>
 							</div>
-						</div> -->
 						</div>
 						<div class="list-content" v-loading="loading">
 							<div
@@ -243,7 +243,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, onUnmounted } from "vue";
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
 import defaultTitle from "../../assets/default-icon2.png";
 import {
@@ -365,15 +365,17 @@ const getDeepMiningSelectData = async () => {
 	try {
 		const res = await getDeepMiningSelect(params);
 		if (res.code === 200 && res.data && res.data.content) {
-			sanctionList.value = res.data.content.map(item => ({
-				id: item.id,
-				date: item.postDate,
-				title: item.name,
-				count: item.cnEntityCount,
-				unit: "家中国实体", // 接口未返回单位，暂时固定
-				summary: item.summary, // 保留额外信息备用
-				techDomainList: item.techDomainList // 保留额外信息备用
-			}));
+			sanctionList.value = res.data.content
+				.map(item => ({
+					id: item.id,
+					date: item.postDate,
+					title: item.name,
+					count: item.cnEntityCount,
+					unit: "家中国实体", // 接口未返回单位，暂时固定
+					summary: item.summary, // 保留额外信息备用
+					techDomainList: item.techDomainList // 保留额外信息备用
+				}))
+				.reverse();
 
 			// 默认选中第一条
 			if (sanctionList.value.length > 0) {
@@ -396,35 +398,74 @@ const handleDateChange = () => {
 	currentPage.value = 1;
 	getDeepMiningSelectData();
 };
+// ✅ 自动轮播定时器
+const autoPlayTimer = ref(null);
+
+// ✅ 启动自动轮播
+const startAutoPlay = () => {
+	stopAutoPlay();
+	if (sanctionList.value.length > 1) {
+		autoPlayTimer.value = setInterval(() => {
+			handleNextClickAuto();
+		}, 10000);
+	}
+};
 
-// 翻页
-const handlePageChange = page => {
-	if (page < 1 || page > totalPage.value) return;
-	currentPage.value = page;
-	getDeepMiningSelectData();
+// ✅ 停止自动轮播
+const stopAutoPlay = () => {
+	if (autoPlayTimer.value) {
+		clearInterval(autoPlayTimer.value);
+		autoPlayTimer.value = null;
+	}
+};
+
+// ✅ 自动下一个（支持循环）
+const handleNextClickAuto = () => {
+	const currentIndex = sanctionList.value.findIndex(item => item.id === currentSanctionId.value);
+	let nextItem;
+
+	if (currentIndex < sanctionList.value.length - 1) {
+		nextItem = sanctionList.value[currentIndex + 1];
+	} else {
+		nextItem = sanctionList.value[0]; // 循环到第一个
+	}
+
+	if (nextItem) {
+		handleSanctionSelect(nextItem.id);
+	}
+};
+
+// ✅ 修改现有函数，添加重置定时器
+const handlePrevClick = () => {
+	const currentIndex = sanctionList.value.findIndex(item => item.id === currentSanctionId.value);
+	if (currentIndex > 0) {
+		const prevItem = sanctionList.value[currentIndex - 1];
+		handleSanctionSelect(prevItem.id);
+		startAutoPlay();
+	}
+};
+
+const handleNextClick = () => {
+	const currentIndex = sanctionList.value.findIndex(item => item.id === currentSanctionId.value);
+	if (currentIndex < sanctionList.value.length - 1) {
+		const nextItem = sanctionList.value[currentIndex + 1];
+		handleSanctionSelect(nextItem.id);
+		startAutoPlay();
+	}
 };
 
-// 列表项点击事件
 const handleSanctionSelect = id => {
 	currentSanctionId.value = id;
 	getFishboneData();
 	getCnEntityOnChainData();
+	startAutoPlay();
 };
 
 const activeTab = ref(["制裁时序分析"]);
 const activeIndex = ref(0);
 
 const dateRange = ref(["2025-01-01", "2025-12-31"]);
-const sanctionList = ref([
-	{ id: 1, date: "2025年2月8日", title: "实体清单更新", count: 2, unit: "家中国实体" },
-	{ id: 2, date: "2025年4月10日", title: "实体清单更新", count: 5, unit: "家中国实体" },
-	{ id: 3, date: "2025年6月29日", title: "实体清单更新", count: 6, unit: "家中国实体" },
-	{ id: 4, date: "2025年8月12日", title: "实体清单更新", count: 24, unit: "家中国实体" },
-	{ id: 5, date: "2025年8月19日", title: "实体清单更新", count: 11, unit: "家中国实体" },
-	{ id: 6, date: "2025年9月12日", title: "实体清单更新", count: 3, unit: "家中国实体" },
-	{ id: 7, date: "2025年9月26日", title: "实体清单更新", count: 6, unit: "家中国实体" },
-	{ id: 8, date: "2025年10月12日", title: "实体清单更新", count: 18, unit: "家中国实体" }
-]);
+const sanctionList = ref([]);
 const currentSanctionId = ref(5);
 
 const cnEntityOnChainData = ref({});
@@ -479,6 +520,14 @@ onMounted(() => {
 	getDeepMiningSelectData();
 	// 获取产业链信息
 	getIndustryList();
+	nextTick(() => {
+		startAutoPlay();
+	});
+});
+
+// 组件卸载时停止自动轮播
+onUnmounted(() => {
+	stopAutoPlay();
 });
 </script>