#

whycq

2024-02-29 77e0862f66a111a4eba081671b93cfa15c0fdf14

#

 Monitor-APP/App.vue

@@ -14,4 +14,7 @@

<style>
    /*每个页面公共css */
    page {
        height: 100%;
    }
</style>

 Monitor-APP/pages.json

@@ -1,6 +1,17 @@
{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/home/index",
            "style" : 
            {
                // 去掉顶部导航栏
                "navigationStyle": "custom",
                "app-plus": {
                    "titleNView": false
                }
            }
        },
        {
            "path": "pages/home/home",
            "style": {
                "navigationStyle": "custom",

 Monitor-APP/pages/home/index.vue

New file
@@ -0,0 +1,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>