#

whycq

2024-02-29 77e0862f66a111a4eba081671b93cfa15c0fdf14

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
    <view class="root">
        <view class="head">叫料记录详情</view>
        <view class="body">
            <!-- 第一部分 -->
            <view class="one">
                <view class="item" v-for="item in dataList">
                    <text style="font-weight: bold;">{{item.desc}}</text><text style="padding-left: 10px;">{{item.val}}</text>
                </view>
            </view>
            <!-- 第二部分 -->
            <view class="two">
                <view class="list-head">
                    <view style="width: 5%;">序号</view>
                    <view style="width: 20%;">部品</view>
                    <view style="width: 15%;">部品编码</view>
                    <view style="width: 15%;">箱客量</view>
                    <view style="width: 10%;">箱数</view>
                    <view style="width: 10%;">数量</view>
                    <view style="width: 10%;">实际发货数量</view>
                    <view style="width: 15%;">二维码</view>
                </view>
                <view style="height: 90%;">
                    <swiper class="swiper-body-main" vertical="true"
                    display-multiple-items="2"
                    circular="true" :autoplay="true" :interval="3000" :duration="1000">
                        <swiper-item class="swiper-item"  v-for="(item,i) in swiperList" :key="i">
                            <view style="width: 5%;">{{i+1}}</view>
                            <view style="width: 20%;">{{item.matnr}}</view>
                            <view style="width: 15%;">{{item.item1}}</view>
                            <view style="width: 15%;">{{item.item2}}</view>
                            <view style="width: 10%;">{{item.item3}}</view>
                            <view style="width: 10%;">{{item.item4}}</view>
                            <view style="width: 10%;">{{item.item5}}</view>
                            <view style="width: 15%;">二维码</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                dataList: [
                    {desc: '部品呼叫编号:',val: '240220-0014'},
                    {desc: '工单编号:',val: 'P202402200554422594'},
                    {desc: '看板状态:',val: '备货中'},
                    {desc: '呼叫时间:',val: '2024-02-200856.19'},
                    {desc: '备货完成时间:',val: '2024-02-200856.19'},
                    {desc: '收货时间:',val: '2024-02-200856.19'},
                    {desc: '产线名称:',val: 'EPS Ar线'},
                    {desc: '产线编码:',val: 'EPS Ar线'}
                ],
                swiperList: [
                    {matnr: '钟-0090',item1: 'HX160825-0090',item2: '100',item3: '200',item4: '100',item5: '200'},
                    {matnr: '钟-0090',item1: 'HX160825-0090',item2: '100',item3: '200',item4: '100',item5: '200'}
                ]
            }
        },
        onShow() {
            // 隐藏时间,电量,信号等
            // #ifdef APP-PLUS
                plus.navigator.setFullscreen(true)
            // #endif
        },
        methods: {
            
        }
    }
</script>
 
<style>
    .root {
        width: 100%;
        height: 100%;
        /* background-color: bisque; */
    }
    .head {
        width: 100%;
        padding: 30rpx;
        border-bottom: 1px solid #aaa;
    }
    .body {
        margin: 2%;
        height: 88%;
        border: 1px solid #aaa;
    }
    .one {
        margin: 100rpx;
        height: 30%;
        /* background-color: #aaa; */
        border-bottom: 1px solid #aaa;
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
    }
    .item {
        display: flex;
        align-items: center;
        /* justify-content: center; */
    }
    .two {
        height: 58%;
        margin: 0 100rpx;
        /* background-color: #55aa7f; */
    }
    .list-head {
        width: 100%;
        padding: 20rpx;
        text-align: center;
        font-weight: bold;
        background-color: #e5e6e4;
        display: flex;
    }
    .swiper-body-main {
        height: 100%;
    }
    .swiper-item {
        display: flex;
        align-items: center;
        /* justify-content: center; */
        text-align: center;
        border-bottom: 1px solid #aaa;
    }
</style>