Tcode平台改造升级-态势感知中心页面开发

src/components/Header/index.vue

@@ -389,12 +389,12 @@
           </div>
         </li>
 
-        <li><a href="javascript:;" class="LNK">态势感知中心 <i class="ico-arrow-down"></i></a>
-          <div class="nav-hover">
-            <ul class="hover-child">
-              <li class="child-item"><a href="/awareness/dashboard" class="LNK">实时态势面板</a></li>
-            </ul>
-          </div>
+        <li><router-link to="/Situation" class="LNK">态势感知中心 <i class="ico-arrow-down"></i></router-link>
+<!--          <div class="nav-hover">-->
+<!--            <ul class="hover-child">-->
+<!--              <li class="child-item"><a href="/awareness/dashboard" class="LNK">实时态势面板</a></li>-->
+<!--            </ul>-->
+<!--          </div>-->
         </li>
 
         <li><router-link to="/pricing" class="LNK">定价</router-link></li>

src/router/config/home.ts

@@ -240,7 +240,7 @@ export default [
         }
       },
       {
-        path: 'Insights',
+        path: '/Insights',
         name: 'Insights',
         component: () => import('@/views/Jyh/Insights/index.vue'),
         meta: {
@@ -252,6 +252,19 @@ export default [
           asideMenu: 'drawer' // 左侧菜单抽屉模式
         }
       },
+      {
+        path: '/Situation',
+        name: 'Situation',
+        component: () => import('@/views/Jyh/Situation/index.vue'),
+        meta: {
+          title: '态势感知中心',
+          reportTitle: '态势感知中心',
+          className: 'w-full min-w-full',
+          hiddenFooter: true,
+          hasMobile: true,
+          asideMenu: 'drawer' // 左侧菜单抽屉模式
+        }
+      },
     ]
   },
   {

src/views/Jyh/Situation/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="coc-container">
+    <!-- 标题区域 -->
+    <header class="coc-header">
+      <h1>态势感知指挥中心 (COC)</h1>
+      <p class="coc-desc">连接全球风险数据与开源生态价值的双模态视图</p>
+    </header>
+
+    <!-- 演示视频占位区 -->
+    <div class="video-placeholder">
+      <BigScreen />
+    </div>
+
+    <!-- 双屏入口按钮区 -->
+<!--    <div class="screen-entrance">-->
+<!--      <div-->
+<!--        class="entrance-card"-->
+<!--        @click="navigateTo('screen-a')"-->
+<!--      >-->
+<!--        <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>
+</template>
+
+<script setup>
+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>
+/* 全局容器 */
+.coc-container {
+  min-height: 100vh;
+  background: #0a0f25;
+  color: #fff;
+  padding: 2rem 4rem;
+  box-sizing: border-box;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+/* 标题区域 */
+.coc-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.coc-header h1 {
+  font-size: 2.8rem;
+  margin: 0 0 1rem;
+  color: #38bdf8;
+}
+
+.coc-desc {
+  font-size: 1.2rem;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+/* 视频占位区 */
+.video-placeholder {
+  width: 80%;
+  height: 800px;
+  margin: 0 auto 4rem;
+  /*border: 2px dashed #475569;*/
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.8);
+}
+
+.video-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.video-placeholder p {
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* 双屏入口区 */
+.screen-entrance {
+  display: flex;
+  justify-content: center;
+  gap: 4rem;
+  flex-wrap: wrap;
+}
+
+/* 入口卡片 */
+.entrance-card {
+  width: 350px;
+  height: 200px;
+  background: linear-gradient(135deg, #1e293b, #0f172a);
+  border-radius: 12px;
+  border: 1px solid #38bdf8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
+}
+
+.entrance-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
+  border-color: #60a5fa;
+}
+
+.card-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.entrance-card h3 {
+  font-size: 1.4rem;
+  margin: 0;
+  color: #f8fafc;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .coc-container {
+    padding: 1.5rem 2rem;
+  }
+
+  .coc-header h1 {
+    font-size: 2rem;
+  }
+
+  .video-placeholder {
+    width: 100%;
+    height: 200px;
+  }
+
+  .screen-entrance {
+    gap: 2rem;
+  }
+
+  .entrance-card {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+</style>

src/views/Jyh/Situation/indexold.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="partner-swiper-container">
+    <swiper
+      class="swiper"
+      :modules="modules"
+      :slides-per-view="1"
+      :loop="true"
+      :autoplay="{ delay: 3000, disableOnInteraction: false }"
+      :speed="800"
+    >
+      <swiper-slide class="slide" @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>-->
+      </swiper-slide>
+      <swiper-slide class="slide" @click="handleSlideClick('page2')">
+        <div class="slide-content">
+          <h2>开源生态与贡献价值全景</h2>
+          <p>携手共建安全新生态</p>
+        </div>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+
+<script setup>
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Autoplay } from "swiper/modules";
+import { useRouter } from 'vue-router';
+import "swiper/css";
+import "swiper/css/autoplay";
+
+const modules = [Autoplay];
+const router = useRouter();
+
+const handleSlideClick = (pageType) => {
+  switch(pageType) {
+    case 'page1':
+      window.open('http://222.20.126.217:10010/bigScreen/#/security-situation-awareness');
+      break;
+    case 'page2':
+      window.open('http://222.20.126.217:10010/bigScreen/#/ecosystem-and-contribution');
+      break;
+    default:
+      break;
+  }
+};
+</script>
+
+<style scoped>
+.partner-swiper-container {
+  /*width: 100vw;*/
+  /*height: 100vh;*/
+
+  width: 100%;
+  height: 100%;
+  background: #0f172a;
+  overflow: hidden;
+  position: relative;
+}
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url(@/assets/v3/bigscreen/bigscreen1.png) center/cover no-repeat;
+  cursor: pointer;
+}
+
+.slide:nth-child(2) {
+  background: url(@/assets/v3/bigscreen/bigscreen2.png) center/cover no-repeat;
+}
+
+.slide-content {
+  text-align: center;
+  color: #fff;
+  padding: 2rem;
+}
+
+.slide-content h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.slide-content h2::after {
+  content: "";
+  display: block;
+  width: 5rem;
+  height: 2px;
+  background: #38bdf8;
+  margin: 0.5rem auto 0;
+}
+
+.slide-content p {
+  font-size: 1.2rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+</style>