<template>
|
<div class="container">
|
<div class="content-head">
|
<div class="content-titles">
|
<div class="img-container">
|
<img :src="titleUrl" alt="吉木乃县人饮项目监测平台">
|
</div>
|
|
<!-- <img style="width: 100%" src="../../image/screen/image_head.png" alt="" /> -->
|
</div>
|
<div class="time-head">
|
<div class="time-head-content">
|
<span>{{ this.time }}</span> {{ this.date }} {{ this.week }}
|
</div>
|
</div>
|
<div class="icon-items">
|
<div @click="toggleFullScreen" class="fullscreen"></div>
|
<!-- <div class="logout" @click="goBack"></div> -->
|
</div>
|
</div>
|
<!-- <div class="content-body flex" style="padding: 0 0.1rem; height: 100%"> -->
|
<div class="content-body flex" style="padding: 0 0.1rem">
|
<!-- 左侧内容 -->
|
<div class="flex-item" style="width: 4.8rem">
|
<left-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></left-top>
|
<left-middle class="item-area" style="height: 29vh"></left-middle>
|
<left-bottom class="item-area" style="height: 29vh"></left-bottom>
|
</div>
|
<!-- 中间部分 -->
|
<div class="flex-main" style="width: 9.2rem">
|
<middle-area :baseInfos="baseInfos"></middle-area>
|
</div>
|
<!-- 右侧内容 -->
|
<div class="flex-item" style="width: 4.8rem">
|
<right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top>
|
<right-middle class="item-area" style="height: 29vh"></right-middle>
|
<right-bottom :wxMiniQrClientUrl="wxMiniQrClientUrl" class="item-area" style="height: 29vh"></right-bottom>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import leftTop from './component/leftTop'
|
import leftMiddle from './component/leftMiddle'
|
import leftBottom from './component/leftBottom'
|
import middleArea from './component/middleArea'
|
import rightTop from './component/rightTop'
|
import rightMiddle from './component/rightMiddle'
|
import rightBottom from './component/rightBottom'
|
import './index.scss'
|
|
import { getProjectInfo } from '@/api/largeScreen'
|
|
document.documentElement.style.fontSize = '20px'
|
|
export default {
|
name: 'LargeScreen',
|
components: {
|
leftTop,
|
leftMiddle,
|
leftBottom,
|
middleArea,
|
rightTop,
|
rightMiddle,
|
rightBottom
|
},
|
created() {
|
document.documentElement.style.fontSize = (window.innerWidth / 1920) * 100 + 'px'
|
// 12px => 0.12rem
|
// 200px => 2rem
|
// this.dateFormat()
|
this.timer = setInterval(() => {
|
this.dateFormat()
|
}, 1000)
|
this.getProjectInfo()
|
},
|
beforeDestroy() {
|
document.documentElement.style.fontSize = this.originalFontSize
|
if (this.timer) {
|
clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
|
}
|
},
|
data() {
|
return {
|
originalFontSize: document.documentElement.style.fontSize,
|
timer: null,
|
time: '',
|
date: '',
|
week: '',
|
fullScreen: false,
|
baseInfos: {}, // 项目基本信息&运营概况
|
titleUrl: '',
|
wxMiniQrClientUrl: '' // 小程序信息
|
}
|
},
|
methods: {
|
dateFormat() {
|
let date = new Date()
|
let year = date.getFullYear()
|
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
|
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
|
let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
|
this.date = year + '-' + month + '-' + day + ' '
|
this.time = hours + ':' + minutes + ':' + seconds
|
this.week = '星期' + '日一二三四五六'.charAt(date.getDay())
|
},
|
// 全屏
|
toggleFullScreen() {
|
console.log(document.fullscreenElement)
|
if (!document.fullscreenElement) {
|
document.documentElement.requestFullscreen()
|
} else {
|
if (document.exitFullscreen) {
|
document.exitFullscreen()
|
}
|
}
|
this.fullScreen = !this.fullScreen
|
},
|
// 退出
|
goBack() {
|
this.$router.go(-1)
|
},
|
// 获取项目信息
|
getProjectInfo() {
|
getProjectInfo({orgTag: 'dy'}).then((res) => {
|
if(res.succ==1){
|
this.titleUrl = res.wxMiniQrManageUrl || ''
|
this.wxMiniQrClientUrl = res.wxMiniQrClientUrl || ''
|
}else{
|
this.$message({
|
type: 'error',
|
message: res.message
|
})
|
}
|
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// @import '../../font/font.css';
|
.container {
|
// width: 100vw;
|
height: 100vh;
|
width: 100%;
|
// height: 100%;
|
background: url('../../image/screen/image_background.png') no-repeat fixed center;
|
background-size: 100% 100%;
|
// 标题
|
.content-head {
|
height: 10vh;
|
// border-bottom: 1px dashed #707070;
|
// margin-bottom: 15px;
|
position: relative;
|
// line-height: 10vh;
|
}
|
.content-titles {
|
text-align: center;
|
font-family: 'LED-FONT';
|
font-size: .6rem;
|
color: #fff;
|
// padding-top: 10px;
|
.img-container {
|
width: 60%;
|
height: 10vh;
|
margin: 0 auto;
|
overflow: hidden;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.time-head {
|
color: #fff;
|
position: absolute;
|
left: 0.2rem;
|
top: 0;
|
width: 20rem;
|
padding: 0.13rem 0;
|
font-size: 0.12rem;
|
.time-head-content {
|
width: 2.8rem;
|
height: 0.5rem;
|
background: url('../../image/screen/bg_time.png') no-repeat;
|
background-position: center center;
|
background-size: contain;
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
& span {
|
display: inline-block;
|
width: 1.2rem;
|
font-size: 20px;
|
font-family: Impact-Regular, Impact;
|
font-weight: 400;
|
letter-spacing: 0.04rem;
|
}
|
}
|
.time-item {
|
font-size: 1rem !important;
|
padding-right: 5px;
|
}
|
}
|
.icon-items {
|
position: absolute;
|
top: 13px;
|
right: 0.12rem;
|
.fullscreen {
|
float: left;
|
width: 0.4rem;
|
height: 0.4rem;
|
margin-right: 0.11rem;
|
cursor: pointer;
|
background: url('../../image/screen/bg_button@2x.png') no-repeat;
|
background-position: center center;
|
background-size: 255% 255%;
|
}
|
.fullscreen:hover {
|
background: url('../../image/screen/bg_button_hover@2x.png') no-repeat;
|
background-position: center center;
|
background-size: 255% 255%;
|
}
|
.logout {
|
float: left;
|
width: 0.4rem;
|
height: 0.4rem;
|
margin-right: 0.11rem;
|
background: url('../../image/screen/bg_button_exit@2x.png') no-repeat;
|
background-position: center center;
|
background-size: 100% 100%;
|
}
|
.logout:hover {
|
background: url('../../image/screen/bg_button_exit_hover@2x.png') no-repeat;
|
background-position: center center;
|
background-size: 100% 100%;
|
}
|
}
|
// 内容
|
.item-area {
|
margin-bottom: 15px;
|
}
|
}
|
</style>
|
