#

whycq

2024-10-14 f63be6a1bd357877eef3bacf0cc003865c834f75

 Monitor-APP/pages/home/home.vue

@@ -3,7 +3,7 @@
      <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>
@@ -15,52 +15,86 @@
                  <view class="mian-item-box">
                     <y-box>
                        <view class="box-item">
                           <text class="item-title">穿梭车运行数据</text>
                           <text class="item-subTitle">Shuttle operation data</text>
                           <view style="width: 100%;height: 28vh;">
                              <qiun-data-charts type="column" :chartData="chartsDataLine2" :opts="opts1" />
                           </view>
                           <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">Hoist operating data</text>
                           <text class="item-title">仓库数据</text>
                           <text class="item-subTitle">warehouse data</text>
                           <view class="img-box">
                              <view style="width: 100%;height: 25vh;">
                                 <qiun-data-charts type="column" :chartData="chartsDataPie3" :opts="opts" />
										
                              <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>
                        <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-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;">
                                 <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-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw">
                              <!-- 进度条 -->
                              <view class="flex-row" style="width: 100%;position: relative;">
                              <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>
@@ -76,16 +110,14 @@
                              <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-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;">
                                       <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>
@@ -93,34 +125,31 @@
                                    </view>
                                 </view>
                                 <view class="charts-box">
                                    <qiun-data-charts type="line" :chartData="chartsDataLine1"
                                       :opts="opts3" />
                                    <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%;">
                           <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-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 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>
@@ -128,47 +157,36 @@
                                 <view class="flex-row" style="width: 100%;">
                                    <!-- 左 -->
                                    <view class="charts-box-ring">
                                       <qiun-data-charts type="pie" :opts="opts4"
                                          :chartData="chartsDataPie2" />
                                       <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;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 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 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监控平台
                              <view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;">
                                 中扬智能大屏显示系统
                              </view>
                           </y-box>
                        </view>
@@ -176,7 +194,7 @@
                  </view>
               </view>
            </view>

				
         </view>
      </uni-transition>
      <!-- 全板/拣料信息 -->
@@ -191,8 +209,8 @@
            <view class="button-right" @click="ejected()"></view>
            <!-- 主体 -->
            <view class="info-main">
               <view class="info-box">
                  <y-box>
               <view class="info-box" style="display: flex;overflow: hidden;">
                  <y-box v-for="info in infoText">
                     <!-- 文本容器 -->
                     <view class="text-content">
                        <!-- head -->
@@ -200,12 +218,10 @@
                           <view style="flex: 1;">作业数量：{{infoText.barcode}}</view>
                           <view style="flex: 1;">剩余数量</view>
                        </view> -->
                        <view class="swiper-head" v-show="swiperList.length > 0">
                           <view style="flex: 2;">托盘码：{{infoText.barcode}} <br /> 订单号</view>
                           <view style="flex: 2;">{{infoText.title2}} <br />商品编号</view>
                           <view style="flex: 2;">箱码</view>
                        <view class="swiper-head">
                           <view style="flex: 2;">托盘码：{{info.barcode}} <br /> 物料号</view>
                           <view style="flex: 2;">{{info.staNo}}-站点 <br />类别</view>
                           <view style="flex: 2;">商品名称</view>
                           <view style="flex: 5;">规格</view>
                           <view style="flex: 1;">作业数量</view>
                           <view style="flex: 1;">剩余数量</view>
                        </view>
@@ -215,17 +231,15 @@
                           circular 是否采用衔接滑动，即播放到末尾后重新回到开头
                           vertical 滑动方向是否为纵向 
                           display-multiple-items 同时显示的滑块数量 -->
                           <swiper class="swiper-body-main" vertical="true" display-multiple-items="15"
                           <swiper class="swiper-body-main" vertical="true" display-multiple-items="5"
                              circular="true" :autoplay="true" :interval="3000" :duration="1000">
                              <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i"
                              <swiper-item class="swiper-item" v-for="(item,i) in info.matDtos" :key="i"
                                 :style="item.color">
                                 <view style="flex: 2;word-break: break-all;">
                                    {{item.orderNo ? item.orderNo : '--'}}
                                    {{item.matnr ? item.matnr : '--'}}
                                 </view>
                                 <view style="flex: 2;">{{item.matNo}}</view>
                                 <view style="flex: 2;">{{item.containerCode}}</view>
                                 <view style="flex: 2;">{{item.name}}</view>
                                 <view style="flex: 2;">{{item.maknx}}</view>
                                 <view style="flex: 5;">{{item.specs}}</view>
                                 <view style="flex: 1;">{{item.count}}</view>
                                 <view style="flex: 1;">{{item.total}}</view>
                              </swiper-item>
