Merge remote-tracking branch 'origin/lichang'

src/api/neData/smf.ts

@@ -10,6 +10,7 @@ export function listSMFDataCDR(query: Record<string, any>) {
     url: '/neData/smf/cdr/list',
     method: 'get',
     params: query,
+    timeout: 60_000,
   });
 }
 

src/utils/parse-utils.ts

@@ -171,8 +171,8 @@ export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any {
 }
 
 /**
- * 字节数转换单位
+ * 位数据转换单位
- * @param bits 字节Bit大小 64009540 = 512.08 MB
+ * @param bits 位Bit大小 64009540 = 512.08 MB
  * @returns xx B / KB / MB / GB / TB / PB / EB / ZB / YB
  */
 export function parseSizeFromBits(bits: number | string): string {
@@ -181,7 +181,28 @@ export function parseSizeFromBits(bits: number | string): string {
   bits = bits * 8;
   const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   const unitIndex = Math.floor(Math.log2(bits) / 10);
-  const value = (bits / Math.pow(1000, unitIndex)).toFixed(2);
+  const value = bits / Math.pow(1000, unitIndex);
   const unti = units[unitIndex];
+  if (unitIndex > 0) {
+    return `${value.toFixed(2)} ${unti}`;
+  }
+  return `${value} ${unti}`;
+}
+
+/**
+ * 字节数转换单位
+ * @param byte 字节Byte大小 64009540 = 512.08 MB
+ * @returns xx B / KB / MB / GB / TB / PB / EB / ZB / YB
+ */
+export function parseSizeFromByte(byte: number | string): string {
+  byte = Number(byte) || 0;
+  if (byte <= 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const unitIndex = Math.floor(Math.log2(byte) / 10);
+  const unti = units[unitIndex];
+  const value = byte / Math.pow(1000, unitIndex);
+  if (unitIndex > 0) {
+    return `${value.toFixed(2)} ${unti}`;
+  }
   return `${value} ${unti}`;
 }

src/views/dashboard/smfCDR/index.vue

@@ -88,7 +88,7 @@ let tableState: TabeStateType = reactive({
 });
 
 /**表格字段列 */
-let tableColumns: ColumnsType = [
+let tableColumns = ref<ColumnsType>([
   {
     title: t('common.rowId'),
     dataIndex: 'id',
@@ -225,7 +225,7 @@ let tableColumns: ColumnsType = [
     key: 'id',
     align: 'left',
   },
-];
+]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -780,14 +780,14 @@ onBeforeUnmount(() => {
               </a-divider>
 
               <div v-for="u in record.cdrJSON.listOfMultipleUnitUsage">
-                <div>RatingGroup: {{ u.ratingGroup }}</div>
+                <!-- <div>RatingGroup: {{ u.ratingGroup }}</div> -->
                 <div
                   v-for="(udata, i) in u.usedUnitContainer"
                   style="display: flex"
                 >
-                  <strong style="margin-right: 12px">
+                  <!-- <strong style="margin-right: 12px">
                     {{ i }}
-                  </strong>
+                  </strong> -->
                   <div>
                     <div>
                       <span>Data Total Volume: </span>
@@ -801,10 +801,10 @@ onBeforeUnmount(() => {
                       <span>Data Volume Uplink: </span>
                       <span>{{ udata.dataVolumeUplink }}</span>
                     </div>
-                    <div>
+                    <!-- <div>
                       <span>Time: </span>
                       <span>{{ udata.time }}</span>
-                    </div>
+                    </div> -->
                   </div>
                 </div>
               </div>

src/views/dashboard/smfCDRByIMSI/index.vue

@@ -0,0 +1,664 @@
+<script setup lang="ts">
+import * as echarts from 'echarts/core';
+import {
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+} from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+]);
+
+import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import useI18n from '@/hooks/useI18n';
+import { listSMFDataCDR } from '@/api/neData/smf';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import { parseSizeFromByte } from '@/utils/parse-utils';
+import { message } from 'ant-design-vue';
+import useNeInfoStore from '@/store/modules/neinfo';
+import dayjs, { Dayjs } from 'dayjs';
+const { t, currentLocale } = useI18n();
+const ws = new WS();
+
+/**图DOM节点实例对象 */
+const cdrChartDom = ref<HTMLElement | undefined>(undefined);
+/**图实例对象 */
+let cdrChart: echarts.ECharts | null = null;
+/**图表配置 */
+const option = {
+  title: {
+    text: 'Data Volume Uplink	/ Downlink',
+    left: 'left',
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      animation: true,
+    },
+    formatter: (params: any) => {
+      const title = params[0].name;
+      let uplinkValue = 0;
+      let downlinkValue = 0;
+      if (params[0].seriesName === 'Uplink') {
+        uplinkValue = params[0].value;
+      } else {
+        downlinkValue = params[0].value;
+      }
+      if (params[1].seriesName === 'Uplink') {
+        uplinkValue = params[1].value;
+      } else {
+        downlinkValue = params[1].value;
+      }
+      const uplinkValueF = parseSizeFromByte(uplinkValue);
+      const downlinkValueF = parseSizeFromByte(downlinkValue);
+      return `
+      <div style="font-weight: bold;">${title}</div>
+      <div>Uplink: ${uplinkValueF}</div>
+      <div>Downlink: ${downlinkValueF}</div>
+      `;
+    },
+  },
+  toolbox: {
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none',
+      },
+      saveAsImage: {},
+    },
+  },
+  axisPointer: {
+    link: [
+      {
+        xAxisIndex: 'all',
+      },
+    ],
+  },
+  dataZoom: [
+    {
+      show: true,
+      realtime: true,
+      start: 0,
+      end: 100,
+      xAxisIndex: [0, 1],
+    },
+    {
+      type: 'inside',
+      realtime: true,
+      start: 0,
+      end: 100,
+      xAxisIndex: [0, 1],
+    },
+  ],
+  grid: [
+    {
+      left: '10%',
+      right: 50,
+      height: '30%',
+    },
+    {
+      left: '10%',
+      right: 50,
+      top: '50%',
+      height: '30%',
+    },
+  ],
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { onZero: true },
+      data: [], // x轴初始数据
+      axisLabel: {
+        show: true, // 显示标签
+        rotate: 15, // 设置倾斜角度（如15度）
+      },
+    },
+    {
+      gridIndex: 1,
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { onZero: true },
+      data: [], // x轴初始数据
+      axisLabel: {
+        show: false, // 隐藏第二个 x 轴的标签
+      },
+      position: 'top',
+    },
+  ],
+  yAxis: [
+    {
+      name: 'Uplink (Byte)',
+      type: 'value',
+    },
+    {
+      gridIndex: 1,
+      name: 'Downlink (Byte)',
+      type: 'value',
+      inverse: true,
+    },
+  ],
+  series: [
+    {
+      name: 'Uplink',
+      type: 'line',
+      data: [], // y轴初始数据
+      symbol: 'circle', // 数据点形状
+      symbolSize: 6, // 数据点大小
+      smooth: true, // 平滑曲线
+      color: 'rgb(17, 178, 255)',
+      areaStyle: {
+        color: {
+          colorStops: [
+            { offset: 0, color: 'rgba(17, 178, 255, .5)' },
+            { offset: 1, color: 'rgba(17, 178, 255, 0.5)' },
+          ],
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          type: 'linear',
+          global: false,
+        },
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 10,
+      },
+    },
+    {
+      name: 'Downlink',
+      type: 'line',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      data: [], // y轴初始数据
+      symbol: 'circle', // 数据点形状
+      symbolSize: 6, // 数据点大小
+      smooth: true, // 平滑曲线
+      color: 'rgb(0, 190, 99)',
+      areaStyle: {
+        color: {
+          colorStops: [
+            { offset: 0, color: 'rgba(0, 190, 99, .5)' },
+            { offset: 1, color: 'rgba(0, 190, 99, 0.5)' },
+          ],
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          type: 'linear',
+          global: false,
+        },
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 10,
+      },
+    },
+  ],
+};
+/**绘制图表 */
+function fnRanderChart() {
+  const container: HTMLElement | undefined = cdrChartDom.value;
+  if (!container) return;
+  const locale = currentLocale.value.split('_')[0];
+  cdrChart = echarts.init(container, 'light', {
+    // https://github.com/apache/echarts/tree/release/src/i18n 取值langEN.ts ==> EN
+    locale: locale.toUpperCase(),
+  });
+  cdrChart.setOption(option);
+  // cdrChart.showLoading('default', {
+  //   text: 'Please enter IMSI to query user traffic',
+  //   fontSize: 16, // 字体大小
+  // });
+
+  // 创建 ResizeObserver 实例 监听图表容器大小变化，并在变化时调整图表大小
+  var observer = new ResizeObserver(entries => {
+    if (cdrChart) {
+      cdrChart.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+}
+
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**开始结束时间 */
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: 'SMF',
+  neId: '001',
+  subscriberID: '',
+  sortField: 'timestamp',
+  sortOrder: 'desc',
+  /**开始时间 */
+  startTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 1000,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
+  fnGetList(1);
+}
+
+let state = reactive({
+  /**表格数据 */
+  data: [] as any[],
+  /**表格总数 */
+  total: 0,
+  /**表格加载状态 */
+  loading: false,
+});
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (state.loading) return;
+  state.loading = true;
+  if (!queryParams.subscriberID) {
+    message.warning('Please enter IMSI to query user traffic');
+    state.loading = false;
+    return;
+  }
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  if (cdrChart) {
+    cdrChart.showLoading('default', {
+      text: 'Loading...',
+      fontSize: 16, // 字体大小
+    });
+  }
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
+  }
+
+  listSMFDataCDR(toRaw(queryParams))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+        state.total = res.total;
+        // 遍历处理cdr字符串数据
+        state.data = res.rows
+          .map(item => {
+            let cdrJSON = item.cdrJSON;
+            if (!cdrJSON) {
+              Reflect.set(item, 'cdrJSON', {});
+            }
+
+            try {
+              cdrJSON = JSON.parse(cdrJSON);
+              Reflect.set(item, 'cdrJSON', cdrJSON);
+            } catch (error) {
+              console.error(error);
+              Reflect.set(item, 'cdrJSON', {});
+            }
+
+            return item;
+          })
+          .reverse();
+      }
+    })
+    .finally(() => {
+      state.loading = false;
+      fnRanderChartDataLoad();
+    });
+}
+
+/**图表配置数据x轴 */
+let dataTimeXAxisData: string[] = [];
+/**图表配置数据y轴 */
+let dataVolumeUplinkYSeriesData: number[] = [];
+let dataVolumeDownlinkYSeriesData: number[] = [];
+/**图表数据渲染 */
+function fnRanderChartDataLoad() {
+  if (!cdrChart) return;
+  dataTimeXAxisData = [];
+  dataVolumeUplinkYSeriesData = [];
+  dataVolumeDownlinkYSeriesData = [];
+  if (state.data.length > 0) {
+    // 处理数据渲染图表
+    for (const item of state.data) {
+      if (!item.cdrJSON.invocationTimestamp) {
+        break;
+      }
+      // 时间
+      const dataTime = item.cdrJSON.invocationTimestamp;
+      const listOfMultipleUnitUsage = item.cdrJSON.listOfMultipleUnitUsage;
+      if (
+        !Array.isArray(listOfMultipleUnitUsage) ||
+        listOfMultipleUnitUsage.length < 1
+      ) {
+        return 0;
+      }
+      // 数据
+      let dataVolumeUplink = 0;
+      let dataVolumeDownlink = 0;
+      for (const v of listOfMultipleUnitUsage) {
+        if (Array.isArray(v.usedUnitContainer)) {
+          for (const used of v.usedUnitContainer) {
+            dataVolumeUplink += +used.dataVolumeUplink;
+            dataVolumeDownlink += +used.dataVolumeDownlink;
+          }
+        }
+      }
+
+      dataTimeXAxisData.push(dataTime);
+      dataVolumeUplinkYSeriesData.push(dataVolumeUplink);
+      dataVolumeDownlinkYSeriesData.push(dataVolumeDownlink);
+    }
+    // 绘制图数据
+    fnRanderChartDataUpdate();
+  } else {
+    cdrChart.showLoading('default', {
+      text: 'No Data',
+      fontSize: 16, // 字体大小
+    });
+    cdrChart.setOption({
+      title: {
+        text: `Data Volume Uplink	/ Downlink By IMSI ${queryParams.subscriberID}`,
+      },
+      xAxis: [
+        {
+          data: dataTimeXAxisData,
+        },
+        {
+          data: dataTimeXAxisData,
+        },
+      ],
+      series: [
+        {
+          data: dataVolumeUplinkYSeriesData,
+        },
+        {
+          data: dataVolumeDownlinkYSeriesData,
+        },
+      ],
+    });
+  }
+}
+/**图表数据渲染 */
+function fnRanderChartDataUpdate() {
+  if (cdrChart == null) return;
+  // 绘制图数据
+  cdrChart.setOption({
+    title: {
+      text: `Data Volume By IMSI ${queryParams.subscriberID}`,
+    },
+    xAxis: [
+      {
+        data: dataTimeXAxisData,
+      },
+      {
+        data: dataTimeXAxisData,
+      },
+    ],
+    series: [
+      {
+        data: dataVolumeUplinkYSeriesData,
+      },
+      {
+        data: dataVolumeDownlinkYSeriesData,
+      },
+    ],
+  });
+  cdrChart.hideLoading();
+}
+
+/**
+ * 实时数据
+ */
+function fnRealTime() {
+  if (ws.state() === WebSocket.OPEN) {
+    ws.close();
+  }
+  // 建立链接
+  const options: OptionsType = {
+    url: '/ws',
+    params: {
+      /**订阅通道组
+       *
+       * CDR会话事件-SMF (GroupID:1006)
+       */
+      subGroupID: `1006_${queryParams.neId}`,
+    },
+    onmessage: (res: Record<string, any>) => {
+      const { code, requestId, data } = res;
+      if (code === RESULT_CODE_ERROR) {
+        console.warn(res.msg);
+        return;
+      }
+
+      // 订阅组信息
+      if (!data?.groupId) {
+        return;
+      }
+      // cdrEvent CDR会话事件
+      if (data.groupId === `1006_${queryParams.neId}`) {
+        const cdrEvent = data.data;
+        // 对应结束时间内
+        if (queryParams.endTime) {
+          const endTime = Math.round(queryParams.endTime / 1000);
+          if (cdrEvent.timestamp > endTime) {
+            return;
+          }
+        }
+        const cdrJSON = cdrEvent.CDR;
+        if (!cdrJSON.invocationTimestamp) {
+          return;
+        }
+        // 对应IMSI
+        if (
+          cdrJSON.subscriberIdentifier.subscriptionIDData !==
+          queryParams.subscriberID
+        ) {
+          return;
+        }
+
+        // 时间
+        const dataTime = cdrJSON.invocationTimestamp;
+        const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
+        if (
+          !Array.isArray(listOfMultipleUnitUsage) ||
+          listOfMultipleUnitUsage.length < 1
+        ) {
+          return 0;
+        }
+        // 数据
+        let dataVolumeUplink = 0;
+        let dataVolumeDownlink = 0;
+        for (const v of listOfMultipleUnitUsage) {
+          if (Array.isArray(v.usedUnitContainer)) {
+            for (const used of v.usedUnitContainer) {
+              dataVolumeUplink += +used.dataVolumeUplink;
+              dataVolumeDownlink += +used.dataVolumeDownlink;
+            }
+          }
+        }
+        // 添加数据
+        dataTimeXAxisData.push(dataTime);
+        dataVolumeUplinkYSeriesData.push(dataVolumeUplink);
+        dataVolumeDownlinkYSeriesData.push(dataVolumeDownlink);
+        fnRanderChartDataUpdate();
+      }
+    },
+    onerror: (ev: any) => {
+      console.error(ev);
+    },
+  };
+  ws.connect(options);
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'SMF') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      fnRanderChart();
+      fnRealTime();
+    });
+});
+
+onBeforeUnmount(() => {
+  ws.close();
+  if (cdrChart) {
+    cdrChart.clear();
+    cdrChart.dispose();
+  }
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="SMF" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnRealTime()"
+                :disabled="state.loading"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="IMSI" name="subscriberID" :required="true">
+              <a-input
+                v-model:value="queryParams.subscriberID"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="40"
+                :disabled="state.loading"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.time')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                :presets="rangePickerPresets"
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                :disabled="state.loading"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button
+                  type="primary"
+                  @click.prevent="fnGetList(1)"
+                  :loading="state.loading"
+                >
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button
+                  type="default"
+                  @click.prevent="fnQueryReset"
+                  :disabled="state.loading"
+                >
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false">
+      <!-- 图数据 -->
+      <div ref="cdrChartDom" style="height: 600px; width: 100%"></div>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped></style>