From 30ed52539a683c48c7b0093652891f3e03d93af0 Mon Sep 17 00:00:00 2001
From: SaarHV <dev16102@linx-info.com>
Date: Sun, 29 Jan 2023 20:31:05 +0800
Subject: [PATCH] Update main layout

---
 src/layout/component/main.vue | 196 +++++++++++++++++++++++++++++-----
 1 file changed, 168 insertions(+), 28 deletions(-)

diff --git a/src/layout/component/main.vue b/src/layout/component/main.vue
index 314f6b2..0244b6c 100644
--- a/src/layout/component/main.vue
+++ b/src/layout/component/main.vue
@@ -1,35 +1,175 @@
 <template>
-	<el-main>
-		<el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);">
-			<router-view v-slot="{ Component }">
-				<transition appear :name="transitionName" mode="out-in">
-					<div :key="key">
-						<keep-alive>
-							<component :is="Component" />
-						</keep-alive>
-					</div>
-				</transition>
-			</router-view>
+	<el-main class="layout-main">
+		<el-scrollbar
+			ref="layoutScrollbarRef"
+			:class="{
+				'layout-scrollbar':
+					(!isClassicOrTransverse && !state.currentRouteMeta.isLink && !state.currentRouteMeta.isIframe) ||
+					(!isClassicOrTransverse && state.currentRouteMeta.isLink && !state.currentRouteMeta.isIframe),
+			}"
+		>
+			<LayoutParentView
+				:style="{
+					padding: !isClassicOrTransverse || (state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe) ? '0' : '15px',
+					transition: 'padding 0.3s ease-in-out',
+				}"
+			/>
+			<el-badge v-if="isTaskBtn" class="task-btn" :value="taskData.length" :max="99" :hidden="taskData.length===0">
+				<el-button @click="taskVisible=true">任务列表<el-icon><ele-TopRight /></el-icon></el-button>
+			</el-badge>
+			<Footer v-if="themeConfig.isFooter" />
 		</el-scrollbar>
+		<!-- Task event pop window -->
+		<el-drawer
+			v-model="taskVisible"
+			destroy-on-close
+			title="任务列表"
+			direction="btt"
+			size="50%"
+			@close="taskData=[]"
+		>
+			<task tableHeight="calc(50vh - 190px)" />
+		</el-drawer>
 	</el-main>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, toRefs, reactive } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-export default defineComponent({
-	name: 'layoutMain',
-	setup() {
-		const route = useRoute();
-		const state = reactive({
-			transitionName: 'slide-right',
-		});
-		const key = computed(() => route.path);
-		onBeforeRouteUpdate((to, from) => {
-			state.transitionName =
-        to.meta.index > from.meta.index ? 'slide-right' : 'slide-left';
-		});
-		return { key, ...toRefs(state) };
-	},
+<script lang="ts" setup>
+import { reactive, getCurrentInstance, watch, onMounted, computed, ref, onUnmounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+// import { NextLoading } from '/@/utils/loading';
+import LayoutParentView from '/@/layout/routerView/parent.vue';
+import Footer from '/@/layout/footer/index.vue';
+import Task from '/@/components/task/index.vue';
+import CreateSocket from '/@/utils/webSocket';
+import { baseURL } from '/@/utils/request';
+import { guid } from '/@/utils/toolsValidate';
+
+interface MainState {
+	headerHeight: string | number;
+	currentRouteMeta: any;
+}
+
+const { proxy } = <any>getCurrentInstance();
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const route = useRoute();
+const state = reactive<MainState>({
+	headerHeight: '',
+	currentRouteMeta: {},
+});
+// Judge layout
+const isClassicOrTransverse = computed(() => {
+	const { layout } = themeConfig.value;
+	return layout === 'classic' || layout === 'transverse';
 });
+// Set the height of main
+const initHeaderHeight = () => {
+	const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
+	let { isTagsview } = themeConfig.value;
+	if (isTagsview) return (state.headerHeight = bool ? `86px` : `115px`);
+	else return (state.headerHeight = `80px`);
+};
+// Initialize to obtain the current route meta, which is used to set iframes padding
+const initGetMeta = () => {
+	state.currentRouteMeta = route.meta;
+};
+const taskVisible = ref(false);
+// Save the data pushed by websocket
+const taskData = ref<any[]>([]);
+// Save the latest websocket pushed data
+const currentData = ref();
+// Dynamically calculate task drawer width
+const asideWidth = ref('calc(100% - 220px)');
+const taskDrawerLeft = ref('220px');
+const asideWidthChange = (classArr:string[]) => {
+	if (classArr.indexOf('layout-aside-pc-220') > -1) {
+		asideWidth.value = 'calc(100% - 220px)';
+		taskDrawerLeft.value = '220px';
+	} else if (classArr.indexOf('layout-aside-pc-64') > -1) {
+		asideWidth.value = 'calc(100% - 64px)';
+		taskDrawerLeft.value = '64px';
+	} else {
+		asideWidth.value = '100%';
+		taskDrawerLeft.value = '0';
+	}
+};
+// Monitor the change of sidebar width
+proxy.mittBus.on('aside-width', asideWidthChange);
+// The /system-event/task and /no-cluster route does not display the task list button
+const isTaskBtn = computed(() => {
+	return route.path !== '/system-event/task' && route.path !== '/no-cluster';
+});
+const socket = ref();
+// Websocket message receiving
+const getSocketMsg = (data:any) => {
+	if (currentData.value?.id !== data.id || currentData.value?.taskStatus !== data.taskStatus) {
+		// add task data
+		if (!taskData.value.find((item:any) => item.id === data.id)) {
+			taskData.value.push(data);
+		}
+		// add current data
+		currentData.value = data;
+		// Call task/list interface
+		if (isTaskBtn.value || taskVisible.value) {
+			proxy.mittBus.emit('refresh-task');
+		}
+	}
+};
+// connect websocket
+const connectSocket = () => {
+	// Create websocket instance
+	socket.value = new CreateSocket({
+		url: `${baseURL.replace('https', 'wss')}/websocket/taskUpdate/${guid()}`,
+		callback: getSocketMsg
+	});
+	socket.value.connect();
+};
+connectSocket();
+onMounted(async () => {
+	await initGetMeta();
+	initHeaderHeight();
+	// NextLoading.done();
+});
+onUnmounted(() => {
+	// Close websocket
+	socket.value != null && socket.value.close();
+	proxy.mittBus.off('aside-width', asideWidthChange);
+});
+watch(
+	() => route.path,
+	() => {
+		state.currentRouteMeta = route.meta;
+		const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
+		state.headerHeight = bool ? `86px` : `115px`;
+		proxy.$refs.layoutScrollbarRef.update();
+	}
+);
+watch(
+	themeConfig,
+	(val) => {
+		state.currentRouteMeta = route.meta;
+		const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
+		state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
+		proxy.$refs?.layoutScrollbarRef?.update();
+	},
+	{
+		deep: true,
+	}
+);
 </script>
+<style lang="scss" scoped>
+.task-btn{
+	margin-top: 8px;
+	position: fixed;
+	bottom: 15px;
+	.el-icon{
+		margin-left: 5px;
+	}
+}
+:deep(.el-drawer){
+	width: v-bind(asideWidth);
+	left: v-bind(taskDrawerLeft);
+}
+</style>
-- 
Gitee