#

whycq

2024-03-02 dd346d6414a7f7713c5b58753057de516cac8111

#

 Monitor-APP/pages/home/home.css

@@ -7,7 +7,7 @@
.swiper-head {
    width: 100%;
    height: 10%;
    background-color: rgba(54, 94, 226, 0.5);
    background-color: #18167c;
    display: flex;
    /* grid-template-columns: 2fr 3fr 2fr 2fr 1fr; */
    align-items: center;
@@ -31,6 +31,6 @@
    /* align-items: center; */
    /* grid-template-columns: 2fr 3fr 2fr 2fr 1fr; */
}
.swiper-item:nth-child(2n-1) {
    /* background-color: rgba(255, 255, 255, .1); */
.swiper-item:nth-child(2n-2) {
    background-color: #19224d;
}

 Monitor-APP/pages/home/home.vue

@@ -4,13 +4,18 @@
        <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>
                    <view class="head-mid">
                        <text style="z-index: 999;">立体库入库看板</text>
                    </view>
                    <view class="head-right"></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">
@@ -37,20 +42,27 @@
                                    display-multiple-items="8"
                                    circular="true" :autoplay="true" :interval="3000" :duration="1000">
                                        <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">
                                            <view class="item-box" style="width: 10%;" >{{i+1}}</view>
                                            <view class="item-box" style="width: 25%;">{{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 class="item-box" style="width: 15%;">
                                                <text class="beBatch1" v-if="item.beBatch == 2 && item.inspectSts == 'inspectWhite'">
                                                    {{item.beBatch$}}
                                                </text>
                                                <text class="beBatch2" v-if="item.beBatch != 2">
                                                <text class="beBatch2" v-if="item.beBatch != 2 && item.inspectSts == 'inspectWhite'">
                                                    {{item.beBatch$}}
                                                </text>
                                                <text class="beBatch3" v-if="item.inspectSts != 'inspectWhite'">
                                                    {{item.beBatch$}}
                                                </text>
                                            </view>
                                            <view style="width: 10%;">{{item.appeTime$}}</view>
                                            <view style="width: 10%;">{{item.overTime$ ? item.overTime$ : '--'}}</view>
                                            <view class="item-box" style="width: 10%;">{{item.appeTime$}}</view>
                                            <view class="item-box" style="width: 9.5%;">{{item.overTime$ ? item.overTime$ : '--'}}</view>
                                        </swiper-item>
                                    </swiper>
                                </view>
@@ -194,14 +206,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'
            }
@@ -236,6 +241,7 @@
                // this.getInfo2()
                // this.getError2()
                // this.getInfo3()
                this.getInfo4()
                // this.controller()
            },1000)
            
@@ -325,6 +331,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 +660,7 @@
    .container{
        width: 100vw;
        min-height: 100vh;
        background-color: #00163E;
        background-color: #13151d;
        color: #fff;
        text-align: center;
        
@@ -666,17 +685,26 @@
    .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%;
        position: absolute;
        z-index: 1;
    .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%;
    }
    .time-tools {
        position: absolute;
@@ -929,7 +957,7 @@
    }
    .beBatch1 {
        padding: 18rpx;
        background-color: #fec652;
        color: #F3720D;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
@@ -937,16 +965,23 @@
    }
    .beBatch2 {
        padding: 18rpx;
        background-color: #60b86b;
        color: #25E51E ;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        border-radius: 10rpx;
    }
    .inspectRed {
        background-color: rgba(235, 104, 84, .6);
        color: #F10F0F;
    }
    .inspectWhite {
        background-color: rgba(255, 255, 255, .4);
        color: #FFF;
    }
    .item-box {
        height: 98%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #18167c;
    }
</style>

 Monitor-APP/pages/index/data.json

@@ -23,6 +23,29 @@
                                                }]
        }},
    "dataError2":{"data":{"msg":"操作成功","code":200,"data":""}},
    "dataError3":{"data":{"msg":"操作成功","code":200,"data":
    [
        {
            "maktx": "TD00091",
            "storeReplenishment": "123123",
            "storeAdd": "123123",
            "beBatch$": "123",
            "appeTime$": "2024年3月1日 21点14分",
            "overTime$": "2024年3月1日 21"
        },
        {
            "maktx": "TD00091",
            "storeReplenishment": "123123",
            "storeAdd": "123123",
            "beBatch$": "123",
            "appeTime$": "2024年3月1日 21点14分",
            "overTime$": "2024年3月1日 21",
            "inspectSts": "inspectRed",
            "inspect" : 1
        }
		
    ]
    }},
    "lineData":{
        "msg": "操作成功",
        "code": 200,