diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index eda406b46d..44f8fd9378 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -82,6 +82,7 @@ import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import circlePackingOrigin from '@/assets/svg/circle-packing-origin.svg'
 import { checkJoinGroup } from '@/utils/canvasUtils'
+import { useEmitt } from '@/hooks/web/useEmitt'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
 
@@ -392,6 +393,10 @@ const areaClick = area => {
   dvMainStore.canvasStateChange({ key: 'curPointArea', value: area })
 }
 
+const popupAvailableChange = () => {
+  useEmitt().emitter.emit('calcData-all')
+  canvasChange()
+}
 const canvasChange = () => {
   snapshotStore.recordSnapshotCache('canvasChange')
 }
@@ -403,7 +408,11 @@ const canvasChange = () => {
     <button hidden="true" id="close-button"></button>
     <div class="layer-area" @click="areaClick('hidden')" :class="{ activated: hiddenAreaActive }">
       <span>{{ t('visualization.pop_area') }}({{ popComponentData.length }})</span>
-      <el-switch v-model="canvasStyleData.popupAvailable" @change="canvasChange" size="small" />
+      <el-switch
+        v-model="canvasStyleData.popupAvailable"
+        @change="popupAvailableChange"
+        size="small"
+      />
     </div>
     <el-row class="list-wrap">
       <div class="list-container" @contextmenu="handleContextMenu">
diff --git a/core/core-frontend/src/hooks/web/useFilter.ts b/core/core-frontend/src/hooks/web/useFilter.ts
index 3160e72a43..d96bb87517 100644
--- a/core/core-frontend/src/hooks/web/useFilter.ts
+++ b/core/core-frontend/src/hooks/web/useFilter.ts
@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia'
 import { getDynamicRange, getCustomTime } from '@/custom-component/v-query/time-format'
 import { getCustomRange } from '@/custom-component/v-query/time-format-dayjs'
 const dvMainStore = dvMainStoreWithOut()
-const { componentData } = storeToRefs(dvMainStore)
+const { componentData, canvasStyleData } = storeToRefs(dvMainStore)
 
 const getDynamicRangeTime = (type: number, selectValue: any, timeGranularityMultiple: string) => {
   const timeType = (timeGranularityMultiple || '').split('range')[0]
@@ -130,18 +130,32 @@ const getValueByDefaultValueCheckOrFirstLoad = (
 }
 
 export const useFilter = (curComponentId: string, firstLoad = false) => {
+  // 弹窗区域过滤组件是否生效
+  const popupAvailable = canvasStyleData.value.popupAvailable
   const filter = []
-  const queryComponentList = componentData.value.filter(ele => ele.component === 'VQuery')
+  const queryComponentList = componentData.value.filter(
+    ele =>
+      ele.component === 'VQuery' &&
+      (popupAvailable || (!popupAvailable && ele.category !== 'hidden'))
+  )
   searchQuery(queryComponentList, filter, curComponentId, firstLoad)
   componentData.value.forEach(ele => {
     if (ele.component === 'Group') {
-      const list = ele.propValue.filter(item => item.innerType === 'VQuery')
+      const list = ele.propValue.filter(
+        item =>
+          item.innerType === 'VQuery' &&
+          (popupAvailable || (!popupAvailable && ele.category !== 'hidden'))
+      )
       searchQuery(list, filter, curComponentId, firstLoad)
 
       list.forEach(element => {
         if (element.innerType === 'DeTabs') {
           element.propValue.forEach(itx => {
-            const elementArr = itx.componentData.filter(item => item.innerType === 'VQuery')
+            const elementArr = itx.componentData.filter(
+              item =>
+                item.innerType === 'VQuery' &&
+                (popupAvailable || (!popupAvailable && ele.category !== 'hidden'))
+            )
             searchQuery(elementArr, filter, curComponentId, firstLoad)
           })
         }