1.进入系统直接大屏展示F11效果

2.温度监测系统-设备监测采用大屏展示
3.风柜监测系统-风机的启停控制、远程手动启停采用大按钮
4.生活热水流程图添加多两个供水泵(ps工作)

src/App.vue

@@ -7,18 +7,37 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
+import { exitFullscreen, isFullscreen } from "@/utils/fullscreen";
 
 export default {
   name: "App",
   components: { ThemePicker },
   metaInfo() {
     return {
-      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
+      title:
-      titleTemplate: title => {
+        this.$store.state.settings.dynamicTitle &&
-        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+        this.$store.state.settings.title,
+      titleTemplate: (title) => {
+        return title
+          ? `${title} - ${process.env.VUE_APP_TITLE}`
+          : process.env.VUE_APP_TITLE;
+      },
+    };
+  },
+  mounted() {
+    // 监听键盘事件，当用户按 Esc 键时退出全屏
+    window.addEventListener("keydown", this.handleKeyDown);
+  },
+  beforeDestroy() {
+    window.removeEventListener("keydown", this.handleKeyDown);
+  },
+  methods: {
+    handleKeyDown(event) {
+      if (event.key === "Escape" && isFullscreen()) {
+        exitFullscreen();
       }
-    }
+    },
-  }
+  },
 };
 </script>
 <style scoped>

src/permission.js

@@ -1,63 +1,87 @@
-import router from './router'
+import router from "./router";
-import store from './store'
+import store from "./store";
-import { Message } from 'element-ui'
+import { Message } from "element-ui";
-import NProgress from 'nprogress'
+import NProgress from "nprogress";
-import 'nprogress/nprogress.css'
+import "nprogress/nprogress.css";
-import { getToken } from '@/utils/auth'
+import { getToken } from "@/utils/auth";
-import { isPathMatch } from '@/utils/validate'
+import { isPathMatch } from "@/utils/validate";
-import { isRelogin } from '@/utils/request'
+import { isRelogin } from "@/utils/request";
+import {
+  isFullscreenSupported,
+  requestFullscreen,
+  isFullscreen,
+} from "@/utils/fullscreen";
+NProgress.configure({ showSpinner: false });
 
-NProgress.configure({ showSpinner: false })
+const whiteList = ["/login", "/register"];
-
-const whiteList = ['/login', '/register']
 
 const isWhiteList = (path) => {
-  return whiteList.some(pattern => isPathMatch(pattern, path))
+  return whiteList.some((pattern) => isPathMatch(pattern, path));
-}
+};
+
+let userManuallyExitedFullscreen = false;
+
+// 监听全屏状态变化事件
+document.addEventListener("fullscreenchange", () => {
+  if (!isFullscreen()) {
+    userManuallyExitedFullscreen = true;
+  }
+});
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  NProgress.start();
   if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+    to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
     /* has token*/
-    if (to.path === '/login') {
+    if (to.path === "/login") {
-      next({ path: '/' })
+      next({ path: "/" });
-      NProgress.done()
+      NProgress.done();
     } else if (isWhiteList(to.path)) {
-      next()
+      if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
+        const element = document.documentElement;
+        requestFullscreen(element);
+      }
+      next();
     } else {
       if (store.getters.roles.length === 0) {
-        isRelogin.show = true
+        isRelogin.show = true;
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
+        store
-          isRelogin.show = false
+          .dispatch("GetInfo")
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+          .then(() => {
-            // 根据roles权限生成可访问的路由表
+            isRelogin.show = false;
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
+            store.dispatch("GenerateRoutes").then((accessRoutes) => {
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+              // 根据roles权限生成可访问的路由表
-          })
+              router.addRoutes(accessRoutes); // 动态添加可访问路由表
-        }).catch(err => {
+              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
-            store.dispatch('LogOut').then(() => {
+            });
-              Message.error(err)
-              next({ path: '/' })
-            })
           })
+          .catch((err) => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
       } else {
-        next()
+        if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
+          const element = document.documentElement;
+          requestFullscreen(element);
+        }
+        next();
       }
     }
   } else {
     // 没有token
     if (isWhiteList(to.path)) {
       // 在免登录白名单，直接进入
-      next()
+      next();
     } else {
-      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
-      NProgress.done()
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
+  NProgress.done();
-})
+});

src/store/modules/permission.js

@@ -193,6 +193,31 @@ const permission = {
           } else {
             // console.log("不满足条件");
           }
