Tcode平台改造升级-态势感知指挥中心页面优化,使用滚动模式会使页面短暂白屏

src/views/Jyh/Situation/index.vue

@@ -18,7 +18,7 @@
 <!--        @click="navigateTo('screen-a')"-->
 <!--      >-->
 <!--        <div class="card-icon">🖥️</div>-->
-<!--        <h3>进入全球开源风险态势感知监控中心</h3>-->
+<!--        <h3>全球开源风险态势感知监控中心</h3>-->
 <!--      </div>-->
 <!--      <div-->
 <!--        class="entrance-card"-->
@@ -26,6 +26,12 @@
 <!--      >-->
 <!--        <div class="card-icon">🖥️</div>-->
 <!--        <h3>进入开源生态与贡献价值全景</h3>-->
+<!--      </div><div-->
+<!--        class="entrance-card"-->
+<!--        @click="navigateTo('screen-b')"-->
+<!--      >-->
+<!--        <div class="card-icon">🖥️</div>-->
+<!--        <h3>进入开源生态与贡献价值全景</h3>-->
 <!--      </div>-->
 <!--    </div>-->
   </div>
@@ -35,24 +41,6 @@
 import { useRouter } from 'vue-router'
 import BigScreen from './indexold.vue'
 
-// 初始化路由
-const router = useRouter()
-
-// 跳转处理函数
-const navigateTo = (screenType) => {
-  switch (screenType) {
-    case 'screen-a':
-      // 替换为大屏A实际路由
-      router.push('/coc/screen-a')
-      break
-    case 'screen-b':
-      // 替换为大屏B实际路由
-      router.push('/coc/screen-b')
-      break
-    default:
-      break
-  }
-}
 </script>
 
 <style scoped>
@@ -86,8 +74,8 @@ const navigateTo = (screenType) => {
 
 /* 视频占位区 */
 .video-placeholder {
-  width: 80%;
-  height: 800px;
+  width: 90%;
+  height: 850px;
   margin: 0 auto 4rem;
   /*border: 2px dashed #475569;*/
   border-radius: 8px;

src/views/Jyh/Situation/indexold.vue

@@ -4,41 +4,50 @@
       class="swiper"
       :modules="modules"
       :slides-per-view="1"
-      :loop="true"
+      :effect="'fade'"
+      :fadeEffect="{ crossFade: true }"
+      :loop="false"
       :autoplay="{ delay: 3000, disableOnInteraction: false }"
-      :speed="800"
+      :speed="3000"
     >
       <swiper-slide class="slide bigscreen3" @click="handleSlideClick('kxky')">
-        <div class="slide-content">
-          <h2>可信开源态势感知中心</h2>
-          <p>携手共建安全新生态</p>
-        </div>
+<!--        <div class="slide-content">-->
+<!--          <h2>可信开源态势感知中心</h2>-->
+<!--          <p>携手共建安全新生态</p>-->
+<!--        </div>-->
+        <iframe src="http://localhost:8080/#/kxky" style="height: 100%;width: 100%" loading="lazy"></iframe>
       </swiper-slide>
       <swiper-slide class="slide bigscreen2" @click="handleSlideClick('page1')">
-        <div class="slide-content">
-          <h2>全球开源风险态势感知监控中心</h2>
-          <p>金银湖实验室与您共同成长</p>
-        </div>
-<!--        <iframe src="http://222.20.126.217:10010/bigScreen/#/security-situation-awareness" style="height: 100%;width: 100%"></iframe>-->
+<!--        <div class="slide-content">-->
+<!--          <h2>全球开源风险态势感知监控中心</h2>-->
+<!--          <p>金银湖实验室与您共同成长</p>-->
+<!--        </div>-->
+        <iframe src="http://localhost:8080/#/security-situation-awareness" style="height: 100%;width: 100%" loading="lazy"></iframe>
       </swiper-slide>
       <swiper-slide class="slide bigscreen1" @click="handleSlideClick('page2')">
-        <div class="slide-content">
-          <h2>开源生态与贡献价值全景</h2>
-          <p>携手共建安全新生态</p>
-        </div>
+<!--        <div class="slide-content">-->
+<!--          <h2>开源生态与贡献价值全景</h2>-->
+<!--          <p>携手共建安全新生态</p>-->
+<!--        </div>-->
+        <iframe src="http://localhost:8080/#/ecosystem-and-contribution" style="height: 100%;width: 100%" loading="lazy"></iframe>
       </swiper-slide>
     </swiper>
   </div>
 </template>
 
 <script setup>
+import { ref,onMounted,onUnmounted } from 'vue';
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Autoplay } from "swiper/modules";
+import { Autoplay, EffectFade } from 'swiper/modules';
 import { useRouter } from 'vue-router';
 import "swiper/css";
 import "swiper/css/autoplay";
+import 'swiper/css/effect-fade'; // 渐变效果样式
 
-const modules = [Autoplay];
+const swiperRef = ref(null); // Swiper实例引用
+let autoplayTimer = null; // 自定义自动轮播定时器
+
+const modules = [Autoplay, EffectFade];
 const router = useRouter();
 
 const handleSlideClick = (pageType) => {
@@ -56,6 +65,56 @@ const handleSlideClick = (pageType) => {
       break;
   }
 };
+
+const iframeSrcs = {
+  kxky: 'http://localhost:8080/#/kxky',
+  page1: 'http://localhost:8080/#/security-situation-awareness',
+  page2: 'http://localhost:8080/#/ecosystem-and-contribution'
+};
+
+
+// 标记iframe是否已加载（用于延迟加载）
+const iframeLoaded = ref({
+  kxky: false, // 初始加载第一个
+  page1: false,
+  page2: false
+});
+
+// 监听slide切换：加载对应iframe
+const onSlideChange = () => {
+  const swiper = swiperRef.value.swiper;
+  const activeIndex = swiper.activeIndex;
+  const keys = Object.keys(iframeLoaded.value);
+  iframeLoaded.value[keys[activeIndex]] = true; // 切换时加载
+};
+
+// 自定义循环轮播（替代Swiper的loop）
+const initCustomLoop = () => {
+  // 清除原有定时器
+  if (autoplayTimer) clearInterval(autoplayTimer);
+  const swiper = swiperRef.value.swiper;
+  const maxIndex = swiper.slides.length - 1;
+  // 3000ms轮播一次，和原autoplay.delay一致
+  autoplayTimer = setInterval(() => {
+    let nextIndex = swiper.activeIndex + 1;
+    if (nextIndex > maxIndex) nextIndex = 0; // 切回第一张
+    swiper.slideTo(nextIndex, 800); // 800ms切换速度，和Swiper的speed一致
+  }, 3000);
+};
+
+onMounted(() => {
+  // 初始加载第一个iframe
+  iframeLoaded.value.kxky = true;
+  // 等待Swiper初始化完成后，启动自定义循环
+  setTimeout(() => {
+    initCustomLoop();
+  }, 100);
+});
+
+onUnmounted(() => {
+  // 组件销毁时清除定时器
+  if (autoplayTimer) clearInterval(autoplayTimer);
+});
 </script>
 
 <style scoped>