#

whycq

2022-11-29 0cbcf44149ba483997a72540ad4acd697ff833b7

 Monitor-APP/pages/home/home.vue

@@ -1,6 +1,5 @@
<template>
   <view class="container">
      <!-- 主视图 -->
      <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow">
         <view class="home-view">
            <view class="head">
@@ -10,7 +9,7 @@
            <view class="time-tools">{{calendar}}</view>
            <view class="button-left" @click="ejected()"></view>
            <view class="button-right" @click="ejected()"></view>
            <!-- 主体 -->
            <!-- 主视图 -->
            <view class="main">
               <view class="mian-item">
                  <view class="mian-item-box">
@@ -187,7 +186,8 @@
                        <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>
                           </y-box>
                        </view>
@@ -195,22 +195,31 @@
                  </view>
               </view>
            </view>
				
         </view>
      </uni-transition>
      <!-- 全板/拣料信息 -->
      <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow">
         <view class="info-view">
         <view class="home-view">
            <view class="head">
               <text>拣 料</text>
               <text>{{infoText.title}}</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</view>
            <view class="button-left"></view>
            <view class="button-right"></view>
            <view class="button-left" @click="ejected()"></view>
            <view class="button-right" @click="ejected()"></view>
            <!-- 主体 -->
            <view class="info-main" >
            <view class="info-main">
               <view class="info-box">
                  <y-box></y-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>
                  </y-box>
               </view>
            </view>
         </view>
@@ -219,7 +228,7 @@
      <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow">
         <view class="error-info-view">
            <view class="head">
               <text>异常</text>
               <text>{{infoText.title}}</text>
            </view>
            <!-- 日历 -->
            <view class="time-tools">{{calendar}}</view>
@@ -228,7 +237,11 @@
            <!-- 主体 -->
            <view class="info-main" >
               <view class="info-box">
                  <y-box></y-box>
                  <y-box>
                     <view class="info-box-text">
                        <view class="flex-col info-box-text-item">{{infoText.error}}</view>
                     </view>
                  </y-box>
               </view>
            </view>
         </view>
@@ -265,6 +278,12 @@
                     <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>
            <!-- button -->
            <view class="eject-button">
@@ -278,12 +297,13 @@

<script>
   import demodata from '@/mockdata/demodata.json';
   import ycqdata from '@/pages/index/data.json';
   export default {
      data() {
         return {
            series: [],
            homeViewShow: true,
            infoViewShow: false,
            infoViewShow: false   ,
            errorInfoViewShow: false,
            homeMode: [],
            infoMode: [],
@@ -320,6 +340,22 @@
            basePort: '',
            baseLedId: '',
            baseCrnId: '',
            baseUrl: '',
            info: null,
            error: null,
            infoType: 0,
            text: '',
            infoText: {
               title: '全板出库',
               staNo: "200",
               matnr: "300",
               maknx: "400",
               specs: "500",
               count: "600",
               error: "利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；。"
            },
				
				
            
         }
      },
@@ -329,49 +365,232 @@
         plus.navigator.setFullscreen(true)
         // #endif
      },
      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()
         },5000)
         },2000)
      },
      methods: {
         getUrl() {
            this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + this.baseUrl
            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 !== "") {
               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
            }
         },
         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
               }
               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
                  }
               }
            })
				
         },
         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() {
            if (this.homeViewShow) {
               this.homeViewShow = !this.homeViewShow
               this.homeMode = ['fade', 'slide-bottom']
               setTimeout(()=>{
                  this.infoViewShow = !this.infoViewShow
                  this.infoMode = ['fade', 'slide-bottom']
               },1100)
            } else if(this.infoViewShow) {
               this.infoViewShow = !this.infoViewShow
               this.infoMode = ['fade', 'slide-bottom']
               setTimeout(()=>{
                  this.errorInfoViewShow = !this.errorInfoViewShow
                  this.errorInfoMode = ['fade', 'slide-bottom']
               },1100)
            } else {
               this.errorInfoViewShow = !this.errorInfoViewShow
               this.errorInfoMode = ['fade', 'slide-bottom']
               setTimeout(()=>{
                  this.homeViewShow = !this.homeViewShow
                  this.homeMode = ['fade', 'slide-bottom']
               },1100)
            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) {
@@ -402,6 +621,7 @@
            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
         },
@@ -427,13 +647,83 @@
            }
            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.xDistance = res.data.xDistance
                              that.yDistance = res.data.yDistance
                              that.xDuration = res.data.xDuration
                              that.yDuration = res.data.yDuration
                           } else if (res.code === 403) {
										
                           } else {
										
                           }
                        }
                     })
                  },
      }
      
   }
</script>

<style>
   @import url("../../static/css/common.css");
   /* @import url("../../static/css/common.css"); */
   /* 列 */
   .flex-col {
      display: flex;
@@ -655,9 +945,9 @@
   }
   .eject-title {
      width: 100%;
      height: 10vh;
      line-height: 10vh;
      font-size: 2vw;
      height: 5vh;
      line-height: 6vh;
      font-size: 3vh;
      font-weight: 700;
      color:    #606266;
      text-align: center;
@@ -720,4 +1010,12 @@
      
      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>