告警大屏css初稿，大屏小图echart测试页

src/components/Layout.vue

@@ -1,31 +1,47 @@
 <template>
   <div id="layout" class="layout-container">
     <!-- 侧边栏 -->
-    <el-aside class="nav-sidebar" :style="{ width: isCollapse ? '64px' : '180px' }">
+    <el-aside v-if="!isFullScreen" class="nav-sidebar" :style="{ width: isCollapse ? '64px' : '180px' }">
       <div class="logo" v-if="!isCollapse">
         <el-image src="/turing.png" fit="contain" />
       </div>
       <el-menu :default-active="activeIndex" class="el-menu-part" router :collapse="isCollapse">
         <el-menu-item index="/">
-          <el-icon><House /></el-icon>
+          <el-icon>
+            <House />
+          </el-icon>
           <template #title><span>首页</span></template>
         </el-menu-item>
         <el-menu-item index="/alertManagement">
-          <el-icon><Management /></el-icon>
+          <el-icon>
+            <Management />
+          </el-icon>
           <template #title><span>告警列表</span></template>
         </el-menu-item>
         <el-menu-item index="/dataStatistics">
-          <el-icon><TrendCharts /></el-icon>
+          <el-icon>
+            <TrendCharts />
+          </el-icon>
           <template #title><span>数据统计</span></template>
         </el-menu-item>
         <el-menu-item index="/userList">
-          <el-icon><Avatar /></el-icon>
+          <el-icon>
+            <Avatar />
+          </el-icon>
           <template #title><span>用户管理</span></template>
         </el-menu-item>
         <el-menu-item index="/settings">
-          <el-icon><Setting /></el-icon>
+          <el-icon>
+            <Setting />
+          </el-icon>
           <template #title><span>告警设置</span></template>
         </el-menu-item>
+        <el-menu-item index="/viewList">
+          <el-icon>
+            <Location />
+          </el-icon>
+          <template #title><span>大屏页</span></template>
+        </el-menu-item>
         <!-- <el-sub-menu index="1">
           <template #title>
             <el-icon><Location /></el-icon>
@@ -53,12 +69,16 @@
 
     <div class="content-layout">
       <!-- 头部区域 -->
-      <el-header class="nav-header">
+      <el-header v-if="!isFullScreen" class="nav-header">
         <!-- 收缩/展开按钮 -->
-        <el-icon @click="toggleCollapse" style="cursor: pointer; margin-right: 20px;">
-          <component :is="isCollapse ? Expand : Fold" />
-        </el-icon>
-
+        <div>
+          <el-icon @click="toggleCollapse" style="cursor: pointer; margin-right: 20px;">
+            <component :is="isCollapse ? Expand : Fold" />
+          </el-icon>
+          <el-icon @click="toggleFullScreen" style="cursor: pointer; margin-right: 20px;">
+            <component :is="FullScreen" />
+          </el-icon>
+        </div>
         <div class="header-right">
           <!-- 用户头像下拉菜单 -->
           <el-dropdown trigger="click">
@@ -69,10 +89,14 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item @click="goToUserManagement">
-                  <el-icon><User /></el-icon> 用户中心
+                  <el-icon>
+                    <User />
+                  </el-icon> 用户中心
                 </el-dropdown-item>
                 <el-dropdown-item @click="onLogout">
-                  <el-icon><SwitchButton /></el-icon> 退出登录
+                  <el-icon>
+                    <SwitchButton />
+                  </el-icon> 退出登录
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -84,9 +108,13 @@
       <el-main class="main-content">
         <router-view />
       </el-main>
-
+      <el-button v-if="isFullScreen" class="exit-fullscreen-button" type="primary" @click="toggleFullScreen">
+        <el-icon>
+          <Notification />
+        </el-icon>退出全屏
+      </el-button>
       <!-- 页脚区域 -->
-      <el-footer class="nav-footer">Powered by AI</el-footer>
+      <el-footer v-if="!isFullScreen" class="nav-footer">Powered by AI</el-footer>
     </div>
   </div>
 </template>
