看板增加全屏功能

4ba1c53b · 冀忠欣 · 4966f52c · 4ba1c53b · 4ba1c53b
Commit 4ba1c53b authored Jun 19, 2025 by 冀忠欣
Hide whitespace changes
Inline Side-by-side

Showing with 92 additions and 2 deletions

tht_project/static/html/big_screen/view/cook_process.html
+46 -1

tht_project/static/html/big_screen/view/expected_process.html
+46 -1

No files found.
--- a/tht_project/static/html/big_screen/view/cook_process.html
+++ b/tht_project/static/html/big_screen/view/cook_process.html
@@ -14,7 +14,7 @@
 </head>

 <body id="bodyId" style="display: none">
-    <div id="app" v-loading.body.fullscreen.lock="loading">
+    <div id="app" v-loading.body.fullscreen.lock="loading" ref="fullScreenElement">
        <div class="pageHeaderBox">
            <div class="weatherInfo">
                <span class="location">成型工序</span>
@@ -22,6 +22,8 @@
            <img class="logo" src="/tht_project/static/html/big_screen/image/logo.png">
            <div class="title">天合堂数据指挥中心可视化大屏</div>
            <div class="dateTimeBox">
+                <i style="font-size: 30px;margin-right: 10px;" @click="toggleFullscreen"
+                    :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>
                <div class="time">[[currentTime]]</div>
                <div class="dateBox">
                    <span>[[ currentDate ]]</span>
@@ -199,6 +201,7 @@
        data() {
            return {
                windowHeight: window.innerHeight, // 窗口高度
+                isFullscreen: false, // 全屏状态
                baseURL: "https://tht-test.newerp.rokedata.com", // 基地址
                dwsBaseUrl: "https://dws-platform.xbg.rokeris.com/dev-api", // dws系统基地址
                loading: false, // 全局加载效果
@@ -260,6 +263,48 @@
            })
        },
        methods: {
+            // 全屏icon点击事件
+            toggleFullscreen: function () {
+                if (!this.isFullscreen) {
+                    this.enterFullScreen()
+                } else {
+                    this.exitFullScreen()
+                }
+            },
+            // 全屏方法
+            enterFullScreen: function () {
+                // 获取需要全屏的元素
+                var elem = this.$refs.fullScreenElement
+                if (elem && elem.requestFullscreen) {
+                    elem.requestFullscreen()
+                } else if (elem && elem.mozRequestFullScreen) {
+                    // Firefox
+                    elem.mozRequestFullScreen()
+                } else if (elem && elem.webkitRequestFullscreen) {
+                    // Chrome, Safari & Opera
+                    elem.webkitRequestFullscreen()
+                } else if (elem && elem.msRequestFullscreen) {
+                    // IE/Edge
+                    elem.msRequestFullscreen()
+                }
+                this.isFullscreen = true
+            },
+            // 退出全屏
+            exitFullScreen: function () {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen()
+                } else if (document.mozCancelFullScreen) {
+                    // Firefox
+                    document.mozCancelFullScreen()
+                } else if (document.webkitExitFullscreen) {
+                    // Chrome, Safari and Opera
+                    document.webkitExitFullscreen()
+                } else if (document.msExitFullscreen) {
+                    // IE/Edge
+                    document.msExitFullscreen()
+                }
+                this.isFullscreen = false
+            },
            // 处理窗口大小变化修改图表大小
            handleResize() {
                for (let key in this.charts) {

--- a/tht_project/static/html/big_screen/view/expected_process.html
+++ b/tht_project/static/html/big_screen/view/expected_process.html
@@ -14,7 +14,7 @@
 </head>

 <body id="bodyId" style="display: none">
-    <div id="app" v-loading.body.fullscreen.lock="loading">
+    <div id="app" v-loading.body.fullscreen.lock="loading" ref="fullScreenElement">
        <div class="pageHeaderBox">
            <div class="weatherInfo">
                <span class="location">预料工序</span>
@@ -22,6 +22,8 @@
            <img class="logo" src="/tht_project/static/html/big_screen/image/logo.png">
            <div class="title">天合堂数据指挥中心可视化大屏</div>
            <div class="dateTimeBox">
+                <i style="font-size: 30px;margin-right: 10px;" @click="toggleFullscreen"
+                    :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>
                <div class="time">[[currentTime]]</div>
                <div class="dateBox">
                    <span>[[ currentDate ]]</span>
@@ -214,6 +216,7 @@
        data() {
            return {
                windowHeight: window.innerHeight, // 窗口高度
+                isFullscreen: false, // 全屏状态
                baseURL: "https://tht-test.newerp.rokedata.com", // 基地址
                dwsBaseUrl: "https://dws-platform.xbg.rokeris.com/dev-api", // dws系统基地址
                loading: false, // 全局加载效果
@@ -265,6 +268,48 @@
            })
        },
        methods: {
+            // 全屏icon点击事件
+            toggleFullscreen: function () {
+                if (!this.isFullscreen) {
+                    this.enterFullScreen()
+                } else {
+                    this.exitFullScreen()
+                }
+            },
+            // 全屏方法
+            enterFullScreen: function () {
+                // 获取需要全屏的元素
+                var elem = this.$refs.fullScreenElement
+                if (elem && elem.requestFullscreen) {
+                    elem.requestFullscreen()
+                } else if (elem && elem.mozRequestFullScreen) {
+                    // Firefox
+                    elem.mozRequestFullScreen()
+                } else if (elem && elem.webkitRequestFullscreen) {
+                    // Chrome, Safari & Opera
+                    elem.webkitRequestFullscreen()
+                } else if (elem && elem.msRequestFullscreen) {
+                    // IE/Edge
+                    elem.msRequestFullscreen()
+                }
+                this.isFullscreen = true
+            },
+            // 退出全屏
+            exitFullScreen: function () {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen()
+                } else if (document.mozCancelFullScreen) {
+                    // Firefox
+                    document.mozCancelFullScreen()
+                } else if (document.webkitExitFullscreen) {
+                    // Chrome, Safari and Opera
+                    document.webkitExitFullscreen()
+                } else if (document.msExitFullscreen) {
+                    // IE/Edge
+                    document.msExitFullscreen()
+                }
+                this.isFullscreen = false
+            },
            // 处理窗口大小变化修改图表大小
            handleResize() {
                for (let key in this.charts) {