#

whycq

2024-03-09 6bbb67d65a2b66a9c3f747650ab78f37efe10b3c

 Monitor-APP/pages/home/home.vue

@@ -4,13 +4,20 @@
        <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow">
            <view class="home-view">
                <view class="head">
               <image src="../../static/head.png" mode="" class="head-image"></image>
                    <text style="z-index: 999;">入库屏</text>
               <view class="head-left" @click="ejected()">
                  <view class="logo"></view>
               </view>
               <view class="head-mid">
                  <text style="z-index: 999;">补货单列表</text>
               </view>
               <view class="head-right">
                  <view class="time-tools">{{calendar}}</view>
               </view>
                </view>
                <!-- 日历 -->
                <view class="time-tools">{{calendar}}</view>
                <view class="button-left" @click="ejected()"></view>
                <view class="button-right" @click="ejected()"></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">
@@ -19,13 +26,14 @@
                            <view class="text-content">
                                <!-- head -->
                                <view class="swiper-head">
                                    <view style="width: 10%;">序号</view>
                                    <view style="width: 25%;">品番</view>
                                    <view style="width: 15%;">待补货数量</view>
                             <view style="width: 15%;">已补货数量</view>
                             <view style="width: 15%;">补货状态</view>
                           <view style="width: 10%;">工单创建时间</view>
                           <view style="width: 10%;">预计完成时间</view>
                                    <view class="item-box1" style="width: 10%;">工单编号</view>
                                    <view class="item-box1" style="width: 15%;">品番</view>
                                    <view class="item-box1" style="width: 15%;">待补货数量</view>
                           <view class="item-box1" style="width: 15%;">已补货数量</view>
                           <view class="item-box1" style="width: 15%;">补货状态</view>
                           <view class="item-box1" style="width: 10%;">创建时间</view>
                           <view class="item-box1" style="width: 10%;">预计完成时间</view>
                           <view class="item-box1" style="width: 9.5%;">操作</view>
                                </view>
                                <!-- body -->
                                <view class="swiper-body">
@@ -34,24 +42,36 @@
                                    vertical 滑动方向是否为纵向 
                                    display-multiple-items 同时显示的滑块数量 -->
                                    <swiper class="swiper-body-main" vertical="true" 
                                    display-multiple-items="8"
                                    circular="true" :autoplay="true" :interval="3000" :duration="1000">
                                    display-multiple-items="10"
                                    circular="true" :autoplay="true" :interval="3000" :duration="1000" disable-touch='true'>
                                        <swiper-item :class="item.inspectSts" class="swiper-item"  v-for="(item,i) in swiperList" :key="i">
                                            <view style="width: 10%;">{{i+1}}</view>
                                            <view style="width: 25%;">{{item.maktx}}</view>
                                            <view style="width: 15%;">{{item.storeReplenishment}}</view>
                                            <view style="width: 15%;color: chartreuse;">{{item.storeAdd}}</view>
                                            <view style="width: 15%;">
                                    <text class="beBatch1" v-if="item.beBatch == 2">
                                       {{item.beBatch$}}
                                    </text>
                                    <text class="beBatch2" v-if="item.beBatch != 2">
                                       {{item.beBatch$}}
                                    </text>
                                            <view class="item-box" style="width: 10%;" >{{item.suppCode ? item.suppCode : '--'}}</view>
                                            <view class="item-box" style="width: 15%;">{{item.maktx}}</view>
                                            <view class="item-box" style="width: 15%;">{{item.storeReplenishment}}</view>
                                            <view class="item-box" style="width: 15%;">
												
                                    <text style="color: #25E51E ;"  v-if="item.inspectSts == 'inspectWhite'">{{item.storeAdd}}</text>
                                    <text v-if="item.inspectSts == 'inspectRed'">{{item.storeAdd}}</text>
                                 </view>
                                 <view style="width: 10%;">{{item.appeTime$}}</view>
                                 <view style="width: 10%;">{{item.overTime$ ? item.overTime$ : '--'}}</view>
                                            <view class="item-box" style="width: 15%;">
                                    <text class="beBatch1" v-if="item.beBatch == 2 ">
                                       {{item.beBatch$}}
                                    </text>
                                    <text class="beBatch2" v-if="item.beBatch != 2 ">
                                       {{item.beBatch$}}
                                    </text>
                                    <!-- <text class="beBatch3" v-if="item.inspectSts != 'inspectWhite'">
                                       {{item.beBatch$}}
                                    </text> -->
                                 </view>
                                 <view class="item-box" style="width: 10%;">{{item.appeTime$}}</view>
                                 <view class="item-box" style="width: 10%;">{{item.appeTime$}}</view>
                                 <view class="item-box" style="width: 9.5%;">
                                    <button class="start-btn" size="mini" v-if="item.beBatch == 1" @click="complete(item.matnr)">开始</button>
                                    <button class="end-btn" size="mini" v-if="item.beBatch == 2" @click="cancel(item.matnr)">完成</button>
                                 </view>
                                        </swiper-item>
                              <view style="height: 1px;"></view>
                                    </swiper>
                                </view>
                            </view>
