mes_mobile/pages/equipmentManage/equipmentManage.vue

139 lines
3.8 KiB
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>
</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>
</view>
<view class="rightBtnView">
<view class="iconfont icon-bianji font18" @click.stop="toAddDevice(item.id)"></view>
<view class="iconfont icon-bangding font18" @click.stop="toBindingDevice(item.id)"></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;position: relative;}
.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;}
.rightBtnView{position: absolute;right: 12px;top: 12px;height: calc(100% - 24px);display: flex;flex-direction: column;justify-content: space-between;}
</style>