From 24b367c08e2ebd118aac645fd034dea28e95398e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sat, 27 Jan 2024 14:57:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9C=8B=E6=9D=BF=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E7=99=BE=E5=88=86=E6=AF=94=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../overview/components/CDREvent/index.vue    |  95 ++--
 .../overview/components/NeResources/index.vue | 472 ++++++++----------
 .../overview/components/UEEvent/index.vue     |  37 +-
 src/views/dashboard/overview/css/index.css    |  34 +-
 .../dashboard/overview/hooks/useCDREvent.ts   |  10 +
 src/views/dashboard/overview/hooks/useWS.ts   | 101 +++-
 src/views/dashboard/overview/index.vue        |  19 +-
 7 files changed, 395 insertions(+), 373 deletions(-)
 create mode 100644 src/views/dashboard/overview/hooks/useCDREvent.ts

diff --git a/src/views/dashboard/overview/components/CDREvent/index.vue b/src/views/dashboard/overview/components/CDREvent/index.vue
index d2b0abab..aecd107a 100644
--- a/src/views/dashboard/overview/components/CDREvent/index.vue
+++ b/src/views/dashboard/overview/components/CDREvent/index.vue
@@ -1,71 +1,31 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
+import {
+  cdrEventData,
+  cdrEventTotal,
+  cdrEventId,
+} from '../../hooks/useCDREvent';
 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">call</span>
       <span class="col">行为</span>
-      <span class="col-w">描述</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"
+        :class="{ 'row-new': item.id === cdrEventId }"
+        v-for="item in cdrEventData"
+        :key="item.id"
       >
-        <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>
+        <span class="col" :title="item.call">{{ item.call }}</span>
+        <span class="col" :title="item.type">{{ item.type }}</span>
+        <span class="col-w" :title="item.msg">{{ item.msg }}</span>
       </div>
     </div>
   </div>
@@ -73,21 +33,26 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .cdr {
+  height: 88%;
+
   &-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;
+    justify-content: flex-start;
     line-height: 1.05;
     & .col {
-      width: 3.2rem;
+      min-width: 3.2rem;
+      width: 30%;
+      margin-right: 1rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       &-w {
-        width: 8.4rem;
+        min-width: 8.4rem;
+        width: 60%;
       }
     }
   }
