#

whycq

2022-11-16 ad9609c60f8fd0fffecfb0b8c03682caef1f3db8

 Monitor-APP/pages/home/home.vue

@@ -15,44 +15,58 @@
               <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 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="content-item img">
                           <text>仓库数据</text>
                           <p class="english">warehouse data</p>
                           <view>
                              <view class="charge-info-item">
                        <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>
                                    <text class="count">{{xDistance}}</text>
                                    <text class="unit">m</text>
                                 </view>
											
                                 <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="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 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>
@@ -90,11 +104,15 @@
            yDistance: '',
            xDuration: '',
            yDuration: '',
            fontSize: '',
            height: ''
         }
      },
      onShow() {
         // 隐藏时间,电量,信号等
         // #ifdef APP-PLUS
         plus.navigator.setFullscreen(true)
         // #endif
      },
      onLoad() {
         this.getDate()
@@ -138,6 +156,7 @@
</script>

<style>
   @import url("../../static/css/common.css");
   .container{
      width: 100vw;
      min-height: 100vh;
@@ -146,6 +165,7 @@
      flex-direction: column;
      align-items: center;
      color: #fff;
		
   }
   /* 主视图 */
   .home-view {
@@ -166,17 +186,19 @@
   .head {
      width: 100vw;
      height: 11vh;
      font-size: 4vh;
      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: 1.5vh;
      font-size:1vw;
      transform: scale(0.8);
   }
   .button-left {
      position: absolute;
@@ -197,14 +219,6 @@
      width: 13.5%;
      height: 8.5%;
   }
   .charge-info-item {
      width: 100%;
      height: 100%;
   }
   .charge-info-item image {
      height: 100%;
      width: 100%;
   }
   
   
   
@@ -224,35 +238,52 @@
      align-items: center;
      justify-content: center;
   }
   .mian-item:last-child {
      align-items: flex-start;
   }
   .mian-item-box {
      width: 98%;
      height: 98%;
   }
   .content-item {
   .box-item {
      width: 100%;
      margin-top: 2%;
      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;
   .item-title {
      font-size:1.5vw;
      font-weight: 700;
   }
   .introduce-content {
      font-size: 0.3vh;
      padding-top: 2vh;
      text-indent: 3vh;
      letter-spacing: 0.3vh;
   .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 {
      width: 100vw;