@@ -309,7 +323,7 @@
      <view class="board">
         <uni-transition ref="ani" custom-class="transition" :mode-class="newModeClass" :show="errorBoardShow">
            <view class="error-board">
               <text v-for="item in carInfo">{{item}}</text>
               <text>{{infoText.error}}</text>
            </view>
         </uni-transition>
      </view>
@@ -317,6 +331,13 @@
      <view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut">
         连接超时: {{times}} s
      </view>
		
      <!-- 版本号 -->
      <!-- #ifdef APP-PLUS -->
      <view class="version">
         当前版本:{{version}}
      </view>
      <!-- #endif -->
   </view>
</template>
<!-- {"msg":"操作成功","code":200,"data":[{"title":"全板出库","workNo":7460,"staNo":110,"sourceStaNo":null,"locNo":null,"sourceLocNo":"0807102","matDtos":[{"matNo":"50460834","maknx":"200x60桌面","count":26.0}],"emptyMk":false,"ioType":101}]} -->
@@ -326,6 +347,7 @@
   export default {
      data() {
         return {
            version: '1231313',
            newModeClass: 'slide-top',
            errorBoardShow: false,
            carInfo: [],
@@ -386,7 +408,7 @@
            error: null,
            infoType: 0,
            text: '',
            infoText: {
            infoText: [{
               title: '自动仓库WCS监控平台',
               title2: '',
               staNo: "",
@@ -403,13 +425,14 @@
               doneOfUnit: '',
               totalOfUnit: '',
               ctnNo: '1'
            },
            }],
            swiperList: [],
            timeOut: false,
            times: 0,
            currDate: '',
            textred: 'textred',
            opts1: {
               fontSize: 8,
               dataLabel: true,
               fontColor: "#ffffff",
               legend: {
@@ -419,6 +442,7 @@
               xAxis: {
                  disableGrid: true,
                  fontColor: "#ffffff",
                  fontSize: 8,
                  axisLineColor: "#ffffff",
               },
               yAxis: {
@@ -427,7 +451,7 @@
               extra: {
                  column: {
                     type: "group",
                     width: 40,
                     width: 30,
                     activeBgColor: "#000000",
                     activeBgOpacity: 0.08,
                     labelPosition: "center"
@@ -439,12 +463,14 @@
                  "#ea7ccc"
               ],
               fontColor: "#ffffff",
               fontSize: 8,
               padding: [15, 15, 0, 5],
               enableScroll: false,
               legend: {},
               xAxis: {
                  disableGrid: true,
                  fontColor: "#ffffff",
                  fontSize: 8,
                  axisLineColor: "#ffffff",
               },
               yAxis: {
@@ -463,30 +489,20 @@
               },
            },
            opts3: {
               fontSize: 8,
               fontColor: "#ffffff",
               xAxis: {
                  fontColor: "#ffffff",
                  fontSize: 8,
               }
            },
            opts4: {
               fontColor: "#ffffff",
               fontSize: 8,
               legend: {
                  show: true,
                  position: "bottom",
                  fontColor: "#FFFFFF",
               },
               title: {
                  name: "",
                  color: "#666666",
                  offsetX: 0,
                  offsetY: 0
               },
               subtitle: {
                  name: "",
                  fontSize: 25,
                  color: "#7cb5ec",
                  offsetX: 0,
                  offsetY: 0
               },
               extra: {
                  pie: {
@@ -498,9 +514,9 @@
      },
      onShow() {
         // 隐藏时间,电量,信号等
         // #ifdef APP-PLUS
         plus.navigator.setFullscreen(true)
         // #endif
         // // #ifdef APP-PLUS
         // plus.navigator.setFullscreen(true)
         // // #endif
      },
      mounted() {
         let that = this
@@ -516,23 +532,21 @@
         that.baseCrnId = BaseCrnId



         // this.getVersion()
         this.getDate2()
         setTimeout(() => {
            this.getShuttle()
            this.getServerData()
            this.initlineChart()
            this.initPieChart()
            this.getOther()
            setTimeout(() => {
               this.getShuttle()
               this.getServerData()
               this.initlineChart()
               this.initPieChart()
               this.getOther()
               setTimeout(() => {
                  this.getShuttle()
                  this.getServerData()
                  this.initlineChart()
                  this.initPieChart()
                  this.getOther()
               }, 3000)
            }, 1000)
            }, 2000)
         }, 1000)
      },
      onLoad() {
@@ -540,12 +554,12 @@
            this.getServerData()
            this.getDate2()
            this.getUrl()
            this.getInfo()
            this.getError()
            this.getCarInfo()
            // this.getInfo()
            // this.getError()
            // this.getCarInfo()
            // this.getCarInfoTest()
            // this.getInfo2()
            // this.getError2()
            this.getInfo2()
            this.getError2()
            this.controller()
         }, 1000)

@@ -553,14 +567,27 @@
         //    this.changeErrorShow()
         // },5000)
         setInterval(() => {
            this.getShuttle()
            this.getServerData()
            this.initlineChart()
            this.initPieChart()
            this.getOther()
         }, 600000)
			
         // // #ifdef APP-PLUS
         //    setTimeout(()=>{
         //       plus.runtime.restart()
         //    },28800000)
         // // #endif
			
			
      },
      methods: {
         getVersion() {
            let that = this
            plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
               that.version = wgtinfo.version //客户端版本号
            })
         },
         getShuttleTest() {
            let res = ycqdata.infoData2.data
            this.shuttleInfoModel(res)
@@ -676,22 +703,12 @@
            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
               }
               that.infoType = 2
               that.infoText.title = "异常"
               that.infoText.error = errorInfo
            if (res.code == 200 && res.data != '') {
               that.infoText.title = "其他信息"
               that.infoText.error = res.data
               this.errorBoardShow = true
            } else {
               if (that.infoType == 1) {
                  return
               }
               that.infoType = 0
               this.errorBoardShow = false
            }
         },
         getInfo() {
@@ -719,25 +736,12 @@
               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.title = "异常"
                        that.infoText.error = errorInfo
                        return
                     }
                     that.infoType = 2
                  if (res.code == 200 && res.data != '') {
                     that.infoText.title = "其他信息"
                     // that.infoText.title = "异常"
                     that.infoText.error = errorInfo
                     that.infoText.error = res.data
                     that.errorBoardShow = true
                  } else {
                     if (that.infoType == 1) {
                        return
                     }
                     that.infoText.title = '自动仓库WCS监控平台'
                     that.infoType = 0
                     that.errorBoardShow = false
                  }
               }
            })
