#

zjj

2025-06-06 e667973625f2da006d20d7f5c82b1de977d178a6

 Monitor-APP/pages/index/index.vue

@@ -1,10 +1,12 @@
<template>
   <view class="container">
      <!-- 跳动信息板 -->
      <view class="floor-screen" :class="floorMove" >
         <!-- 头部 -->
         <view class="head">
            <text @click="port()">自动仓库WCS监控平台</text>
            <view class="time-tools">{{year}}-{{month}}-{{day}}&nbsp{{hours}}:{{minutes}}:{{seconds}}&nbsp{{week}}</view>
            <view class="button-left" @click="url()"></view>
            <view class="button-left" @click="ejected()"></view>
            <view class="button-right" @click="ledId()"></view>
         </view>
         <view class="main">
@@ -14,15 +16,58 @@
                  <view class="box-border box-border2"></view>
                  <view class="box-border box-border3"></view>
                  <view class="box-border box-border4"></view>
                  <view style="width: 10%;height: 100%;background-color: #007AFF;display: inline-block;float: left;">
                     <text>全板出库</text>
                  <view style="width: 100%;height: 100%;" v-show="!errorShow">
                     <!-- 分有无订单划分两部分 -->
                     <!-- 左侧信息 -->
                     <view style="" :class="width">
                        <!-- 全板出库 -->
                        <view class="box-items">{{title}}</view>
                        <!-- 目标站 -->
                        <view class="box-items">{{staNo}}</view>
                        <!-- 商品编号 -->
                        <!-- <view class="box-items">{{matnr}}</view> -->
                        <!-- 商品名称 -->
                        <view class="box-items">{{maknx}}</view>
                        <!-- 商品名称 -->
                        <view class="box-items">{{specs}}</view>
                        <!-- 出库数量 -->
                        <view class="box-items">{{count}}</view>
                     </view>
                     <view style="width: 50%;height: 100%;display: inline-block;float: left;" v-show="orderShow">
                        <!-- 订单号 -->
                        <view class="box-items">{{orderNo}}</view>
                        <!-- 已出托盘数 -->
                        <view class="box-items">{{doneOfTray}}</view>
                        <!-- 托盘总数量 -->
                        <view class="box-items">{{totalOfTray}}</view>
                        <!-- 已出箱数 -->
                        <view class="box-items">{{doneOfUnit}}</view>
                        <!-- 总箱数 -->
                        <view class="box-items">{{totalOfUnit}}</view>
                     </view>
                  </view>
                  <view style="width: 80%;height: 100%;background-color: #063A7B;display: inline-block;float: left;">
                     <text class="animate">{{newspaper}}</text>
                  <view style="width: 100%;height: 100%;" v-show="errorShow">
                     <view style="line-height: 700px;font-size: 175rpx;">{{errorMsg}}</view>
                  </view>
                  <view style="width: 10%;height: 100%;background-color: #00428a;display: inline-block;float: right;">
                     <text>186</text>
                  </view>
						
                  <!-- 全板出库 -->
                  <!-- <view style="width: 10%;height: 100%;display:inline-block;float: left;text-align: center;padding-top: 180px;">
                     <text>{{title}}</text>
                  </view> -->
                  <!-- 滚动区域 -->
                  <!-- <view style="width: 80%;height: 100%;display: inline-block;"> -->
                     <!--显示order订单编号 -->
                     <!-- <text v-show="orderShow" style="display: block;font-size: 140rpx;" >{{orderNo}}</text>
                     <swiper :class="swiper" circular="true" vertical="true" display-multiple-items="6" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <swiper-item v-for="(item,index) in matList" :key="index">
                           <view style="font-size: 160rpx;">{{item}}</view>
                        </swiper-item>
                     </swiper>
                  </view> -->
                  <!-- 站台号 -->
                  <!-- <view style="width: 10%;height: 100%;display: inline-block;float: right;padding-top: 180px;">
                     <text>{{staNo}}</text>
                  </view> -->
               </view>
            </view>
         </view>
