Junjie
17 小时以前 6e2f1c62d34f7c154df167fc22ea0a04b9772b58
Monitor-APP/pages/home/home.vue
@@ -1,328 +1,339 @@
<template>
   <view class="container">
      <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow">
         <view class="home-view">
            <view class="head">
               <text>自动仓库WCS监控平台</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</view>
            <view class="button-left" @click="ejected()"></view>
            <view class="button-right" @click="ejected()"></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" style="text-align: left;">利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化;自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入(出)库工作台和自动运进(出)及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体,货架内是标准尺寸的货位空间,巷道堆垛起重机穿行于货架之间的巷道中,完成存、取货的工作。管理上采用计算机及条形码技术。</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 class="flex-col" style="width: calc(100% - 5vw);">
                                    <view class="flex-row" style="position: relative;" >
                                       <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view>
                                       <view style="position: absolute;bottom: 0;left: 10vw;">KM</view>
                                    </view>
                                    <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行距离(千米)</view>
                                 </view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/b1.png" mode="aspectFit"></image>
                                 <view class="flex-col" style="width: calc(100% - 5vw);">
                                    <view class="flex-row" style="position: relative;" >
                                       <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view>
                                       <view style="position: absolute;bottom: 0;left: 10vw;">KM</view>
                                    </view>
                                    <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降距离(千米)</view>
                                 </view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/c1.png" mode="aspectFit"></image>
                                 <view class="flex-col" style="width: calc(100% - 5vw);">
                                    <view class="flex-row" style="position: relative;" >
                                       <view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view>
                                       <view style="position: absolute;bottom: 0;left: 10vw;">H</view>
                                    </view>
                                    <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行时长(小时)</view>
                                 </view>
                              </view>
                              <view class="item-img">
                                 <image src="../../static/d1.png" mode="aspectFit"></image>
                                 <view class="flex-col" style="width: calc(100% - 5vw);">
                                    <view class="flex-row" style="position: relative;" >
                                       <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view>
                                       <view style="position: absolute;bottom: 0;left: 10vw;">H</view>
                                    </view>
                                    <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降时长(小时)</view>
                                 </view>
                              </view>
   <view>
      <view v-if="crnErrorShow">
         <swiper
            class="message-swiper"
            autoplay
            circular
            interval="2000"
            duration="500"
         >
            <swiper-item v-for="(message, index) in messages" :key="index">
               <view class="message-item">{{ message }}</view>
            </swiper-item>
         </swiper>
      </view>
      <view class="container">
         <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow">
            <view class="home-view">
               <view class="head">
                  <text>智能大屏显示系统</text>
               </view>
               <!-- 日历 -->
               <view class="time-tools">{{calendar}}</view>
               <view class="button-left" @click="ejected()"></view>
               <view class="button-right" @click="ejected()"></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" style="text-align: left;">利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化;自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入(出)库工作台和自动运进(出)及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体,货架内是标准尺寸的货位空间,巷道堆垛起重机穿行于货架之间的巷道中,完成存、取货的工作。管理上采用计算机及条形码技术。</text>
                           </view>
                        </view>
                        <view class="box-item">
                           <view class="flex-row" style="width: 100%;">
                              <!-- 左侧 -->
                              <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                 <text class="item-title">库位使用率</text>
                                 <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text>
                           <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 class="flex-col" style="width: calc(100% - 5vw);">
                                       <view class="flex-row" style="position: relative;" >
                                          <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view>
                                          <view style="position: absolute;bottom: 0;left: 10vw;">KM</view>
                                       </view>
                                       <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行距离(千米)</view>
                                    </view>
                                 </view>
                                 <view class="item-img">
                                    <image src="../../static/b1.png" mode="aspectFit"></image>
                                    <view class="flex-col" style="width: calc(100% - 5vw);">
                                       <view class="flex-row" style="position: relative;" >
                                          <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view>
                                          <view style="position: absolute;bottom: 0;left: 10vw;">KM</view>
                                       </view>
                                       <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降距离(千米)</view>
                                    </view>
                                 </view>
                                 <view class="item-img">
                                    <image src="../../static/c1.png" mode="aspectFit"></image>
                                    <view class="flex-col" style="width: calc(100% - 5vw);">
                                       <view class="flex-row" style="position: relative;" >
                                          <view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view>
                                          <view style="position: absolute;bottom: 0;left: 10vw;">H</view>
                                       </view>
                                       <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行时长(小时)</view>
                                    </view>
                                 </view>
                                 <view class="item-img">
                                    <image src="../../static/d1.png" mode="aspectFit"></image>
                                    <view class="flex-col" style="width: calc(100% - 5vw);">
                                       <view class="flex-row" style="position: relative;" >
                                          <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view>
                                          <view style="position: absolute;bottom: 0;left: 10vw;">H</view>
                                       </view>
                                       <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降时长(小时)</view>
                                    </view>
                                 </view>
                              </view>
                              <!-- 右侧 -->
                              <view style="margin-left: auto;">
                                 <!-- 百分比 -->
                                 <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                    <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
                                    <text class="item-title">{{baseInfo.usedPr}}%</text>
                                    <text class="item-subTitle">同比上月 + 5%</text>
                           </view>
                           <view class="box-item">
                              <view class="flex-row" style="width: 100%;">
                                 <!-- 左侧 -->
                                 <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                    <text class="item-title">库位使用率</text>
                                    <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text>
                                 </view>
                                 <!-- 右侧 -->
                                 <view style="margin-left: auto;">
                                    <!-- 百分比 -->
                                    <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                       <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
                                       <text class="item-title">{{baseInfo.usedPr}}%</text>
                                       <text class="item-subTitle">同比上月 + 5%</text>
                                    </view>
                                 </view>
                              </view>
                              <view class="flex-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw">
                                 <!-- 进度条 -->
                                 <view class="flex-row" style="width: 100%;position: relative;margin-top: 5%;">
                                    <view class="progressBar" style="width: 80%;height: 2vw;">
                                       <view class="progress" :style="'width:'+ baseInfo.usedPr + '%'"></view>
                                    </view>
                                    <view style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">{{baseInfo.used}}</view>
                                 </view>
                              </view>
                           </view>
                        </y-box>
                     </view>
                  </view>
                  <view class="mian-item">
                     <view class="mian-item-box">
                        <view style="width: 100%;height: 100%;">
                           <view style="height: 35%;">
                              <!-- 折线图 -->
                              <y-box>
                                 <view class="box-item">
                                    <view class="flex-row" style="width: 100%;">
                                       <!-- 左侧 -->
                                       <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                          <text class="item-title">入出库统计</text>
                                          <text class="item-subTitle">ORDER STATISTICS</text>
                                       </view>
                                       <!-- 右侧 -->
                                       <view style="margin-left: auto;">
                                          <!-- 百分比 -->
                                          <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                             <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
                                             <text class="item-title">{{ baseLedId }}</text>
                                             <text class="item-subTitle">站点编号</text>
                                          </view>
                                       </view>
                                    </view>
                                    <view class="charts-box">
                                       <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
                                    </view>
                                 </view>
                              </y-box>
                           </view>
                           
                           <view class="flex-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw">
                              <!-- 进度条 -->
                              <view class="flex-row" style="width: 100%;position: relative;margin-top: 5%;">
                                 <view class="progressBar" style="width: 80%;height: 2vw;">
                                    <view class="progress" :style="'width:'+ baseInfo.usedPr + '%'"></view>
                           <!-- null -->
                           <view style="height: 2%;"></view>
                           <view style="height: 61%;">
                              <y-box>
                                 <view class="box-item">
                                    <view class="flex-row" style="width: 100%;">
                                       <!-- 左侧 -->
                                       <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                          <text class="item-title">库存类型</text>
                                          <text class="item-subTitle">INCOME DATE</text>
                                       </view>
                                       <!-- 右侧 -->
                                       <view style="margin-left: auto;">
                                          <!-- 百分比 -->
                                          <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                             <text class="item-title">今天</text>
                                             <text class="item-subTitle">Today</text>
                                          </view>
                                       </view>
                                    </view>
                                    <view class="flex-row" style="width: 100%;">
                                       <!-- 左 -->
                                       <view class="charts-box-ring">
                                          <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
                                       </view>
                                       <!-- 右 -->
                                       <view>
                                          <view class="flex-row sub-info">
                                             <image src="../../static/g1.png" mode="aspectFit"></image>
                                             <view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view>
                                             <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.stockCount}}</view>
                                          </view>
                                          <view class="flex-row sub-info" style="margin-top: 2vh;">
                                             <image src="../../static/f1.png" mode="aspectFit"></image>
                                             <view style="width: 8vw;height: 4vw;line-height: 4vw;">空库</view>
                                             <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.emptyCount}}</view>
                                          </view>
                                          <view class="flex-row sub-info" style="margin-top: 2vh;">
                                             <image src="../../static/e1.png" mode="aspectFit"></image>
                                             <view style="width: 8vw;height: 4vw;line-height: 4vw;">锁定</view>
                                             <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.noneCount}}</view>
                                          </view>
                                       </view>
                                    </view>
                                 </view>
                                 <view style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">{{baseInfo.used}}</view>
                              </view>
                              </y-box>
                           </view>
                           <view style="height: 2%;"></view>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
         </uni-transition>
         <!-- 全板/拣料信息 -->
         <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow">
            <view class="home-view">
               <view class="head">
                  <text>{{infoText.title}}</text>
               </view>
               <!-- 日历 -->
               <view class="time-tools">{{calendar}}</view>
               <view class="button-left" @click="ejected()"></view>
               <view class="button-right" @click="ejected()"></view>
               <!-- 主体 -->
               <view class="info-main">
                  <view class="info-box">
                     <y-box>
                        <!-- 文本容器 -->
                        <view class="text-content">
                           <!-- head -->
                           <view class="swiper-head">
                              <view style="width: 20%;">工作号: {{infoText.workNo}}</view>
                              <view style="width: 30%;">源库位: {{infoText.sourceLocNo}}</view>
                              <view style="width: 20%;">目标站: {{infoText.staNo}}</view>
                              <view style="width: 30%;">托盘码: {{infoText.barcode}}</view>
                              <!-- <view style="width: 10%;">数量</view> -->
                           </view>
                           <!-- body -->
                           <view class="swiper-body">
                              <!-- swiper 一些说明
                              circular 是否采用衔接滑动,即播放到末尾后重新回到开头
                              vertical 滑动方向是否为纵向
                              display-multiple-items 同时显示的滑块数量 -->
                              <swiper class="swiper-body-main" vertical="true"
                              display-multiple-items="1"
                              circular="true" :autoplay="true" :interval="10000" :duration="3000">
                                 <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i">
                                    <view style="width: 100%;">{{i+1}} / {{swiperList.length}}</view>
                                    <view style="width: 50%;">单号: {{item.orderNo}}</view>
                                    <view style="width: 50%;">库存状态: {{item.cstateid}}</view>
                                    <view style="width: 50%;">商品编号: {{item.matnr}}</view>
                                    <view style="width: 50%;">商品名称: {{item.maktx}}</view>
                                    <view style="width: 50%;">规格: {{item.specs}}</view>
                                    <view style="width: 50%;">U8旧品名: {{item.sku}}</view>
                                    <view style="width: 100%;">型号: {{item.model}}</view>
                                    <view style="width: 100%;color: red;font-size: 3.1vw;">客户名称: {{item.supp}}</view>
                                    <view style="width: 100%;color: red;font-size: 3.1vw;">开票客户: {{item.kpCstmrName}}</view>
                                    <!-- <view style="width: 25%;">主数量: {{item.count}}</view> -->
                                    <view style="width: 25%;color: red;font-size: 3.1vw;">辅数量: {{item.allWeight}}</view>
                                    <view style="width: 25%;">库存: {{item.allStock}}</view>
                                    <view style="width: 25%;">剩余: {{item.lessStock}}</view>
                                    <!-- <view style="width: 25%;">辅库存: {{item.totalWeight}}</view> -->
                                 </swiper-item>
                              </swiper>
                           </view>
                        </view>
                     </y-box>
                  </view>
               </view>
               <view class="mian-item">
                  <view class="mian-item-box">
                     <view style="width: 100%;height: 100%;">
                        <view style="height: 35%;">
                           <!-- 折线图 -->
                           <y-box>
                              <view class="box-item">
                                 <view class="flex-row" style="width: 100%;">
                                    <!-- 左侧 -->
                                    <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                       <text class="item-title">入出库统计</text>
                                       <text class="item-subTitle">ORDER STATISTICS</text>
                                    </view>
                                    <!-- 右侧 -->
                                    <view style="margin-left: auto;">
                                       <!-- 百分比 -->
                                       <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                          <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" -->
                                          <text class="item-title">31</text>
                                          <text class="item-subTitle">今日订单数</text>
                                       </view>
                                    </view>
                                 </view>
                                 <view class="charts-box">
                                    <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
                                 </view>
                              </view>
                           </y-box>
            </view>
         </uni-transition>
         <!-- 异常信息 -->
         <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow">
            <view class="error-info-view">
               <view class="head">
                  <text>{{infoText.title}}</text>
               </view>
               <!-- 日历 -->
               <view class="time-tools">{{calendar}}</view>
               <view class="button-left"></view>
               <view class="button-right"></view>
               <!-- 主体 -->
               <view class="info-main" >
                  <view class="info-box">
                     <y-box>
                        <view class="info-box-text">
                           <view class="flex-col info-box-text-item">{{infoText.error}}</view>
                        </view>
                        <!-- null -->
                        <view style="height: 2%;"></view>
                        <view style="height: 43%;">
                           <y-box>
                              <view class="box-item">
                                 <view class="flex-row" style="width: 100%;">
                                    <!-- 左侧 -->
                                    <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                       <text class="item-title">库存类型</text>
                                       <text class="item-subTitle">INCOME DATE</text>
                                    </view>
                                    <!-- 右侧 -->
                                    <view style="margin-left: auto;">
                                       <!-- 百分比 -->
                                       <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                          <text class="item-title">今天</text>
                                          <text class="item-subTitle">Today</text>
                                       </view>
                                    </view>
                                 </view>
                                 <view class="flex-row" style="width: 100%;">
                                    <!-- 左 -->
                                    <view class="charts-box-ring">
                                       <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
                                    </view>
                                    <!-- 右 -->
                                    <view>
                                       <view class="flex-row sub-info">
                                          <image src="../../static/g1.png" mode="aspectFit"></image>
                                          <view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view>
                                          <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.stockCount}}</view>
                                       </view>
                                       <view class="flex-row sub-info" style="margin-top: 2vh;">
                                          <image src="../../static/f1.png" mode="aspectFit"></image>
                                          <view style="width: 8vw;height: 4vw;line-height: 4vw;">空库</view>
                                          <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.emptyCount}}</view>
                                       </view>
                                       <view class="flex-row sub-info" style="margin-top: 2vh;">
                                          <image src="../../static/e1.png" mode="aspectFit"></image>
                                          <view style="width: 8vw;height: 4vw;line-height: 4vw;">锁定</view>
                                          <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.noneCount}}</view>
                                       </view>
                                    </view>
                                 </view>
                              </view>
                           </y-box>
                        </view>
                        <view style="height: 2%;"></view>
                        <view style="height: 18%;">
                           <y-box>
                              <view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;">
                                 <!-- 嘉善边锋机械股份有限公司 -->
                                 自动仓库WCS监控平台
                                 <!-- <image src="../../static/vietnam.jpg" mode="" style="width: 100%;"></image> -->
                              </view>
                           </y-box>
                        </view>
                     </y-box>
                  </view>
               </view>
            </view>
         </uni-transition>
         <!-- 自定义弹出层 -->
         <view class="eject-mask" v-show="ejectShow">
            <view class="eject">
               <!-- 弹出title -->
               <view class="eject-title">修改 / 配置</view>
               <!-- input -->
               <scroll-view scroll-y class="eject-input">
                  <view class="item">
                     <view class="desc">ip:</view>
                     <view class="input">
                        <input type="text" v-model="baseIP">
                     </view>
                  </view>
               </view>
            </view>
         </view>
      </uni-transition>
      <!-- 全板/拣料信息 -->
      <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow">
         <view class="home-view">
            <view class="head">
               <text>{{infoText.title}}</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</view>
            <view class="button-left" @click="ejected()"></view>
            <view class="button-right" @click="ejected()"></view>
            <!-- 主体 -->
            <view class="info-main">
               <view class="info-box">
                  <y-box>
                     <!-- 文本容器 -->
                     <view class="text-content">
                        <!-- head -->
                        <view class="swiper-head">
                           <view style="width: 30%;">托盘码: {{infoText.barcode}}</view>
                           <view style="width: 20%;">工作号: {{infoText.workNo}}</view>
                           <view style="width: 30%;">源库位: {{infoText.sourceLocNo}}</view>
                           <view style="width: 20%;">目标站: {{infoText.staNo}}</view>
                           <!-- <view style="width: 10%;">数量</view> -->
                        </view>
                        <!-- body -->
                        <view class="swiper-body">
                           <!-- swiper 一些说明
                           circular 是否采用衔接滑动,即播放到末尾后重新回到开头
                           vertical 滑动方向是否为纵向
                           display-multiple-items 同时显示的滑块数量 -->
                           <swiper class="swiper-body-main" vertical="true"
                           display-multiple-items="3"
                           circular="true" :autoplay="true" :interval="3000" :duration="2000">
                              <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i">
                                 <view style="width: 30%;">{{i+1}} / {{swiperList.length}}</view>
                                 <!-- <view style="width: 30%;">料号: {{item.matnr}}</view> -->
                                 <view style="width: 40%;">名称: {{item.maknx}}</view>
                                 <view style="width: 30%;">客户: {{item.manu}}</view>
                                 <view style="width: 30%;">出库: {{item.count}} / 总数: {{item.total}}</view>
                                 <view style="width: 40%;">规格: {{item.specs}}</view>
                                 <view style="width: 30%;">备注: {{item.memo}}</view>
                              </swiper-item>
                           </swiper>
                        </view>
                  <view class="item">
                     <view class="desc">port:</view>
                     <view class="input">
                        <input type="text" v-model="basePort">
                     </view>
                  </y-box>
               </view>
            </view>
         </view>
      </uni-transition>
      <!-- 异常信息 -->
      <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow">
         <view class="error-info-view">
            <view class="head">
               <text>{{infoText.title}}</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</view>
            <view class="button-left"></view>
            <view class="button-right"></view>
            <!-- 主体 -->
            <view class="info-main" >
               <view class="info-box">
                  <y-box>
                     <view class="info-box-text">
                        <view class="flex-col info-box-text-item">{{infoText.error}}</view>
                  </view>
                  <view class="item">
                     <view class="desc">ledId:</view>
                     <view class="input">
                        <input type="text" v-model="baseLedId">
                     </view>
                  </y-box>
                  </view>
                  <view class="item">
                     <view class="desc">CrnId:</view>
                     <view class="input">
                        <input type="text" v-model="baseCrnId">
                     </view>
                  </view>
                  <view class="item">
                     <view class="desc">Url:</view>
                     <view class="input">
                        <input type="text" v-model="baseUrl">
                     </view>
                  </view>
               </scroll-view>
               <!-- button -->
               <view class="eject-button">
                  <view class="button-item" @click="ejectClose">取 消</view>
                  <view class="button-item" @click="ejectConfirm">确 认</view>
               </view>
            </view>
         </view>
      </uni-transition>
      <!-- 自定义弹出层 -->
      <view class="eject-mask" v-show="ejectShow">
         <view class="eject">
            <!-- 弹出title -->
            <view class="eject-title">修改 / 配置</view>
            <!-- input -->
            <scroll-view scroll-y class="eject-input">
               <view class="item">
                  <view class="desc">ip:</view>
                  <view class="input">
                     <input type="text" v-model="baseIP">
                  </view>
               </view>
               <view class="item">
                  <view class="desc">port:</view>
                  <view class="input">
                     <input type="text" v-model="basePort">
                  </view>
               </view>
               <view class="item">
                  <view class="desc">ledId:</view>
                  <view class="input">
                     <input type="text" v-model="baseLedId">
                  </view>
               </view>
               <view class="item">
                  <view class="desc">CrnId:</view>
                  <view class="input">
                     <input type="text" v-model="baseCrnId">
                  </view>
               </view>
               <view class="item">
                  <view class="desc">Url:</view>
                  <view class="input">
                     <input type="text" v-model="baseUrl">
                  </view>
               </view>
            </scroll-view>
            <!-- button -->
            <view class="eject-button">
               <view class="button-item" @click="ejectClose">取 消</view>
               <view class="button-item" @click="ejectConfirm">确 认</view>
            </view>
         <view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut">
            连接超时: {{times}} s
         </view>
      </view>
      <view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut">
         连接超时: {{times}} s
      </view>
   </view>
