1448

src/views/touchScreen/main/index.vue

@@ -10,7 +10,7 @@
             <template v-slot:append>
                 <kbTime></kbTime>
                 <!-- <v-btn icon="mdi-magnify"></v-btn> -->
-                <v-btn icon="mdi-dots-vertical"></v-btn>
+                <v-btn icon="mdi-overscan" @click="doScreen"></v-btn>
             </template>
         </v-app-bar>
         <!-- 右侧菜单 -->
@@ -50,6 +50,60 @@ const { proxy } = getCurrentInstance()
 const goBack = () => {
     proxy.$router.push({ path: '/' })
 }
+/// =========================== 全屏监听 ==========================
+// 定义全屏状态
+const isFullScreen = ref(false);
+function doScreen() {
+    if (isFullScreen.value) {
+        exitFullScreen()
+    } else {
+        goFullScreen()
+    }
+}
+
+
+// 检查当前是否为全屏模式
+const checkIsFullScreen = () => {
+    isFullScreen.value = document.fullscreenElement !== null;
+};
+
+// 进入全屏
+const goFullScreen = () => {
+    const appEl = document.getElementById('app');
+    if (appEl) {
+        appEl.requestFullscreen();
+        checkIsFullScreen(); // 更新状态
+    }
+};
+
+// 退出全屏
+const exitFullScreen = () => {
+    document.exitFullscreen()
+        .catch(() => {
+            console.error('退出全屏失败');
+        });
+    checkIsFullScreen(); // 更新状态
+};
+
+// 监听全屏状态变化
+const fullScreenChangeHandler = () => {
+    checkIsFullScreen();
+};
+
+// 在组件挂载时设置事件监听
+onMounted(() => {
+    document.addEventListener('fullscreenchange', fullScreenChangeHandler);
+});
+
+// 在组件卸载时移除事件监听
+onUnmounted(() => {
+    document.removeEventListener('fullscreenchange', fullScreenChangeHandler);
+});
+/// ==================================================================================
+
+
+
+
 // 右侧菜单
 const listItems = ref([
     { title: '报工', value: '报工', icon: 'mdi-clipboard-file-outline' },