@@ -94,9 +122,9 @@
 <script lang="ts" setup>
 import { ref, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { 
-  Document, WarningFilled, Location, User, SwitchButton, 
-  House, Management, TrendCharts, Avatar, Fold, Expand ,Setting
+import {
+  Document, WarningFilled, Location, User, SwitchButton,
+  House, Management, TrendCharts, Avatar, Fold, Expand, Setting, FullScreen, Notification
 } from '@element-plus/icons-vue';
 import { BoxApi } from '@/utils/boxApi';
 import { ElMessage } from 'element-plus';
@@ -107,6 +135,7 @@ const activeIndex = ref(route.path);
 const isCollapse = ref(false);  // 控制侧边栏收缩状态
 const username = ref('');  // 存储用户名
 
+const isFullScreen = ref(false);
 const goToUserManagement = () => {
   router.push('/userList');  // 跳转到用户管理页面
 };
@@ -114,6 +143,7 @@ const goToUserManagement = () => {
 onMounted(() => {
   const storedUsername = localStorage.getItem('username');
   username.value = storedUsername ? storedUsername : '用户';
+
 });
 
 watch(
@@ -123,8 +153,40 @@ watch(
   }
 );
 
+const toggleFullScreen = () => {
+  const elem = document.documentElement as HTMLElement & {
+    webkitRequestFullscreen?: () => Promise<void>;
+    msRequestFullscreen?: () => Promise<void>;
+  };
+
+  if (!isFullScreen.value) {
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullscreen) {
+      elem.webkitRequestFullscreen(); // 兼容 Safari
+    } else if (elem.msRequestFullscreen) {
+      elem.msRequestFullscreen(); // 兼容 IE/Edge
+    }
+  } else {
+    const doc = document as Document & {
+      webkitExitFullscreen?: () => Promise<void>;
+      msExitFullscreen?: () => Promise<void>;
+    };
+
+    if (doc.exitFullscreen) {
+      doc.exitFullscreen();
+    } else if (doc.webkitExitFullscreen) {
+      doc.webkitExitFullscreen(); // 兼容 Safari
+    } else if (doc.msExitFullscreen) {
+      doc.msExitFullscreen(); // 兼容 IE/Edge
+    }
+  }
+  isFullScreen.value = !isFullScreen.value;
+
+  
+};
 const toggleCollapse = () => {
-  isCollapse.value = !isCollapse.value;  // 切换收缩状态
+  isCollapse.value = !isCollapse.value;
 };
 
 const onLogout = async () => {
@@ -167,6 +229,7 @@ const onLogout = async () => {
   color: #fff;
   border: 1px;
 }
+
 .el-menu-part .el-menu-item {
   /* padding:30px 0; */
   padding: 0px;
@@ -178,6 +241,7 @@ const onLogout = async () => {
   background-color: #001529;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
+
 /* 悬停样式 */
 .el-menu-part .el-menu-item:hover {
   background-color: #001529;
@@ -206,7 +270,8 @@ const onLogout = async () => {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  max-height: 100%;
+  /* max-height: 100%; */
+  height: 100vh;
   /* overflow-x: auto;   */
   /* min-width: 0;   */
 }
@@ -241,7 +306,7 @@ const onLogout = async () => {
 .main-content {
   background-color: #f5f8fc;
   flex-grow: 1;
-  max-height: 95vh;
+  max-height: 100vh;
   margin: 0;
   padding: 0;
   width: 100%;
@@ -263,4 +328,19 @@ const onLogout = async () => {
   padding: 0;
   border: 1px solid #001529;
 }
+.exit-fullscreen-button {
+  position: fixed;
+  bottom: 3vh;
+  left: 0px;
+  height: 50px;
+  /* border-radius: 25px; */
+  background-color: #1890ff;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  width: 100px;
+  border-radius: 0 25px 25px 0;
+}
 </style>