diff --git a/web/src/components/PGTopo.vue b/web/src/components/PGTopo.vue
index 02b6ccfce761885762552e6836a4e4ea54a1fa42..163252078a27f417f8690f86cc441df5a5e7dfed 100644
--- a/web/src/components/PGTopo.vue
+++ b/web/src/components/PGTopo.vue
@@ -20,6 +20,8 @@ import resource_logo from "@/assets/icon/resource.png";
 import { useTopoStore } from '@/stores/topo';
 import { colorSets, graphInitOptions, graphTreeInitOptions } from './PGOptions';
 
+const emit = defineEmits(['clickTopoCanvas'])
+
 const props = defineProps({
   graph_mode: {
     type: String,
@@ -53,6 +55,11 @@ onMounted(() => {
   topo_container = document.getElementById("topo-container")!;
   topoW.value = topo_container.clientWidth;
   topoH.value = topo_container.clientHeight;
+  document.getElementById('topo-container')!.addEventListener('click', function (_event: any) {
+    // 点击画布时，关闭日志弹窗和tab页面 
+    console.log(_event)
+    emit('clickTopoCanvas', _event)
+  });
 })
 
 const updateTopoData = (topoData: any) => {
diff --git a/web/src/views/TopoDisplay.vue b/web/src/views/TopoDisplay.vue
index 7f8f4f142046ee4f23eb85b9e8224560d1b24ccb..cdb80e0979ae346ea531201ca3b6c4b9ce9db4d4 100644
--- a/web/src/views/TopoDisplay.vue
+++ b/web/src/views/TopoDisplay.vue
@@ -20,7 +20,8 @@
       </template>
     </el-page-header>
     <!-- 展示topo图 -->
-    <PGTopo style="width: 100%;height: calc(100% - 50px);" :graph_mode="graphMode" :time_interval="timeInterval" />
+    <PGTopo ref="topoRef" style="width: 100%;height: calc(100% - 50px);" :graph_mode="graphMode"
+      :time_interval="timeInterval" v-on:click-topo-canvas="clickTopoCanvas" />
     <!-- 嵌套抽屉组件展示数据 -->
     <nodeDetail />
     <!-- 嵌套抽屉组件展示日志信息 -->
@@ -64,24 +65,24 @@ let request_id: string | number
 let showLogChart = ref(false);
 const logChart = ref(null)
 
+const topoRef = ref(null)
+
 const dialog = ref(false);
 const title = ref('日志详情');
 onMounted(() => {
   loading.value = true;
-  document.getElementById('topoDisplay')!.addEventListener('click', function (_event: any) {
-    // 点击画布时，关闭日志弹窗和tab页面 
-    if (_event.target.nodeName === 'CANVAS') {
-      dialog.value = false;
-      showLogChart.value = false;
-    }
-
-  });
 })
 onBeforeUnmount(() => {
   // 离开页面，清空点击事件缓存数据
   useTopoStore().$reset();
 })
 
+const clickTopoCanvas = (_e: any) => {
+  console.log('点击了topo的画布')
+  dialog.value = false;
+  showLogChart.value = false;
+}
+
 
 const goBack = () => {
   if (timer) {
diff --git a/web/src/views/customTopo.vue b/web/src/views/customTopo.vue
index df844e969e2c6b43ddffaca8c7903754c920feb1..c2f7986f62bbb1052b565506e227bccec175085d 100644
--- a/web/src/views/customTopo.vue
+++ b/web/src/views/customTopo.vue
@@ -169,9 +169,9 @@ const handleRuleType = (type: string, index: number) => {
 
 // 获取批次所有主机
 const handlebatchDetail = (e: string) => {
-  let baychInfo = e.split('~');
-  customForm.batchId = Number(baychInfo[0]);
-  customForm.batchName = baychInfo[1];
+  let batchInfo = e.split('~');
+  customForm.batchId = Number(batchInfo[0]);
+  customForm.batchName = batchInfo[1];
   getBatchDetail({ batchId: customForm.batchId }).then(res => {
     if (res.data.code === 200) {
       hosts.value = res.data.data;
@@ -264,6 +264,7 @@ watch(() => useConfigStore().topo_config, (newConfig) => {
     configId.value = currentConf.id;
     setTimeout(() => {
       customForm.batchName = batchs.value.filter(item => item.id === customForm.batchId)[0].name;
+      handlebatchDetail(customForm.batchId + '~' + customForm.batchName);
     }, 100)
   }
 }, { immediate: true, deep: true })
diff --git a/web/src/views/topoLogs/index.vue b/web/src/views/topoLogs/index.vue
index f9101809b6165ea02095bbe0cab8710a90954e86..5dad472555087fe7f00abdd67a6deb38d9521b15 100644
--- a/web/src/views/topoLogs/index.vue
+++ b/web/src/views/topoLogs/index.vue
@@ -43,7 +43,7 @@
       </el-tab-pane>
     </el-tabs>
     <el-dialog v-model="dialog" :title="title" width="80%" @close="closeDialog" destroy-on-close>
-      <logStream v-show="dialog" :log_data="log_stream" :log_total="log_total" v-on:get-more="getMoreLogStream"
+      <logStream v-if="dialog" :log_data="log_stream" :log_total="log_total" v-on:get-more="getMoreLogStream"
         v-on:get-time-range-log="getRangeTimeLog" />
     </el-dialog>
   </div>
@@ -72,7 +72,7 @@ const dialog = ref(false);
 const title = ref('日志详情');
 const log_type = ref('log');
 const back_btn = ref(false);
-const clickChange = ref('first');
+const clickChange = ref('');
 
 onMounted(() => {
   getLogData();
@@ -152,13 +152,13 @@ const getLogData = (_params?: any) => {
     case 'log':
       if (_params || clickChange.value === 'first') {
         // 第一次点击,请求进程信息
-        back_btn.value = true;
-        clickChange.value = 'second';
         console.log('请求进程图表')
         getELKProcessLogData(handleParams(_params)).then(res => {
           if (res.data.code === 200) {
             if (res.data.data.length > 0) {
               logs.value = res.data.data;
+              back_btn.value = true;
+              clickChange.value = 'second';
             } else {
               ElMessage.info('无数据，请稍后重试')
             }
@@ -244,6 +244,8 @@ const handleShowLog = (_process_info?: any, _size?: number) => {
       if (res.data.data.hits.length > 0) {
         log_stream.value = res.data.data.hits;
         log_total.value = res.data.data.total;
+      } else {
+        ElMessage.info('当前时段日志文件无数据')
       }
     } else {
       ElMessage.error(res.data.msg)
diff --git a/web/src/views/topoLogs/logStream.vue b/web/src/views/topoLogs/logStream.vue
index f34d562e5d9cc489208cb4e851f991f7a75f4e20..075c34ec94bd51dc893a41a871b3bb763e9e1f19 100644
--- a/web/src/views/topoLogs/logStream.vue
+++ b/web/src/views/topoLogs/logStream.vue
@@ -82,6 +82,9 @@ watchEffect(() => {
     for (let i = 0; i < props.log_data.length; i++) {
       activeNames.value.push(i);
     }
+  } else {
+    log_stream.value = [];
+    total_logs.value = 0;
   }
 })
 interface TimeRange {