fix: 看板ws模块接入

src/views/dashboard/overview/components/UEEvent/index.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue';
+import { ueEventData, ueEventTotal, ueEventId } from '../../hooks/useUEEvent';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div class="cdr" style="display: block">
+    <div class="cdr-head">
+      <span class="col">IMSI</span>
+      <span class="col">行为</span>
+      <span class="col-w">信息</span>
+    </div>
+    <div class="cdr-marquee-view">
+      <div
+        class="row"
+        :class="{ 'row-new': item.id === ueEventId }"
+        v-for="item in ueEventData"
+        :key="item.id"
+      >
+        <span class="col">{{ item.imsi }}</span>
+        <span class="col">{{ item.type }}</span>
+        <span class="col-w">{{ item.msg }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.cdr {
+  &-head {
+    background: rgba(255, 255, 255, 0.1);
+    font-size: 0.583rem;
+    padding: 0.5rem 1.5rem;
+    color: #68d8fe;
+    display: flex;
+    justify-content: space-between;
+    line-height: 1.05;
+    & .col {
+      width: 3.2rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &-w {
+        width: 8.4rem;
+      }
+    }
+  }
+
+  &-marquee-view {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 70%;
+
+    /* 修改滚动条的样式 */
+    &::-webkit-scrollbar {
+      width: 8px; /* 设置滚动条宽度 */
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: #101129; /* 设置滚动条轨道背景颜色 */
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #28293f; /* 设置滚动条滑块颜色 */
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #68d8fe; /* 设置鼠标悬停时滚动条滑块颜色 */
+    }
+
+    & .row {
+      line-height: 1.05;
+      padding: 0.5rem 1.5rem;
+      color: #61a8ff;
+      font-size: 0.75rem;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      &-new {
+        color: #fff;
+        animation: backInRight 0.3s alternate;
+      }
+      @keyframes backInRight {
+        0% {
+          opacity: 0.7;
+          -webkit-transform: translateX(2000px) scale(0.7);
+          transform: translateX(2000px) scale(0.7);
+        }
+
+        80% {
+          opacity: 0.7;
+          -webkit-transform: translateX(0) scale(0.7);
+          transform: translateX(0) scale(0.7);
+        }
+
+        to {
+          opacity: 1;
+          -webkit-transform: scale(1);
+          transform: scale(1);
+        }
+      }
+      & .col {
+        width: 3.2rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &-w {
+          width: 8.4rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dashboard/overview/hooks/useUEEvent.ts

@@ -0,0 +1,10 @@
+import { ref } from 'vue';
+
+/**事件数据 */
+export const ueEventData = ref<Record<string, any>[]>([]);
+
+/**事件总量 */
+export const ueEventTotal = ref<number>(0);
+
+/**事件推送id */
+export const ueEventId = ref<string>('');

src/views/dashboard/overview/hooks/useWS.ts

@@ -0,0 +1,148 @@
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { ueEventData, ueEventId, ueEventTotal } from './useUEEvent';
+
+/**websocket连接 */
+export default function useWS() {
+  const ws = new WS();
+
+  /**发消息 */
+  function wsSend(data: Record<string, any>) {
+    ws.send(data);
+  }
+
+  /**接收数据后回调 */
+  function wsMessage(res: Record<string, any>) {
+    console.log(res);
+    const { code, requestId, groupId, data } = res;
+    if (code === RESULT_CODE_ERROR) {
+      console.warn(res.msg);
+      return;
+    }
+    // 普通信息
+    switch (requestId) {
+      // ueEvent UE会话事件
+      case '1010':
+        if (Array.isArray(data.rows)) {
+          ueEventTotal.value = data.total;
+          const evDataArr: Record<string, any>[] = [];
+          for (const item of data.rows) {
+            const v = ueEventParse(item);
+            if (v) {
+              evDataArr.push(v);
+            }
+          }
+          ueEventData.value = evDataArr;
+          if (evDataArr.length > 0) {
+            ueEventId.value = evDataArr[0].id;
+          }
+        }
+        break;
+    }
+
+    // 订阅组信息
+    switch (groupId) {
+      // ueEvent UE会话事件
+      case '1010':
+        if (data.data) {
+          const v = ueEventParse(data.data);
+          if (v) {
+            ueEventData.value.unshift(v);
+            ueEventId.value = v.id;
+          }
+        }
+        break;
+    }
+  }
+
+  function wsInitData() {
+    ws.send({
+      requestId: '1010',
+      type: 'ue',
+      data: {
+        neType: 'AMF',
+        neId: '001',
+        sortField: 'timestamp',
+        sortOrder: 'desc',
+        pageNum: 1,
+        pageSize: 50,
+      },
+    });
+  }
+
+  /**ueEvent UE会话事件 数据解析 */
+  function ueEventParse(item: Record<string, any>) {
+    let evData: Record<string, any> = {};
+    try {
+      evData = JSON.parse(item.eventJSON);
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+
+    if (Reflect.has(evData, 'authTime')) {
+      return {
+        id: item.id,
+        type: item.eventType,
+        time: evData.authTime,
+        imsi: evData.imsi,
+        msg: `${evData.authMessage}`,
+      };
+    }
+
+    if (Reflect.has(evData, 'detachTime')) {
+      return {
+        id: item.id,
+        type: item.eventType,
+        time: evData.detachTime,
+        imsi: evData.imsi,
+        msg: `${evData.detachResult}`,
+      };
+    }
+
+    if (Reflect.has(evData, 'changeTime')) {
+      return {
+        id: item.id,
+        type: item.eventType,
+        time: evData.changeTime,
+        imsi: evData.imsi,
+        msg: `${evData.onlineNumber}`,
+      };
+    }
+  }
+
+  /**接收数据后回调 */
+  function wsError(ev: any) {
+    // 接收数据后回调
+    console.log(ev);
+  }
+
+  onMounted(() => {
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * UE会话事件-AMF (GroupID:1010)
+         */
+        subGroupID: '1010',
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+    };
+    ws.connect(options);
+  });
+
+  onBeforeUnmount(() => {
+    ws.close();
+  });
+
+  return {
+    wsInitData,
+    wsSend,
+  };
+}

src/views/dashboard/overview/index.vue

@@ -3,7 +3,7 @@ import { onMounted, reactive, ref } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import Topology from './components/Topology/index.vue';
 import NeResources from './components/NeResources/index.vue';
-import CDREvent from './components/CDREvent/index.vue';
+import UEEvent from './components/UEEvent/index.vue';
 import AlarnDayLine from './components/AlarnDayLine/index.vue';
 import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
 import UPFFlow from './components/UPFFlow/index.vue';
@@ -14,9 +14,11 @@ import { listBase5G } from '@/api/neUser/base5G';
 import { formatBytes } from '@/utils/parse-utils';
 import { graphNodeClickID } from './hooks/useTopology';
 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();
 
 /**用户在线信息 */
 let onlineInfo: {
@@ -61,27 +63,30 @@ onMounted(() => {
     }),
     listUPFIndex(),
     listUENum('001'),
-  ]).then(resArr => {
-    if (resArr[0].status === 'fulfilled') {
-      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;
-        }
-      });
-    }
+  ])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        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)
-     
-    }
-  });
+      if (resArr[2].status === 'fulfilled') {
+        console.log(resArr);
+      }
+    })
+    .finally(() => {
+      wsInitData();
+    });
 });
 </script>
 
@@ -186,14 +191,14 @@ onMounted(() => {
           <!-- 数据 -->
           <div class="data">
             <div class="item">
-              <h4>{{formatBytes(upfFlowInfo.up)}} </h4>
+              <h4>{{ formatBytes(upfFlowInfo.up) }}</h4>
               <span>
                 <ArrowUpOutlined style="color: #ed3f35" />
                 上行
               </span>
             </div>
             <div class="item">
-              <h4>{{formatBytes(upfFlowInfo.down)}} </h4>
+              <h4>{{ formatBytes(upfFlowInfo.down) }}</h4>
               <span>
                 <ArrowDownOutlined style="color: #eacf19" />
                 下行
@@ -221,7 +226,7 @@ onMounted(() => {
             <WhatsAppOutlined style="color: #d93f36" />&nbsp;&nbsp; 会话监控
           </h3>
           <div class="chart">
-            <CDREvent />
+            <UEEvent />
           </div>
         </div>
       </div>