</template>
@@ -340,6 +351,7 @@
            homeMode: [],
            infoMode: [],
            errorInfoMode: [],
            useInfo: '',
            baseInfo: {
               xDistance: 1,
               yDistance: 2,
@@ -376,6 +388,9 @@
            baseLedId: '',
            baseCrnId: '',
            baseUrl: '',
            getLedInfosIp: '172.17.60.92',
            getLedInfosPort: '9090',
            getLedInfosUrl: 'flsbwcs',
            info: null,
            error: null,
            infoType: 0,
@@ -393,7 +408,9 @@
            swiperList: [],
            timeOut: false,
            times: 0,
            currDate: ''
            currDate: '',
            crnErrorShow: false,
            messages: []
         }
      },
      onShow() {
@@ -404,6 +421,7 @@
      },
      mounted() {
         let that = this
         const BaseIP = uni.getStorageSync('BaseIp');
         const BaseLedId = uni.getStorageSync('BaseLedId');
         const BasePort = uni.getStorageSync('BasePort');
@@ -414,7 +432,11 @@
         that.baseLedId = BaseLedId
         that.basePort = BasePort
         that.baseCrnId = BaseCrnId
         // this.getUrl()
         this.getUrl()
         setTimeout(() => {
            this.getLedInfos()
         },2000)
      },
      onLoad() {
         setInterval(()=>{
@@ -422,6 +444,7 @@
            this.initlineChart()
            this.initPieChart()
            this.getOther()
            this.getUserInfo()
            // this.getDate()
            this.getDate2()
            this.getInfo()
@@ -430,13 +453,37 @@
            // this.getError2()
            this.getUrl()
            this.controller()
            // 测试用
            this.getCrnError()
            
         },1000)
      },
      methods: {
         timeOut() {
            console.log(this.times);
         },
         getLedInfos(){
            let that = this
            this.getUrl()
            uni.request({
               url: this.baseHttp + that.getLedInfosIp + ':' +this.getLedInfosPort + "/" + this.getLedInfosUrl + "/console/getLedInfos",
               method:"GET",
               data: {},
               success(res) {
                  let data = res.data.data;
                  that.baseLedId = data.staArr[0]
                  that.baseCrnId = 1
                  that.baseIP = that.getLedInfosIp;
                  that.basePort = that.getLedInfosPort;
                  that.baseUrl = that.getLedInfosUrl;
                  uni.setStorageSync('BaseIp', that.baseIP);
                  uni.setStorageSync('BaseLedId', that.baseLedId);
                  uni.setStorageSync('BasePort',that.basePort);
                  uni.setStorageSync('BaseCrnId',that.baseCrnId);
                  uni.setStorageSync('UPROJ',that.baseUrl);
               }
            })
         },
         getUrl() {
            this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + "/" +this.baseUrl
@@ -459,7 +506,7 @@
               if (res.data[0].ioType === 101) {
                  that.infoText.title = '全板出库'
               } else if(res.data[0].ioType === 103) {
                  that.infoText.title = '检料出库'
                  that.infoText.title = '拣料出库'
               } else if(res.data[0].ioType === 107) {
                  that.infoText.title = '盘点出库'
               } else if(res.data[0].ioType === 1) {
@@ -509,6 +556,20 @@
               that.infoType = 0
            }
         },
         getUserInfo() {
            let that = this
            uni.request({
               url: that.commonUrl + "/monitor/led",
               method:"GET",
               data: {ledId:that.baseLedId},
               success(res) {
                  res = res.data
                  if (res.data && res.data != '') {
                     that.useInfo = res.data
                  }
               }
            })
         },
         getInfo() {
            let that = this
            uni.request({
@@ -528,7 +589,7 @@
                     if (res.data[0].ioType === 101) {
                        that.infoText.title = '全板出库'
                     } else if(res.data[0].ioType === 103) {
                        that.infoText.title = '检料出库'
                        that.infoText.title = '拣料出库'
                     } else if(res.data[0].ioType === 107) {
                        that.infoText.title = '盘点出库'
                     } else if(res.data[0].ioType === 1) {
@@ -542,7 +603,24 @@
                     that.infoText.workNo = res.data[0].workNo
                     that.infoText.sourceLocNo = res.data[0].sourceLocNo
                     that.infoText.staNo = res.data[0].staNo
                     that.swiperList = res.data[0].matDtos
                     let matDtos = res.data[0].matDtos;
                     let allWeight = 0;
                     let allStock = 0;
                     matDtos.forEach((item) => {
                        allWeight += item.weight;
                        allStock += item.totalWeight;
                     })
                     let lessStock = allStock - allWeight;
                     let matDto = matDtos[0];
                     matDto.allWeight = allWeight;
                     matDto.allStock = allStock;
                     matDto.lessStock = lessStock;
                     that.swiperList = [matDto]
                     // that.infoText.matnr = res.data[0].matDtos[0].matnr
                     // that.infoText.specs = res.data[0].matDtos[0].specs
                     // that.infoText.maknx = res.data[0].matDtos[0].maknx
@@ -556,7 +634,7 @@
               },
               fail(err) {
                  that.timeOut = true
                  that.times = that.times+3
                  that.times = that.times+1
                  that.infoType = 0
               }
            })
@@ -823,6 +901,29 @@
               }
            })
         },
         getCrnError() {
            let that = this
            uni.request({
               url: that.commonUrl + "/monitor/crn/error",
               data: {},
               success(result) {
                  var res = result.data
                  if (res.code === 200) {
                     let data = res.data;
                     if(data.length > 0) {
                        let tmpList = []
                        data.forEach((item) => {
                           tmpList.push(item.crnNo + "号堆垛机" + item.errorName)
                        })
                        that.messages = tmpList;
                        that.crnErrorShow = true;
                     }else{
                        that.crnErrorShow = false;
                     }
                  }
               }
            })
         }
      }
      
   }
@@ -848,7 +949,7 @@
      background-color: #00163E;
      color: #fff;
      text-align: center;
      position: relative;
   }
   /* 主视图 */
   .home-view {
@@ -1128,4 +1229,20 @@
      height: 20%;font-size: 8vh;
      justify-content: center;
   }
   .message-swiper {
       width: 100%;
       height: 30px;
       background-color: #ff0000;
       display: flex;
       align-items: center;
       overflow: hidden;
      position: relative;
   }
   .message-item {
       white-space: nowrap;
       padding: 0 10px;
       color: #ffffff;
      text-align: center;
   }
</style>