@@ -95,7 +60,7 @@ onMounted(() => {
   &-marquee-view {
     overflow-x: hidden;
     overflow-y: auto;
-    height: 70%;
+    height: 92%;
 
     /* 修改滚动条的样式 */
     &::-webkit-scrollbar {
@@ -115,16 +80,18 @@ onMounted(() => {
     }
 
     & .row {
-      line-height: 1.05;
-      padding: 0.5rem 1.5rem;
+      line-height: 1.5;
+      padding: 0 1.5rem;
       color: #61a8ff;
       font-size: 0.75rem;
       position: relative;
       display: flex;
       justify-content: space-between;
+      cursor: context-menu;
       &-new {
         color: #fff;
         animation: backInRight 0.3s alternate;
+        font-size: 0.95rem;
       }
       @keyframes backInRight {
         0% {
@@ -146,12 +113,18 @@ onMounted(() => {
         }
       }
       & .col {
-        width: 3.2rem;
+        min-width: 3.2rem;
+        width: 30%;
+        margin-right: 1rem;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         &-w {
-          width: 8.4rem;
+          min-width: 8.4rem;
+          width: 60%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
     }
diff --git a/src/views/dashboard/overview/components/NeResources/index.vue b/src/views/dashboard/overview/components/NeResources/index.vue
index 0c317f64..2888bff3 100644
--- a/src/views/dashboard/overview/components/NeResources/index.vue
+++ b/src/views/dashboard/overview/components/NeResources/index.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue';
+import { onMounted, ref, onBeforeUnmount, nextTick, watch } from 'vue';
 import * as echarts from 'echarts/core';
-import { TooltipComponent } from 'echarts/components';
-import { GaugeChart } from 'echarts/charts';
+import { GridComponent, GridComponentOption } from 'echarts/components';
+import {
+  BarChart,
+  BarSeriesOption,
+  PictorialBarChart,
+  PictorialBarSeriesOption,
+} from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { graphNodeClickID, graphNodeState } from '../../hooks/useTopology';
 import useI18n from '@/hooks/useI18n';
-import { GaugeSeriesOption } from 'echarts/types/dist/echarts';
-import { watch } from 'vue';
+import { markRaw } from 'vue';
 const { t } = useI18n();
 
-echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
+echarts.use([GridComponent, BarChart, PictorialBarChart, CanvasRenderer]);
 
-type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
+type EChartsOption = echarts.ComposeOption<
+  GridComponentOption | BarSeriesOption | PictorialBarSeriesOption
+>;
 
 /**图DOM节点实例对象 */
 const neResourcesDom = ref<HTMLElement | undefined>(undefined);
@@ -20,199 +26,188 @@ const neResourcesDom = ref<HTMLElement | undefined>(undefined);
 /**图实例对象 */
 const neResourcesChart = ref<any>(null);
 
-const optionData: EChartsOption = {
-  tooltip: {
-    formatter: '{a} <br> {b} : {c}%',
+// 类别
+const category = ref<any>([
+  {
+    name: '系统内存',
+    value: 1,
   },
+  {
+    name: '系统CPU',
+    value: 1,
+  },
+  {
+    name: '网元CPU',
+    value: 1,
+  },
+]);
+
+// 数据总数
+const total = 100;
+
+/**图数据 */
+const optionData: EChartsOption = {
+  xAxis: {
+    max: total,
+    splitLine: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+  },
+  grid: {
+    top: '1%', // 设置条形图的边距
+    bottom: '12%',
+    left: '25%',
+    right: '25%',
+  },
+  yAxis: [
+    {
+      type: 'category',
+      inverse: false,
+      data: category.value,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+    },
+  ],
   series: [
     {
-      name: '系统内存',
-      type: 'gauge',
-      center: ['15%', '45%'],
-      radius: '65%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
+      // 内
+      type: 'bar',
+      barWidth: 10,
+      legendHoverLink: false,
+      silent: true,
       itemStyle: {
-        color: '#1890ff',
-      },
-      progress: {
-        show: true,
-        width: 20,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 20,
+        color: function (params) {
+          // 红色
+          if (+params.value >= 70) {
+            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: '#fff1f0' },
+              { offset: 0.5, color: '#ffa39e' },
+              { offset: 1, color: '#f5222d' },
+            ]);
+          }
+          // 蓝色
+          if (+params.value >= 30) {
+            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: '#f0f5ff' },
+              { offset: 0.5, color: '#adc6ff' },
+              { offset: 1, color: '#2f54eb' },
+            ]);
+          }
+          // 绿色
+          return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            { offset: 0, color: '#f6ffed' },
+            { offset: 0.5, color: '#b7eb8f' },
+            { offset: 1, color: '#52c41a' },
+          ]);
         },
       },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
+      label: {
         show: true,
-        offsetCenter: [0, '-10%'],
+        position: 'left',
+        formatter: '{b}: ',
         fontSize: 15,
-        color: '#fafafa',
+        color: '#fff',
       },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, '30%'],
-        fontSize: 15,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 1,
-        },
-      ],
+      data: category.value,
+      z: 1,
+      animationEasing: 'elasticOut',
     },
     {
-      name: '系统CPU',
-      type: 'gauge',
-      center: ['50%', '45%'],
-      radius: '65%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
+      // 分隔
+      type: 'pictorialBar',
       itemStyle: {
-        color: '#1890ff',
+        color: '#0a3ca0',
       },
-      progress: {
-        show: true,
-        width: 20,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 20,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, '-10%'],
-        fontSize: 15,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, '30%'],
-        fontSize: 15,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
-        },
-      ],
+      symbolRepeat: 'fixed',
+      symbolMargin: 6,
+      symbol: 'rect',
+      symbolClip: true,
+      symbolSize: [1, 12],
+      symbolPosition: 'start',
+      symbolOffset: [0, -1],
+      symbolBoundingData: total,
+      data: category.value,
+      z: 2,
+      animationEasing: 'elasticOut',
     },
     {
-      name: '网元内存',
-      type: 'gauge',
-      center: ['85%', '45%'],
-      radius: '65%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
+      // 外边框
+      type: 'pictorialBar',
+      symbol: 'rect',
+      symbolBoundingData: total,
       itemStyle: {
-        color: '#1890ff',
+        color: 'transparent',
       },
-      progress: {
-        show: true,
-        width: 20,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 20,
+      label: {
+        formatter: params => {
+          var text = `{a|  ${params.value}%} `;
+          if (+params.value >= 70) {
+            text = `{c|  ${params.value}%} `;
+          } else if (+params.value >= 30) {
+            text = `{b|  ${params.value}%} `;
+          }
+          return text;
         },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, '-10%'],
-        fontSize: 15,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, '30%'],
-        fontSize: 15,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
+        rich: {
+          a: {
+            color: '#52c41a', // 绿
+            fontSize: 16,
+          },
+          b: {
+            color: '#2f54eb', // 蓝
+            fontSize: 16,
+          },
+          c: {
+            color: '#f5222d', // 红
+            fontSize: 16,
+          },
+          f: {
+            color: '#ffffff', // 默认
+            fontSize: 16,
+          },
         },
-      ],
+        position: 'right',
+        distance: 0, // 向右偏移位置
+        show: true,
+      },
+      data: category.value,
+      z: 0,
+      animationEasing: 'elasticOut',
+    },
+    {
+      name: '外框',
+      type: 'bar',
+      barGap: '-120%', // 设置外框粗细
+      data: [total, total, total],
+      barWidth: 14,
+      itemStyle: {
+        color: 'transparent', // 填充色
+        borderColor: '#0a3ca0', // 边框色
+        borderWidth: 1, // 边框宽度
+        borderRadius: 1, //圆角半径
+      },
+      label: {
+        // 标签显示位置
+        show: false,
+        position: 'top', // insideTop 或者横向的 insideLeft
+      },
+      z: 0,
     },
   ],
 };
