water_affairs/packageA/facility/modules/list.vue

<template>
    <view>
        <My_search @openFilter="openFilter" @startSearch="startSearch" />
        <My_listbox ref="List" @getlist="getlist" :empty='empty'>
            <navigator v-for="item in list" :key="item.w_deviceid" class="item"
                :url="'/packageA/facility/detail?id=' + item.w_deviceid">
                <view class="name u-line-1">设备：{{ item.devicename || ' --' }}</view>
                <view class="row u-line-1">设备编号：<text>{{ item.serialnumber || ' --' }}</text></view>
                <view class="row u-line-1">设备地址：<text>{{ (item.province + item.city + item.county + item.address) || ' --'
                }}</text>
                </view>
                <view class="status" :style="{ background: item.bgColor }">{{ item.status }}</view>
            </navigator>
            <view v-if="istabbar" class="cu-bar tabbar" />
        </My_listbox>
    </view>
</template>
<script>
export default {
    props: {
        istabbar: Boolean
    },
    name: "list",
    data() {
        return {
            empty: false,
            list: [],
            uninitialized: true,
            "content": {
                "pageNumber": 1,
                "pageTotal": 1,
                "pageSize": 20,
                "where": {
                    "condition": "",
                    "status": ""
                }
            }
        }
    },
    methods: {
        init(forcedUpdating = true) {
            this.uninitialized = false;
            this.getlist(forcedUpdating);
        },
        getlist(init) {
            let content = this.content;
            if (init) {
                content.pageNumber = 1;
                content.pageTotal = 1;
            }
            if (content.pageNumber > content.pageTotal) return;
            this.$Http.basic({
                "id": 20230615153202,
                content
            }).then(res => {
                console.log("设备列表", res)
                if (this.cutoff(res.msg)) return;
                this.$refs.List.RefreshToComplete();
                this.$refs.List.setHeight();
                this.empty = !res.data.length;
                content.pageNumber = res.pageNumber + 1;
                content.pageTotal = res.pageTotal;
                res.data = res.data.map(v => {
                    switch (v.status) {
                        case '在线':
                            v.bgColor = "#3874F6";
                            break;
                        case '禁用':
                            v.bgColor = "#EB4B5C";
                            break;
                        default:
                            v.bgColor = "#BBBBBB";
                            break;
                    }
                    return v
                })
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data)
                this.content = content;
            })
        },
        startSearch(condition) {
            if (condition == this.content.where.condition) return;
            this.content.where.condition = condition;
            this.getlist(true)
        },
        openFilter(e) {
            console.log("开始筛选", e)
        },
    }
}
</script>

<style lang="scss" scoped>
.item {
    position: relative;
    width: 355px;
    background: #FFFFFF;
    border-radius: 4px;
    margin: 5px auto;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .name {
        width: 300px;
        line-height: 21px;
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 10px;
    }

    .row {
        line-height: 17px;
        font-size: 12px;
        color: #666666;
        margin-bottom: 5px;

        text {
            line-height: 17px;
            font-size: 12px;
            color: #0A3971;
        }
    }

    .status {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0px 4px 0px 4px;
        background: red;
        text-align: center;
        line-height: 24px;
        padding: 0 10px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #FFFFFF;
    }
}
</style>