feat: 优化图表显示逻辑，动态控制图表显示与关闭

src/views/dashboard/smfCDRByIMSI/index.vue

@@ -225,6 +225,7 @@ const option = {
 function fnRanderChart() {
   const container: HTMLElement | undefined = cdrChartDom.value;
   if (!container) return;
+  container.style.display = 'block';
 
   // 如果图表已经存在，先销毁
   if (cdrChart) {
@@ -283,6 +284,15 @@ function fnQueryReset() {
   queryParams.dnn = '';
   queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   fnGetList(1);
+  // 重置关闭图
+  ws.close();
+  if (cdrChart) {
+    cdrChart.clear();
+    cdrChart.dispose();
+    if (cdrChartDom.value) {
+      cdrChartDom.value.style.display = 'none';
+    }
+  }
 }
 
 let state = reactive({
@@ -444,6 +454,8 @@ function fnRanderChartDataLoad() {
     }
     // 绘制图数据
     fnRanderChartDataUpdate();
+    // 动态ws
+    fnRealTime();
   } else {
     message.warning('No Data');
     cdrChart.hideLoading();
@@ -620,8 +632,7 @@ onMounted(() => {
       }
     })
     .finally(() => {
-      // 移除初始化时的图表创建，改为在需要时动态创建
+      fnGetList();
-      fnRealTime();
     });
 });
 
@@ -737,7 +748,10 @@ onBeforeUnmount(() => {
         </a-descriptions-item>
       </a-descriptions>
       <!-- 图数据 -->
-      <div ref="cdrChartDom" style="height: 600px; width: 100%"></div>
+      <div
+        ref="cdrChartDom"
+        style="display: none; height: 600px; width: 100%"
+      ></div>
     </a-card>
   </PageContainer>
 </template>