@@ -223,12 +218,14 @@ function handleRanderChart(
   option: EChartsOption
 ) {
   if (!container) return;
-  neResourcesChart.value = echarts.init(container, 'light');
+  neResourcesChart.value = markRaw(echarts.init(container, 'light'));
   option && neResourcesChart.value.setOption(option);
 
   // 创建 ResizeObserver 实例
-  var observer = new ResizeObserver(function (entries) {
-    neResourcesChart.value.resize();
+  var observer = new ResizeObserver(entries => {
+    if (neResourcesChart.value) {
+      neResourcesChart.value.resize();
+    }
   });
   // 监听元素大小变化
   observer.observe(container);
@@ -240,75 +237,45 @@ function fnChangeData(data: any[], itemID: string) {
     info = data.find((item: any) => item.id === 'OMC');
     graphNodeClickID.value = 'OMC';
   }
-  let sysMemUsage = 0;
+  // console.log(info.id);
+  // console.log(info.neState.cpu.nfCpuUsage);
+  // console.log(info.neState.cpu.sysCpuUsage);
+  // console.log(info.neState.mem.sysMemUsage);
   let sysCpuUsage = 0;
   let nfCpuUsage = 0;
   if (info.neState.cpu) {
     nfCpuUsage = info.neState.cpu.nfCpuUsage;
-    if (nfCpuUsage > 1000) {
+    if (nfCpuUsage > 100) {
       nfCpuUsage = +(info.neState.cpu.nfCpuUsage / 100).toFixed(2);
     }
     sysCpuUsage = info.neState.cpu.sysCpuUsage;
-    if (nfCpuUsage > 1000) {
+    if (sysCpuUsage > 100) {
       sysCpuUsage = +(info.neState.cpu.sysCpuUsage / 100).toFixed(2);
     }
   }
+
+  let sysMemUsage = 0;
   if (info.neState.mem) {
     let men = info.neState.mem.sysMemUsage;
-    if (men > 1000) {
+    if (men > 100) {
       men = +(men / 100).toFixed(2);
     }
     sysMemUsage = men;
   }
 
-  function colorStyle(v: number): string {
-    let color = '#1890ff';
-    if (v < 30) {
-      color = '#73d13d';
-    }
-    if (v > 60) {
-      color = '#ff4d4f';
-    }
-    return color;
-  }
-
+  category.value[0].value = sysMemUsage;
+  category.value[1].value = sysCpuUsage;
+  category.value[2].value = nfCpuUsage;
   neResourcesChart.value.setOption({
     series: [
       {
-        data: [
-          {
-            name: '系统内存',
-            value: sysMemUsage,
-            itemStyle: {
-              color: colorStyle(sysMemUsage),
-              shadowColor: colorStyle(sysMemUsage),
-            },
-          },
-        ],
+        data: category.value,
       },
       {
-        data: [
-          {
-            name: '系统CPU',
-            value: sysCpuUsage,
-            itemStyle: {
-              color: colorStyle(sysCpuUsage),
-              shadowColor: colorStyle(sysCpuUsage),
-            },
-          },
-        ],
+        data: category.value,
       },
       {
-        data: [
-          {
-            name: '网元CPU',
-            value: nfCpuUsage,
-            itemStyle: {
-              color: colorStyle(nfCpuUsage),
-              shadowColor: colorStyle(nfCpuUsage),
-            },
-          },
-        ],
+        data: category.value,
       },
     ],
   });
@@ -330,43 +297,30 @@ watch(graphNodeClickID, v => {
 
 onMounted(() => {
   // setInterval(function () {
+  //   var ndata = [
+  //     {
+  //       name: '系统内存',
+  //       value: Math.round(Math.random() * 100),
+  //     },
+  //     {
+  //       name: '系统CPU',
+  //       value: Math.round(Math.random() * 100),
+  //     },
+  //     {
+  //       name: '网元CPU',
+  //       value: Math.round(Math.random() * 100),
+  //     },
+  //   ];
   //   neResourcesChart.value.setOption({
   //     series: [
   //       {
-  //         data: [
-  //           {
-  //             name: '系统内存',
-  //             value: sysMemUsage,
-  //             itemStyle: {
-  //               color: colorStyle(sysMemUsage),
-  //               shadowColor: colorStyle(sysMemUsage),
-  //             },
-  //           },
-  //         ],
+  //         data: ndata,
   //       },
   //       {
-  //         data: [
-  //           {
-  //             name: '系统CPU',
-  //             value: sysCpuUsage,
-  //             itemStyle: {
-  //               color: colorStyle(sysCpuUsage),
-  //               shadowColor: colorStyle(sysCpuUsage),
-  //             },
-  //           },
-  //         ],
+  //         data: ndata,
   //       },
   //       {
-  //         data: [
-  //           {
-  //             name: '网元CPU',
-  //             value: nfCpuUsage,
-  //             itemStyle: {
-  //               color: colorStyle(nfCpuUsage),
-  //               shadowColor: colorStyle(nfCpuUsage),
-  //             },
-  //           },
-  //         ],
+  //         data: ndata,
   //       },
   //     ],
   //   });
diff --git a/src/views/dashboard/overview/components/UEEvent/index.vue b/src/views/dashboard/overview/components/UEEvent/index.vue
index 429e7eda..136cb86a 100644
--- a/src/views/dashboard/overview/components/UEEvent/index.vue
+++ b/src/views/dashboard/overview/components/UEEvent/index.vue
@@ -8,13 +8,13 @@ onMounted(() => {});
 </script>
 
 <template>
-  <div class="cdr" style="display: block">
-    <div class="cdr-head">
+  <div class="ue" style="display: block">
+    <div class="ue-head">
       <span class="col">IMSI</span>
       <span class="col">行为</span>
       <span class="col-w">信息</span>
     </div>
-    <div class="cdr-marquee-view">
+    <div class="ue-marquee-view">
       <div
         class="row"
         :class="{ 'row-new': item.id === ueEventId }"
@@ -30,22 +30,27 @@ onMounted(() => {});
 </template>
 
 <style lang="less" scoped>
-.cdr {
+.ue {
+  height: 88%;
+
   &-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;
+    justify-content: flex-start;
     line-height: 1.05;
     & .col {
-      width: 3.2rem;
+      min-width: 3.2rem;
+      width: 30%;
+      margin-right: 1rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       &-w {
-        width: 8.4rem;
+        min-width: 8.4rem;
+        width: 60%;
       }
     }
   }
@@ -53,7 +58,7 @@ onMounted(() => {});
   &-marquee-view {
     overflow-x: hidden;
     overflow-y: auto;
-    height: 70%;
+    height: 92%;
 
     /* 修改滚动条的样式 */
     &::-webkit-scrollbar {
@@ -73,16 +78,18 @@ onMounted(() => {});
     }
 
     & .row {
-      line-height: 1.05;
-      padding: 0.5rem 1.5rem;
+      line-height: 1.5;
+      padding: 0 1.5rem;
       color: #61a8ff;
       font-size: 0.75rem;
       position: relative;
       display: flex;
       justify-content: space-between;
+      cursor: context-menu;
       &-new {
         color: #fff;
         animation: backInRight 0.3s alternate;
+        font-size: 0.95rem;
       }
       @keyframes backInRight {
         0% {
@@ -104,12 +111,18 @@ onMounted(() => {});
         }
       }
       & .col {
-        width: 3.2rem;
+        min-width: 3.2rem;
+        width: 30%;
+        margin-right: 1rem;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         &-w {
-          width: 8.4rem;
+          min-width: 8.4rem;
+          width: 60%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
       }
     }
diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css
index d3f9a801..8f7b0f1b 100644
--- a/src/views/dashboard/overview/css/index.css
+++ b/src/views/dashboard/overview/css/index.css
@@ -9,6 +9,8 @@
   padding: 5rem 0.833rem 0;
   line-height: 1.15;
   background-color: #101129;
+  height: 100vh;
+  margin-bottom: -20px;
 }
 
 .column {
@@ -113,8 +115,8 @@
 
 /* 本月告警统计 */
 .alarmType {
-  height: 16rem;
-  display: flex;
+  min-height: 13rem;
+  height: 25%;
 }
 .alarmType .chart {
   width: 100%;
@@ -122,13 +124,12 @@
   margin-top: 1rem;
 }
 
-
-/* 告警趋势 */
-.alarmDay {
-  height: 22rem;
-  display: flex;
+/* cdr会话监控 */
+.cdrEvent {
+  min-height: 22rem;
+  height: 60%;
 }
-.alarmDay .inner .chart {
+.cdrEvent .inner .chart {
   width: 100%;
   height: 100%;
   margin-top: 1rem;
@@ -136,7 +137,8 @@
 
 /* 总流量 */
 .totalFlow {
-  height: 6.167rem;
+  min-height: 6.167rem;
+  height: 12%;
 }
 .totalFlow .inner .filter {
   display: flex;
@@ -179,8 +181,8 @@
 
 /* 资源情况 */
 .resources {
-  height: 16rem;
-  display: flex;
+  min-height: 13rem;
+  height: 25%;
 }
 .resources .inner .chart {
   width: 100%;
@@ -188,12 +190,12 @@
   margin-top: 1rem;
 }
 
-/* 会话监控 */
-.cdr {
-  height: 22rem;
-  display: flex;
+/* ue会话监控 */
+.ueEvent {
+  min-height: 22rem;
+  height: 60%;
 }
-.cdr .inner .chart {
+.ueEvent .inner .chart {
   width: 100%;
   height: 100%;
   margin-top: 1rem;
diff --git a/src/views/dashboard/overview/hooks/useCDREvent.ts b/src/views/dashboard/overview/hooks/useCDREvent.ts
new file mode 100644
index 00000000..1078d2f2
--- /dev/null
+++ b/src/views/dashboard/overview/hooks/useCDREvent.ts
@@ -0,0 +1,10 @@
+import { ref } from 'vue';
+
+/**事件数据 */
+export const cdrEventData = ref<Record<string, any>[]>([]);
+
+/**事件总量 */
+export const cdrEventTotal = ref<number>(0);
+
+/**事件推送id */
+export const cdrEventId = ref<string>('');
diff --git a/src/views/dashboard/overview/hooks/useWS.ts b/src/views/dashboard/overview/hooks/useWS.ts
index 09615167..e8a8b26c 100644
--- a/src/views/dashboard/overview/hooks/useWS.ts
+++ b/src/views/dashboard/overview/hooks/useWS.ts
@@ -5,6 +5,7 @@ import {
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { ueEventData, ueEventId, ueEventTotal } from './useUEEvent';
+import { cdrEventData, cdrEventTotal, cdrEventId } from './useCDREvent';
 
 /**websocket连接 */
 export default function useWS() {
@@ -15,6 +16,36 @@ export default function useWS() {
     ws.send(data);
   }
 
+  function wsInitData() {
+    // cdrEvent CDR会话事件
+    ws.send({
+      requestId: '1005',
+      type: 'cdr',
+      data: {
+        neType: 'IMS',
+        neId: '001',
+        sortField: 'timestamp',
+        sortOrder: 'desc',
+        pageNum: 1,
+        pageSize: 50,
+      },
+    });
+
+    // ueEvent UE会话事件
+    ws.send({
+      requestId: '1010',
+      type: 'ue',
+      data: {
+        neType: 'AMF',
+        neId: '001',
+        sortField: 'timestamp',
+        sortOrder: 'desc',
+        pageNum: 1,
+        pageSize: 50,
+      },
+    });
+  }
+
   /**接收数据后回调 */
   function wsMessage(res: Record<string, any>) {
     console.log(res);
@@ -42,6 +73,23 @@ export default function useWS() {
           }
         }
         break;
+      //cdrEvent CDR会话事件
+      case '1005':
+        if (Array.isArray(data.rows)) {
+          cdrEventTotal.value = data.total;
+          const evDataArr: Record<string, any>[] = [];
+          for (const item of data.rows) {
+            const v = cdrEventParse(item);
+            if (v) {
+              evDataArr.push(v);
+            }
+          }
+          cdrEventData.value = evDataArr;
+          if (evDataArr.length > 0) {
+            cdrEventId.value = evDataArr[0].id;
+          }
+        }
+        break;
     }
 
     if (!data?.groupId) {
@@ -59,30 +107,25 @@ export default function useWS() {
           }
         }
         break;
+      // cdrEvent CDR会话事件
+      case '1005':
+        if (data.data) {
+          const v = cdrEventParse(data.data);
+          if (v) {
+            cdrEventData.value.unshift(v);
+            cdrEventId.value = v.id;
+          }
+        }
+        break;
     }
   }
 
-  function wsInitData() {
-    ws.send({
-      requestId: '1010',
-      type: 'ue',
-      data: {
-        neType: 'AMF',
-        neId: '001',
-        sortField: 'timestamp',
-        sortOrder: 'desc',
-        pageNum: 1,
-        pageSize: 50,
-      },
-    });
-  }
-
   /**ueEvent UE会话事件 数据解析 */
   function ueEventParse(item: Record<string, any>) {
     let evData: Record<string, any> = item.eventJSON;
     if (typeof evData === 'string') {
       try {
-        evData = JSON.parse(item.eventJSON);
+        evData = JSON.parse(evData);
       } catch (error) {
         console.error(error);
         return false;
@@ -120,6 +163,29 @@ export default function useWS() {
     }
   }
 
+  /**cdrEvent CDR会话事件 数据解析 */
+  function cdrEventParse(item: Record<string, any>) {
+    let evData: Record<string, any> = item.cdrJSON || item.CDR;
+    if (typeof evData === 'string') {
+      try {
+        evData = JSON.parse(evData);
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    }
+
+    if (evData.recordType === 'CALL') {
+      return {
+        id: item.id || item.timestamp,
+        type: evData.recordType,
+        time: evData.callDuration,
+        call: evData.callReference,
+        msg: `${evData.calledParty} -> ${evData.callerParty}`,
+      };
+    }
+  }
+
   /**接收数据后回调 */
   function wsError(ev: any) {
     // 接收数据后回调
@@ -133,8 +199,9 @@ export default function useWS() {
         /**订阅通道组
          *
          * UE会话事件-AMF (GroupID:1010)
+         * CDR会话事件-IMS (GroupID:1005)
          */
-        subGroupID: '1010',
+        subGroupID: '1010,1005',
       },
       onmessage: wsMessage,
       onerror: wsError,
diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue
index 968b7561..2cbc038c 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -4,6 +4,7 @@ import useI18n from '@/hooks/useI18n';
 import Topology from './components/Topology/index.vue';
 import NeResources from './components/NeResources/index.vue';
 import UEEvent from './components/UEEvent/index.vue';
+import CDREvent from './components/CDREvent/index.vue';
 import AlarnDayLine from './components/AlarnDayLine/index.vue';
 import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
 import UPFFlow from './components/UPFFlow/index.vue';
@@ -136,7 +137,7 @@ onMounted(() => {
         </div>
       </div>
 
-      <!--本月告警统计-->
+      <!--告警统计-->
       <div class="alarmType panel">
         <div class="inner">
           <h3>告警统计</h3>
@@ -146,12 +147,14 @@ onMounted(() => {
         </div>
       </div>
 
-      <!-- 告警趋势 -->
-      <div class="alarmDay panel">
+      <!-- CDR会话 -->
+      <div class="cdrEvent panel">
         <div class="inner">
-          <h3>告警趋势</h3>
+          <h3>
+            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp; CDR会话
+          </h3>
           <div class="chart">
-            <AlarnDayLine />
+            <CDREvent />
           </div>
         </div>
       </div>
@@ -219,11 +222,11 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <!-- 会话监控 -->
-      <div class="cdr panel">
+      <!-- UE会话 -->
+      <div class="ueEvent panel">
         <div class="inner">
           <h3>
-            <WhatsAppOutlined style="color: #d93f36" />&nbsp;&nbsp; 会话监控
+            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp; UE会话
           </h3>
           <div class="chart">
             <UEEvent />