style: 看板多语言补充

src/i18n/locales/en-US.ts

@@ -490,14 +490,47 @@ export default {
     },
     dashboard: {
       overview:{
-        UPFFlow:{
+        title: "Core Network Dashboard",
+        fullscreen: "Click on the full-screen display",
+        skim: {
+          users: "Users",
+          session: "Sessions",
+          base: "Bases",
+        },
+        upfFlow:{
+          title: "UPF Real-Time Flow",
           up:'Uplink Rate',
           down:'Downlink Rate'
         },
-        AlarmTypeBar:{
+        upfFlowTotal:{ 
-          alarmTotal:'Total:'
+          up:'Uplink',
+          down:'Downlink'
+        },
+        alarmType: {
+          title: "Alarm Statistics",
+        },
+        resources: {
+          title: "Resource Situation",
+          sysMem: "Mem",
+          sysCpu: "CPU",
+          neCpu: "NE CPU",
+        },
+        topology: {
+          title: "Network Topology",
+        },
+        cdrEvent: {
+          title: "CDR Session",
+          id: "Serial",
+          type: "Type",
+          msg: "Info",
+        },
+        ueEvent: {
+          title: "UE Session",
+          id: "IMSI",
+          type: "Type",
+          msg: "Info",
         }
-      }
+      },
     },
     neUser: {
       auth: {

src/i18n/locales/zh-CN.ts

@@ -490,12 +490,45 @@ export default {
     },
     dashboard: {
       overview:{
-        UPFFlow:{
+        title: "核心网系统看板",
-          up:'上行',
+        fullscreen: "点击全屏显示",
-          down:'下行',
+        skim: {
+          users: "用户数",
+          session: "会话数",
+          base: "基站数",
         },
-        AlarmTypeBar:{
+        upfFlow:{
-          alarmTotal:'告警总数:'
+          title: "UPF实时流量",
+          up:'上行率',
+          down:'下行率'
+        },
+        upfFlowTotal:{ 
+          up:'上行',
+          down:'下行'
+        },
+        alarmType: {
+          title: "告警统计",
+        },
+        resources: {
+          title: "资源情况",
+          sysMem: "系统内存",
+          sysCpu: "系统CPU",
+          neCpu: "网元CPU",
+        },
+        topology: {
+          title: "网络拓扑",
+        },
+        cdrEvent: {
+          title: "CDR会话",
+          id: "编号",
+          type: "类型",
+          msg: "信息",
+        },
+        ueEvent: {
+          title: "UE会话",
+          id: "IMSI",
+          type: "类型",
+          msg: "信息",
         }
       }
     },

src/views/dashboard/overview/css/index.css

@@ -62,7 +62,6 @@
 .brand .brand-title {
   color: #ffffff;
   font-size: 1.4rem;
-  letter-spacing: 10px;
   font-weight: 600;
   padding-top: 1rem;
   padding-bottom: 0.5rem;
@@ -95,22 +94,28 @@
 }
 
 /* 概览区域 */
-.overview {
+.skim {
   min-height: 6.167rem;
-  height: 12%;
+  height: 14%;
 }
-.overview .inner {
+.skim .inner {
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
   align-items: center;
 }
-.overview .inner h4 {
+.skim .inner .item {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.skim .inner .item h4 {
   font-size: 1.167rem;
   padding-left: 0.2rem;
   color: #fff;
   margin-bottom: 0.333rem;
 }
-.overview .inner span {
+.skim .inner .item span {
   font-size: 0.667rem;
   color: #4c9bfd;
 }
@@ -129,7 +134,7 @@
 /* cdr会话监控 */
 .cdrEvent {
   min-height: 22rem;
-  height: 58%;
+  height: 56%;
 }
 .cdrEvent .inner .chart {
   width: 100%;
@@ -138,14 +143,14 @@
 }
 
 /* 总流量 */
-.totalFlow {
+.upfFlowTotal {
   min-height: 6.167rem;
   height: 12%;
 }
-.totalFlow .inner .filter {
+.upfFlowTotal .inner .filter {
   display: flex;
 }
-.totalFlow .inner .filter span {
+.upfFlowTotal .inner .filter span {
   display: block;
   height: 0.75rem;
   line-height: 1;
@@ -153,30 +158,31 @@
   color: #1950c4;
   font-size: 0.75rem;
   border-right: 0.083rem solid #00f2f1;
+  cursor: pointer;
 }
-.totalFlow .inner .filter span:first-child {
+.upfFlowTotal .inner .filter span:first-child {
   padding-left: 0;
 }
-.totalFlow .inner .filter span:last-child {
+.upfFlowTotal .inner .filter span:last-child {
   border-right: none;
 }
-.totalFlow .inner .filter span.active {
+.upfFlowTotal .inner .filter span.active {
   color: #fff;
   font-size: 0.833rem;
 }
-.totalFlow .data {
+.upfFlowTotal .data {
   display: flex;
   margin-top: 0.833rem;
 }
-.totalFlow .item {
+.upfFlowTotal .item {
   width: 50%;
 }
-.totalFlow h4 {
+.upfFlowTotal h4 {
   font-size: 1.167rem;
   color: #fff;
   margin-bottom: 0.417rem;
 }
-.totalFlow span {
+.upfFlowTotal span {
   color: #4c9bfd;
   font-size: 0.667rem;
 }

src/views/dashboard/overview/index.vue

@@ -10,16 +10,14 @@ import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
 import UPFFlow from './components/UPFFlow/index.vue';
 import { listSub } from '@/api/neUser/sub';
 import { listUENum } from '@/api/neUser/ue';
-import { listUPFIndex } from '@/api/perfManage/goldTarget';
-import { listBase5G } from '@/api/neUser/base5G';
-import { formatBytes } from '@/utils/parse-utils';
 import { graphNodeClickID } from './hooks/useTopology';
+import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
 import { useFullscreen } from '@vueuse/core';
 import useWS from './hooks/useWS';
 import useAppStore from '@/store/modules/app';
 const appStore = useAppStore();
 const { t } = useI18n();
-const { wsSend, wsInitData } = useWS();
+const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS();
 
 /**用户在线信息 */
 let onlineInfo: {
@@ -38,17 +36,6 @@ let onlineInfo: {
   activeAlarmSeverity: [],
 });
 
-/**用户在线信息 */
-let upfFlowInfo: {
-  /**上行字节数 */
-  up: number;
-  /**下行字节数 */
-  down: any;
-} = reactive({
-  up: 0,
-  down: 0,
-});
-
 /**总览节点 */
 const viewportDom = ref<HTMLElement | null>(null);
 const { isFullscreen, toggle } = useFullscreen(viewportDom);
@@ -62,7 +49,6 @@ onMounted(() => {
       pageNum: '1',
       pageSize: '20',
     }),
-    listUPFIndex(),
     listUENum('001'),
   ])
     .then(resArr => {
@@ -70,23 +56,19 @@ onMounted(() => {
         onlineInfo.subNum = resArr[0].value.total;
       }
       if (resArr[1].status === 'fulfilled') {
-        resArr[1].value['data'].map((item: any) => {
-          switch (item.kpiId) {
-            case 'UPF.03':
-              upfFlowInfo.up = item.Total;
-              break;
-            case 'UPF.06':
-              upfFlowInfo.down = item.Total;
-          }
-        });
-      }
-
-      if (resArr[2].status === 'fulfilled') {
         console.log(resArr);
       }
     })
     .finally(() => {
-      wsInitData();
+      cdrEventSend();
+      ueEventSend();
+      upfTFSend(0);
+      upfTFSend(7);
+      upfTFSend(30);
+
+      setTimeout(() => {
+        upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1;
+      }, 1_000);
     });
 });
 </script>
@@ -94,8 +76,12 @@ onMounted(() => {
 <template>
   <div class="viewport" ref="viewportDom">
     <div class="brand">
-      <div class="brand-title" @click="toggle" title="点击全屏显示">
+      <div
-        核心网系统看板
+        class="brand-title"
+        @click="toggle"
+        :title="t('views.dashboard.overview.fullscreen')"
+      >
+        {{ t('views.dashboard.overview.title') }}
         <FullscreenExitOutlined v-if="isFullscreen" />
         <FullscreenOutlined v-else />
       </div>
@@ -104,34 +90,34 @@ onMounted(() => {
 
     <div class="column">
       <!--概览-->
-      <div class="overview panel">
+      <div class="skim panel">
         <div class="inner">
           <div class="item">
             <h4>{{ onlineInfo.subNum }}</h4>
             <span>
               <UserOutlined style="color: #006cff" />
-              签约用户
+              {{ t('views.dashboard.overview.skim.users') }}
             </span>
           </div>
           <div class="item">
             <h4>1000</h4>
             <span>
               <UserSwitchOutlined style="color: #6acca3" />
-              语音在线
+              {{ t('views.dashboard.overview.skim.session') }}
             </span>
           </div>
           <div class="item">
-            <h4>3,001</h4>
+            <h4>1000</h4>
             <span>
               <UserSwitchOutlined style="color: #6acca3" />
-              数据在线
+              IMS {{ t('views.dashboard.overview.skim.session') }}
             </span>
           </div>
           <div class="item">
-            <h4>23</h4>
+            <h4>2</h4>
             <span>
               <WifiOutlined style="color: #edcb35" />
-              基站在线
+              {{ t('views.dashboard.overview.skim.base') }}
             </span>
           </div>
         </div>
@@ -140,7 +126,7 @@ onMounted(() => {
       <!--告警统计-->
       <div class="alarmType panel">
         <div class="inner">
-          <h3>告警统计</h3>
+          <h3>{{ t('views.dashboard.overview.alarmType.title') }}</h3>
           <div class="chart">
             <AlarnTypeBar />
           </div>
@@ -151,7 +137,8 @@ onMounted(() => {
       <div class="cdrEvent panel">
         <div class="inner">
           <h3>
-            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp; CDR会话
+            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.cdrEvent.title') }}
           </h3>
           <div class="chart">
             <CDREvent />
@@ -163,7 +150,7 @@ onMounted(() => {
       <!-- 实时流量 -->
       <div class="upfFlow panel">
         <div class="inner">
-          <h3>实时流量</h3>
+          <h3>{{ t('views.dashboard.overview.upfFlow.title') }}</h3>
           <div class="chart">
             <UPFFlow />
           </div>
@@ -173,7 +160,8 @@ onMounted(() => {
       <div class="topology panel">
         <div class="inner">
           <h3>
-            <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;网络拓扑
+            <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.topology.title') }}
           </h3>
           <div class="chart">
             <Topology />
@@ -182,29 +170,43 @@ onMounted(() => {
       </div>
     </div>
     <div class="column">
-      <!-- 总流量 -->
+      <!-- UPF总流量 -->
-      <div class="totalFlow panel">
+      <div class="upfFlowTotal panel">
         <div class="inner">
           <!-- 筛选 -->
           <div class="filter">
-            <span data-key="1" class="active">24小时</span>
+            <span
-            <!-- <span data-key="7">7天</span>
+              :data-key="v"
-            <span data-key="30">30天</span> -->
+              :class="{ active: upfTFActive === i }"
+              v-for="(v, i) in ['0', '7', '30']"
+              :key="v"
+              @click="
+                () => {
+                  upfTFActive = i;
+                }
+              "
+            >
+              {{
+                v === '0'
+                  ? '24' + t('common.units.hour')
+                  : v + t('common.units.day')
+              }}
+            </span>
           </div>
           <!-- 数据 -->
           <div class="data">
             <div class="item">
-              <h4>{{ formatBytes(upfFlowInfo.up) }}</h4>
+              <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
               <span>
-                <ArrowUpOutlined style="color: #ed3f35" />
+                <ArrowUpOutlined style="color: #597ef7" />
-                上行
+                {{ t('views.dashboard.overview.upfFlowTotal.up') }}
               </span>
             </div>
             <div class="item">
-              <h4>{{ formatBytes(upfFlowInfo.down) }}</h4>
+              <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
               <span>
-                <ArrowDownOutlined style="color: #eacf19" />
+                <ArrowDownOutlined style="color: #52c41a" />
-                下行
+                {{ t('views.dashboard.overview.upfFlowTotal.down') }}
               </span>
             </div>
           </div>
@@ -215,7 +217,8 @@ onMounted(() => {
         <div class="inner">
           <h3>
             <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            资源情况：{{ graphNodeClickID }}
+            {{ t('views.dashboard.overview.resources.title') }}：
+            {{ graphNodeClickID }}
           </h3>
           <div class="chart">
             <NeResources />
@@ -226,7 +229,8 @@ onMounted(() => {
       <div class="ueEvent panel">
         <div class="inner">
           <h3>
-            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp; UE会话
+            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            {{ t('views.dashboard.overview.ueEvent.title') }}
           </h3>
           <div class="chart">
             <UEEvent />