+
+          // 温度监测
+          const result5 = sidebarRoutes.find((item) => item.name === "TemSys");
+          if (result5) {
+            // 定义要添加的多个路由对象数组
+            const additionalRoutes5 = [
+              {
+                path: "/temMonitorDeatils",
+                name: "temMonitorDeatils",
+                hidden: true,
+                component: () =>
+                  import("@/views/temSys/temMonitor/temMonitorDeatils"),
+                meta: { title: "温度监测", icon: "screen" },
+              },
+            ];
+            // 循环添加额外的路由对象到各路由数组
+            additionalRoutes5.forEach((route) => {
+              sidebarRoutes.push(route);
+              rewriteRoutes.push(route);
+              asyncRoutes.push(route);
+            });
+          } else {
+            // console.log("不满足条件");
+          }
+
           commit("SET_ROUTES", rewriteRoutes);
           commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
           commit("SET_DEFAULT_ROUTES", sidebarRoutes);

src/utils/fullscreen.js

@@ -0,0 +1,53 @@
+// 检查浏览器是否支持全屏 API
+function isFullscreenSupported() {
+  return (
+    document.fullscreenEnabled ||
+    document.webkitFullscreenEnabled ||
+    document.mozFullScreenEnabled ||
+    document.msFullscreenEnabled
+  );
+}
+
+// 进入全屏模式
+function requestFullscreen(element) {
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.webkitRequestFullscreen) {
+    element.webkitRequestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.msRequestFullscreen) {
+    element.msRequestFullscreen();
+  }
+}
+
+// 退出全屏模式
+function exitFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    document.webkitExitFullscreen();
+  } else if (document.mozCancelFullScreen) {
+    document.mozCancelFullScreen();
+  } else if (document.msExitFullscreen) {
+    document.msExitFullscreen();
+  }
+}
+
+// 检查当前是否处于全屏状态
+function isFullscreen() {
+  return (
+    document.fullscreenElement ||
+    document.webkitFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.msFullscreenElement
+  );
+}
+
+
+export {
+  isFullscreenSupported,
+  requestFullscreen,
+  exitFullscreen,
+  isFullscreen,
+};

src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue

@@ -261,7 +261,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -293,7 +293,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
     // 判断对象是否有效（不为空且不为 undefined）

src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue

@@ -204,7 +204,7 @@
               </el-option>
             </el-select>
           </div>
-          <div
+          <!-- <div
             class="context-li"
             v-if="isObjectValid(remoteManualObj) && startStopValue === 0"
           >
@@ -237,7 +237,7 @@
               :disabled="automaticObj.collectValue"
             >
             </el-switch>
-          </div>
+          </div> -->
           <div
             class="context-li"
             v-if="isObjectValid(openingBackObj)"
@@ -463,6 +463,28 @@
             </el-form>
           </div>
         </div>
+        <!-- 远程启停 -->
+        <div
+          class="offClass"
+          @click="handleOneKeyButton(remoteManualObj,'远程手动停止')"
+          v-if="isObjectValid(remoteManualObj) && startStopValue === 0"
+        >
+          <div v-if="remoteManualObj.collectValue" class="off-bg on-animation">
+            ON
+          </div>
+          <div v-else class="off-bg">OFF</div>
+        </div>
+        <!-- 时间表启停 -->
+        <div
+          class="offClass"
+          @click="handleOneKeyButton(timeScheduleObj,'时间表停止')"
+          v-if="isObjectValid(timeScheduleObj) && startStopValue === 1"
+        >
+          <div v-if="timeScheduleObj.collectValue" class="off-bg on-animation">
+            ON
+          </div>
+          <div v-else class="off-bg">OFF</div>
+        </div>
       </div>
     </div>
     <!-- 定时开关内容 -->
@@ -1523,6 +1545,40 @@ export default {
         this.$set(children, "_oldValue", children.collectValue);
       }
     },
