##

zjj

昨天 fdf0635d145941288edd4cfaa6da68324fa5129a

 Monitor-APP/pages/home/home.vue

@@ -3,10 +3,11 @@
      <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow">
         <view class="home-view">
            <view class="head">
               <text>自动仓库WCS监控平台</text>
               <text>智能大屏显示系统</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</view>
            <view class="time-tools">{{ calendar }}</view>
            <view class="version">V:{{ version }}</view>
            <view class="button-left" @click="ejected()"></view>
            <view class="button-right" @click="ejected()"></view>
            <!-- 主视图 -->
@@ -15,86 +16,45 @@
                  <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>
                           <text class="item-title">智能大屏显示系统</text>
                           <text class="item-subTitle">Intelligent LargeScreen Display System</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: 5vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view>
                                       <view style="position: absolute;bottom: 0;left: 7vw;">m</view>
                                    </view>
                                    <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行距离(米)</view>
                                 </view>
                              <view style="width: 100%; display: flex" v-for="(item, i) in locList" :key="i">
                                 <view style="display: flex; justify-content: center; align-items: center; width: 48%; font-size: 1.3vw">物料码: {{ item.matnr }}</view>
                                 <view style="display: flex; justify-content: center; align-items: center; width: 48%; font-size: 1.3vw">数量: {{ item.matnrCount }}</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: 5vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view>
                                       <view style="position: absolute;bottom: 0;left: 7vw;">m</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: 5vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view>
                                       <view style="position: absolute;bottom: 0;left: 7vw;">s</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: 5vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view>
                                       <view style="position: absolute;bottom: 0;left: 7vw;">s</view>
                                    </view>
                                    <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降时长(秒)</view>
                                 </view>
                              </view>
										
                           </view>
                        </view>
                        <view class="box-item">
                           <view class="flex-row" style="width: 100%;">
                           <view class="flex-row" style="width: 100%">
                              <!-- 左侧 -->
                              <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                              <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 style="margin-left: auto">
                                 <!-- 百分比 -->
                                 <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" >
                                 <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>
                                    <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-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 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 style="position: absolute; bottom: 0; right: 0; font-size: 2.5vw; color: #ff5722">
                                    {{ baseInfo.used }}
                                 </view>
                              </view>
                           </view>
                        </view>
@@ -103,122 +63,133 @@
               </view>
               <view class="mian-item">
                  <view class="mian-item-box">
                     <view style="width: 100%;height: 100%;">
                        <view style="height: 35%;">
                     <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-row" style="width: 100%">
                                    <!-- 左侧 -->
                                    <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;">
                                    <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 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 class="flex-col" style="align-items: flex-end; justify-content: flex-end"></view>
                                    </view>
                                 </view>
                                 <view class="charts-box">
                                    <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/>
                                    <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true" />
                                 </view>
                              </view>
                           </y-box>
                        </view>
								
								
                        <!-- null -->
                        <view style="height: 2%;"></view>
								
								
                        <view style="height: 43%;">
                        <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;">
                                 <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> 
                                    <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="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"/>
                                       <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 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/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.emptyCount}}</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/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.noneCount}}</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/ruiyun.jpg" mode="" style="width: 100%;"></image>
                              </view>
                           </y-box>
                        <view style="height: 2%"></view>
                        <view style="height: 18%; display: flex; justify-content: space-around; align-items: center">
                           <view style="height: 50%">
                              <image style="height: 100%" src="../../static/img/logo-bai.png" mode="aspectFit"></image>
                           </view>
                        </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>
               <text>{{ infoText.title }}</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</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="info-box-text">
                        <view class="flex-col info-box-text-item">目标站：{{infoText.staNo}}</view>
                        <view class="flex-col info-box-text-item">商品编号：{{infoText.matnr}}</view>
                        <view class="flex-col info-box-text-item">商品名称：{{infoText.maknx}}</view>
                        <view class="flex-col info-box-text-item">商品规格：{{infoText.specs}}</view>
                        <view class="flex-col info-box-text-item">数量：{{infoText.count}}</view>
                     <!-- 文本容器 -->
                     <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>
                        <!-- body -->
                        <view class="swiper-body">
                           <swiper class="swiper-body-main" vertical="true" display-multiple-items="1" circular="true" :autoplay="true" :interval="3000" :duration="2000">
                              <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%; font-size: 3vw">物料编码: {{ item.matnr }}</view>
                                 <view style="width: 50%; font-size: 3vw">名称: {{ item.maknx }}</view>
                                 <view style="width: 50%; font-size: 3vw">规格: {{ item.specs }}</view>
                                 <view style="width: 50%; font-size: 3vw">批次: {{ item.batch }}</view>
                                 <view style="width: 50%; font-size: 3vw">销售单号: {{ item.orderNo }}</view>
                                 <view style="width: 50%; font-size: 3vw">客户名称: {{ item.customer }}</view>
                                 <view style="width: 33%; font-size: 3vw">数量: {{ item.count }}</view>
                              </swiper-item>
                           </swiper>
                        </view>
                     </view>
                  </y-box>
               </view>
