#

whycq

2022-05-11 22f2b64b5ddede46c16a4830992b27e395e9c90c

 Monitor-APP/pages/index/index.vue

@@ -1,7 +1,13 @@
<template>
   <!-- {"msg":"操作成功","code":200,"data":"拣料出库（4426)\n源库位：1200101\n目标站：186\n1101842-10000-22047518517\n\n"} -->
   <!-- "拣料出库（4426)\n源库位：1200101\n目标站：186\n1101842-10000-22047518517\n\n" -->
   <view class="container">
      <view class="upper " :class="mmm" ></view>
      <view class="lower" :class="fff">
      <view class="floor-screen" :class="floorMove" >
         <view style="">
            <text>{{newspaper}}</text>
         </view>
      </view>
      <view class="top-screen" :class="topMove">
         <view class="head">
            <text>自动仓库WCS监控平台</text>
            <view class="time-tools">{{year}}-{{month}}-{{day}}&nbsp{{hours}}:{{minutes}}:{{seconds}}&nbsp{{week}}</view>
@@ -152,20 +158,20 @@
            </view>
         </view>
      </view>
         <view>
            <!-- 输入url -->
            <uni-popup ref="url" type="dialog">
               <uni-popup-dialog ref="inputClose" mode="input" title="配置url" value=""
                  placeholder="示例:192.168.1.1" @confirm="baseUrlConfirm"></uni-popup-dialog>
            </uni-popup>
         </view>
         <view>
            <!-- 输入ledId -->
            <uni-popup ref="ledId" type="dialog">
               <uni-popup-dialog ref="inputClose" mode="input" title="配置ledId" value=""
                  placeholder="示例:1" @confirm="ledIdConfirm"></uni-popup-dialog>
            </uni-popup>
         </view>
      <view>
         <!-- 输入url -->
         <uni-popup ref="url" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="配置url" value=""
               placeholder="示例:192.168.1.1" @confirm="baseUrlConfirm"></uni-popup-dialog>
         </uni-popup>
      </view>
      <view>
         <!-- 输入ledId -->
         <uni-popup ref="ledId" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="配置ledId" value=""
               placeholder="示例:1" @confirm="ledIdConfirm"></uni-popup-dialog>
         </uni-popup>
      </view>
   </view>
</template>

