You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<liner v-if="show === 'liner'"/>
|
|
<caseShell v-if="show === 'caseShell'"/>
|
|
<foaming v-if="show === 'foaming'"/>
|
|
<foaming2 v-if="show === 'foaming2'"/>
|
|
<pourInto f v-if="show === 'pourInto'"/>
|
|
<finalAssembly v-if="show === 'finalAssembly'"/>
|
|
<scanDown v-if="show === 'scanDown'"/>
|
|
<week v-if="show === 'week'"/>
|
|
</div>
|
|
<div class="time" id="time">{{ time }}</div>
|
|
<div class="date" id="date">{{ date }}</div>
|
|
<div class="logo"></div>
|
|
<div class="exit" @click="exitFun"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import liner from '../board/liner'
|
|
import caseShell from '../board/caseShell/index2'
|
|
import foaming from '../board/foaming'
|
|
import foaming2 from '../board/foaming/index2'
|
|
import pourInto from '../board/pourInto/index2'
|
|
import finalAssembly from '../board/finalAssembly'
|
|
import scanDown from '../board/scanDown'
|
|
import week from '../board/week'
|
|
|
|
let getDateIntervalFun = null
|
|
export default {
|
|
name: 'BoardIndex',
|
|
props: {
|
|
exit: {
|
|
type: Function,
|
|
default: null
|
|
},
|
|
params: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
time: '',
|
|
date: '',
|
|
show:this.params
|
|
}
|
|
},
|
|
components: {
|
|
liner,
|
|
caseShell,
|
|
foaming,
|
|
foaming2,
|
|
pourInto,
|
|
finalAssembly,
|
|
scanDown,
|
|
week,
|
|
},
|
|
created() {
|
|
const getDate = () => {
|
|
let date = new Date()
|
|
let YYYY = date.getFullYear()
|
|
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
|
|
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
|
|
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
|
|
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
|
|
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
|
|
this.date = `${YYYY} - ${MM} - ${dd}`
|
|
this.time = `${HH} : ${mm} : ${ss}`
|
|
}
|
|
getDate()
|
|
getDateIntervalFun = setInterval(getDate, 1000)
|
|
},
|
|
beforeDestroy() {
|
|
getDateIntervalFun = null
|
|
},
|
|
methods: {
|
|
exitFun() {
|
|
this.exit()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.time, .date {
|
|
position: absolute;
|
|
font-size: 0.8vw;
|
|
color: #fcfcfc;
|
|
transform: translate(-50%, -50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
.exit {
|
|
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 1%;
|
|
right: 1%;
|
|
font-weight: bold;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
color: #e7b219;
|
|
}
|
|
|
|
.time {
|
|
top: 3.2%;
|
|
left: 85.8%;
|
|
}
|
|
|
|
.date {
|
|
top: 3.2%;
|
|
left: 94.1%;
|
|
}
|
|
|
|
.logo {
|
|
background-image: url("../../assets/board/logo.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 8vw;
|
|
height: 4vw;
|
|
position: absolute;
|
|
top: -1%;
|
|
left: 1%;
|
|
}
|
|
</style>
|