@@ -229,63 +200,66 @@
      <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow">
         <view class="error-info-view">
            <view class="head">
               <text>{{infoText.title}}</text>
               <text>{{ infoText.title }}</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</view>
            <view class="time-tools">{{ calendar }}</view>
            <view class="button-left"></view>
            <view class="button-right"></view>
            <!-- 主体 -->
            <view class="info-main" >
            <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 class="flex-col info-box-text-item">{{ infoText.error }}</view>
                     </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 -->
            <view class="eject-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">
                     <input type="text" v-model="baseIP" />
                  </view>
               </view>
               <view class="item">
                  <view class="desc">port：</view>
                  <view class="desc">Wcsport：</view>
                  <view class="input">
                     <input type="text" v-model="basePort">
                     <input type="text" v-model="basePort" />
                  </view>
               </view>
               <view class="item">
                  <view class="desc">WcsUrl：</view>
                  <view class="input">
                     <input type="text" v-model="baseUrl" />
                  </view>
               </view>
               <view class="item">
                  <view class="desc">Wmsport：</view>
                  <view class="input">
                     <input type="text" v-model="wmsPort" />
                  </view>
               </view>
               <view class="item">
                  <view class="desc">WmsUrl：</view>
                  <view class="input">
                     <input type="text" v-model="wmsUrl" />
                  </view>
               </view>
               <view class="item">
                  <view class="desc">ledId：</view>
                  <view class="input">
                     <input type="text" v-model="baseLedId">
                     <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>
            </view>
            </scroll-view>
            <!-- button -->
            <view class="eject-button">
               <view class="button-item" @click="ejectClose">取 消</view>
@@ -293,733 +267,909 @@
            </view>
         </view>
      </view>
      <view>
         <!-- 提示窗示例 -->
         <uni-popup ref="upVersion" type="dialog">
            <uni-popup-dialog :type="msgType" title="通知" :content="dialogContent" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
         </uni-popup>
      </view>
      <view style="color: #fff; position: fixed; bottom: 10px; left: 10px" v-show="timeOut">连接超时，正在重新建立链接:: {{ times }}</view>
   </view>
</template>

