<template>
|
<ScaleScreen
|
:width="1920"
|
:height="1080"
|
class="scale-wrap"
|
:selfAdaption="$store.state.setting.isScale"
|
>
|
<div class="bg">
|
<!-- 全屏遮罩层 -->
|
<div v-if="showMask" class="fullscreen-mask" @click="enterFullscreen">
|
<button class="fullscreen-button">点击全屏显示</button>
|
</div>
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
<div v-else class="host-body">
|
<!-- 头部 s -->
|
<div class="d-flex jc-center title_wrap">
|
<div class="zuojuxing"></div>
|
<div class="youjuxing"></div>
|
<div class="guang"></div>
|
<div class="d-flex jc-center">
|
<div class="title">
|
<span class="title-text">轮对压装智能选配系统</span>
|
</div>
|
</div>
|
<div class="timers">
|
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
<i
|
class="blq-icon-shezhi02"
|
style="margin-left: 10px"
|
@click="showSetting"
|
></i>
|
</div>
|
</div>
|
<!-- 头部 e-->
|
<!-- 内容 s-->
|
<router-view></router-view>
|
<!-- 内容 e -->
|
</div>
|
</div>
|
<Setting ref="setting" />
|
</ScaleScreen>
|
</template>
|
|
<script>
|
import { formatTime } from "../utils/index.js";
|
import Setting from "./setting.vue";
|
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
|
export default {
|
components: { Setting, ScaleScreen },
|
data() {
|
return {
|
timing: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
showMask: true // 控制遮罩层显示
|
};
|
},
|
filters: {
|
numsFilter(msg) {
|
return msg || 0;
|
},
|
},
|
computed: {},
|
created() {},
|
mounted() {
|
this.timeFn();
|
this.cancelLoading();
|
|
// 监听全屏变化
|
document.addEventListener('fullscreenchange', this.handleFullscreenChange);
|
},
|
beforeDestroy() {
|
clearInterval(this.timing);
|
document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
|
},
|
methods: {
|
showSetting() {
|
this.$refs.setting.init();
|
},
|
timeFn() {
|
this.timing = setInterval(() => {
|
this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
this.dateWeek = this.weekday[new Date().getDay()];
|
}, 1000);
|
},
|
cancelLoading() {
|
let timer = setTimeout(() => {
|
this.loading = false;
|
}, 100);
|
},
|
// 进入全屏
|
enterFullscreen() {
|
const element = document.documentElement;
|
if (element.requestFullscreen) {
|
element.requestFullscreen();
|
} else if (element.webkitRequestFullscreen) {
|
element.webkitRequestFullscreen();
|
} else if (element.msRequestFullscreen) {
|
element.msRequestFullscreen();
|
}
|
},
|
// 处理全屏变化
|
handleFullscreenChange() {
|
this.showMask = !document.fullscreenElement;
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
@import "./home.scss";
|
|
.fullscreen-mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.8);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
cursor: pointer;
|
}
|
|
.fullscreen-button {
|
padding: 15px 30px;
|
font-size: 18px;
|
background-color: #1a5cd7;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
transition: all 0.3s;
|
|
&:hover {
|
background-color: #0d4bc2;
|
transform: scale(1.05);
|
}
|
}
|
</style>
|
