<template>
|
<div class="full-screen-container">
|
|
<div class="background-line-container">
|
<div class="page-header">
|
<div>
|
<img src="@/assets/signage/logo.png" style="height: 1.67vw"/>
|
法士特沃克齿轮有限公司
|
</div>
|
<div>{{signageList[currentSignageIndex].signageTitle}}</div>
|
<div>
|
{{currentDateAndTime}}
|
<span>{{currentDayOfWeek}}</span>
|
<div class="back-img-container" v-if="currentSignageIndex!==0" @click="backToPreSignage">
|
<img src="@/assets/signage/back.png"/>
|
</div>
|
</div>
|
</div>
|
|
<div class="content-container">
|
<dv-decoration-10 class="dv-decoration" :color="['#4D9BEF','#222E4A']"/>
|
<Component :is="currentSignage" @nextSignage="switchToNextSignage" ref="componentRef"
|
:currentProductionId="signageList[currentSignageIndex].productionId"
|
:preSignageProductionId="currentSignageIndex!==0?signageList[currentSignageIndex-1].productionId:''"
|
@switchEquipmentSignageProductionId="switchEquipmentSignageProductionId"
|
@startPageLoading="pageLoading=true" @loadFinished="pageLoading=false">
|
<template v-slot:loading>
|
<dv-loading class="dv-loading" v-if="pageLoading">加载中...</dv-loading>
|
</template>
|
</Component>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import CompanySignage from './modules/GradeSignage/CompanySignage.vue'
|
import WorkshopSignage from './modules/GradeSignage/WorkshopSignage.vue'
|
import SectionSignage from './modules/GradeSignage/SectionSignage.vue'
|
import EquipmentSignage from './modules/GradeSignage/EquipmentSignage.vue'
|
|
export default {
|
productionName: 'GradeWorkshopSignage',
|
components: {
|
CompanySignage,
|
WorkshopSignage,
|
SectionSignage,
|
EquipmentSignage
|
},
|
data() {
|
return {
|
pageLoading: false,
|
currentDateAndTime: null,
|
currentDayOfWeek: null,
|
getDateAndTimeInterval: null,
|
getDayOfWeekInterval: null,
|
signageList: [
|
{
|
signageLevel: 'CompanySignage',
|
signageTitle: '法士特沃克齿轮有限公司',
|
productionId: ''
|
},
|
{
|
signageLevel: 'WorkshopSignage',
|
signageTitle: '',
|
productionId: ''
|
},
|
{
|
signageLevel: 'SectionSignage',
|
signageTitle: '',
|
productionId: ''
|
},
|
{
|
signageLevel: 'EquipmentSignage',
|
signageTitle: '设备看板',
|
productionId: ''
|
}
|
],
|
currentSignage: 'CompanySignage',
|
currentSignageIndex: 0
|
}
|
},
|
created() {
|
this.pageLoading = true
|
this.getCurrentDateAndTime()
|
this.getCurrentDayOfWeek()
|
},
|
beforeDestroy() {
|
if (this.getDateAndTimeInterval) {
|
clearInterval(this.getDateAndTimeInterval)
|
this.getDateAndTimeInterval = null
|
}
|
|
if (this.getDayOfWeekInterval) {
|
clearInterval(this.getDayOfWeekInterval)
|
this.getDayOfWeekInterval = null
|
}
|
},
|
methods: {
|
/**
|
* 切换到下一级看板
|
* @param record 跳转按钮信息
|
*/
|
switchToNextSignage(record) {
|
this.pageLoading = true
|
this.currentSignageIndex++
|
if (this.currentSignageIndex !== this.signageList.length - 1) {
|
this.signageList[this.currentSignageIndex].signageTitle = record.productionName + '看板'
|
}
|
this.signageList[this.currentSignageIndex].productionId = record.id
|
this.currentSignage = this.signageList[this.currentSignageIndex].signageLevel
|
},
|
|
// 返回前一级看板
|
backToPreSignage() {
|
this.pageLoading = true
|
this.currentSignageIndex--
|
if (this.currentSignageIndex + 1 !== this.signageList.length - 1) this.signageList[this.currentSignageIndex + 1].signageTitle = ''
|
this.signageList[this.currentSignageIndex + 1].productionId = ''
|
this.currentSignage = this.signageList[this.currentSignageIndex].signageLevel
|
},
|
|
/**
|
* 切换设备看板中的设备编号时触发
|
* @param productionId 看板对应编号
|
*/
|
switchEquipmentSignageProductionId(productionId) {
|
this.signageList[this.currentSignageIndex].productionId = productionId
|
},
|
|
// 获取当前日期和时间（1秒更新1次）
|
getCurrentDateAndTime() {
|
this.getDateAndTimeInterval = setInterval(() => this.currentDateAndTime = moment().format('YYYY-MM-DD HH:mm:ss'), 1000)
|
},
|
|
// 获取当天是星期几（1天更新1次）
|
getCurrentDayOfWeek() {
|
let timer = setTimeout(() => {
|
this.currentDayOfWeek = moment().format('dddd')
|
clearTimeout(timer)
|
timer = null
|
})
|
this.getDayOfWeekInterval = setInterval(() => {
|
this.currentDayOfWeek = moment().format('dddd')
|
}, 1000 * 60 * 60 * 24)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@font-face {
|
font-family: 'LanTing';
|
src: url('../../../assets/signage/font/方正兰亭特黑简体.ttf') format('truetype');
|
}
|
|
@font-face {
|
font-family: 'ZongYi';
|
src: url('../../../assets/signage/font/百度综艺简体.ttf') format('truetype');
|
}
|
|
.full-screen-container {
|
width: 100vw;
|
height: 56.25vw;
|
background-image: url("../../../assets/signage/background.png");
|
background-size: 100% 100%;
|
padding: 0.5%;
|
color: #eee;
|
|
.background-line-container {
|
background-image: url("../../../assets/signage/background-line.png");
|
background-size: 100% 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.page-header {
|
display: flex;
|
letter-spacing: 0.05vw;
|
|
> div:first-child {
|
color: #0071B6;
|
font-size: 1.05vw;
|
}
|
|
> div:nth-child(2) {
|
font-size: 1.7vw;
|
text-align: center;
|
text-shadow: 0 0.4vw 0 rgba(255, 255, 255, .2);
|
font-family: 'ZongYi';
|
letter-spacing: 0.25vw;
|
}
|
|
> div:last-child {
|
text-align: right;
|
font-family: 'ZongYi';
|
font-size: 1.25vw;
|
position: relative;
|
|
span {
|
font-weight: normal;
|
font-size: 1.05vw;
|
}
|
|
.back-img-container {
|
position: absolute;
|
bottom: -2vw;
|
right: 1vw;
|
cursor: pointer;
|
|
img {
|
width: 1.77vw;
|
height: 1.77vw;
|
}
|
}
|
}
|
|
> div:not(div:nth-child(2)) {
|
font-weight: bold;
|
}
|
|
> div {
|
width: 33%;
|
}
|
}
|
|
.content-container {
|
flex: 1;
|
margin: 4.5vw 3.3vw 3vw 3vw;
|
|
.right-container {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
> div:first-child {;
|
position: relative;
|
|
img {
|
height: 100%;
|
position: absolute;
|
}
|
|
.right-chart-container {
|
width: 73.59vw;
|
height: 25.31vw;
|
}
|
}
|
|
> div:last-child {
|
display: flex;
|
justify-content: space-between;
|
|
> div {
|
position: relative;
|
|
img {
|
height: 100%;
|
position: absolute;
|
}
|
|
.right-chart-container {
|
width: 23.125vw;
|
height: 19.42vw;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.dv-decoration {
|
width: 90%;
|
height: 0.25vw;
|
max-width: 90%;
|
position: absolute;
|
top: -1.5vw;
|
left: 5%
|
}
|
|
.dv-loading {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, .5);
|
z-index: 9999
|
}
|
|
}
|
</style>
|
