态势感知平台-全球开源风险态势感知监控中心数据概览接口对接

2026-01-26 15:46:01 +08:00
parent 666ca8c5a7
commit 25f2c6d50a
5 changed files with 204 additions and 160 deletions
--- a/.env.development
+++ b/.env.development
@@ -5,10 +5,10 @@ VITE_ENV = 'development'
 VITE_HOST = 'https://test.gitcode.net'

 # 接口地址
-VITE_API_HOST = '/gateway/official'
+VITE_API_HOST = '/'

 # devPress接口地址
-VITE_DEV_API_HOST = '/gateway/official'
+VITE_DEV_API_HOST = '/'

 # devPress地址
 VITE_DEV_HOST = 'https://test.gitcode.net'
--- a/src/router/interceptor.ts
+++ b/src/router/interceptor.ts
@@ -52,7 +52,7 @@ export const injectRouter = (router) => {
    // 判断命名空间类型
    const globalStore = useGlobalInfoStore();
    globalStore.setNamespaceType(-1); // 重置namespaceType，防止非组织路由请求组织信息
-    globalStore.setLanguageList();
+    // globalStore.setLanguageList();
    if (to.meta.pageType === 'userOrOrg') {
      const { namespace } = to.params;
      const params = {
--- a/src/views/Jyh/security/StatsGlass.vue
+++ b/src/views/Jyh/security/StatsGlass.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="index-module__NV_5cW__titleSection">
+    <div class="stats-glass-bar">
+      <div class="stat-node">
+        <span class="stat-value">{{ stats.enterprise.toLocaleString() }}+</span>
+        <span class="stat-desc">全球开源企业</span>
+      </div>
+
+      <div class="stat-separator"></div>
+
+      <div class="stat-node">
+        <span class="stat-value">{{ stats.university.toLocaleString() }}+</span>
+        <span class="stat-desc">全球高校参与</span>
+      </div>
+
+      <div class="stat-separator"></div>
+
+      <div class="stat-node">
+        <span class="stat-value">{{ stats.activity.toLocaleString() }}+</span>
+        <span class="stat-desc">全球社区活动</span>
+      </div>
+
+      <div class="stat-separator"></div>
+
+      <div class="stat-node">
+        <span class="stat-value">{{ formatProjectValue(stats.project) }}</span>
+        <span class="stat-desc">全球开源项目</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue';
+import { overviewDataPage1 } from '@/api/jyh/situation';
+
+// 定义响应式数据对象，初始值为 0 或 null
+const stats = reactive({
+  enterprise: 0,
+  university: 0,
+  activity: 0,
+  project: 0
+});
+
+// 加载状态（可选，用于显示 skeleton 或 loading）
+const loading = ref(true);
+
+const formatProjectValue = (val: number) => {
+  if (val >= 100000000) {
+    return (val / 100000000).toFixed(1) + '亿+';
+  } else if (val >= 10000) {
+    return (val / 10000).toFixed(0) + '万+';
+  }
+  return val + '+';
+};
+
+const fetchStats = async () => {
+  try {
+    loading.value = true;
+    const { data:res } = await overviewDataPage1({});
+    debugger
+    if (res.code === 200) {
+      // 将接口数据赋值给响应式对象
+      Object.assign(stats, res.data);
+    }
+  } catch (error) {
+    console.error('获取统计数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchStats();
+});
+</script>
+
+<style scoped lang="scss">
+
+.index-module__NV_5cW__titleSection {
+  color: #333;
+  z-index: 2;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  display: flex;
+  position: relative;
+}
+
+.stats-glass-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  /* 布局控制：撑满容器并增加内边距 */
+  width: 100%;
+  padding: 2rem 4rem;
+  //margin: 2rem 0;
+
+  /* 深色玻璃拟态背景 */
+  background: rgba(255, 255, 255, 0.02);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+
+  /* 极细微的边框勾勒 */
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+
+  /* 外阴影与内发光，增加悬浮感 */
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
+  inset 0 0 20px rgba(255, 255, 255, 0.02);
+
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    border-color: rgba(56, 189, 248, 0.4);
+    background: rgba(255, 255, 255, 0.04);
+    transform: translateY(-2px);
+  }
+}
+
+.stat-node {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+
+    .stat-value {
+      text-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
+    }
+  }
+}
+
+.stat-value {
+  /* 科技感亮蓝渐变 */
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 2.25rem;
+  font-weight: 800;
+  background: linear-gradient(180deg, #fff 0%, #38bdf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  /* 基础发光效果 */
+  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
+  letter-spacing: -1px;
+}
+
+.stat-desc {
+  /* 在黑底上使用半透明白色，更有高级感 */
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.1rem;
+  text-transform: uppercase;
+}
+
+.stat-separator {
+  /* 渐隐分割线 */
+  width: 1px;
+  height: 3rem;
+  background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.2),
+      rgba(255, 255, 255, 0)
+  );
+  margin: 0 1rem;
+}
+
+/* 响应式适配 */
+@media (max-width: 1024px) {
+  .stats-glass-bar {
+    padding: 2rem;
+  }
+  .stat-value {
+    font-size: 1.75rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-glass-bar {
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .stat-separator {
+    width: 50%;
+    height: 1px;
+    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
+  }
+}
+</style>
--- a/src/views/Jyh/security/index.vue
+++ b/src/views/Jyh/security/index.vue
@@ -7,44 +7,7 @@
        <div class="index-module__NV_5cW__floatingElement"></div>
        <div class="index-module__NV_5cW__floatingElement"></div>
      </div>
-      <div class="index-module__NV_5cW__titleSection">
-<!--        <div class="index-module__NV_5cW__titleContainer">-->
-<!--          <h1 class="index-module__NV_5cW__title">全球开源风险态势感知监控中心</h1>-->
-<!--        </div>-->
-<!--        <div class="index-module__NV_5cW__subtitle">-->
-<!--          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"-->
-<!--               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
-<!--               class="lucide lucide-users" aria-hidden="true">-->
-<!--            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>-->
-<!--            <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>-->
-<!--            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>-->
-<!--            <circle cx="9" cy="7" r="4"></circle>-->
-<!--          </svg>-->
-<!--          <span>汇聚武汉开源力量，共建城市开源生态</span>-->
-<!--        </div>-->
-        <!-- 武汉4项核心开源数据统计 -->
-        <div class="stats-glass-bar">
-          <div class="stat-node">
-            <span class="stat-value">8000+</span>
-            <span class="stat-desc">全球开源企业</span>
-          </div>
-          <div class="stat-separator"></div>
-          <div class="stat-node">
-            <span class="stat-value">600+</span>
-            <span class="stat-desc">全球高校参与</span>
-          </div>
-          <div class="stat-separator"></div>
-          <div class="stat-node">
-            <span class="stat-value">10000+</span>
-            <span class="stat-desc">全球社区活动</span>
-          </div>
-          <div class="stat-separator"></div>
-          <div class="stat-node">
-            <span class="stat-value">4亿+</span>
-            <span class="stat-desc">全球开源项目</span>
-          </div>
-        </div>
-      </div>
+      <StatsGlass />
    </div>

    <!-- 内容区域：ECharts图表模块 + 项目列表 -->
@@ -172,6 +135,7 @@ import { onMounted, ref, nextTick, watch, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
 import { usePageResize } from '@/utils/hooks/usePageResize';
 import ThreatIntelMap from './components/ThreatIntelMap.vue';
+import StatsGlass from '@/views/Jyh/security/StatsGlass.vue';

 // 页面尺寸响应式
 const { widthType } = usePageResize();
@@ -1423,16 +1387,6 @@ onMounted(() => {
  }
 }

-.index-module__NV_5cW__titleSection {
-  color: #333;
-  z-index: 2;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  display: flex;
-  position: relative;
-}
-
 .index-module__NV_5cW__titleContainer {
  flex-wrap: wrap;
  justify-content: center;
@@ -2025,110 +1979,4 @@ onMounted(() => {
 .chartCard__actionBtn--active:hover {
  background-color: #2563eb;
 }
-
-.stats-glass-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  /* 布局控制：撑满容器并增加内边距 */
-  width: 100%;
-  padding: 2rem 4rem;
-  //margin: 2rem 0;
-
-  /* 深色玻璃拟态背景 */
-  background: rgba(255, 255, 255, 0.02);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-
-  /* 极细微的边框勾勒 */
-  border-radius: 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-
-  /* 外阴影与内发光，增加悬浮感 */
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
-  inset 0 0 20px rgba(255, 255, 255, 0.02);
-
-  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    border-color: rgba(56, 189, 248, 0.4);
-    background: rgba(255, 255, 255, 0.04);
-    transform: translateY(-2px);
-  }
-}
-
-.stat-node {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-  transition: transform 0.3s ease;
-
-  &:hover {
-    transform: scale(1.05);
-    .stat-value {
-      text-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
-    }
-  }
-}
-
-.stat-value {
-  /* 科技感亮蓝渐变 */
-  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
-  font-size: 2.25rem;
-  font-weight: 800;
-  background: linear-gradient(180deg, #fff 0%, #38bdf8 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  /* 基础发光效果 */
-  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
-  letter-spacing: -1px;
-}
-
-.stat-desc {
-  /* 在黑底上使用半透明白色，更有高级感 */
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.875rem;
-  font-weight: 500;
-  letter-spacing: 0.1rem;
-  text-transform: uppercase;
-}
-
-.stat-separator {
-  /* 渐隐分割线 */
-  width: 1px;
-  height: 3rem;
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.2),
-      rgba(255, 255, 255, 0)
-  );
-  margin: 0 1rem;
-}
-
-/* 响应式适配 */
-@media (max-width: 1024px) {
-  .stats-glass-bar {
-    padding: 2rem;
-  }
-  .stat-value {
-    font-size: 1.75rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .stats-glass-bar {
-    flex-direction: column;
-    gap: 2rem;
-  }
-  .stat-separator {
-    width: 50%;
-    height: 1px;
-    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
-  }
-}
 </style>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,11 +44,11 @@ export default (config: any) => {
        //   changeOrigin: true, // 允许跨域
        //   rewrite: (path) => path.replace('/gateway/official/u-auth', '/gateway/u-auth') // 重写路径
        // },
-        '/gateway': {
+        '/api': {
          // target: 'http://223.76.236.155:20011', // 目标服务器地址
-          target: 'http://222.20.126.217:10010', // 目标服务器地址
+          target: 'http://222.20.126.217:8100', // 目标服务器地址
          changeOrigin: true, // 允许跨域
-          rewrite: (path) => path.replace(/^\/gateway/, '/gateway'), // 重写路径
+          rewrite: (path) => path.replace(/^\/api/, '/api'), // 重写路径
        }
      }
    },