Monitor-APP/pages/home/home.css

@@ -1,7 +1,7 @@
.text-content {
    width: 100%;
    height: 100%;
    font-size: 4.5vw;
    font-size: 3vw;
    /* background-color: aliceblue;     */
    display: flex;
    flex-direction: column;
@@ -18,7 +18,7 @@
}
.swiper-body {
    width: 100%;
    height: 90%;
    height: 100%;
    /* background-color: #aa0000; */
}
.swiper-body-main {

 Monitor-APP/pages/home/home.vue

@@ -232,62 +232,60 @@
            </view>
        </uni-transition>
        <!-- 全板/拣料信息 -->
        <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow">
            <view class="home-view">
                <view class="head">
                    <text>{{infoText.title}}</text>
                </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">
                        <y-box>
                            <!-- 文本容器 -->
                            <view class="text-content" v-for="item in swiperList">
                                <view>目标站：{{infoText.staNo}}</view>
                                <view>商品编码：{{item.matnr}}</view>
                                <view>商品名称：{{item.maknx}}</view>
                                <view>规格：{{item.specs}}</view>
                                <view>图号：{{item.model ? item.model :''}}</view>
                                <view>数量：{{item.count}} / {{item.total ? item.total : '--'}}</view>



                                <!-- head -->
                                <!-- <view class="swiper-head">
                                    <view style="width: 20%;">目标站：{{infoText.staNo}}</view>
                                    <view style="width: 30%;">商品编号</view>
                                    <view style="width: 20%;">商品名称</view>
                                    <view style="width: 20%;">规格</view>
                                    <view style="width: 10%;">数量</view>
                                </view> -->
                                <!-- body -->
                                <!-- <view class="swiper-body"> -->
                                <!-- swiper 一些说明
                                    circular 是否采用衔接滑动，即播放到末尾后重新回到开头
                                    vertical 滑动方向是否为纵向 
                                    display-multiple-items 同时显示的滑块数量 -->
                                <!-- <swiper class="swiper-body-main" vertical="true" 
                                    display-multiple-items="8"
                                    circular="true" :autoplay="true" :interval="3000" :duration="1000">
                                        <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i">
                                            <view style="width: 20%;">No:{{i+1}}</view>
                                            <view style="width: 30%;">{{item.matNo}}</view>
                                            <view style="width: 20%;">{{item.maknx}}</view>
                                            <view style="width: 20%;">{{item.specs}}</view>
                                            <view style="width: 10%;">{{item.count}}</view>
                                        </swiper-item>
                                    </swiper>
                                </view> -->
                            </view>
                        </y-box>
                    </view>
                </view>
            </view>
        </uni-transition>
    <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow">
      <view class="home-view">
        <view class="head">
          <text>{{infoText.title}}</text>
        </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">
            <y-box>
              <!-- 文本容器 -->
              <view class="text-content">
                <!-- head -->
                <!-- <view class="swiper-head">
                  <view style="flex: 1;">作业数量：{{infoText.barcode}}</view>
                  <view style="flex: 1;">剩余数量</view>
                </view> -->
                <view class="swiper-head" v-show="swiperList.length > 0">
                                    <view style="flex: 2;">任务号</view>
                  <view style="flex: 3;">商品编号</view>
                  <view style="flex: 2;">商品名称</view>
                  <view style="flex: 2;">规格</view>
                                    <view style="flex: 2;">工序</view>
                  <view style="flex: 2;">数量</view>
                  
                </view>
                <!-- body -->
                <view class="swiper-body">
                  <!-- swiper 一些说明
                  circular 是否采用衔接滑动，即播放到末尾后重新回到开头
                  vertical 滑动方向是否为纵向
                  display-multiple-items 同时显示的滑块数量 -->
                  <swiper class="swiper-body-main" vertical="true" display-multiple-items="15"
                          circular="true" :autoplay="true" :interval="3000" :duration="1000">
                    <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i"
                                 :style="item.color">
                                            <view style="flex: 2;">{{infoText.workNo}}</view>
                      <view style="flex: 3;">{{item.matnr}}</view>
                      <view style="flex: 2;">{{item.maknx}}</view>
                      <view style="flex: 2;">{{item.specs}}</view>
                                            <view style="flex: 2;">{{item.sku}}</view>
                      <view style="flex: 2;">{{item.count}}/{{item.total}}</view>
                    </swiper-item>
                  </swiper>
                </view>
              </view>
            </y-box>
          </view>
        </view>
      </view>
    </uni-transition>
        <!-- 异常信息 -->
        <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow">
            <view class="error-info-view">
@@ -426,6 +424,7 @@
                infoType: 0,
                text: '',
                infoText: {
                    workNo: '',
                    title: '',
                    staNo: "",
                    matnr: "",
@@ -662,6 +661,7 @@
                    }

                    that.infoText.staNo = res.data[0].staNo
                    that.infoText.workNo = res.data[0].workNo
                    that.swiperList = res.data[0].matDtos
                    // that.infoText.matnr = res.data[0].matDtos[0].matnr
                    // that.infoText.specs = res.data[0].matDtos[0].specs