@@ -128,7 +148,21 @@
                </view>
            </view>
        </view>
    </view>
      <!-- 确认是否操作 -->
      <view>
         <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog :type="msgType" :title="dialogTitle" :content="dialogContent" @confirm="dialogConfirm"
                           @close="dialogClose"></uni-popup-dialog>
         </uni-popup>
      </view>
      <!-- 操作成功失败弹窗 -->
      <view>
         <!-- 提示信息弹窗 -->
         <uni-popup ref="message" type="message">
            <uni-popup-message :type="messageType" :message="messageText" :duration="3000"></uni-popup-message>
         </uni-popup>
      </view>
   </view>
</template>
 
<script>
@@ -137,6 +171,15 @@
    export default {
        data() {
            return {
            type: 'center',
            msgType: 'success',
            messageType: 'success',
            messageText: '这是一条成功提示',
            dialogTitle: '',
            value: '',
            dialogContent: '确认开始该笔补货物料？',
            matnr: '',
            dialogType: 0,
                series: [],
                homeViewShow: false,
                infoViewShow: true    ,
@@ -194,14 +237,7 @@
                    error: ""
                },
                swiperList: [
               {
                  maktx: 1,
                  storeReplenishment: '123123',
                  storeAdd: '123123',
                  beBatch$: '123',
                  appeTime$: '2024年3月1日 21点14分',
                  overTime$: '2024年3月1日 21点14分'
               }
					
            ],
            inspect: 'inspectRed'
            }
@@ -229,13 +265,14 @@
        onLoad() {
         setInterval(()=>{
            // this.getServerData()
            // this.getDate2()
            // this.getUrl()
            // this.getInfo()
            // this.getError()
            // this.getInfo2()
            // this.getError2()
            // this.getInfo3()
            this.getDate2()
            this.getInfo3()
            // this.getInfo4()
            // this.controller()
         },1000)
         
@@ -258,17 +295,59 @@
               return
            }
            uni.request({
               url: that.commonUrl + "/monitor/date",
               url: that.commonUrl + "/mobile/date",
               method:"GET",
               success(result) {
                  // console.log(result);
                  var res = result.data.data
                  that.calendar = res.year + "年" + res.month + "月" + res.day + "日 " + res.hour + ":" + res.minute + ":" + res.second + " " + res.week
                  that.calendar = res.hour + ":" + res.minute + ":" + res.second + " " + res.year + "-" + res.month + "-" + res.day
                  that.currDate = res.year + "/" + res.month + "/" + res.day
               },
               fail(res) {
               }
               
            })
         },
         // 开始按钮
         complete(matnr) {
            this.matnr = matnr
            this.dialogTitle = `品番：${matnr}`
            this.dialogType = 1
            this.dialogContent = '确认开始该笔补货物料？'
            this.$refs.inputDialog.open()
         },
         // 结束按钮
         cancel(matnr) {
            this.matnr = matnr
            this.dialogTitle = `品番：${matnr}`
            this.dialogType = 2
            this.dialogContent = '确认完成该笔补货物料？'
            this.$refs.inputDialog.open()
         },
         // 弹窗取消
         dialogClose() {
            this.$refs.inputDialog.close()
         },
         // 弹窗确认
         dialogConfirm() {
            let that = this
            uni.request({
                url: that.commonUrl + "/LocDetlReplenishmentController/hand/control/re",
                method:"GET",
                data: {matnr:that.matnr,type: that.dialogType},
                success(result) {
                  console.log(result);
                    var res = result.data
                  if (res.code === 200) {
                     that.messageType = 'success'
                     that.messageText = `操作成功`
                     that.$refs.message.open()
                  } else {
                     that.messageType = 'error'
                     that.messageText = res.msg
                     that.$refs.message.open()
                  }
                }
            })
         },
            getUrl() {
@@ -314,6 +393,7 @@
                method:"GET",
                data: {ledId:that.baseLedId},
                success(result) {
                  // console.log(result);
                    var res = result.data
                  for (let k of res.data) {
                     if (k.inspect == 1) {
@@ -325,6 +405,19 @@
                   that.swiperList = res.data
                }
            })
         },
         getInfo4() {
            let result = ycqdata.dataError3
            var    res = result.data
            for (let k of res.data) {
               if (k.inspect == 1) {
                  k['inspectSts'] = 'inspectWhite' 
               } else {
                  k['inspectSts'] = 'inspectRed' 
						
               }
            }
            this.swiperList = res.data
         },
            getError2 () {
                let that = this
@@ -641,7 +734,7 @@
    .container{
        width: 100vw;
        min-height: 100vh;
        background-color: #00163E;
        background-color: #083870;
        color: #fff;
        text-align: center;
        
@@ -666,23 +759,44 @@
    .head {
        width: 100vw;
        height: 11vh;
        font-size:4vw;
        font-size:3vw;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(0.7);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
   .head-image {
      width: 80%;
   .head-mid {
      height: 10vh;
      background-image: url(../../static/head.png);
      background-size: 100% 100%;
   }
   .head-left {
      height: 6vh;
      background-image: url(../../static/headleft.png);
      background-size: 110% 100%;
      transform: scaleX(-1);
   }
   .head-right {
      height: 6vh;
      background-image: url(../../static/headleft.png);
      background-size: 110% 100%;
   }
   .logo {
      position: absolute;
      z-index: 1;
      left: 30%;
      top: 90%;
      width: 60%;
      height: 110%;
      background-image: url(../../static/DENSO_logo.png);
      background-size: 60% 60%;
      /* background-color: #55ff7f; */
      background-repeat: no-repeat;
      transform: scaleX(-1);
   }
    .time-tools {
        position: absolute;
        right: 2%;
        top: 2%;
        font-size:1vw;
        right: 4%;
        top: 6%;
        font-size:1.2vw;
        transform: scale(0.8);
    }
    .button-left {
@@ -823,6 +937,7 @@
    .info-box {
        width: 98%;
        height: 98%;
      background-color: #032246;
    }
    /* 异常信息 */
    .error-info-view {
@@ -928,25 +1043,50 @@
        justify-content: center;
    }
   .beBatch1 {
      padding: 18rpx;
      background-color: #fec652;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border-radius: 10rpx;
      color: #ffba02;
      padding: 4rpx 10rpx;
      background-color: #fff8e6;
      font-weight: bold;
      border-radius: 2rpx;
   }
   .beBatch2 {
      padding: 18rpx;
      background-color: #60b86b;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border-radius: 10rpx;
      color: #ff5454;
      padding: 4rpx 10rpx;
      background-color: #ffeded;
      font-weight: bold;
      border-radius: 2rpx;
   }
   .inspectRed {
      background-color: rgba(235, 104, 84, .6);
      color: #F10F0F;
   }
   .inspectWhite {
      background-color: rgba(255, 255, 255, .4);
      color: #FFF;
   }
   .item-box1 {
      height: 98%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #7db2f7;
   }
   .item-box {
      height: 98%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #074a9a;
   }
   .start-btn {
      color: #FFF;
      background-color: #13ce66;
      transform: scale(0.7);
   }
   .end-btn {
      color: #FFF;
      background-color: #1890ff;
      transform: scale(0.7);
   }
   .popup {
		
   }
</style>