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>