<script>
   import demodata from '@/mockdata/demodata.json';
   import ycqdata from '@/pages/index/data.json';
   export default {
      data() {
         return {
            series: [],
            homeViewShow: true,
            infoViewShow: false   ,
            errorInfoViewShow: false,
            homeMode: [],
            infoMode: [],
            errorInfoMode: [],
            baseInfo: {
               xDistance: 1,
               yDistance: 2,
               xDuration: 3,
               yDuration: 4,
               usedPr: 50,
               used: 3537,
               stockCount: '',
               emptyCount: '',
               noneCount: '',
import WebSocketUtil from './uniWebSocket';
export default {
   data() {
      return {
         homeViewShow: true,
         infoViewShow: false,
         errorInfoViewShow: false,
         homeMode: [],
         infoMode: [],
         errorInfoMode: [],
         baseInfo: {
            xDistance: 1,
            yDistance: 2,
            xDuration: 3,
            yDuration: 4,
            usedPr: 50,
            used: 3537,
            stockCount: '',
            emptyCount: '',
            noneCount: ''
         },
         chartsData: {
            Line: {
               categories: [],
               series: []
            },
            chartsData: {
               "Line": {
                  "categories": [],
                  "series": []
               },
               "Pie": {
                  "series": [{
                     "data": []
                  }]
               },
            },
            duration: 1000,
            calendar: '',
            ringOpts:{},
            chartsDataLine1: {},
            chartsDataPie2: {},
            fontSize: '',
            height: '',
            showCharts: false,
            ejectShow: false,
            baseIP: '',
            basePort: '',
            baseLedId: '',
            baseCrnId: '',
            baseUrl: '',
            info: null,
            error: null,
            infoType: 0,
            text: '',
            infoText: {
               title: '全板出库',
               staNo: "200",
               matnr: "300",
               maknx: "400",
               specs: "500",
               count: "600",
               error: "利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；。"
            },
				
				
				
            Pie: {
               series: [
                  {
                     data: []
                  }
               ]
            }
         },
         duration: 300,
         calendar: '',
         ringOpts: {},
         chartsDataLine1: {},
         chartsDataPie2: {},
         ejectShow: false,
         baseIP: '',
         basePort: '',
         baseLedId: '',
         baseUrl: '',
         infoType: 0,
         infoText: {
            title: '',
            staNo: '',
            matnr: '',
            maknx: '',
            specs: '',
            count: '',
            error: '',
            barcode: ''
         },
         swiperList: [],
         timeOut: false,
         times: 0,
         currDate: '',
         locList: [],
         oldHours: '',
         oldMin: '',
         socketClient: null,
         version: '',
         socketUrl: '',
         msgType: 'success',
         filename: '',
         dialogContent: '',
         wmsUrl: '',
         wmsPort: '',
         switchDebounceTimer: null,
         viewSwitchInProgress: false
      };
   },
   onShow() {
      // 隐藏时间,电量,信号等
      // #ifdef APP-PLUS
      plus.navigator.setFullscreen(true);
      // #endif
      this.getVersion();
      var ip = this.getIp();
      console.log(ip);
   },
   mounted() {
      let that = this;
      const BaseIP = uni.getStorageSync('BaseIp');
      const BaseLedId = uni.getStorageSync('BaseLedId');
      const BasePort = uni.getStorageSync('BasePort');
      const BaseCrnId = uni.getStorageSync('BaseCrnId');
      const PROJ = uni.getStorageSync('UPROJ');
      const WMSURL = uni.getStorageSync('wmsUrl');
      const WMSPORT = uni.getStorageSync('wmsPort');
      that.baseUrl = PROJ;
      that.baseIP = BaseIP;
      that.baseLedId = BaseLedId;
      that.basePort = BasePort;
      that.baseCrnId = BaseCrnId;
      that.wmsUrl = WMSURL;
      that.wmsPort = WMSPORT;
   },
   created() {
      let that = this;
      const BaseIP = uni.getStorageSync('BaseIp');
      const BaseLedId = uni.getStorageSync('BaseLedId');
      const BasePort = uni.getStorageSync('BasePort');
      const BaseCrnId = uni.getStorageSync('BaseCrnId');
      const PROJ = uni.getStorageSync('UPROJ');
      const WMSURL = uni.getStorageSync('wmsUrl');
      const WMSPORT = uni.getStorageSync('wmsPort');
      that.baseUrl = PROJ;
      that.baseIP = BaseIP;
      that.baseLedId = BaseLedId;
      that.basePort = BasePort;
      that.baseCrnId = BaseCrnId;
      that.wmsUrl = WMSURL;
      that.wmsPort = WMSPORT;
      that.uniWebSocket();
      // that.webSockerInit()
   },
   onLoad() {
      setInterval(() => {
         this.getServerData();
         this.controller();
      }, 1000);

      setInterval(() => {
         setTimeout(() => {
            plus.runtime.restart();
         }, 100);
      }, 1000 * 60 * 60 * 4);

      // 每小时触发一次垃圾回收
      const memoryCleanerId = setInterval(() => {
         if (plus.os.name.toLowerCase() === 'android') {
            // 强制触发 GC
            plus.android.importClass('java.lang.System');
            plus.android.invoke('java.lang.System', 'gc');
            console.log('手动触发 GC');
         }
         // 清理不再需要的大型数据对象
         if (this.oldData && this.oldData.length > 100) {
            this.oldData = [];
         }
      }, 30000 * 10); // 每小时执行一次
   },
   methods: {
      getIp() {
         var ip = null;
         if (plus.os.name === 'Android') {
            try {
               const InetAddress = plus.android.importClass('java.net.InetAddress');
               const NetworkInterface = plus.android.importClass('java.net.NetworkInterface');
               const Collections = plus.android.importClass('java.util.Collections');

               let interfaces = NetworkInterface.getNetworkInterfaces();
               let en = Collections.list(interfaces); // Java ArrayList
               let ipEth = null; // 有线
               let ipWifi = null; // Wi-Fi
               let ipOther = null; // 兜底
               let size = plus.android.invoke(en, 'size');
               for (let i = 0; i < size; i++) {
                  let intf = plus.android.invoke(en, 'get', i);
                  let name = plus.android.invoke(intf, 'getName'); // eth0 / wlan0 / lo 等
                  let enumIpAddr = plus.android.invoke(intf, 'getInetAddresses');
                  let enumList = Collections.list(enumIpAddr);
                  let listSize = plus.android.invoke(enumList, 'size');
                  for (let j = 0; j < listSize; j++) {
                     let inetAddress = plus.android.invoke(enumList, 'get', j);
                     if (!plus.android.invoke(inetAddress, 'isLoopbackAddress')) {
                        let hostAddress = plus.android.invoke(inetAddress, 'getHostAddress');
                        // 只取 IPv4
                        if (hostAddress.indexOf(':') === -1) {
                           if (name.startsWith('eth') && !ipEth) {
                              ipEth = hostAddress;
                           } else if (name.startsWith('wlan') && !ipWifi) {
                              ipWifi = hostAddress;
                           } else if (!ipOther) {
                              ipOther = hostAddress;
                           }
                        }
                     }
                  }
               }
               ip = ipEth || ipWifi || ipOther || null;
               return ip;
            } catch (e) {
               console.log('获取IP失败：', e);
               return ip;
            }
         } else {
            return ip;
         }
      },
      onShow() {
         // 隐藏时间,电量,信号等
         // #ifdef APP-PLUS
         plus.navigator.setFullscreen(true)
         // #endif
      uniWebSocket() {
         let that = this;
         that.commonUrl = that.baseIP + ':' + that.basePort + '/' + that.baseUrl;
         that.socketUrl = 'ws://' + that.commonUrl + '/led/' + that.baseLedId;
         // 创建WebSocket实例
         that.socketClient = new WebSocketUtil(that.socketUrl, {
            // 心跳间隔，默认30秒
            heartbeatInterval: 30000,
            // 重连间隔，默认3秒
            reconnectInterval: 3000,
            // 最大重连次数，-1表示无限重连
            maxReconnectAttempts: -1,
            // 消息回调
            onMessage: (res) => {
               try {
                  const data = JSON.parse(res.data);
                  that.showDate(data);
                  // 处理消息...
               } catch (e) {
                  console.error('解析消息失败', e);
               }
            },
            // 连接打开回调
            onOpen: (res) => {
               that.timeOut = false;
               that.times = 0;
               console.log('WebSocket已连接', res);
            },
            // 连接错误回调
            onError: (error) => {
               console.error('WebSocket错误', error);
            },
            // 连接关闭回调
            onClose: (res) => {
               that.timeOut = true;
               that.times = that.times + 1;
               that.infoType = 0;
               console.log('WebSocket已关闭', res);
            },
            // 重连回调
            onReconnect: (info) => {
               console.log(`WebSocket重连(${info.attempts}/${info.maxAttempts})`);
            }
         });

         // 建立连接
         that.socketClient.connect();
      },
      mounted() {
         let that = this
         const BaseIP = uni.getStorageSync('BaseIp');
         const BaseLedId = uni.getStorageSync('BaseLedId');
         const BasePort = uni.getStorageSync('BasePort');
         const BaseCrnId = uni.getStorageSync('BaseCrnId');
         const PROJ = uni.getStorageSync('UPROJ');
         that.baseUrl = PROJ
         that.baseIP = BaseIP
         that.baseLedId = BaseLedId
         that.basePort = BasePort
         that.baseCrnId = BaseCrnId
         this.getUrl()
         console.log(that.commonUrl);
      },
      onLoad() {
         // this.getServerData()
         this.getDate()
         setInterval(()=>{
            this.getDate()
            this.getInfo()
            this.getError()
            // 测试用
            // this.getInfo2()
            // this.getError2()
            this.controller()
         },1000)
         setInterval(()=>{
            // this.controller()
         },2000)
      },
      methods: {
         getUrl() {
            this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + "/" +this.baseUrl
         },
         // getServerData() {
         //    this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
         //    this.chartsDataPie2=JSON.parse(JSON.stringify(demodata.PieA))
         // },
         // 获取错误信息
         getInfo2() {
            let that = this
            var result = ycqdata.dataInfo2
            var   res = result.data
            if (res.data && res.data !== "") {
      showDate(data) {
         const that = this;
         if (data.type === 'default') {
            that.chartsData.Pie.series[0].data = data.pie;
            that.baseInfo.stockCount = data.stockCunt;
            that.baseInfo.emptyCount = data.emptyCount;
            that.baseInfo.noneCount = data.noneCount;
            that.baseInfo.used = data.used;
            that.baseInfo.usedPr = data.usedPr;

            that.chartsData.Line.categories = [
               that.getDateFormat(-11),
               that.getDateFormat(-10),
               that.getDateFormat(-9),
               that.getDateFormat(-8),
               that.getDateFormat(-7),
               that.getDateFormat(-6),
               that.getDateFormat(-5),
               that.getDateFormat(-4),
               that.getDateFormat(-3),
               that.getDateFormat(-2),
               that.getDateFormat(-1),
               that.getDateFormat(0)
            ];
            that.chartsData.Line.series = data.rows;
            that.calendar = data.year + '年' + data.month + '月' + data.day + '日 ' + data.hour + ':' + data.minute + ':' + data.second + ' ' + data.week;
            that.currDate = data.year + '/' + data.month + '/' + data.day;
            that.locList = data.inventoryData;
            that.oldHours = data.hour;
            that.oldMin = data.minute;
         } else if (data.type === 'error') {
            if (data.errMsg && data.errMsg !== '') {
               var errorInfo = data.errMsg;
               if (that.infoType == 1) {
                  that.infoType = 3;
                  that.infoText.title = '其他信息';
                  // that.infoText.title = "异常"
                  that.infoText.error = errorInfo;
                  return;
               }
               that.infoType = 2;
               that.infoText.title = '其他信息';
               // that.infoText.title = "异常"
               that.infoText.error = errorInfo;
            } else {
               if (that.infoType == 1) {
                  return;
               }
               that.infoType = 0;
            }
         } else if (data.type === 'task') {
            if (data.taskList && data.taskList !== '' && data.taskList.length != 0) {
               if (that.infoType == 2 || that.infoType == 3) {
                  return;
               }
               // infoType1:只有拣料等信息
               that.infoType = 1
               if (res.data[0].ioType === 101) {
                  that.infoText.title = '全板出库'
               } else if(res.data[0].ioType === 103) {
                  that.infoText.title = '检料出库'
               that.infoType = 1;
               if (data.taskList[0].ioType === 101) {
                  that.infoText.title = '全板出库';
               } else if (data.taskList[0].ioType === 103) {
                  that.infoText.title = '拣料出库';
               } else if (data.taskList[0].ioType === 107) {
                  that.infoText.title = '盘点出库';
               } else if (data.taskList[0].ioType === 1) {
                  that.infoText.title = '入库';
               } else if (data.taskList[0].ioType === 10) {
                  that.infoText.title = '空托入库';
               } else if (data.taskList[0].ioType === 110) {
                  that.infoText.title = '空托出库';
               } else if (data.taskList[0].ioType === 104) {
                  that.infoText.title = '并板出库';
               } else if (data.taskList[0].ioType === 54) {
                  that.infoText.title = '并板入库';
               }
               that.infoText.staNo = res.data[0].staNo
               that.infoText.specs = res.data[0].matDtos[0].specs
               that.infoText.maknx = res.data[0].matDtos[0].maknx
               that.infoText.count = res.data[0].matDtos[0].count
               that.infoText.barcode = data.taskList[0].barcode;
               that.infoText.workNo = data.taskList[0].workNo;
               that.infoText.sourceLocNo = data.taskList[0].sourceLocNo;
               that.infoText.staNo = data.taskList[0].staNo;
               that.swiperList = data.taskList[0].matDtos;
            } else {
               if (that.infoType == 2 || that.infoType == 3) {
                  return;
               }
               that.infoType = 0
               that.infoType = 0;
            }
         },
         getError2 () {
            let that = this
            let result = ycqdata.dataError2
            var   res = result.data
            if (res.data && res.data !== "") {
               var errorInfo = res.data
               if (that.infoType == 1) {
                  that.infoType = 3
                  that.infoText.title = "异常"
                  that.infoText.error = errorInfo
                  return
         }
      },
      getDateFormat(value) {
         var date = new Date(this.currDate); // 获取当前时间
         date.setDate(date.getDate() + value); // 设置天数 -1 天
         var m = date.getMonth() + 1;
         var d = date.getDate();
         var newDate = m + '-' + d;
         return newDate;
      },

      getServerData() {
         this.chartsDataLine1 = JSON.parse(JSON.stringify(this.chartsData.Line));
         this.chartsDataPie2 = JSON.parse(JSON.stringify(this.chartsData.Pie));
      },
      // 控制器
      controller() {
         // 防抖处理，避免频繁切换
         if (this.switchDebounceTimer) {
            clearTimeout(this.switchDebounceTimer);
         }
         this.switchDebounceTimer = setTimeout(() => {
            this.performViewSwitch();
         }, 100);
      },

      performViewSwitch() {
         // 使用状态机模式简化视图切换
         const viewStates = {
            0: () => this.showHomeView(),
            1: () => this.showInfoView(),
            2: () => this.showErrorView(),
            3: () => this.showErrorView()
         };
         const switchAction = viewStates[this.infoType];
         if (switchAction && !this.viewSwitchInProgress) {
            this.viewSwitchInProgress = true;
            switchAction();
            // 统一的切换完成处理
            setTimeout(() => {
               this.viewSwitchInProgress = false;
            }, this.duration + 100);
         }
      },

      showHomeView() {
         this.infoViewShow = false;
         this.errorInfoViewShow = false;
         this.infoMode = ['fade', 'slide-bottom'];
         this.errorInfoMode = ['fade', 'slide-bottom'];
         setTimeout(() => {
            this.homeViewShow = true;
            this.homeMode = ['fade', 'slide-bottom'];
         }, this.duration);
      },

      showInfoView() {
         this.homeViewShow = false;
         this.errorInfoViewShow = false;
         this.homeMode = ['fade', 'slide-bottom'];
         this.errorInfoMode = ['fade', 'slide-bottom'];
         setTimeout(() => {
            this.infoViewShow = true;
            this.infoMode = ['fade', 'slide-bottom'];
         }, this.duration);
      },

      showErrorView() {
         this.homeViewShow = false;
         this.infoViewShow = false;
         this.homeMode = ['fade', 'slide-bottom'];
         this.infoMode = ['fade', 'slide-bottom'];
         setTimeout(() => {
            this.errorInfoViewShow = true;
            this.errorInfoMode = ['fade', 'slide-bottom'];
         }, this.duration);
      },
      // 配置
      ejected() {
         this.ejectShow = true;
      },
      // 取消配置
      ejectClose() {
         this.ejectShow = false;
      },
      // 确认配置
      ejectConfirm() {
         uni.setStorageSync('BaseIp', this.baseIP);
         uni.setStorageSync('BaseLedId', this.baseLedId);
         uni.setStorageSync('BasePort', this.basePort);
         uni.setStorageSync('BaseCrnId', this.baseCrnId);
         uni.setStorageSync('UPROJ', this.baseUrl);
         uni.setStorageSync('wmsUrl', this.wmsUrl);
         uni.setStorageSync('wmsPort', this.wmsPort);

         this.ejectShow = false;
      },
      //检测当前平台，如果是安卓则启动安卓更新
      getVersion() {
         let that = this;
         uni.getSystemInfo({
            success: (res) => {
               if (res.platform == 'android') {
                  that.AndroidCheckUpdate();
               }
               that.infoType = 2
               that.infoText.title = "异常"
               that.infoText.error = errorInfo
            } else {
               if (that.infoType == 1) {
                  return
               }
               that.infoType = 0
            }
         },
         getInfo() {
            let that = this
            uni.request({
               url: that.commonUrl + "/monitor/led",
               method:"GET",
               data: {ledId:that.baseLedId},
               success(result) {
                  var   res = result.data
                  if (res.data && res.data !== "") {
                     if (that.infoType == 2 || that.infoType == 3) {
                        return;
                     }
                     // infoType1:只有拣料等信息
                     that.infoType = 1
                     if (res.data[0].ioType === 101) {
                        that.infoText.title = '全板出库'
                     } else if(res.data[0].ioType === 103) {
                        that.infoText.title = '检料出库'
                     }
                     that.infoText.staNo = res.data[0].staNo
                     that.infoText.specs = res.data[0].matDtos[0].specs
                     that.infoText.maknx = res.data[0].matDtos[0].maknx
                     that.infoText.count = res.data[0].matDtos[0].count
                  } else {
                     if (that.infoType == 2 || that.infoType == 3) {
                        return;
                     }
                     that.infoType = 0
                  }
         });
      },
      // 获取当前版本号
      AndroidCheckUpdate() {
         let that = this;
         plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
            that.version = wgtinfo.version; //客户端版本号
         });
         setTimeout(() => {
            that.getUpdateVersion();
         }, 100);
      },
      // 校验版本
      getUpdateVersion() {
         let that = this;
         let type = 1;
         if (that.baseUrl == 'http://undefined:undefined/undefined') {
            return;
         }
         const wms = 'http://' + that.baseIP + ':' + that.wmsPort + '/' + that.wmsUrl;
         console.log(wms);
         let url = wms + '/appVersion/checkUpdate/' + that.version + '/' + type;
         uni.request({
            url: url,
            method: 'GET',
            success(res) {
               console.log(res);
               var res = res.data;
               if (res.data) {
                  that.filename = res.data.path;
                  that.dialogContent = '发现新版本:' + res.data.version + ', 是否立即更新';
                  that.$refs.upVersion.open();
               } else {
                  uni.showToast({
                     title: res.msg,
                     icon: 'none',
                     position: 'top'
                  });
               }
            })
				
         },
         getError() {
            let that = this
            uni.request({
               url: that.commonUrl + "/monitor/led/error",
               method:"GET",
               success(result) {
                  var   res = result.data
                  if (res.data && res.data !== "") {
                     var errorInfo = res.data
                     if (that.infoType == 1) {
                        that.infoType = 3
                        that.infoText.title = "异常"
                        that.infoText.error = errorInfo
                        return
                     }
                     that.infoType = 2
                     that.infoText.title = "异常"
                     that.infoText.error = errorInfo
                  } else {
                     if (that.infoType == 1) {
                        return
                     }
                     that.infoType = 0
                  }
               }
            })
				
         },
         // 控制器
         controller() {
            switch(this.infoType) {
               // 有信息 但 没有错误信息
               case 1: 
                  if (this.homeViewShow) {
                     this.homeViewShow = false
                     this.homeMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.infoViewShow = true
                        this.infoMode = ['fade', 'slide-bottom']
                     },1000)
                  } else if (this.errorInfoViewShow) {
                     this.errorInfoViewShow = false
                     this.errorInfoMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.infoViewShow = true
                        this.infoMode = ['fade', 'slide-bottom']
                     },1000)
                  }
						
                  return;
                  // 有信息 且 有错误信息
               case 2:
                  if (this.homeViewShow) {
                     this.homeViewShow = false
                     this.homeMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.errorInfoViewShow = true
                        this.errorInfoMode = ['fade', 'slide-bottom']
                     },1000)
                  } else if (this.infoViewShow) {
                     this.infoViewShow = false
                     this.infoMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.errorInfoViewShow = true
                        this.errorInfoMode = ['fade', 'slide-bottom']
                     },1000)
                  }
                  return;
               // 有信息 且 有错误信息
               case 3:
                  if (this.homeViewShow) {
                     this.homeViewShow = false
                     this.homeMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.errorInfoViewShow = true
                        this.errorInfoMode = ['fade', 'slide-bottom']
                     },1000)
                  } else if (this.infoViewShow) {
                     this.infoViewShow = false
                     this.infoMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.errorInfoViewShow = true
                        this.errorInfoMode = ['fade', 'slide-bottom']
                     },1000)
                  }
                  return;
               default :
                  if (this.errorInfoViewShow) {
                     this.errorInfoViewShow = false
                     this.errorInfoMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.homeViewShow = true
                        this.homeMode = ['fade', 'slide-bottom']
                     },1000)
                  } else if (this.infoViewShow) {
                     this.infoViewShow = false
                     this.infoMode = ['fade', 'slide-bottom']
                     setTimeout(()=>{
                        this.homeViewShow = true
                        this.homeMode = ['fade', 'slide-bottom']
                     },1000)
                  }
                  return;
            }
				
         },
         // 主屏幕
         handle(type) {
            this.homeViewShow = !this.homeViewShow
            this.modeClass = type
         },
         // 拣料
         handle1(type) {
            this.infoViewShow = !this.infoViewShow
            this.modeClass = type
         },
         // 异常
         handle2(type) {
            this.errorInfoViewShow = !this.errorInfoViewShow
            this.modeClass = type
         },
         // 配置
         ejected () {
            this.ejectShow = true
         },
         // 取消配置
         ejectClose() {
            this.ejectShow = false
         },
         // 确认配置
         ejectConfirm() {
            uni.setStorageSync('BaseIp', this.baseIP);
            uni.setStorageSync('BaseLedId', this.baseLedId);
            uni.setStorageSync('BasePort',this.basePort);
            uni.setStorageSync('BaseCrnId',this.baseCrnId);
            uni.setStorageSync('UPROJ',this.baseUrl);
            this.getUrl()
            this.ejectShow = false
         },
         // 日历
         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 = "星期六";
         });
      },
      dialogConfirm() {
         this.$refs.upVersion.close();
         this.downWgt();
      },
      dialogClose() {
         this.$refs.upVersion.close();
      },
      downWgt() {
         let that = this;
         const wms = 'http://' + that.baseIP + ':' + that.wmsPort + '/' + that.wmsUrl;
         const downloadUrl = wms + '/appVersion/downloadApp/' + that.filename;
         uni.showLoading({
            title: '更新中……'
         });
         const downloadTask = uni.downloadFile({
            //执行下载
            url: downloadUrl, //下载地址
            timeout: 1000 * 30, //30秒超时时间
            success: (downloadResult) => {
               //下载成功
               console.log(downloadResult);
               that.showdownLine = false;
               uni.hideLoading();
               if (downloadResult.statusCode == 200) {
                  uni.showModal({
                     title: '',
                     content: '更新成功，确定现在重启吗？',
                     confirmText: '重启',
                     confirmColor: '#EE8F57',
                     success: function (res) {
                        if (res.confirm == true) {
                           plus.runtime.install(
                              //安装
                              downloadResult.tempFilePath,
                              {
                                 force: true
                              },
                              function (res) {
                                 utils.showToast('更新成功，重启中');
                                 plus.runtime.restart();
                              }
                           );
                        }
                     }
                  });
               } else {
                  uni.hideLoading();
                  that.showdownLine = false;
                  uni.showToast({
                     title: '请先上传安装包',
                     icon: 'error'
                  });
               }
            },
            fail: (err) => {
               uni.hideLoading();
               that.showdownLine = false;
               that.$u.toast(downloadResult.errMsg);
            },
            complete: (com) => {
               console.log(com);
            }
            this.calendar = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weeks
         },
         getDateFormat(value) {
            var date = new Date();// 获取当前时间
            date.setDate(date.getDate() + value);// 设置天数 -1 天
            var m = date.getMonth() + 1
            var d = date.getDate()
            var newDate = m + '-' + d
            return newDate
         },
         /*************** 折线图 *****************************************************************************************************/
         initlineChart() {
            let that = this
            uni.request({
               url: that.commonUrl + "/monitor/line/charts",
               method:'GET',
               success(result) {
                  var res = result.data
                  if (res.code === 200) {
                     that.chartsData.Line.categories = [
                        that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),
                        that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),
                        that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
                     that.chartsData.Line.series = res.data.rows
                  }
               }
            })
         },
         /*************** 饼图 *****************************************************************************************************/
         initPieChart() {
            let that = this
            uni.request({
               url: that.commonUrl + "/monitor/loc/rep",
               method:'GET',
               success(result) {
                  var res = result.data
                  if (res.code === 200) {
                     that.chartsData.Pie.series[0].data = res.data.pie
                     that.stockCount = res.data.stockCunt
                     that.emptyCount = res.data.emptyCount
                     that.noneCount = res.data.noneCount
                     that.used = res.data.used
                     that.usedPr = res.data.usedPr
                  }
               }
            })
         },
         getOther() {
            let that = this
            uni.request({
               // http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186
               url: that.commonUrl + "/monitor/other",
               data: {
                  crnId: that.baseCrnId, 
                  ledId: that.baseLedId,
               },
               success(result) {
                  console.log(result);
                  var res = result.data
                  if (res.code === 200) {
                     that.baseInfo.xDistance = res.data.xDistance
                     that.baseInfo.yDistance = res.data.yDistance
                     that.baseInfo.xDuration = res.data.xDuration
                     that.baseInfo.yDuration = res.data.yDuration
                  } else if (res.code === 403) {
							
                  } else {
							
                  }
               }
            })
         },
         });

         // 下载进度
         downloadTask.onProgressUpdate((res) => {
            that.downloadNum = res.progress;
            console.log('下载进度' + that.downloadNum);
         });
      }
		
   }
};
</script>

