feat: 优化图表显示逻辑，移除不必要的状态判断

src/views/dashboard/smfCDRByIMSI/index.vue

@@ -24,7 +24,14 @@ echarts.use([
   UniversalTransition,
 ]);
 
-import { reactive, onMounted, toRaw, onBeforeUnmount, ref, nextTick, watch } from 'vue';
+import {
+  reactive,
+  onMounted,
+  toRaw,
+  onBeforeUnmount,
+  ref,
+  nextTick,
+} from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import useI18n from '@/hooks/useI18n';
@@ -287,32 +294,15 @@ let state = reactive({
   loading: false,
   /**数据总量 up,down */
   dataUsage: ['0 B', '0 B'],
-  /**是否显示图表 */
-  showChart: false,
 });
 
 /**查询列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (state.loading) return;
   state.loading = true;
-
-  // 根据subscriberID是否为完整的15位决定是否显示图表
-  // 15位subscriberID表示查询单个用户，显示图表
-  // 少于15位表示模糊查询多个用户，隐藏图表
-  state.showChart = queryParams.subscriberID && queryParams.subscriberID.length === 15;
-
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-
-  // 只有当显示图表时才操作图表
-  if (state.showChart && cdrChart) {
-    cdrChart.showLoading('default', {
-      text: 'Loading...',
-      fontSize: 16, // 字体大小
-    });
-  }
-
   // 时间范围
   if (
     Array.isArray(queryRangePicker.value) &&
@@ -352,9 +342,55 @@ function fnGetList(pageNum?: number) {
     })
     .finally(() => {
       state.loading = false;
-      fnRanderChartDataLoad();
+
+      // 根据subscriberID是否为完整的15位决定是否显示图表
+      // 15位subscriberID表示查询单个用户，显示图表
+      // 少于15位表示模糊查询多个用户，隐藏图表
+      if (queryParams.subscriberID && queryParams.subscriberID.length === 15) {
+        // 只有当显示图表时才操作图表
+        if (cdrChart) {
+          cdrChart.showLoading('default', {
+            text: 'Loading...',
+            fontSize: 16, // 字体大小
+          });
+        }
+        fnRanderChartDataLoad();
+      } else {
+        fnSumDataUsage();
+      }
     });
 }
+// 无搜索IMSI, 累加总量
+function fnSumDataUsage() {
+  // 累加总量
+  let uplinkTotal = 0;
+  let downlinkTotal = 0;
+  for (const item of state.data) {
+    if (!item.cdrJSON.invocationTimestamp) {
+      continue;
+    }
+    const listOfMultipleUnitUsage = item.cdrJSON.listOfMultipleUnitUsage;
+    if (
+      !Array.isArray(listOfMultipleUnitUsage) ||
+      listOfMultipleUnitUsage.length < 1
+    ) {
+      continue;
+    }
+    // 数据
+    for (const v of listOfMultipleUnitUsage) {
+      if (Array.isArray(v.usedUnitContainer)) {
+        for (const used of v.usedUnitContainer) {
+          uplinkTotal += +used.dataVolumeUplink;
+          downlinkTotal += +used.dataVolumeDownlink;
+        }
+      }
+    }
+  }
+  state.dataUsage = [
+    parseSizeFromByte(uplinkTotal, 'MB'),
+    parseSizeFromByte(downlinkTotal, 'MB'),
+  ];
+}
 
 /**图表配置数据x轴 */
 let dataTimeXAxisData: string[] = [];
@@ -363,9 +399,6 @@ let dataVolumeUplinkYSeriesData: number[] = [];
 let dataVolumeDownlinkYSeriesData: number[] = [];
 /**图表数据渲染 */
 function fnRanderChartDataLoad() {
-  // 如果不显示图表，则不进行图表相关操作
-  if (!state.showChart) return;
-
   // 如果需要显示图表但图表未初始化，则先初始化图表
   if (!cdrChart) {
     // 使用 nextTick 确保DOM已更新
@@ -439,7 +472,7 @@ function fnRanderChartDataLoad() {
 }
 /**图表数据渲染 */
 function fnRanderChartDataUpdate() {
-  if (!state.showChart || cdrChart == null) return;
+  if (cdrChart == null) return;
   // 绘制图数据
   cdrChart.setOption({
     title: {
@@ -561,16 +594,6 @@ function fnRealTime() {
   ws.connect(options);
 }
 
-// 监听图表显示状态变化
-watch(() => state.showChart, (newVal) => {
-  if (newVal && cdrChart) {
-    // 当图表从隐藏变为显示时，需要调整图表大小
-    nextTick(() => {
-      cdrChart?.resize();
-    });
-  }
-});
-
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -632,7 +655,7 @@ onBeforeUnmount(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="IMSI(prefix)" name="subscriberID" >
+            <a-form-item label="IMSI (Prefix)" name="subscriberID">
               <a-input
                 v-model:value="queryParams.subscriberID"
                 allow-clear
@@ -703,7 +726,7 @@ onBeforeUnmount(() => {
         :column="2"
         :style="{
           width: '60%',
-          marginBottom: state.showChart ? '24px' : '0px'
+          marginBottom: '24px',
         }"
       >
         <a-descriptions-item label="Total Uplink">
@@ -714,11 +737,7 @@ onBeforeUnmount(() => {
         </a-descriptions-item>
       </a-descriptions>
       <!-- 图数据 -->
-      <div
+      <div ref="cdrChartDom" style="height: 600px; width: 100%"></div>
-        v-show="state.showChart"
-        ref="cdrChartDom"
-        style="height: 600px; width: 100%"
-      ></div>
     </a-card>
   </PageContainer>
 </template>