style: 看板多语言补充

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">
-      <!-- 总流量 -->
-      <div class="totalFlow panel">
+      <!-- UPF总流量 -->
+      <div class="upfFlowTotal panel">
         <div class="inner">
           <!-- 筛选 -->
           <div class="filter">
-            <span data-key="1" class="active">24小时</span>
-            <!-- <span data-key="7">7天</span>
-            <span data-key="30">30天</span> -->
+            <span
+              :data-key="v"
+              :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 />