@@ -751,26 +755,9 @@
               }
               // infoType1:只有拣料等信息
               that.infoType = 1
               if (res.data[0].ioType === 101) {
                  that.infoText.title = '全板出库'
                  that.infoText.title2 = '全板出库'
               } else if (res.data[0].ioType === 103) {
                  that.infoText.title = '检料出库'
                  that.infoText.title2 = '检料出库'
               } else if (res.data[0].ioType === 107) {
                  that.infoText.title = '盘点出库'
                  that.infoText.title2 = '盘点出库'
               }
               res.data[0].matDtos
               for (let k in res.data[0].matDtos) {

                  if (res.data[0].matDtos[k].count == 0) {
                     res.data[0].matDtos[k]['color'] = 'color: #df741c'
                  }
               }
               that.infoText.staNo = res.data[0].staNo
               that.infoText.barcode = res.data[0].barcode
               that.swiperList = res.data[0].matDtos
               that.infoText = res.data
               that.infoText.title = '站点出库'
					
            } else {
               if (that.infoType == 2 || that.infoType == 3) {
                  return;
@@ -1105,7 +1092,15 @@
<style>
   /* @import url("../../static/css/common.css"); */
   @import url("home.css");

   /* 版本号 */
   .version {
      min-width: 100rpx;
      position: fixed;
      right: 20rpx;
      bottom: 10rpx;
      font-size: .1rem;
      color: #909399;
   }
   /* 列 */
   .flex-col {
      display: flex;
@@ -1236,7 +1231,7 @@

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

@@ -1470,7 +1465,8 @@

   .error-board {
      margin: .2rem;
      height: 11vh;
      padding: .2rem;
      /* height: 11vh; */
      background-color: #F56C6C;
      box-shadow: rgba(0, 0, 0, .35) 0px 5px 15px;
      border-radius: .2rem;