+    // 一键启停按钮
+    handleOneKeyButton(item,val) {
+      console.log(
+        "this.automaticObj.collectValue",
+        this.automaticObj.collectValue
+      );
+      if (this.automaticObj.collectValue) {
+        // 如果风机手自动状态为手动，则不可点击该按钮。
+        this.$message({
+          message: "当前风机手自动状态为手动",
+          type: "warning",
+        });
+        return;
+      }
+      let param = "";
+      let paramText = "";
+      if (item.collectValue) {
+        // startControlObj.collectValue为true代表ON开启,此时点击按钮想OFF停止
+        param = 0;
+        paramText = "停止";
+      } else {
+        param = 1;
+        paramText = "开启";
+      }
+      this.$confirm(`确定把${val}设置为:${paramText}吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.hadleOperationConrol(item.id, param);
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -1729,7 +1785,7 @@ export default {
   .fan-satatus1 {
     position: absolute;
     top: 4.3rem;
-    left: 5.9rem;
+    left: 6.4rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -1795,7 +1851,7 @@ export default {
   }
   .fan-satatus3 {
     position: absolute;
-    top: 0.7rem;
+    top: 1.1rem;
     left: 6.4rem;
     display: flex;
     flex-direction: column;
@@ -2006,6 +2062,59 @@ export default {
       /* 箭头向右移动的距离 */
     }
   }
+  .offClass {
+    position: absolute;
+    width: 1.6rem;
+    height: 1.6rem;
+    background-image: url(../../../../assets/images/border2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    top: 5.5rem;
+    left: 6.7rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    .off-bg {
+      position: absolute;
+      left: 0.38rem;
+      top: 0.32rem;
+      width: 1rem;
+      height: 1rem;
+      background-image: url(../../../../assets/images/border3.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 1rem;
+      font-family: DIN;
+      font-size: 0.3rem;
+      color: #6cf02f;
+      font-weight: bold;
+    }
+    .on-animation {
+      animation: rotateZ 5s linear infinite;
+      transition: 0.6s; /* 设置过渡时间，控制翻转速度 */
+      transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
+    }
+    /* 定义旋转动画 */
+    @keyframes rotateZ {
+      0% {
+        transform: rotateY(0deg); /* 初始状态，不旋转 */
+      }
+      50% {
+        transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */
+      }
+      100% {
+        transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */
+      }
+    }
+  }
+  /* 鼠标悬停时移除动画 */
+  .offClass:hover .on-animation {
+    animation: none;
+  }
 }
 .device-container {
   display: flex;
@@ -2110,7 +2219,7 @@ export default {
   .windC {
     transform: scale(0.8);
     .fan-satatus3 {
-      top: 0.3rem !important;
+      top: 0.6rem !important;
     }
   }
 }
@@ -2127,7 +2236,7 @@ export default {
   .windC {
     transform: scale(0.86);
     .fan-satatus3 {
-      top: 0.4rem !important;
+      top: 0.6rem !important;
     }
   }
   .buildingDiv {

src/views/aircAndWindc/awSysMonitor/components/normalMonitor.vue

@@ -140,6 +140,13 @@
             <div class="goodStautus" v-else>正常</div>
           </div>
         </div>
+        <!--风机启停控制 -->
+        <div class="offClass" @click="handleOneKeyButton(startControlObj)">
+          <div v-if="startControlObj.collectValue" class="off-bg on-animation">
+            ON
+          </div>
+          <div v-else class="off-bg">OFF</div>
+        </div>
         <div class="fan-satatus1">
           <div class="context-li" v-if="isObjectValid(automaticObj)">
             <div class="wind-text">风机手自动状态</div>
@@ -156,7 +163,7 @@
             <div class="noneStautus" v-if="automaticObj.collectValue">手动</div>
             <div class="goodStautus" v-else>自动</div>
           </div>
-          <div class="context-li" v-if="isObjectValid(startControlObj)">
+          <!-- <div class="context-li" v-if="isObjectValid(startControlObj)">
             <div class="wind-text">风机启停控制</div>
             <el-switch
               style="display: block"
@@ -169,7 +176,7 @@
               :disabled="automaticObj.collectValue"
             >
             </el-switch>
-          </div>
+          </div> -->
         </div>
         <div class="fan-satatus2">
           <div class="context-li" v-if="isObjectValid(waterSupplyObj)">
@@ -338,10 +345,6 @@
 </template>
 
 <script>
-import { runTime } from "@/api/centerairC/sysMonitor";
-import { alarmRecordList } from "@/api/alarm/alarmRecord";
-import { getDay } from "@/utils/datetime";
-import { spaceTree } from "@/api/region";
 import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
 import { operationConrol } from "@/api/hotWater/waterControl";
 export default {
@@ -947,6 +950,40 @@ export default {
           console.log("不请求后台");
         });
     },
+    // 一键启停按钮
+    handleOneKeyButton(startControlObj) {
+      console.log(
+        "this.automaticObj.collectValue",
+        this.automaticObj.collectValue
+      );
+      if (this.automaticObj.collectValue) {
+        // 如果风机手自动状态为手动，则不可点击该按钮。
+        this.$message({
+          message: "当前风机手自动状态为手动",
+          type: "warning",
+        });
+        return;
+      }
+      let param = "";
+      let paramText = "";
+      if (startControlObj.collectValue) {
+        // startControlObj.collectValue为true代表ON开启,此时点击按钮想OFF停止
+        param = 0;
+        paramText = "停止";
+      } else {
+        param = 1;
+        paramText = "开启";
+      }
+      this.$confirm(`确定把风机启停控制设置为:${paramText}吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.hadleOperationConrol(startControlObj.id, param);
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -1108,6 +1145,59 @@ export default {
       margin-bottom: 0.15rem;
     }
   }
+  .offClass {
+    position: absolute;
+    width: 1.6rem;
+    height: 1.6rem;
+    background-image: url(../../../../assets/images/border2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    top: 0rem;
+    left: 0rem;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    .off-bg {
+      position: absolute;
+      left: 0.38rem;
+      top: 0.32rem;
+      width: 1rem;
+      height: 1rem;
+      background-image: url(../../../../assets/images/border3.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 1rem;
+      font-family: DIN;
+      font-size: 0.3rem;
+      color: #6cf02f;
+      font-weight: bold;
+    }
+    .on-animation {
+      animation: rotateZ 5s linear infinite;
+      transition: 0.6s; /* 设置过渡时间，控制翻转速度 */
+      transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
+    }
+    /* 定义旋转动画 */
+    @keyframes rotateZ {
+      0% {
+        transform: rotateY(0deg); /* 初始状态，不旋转 */
+      }
+      50% {
+        transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */
+      }
+      100% {
+        transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */
+      }
+    }
+  }
+  /* 鼠标悬停时移除动画 */
+  .offClass:hover .on-animation {
+    animation: none;
+  }
   .fan-satatus1 {
     position: absolute;
     top: 4.5rem;

src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue

@@ -506,7 +506,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -538,7 +538,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
   },

src/views/centerairC/sysMonitor/hostDetails.vue

@@ -399,7 +399,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -692,7 +692,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
     // 判断 curValue 是否为特定值

src/views/centerairC/sysMonitor/monitorCenter.vue

@@ -1097,7 +1097,7 @@ export default {
       clearInterval(this.nowTimer);
     }
     // 在组件销毁前退出全屏
-    this.exitFullscreen();
+    // this.exitFullscreen();
   },
   methods: {
     // 全屏操作
@@ -1288,7 +1288,7 @@ export default {
             })
             .catch((error) => {
               console.log("请求发生错误，更新设备状态", error);
-              this.ggetOneKeyButton();
+              this.getOneKeyButton();
             });
         })
         .catch(() => {});

