fe.ems.vue3/src/views/dashboard/overview/components/UserActivity/index.vue

<script setup lang="ts">
import { eventData, eventId } from '../../hooks/useUserActivity';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
</script>

<template>
  <div class="activty">
    <template v-for="item in eventData" :key="item.eId">
      <div
        class="card-cdr"
        :class="{ active: item.eId === eventId }"
        v-if="item.eType === 'cdr'"
      >
        <div class="card-cdr-item">
          <div>
            {{ t('views.dashboard.overview.userActivity.type') }}: 
            <span>{{ item.data.callType }}</span>
          </div>
          <div>
            {{ t('views.dashboard.overview.userActivity.duration') }}: 
            <span>{{ item.data.callDuration }}</span>
          </div>
        </div>
        <div class="card-cdr-item">
          <div>
            {{ t('views.dashboard.overview.userActivity.caller') }}: 
            <span>{{ item.data.callerParty }}</span>
          </div>
          <div>
            {{ t('views.dashboard.overview.userActivity.called') }}: 
            <span>{{ item.data.calledParty }}</span>
          </div>
        </div>
        <div>
          {{ t('views.dashboard.overview.userActivity.result') }}: 
          <span>{{ item.data.cause }}</span>
        </div>
      </div>
      <div
        class="card-ue"
        :class="{ active: item.eId === eventId }"
        v-if="item.eType === 'ue'"
      >
        <div class="card-ue-item">
          <div>
            {{ t('views.dashboard.overview.userActivity.type') }}: 
            <span>{{ item.type }}</span>
          </div>
          <div>
            {{ t('views.dashboard.overview.userActivity.time') }}: 
            <span v-if="item.type === 'auth-result'">
              {{ item.data.authTime }}
            </span>
            <span v-if="item.type === 'detach'">
              {{ item.data.detachTime }}
            </span>
            <span v-if="item.type === 'cm-state'">
              {{ item.data.changeTime }}
            </span>
          </div>
        </div>
        <div>IMSI: <span>{{ item.data.imei }}</span></div>
        <div class="card-ue-auth" v-if="item.type === 'auth-result'">
          <div>
            GNB ID: <span>{{ item.data.gNBID }}</span>
          </div>
          <div>
            Cell ID: <span>{{ item.data.cellID }}</span>
          </div>
          <div>
            Tac ID: <span>{{ item.data.tacID }}</span>
          </div>
        </div>
      </div>
    </template>

    <!-- <div class="card-cdr active">
      <div class="card-cdr-item">
        <div>类型: <span>video</span></div>
        <div>时长: <span>123s</span></div>
      </div>
      <div class="card-cdr-item">
        <div>主叫: <span>12307550064</span></div>
        <div>被叫: <span>12307550064</span></div>
      </div>
      <div>结果: <span>200</span></div>
    </div>
    <div class="card-cdr">
      <div class="card-cdr-item">
        <div>类型: <span>audio</span></div>
        <div>时长: <span>123s</span></div>
      </div>
      <div class="card-cdr-item">
        <div>主叫: <span>12307550064</span></div>
        <div>被叫: <span>12307550064</span></div>
      </div>
      <div>结果: <span>200</span></div>
    </div>
    <div class="card-ue">
      <div class="card-ue-item">
        <div>类型: <span>auth-result</span></div>
        <div>Time: <span>2023-01-16 07:28:11</span></div>
      </div>
      <div>IMSI: <span>4600212141</span></div>
      <div class="card-ue-auth">
        <div>GNB ID: <span>31</span></div>
        <div>Cell ID: <span>17</span></div>
        <div>Tac ID: <span>98</span></div>
      </div>
    </div>
    <div class="card-ue">
      <div class="card-ue-item">
        <div>类型: <span>cm-state</span></div>
        <div>Time: <span>2023-01-16 07:28:11</span></div>
      </div>
      <div>IMSI: <span>4600212141</span></div>
    </div> -->

    <!-- <div class="card-cdr">
      { "recordType":"MOC", // MOC, MTC, MOSM, MTSM 
      "seqNumber":81,
      "callReference":"Y6ecb69Bj@10.25.0.210", 
      "callerParty":"7112",
      "calledParty":"7108", 
      "serviceResult":"ok", 
      "seizureTime":1706515269,
      "answerTime":1706515273,
       "releaseTime":1706515294, 
       "callDuration":21
      "callType":"audio" // audio, video 
      "fwdType": "CFB" // CFU,CFB, CFNR, CFNL
      "fwdParty":"7999", 
      "cause": 200 // 200, 403, 408, 500 .... }

      主叫：callerParty 
      被叫：calledParty 
      时长：callDuration
      呼叫类型：callType
      原因：cause
      信息：  主叫 -> 被叫
    </div>
    <div class="card-ue">ue
      事件类型：auth-result
      imei
      GNB ID 
      Cell ID
      Tac ID
      authTime

      事件类型：detach
      imsi
      detachTime

      事件类型：cm-state
      imsi
      changeTime
    </div> -->
  </div>
</template>

<style lang="less" scoped>
.activty {
  // background-color: rgb(253, 180, 180);
  overflow-x: hidden;
  overflow-y: auto;
  height: 90%;
  color: #61a8ff;
  font-size: 0.75rem;
  & .card-ue {
    // background-color: rgb(185, 241, 168);
    border: 1px #61a8ff solid;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.3rem;
    line-height: 1rem;
    & span {
      color: #68d8fe;
    }
    &-item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      & > div {
        width: 50%;
      }
    }
    &-auth {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      & > div {
        width: 33%;
      }
    }
  }

  & .card-cdr {
    // background-color: rgb(184, 168, 241);
    border: 1px #61a8ff solid;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.3rem;
    line-height: 1rem;
    & span {
      color: #68d8fe;
    }
    &-item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      & > div {
        width: 50%;
      }
    }
  }

  & .active {
    color: #fff;
    border: 1px #fff solid;
    animation: backInRight 0.3s alternate;
    & span {
      color: #fff;
    }
  }

  /* 修改滚动条的样式 */
  &::-webkit-scrollbar {
    width: 8px; /* 设置滚动条宽度 */
  }

  &::-webkit-scrollbar-track {
    background-color: #101129; /* 设置滚动条轨道背景颜色 */
  }

  &::-webkit-scrollbar-thumb {
    background-color: #28293f; /* 设置滚动条滑块颜色 */
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #68d8fe; /* 设置鼠标悬停时滚动条滑块颜色 */
  }

  @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);
    }
  }
}
</style>