#

whycq

2023-02-14 f28c3941955c56eef09778333b18df5db8b8a977

#

 Monitor-APP/pages/home/home.css

New file
@@ -0,0 +1,22 @@
.text-content {
    width: 100%;
    height: 100%;
    /* background-color: aliceblue;     */
}
.swiper-head {
    width: 100%;
    height: 10%;
    background-color: #000000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.swiper-body {
    width: 100%;
    height: 90%;
    background-color: #aa0000;
}
.swiper-body-main {
    width: 100%;
    height: 100%;
    background-color: #00a8ff;
}

 Monitor-APP/pages/home/home.vue

@@ -213,12 +213,28 @@
                <view class="info-main">
                    <view class="info-box">
                        <y-box>
                            <view class="info-box-text">
                                <view class="flex-col info-box-text-item">目标站：{{infoText.staNo}}</view>
                                <view class="flex-col info-box-text-item">商品编号：{{infoText.matnr}}</view>
                                <view class="flex-col info-box-text-item">商品名称：{{infoText.maknx}}</view>
                                <view class="flex-col info-box-text-item">规格：{{infoText.specs}}</view>
                                <view class="flex-col info-box-text-item">数量：{{infoText.count}}</view>
                            <!-- 文本容器 -->
                            <view class="text-content">
                                <!-- head -->
                                <view class="swiper-head">
                                    <view>目标站：</view>
                                    <view>商品编号</view>
                                    <view>商品名称</view>
                                </view>
                                <!-- body -->
                                <view class="swiper-body">
                                    <!-- swiper 一些说明
                                    circular 是否采用衔接滑动，即播放到末尾后重新回到开头
                                    vertical 滑动方向是否为纵向 
                                    display-multiple-items 同时显示的滑块数量 -->
                                    <swiper class="swiper-body-main" vertical="true" 
                                    display-multiple-items="16"
                                    circular="true" :autoplay="true" :interval="3000" :duration="1000">
                                        <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i">
                                            <view>{{item}}</view>
                                        </swiper-item>
                                    </swiper>
                                </view>
                            </view>
                        </y-box>
                    </view>
@@ -358,6 +374,7 @@
                    count: "",
                    error: ""
                },
                swiperList: []
                
                
                
@@ -381,7 +398,7 @@
            that.baseLedId = BaseLedId
            that.basePort = BasePort
            that.baseCrnId = BaseCrnId
            this.getUrl()
            // this.getUrl()
        },
        onLoad() {
            setInterval(()=>{
@@ -390,13 +407,14 @@
                this.initPieChart()
                this.getOther()
                this.getDate()
                this.getInfo()
                this.getError()
                // this.getInfo()
                // this.getError()
                this.getInfo2()
                this.getError2()
                this.getUrl()
                this.controller()
                // 测试用
                // this.getInfo2()
                // this.getError2()
				
            },1000)
        },
        methods: {
@@ -729,6 +747,7 @@

<style>
    /* @import url("../../static/css/common.css"); */
    @import url("home.css");
    /* 列 */
    .flex-col {
        display: flex;