OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: 看板通话时长格式化hms

Browse Source
This commit is contained in:
TsMask
2024-01-30 18:25:43 +08:00
parent acf4a946e8
commit ba8bd5c015
2 changed files with 51 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/utils/date-utils.ts
View File

@@ -80,10 +80,10 @@ export function diffValue(
*/ */
export function parseDuration(seconds: number | string) { export function parseDuration(seconds: number | string) {
seconds = Number(seconds) || 0; seconds = Number(seconds) || 0;
const duration = dayjs().startOf('day').subtract(seconds, 'seconds'); const duration = new Date(seconds * 1000);
const secondsLeft = duration.format('s'); const hours = duration.getUTCHours();
const minutes = duration.format('m'); const minutes = duration.getUTCMinutes();
const hours = duration.format('H'); const secondsLeft = duration.getUTCSeconds();
if (+hours > 0) { if (+hours > 0) {
return `${hours}h${minutes}m${secondsLeft}s`; return `${hours}h${minutes}m${secondsLeft}s`;
} }

63
src/views/dashboard/overview/components/UserActivity/index.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { parseDuration } from '@/utils/date-utils'; import { parseDuration, parseDateToStr } from '@/utils/date-utils';
import { eventData, eventId } from '../../hooks/useUserActivity'; import { eventData, eventId } from '../../hooks/useUserActivity';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
const { t } = useI18n(); const { t } = useI18n();
@@ -8,6 +8,7 @@ const { t } = useI18n();
<template> <template>
<div class="activty"> <div class="activty">
<template v-for="item in eventData" :key="item.eId"> <template v-for="item in eventData" :key="item.eId">
<!-- CDR事件 -->
<div <div
class="card-cdr" class="card-cdr"
:class="{ active: item.eId === eventId }" :class="{ active: item.eId === eventId }"
@@ -15,29 +16,34 @@ const { t } = useI18n();
> >
<div class="card-cdr-item"> <div class="card-cdr-item">
<div> <div>
{{ t('views.dashboard.overview.userActivity.type') }}: {{ t('views.dashboard.overview.userActivity.type') }}:
<span>{{ item.data.callType }}</span> <span>{{ item.data.callType }}</span>
</div> </div>
<div> <div>
{{ t('views.dashboard.overview.userActivity.duration') }}: {{ t('views.dashboard.overview.userActivity.duration') }}:
<span>{{ parseDuration(item.data.callDuration) }}</span> <span>{{ parseDuration(item.data.callDuration) }}</span>
</div> </div>
<div>
{{ t('views.dashboard.overview.userActivity.time') }}:
<span>{{ parseDateToStr(item.data.releaseTime * 1000) }}</span>
</div>
</div> </div>
<div class="card-cdr-item"> <div class="card-cdr-item">
<div> <div>
{{ t('views.dashboard.overview.userActivity.caller') }}: {{ t('views.dashboard.overview.userActivity.caller') }}:
<span>{{ item.data.callerParty }}</span> <span>{{ item.data.callerParty }}</span>
</div> </div>
<div> <div>
{{ t('views.dashboard.overview.userActivity.called') }}: {{ t('views.dashboard.overview.userActivity.called') }}:
<span>{{ item.data.calledParty }}</span> <span>{{ item.data.calledParty }}</span>
</div> </div>
</div> <div>
<div> {{ t('views.dashboard.overview.userActivity.result') }}:
{{ t('views.dashboard.overview.userActivity.result') }}: <span>{{ item.data.cause }}</span>
<span>{{ item.data.cause }}</span> </div>
</div> </div>
</div> </div>
<!-- UE事件 -->
<div <div
class="card-ue" class="card-ue"
:class="{ active: item.eId === eventId }" :class="{ active: item.eId === eventId }"
@@ -45,11 +51,14 @@ const { t } = useI18n();
> >
<div class="card-ue-item"> <div class="card-ue-item">
<div> <div>
{{ t('views.dashboard.overview.userActivity.type') }}: {{ t('views.dashboard.overview.userActivity.type') }}:
<span>{{ item.type }}</span> <span>{{ item.type }}</span>
</div> </div>
<div> <div>
{{ t('views.dashboard.overview.userActivity.time') }}: IMSI: <span>{{ item.data.imei }}</span>
</div>
<div>
{{ t('views.dashboard.overview.userActivity.time') }}:
<span v-if="item.type === 'auth-result'"> <span v-if="item.type === 'auth-result'">
{{ item.data.authTime }} {{ item.data.authTime }}
</span> </span>
@@ -61,8 +70,8 @@ const { t } = useI18n();
</span> </span>
</div> </div>
</div> </div>
<div>IMSI: <span>{{ item.data.imei }}</span></div>
<div class="card-ue-auth" v-if="item.type === 'auth-result'"> <div class="card-ue-w33" v-if="item.type === 'auth-result'">
<div> <div>
GNB ID: <span>{{ item.data.gNBID }}</span> GNB ID: <span>{{ item.data.gNBID }}</span>
</div> </div>
@@ -70,7 +79,29 @@ const { t } = useI18n();
Cell ID: <span>{{ item.data.cellID }}</span> Cell ID: <span>{{ item.data.cellID }}</span>
</div> </div>
<div> <div>
Tac ID: <span>{{ item.data.tacID }}</span> TAC ID: <span>{{ item.data.tacID }}</span>
</div>
</div>
<div class="card-ue-w33" v-if="item.type === 'auth-result'">
<div>
Code: <span>{{ item.data.authCode }}</span>
</div>
<div>
OnlineNumber: <span>{{ item.data.onlineNumber }}</span>
</div>
</div>
<div v-if="item.type === 'auth-result'">
Message: <span>{{ item.data.authMessage }}</span>
</div>
<div v-if="item.type === 'detach'">
Message: <span>{{ item.data.detachResult }}</span>
</div>
<div class="card-ue-w33" v-if="item.type === 'cm-state'">
<div>
Status: <span>{{ item.data.status }}</span>
</div>
<div>
OnlineNumber: <span>{{ item.data.onlineNumber }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -186,7 +217,7 @@ const { t } = useI18n();
width: 50%; width: 50%;
} }
} }
&-auth { &-w33 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@@ -211,7 +242,7 @@ const { t } = useI18n();
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
& > div { & > div {
width: 50%; flex: 1;
} }
} }
} }