@@ -211,9 +217,11 @@
            seconds:13,
            week:'星期四',
            ani:'',
            move: 'upMove 1.5s 1;',
            mmm:'upup',
            fff:''
            // move: 'upMove 1.5s 1;',
            move:true,
            topMove:'topUp',
            floorMove:'',
            newspaper:'',
         }
      },
      mounted() {
@@ -230,31 +238,50 @@
      },
      onReady() {
         setTimeout(() => {
            this.initlineChart();
            this.initPieChart();
            // this.initlineChart();
            // this.initPieChart();
            
         }, 0);
         setTimeout(() => {
            this.getServerData();
            this.getOther();
            // this.getServerData();
            // this.getOther();
            // this.getPakin();
         }, 1000);
         setInterval(() => {
            this.getDate();
         },1000)
         setInterval(() => {
            // this.getDate();
            this.getPakin();
            this.animation();
         },10000)
         },1000)
      },
      methods: {
         getPakin () {
            let that = this
            uni.request({
               url: "http://10.10.0.222:9090/jkwcs/monitor/led",
               data: {
                  ledId:'186'
               },
               method:'GET',
               success(result) {
                  console.log(result)
                  let res = result.data
                  if (res.data) {
                     that.newspaper = res.data
                     that.move = false
                  } else {
                     that.newspaper = ''
                     that.move = true
                  }
               }
            })
         },
         animation() {
            if (this.ani) {
               this.ani = ''
               this.mmm = 'upup'
               this.fff = 'upupmove'
            if (this.move) {
               this.topMove = 'topUp'
               this.floorMove = 'floorUp'
            } else {
               this.ani = 1
               this.mmm = 'down'
               this.fff = 'ddmove'
               this.topMove = 'topDown'
               this.floorMove = 'floorDown'
            }
         },
         getDateFormat(value) {
@@ -269,7 +296,7 @@
         initlineChart() {
            let that = this
            uni.request({
               url: "http://192.168.2.20:8080/jswcs/monitor/line/charts",
               url: "http://10.10.0.222:9090/jswcs/monitor/line/charts",
               method:'GET',
               success(result) {
                  var res = result.data
@@ -284,7 +311,7 @@
         initPieChart() {
            let that = this
            uni.request({
               url: "http://192.168.2.20:8080/jswcs/monitor/loc/rep",
               url: "http://10.10.0.222:9090/jswcs/monitor/loc/rep",
               method:'GET',
               success(result) {
                  var res = result.data
@@ -302,7 +329,8 @@
         getOther() {
            let that = this
            uni.request({
               url: "http://" + that.baseUrl + ":8080/jswcs/monitor/other",
               // http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186
               url: "http://" + that.baseUrl + ":9090/jswcs/monitor/other",
               data: {
                  crnId: 1, 
                  ledId: this.baseLedId,
@@ -328,6 +356,7 @@
         },
         ledId() {
            this.$refs.ledId.open()
            // this.$refs.ledId.open()
         },
         baseUrlConfirm(val) {
            this.baseUrl = val
@@ -370,34 +399,29 @@
<style>
   /* animation:upMove 1.5s 1; */
   /* downMove */
   .upup {
      animation: upMove 1.5s 1;
   /* 上层向上 */
   .topUp {
      animation: topUp 1.5s 1;
      animation-fill-mode: both;
   }
   .down {
      animation: downMove 1.5s 1;
   @keyframes topUp {
      from {
         opacity: 0.5;
         /* background-color:blue; */
         top:-1080px
         }
      to {
         opacity: 1;
         /* background-color:red; */
         top: 0;
      }
   }
   /* 上层向下 */
   .topDown {
      animation: topDown 1.5s 1;
      animation-fill-mode: both;
   }
	
   .upupmove {
      animation: upupmove 1.5s 1;
      animation-fill-mode: both;
   }
   .ddmove {
      animation: ddmove 1.5s 1;
      animation-fill-mode: both;
   }
   .upper {
      position: fixed;
      width: 1920px;
      height: 1080px;
      /* top: -1000px; */
      background-image: url(../../static/background.png);
      /* background:red; */
      /* animation:upMove 1.5s 1; */
      z-index: 999;
   }
   @keyframes downMove
   @keyframes topDown
      {
      from {
         opacity: 1;
@@ -410,19 +434,12 @@
         top:-1080px
      }
   }
   @keyframes upMove {
      from {
         opacity: 0.5;
         /* background-color:blue; */
         top:-1080px
         }
      to {
         opacity: 1;
         /* background-color:red; */
         top: 0;
      }
   /* 下层向上 */
   .floorUp {
      animation: floorUp 1.5s 1;
      animation-fill-mode: both;
   }
   @keyframes upupmove {
   @keyframes floorUp {
      from {
         opacity: 0.5;
         /* background-color:blue; */
@@ -434,7 +451,12 @@
         top: 1080px;
      }
   }
   @keyframes ddmove {
   /* 下层向下 */
   .floorDown {
      animation: floorDown 1.5s 1;
      animation-fill-mode: both;
   }
   @keyframes floorDown {
      from {
         opacity: 0.5;
         /* background-color:blue; */
@@ -446,15 +468,27 @@
         top: -0px;
      }
   }
   .lower {
   .top-screen {
      position: fixed;
      width: 1920px;
      height: 1080px;
      /* top: -1000px; */
      background-image: url(../../static/background.png);
      /* background:red; */
      /* animation:upMove 1.5s 1; */
      z-index: 999;
   }
   .floor-screen {
      width: 1920px;
      height: 1080px;
      position: relative;
      color: #FFFFFF;
      background-image: url(../../static/background.png);
   }
   .container {
      width: 1920px;
      height: 1080px;
      background-image: url(../../static/background.png);
		
      position: relative;
      /* background: #000428;  
      background: -webkit-linear-gradient(to right, #004e92, #000428);