feat: 仪表板看板

src/views/dashboard/overview/components/CDR/index.vue

@@ -0,0 +1,143 @@
+<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>