356 lines
9.5 KiB
Vue
356 lines
9.5 KiB
Vue
<script setup lang="ts">
|
||
import { parseDuration, parseDateToStr } from '@/utils/date-utils';
|
||
import { eventData, eventId } from '../../hooks/useUserActivity';
|
||
import useI18n from '@/hooks/useI18n';
|
||
import useDictStore from '@/store/modules/dict';
|
||
import { onMounted, reactive } from 'vue';
|
||
const { t } = useI18n();
|
||
const { getDict } = useDictStore();
|
||
|
||
/**字典数据 */
|
||
let dict: {
|
||
/**CDR SIP响应代码类别类型 */
|
||
cdrSipCode: DictType[];
|
||
/**CDR 呼叫类型 */
|
||
cdrCallType: DictType[];
|
||
/**UE 事件认证代码类型 */
|
||
ueAauthCode: DictType[];
|
||
/**UE 事件认证代码类型 */
|
||
ueEventType: DictType[];
|
||
} = reactive({
|
||
cdrSipCode: [],
|
||
cdrCallType: [],
|
||
ueAauthCode: [],
|
||
ueEventType: [],
|
||
});
|
||
|
||
onMounted(() => {
|
||
// 初始字典数据
|
||
Promise.allSettled([
|
||
getDict('cdr_sip_code'),
|
||
getDict('cdr_call_type'),
|
||
getDict('ue_auth_code'),
|
||
getDict('ue_event_type'),
|
||
]).then(resArr => {
|
||
if (resArr[0].status === 'fulfilled') {
|
||
dict.cdrSipCode = resArr[0].value;
|
||
}
|
||
if (resArr[1].status === 'fulfilled') {
|
||
dict.cdrCallType = resArr[1].value;
|
||
}
|
||
if (resArr[2].status === 'fulfilled') {
|
||
dict.ueAauthCode = resArr[2].value;
|
||
}
|
||
if (resArr[3].status === 'fulfilled') {
|
||
dict.ueEventType = resArr[3].value;
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="activty">
|
||
<template v-for="item in eventData" :key="item.eId">
|
||
<!-- CDR事件 -->
|
||
<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>
|
||
<DictTag
|
||
:options="dict.cdrCallType"
|
||
:value="item.data.callType"
|
||
/>
|
||
</span>
|
||
</div>
|
||
<div></div>
|
||
<div>
|
||
{{ t('views.dashboard.overview.userActivity.time') }}:
|
||
<span :title="parseDateToStr(item.data.releaseTime * 1000)">
|
||
{{ parseDateToStr(item.data.releaseTime * 1000) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="card-cdr-item">
|
||
<div>
|
||
{{ t('views.dashboard.overview.userActivity.caller') }}:
|
||
<span :title="item.data.callerParty">{{
|
||
item.data.callerParty
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
{{ t('views.dashboard.overview.userActivity.called') }}:
|
||
<span :title="item.data.calledParty">{{
|
||
item.data.calledParty
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
{{ t('views.dashboard.overview.userActivity.duration') }}:
|
||
<span>{{ parseDuration(item.data.callDuration) }}</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
{{ t('views.dashboard.overview.userActivity.result') }}:
|
||
<span>
|
||
<DictTag :options="dict.cdrSipCode" :value="item.data.cause" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- UE事件 -->
|
||
<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>
|
||
<DictTag :options="dict.ueEventType" :value="item.type" />
|
||
</span>
|
||
</div>
|
||
<div>
|
||
IMSI: <span :title="item.data.imsi">{{ item.data.imsi }}</span>
|
||
</div>
|
||
<div>
|
||
{{ t('views.dashboard.overview.userActivity.time') }}:
|
||
<span
|
||
v-if="item.type === 'auth-result'"
|
||
:title="item.data.authTime"
|
||
>
|
||
{{ item.data.authTime }}
|
||
</span>
|
||
<span v-if="item.type === 'detach'" :title="item.data.detachTime">
|
||
{{ item.data.detachTime }}
|
||
</span>
|
||
<span v-if="item.type === 'cm-state'" :title="item.data.changeTime">
|
||
{{ item.data.changeTime }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-ue-w33" 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 v-if="item.type === 'auth-result'">
|
||
{{ t('views.dashboard.overview.userActivity.result') }}:
|
||
<span>
|
||
<DictTag :options="dict.ueAauthCode" :value="item.data.authCode" />
|
||
</span>
|
||
</div>
|
||
<div v-if="item.type === 'detach'">
|
||
{{ t('views.dashboard.overview.userActivity.result') }}:
|
||
<span>{{ item.data.detachResult }}</span>
|
||
</div>
|
||
<div class="card-ue-w33" v-if="item.type === 'cm-state'">
|
||
{{ t('views.dashboard.overview.userActivity.result') }}:
|
||
<span>{{ item.data.status }}</span>
|
||
</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 {
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
height: 94%;
|
||
color: #61a8ff;
|
||
font-size: 0.75rem;
|
||
& .card-ue {
|
||
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%;
|
||
white-space: nowrap;
|
||
text-align: start;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
&-w33 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
& > div {
|
||
width: 33%;
|
||
}
|
||
}
|
||
}
|
||
|
||
& .card-cdr {
|
||
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 {
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
text-align: start;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
& .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>
|