<template>
|
<div class="content">
|
<div class="header">
|
<div class="header-item" style="font-size: 20px;">
|
<el-dropdown trigger="click">
|
<div class="eare-title">
|
{{ tempCom.name}}
|
<div class="right-icon">
|
<img src="@/assets/img/ar_drop@2x.png" alt="">
|
</div>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item v-for="(item, index) in comList" :key="index" @click="selectCom(item, index)">{{item.name}}</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
|
</div>
|
<div class="title">DM云工厂车间大屏</div>
|
<div class="header-item right">
|
|
<img v-if="!isFull" src="@/assets/img/ic_fullscreen@2x.png" class="full-ic" @click="fullChange">
|
<img v-else src="@/assets/img/ic_exitfullscreen@2x.png" class="full-ic" @click="fullChange">
|
<img src="@/assets/img/title_line@2x.png" class="right-line" alt="">
|
<div class="date">
|
<div class="time">{{ tempDate.time }}</div>
|
<div class="day">{{ `${tempDate.date} ${tempDate.day}` }}</div>
|
</div>
|
<img src="@/assets/img/title_line@2x.png" class="right-line" alt="">
|
</div>
|
</div>
|
<!-- 'background': `url(${getAssets(item.bgImg)})`, -->
|
<div class="num-list">
|
<div
|
v-for="(item, index) in layoutList"
|
:key="index"
|
class="num-item"
|
:style="{ 'background-image': `url(${getAssets(item.bgImg)})`}"
|
>
|
<img :src="getAssets(item.logo)" alt="">
|
<div class="item-right">
|
<div class="item-title">{{ item.name }}</div>
|
<div class="num-value">1</div>
|
</div>
|
|
</div>
|
</div>
|
<RouterView />
|
</div>
|
</template>
|
|
|
<script setup>
|
import { getAssets } from '@/utils'
|
import { getDepartmentList } from '@/utils/apis.js'
|
import { reactive, toRefs, onMounted } from 'vue';
|
import { RouterView } from 'vue-router'
|
|
const layoutList = [
|
{ bgImg: 'bg_zhixingzhong@2x.png', name: '执行中计划数(个)', logo: 'ic_zhixingzhong@2x.png' },
|
{ bgImg: 'bg_yanqijihua@2x.png', name: '延期计划数(个)', logo: 'ic_yanqijihua@2x.png' },
|
{ bgImg: 'bg_jinrirenshu@2x.png', name: '今日生产人数(人)', logo: 'ic_jinrirenshu@2x.png' },
|
{ bgImg: 'bg_jinrishebei@2x.png', name: '今日生产设备(台)', logo: 'ic_jinrishebei@2x.png' },
|
{ bgImg: 'bg_jinribuliang@2x.png', name: '今日不良品率(%)', logo: 'ic_jinribuliang@2x.png' },
|
]
|
const data = reactive({
|
tempCom: { name: '豆米科技' },
|
isFull: false,
|
tempDate: {
|
time: '',
|
date: '',
|
day: ''
|
}
|
})
|
|
let { tempCom, isFull, tempDate } = toRefs(data)
|
|
const comList = reactive([])
|
|
|
const selectCom = (item, index) => {
|
data.tempCom = item
|
}
|
|
const fullChange = () => {
|
data.isFull = !data.isFull
|
let element = document.documentElement;
|
if (data.isFull) { // 全屏
|
if (element.requestFullscreen) {
|
element.requestFullscreen();
|
} else if (element.webkitRequestFullScreen) {
|
element.webkitRequestFullScreen();
|
} else if (element.mozRequestFullScreen) {
|
element.mozRequestFullScreen();
|
} else if (element.msRequestFullscreen) {
|
// IE11
|
element.msRequestFullscreen();
|
}
|
} else { // 还原
|
if (document.exitFullscreen) {
|
document.exitFullscreen();
|
} else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen();
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen();
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen();
|
}
|
}
|
// data.isFull = !data.isFull
|
}
|
|
onMounted(() => {
|
getDepartmentList(8)
|
.then(res => {
|
// debugger
|
comList = res
|
|
data.tempCom = res[0]
|
console.log(data.tempCom);
|
})
|
.catch(err => {})
|
const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日',]
|
setInterval(() => {
|
let date = new Date()
|
data.tempDate = {
|
time: `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
|
date: `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`,
|
day: week[date.getDay()-1]
|
}
|
}, 1000)
|
// console.log(date.getDay());
|
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
background-image: url('@/assets/img/bg@2x.png');
|
background-position: center;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 100%;
|
height: 100%;
|
padding: 30px;
|
overflow-y: scroll;
|
box-sizing: border-box;
|
.header {
|
background-image: url('@/assets/img/bg_maintitle@2x.png');
|
background-size: 100% 74px;
|
width: 100%;
|
height: 74px;
|
display: flex;
|
padding-top: 1px;
|
padding-left: 20px;
|
justify-content: space-between;
|
color: #fff;
|
.header-item {
|
width: 300px;
|
}
|
.eare-title {
|
margin-top: 27px;
|
color: #fff;
|
height: 20px;
|
font-size: 20px;
|
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
font-weight: 500;
|
// line-height: 74px;
|
display: flex;
|
.right-icon {
|
width: 20px;
|
height: 20px;
|
margin-left: 8px;
|
}
|
}
|
.title {
|
margin-top: 15px;
|
font-size: 25px;
|
font-weight: 500;
|
text-shadow: 0px 2px 17px rgba(0,0,0,0.32);
|
line-height: 25px;
|
text-align: center;
|
}
|
.right {
|
margin-top: 20px;
|
height: 30px;
|
display: flex;
|
padding-right: 22px;
|
flex-direction: row-reverse;
|
.full-ic {
|
margin-top: 2px;
|
width: 30px;
|
height: 30px;
|
}
|
.right-line {
|
width: 2px;
|
height: 34px;
|
margin-left: 15px;
|
margin-right: 15px;
|
}
|
.date {
|
.time {
|
height: 20px;
|
font-size: 18px;
|
font-weight: 500;
|
color: #FFFFFF;
|
line-height: 20px;
|
}
|
.day {
|
height: 12px;
|
font-size: 12px;
|
font-weight: 400;
|
color: #D2E0FF;
|
line-height: 12px;
|
}
|
}
|
}
|
}
|
.num-list {
|
margin-top: 24px;
|
margin-bottom: 27px;
|
display: flex;
|
justify-content: space-between;
|
height: 88px;
|
color: white;
|
.num-item {
|
width: calc(25% - 50px);
|
background-size: 100% 100%;
|
margin-right: 25px;
|
padding-left: 30px;
|
padding-top: 12px;
|
display: flex;
|
&:last-child {
|
margin-right: 0px;
|
}
|
img {
|
width: 52px;
|
height: 52px;
|
}
|
.item-right {
|
margin-left: 12px;
|
.item-title {
|
height: 19px;
|
font-size: 13px;
|
font-weight: 400;
|
color: rgba(255,255,255,0.9);
|
line-height: 19px;
|
}
|
.num-value {
|
height: 35px;
|
font-size: 30px;
|
font-weight: bold;
|
color: #FFFFFF;
|
line-height: 35px;
|
background: linear-gradient(180deg, #EEEEEE 0%, #15CFFF 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
