#

whycq

2022-11-15 4d2b055e1d5b185b9a0fafcaada96ff6aef0a1f7

 Monitor-APP/pages/home/home.vue

@@ -1,17 +1,29 @@
<template>
   <view class="container">
      <!-- 主视图 -->
      <!-- <view class="">
      <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>
         <view class="main">
            <view class="home-left">
               <y-box></y-box>
            </view>
            <view class="home-right"></view>
         </view>
      </uni-transition>
      <!-- 全板/拣料信息 -->
      <!-- <view class="info">
         
      </view> -->
      <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="homeView"
         :show="show"><text class="text">示例元素</text></uni-transition>
      <!-- 全板/拣料信息 -->
      <view class="info">
			
      </view>
      <!-- 异常信息 -->
      <view class="error-info"></view>
      <!-- <view class="error-info"></view> -->
   </view>
</template>

@@ -19,7 +31,7 @@
   export default {
      data() {
         return {
            show: true,
            homeViewShow: true,
            modeClass: ['fade', 'slide-top'],
            homeView: {
               justifyContent: 'center',
@@ -30,8 +42,51 @@
               textAlign: 'center',
               backgroundColor: '#4cd964',
               boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
            }
            },
            duration: 1000,
            calendar: ''
         }
      },
      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
         },
      }
      
   }
@@ -44,12 +99,49 @@
      background-color: blue;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
   }
   /* 主视图 */
   .home-view {
      width: 100vw;
      min-height: 100vh;
      background-color: black;
      background-image: url(../../static/background.png);
      background-size: 100vw 100vh;
   }
   .head {
      width: 100vw;
      height: 10vh;
      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%;
   }
   /* 全板/拣料信息 */
   .info {
@@ -63,4 +155,6 @@
      min-height: 100vh;
      background-color: #00ffff;
   }
   /* 共用 */
	
</style>