feat: 看板用户行为事件
This commit is contained in:
TsMask
264
src/views/dashboard/overview/components/UserActivity/index.vue
Normal file
264
src/views/dashboard/overview/components/UserActivity/index.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user