feat:Data Usage Report图表显示状态判断

src/views/dashboard/smfCDRByIMSI/index.vue

@@ -24,7 +24,7 @@ echarts.use([
   UniversalTransition,
 ]);
 
-import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
+import { reactive, onMounted, toRaw, onBeforeUnmount, ref, nextTick, watch } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import useI18n from '@/hooks/useI18n';
@@ -218,16 +218,19 @@ const option = {
 function fnRanderChart() {
   const container: HTMLElement | undefined = cdrChartDom.value;
   if (!container) return;
+
+  // 如果图表已经存在，先销毁
+  if (cdrChart) {
+    cdrChart.dispose();
+    cdrChart = null;
+  }
+
   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 => {
@@ -284,21 +287,26 @@ 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;
-  // if (!queryParams.subscriberID) {
+
-  //   message.warning('Please enter IMSI to query user traffic');
+  // 根据subscriberID是否为完整的15位决定是否显示图表
-  //   state.loading = false;
+  // 15位subscriberID表示查询单个用户，显示图表
-  //   return;
+  // 少于15位表示模糊查询多个用户，隐藏图表
-  // }
+  state.showChart = queryParams.subscriberID && queryParams.subscriberID.length === 15;
+
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (cdrChart) {
+
+  // 只有当显示图表时才操作图表
+  if (state.showChart && cdrChart) {
     cdrChart.showLoading('default', {
       text: 'Loading...',
       fontSize: 16, // 字体大小
@@ -355,7 +363,18 @@ let dataVolumeUplinkYSeriesData: number[] = [];
 let dataVolumeDownlinkYSeriesData: number[] = [];
 /**图表数据渲染 */
 function fnRanderChartDataLoad() {
-  if (!cdrChart) return;
+  // 如果不显示图表，则不进行图表相关操作
+  if (!state.showChart) return;
+
+  // 如果需要显示图表但图表未初始化，则先初始化图表
+  if (!cdrChart) {
+    // 使用 nextTick 确保DOM已更新
+    nextTick(() => {
+      fnRanderChart();
+      fnRanderChartDataLoad(); // 递归调用以继续数据加载
+    });
+    return;
+  }
   dataTimeXAxisData = [];
   dataVolumeUplinkYSeriesData = [];
   dataVolumeDownlinkYSeriesData = [];
@@ -420,7 +439,7 @@ function fnRanderChartDataLoad() {
 }
 /**图表数据渲染 */
 function fnRanderChartDataUpdate() {
-  if (cdrChart == null) return;
+  if (!state.showChart || cdrChart == null) return;
   // 绘制图数据
   cdrChart.setOption({
     title: {
@@ -542,6 +561,16 @@ function fnRealTime() {
   ws.connect(options);
 }
 
+// 监听图表显示状态变化
+watch(() => state.showChart, (newVal) => {
+  if (newVal && cdrChart) {
+    // 当图表从隐藏变为显示时，需要调整图表大小
+    nextTick(() => {
+      cdrChart?.resize();
+    });
+  }
+});
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore()
@@ -568,7 +597,7 @@ onMounted(() => {
       }
     })
     .finally(() => {
-      fnRanderChart();
+      // 移除初始化时的图表创建，改为在需要时动态创建
       fnRealTime();
     });
 });
@@ -603,7 +632,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
@@ -672,8 +701,10 @@ onBeforeUnmount(() => {
         title="Data Usage"
         bordered
         :column="2"
-        style="width: 60%; margin-bottom: 24px"
+        :style="{
-
+          width: '60%',
+          marginBottom: state.showChart ? '24px' : '0px'
+        }"
       >
         <a-descriptions-item label="Total Uplink">
           {{ state.dataUsage[0] }}
@@ -683,7 +714,11 @@ onBeforeUnmount(() => {
         </a-descriptions-item>
       </a-descriptions>
       <!-- 图数据 -->
-      <div ref="cdrChartDom" style="height: 600px; width: 100%"></div>
+      <div
+        v-show="state.showChart"
+        ref="cdrChartDom"
+        style="height: 600px; width: 100%"
+      ></div>
     </a-card>
   </PageContainer>
 </template>