yangg 1 deň pred
rodič
commit
631b752b59
1 zmenil súbory, kde vykonal 93 pridanie a 10 odobranie
  1. 93 10
      src/views/system/home/index.vue

+ 93 - 10
src/views/system/home/index.vue

@@ -6,24 +6,29 @@
 			<el-col :span="24">
 				<div class="lol-container">
 					<div class="head">
-						<div class="weather"><span id="showTime"></span></div>
+						<div class="weather">
+							<span id="showTime"></span>
+							<el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
+								<el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
+							</el-button>
+						</div>
 						<h1>设备运维数据中心</h1>
 					</div>
 
 					<div class="mainbox">
 						<ul class="clearfix">
 							<li>
-								<div class="boxall" style="height:400px;">
+								<div class="boxall" style="flex: 2;">
 									<div class="alltitle">设备利用率趋势</div>
 									<div class="navboxall" id="echart5" style="height: 95%;"></div>
 								</div>
-								<div class="boxall" style="height:300px; overflow: hidden;">
+								<div class="boxall" style="flex: 1.5; overflow: hidden;">
 									<div class="alltitle">单台设备累计借用时长排名</div>
 									<div class="navboxall">
 										<div class="wraptit">
 											<span>排名</span><span>设备名称</span><span>设备编号</span><span>借用时长</span>
 										</div>
-										<div class="wrap" style="height: 220px;">
+										<div class="wrap" style="height: 85%">
 											<ul>
 												<li v-for="(hero, index) in heroData" :key="index" style="width: 100%;">
 													<div
@@ -145,7 +150,7 @@
 
 										</div>
 
-										<el-table :data="teamRankings" style="width: 100%;height: 258px;">
+										<el-table :data="teamRankings" style="width: 100%;height: 75%;">
 											<el-table-column type="index" label="排名" width="80" />
 											<el-table-column prop="device_name" label="设备名称" />
 											<!-- <el-table-column prop="device_code" label="设备编码" /> -->
@@ -189,7 +194,7 @@
 										<div class="wraptit">
 											<span>排名</span><span>用户名称</span><span>总借用次数</span>
 										</div>
-										<div class="wrap" style="height: 230px;">
+										<div class="wrap" style="height:85%;">
 											<ul>
 												<li v-for="(hero, index) in userList" :key="index" style="width: 100%;">
 													<div
@@ -227,6 +232,7 @@ import { useRouter } from 'vue-router';
 import { request } from '/@/utils/service';
 import dayjs from 'dayjs';
 import { GetList } from '../devicelabel/api'
+import { FullScreen, Aim } from '@element-plus/icons-vue'
 
 
 
@@ -251,9 +257,34 @@ let global: any = {
 
 export default defineComponent({
 	name: 'home',
+	components: {
+		FullScreen,
+		Aim
+	},
 	setup() {
 
 		const scrollOffset = ref(0)
+		const isFullscreen = ref(false)
+
+		// 切换全屏
+		const toggleFullScreen = () => {
+			const element = document.querySelector('.home-container') as HTMLElement;
+			if (!element) return;
+
+			if (!document.fullscreenElement) {
+				element.requestFullscreen().then(() => {
+					isFullscreen.value = true;
+				}).catch(err => {
+					console.error(`全屏错误: ${err.message}`);
+				});
+			} else {
+				document.exitFullscreen().then(() => {
+					isFullscreen.value = false;
+				}).catch(err => {
+					console.error(`退出全屏错误: ${err.message}`);
+				});
+			}
+		};
 		let intervalId: number | null = null
 		const rowHeight = 50
 		const visibleRows = 6
@@ -978,6 +1009,8 @@ export default defineComponent({
 			fetchRankings,
 			scrollOffset,
 			...toRefs(state),
+			isFullscreen,
+			toggleFullScreen,
 		};
 
 	},
@@ -1084,8 +1117,28 @@ export default defineComponent({
 $homeNavLengh: 8;
 
 .home-container {
-
 	overflow: hidden;
+	height: 100%;
+	
+	&:fullscreen {
+		background: #000d4a;
+		height: 100vh;
+		width: 100vw;
+		
+		.lol-data-section {
+			height: 100vh;
+			margin: 0;
+			
+			.el-col {
+				padding: 0 !important;
+			}
+			
+			.lol-container {
+				height: 100vh;
+				border-radius: 0;
+			}
+		}
+	}
 
 	.home-card-one,
 	.home-card-two,
@@ -1339,13 +1392,28 @@ $homeNavLengh: 8;
 					right: 20px;
 					top: 0;
 					line-height: 85px;
+					display: flex;
+					align-items: center;
+					gap: 15px;
+
+					.fullscreen-btn {
+						color: #fff;
+						font-size: 20px;
+						padding: 0;
+						margin-left: 10px;
+
+						&:hover {
+							color: #409EFF;
+						}
+					}
 				}
 			}
 
 			.mainbox {
-				/* min-height: 600px; */
-				/* height: 100vh; */
+				height: calc(100vh - 105px);
 				padding: 10px 20px;
+				display: flex;
+				flex-direction: column;
 
 				.boxall {
 					border: 1px solid rgba(25, 186, 139, 0.17);
@@ -1435,10 +1503,24 @@ $homeNavLengh: 8;
 					margin: 0;
 					padding: 0;
 					list-style: none;
+					height: 100%;
 
 					li {
 						width: 32%;
-					}
+						display: flex;
+						flex-direction: column;
+						
+						.boxall {
+							flex: 1;
+							display: flex;
+							flex-direction: column;
+							
+							.navboxall {
+								flex: 1;
+								display: flex;
+								flex-direction: column;
+							}
+						}
 				}
 
 				.wrap {
@@ -1613,4 +1695,5 @@ $homeNavLengh: 8;
 		}
 	}
 }
+}
 </style>