src/views/centerairC/sysMonitor/performance.vue

@@ -492,7 +492,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -528,7 +528,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
   },

src/views/hotWater/waterMonitor/waterMonitorDetails.vue

@@ -177,6 +177,32 @@
                 src="../../../assets/flowimg/closepum.png"
                 alt=""
               />
+              <!-- 供水泵3定位 -->
+              <img
+                class="waterpum"
+                v-if="this.upWaterState2 === '1'"
+                src="../../../assets/flowimg/startpum.png"
+                alt=""
+              />
+              <img
+                class="waterpum"
+                v-else
+                src="../../../assets/flowimg/closepum.png"
+                alt=""
+              />
+              <!-- 供水泵4定位 -->
+              <img
+                class="waterpum"
+                v-if="this.upWaterState2 === '1'"
+                src="../../../assets/flowimg/startpum.png"
+                alt=""
+              />
+              <img
+                class="waterpum"
+                v-else
+                src="../../../assets/flowimg/closepum.png"
+                alt=""
+              />
               <!-- 补水定位 -->
               <img
                 class="buwaterpum2"
@@ -443,6 +469,7 @@
               class="maintable"
               ref="maintable"
               :data="tableData"
+              height="200"
               highlight-current-row
               @row-click="handlerow"
               :cell-style="tableRowStyle"
@@ -704,7 +731,7 @@ export default {
     },
     // 进入系统首页
     goSys() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/");
     },
     // 返回上一页
