water_affairs/pages/index/modules/workorderList.vue

<template>
    <view class="container">
        <view v-if="isHome" style="height: 20px;" />
        <navigator v-for="item in isHome ? list : list1" :key="item.sa_workorderid" class="item"
            :url="'/packageA/workOrder/detail?id=' + item.sa_workorderid">
            <view class="billno">
                {{ item.billno }}
            </view>
            <view class="row">
                来源：{{ item.source || ' --' }}
            </view>
            <view class="row">
                设备：{{ item.devicename || ' --' }}
            </view>
            <view class="row">
                任务时间：{{ item.begdate && item.enddate ? item.begdate + ' 至 ' + item.enddate : ' --' }}
            </view>
            <view class="row">
                参与人：{{ item.users.length ? item.users : ' --' }}
            </view>
            <view class="status" :style="[statusStyle(item.status)]">{{ item.status }}</view>
        </navigator>
    </view>
</template>

<script>

export default {
    props: {
        isHome: {
            type: Boolean,
            default: false
        },
        list1: {
            type: Array,
        }
    },
    computed: {
        statusStyle() {
            return function (status) {
                let obj = {};
                switch (status) {
                    case '待接单':
                        obj = { color: '#EB4B5C', background: 'rgba(235, 75, 92, .2)' }
                        break;
                    case '待开始':
                        obj = { color: '#3874F6', background: 'rgba(56, 116, 246, .2)' }
                        break;
                    case '进行中':
                        obj = { color: '#5AB73F', background: 'rgba(90, 183, 63, .2)' };
                        break;
                    case '已完成':
                        obj = { color: '#F27F37', background: 'rgba(242, 127, 55, .2)' };
                        break;
                    default:
                        obj = { color: '#999999', background: 'rgba(153, 153, 153, .2)' }
                        break;
                }
                return obj
            }
        }
    },
    name: "workorderList",
    data() {
        return {
            "content": {
                "pageNumber": 1,
                "pageSize": 20,
                "pageTotal": 1,
                "where": {
                    "condition": "",
                    "begindate": "",
                    "enddate": ""
                }
            },
            list: []
        }
    },
    methods: {
        getlist(init = false) {
            let content = this.content;
            if (init) content.pageNumber = 1;
            if (content.pageNumber > content.pageTotal) return;
            this.$Http.basic({
                "id": "20231007095502",
                content
            }).then(res => {
                console.log("获取工单列表", res)
                if (this.cutoff(res.msg)) return;
                content.pageNumber = res.pageNumber + 1;
                content.pageTotal = res.pageTotal;
                let list = res.data.map(v => {
                    switch (v.sourcetable) {
                        case "sa_patrolplan":
                            v.source = "巡检," + (v.planno || ' --')
                            break;
                        case "w_event_log":
                            v.source = "告警," + (v.eventname || ' --')
                            break;
                        default:
                            v.source = "现场"
                            break;
                    }
                    v.users = v.teamRows.map(u => u.name).join(",")
                    return v
                })
                this.list = res.pageNumber == 1 ? list : this.list.concat(list)
                this.content = content;
            })
        }
    }
}
</script>

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

    .billno {
        color: #004684;
        font-weight: bold;
        font-size: 14px;
    }

    .row {
        margin-top: 4px;
        font-size: 14px;
    }

    .status {
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 0 0 0 4px;
    }
}
</style>