mes_mobile/pages/equipmentManage/equipmentManage.vue

<template>
	<!-- 设备管理 -->
	<view class="page_padding bot_padding columnFlex">
		<view class="flexBox">
			<view v-for="(item,index) in list" :key="index" >
				<view class="page_list contentboxsty font13" @click="toDeviceDetail(item.id)">
					<view class="list_row">
						<view class="name font_bold">设备名称</view>
						<view class="text">
							{{item.name}}
							<view class="iconfont icon-bianji font20" @click.stop="toAddDevice(item.id)"></view>
						</view>
					</view>
					<view class="list_row padd_top12">
						<view class="name font_bold">设备IP/端口</view>
						<view class="text">{{item.equipment_monitor_config?item.equipment_monitor_config.monitor_ip+'/'+item.equipment_monitor_config.monitor_port:'-'}}</view>
					</view>
					<view class="list_row padd_top12">
						<view class="name font_bold">已绑定设备</view>
						<view class="text">
							{{item.equipment_monitor_config && item.equipment_monitor_config.eq_name?item.equipment_monitor_config.eq_name:'-'}}
							<view class="iconfont icon-bangding font20" @click="toBindingDevice(item.id)"></view>
						</view>
					</view>
				</view>
			</view>
			<loadMore :noData="loadParams.noData" :loading="loadParams.loading" :loadEnd="loadParams.loadEnd" />
		</view>
	</view>
	<view class="page_bottom_button">
		<view class="page_add" @click="toAddDevice()">
			<view class="icon iconfont icon-tianjia font20"></view>
			<text class="font14">添加</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					page:1,
					pageSize:10,
				},
				loadParams:{
					noData:false,
					loading:false,
					loadEnd:false
				},
				list:[],
			}
		},
		onReady() {
			this.getList();
		},
		// 上拉刷新
		onPullDownRefresh(){
			this.params.page = 1;
			this.loadParams = {
				noData:false,
				loading:false,
				loadEnd:false
			};
			this.getList(2);
		},
		// 加载下一页
		onReachBottom(){
			if(!(this.loadParams.loadEnd || this.loadParams.noData)){
				this.loadParams.loading = true;
				this.params.page ++;
				this.getList();
			}
		},
		methods: {
			getList(type=1){
				if(this.params.page == 1){
					uni.showLoading({
						title: '加载中',
						mask: true
					})
				}
				this.$api.request('/equipment.mag',this.params).then(res=>{
					if(type ==2){
						uni.stopPullDownRefresh();
					}
					setTimeout( ()=> {
					 	uni.hideLoading();
					}, 200);
					
					this.loadParams.loading = false;
					if(res.data.rows.length ==0 && this.params.page == 1){
						this.loadParams.noData = true;
					}
					if(res.data.rows.length>0 && res.data.rows.length < this.params.pageSize){
						this.loadParams.loadEnd = true;
					}
					if(this.params.page == 1){
						this.list = res.data.rows;
					}else{
						this.list = this.list.concat(res.data.rows);
					}
				}).catch(err=>{
					setTimeout(()=> {
					 	uni.hideLoading();
					}, 200);
				})
			},
			//详情
			toDeviceDetail(id){
				uni.navigateTo({
					url:'/pages/equipmentManage/deviceDetail?id='+id
				})
			},
			toAddDevice(params){
				uni.navigateTo({
					url:'/pages/equipmentManage/editDevice?id='+params
				})
			},
			toBindingDevice(id){
				uni.navigateTo({
					url:'/pages/equipmentManage/bindingDevice?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page_list{padding: 12px;}
	.list_row{display: flex;align-items: center;}
	.list_row .name{flex-basis: 84px;text-align: right;padding-right: 12px;box-sizing: border-box;}
	.list_row .text{flex: 1;display: flex;justify-content: space-between;align-items: center;}
</style>