<style>
   /* @import url("../../static/css/common.css"); */
   /* 列 */
   .flex-col {
      display: flex;
      flex-direction: column;
@import url('home.css');

/* 列 */
.flex-col {
   display: flex;
   flex-direction: column;
}

/* 行 */
.flex-row {
   display: flex;
   flex-direction: row;
}

.container {
   width: 100vw;
   min-height: 100vh;
   background-color: #00163e;
   color: #fff;
   text-align: center;
}

/* 主视图 */
.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: 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%;
}

.img-box {
   height: 23vw;
   width: 100%;
   /* background-color: #666666; */
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: wrap;
   font-size: 1vw;
}

.item-img {
   width: 50%;
   margin-top: 5%;
   display: flex;
   flex-direction: row;
   /* background-color: #00ffff; */
   justify-content: flex-start;
   align-items: flex-start;
}

.distance {
}

.item-img image {
   height: 5vw;
   width: 5vw;
}

.progressBar {
   margin-top: 9%;
   /* width: 100%; */
   height: 20%;
   background-color: #233751;
   border-radius: 5vw;
}

.progress {
   /* width: 90%; */
   height: 100%;
   background-color: #ff5722;
   border-radius: 5vw;
}

.charts-box {
   width: 80%;
   height: 24vh;
   margin-left: 10%;
}

.charts-box-ring {
   width: 60%;
   height: 24vh;
   /* background-color: #00ffff; */
}

.sub-info {
   font-size: 1.5vw;
}

.sub-info image {
   width: 3.5vw;
   height: 3.5vw;
}

/* 共用 */
.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: 4%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
}

.item-title {
   font-size: 1.5vw;
   font-weight: 700;
}

.version {
   position: absolute;
   left: 1%;
   top: 1%;
   font-size: 1vw;
   transform: scale(0.8);
}

.item-subTitle {
   font-size: 0.5vw;
   text-indent: 0em;
}

.item-text {
   font-size: 1vw;
   text-indent: 2em;
   letter-spacing: 1px;
   line-height: 3vh;
}

/* 全板/拣料信息 */
.info-view {
   width: 100vw;
   min-height: 100vh;
   background-image: url(../../static/background.png);
   background-size: 100vw 100vh;
}

.info-main {
   width: 100vw;
   height: 88vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

.info-box {
   width: 98%;
   height: 98%;
}

/* 异常信息 */
.error-info-view {
   width: 100vw;
   min-height: 100vh;
   background-image: url(../../static/background.png);
   background-size: 100vw 100vh;
}

/* 弹出:配置区域 */
.eject-mask {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
}

.eject {
   position: relative;
   width: 45vw;
   height: 45vh;
   background-color: #fff;
   border-radius: 2rem;
}

.eject-title {
   width: 100%;
   height: 5vh;
   line-height: 6vh;
   font-size: 3vh;
   font-weight: 700;
   color: #606266;
   text-align: center;
}

.eject-input {
   margin-top: 2vh;
   height: 25vh;

   /* background-color: #00163E; */
   ::-webkit-scrollbar {
      display: none;
   }
   /* 行 */
   .flex-row {
      display: flex;
      flex-direction: row;
   }
	
   .container{
      width: 100vw;
      min-height: 100vh;
      background-color: #00163E;
      color: #fff;
      text-align: center;
		
   }
   /* 主视图 */
   .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: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%;
   }
   .img-box {
      width: 100%;
      /* background-color: #666666; */
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      font-size: 1vw;
   }
   .item-img {
      width: 50%;
      margin-top: 5%;
      display: flex;
      flex-direction: row;
      /* background-color: #00ffff; */
      justify-content: flex-start;
      align-items: flex-start;
   }
   .distance {
		
   }
   .item-img image {
      height: 5vw;
      width: 5vw;
   }
   .progressBar {
      margin-top: 9%;
      /* width: 100%; */
      height: 20%;
      background-color: #233751;
      border-radius: 5vw;
   }
   .progress {
      /* width: 90%; */
      height: 100%;
      background-color: #FF5722;
      border-radius: 5vw;
   }
   .charts-box {
     width: 80%;
     height: 24vh;
     margin-left: 10%;
   } 
   .charts-box-ring {
      width: 50%;
      height: 24vh;
      /* background-color: #00ffff; */
   }
   .sub-info {
      font-size: 1.5vw;
   }
   .sub-info image {
      width: 3.5vw;
      height: 3.5vw;
   }
	
	
	
	
   /* 共用 */
   .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: 4%;
      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: 0em;
   }
   .item-text {
      font-size: 1vw;
      text-indent: 2em;
      letter-spacing: 1px;
      line-height: 3vh;
   }
	
   /* 全板/拣料信息 */
   .info-view {
      width: 100vw;
      min-height: 100vh;
      background-image: url(../../static/background.png);
      background-size: 100vw 100vh;
   }
   .info-main {
      width: 100vw;
      height: 88vh;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .info-box {
      width: 98%;
      height: 98%;
   }
   /* 异常信息 */
   .error-info-view {
      width: 100vw;
      min-height: 100vh;
      background-image: url(../../static/background.png);
      background-size: 100vw 100vh;
   }
	
   /* 弹出:配置区域 */
   .eject-mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;	
   }
   .eject{
      position: relative;
      width: 40vw;
      height: 40vh;
      background-color: #fff;
      border-radius: 2rem;
   }
   .eject-title {
      width: 100%;
      height: 5vh;
      line-height: 6vh;
      font-size: 3vh;
      font-weight: 700;
      color:    #606266;
      text-align: center;
   }
   .eject-input {
		
   }
   .item {
      display: flex;
      align-items: center;
      margin: 2vh 0 0 0;
      font-size: 1.5vw;
      color: #363636;
   }
   .desc {
      display: inline-block;
      width: 40%;
      text-align: right;
      color: #606266;
		
   }
   .input {
      display: flex;
      align-items: center;
      padding-left: 5px;
      padding-right: 5px;
      width: 100%;
      height: 3vh;
      border: 0.1vh solid #cfd4dc;
      margin-right: 20%;
      text-align: start;
   }
   .eject-input input {
      width: 100%;
      height: 3vh;
      font-size: 1vw;
		
		
   }
   .eject-button {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0;
      height: 6vh;
      line-height: 6vh;
      width: 100%;
      border-top: 1px solid #ccc;
   }
   .button-item {
      width: 50%;
      height: 100%;
      font-size: 1.5vw;
      font-weight: bold;
      text-align: center;
      color: #909399;
   }
   .button-item:last-child {
      color: #67C23A;
		
      border-left: 1px solid #ccc;
   }
   .info-box-text {
      width: 100%;height: 100%;
      display: flex;flex-direction: column;align-items: center;justify-content: center;
   }
   .info-box-text-item {
      height: 20%;font-size: 8vh;
      justify-content: center;
   }
</style>
}

.item {
   display: flex;
   align-items: center;
   margin: 1vh 0 0 0;
   font-size: 1.5vw;
   color: #363636;
}

.desc {
   display: inline-block;
   width: 40%;
   text-align: right;
   color: #606266;
}

.input {
   display: flex;
   align-items: center;
   padding-left: 5px;
   padding-right: 5px;
   width: 100%;
   height: 3vh;
   border: 0.1vh solid #cfd4dc;
   margin-right: 20%;
   text-align: start;
}

.eject-input input {
   width: 100%;
   height: 3vh;
   font-size: 1vw;
}

.eject-button {
   display: flex;
   align-items: center;
   position: absolute;
   bottom: 0;
   height: 6vh;
   line-height: 6vh;
   width: 100%;
   border-top: 1px solid #ccc;
}

.button-item {
   width: 50%;
   height: 100%;
   font-size: 1.5vw;
   font-weight: bold;
   text-align: center;
   color: #909399;
}

.button-item:last-child {
   color: #67c23a;

   border-left: 1px solid #ccc;
}

.info-box-text {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.info-box-text-item {
   height: 20%;
   font-size: 8vh;
   justify-content: center;
}
</style>