From 7cc4ed56cba46511990fcef156a94b3018a922f8 Mon Sep 17 00:00:00 2001
From: 21030442-mao <maoxiangyu@haier.com>
Date: Tue, 27 Jul 2021 11:39:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E5=9B=BE=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=90=8E=E6=97=A0=E6=B3=95=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/component/main.vue            |  8 ++++-
 src/layout/navBars/tagsView/tagsView.vue |  7 ++--
 src/store/modules/tagsViewRoutes.ts      | 45 +++++++++++-------------
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/layout/component/main.vue b/src/layout/component/main.vue
index 983ad52..db756cc 100644
--- a/src/layout/component/main.vue
+++ b/src/layout/component/main.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { computed, defineComponent, toRefs, reactive, getCurrentInstance, watch, onBeforeMount } from 'vue';
 import { useStore } from '/@/store/index';
-import { useRoute } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import LayoutParentView from '/@/layout/routerView/parent.vue';
 import Footer from '/@/layout/footer/index.vue';
 export default defineComponent({
@@ -51,6 +51,12 @@ export default defineComponent({
 			initHeaderHeight();
 			initGetMeta();
 		});
+		// 路由更新时重新绘制图表
+		onBeforeRouteUpdate(() => {
+			setTimeout(() => {
+				window.dispatchEvent(new Event('resize'));
+			}, 500);
+		});
 		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
 		watch(store.state.themeConfig.themeConfig, (val) => {
 			state.headerHeight = val.isTagsview ? '84px' : '50px';
diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue
index 8b8336a..1514ed2 100644
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@@ -188,9 +188,10 @@ export default {
 		const openCurrenFullscreen = (path: string, currentRouteInfo: object) => {
 			nextTick(() => {
 				const { meta, name, params, query } = currentRouteInfo;
-				if (meta.isDynamic) router.push({ name, params });
-				else router.push({ path, query });
-				store.dispatch('tagsViewRoutes/setCurrenFullscreen', 500);
+				store.dispatch('tagsViewRoutes/setCurrenFullscreen', () => {
+					if (meta.isDynamic) router.push({ name, params });
+					else router.push({ path, query });
+				});
 			});
 		};
 		// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
diff --git a/src/store/modules/tagsViewRoutes.ts b/src/store/modules/tagsViewRoutes.ts
index 8779904..92b4471 100644
--- a/src/store/modules/tagsViewRoutes.ts
+++ b/src/store/modules/tagsViewRoutes.ts
@@ -4,8 +4,6 @@ import screenfull from 'screenfull';
 import { Local } from '/@/utils/storage';
 // 此处加上 `.ts` 后缀报错，具体原因不详
 import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
-import { ElMessage } from 'element-plus';
-import screenfull from 'screenfull';
 
 const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 	namespaced: true,
@@ -29,34 +27,33 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 			commit('getTagsViewRoutes', data);
 		},
 		// 设置卡片全屏
-		setCurrenFullscreen({ commit }, timeout: number = 0) {
+		setCurrenFullscreen({ commit }, callback?: () => void) {
 			const screenfulls: any = screenfull;
 			if (!screenfulls.isEnabled) {
 				ElMessage.warning('暂不不支持全屏');
 				return false;
 			}
-			setTimeout(() => {
-				const currenFullscreenChange = () => {
-					const layoutViewBgWhite = document.querySelector('.layout-view-bg-white') as HTMLElement;
-					if (screenfulls.isFullscreen) {
-						commit('getCurrenFullscreen', true);
-						// 设置全屏时，设置有 `layout-view-bg-white` 类的高度
-						if (layoutViewBgWhite) layoutViewBgWhite.style.height = `calc(100vh - 30px)`;
-					} else {
-						screenfulls.off('change', currenFullscreenChange);
-						commit('getCurrenFullscreen', false);
-						if (!layoutViewBgWhite) return false;
-						const getThemeConfig = Local.get('themeConfig');
-						if (getThemeConfig) {
-							let { isTagsview } = getThemeConfig;
-							if (isTagsview) layoutViewBgWhite.style.height = `calc(100vh - 114px)`;
-							else layoutViewBgWhite.style.height = `calc(100vh - 80px)`;
-						}
+			const currenFullscreenChange = () => {
+				const layoutViewBgWhite = document.querySelector('.layout-view-bg-white') as HTMLElement;
+				if (screenfulls.isFullscreen) {
+					commit('getCurrenFullscreen', true);
+					// 设置全屏时，设置有 `layout-view-bg-white` 类的高度
+					if (layoutViewBgWhite) layoutViewBgWhite.style.height = `calc(100vh - 30px)`;
+				} else {
+					screenfulls.off('change', currenFullscreenChange);
+					commit('getCurrenFullscreen', false);
+					if (!layoutViewBgWhite) return false;
+					const getThemeConfig = Local.get('themeConfig');
+					if (getThemeConfig) {
+						let { isTagsview } = getThemeConfig;
+						if (isTagsview) layoutViewBgWhite.style.height = `calc(100vh - 114px)`;
+						else layoutViewBgWhite.style.height = `calc(100vh - 80px)`;
 					}
-				};
-				screenfulls.on('change', currenFullscreenChange);
-				screenfulls.toggle();
-			}, timeout);
+				}
+			};
+			screenfulls.on('change', currenFullscreenChange);
+			screenfulls.toggle();
+			callback && callback();
 		},
 	},
 };
-- 
Gitee