update

src/views/indexSon.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="body-d">
             <div class="body-d-left">
-                <screen-left :orgCode="orgCode" :type="type" :refreshState="refreshState" />
+                <screen-left :key="tabState" :orgCode="orgCode" :type="type" :refreshState="refreshState" />
             </div>
             <div class="body-d-middle">
                 <SecondMap :orgCode="orgCode" :type="type">
@@ -31,8 +31,8 @@
                 </SecondMap>
             </div>
             <div class="body-d-right">
-                <one-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
-                <two-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
+                <one-r :key="tabState" :orgCode="orgCode" :type="type" :refreshState="refreshState" />
+                <two-r :key="tabState" :orgCode="orgCode" :type="type" :refreshState="refreshState" />
                 <three-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
             </div>
         </div>
@@ -53,6 +53,7 @@
     import { useUserStore } from '/@/store/modules/user.ts';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
+    import { onUnmounted } from 'vue';
 
     const { refreshState } = useRefresh(DEFAULT_TIME);
     const useStore = useUserStore();
@@ -66,7 +67,18 @@
             });
         }
         init();
+        document.addEventListener('visibilitychange', checkTabState);
     });
+    onUnmounted(() => {
+        document.removeEventListener('visibilitychange', checkTabState);
+    });
+    const tabState = ref('');
+
+    //判断窗口是否处于激活状态，切换浏览器tab会导致部分echarts显示不正常
+    function checkTabState() {
+        tabState.value = document.hidden ? 'inactive' : 'active';
+    }
+
     const { type, timeRangeOption } = useTimeType('week');
 
     function init() {