Skip to content

D
dwsproject
Commit 4ba1c53b by 冀忠欣
Options

看板增加全屏功能

parent 4966f52c
Showing with 92 additions and 2 deletions
tht_project/static/html/big_screen/view/cook_process.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</head> </head>
<body id="bodyId" style="display: none"> <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="pageHeaderBox">
<div class="weatherInfo"> <div class="weatherInfo">
<span class="location">成型工序</span> <span class="location">成型工序</span>
...@@ -22,6 +22,8 @@ ...@@ -22,6 +22,8 @@
<img class="logo" src="/tht_project/static/html/big_screen/image/logo.png"> <img class="logo" src="/tht_project/static/html/big_screen/image/logo.png">
<div class="title">天合堂数据指挥中心可视化大屏</div> <div class="title">天合堂数据指挥中心可视化大屏</div>
<div class="dateTimeBox"> <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="time">[[currentTime]]</div>
<div class="dateBox"> <div class="dateBox">
<span>[[ currentDate ]]</span> <span>[[ currentDate ]]</span>
...@@ -199,6 +201,7 @@ ...@@ -199,6 +201,7 @@
data() { data() {
return { return {
windowHeight: window.innerHeight, // 窗口高度 windowHeight: window.innerHeight, // 窗口高度
isFullscreen: false, // 全屏状态
baseURL: "https://tht-test.newerp.rokedata.com", // 基地址 baseURL: "https://tht-test.newerp.rokedata.com", // 基地址
dwsBaseUrl: "https://dws-platform.xbg.rokeris.com/dev-api", // dws系统基地址 dwsBaseUrl: "https://dws-platform.xbg.rokeris.com/dev-api", // dws系统基地址
loading: false, // 全局加载效果 loading: false, // 全局加载效果
...@@ -260,6 +263,48 @@ ...@@ -260,6 +263,48 @@
}) })
}, },
methods: { 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() { handleResize() {
for (let key in this.charts) { for (let key in this.charts) {
......
tht_project/static/html/big_screen/view/expected_process.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</head> </head>
<body id="bodyId" style="display: none"> <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="pageHeaderBox">
<div class="weatherInfo"> <div class="weatherInfo">
<span class="location">预料工序</span> <span class="location">预料工序</span>
...@@ -22,6 +22,8 @@ ...@@ -22,6 +22,8 @@
<img class="logo" src="/tht_project/static/html/big_screen/image/logo.png"> <img class="logo" src="/tht_project/static/html/big_screen/image/logo.png">
<div class="title">天合堂数据指挥中心可视化大屏</div> <div class="title">天合堂数据指挥中心可视化大屏</div>
<div class="dateTimeBox"> <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="time">[[currentTime]]</div>
<div class="dateBox"> <div class="dateBox">
<span>[[ currentDate ]]</span> <span>[[ currentDate ]]</span>
...@@ -214,6 +216,7 @@ ...@@ -214,6 +216,7 @@
data() { data() {
return { return {
windowHeight: window.innerHeight, // 窗口高度 windowHeight: window.innerHeight, // 窗口高度
isFullscreen: false, // 全屏状态
baseURL: "https://tht-test.newerp.rokedata.com", // 基地址 baseURL: "https://tht-test.newerp.rokedata.com", // 基地址
dwsBaseUrl: "https://dws-platform.xbg.rokeris.com/dev-api", // dws系统基地址 dwsBaseUrl: "https://dws-platform.xbg.rokeris.com/dev-api", // dws系统基地址
loading: false, // 全局加载效果 loading: false, // 全局加载效果
...@@ -265,6 +268,48 @@ ...@@ -265,6 +268,48 @@
}) })
}, },
methods: { 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() { handleResize() {
for (let key in this.charts) { for (let key in this.charts) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment