<template>  
 | 
    <view class="main_app">  
 | 
        <view class="head_wrap">  
 | 
            <view class="search_wrap">  
 | 
                <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>  
 | 
                <input v-model="param.deviceName" @confirm="getList()" type="text" placeholder="搜索设备名称/编号"  
 | 
                    placeholder-class="placeholder9" />  
 | 
            </view>  
 | 
            <view class="name_wrap" @click="handleMem">  
 | 
                <view class="name">{{ param.userName ? param.userName : '运维人' }}</view>  
 | 
                <u-icon :name="showModal  ? 'arrow-right' : 'arrow-down'" color="#999999" size="12"></u-icon>  
 | 
            </view>  
 | 
        </view>  
 | 
        <!--  -->  
 | 
        <view class="list">  
 | 
            <view class="item" v-for="item in list" @click="itemClick(item)">  
 | 
                <image src="@/static/side/ic_shuiyu@2x.png" class="icon"></image>  
 | 
                <view class="content">  
 | 
                    <view class="name_wrap">  
 | 
                        <view class="name">  
 | 
                            <text class="device">{{item.deviceName}}</text>  
 | 
                            <text>{{item.deviceCode}}</text>  
 | 
                        </view>  
 | 
                        <view class="status" v-if="item.status == 0">正常</view>  
 | 
                        <view class="status red" v-if="item.status == 1">损坏</view>  
 | 
                        <view class="status red" v-if="item.status == 2">报废</view>  
 | 
                    </view>  
 | 
                    <view class="line">运维人:{{item.realName}}</view>  
 | 
                    <view class="line">运维时间:{{item.dealDate}}</view>  
 | 
                </view>  
 | 
  
 | 
            </view>  
 | 
        </view>  
 | 
        <!--  -->  
 | 
        <u-picker :show="showModal" keyName="realname" @cancel="showModal = false" @confirm='confirm'  
 | 
            :columns="columns"></u-picker>  
 | 
    </view>  
 | 
</template>  
 | 
  
 | 
<script>  
 | 
    import {  
 | 
        ywDeviceRecord,  
 | 
        findInternalList  
 | 
    } from '@/api'  
 | 
    export default {  
 | 
        data() {  
 | 
            return {  
 | 
                param: {},  
 | 
                columns: [],  
 | 
                showModal: false,  
 | 
                list: [],  
 | 
                total: 0,  
 | 
                page: 1,  
 | 
            };  
 | 
        },  
 | 
        onLoad() {  
 | 
            this.getpeo()  
 | 
            this.getList()  
 | 
  
 | 
        }, 
 | 
        onReachBottom() { 
 | 
            const {total,list} = this 
 | 
            if (list.length < total) { 
 | 
                this.page = this.page + 1 
 | 
                this.getList() 
 | 
            } else { 
 | 
                this.showToast('暂无更多数据') 
 | 
            } 
 | 
        },  
 | 
        mounted() {  
 | 
            this.$eventBus.$on('memberSel', (option) => {  
 | 
                this.$set(this.param, 'userName', option.realname)  
 | 
                this.$set(this.param, 'userId', option.id) 
 | 
                this.getList()  
 | 
            }) 
 | 
              
 | 
        },  
 | 
        methods: {  
 | 
            getList() {  
 | 
                const {  
 | 
                    page,  
 | 
                    total,  
 | 
                    list, 
 | 
                    param  
 | 
                } = this  
 | 
                ywDeviceRecord({  
 | 
                    page,  
 | 
                    capacity: 10,  
 | 
                    model: param  
 | 
                }).then(res => {  
 | 
                    this.list = [...this.list, ...res.data.records] 
 | 
                    this.total = res.data.total  
 | 
                })  
 | 
            }, 
 | 
            handleMem() { 
 | 
                uni.navigateTo({ 
 | 
                    url: '/pages/common/memberSel' 
 | 
                }) 
 | 
            },  
 | 
            getpeo() {  
 | 
                findInternalList().then(res => {  
 | 
                    this.columns = [...res.data]  
 | 
                })  
 | 
            },  
 | 
            confirm(e) { 
 | 
                console.log(e);  
 | 
                // this.showModal = false 
 | 
                // this.$set(this.param, 'userName', )  
 | 
            },  
 | 
            itemClick(item) {  
 | 
                uni.navigateTo({  
 | 
                    url: '/pages/operation/detail?id='+ item.id  
 | 
                })  
 | 
            }  
 | 
        }  
 | 
    }  
 | 
</script>  
 | 
  
 | 
<style lang="scss" scoped>  
 | 
    .main_app {  
 | 
        padding: 0 30rpx;  
 | 
    }  
 | 
  
 | 
    .head_wrap {  
 | 
        display: flex;  
 | 
        align-items: center;  
 | 
  
 | 
        .search_wrap {  
 | 
            display: flex;  
 | 
            align-items: center;  
 | 
            width: 540rpx;  
 | 
            height: 76rpx;  
 | 
            background: #F7F7F7;  
 | 
            border-radius: 38rpx;  
 | 
            padding-left: 30rpx;  
 | 
  
 | 
            input {  
 | 
                flex: 1;  
 | 
            }  
 | 
  
 | 
            .search {  
 | 
                width: 28rpx;  
 | 
                height: 28rpx;  
 | 
            }  
 | 
        }  
 | 
  
 | 
        .name_wrap {  
 | 
            display: flex;  
 | 
            align-items: center;  
 | 
            margin-left: 12rpx;  
 | 
            justify-content: flex-end;  
 | 
            flex: 1;  
 | 
        }  
 | 
    }  
 | 
  
 | 
    .list {  
 | 
        .item {  
 | 
            display: flex;  
 | 
            height: 228rpx;  
 | 
            padding: 30rpx 0;  
 | 
            border-bottom: 2rpx solid #E5E5E5;  
 | 
  
 | 
            .icon {  
 | 
                width: 80rpx;  
 | 
                height: 80rpx;  
 | 
                margin-right: 24rpx;  
 | 
            }  
 | 
  
 | 
            .content {  
 | 
                flex: 1;  
 | 
                color: #666666;  
 | 
                display: flex;  
 | 
                flex-direction: column;  
 | 
                justify-content: space-between;  
 | 
  
 | 
                .name_wrap {  
 | 
                    display: flex;  
 | 
                    justify-content: space-between;  
 | 
                    align-items: center;  
 | 
  
 | 
                    .name {  
 | 
                        display: flex;  
 | 
                        align-items: flex-end;  
 | 
                        font-size: 26rpx;  
 | 
  
 | 
                        .device {  
 | 
                            font-weight: 600;  
 | 
                            font-size: 34rpx;  
 | 
                            color: #222222;  
 | 
                            margin-right: 6rpx;  
 | 
                        }  
 | 
                    }  
 | 
  
 | 
                    .status {  
 | 
                        color: $primaryColor;  
 | 
                    }  
 | 
                }  
 | 
            }  
 | 
        }  
 | 
    }  
 | 
</style> 
 |