@@ -31,7 +76,7 @@
         <view class="head">
            <text @click="port()">自动仓库WCS监控平台</text>
            <view class="time-tools">{{year}}-{{month}}-{{day}}&nbsp{{hours}}:{{minutes}}:{{seconds}}&nbsp{{week}}</view>
            <view class="button-left" @click="url()"></view>
            <view class="button-left" @click="ejected()"></view>
            <view class="button-right" @click="ledId()"></view>
         </view>
         <view class="main">
@@ -90,7 +135,7 @@
                        <p class="english">EQUIPMENT USAGE THIS MONTH</p>
                     </view>
                     <view class="use-right">
                        <h3>20%</h3>
                        <h3>{{usedPr}}%</h3>
                        <p class="english">同比上月 + 5%</p>
                     </view>
                     <view class="use-main">
@@ -174,8 +219,8 @@
                  <view class="box-border box-border4"></view>
                  <!-- <text>浙江中扬立库技术有限公司</text>
                  <text>当前版本号</text> -->
                  <view>浙江中扬立库技术有限公司</view>
                  <image src="../../static/barcode.png" mode="aspectFit"></image>
                  <view @click="crn()">嘉善边锋机械股份有限公司</view>
                  <!-- <image src="../../static/barcode.png" mode="aspectFit"></image> -->
               </view>
            </view>
         </view>
@@ -183,7 +228,7 @@
      <view>
         <!-- 输入url -->
         <uni-popup ref="url" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="配置url" :value="baseUrl"
            <uni-popup-dialog ref="inputClose" mode="input" title="配置url" :value="baseIP"
               placeholder="示例:192.168.1.1" @confirm="baseUrlConfirm"></uni-popup-dialog>
         </uni-popup>
      </view>
@@ -201,20 +246,70 @@
               placeholder="示例:9090" @confirm="portConfirm"></uni-popup-dialog>
         </uni-popup>
      </view>
      <view>
         <!-- 输入crnId -->
         <uni-popup ref="crnId" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="配置堆垛机" :value="crnId"
               placeholder="示例:1" @confirm="crnConfirm"></uni-popup-dialog>
         </uni-popup>
      </view>
      <!-- 自定义弹出层 -->
      <view class="eject-mask" v-show="ejectShow">
         <view class="eject">
            <!-- 弹出title -->
            <view class="eject-title">修改 / 配置</view>
            <!-- input -->
            <view class="eject-input">
               <view class="item">
                  <view class="desc">ip：</view>
                  <view class="input">
                     <input type="text" v-model="baseIP">
                  </view>
               </view>
               <view class="item">
                  <view class="desc">port：</view>
                  <view class="input">
                     <input type="text" v-model="basePort">
                  </view>
               </view>
               <view class="item">
                  <view class="desc">ledId：</view>
                  <view class="input">
                     <input type="text" v-model="baseLedId">
                  </view>
               </view>
               <view class="item">
                  <view class="desc">CrnId：</view>
                  <view class="input">
                     <input type="text" v-model="baseCrnId">
                  </view>
               </view>
            </view>
            <!-- button -->
            <view class="eject-button">
               <view class="button-item" @click="ejectClose">取 消</view>
               <view class="button-item" @click="ejectConfirm">确 认</view>
            </view>
         </view>
			
      </view>
   </view>
</template>

