144 lines
3.3 KiB
Vue
144 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
import useI18n from '@/hooks/useI18n';
|
|
const { t } = useI18n();
|
|
|
|
const newNumber = ref(1);
|
|
const dataArr = ref([
|
|
{
|
|
recordType: 'CALL',
|
|
seqNumber: 1,
|
|
callReference: 'X1gcbQ8zT@10.10.91.252',
|
|
callerParty: '12307551241',
|
|
calledParty: '12307550064',
|
|
serviceResult: 'ok',
|
|
seizureTime: 1705542348,
|
|
answerTime: 1705542356,
|
|
releaseTime: 1705542378,
|
|
callDuration: 22,
|
|
},
|
|
]);
|
|
|
|
onMounted(() => {
|
|
setInterval(function () {
|
|
const random = Math.ceil(Math.random() * 1000);
|
|
const time = Math.ceil(Date.now() / 1000);
|
|
newNumber.value = time;
|
|
dataArr.value.unshift({
|
|
recordType: 'CALL',
|
|
seqNumber: time,
|
|
callReference: `X${random}Q8zT@10${random}.252`,
|
|
callerParty: `1230755${random}`,
|
|
calledParty: `${random}075064`,
|
|
serviceResult: random > 500 ? 'ok' : 'fail',
|
|
seizureTime: time,
|
|
answerTime: time,
|
|
releaseTime: time - random,
|
|
callDuration: 22,
|
|
});
|
|
if (dataArr.value.length > 50) {
|
|
dataArr.value.splice(50);
|
|
}
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cdr" style="display: block">
|
|
<div class="cdr-head">
|
|
<span class="col">号码</span>
|
|
<span class="col">行为</span>
|
|
<span class="col-w">描述</span>
|
|
</div>
|
|
<div class="cdr-marquee-view">
|
|
<div
|
|
class="row"
|
|
:class="{ 'row-new': item.seqNumber === newNumber }"
|
|
v-for="item in dataArr"
|
|
:key="item.seqNumber"
|
|
>
|
|
<span class="col">{{ item.callReference }}</span>
|
|
<span class="col">{{ item.recordType }}</span>
|
|
<span class="col-w"
|
|
>[{{ item.serviceResult }}]
|
|
{{ item.callerParty }}
|
|
->
|
|
{{ item.calledParty }}
|
|
# {{ item.callDuration }}
|
|
</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%;
|
|
|
|
& .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>
|