<template>
|
<view class="container">
|
<!-- 主视图 -->
|
<uni-transition :duration="duration" :mode-class="modeClass" :styles="homeView" :show="homeViewShow">
|
<view class="home-view">
|
<view class="head">
|
<text>自动仓库WCS监控平台</text>
|
</view>
|
<!-- 日历 -->
|
<view class="time-tools">{{calendar}}</view>
|
<view class="button-left"></view>
|
<view class="button-right"></view>
|
<!-- 主体 -->
|
<view class="main">
|
<view class="mian-item">
|
<view class="mian-item-box">
|
<y-box>
|
<view class="content-item">
|
<text>自动化立体仓库</text>
|
<p class="english">Automatic Storageand Retrieval System</p>
|
<p class="introduce-content"> 利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；
|
自动化立体仓库是当前技术水平较高的形式。
|
自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。
|
货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货
|
架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</p>
|
</view>
|
<view class="content-item img">
|
<text>仓库数据</text>
|
<p class="english">warehouse data</p>
|
<view>
|
<view class="charge-info-item">
|
<image src="../../static/a1.png" mode="aspectFit"></image>
|
<view>
|
<text class="count">{{xDistance}}</text>
|
<text class="unit">m</text>
|
</view>
|
<view>累计走行距离(米)</view>
|
</view>
|
</view>
|
</view>
|
</y-box>
|
</view>
|
</view>
|
<view class="mian-item">
|
<view class="mian-item-box">
|
<view style="height: 38%;">
|
<y-box></y-box>
|
</view>
|
<view style="height: 2%;"></view>
|
<view style="height: 38%;">
|
<y-box></y-box>
|
</view>
|
<view style="height: 2%;"></view>
|
<view style="height: 20%;">
|
<y-box></y-box>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</uni-transition>
|
<!-- 全板/拣料信息 -->
|
<!-- <view class="info">
|
|
</view> -->
|
<!-- 异常信息 -->
|
<!-- <view class="error-info"></view> -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
homeViewShow: true,
|
modeClass: ['fade', 'slide-top'],
|
homeView: {
|
justifyContent: 'center',
|
alignItems: 'center',
|
width: '100vw',
|
height: '100vh',
|
borderRadius: '5px',
|
textAlign: 'center',
|
backgroundColor: '#4cd964',
|
boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
|
},
|
duration: 1000,
|
calendar: '',
|
xDistance: '',
|
yDistance: '',
|
xDuration: '',
|
yDuration: '',
|
}
|
},
|
onShow() {
|
// 隐藏时间,电量,信号等
|
plus.navigator.setFullscreen(true)
|
},
|
onLoad() {
|
this.getDate()
|
setInterval(()=>{
|
this.getDate()
|
},1000)
|
setInterval(()=>{
|
// this.handle(['fade', 'slide-top'])
|
},4000)
|
},
|
methods: {
|
handle(type) {
|
this.homeViewShow = !this.homeViewShow
|
this.modeClass = type
|
},
|
// 日历
|
getDate() {
|
var dt = new Date();
|
var year,month,day,hours,minutes,seconds,weeks
|
year = dt.getFullYear();
|
month = (dt.getMonth()+1) < 10 ? '0'+ (dt.getMonth()+1) : (dt.getMonth()+1);
|
day = dt.getDate() < 10 ? '0'+dt.getDate() : dt.getDate();
|
hours = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours();
|
minutes = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes();
|
seconds = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds();
|
weeks = dt.getDay();
|
switch (weeks) {
|
case 0: weeks = "星期日"; break;
|
case 1: weeks = "星期一"; break;
|
case 2: weeks = "星期二"; break;
|
case 3: weeks = "星期三"; break;
|
case 4: weeks = "星期四"; break;
|
case 5: weeks = "星期五"; break;
|
default : weeks = "星期六";
|
}
|
this.calendar = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weeks
|
},
|
}
|
|
}
|
</script>
|
|
<style>
|
.container{
|
width: 100vw;
|
min-height: 100vh;
|
background-color: blue;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
color: #fff;
|
}
|
/* 主视图 */
|
.home-view {
|
width: 100vw;
|
min-height: 100vh;
|
background-image: url(../../static/background.png);
|
background-size: 100vw 100vh;
|
}
|
.home-right {
|
width: 50vw;
|
height: 89vh;
|
/* background-color: cadetblue; */
|
}
|
.home-right-box {
|
width: 98%;
|
height: 98%;
|
}
|
.head {
|
width: 100vw;
|
height: 11vh;
|
font-size: 4vh;
|
font-weight: 700;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.time-tools {
|
position: absolute;
|
right: 2%;
|
top: 2%;
|
font-size: 1.5vh;
|
}
|
.button-left {
|
position: absolute;
|
background-image: url(../../static/right.png);
|
background-size: 100% 100%;
|
top: 1.8%;
|
left: 21.3%;
|
width: 13.5%;
|
height: 8.5%;
|
transform: scaleX(-1);
|
}
|
.button-right {
|
position: absolute;
|
background-image: url(../../static/right.png);
|
background-size: 100% 100%;
|
top: 1.8%;
|
left: 65%;
|
width: 13.5%;
|
height: 8.5%;
|
}
|
.charge-info-item {
|
width: 100%;
|
height: 100%;
|
}
|
.charge-info-item image {
|
height: 100%;
|
width: 100%;
|
}
|
|
|
|
/* 共用 */
|
.main {
|
width: 100vw;
|
height: 88vh;
|
margin-top: 1vh;
|
display: flex;
|
|
}
|
.mian-item {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
.mian-item:last-child {
|
align-items: flex-start;
|
}
|
.mian-item-box {
|
width: 98%;
|
height: 98%;
|
}
|
.content-item {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
justify-content: flex-start;
|
margin-top: 1vh;
|
margin-left: 4%;
|
margin-right: 4%;
|
}
|
.english {
|
font-size: 0.1vh;
|
}
|
.introduce-content {
|
font-size: 0.3vh;
|
padding-top: 2vh;
|
text-indent: 3vh;
|
letter-spacing: 0.3vh;
|
}
|
|
|
|
|
/* 全板/拣料信息 */
|
.info {
|
width: 100vw;
|
min-height: 100vh;
|
background-color: #666666;
|
}
|
/* 异常信息 */
|
.error-info {
|
width: 100vw;
|
min-height: 100vh;
|
background-color: #00ffff;
|
}
|
</style>
|
