style: 看板多语言补充

2024-01-29 15:21:59 +08:00
parent 028ecfb61e
commit e932256e66
4 changed files with 158 additions and 82 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/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:{
-          alarmTotal:'Total:'
+        upfFlowTotal:{ 
+          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: {
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -490,12 +490,45 @@ export default {
    },
    dashboard: {
      overview:{
-        UPFFlow:{
-          up:'上行',
-          down:'下行',
+        title: "核心网系统看板",
+        fullscreen: "点击全屏显示",
+        skim: {
+          users: "用户数",
+          session: "会话数",
+          base: "基站数",
        },
-        AlarmTypeBar:{
-          alarmTotal:'告警总数:'
+        upfFlow:{
+          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: "信息",
        }
      }
    },
--- a/src/views/dashboard/overview/css/index.css
+++ b/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;
 }
--- a/src/views/dashboard/overview/index.vue
+++ b/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 />