FE-V2-XCX/pages_manage/workbench/securityAlert/todayList.vue

<template>
    <view id="todayList">
        <scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
            <view class="for-box" v-for="(item,index) in infoList" :key="index" @click="laboratoryInfo(item)">
                <view class="title-box">
                    <view  :class="item.subDiyVo.subClassVO.classtypeId == 1?'colorA':(item.subDiyVo.subClassVO.classtypeId == 2?'colorB':(item.subDiyVo.subClassVO.classtypeId == 3?'colorC':(item.subDiyVo.subClassVO.classtypeId == 4?'colorD':'')))">{{item.subDiyVo.subClassVO.levelName}}</view>
                    <view>{{item.subDiyVo.name}}</view>
                    <img src="@/images/icon_04.png">
                </view>
                <view class="address-box"><span>{{item.subDiyVo.subTypeLable}}</span>{{item.subDiyVo.deptName}}</view>
                <view class="address-box-two">
                    <img src="@/images/icon_14.png">
                    <view>{{item.subDiyVo.subAddrrStr}}</view>
                </view>
                <view class="for-img-box">
                    <view class="for-img-min-box" v-for="(minItem,index) in item.sensorSet" :key="index">
                        <img src="@/images/icon_15.png">
                        <view>{{minItem}}</view>
                    </view>
                </view>
            </view>
            <img class="null-img" v-if="!infoList[0]" src="@/images/null-data-1.png">
        </scroll-view>
    </view>
</template>

<script>
    import { getSafeWarnList,laboratoryInfo } from '@/api/index.js'
    export default {
        name: "todayList",
        data() {
            return {
                infoList:[],
                //列表请求参数
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                }
            }
        },
        onLoad(){

        },
        onShow(){
            this.clearData();
            this.getList();
        },
        methods:{
            async laboratoryInfo(item){
                const {data} = await laboratoryInfo(item.subDiyVo.id);
                if(data.code == 200){
                    let obj = data.data[0];
                    obj.subClassVO = item.subDiyVo.subClassVO;
                    obj.name = item.subDiyVo.name;
                    obj.subTypeLable = item.subDiyVo.subTypeLable;
                    obj.deptName = item.subDiyVo.deptName;
                    obj.subAddrrStr = item.subDiyVo.subAddrrStr;
                    uni.navigateTo({
                        url: '/pages_manage/workbench/laboratory/laboratoryInfo?item='+encodeURIComponent(JSON.stringify(obj))
                    });
                }
            },
            //清除
            clearData(){
                this.infoList = [];
                this.getData.page = 1;
                this.getData.getType = true;
                this.getData.nullDataType = true;
            },
            //滚动事件
            scrollGet(){
                if(this.getData.getType){
                    this.getData.page += 1;
                    this.getList();
                }
            },
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
                    count:0,
                    groupStatus:"",
                };
                const {data} = await getSafeWarnList(obj);
                if(data.code==200){
                    if(self.page==1){
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = data.rows;
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = data.rows;
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }else{
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows)
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows);
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }
                }
            },
        },
    }
</script>

<style lang="stylus" scoped>
    #todayList{
        height:100%;
        flex:1;
        display flex
        flex-direction column
        overflow: hidden
        .for-max-box{
            flex:1;
            overflow-y scroll
            .for-box{
                background #fff
                margin-bottom:20rpx;
                overflow: hidden
                .title-box{
                    margin:20rpx 20rpx 0;
                    display flex
                    view:nth-child(1){
                        height:42rpx;
                        line-height:42rpx;
                        font-size:20rpx;
                        border-radius:10rpx;
                        padding:0 10rpx;
                        color:#fff;
                        margin-right:20rpx;
                    }
                    view:nth-child(2){
                        line-height:42rpx;
                        font-size:30rpx;
                        color:#333;
                        max-width:600rpx;
                        flex:1;
                    }
                    img{
                        width:12rpx;
                        height:20rpx;
                        margin-top:11rpx;
                    }
                    .colorA{
                        background:#aa2315;
                    }
                    .colorB{
                        background:#ff9b09;
                    }
                    .colorC{
                        background:#3ea3e9;
                    }
                    .colorD{
                        background:#3ea34c;
                    }

                }
                .address-box{
                    margin:20rpx 20rpx;
                    font-size:26rpx;
                    color:#999999;
                    span{
                        margin-right:60rpx;
                    }
                }
                .address-box-two{
                    display flex
                    margin:0 20rpx 20rpx 20rpx;
                    img{
                        width:28rpx;
                        height:30rpx;
                        margin-right:18rpx;
                    }
                    view{
                        line-height:30rpx;
                        font-size:24rpx;
                        color:#999999;
                    }
                }
                .for-img-box{
                    border-top:1rpx solid #e0e0e0;
                    margin:0 20rpx;
                    .for-img-min-box{
                        display flex
                        img{
                            width:30rpx;
                            height:27rpx;
                            margin-top:24rpx;
                            margin-right:10rpx;
                        }
                        view{
                            line-height:74rpx;
                            text-align center
                            font-size:28rpx;
                            color:#EE3A3A;
                        }
                    }
                }
            }
            .null-img{
                display block
                width:276rpx;
                height:321rpx;
                position absolute
                top:100rpx;
                left:274rpx;
            }
        }
    }
</style>