@@ -736,7 +763,7 @@ export default {
       });
     },
     goWarning() {
-      this.exitFullscreen();
+      // this.exitFullscreen();
       this.$router.push("/alarm/alarmRecord");
     },
     getImageSrc(item) {
@@ -1134,6 +1161,9 @@ export default {
     width: 256px;
     padding: 15px 10px 10px 10px;
     border: 1px solid #004b8c;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     .status {
       display: flex;
       flex-direction: row;
@@ -1233,10 +1263,9 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
-
         .flowimg {
           width: 12.27rem;
-          height: 4.6rem;
+          height: 5.6rem;
           background-size: 100% 100%;
           background-repeat: no-repeat;
           position: relative;
@@ -1287,8 +1316,8 @@ export default {
 
           .text5 {
             position: absolute;
-            top: 4.2rem;
+            top: 4.4rem;
-            left: 2.1rem;
+            right: 0.2rem;
             z-index: 1;
           }
 
@@ -1323,10 +1352,10 @@ export default {
 
           .supply {
             position: absolute;
-            top: 0rem;
+            top: 1.2rem;
             left: 0rem;
             width: 12.3rem;
-            height: 4.6rem;
+            height: 4.9rem;
             z-index: 0;
           }
 
@@ -1870,10 +1899,10 @@ export default {
       .changecontent {
         background: #142c4e;
         border-radius: 6px;
-        height: 350px;
+        // height: 250px;
-        padding: 35px 10px 10px 10px;
+        padding: 10px;
         overflow: hidden;
-        margin-top: 40px;
+        margin-top: 100px;
 
         .tablemaeta {
           font-family: SourceHanSansCN-Medium;
@@ -1949,9 +1978,9 @@ export default {
   }
   .changecontent {
     border-radius: 0.06rem !important;
-    height: 3.5rem !important;
+    // height: 3rem !important;
-    padding: 0.35rem 0.1rem 0.1rem 0.1rem !important;
+    padding: 0.1rem !important;
-    margin-top: 0.4rem !important;
+    margin-top: 1rem !important;
 
     .tablemaeta {
       font-size: 0.18rem !important;
@@ -2004,9 +2033,8 @@ export default {
     .folw {
       .changecontent {
         border-radius: 0.06rem !important;
-        height: 300px !important;
+        padding: 0.1rem !important;
-        padding: 0.35rem 0.1rem 0.1rem 0.1rem !important;
+        margin-top: 1rem !important;
-        margin-top: 0.4rem !important;
       }
     }
   }

src/views/index.vue

@@ -247,6 +247,10 @@ export default {
     this.getProject();
     this.getHomeData();
     this.getSubData();
+    // // 在组件挂载后尝试进入全屏
+    // setTimeout(() => {
+    //   this.requestFullscreen();
+    // }, 100); // 延迟 100 毫秒执行全屏操作
     // this.initChart();
     // window.addEventListener("resize", this.screenAdapter);
     // this.screenAdapter();
@@ -257,6 +261,23 @@ export default {
     // window.removeEventListener("resize", this.screenAdapter);
   },
   methods: {
+    // 全屏操作
+    requestFullscreen() {
+      const element = document.documentElement;
+      console.log("全屏了吗");
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        // Firefox
+        element.mozRequestFullScreen();
+      } else if (element.webkitRequestFullscreen) {
+        // Chrome, Safari and Opera
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        // IE/Edge
+        element.msRequestFullscreen();
+      }
+    },
     // 获取项目简介数据
     getProject() {
       this.imgUrl = imgUrl;
@@ -725,15 +746,15 @@ export default {
 }
 @media (max-width: 1485px) {
   .overview-li {
-      width: calc(33.33%) !important;
+    width: calc(33.33%) !important;
-      height: 2rem !important;
+    height: 2rem !important;
-      background-size: 2rem 2rem !important;
+    background-size: 2rem 2rem !important;
-      margin-bottom: 0.3rem;
+    margin-bottom: 0.3rem;
-      font-size: 0.22rem !important;
+    font-size: 0.22rem !important;
-      .overview-details {
+    .overview-details {
-        font-size: 0.27rem !important;
+      font-size: 0.27rem !important;
-      }
     }
+  }
   .project-bie {
     flex-wrap: wrap !important;
     .special-div {
@@ -743,5 +764,6 @@ export default {
   }
 }
 // 媒体查询，适配大于2000px分辨率的大屏样式
-@media (min-width: 2000px) {}
+@media (min-width: 2000px) {
+}
 </style>