#

whycq

2022-11-16 ad9609c60f8fd0fffecfb0b8c03682caef1f3db8

 Monitor-APP/pages/home/home.vue

@@ -1,17 +1,84 @@
<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 class="main">
               <view class="mian-item">
                  <view class="mian-item-box">
                     <y-box>
                        <view class="box-item">
                           <text class="item-title">自动化立体仓库</text>
                           <text class="item-subTitle">Automatic Storageand Retrieval System</text>
                           <text class="item-text">利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</text>
                        </view>
                        <view class="box-item">
                           <text class="item-title">仓库数据</text>
                           <text class="item-subTitle">warehouse data</text>
                           <view class="img-box">
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/a1.png" mode="aspectFit"></image>
											
                                 <view>累计走行距离(米)</view>
                              </view>
                           </view>
                        </view>
                        <view class="box-item">
                           <text class="item-title">库位使用率</text>
                           <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text>
                        </view>
                     </y-box>
                  </view>
               </view>
               <view class="mian-item">
                  <view class="mian-item-box">
                     <view style="width: 100%;height: 100%;">
                        <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>
         </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 +86,7 @@
   export default {
      data() {
         return {
            show: true,
            homeViewShow: true,
            modeClass: ['fade', 'slide-top'],
            homeView: {
               justifyContent: 'center',
@@ -30,26 +97,192 @@
               textAlign: 'center',
               backgroundColor: '#4cd964',
               boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
            }
            },
            duration: 1000,
            calendar: '',
            xDistance: '',
            yDistance: '',
            xDuration: '',
            yDuration: '',
            fontSize: '',
            height: ''
         }
      },
      onShow() {
         // 隐藏时间,电量,信号等
         // #ifdef APP-PLUS
         plus.navigator.setFullscreen(true)
         // #endif
      },
      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>
   @import url("../../static/css/common.css");
   .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-color: black;
      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:4vw;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(0.7);
   }
   .time-tools {
      position: absolute;
      right: 2%;
      top: 2%;
      font-size:1vw;
      transform: scale(0.8);
   }
   .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%;
   }
	
	
	
   /* 共用 */
   .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-box {
      width: 98%;
      height: 98%;
   }
   .box-item {
      width: 100%;
      margin-top: 2%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
   }
   .item-title {
      font-size:1.5vw;
      font-weight: 700;
   }
   .item-subTitle {
      font-size:0.5vw;
      text-indent: 1em;
   }
   .item-text {
      font-size: 1vw;
      text-indent: 2em;
      letter-spacing: 1px;
   }
   .img-box {
      width: 100%;
      background-color: #666666;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
   }
   .item-img {
      width: 50%;
      margin-top: 3%;
      background-color: #00ffff;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
   }
   .item-img image {
      height: 5vw;
      width: 5vw;
   }
   /* 全板/拣料信息 */
   .info {