<script>
   import ycqdata from '@/pages/index/data.json';
   import demodata from '@/mockdata/demodata.json';
   export default {
      data() {
         return {
            commonUrl:null, // 通用url
            show: true,
            modeClass: 'fade',
            styles: {},
            baseUrl:'10.10.0.200',
            baseIP:'',
            baseLedId:'',
            basePort:'',
            crnId:'',
            value: '',
            xDistance: 0,
            yDistance:0,
@@ -248,77 +343,223 @@
            week:'星期四',
            ani:'',
            // move: 'upMove 1.5s 1;',
            move:true,
            move:false,
            topMove:'topUp',
            floorMove:'',
            version:'',
            // newspaper:'拣料出库（4426)\n源库位：1200101\n目标站：186\n1101842-10000-22047518517\n\n',   
            newspaper:'',
            errorPaper:'',
            title:'',
            staNo:'',
            matnr:'',
            maknx:'',
            specs:'',
            count:'',
            orderNo:null,
            doneOfTray:'',
            totalOfTray:'',
            doneOfUnit:'',
            totalOfUnit:'',
            errorMsg:null,
            width:'full-width',
            errorShow:'',
            pakinShow:'',
            pakinGun:'',
            orderShow:false,
            swiper:'swiper-here',
            autoplay:true, // 自动循环
            interval:1000, // 调用时长
            duration:8000, // 移动速度
            matList:[], // 订单列表
            ejectShow: false,
				
         }
      },
      mounted() {
         let that = this
         const BaseUrl = uni.getStorageSync('BaseUrl');
         const BaseIP = uni.getStorageSync('BaseIp');
         const BaseLedId = uni.getStorageSync('BaseLedId');
         const BasePort = uni.getStorageSync('BasePort');
         if (BaseUrl && BaseLedId) {
            that.baseUrl = BaseUrl
         const BaseCrnId = uni.getStorageSync('BaseCrnId');
            that.baseIP = BaseIP
            that.baseLedId = BaseLedId
            that.basePort = BasePort
         } else {
            that.baseUrl = ''
            that.baseLedId = ''
         }
      },
      onReady() {
         setTimeout(() => {
            // this.initlineChart();
            // this.initPieChart();
				
         }, 0);
         setTimeout(() => {
            // this.getServerData();
            // this.getOther();
            // this.getPakin();
         }, 1000);
         setInterval(() => {
            this.getDate();
            this.getPakin();
            this.animation();
         },1000)
            that.baseCrnId = BaseCrnId
         this.getUrl()
      },
      onLoad() {
         // var that=this
         // plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
         //    that.version=wgtinfo.version
         // });
			
      },
      onReady() {
         setInterval(() => {
            // 获得初始数据
            this.initlineChart();
            this.initPieChart();
            // 主页信息
            this.getServerData();
            this.getOther();
            // 其他信息
            this.getDate();
            this.getPakin();
            this.getError();
            // this.getYYY();
            // this.getEEE();
            this.animation()
            this.getUrl()
         },1000)
      },
      methods: {
         getPakin () {
         // 获取url
         getUrl() {
            this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + this.baseUrl
            this.chartsDataLine1 = JSON.parse(JSON.stringify(demodata.Line))
         },
         // 获取错误信息
         getYYY() {
            let that = this
            var result = ycqdata.dataEEE
            // 测试用 ↓
            var   res = result.data
            // 测试用 ↑
            // 返回结果有值 且值不等于空值 就是有错误信息需要展示
            if (res.data && res.data !== "") {
					
               that.errorMsg = res.data
               that.errorShow = true
               that.move = false // 显示
            } else {
               that.errorPaper = ''
               that.errorShow = false
               if (that.pakinShow) {
                  return;
               } else {
                  that.move = true // 隐藏
               }
            }
         },
         getEEE () {
            let that = this
            var newsData = ''
            var str = ''
            let result = ycqdata.dataYYY
                  // 测试用 ↓
            let   res = result.data
                  // 测试用 ↑
               if(res.data && res.data !== null) {
                  if (res.data[0].ioType === 101) {
                     that.title = '全板出库'
                  } else if(res.data[0].ioType === 103) {
                     that.title = '检料出库'
                  }
                  that.staNo = '目标站:' + res.data[0].staNo
                  that.matnr = '商品编号：' + res.data[0].matDtos[0].matnr
                  that.maknx = '商品名称：' + res.data[0].matDtos[0].maknx
                  that.count = '出库数量：' + res.data[0].matDtos[0].count
                  if (res.data[0].orderNo) {
                     that.orderNo = "订单号：" + res.data[0].orderNo
                     that.orderShow = true
                     that.width = 'half-width'
                  } else {
                     that.orderNo = null;
                     that.orderShow = false
                     that.width = 'full-width'
                  }
                  that.doneOfTray = '已出托盘数:' + res.data[0].doneOfTray
                  that.totalOfTray = '托盘总数量：' + res.data[0].totalOfTray
                  that.doneOfUnit = '已出箱数：' + res.data[0].doneOfUnit
                  that.totalOfUnit = '总箱数：' + res.data[0].totalOfUnit
                  if (that.errorShow) {
                           return;
                        } else {
                           that.newspaper = newsData
                           that.move = false
                        }
               }else {
                  that.move = true
               }
					
					
         },
         // 获取错误信息
         getError() {
            let that = this
            var res
            uni.request({
               url: "http://" + that.baseUrl + ":" + that.basePort + "/jkwcs/monitor/led",
               url: that.commonUrl + "/monitor/led/error",
               data: {
                  ledId:that.baseLedId
               },
               method:'GET',
               success(result) {
                  console.log(result)
                  var newsData = ''
                  let res = result.data
                  if (res.data[0]) {
                     that.newspaper = res.data[0].matDtos
                     that.move = false
                  res = result.data 
                  if (res.data && res.data !== "") {
                     that.errorMsg = res.data
                     that.errorShow = true
                     that.move = false // 显示
                  } else {
                     that.newspaper = ''
                     that.errorShow = false
                     // if (that.pakinShow) {
                     //    return;
                     // } else {
                     //    // that.move = true // 隐藏
                     // }
                  }
               }
            });
         },
         getPakin () {
            let that = this
            that.matList = [] // 清空条码列表
            var newsData = ''
            var str = ''
            let res 
            uni.request({
               url: that.commonUrl + "/monitor/led",
               data: {
                  ledId:that.baseLedId
               },
               method:'GET',
               success(result) {
                  res = result.data
                  if (that.errorShow) {
                     return;  // 有错误信息
                  } 
                  if(res.data && res.data !== null) {
                     if (res.data[0].ioType === 101) {
                        that.title = '全板出库'
                     } else if(res.data[0].ioType === 103) {
                        that.title = '检料出库'
                     } else
                     that.title = res.data[0].title
                     that.staNo = '目标站:' + res.data[0].staNo
                     that.matnr = '商品编号：' + res.data[0].matDtos[0].matnr
                     that.maknx = '商品名称：' + res.data[0].matDtos[0].maknx
                     that.specs = '规格：' + res.data[0].matDtos[0].specs
                     that.count = '出库数量：' + res.data[0].matDtos[0].count
                     if (res.data[0].orderNo) {
                        that.orderNo = "订单号：" + res.data[0].orderNo
                        that.orderShow = true
                        that.width = 'half-width'
                     } else {
                        that.orderNo = null;
                        that.orderShow = false
                        that.width = 'full-width'
                     }
                     that.doneOfTray = '已出托盘数:' + res.data[0].doneOfTray
                     that.totalOfTray = '托盘总数量：' + res.data[0].totalOfTray
                     that.doneOfUnit = '已出箱数：' + res.data[0].doneOfUnit
                     that.totalOfUnit = '总箱数：' + res.data[0].totalOfUnit
                     that.newspaper = newsData
                     that.move = false
                  }else {
                     that.move = true
                  }
               }
            })
            });
         },
         animation() {
            // console.log(this.baseUrl,this.baseLedId)
            if (this.move) {
            if (this.move) { 
               this.topMove = 'topUp'
               this.floorMove = 'floorUp'
            } else {
@@ -338,12 +579,16 @@
         initlineChart() {
            let that = this
            uni.request({
               url: "http://10.10.0.222:9090/jswcs/monitor/line/charts",
               url: that.commonUrl + "/monitor/line/charts",
               method:'GET',
               success(result) {
                  var res = result.data
                  console.log(result);
                  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.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
                  }
               }
@@ -353,13 +598,13 @@
         initPieChart() {
            let that = this
            uni.request({
               url: "http://10.10.0.222:9090/jswcs/monitor/loc/rep",
               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.stockCount
                     that.stockCount = res.data.stockCunt
                     that.emptyCount = res.data.emptyCount
                     that.noneCount = res.data.noneCount
                     that.used = res.data.used
@@ -372,19 +617,19 @@
            let that = this
            uni.request({
               // http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186
               url: "http://" + that.baseUrl + ":9090/jswcs/monitor/other",
               url: that.commonUrl + "/monitor/other",
               data: {
                  crnId: 1, 
                  ledId: this.baseLedId,
                  crnId: that.baseCrnId, 
                  ledId: 1,
               },
               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
                     console.log(res)
                  } else if (res.code === 403) {
                     
                  } else {
@@ -393,26 +638,21 @@
               }
            })
         },
         port() {
            this.$refs.port.open()
         ejected () {
            this.ejectShow = true
         },
         url() {
            this.$refs.url.open()
         },
         ledId() {
            this.$refs.ledId.open()
         },
         baseUrlConfirm(val) {
            this.baseUrl = val
            uni.setStorageSync('BaseUrl', this.baseUrl);
         },
         ledIdConfirm(val) {
            this.baseLedId = val
         // 弹出层确认
         ejectConfirm() {
            uni.setStorageSync('BaseIp', this.baseIP);
            uni.setStorageSync('BaseLedId', this.baseLedId);
         },
         portConfirm(val) {
            this.basePort = val
            uni.setStorageSync('BasePort',this.basePort);
            uni.setStorageSync('BaseCrnId',this.baseCrnId);
            this.getUrl()
            this.ejectShow = false
         },
         // 弹出层取消
         ejectClose() {
            this.ejectShow = false
         },
         getServerData() {
            this.chartsDataLine1=JSON.parse(JSON.stringify(this.chartsData.Line))
@@ -445,6 +685,130 @@
</script>

<style>
   /* 弹出:配置区域 */
   .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: 600px;
      height: 350px;
      background-color: #eaeaea;
      border-radius: 25rpx;
   }
   .eject-title {
      width: 100%;
      height: 100px;
      line-height: 100px;
      font-size: 20px;
      font-weight: 700;
      color:    #606266;
      text-align: center;
   }
   .eject-input {
		
   }
   .item {
      display: flex;
      align-items: center;
      margin: 10px 0 0 0;
   }
   .desc {
      display: inline-block;
      width: 40%;
      text-align: right;
      color: #606266;
      font-size: 18px;
   }
   .input {
      display: flex;
      align-items: center;
      padding-left: 5px;
      padding-right: 5px;
      width: 100%;
      height: 30px;
      border: 1px solid #C0C4CC;
      margin-right: 50px;
   }
   .eject-input input {
      width: 100%;
		
		
   }
   .eject-button {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0;
      height: 60px;
      line-height: 60px;
      width: 100%;
      border-top: 1px solid #ccc;
   }
   .button-item {
      width: 50%;
      height: 100%;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      color: #909399;
   }
   .button-item:last-child {
      color: #67C23A;
		
      border-left: 1px solid #ccc;
   }
   .full-width {
      width: 100%;
      height: 100%;
      display: inline-block;
      float: left;
   }
   .half-width {
      width: 50%;
      height: 100%;
      display: inline-block;
      float: left;
   }
   .box-items {
      height: 20%;
      width: 100%;
      /* background-color: #233751; */
      line-height: 300rpx;
   }
   /* 当前页面无 orderNo */
   .swiper-here {
      display: inline-block;
      margin: 0 auto;
      width: 100%;
      height: 100%;
   }
   /* 当前页面有 orderNo */
   .swiper-here-oN{
      display: inline-block;
      /* background-color: #063A7B; */
      margin: 0 auto;
      width: 100%;
      height: 90%;
   }
   /* 当前页面有 error提示 */
   .swiper-here-error {
      display: inline-block;
      /* background-color: #063A7B; */
      /* margin: 0 auto; */
      margin-top: 20%;
      width: 100%;
      height: 100%;
   }
   .animate {
      display: inline-block;
               /* white-space: nowrap; */
@@ -559,7 +923,7 @@
      position: relative;
      color: #FFFFFF;
      text-align: center;
      font-size: 200rpx;
      font-size: 120rpx;
      letter-spacing: 5rpx;
      background-image: url(../../static/background.png);
   }
@@ -890,3 +1254,19 @@
      bottom: 0;
   }
</style>
<!-- {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037502300","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037505146","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504801","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507729","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507727","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507731","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504807","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504805","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504797","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504794","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504791","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504793","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037505141","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507728","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504810","count":1.0},
               {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037505148","count":1.0} -->