parking_inspection/pages/equipmentList/equipmentList.vue

<!-- 设备状态 1-已离线 2-运行中 4-保养中 -->
<template>
	<view class="wrap">
		<view>
			<u-navbar
			 :title="title" 
			 title-color="#fff" 
			 :custom-back="customBack" 
			 :border-bottom="false" 
			 back-icon-color="#CCE8FF" 
			 :background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
		</view>
		<!-- <u-button class="u-reset-button" @click="selectShow = true">{{deviceType}}</u-button> -->
		
		<u-cell-item icon="setting-fill" :title="deviceTypeName" :arrow="true" @click="selectShow = true" arrow-direction="right"></u-cell-item>
		<u-select v-model="selectShow" :list="deviceTypeListData"  @confirm="selectConfirm"></u-select>
		
		<u-cell-item class="road-select-cell" icon="map-fill" bg-color="#fff" :border-bottom="false" :title="roadName" :arrow="true" @click="roadSelectShow = true" arrow-direction="right"></u-cell-item>
		<u-select v-model="roadSelectShow" :list="roadListData" value-name="roadNo" label-name="roadName" @confirm="roadSelectConfirm"></u-select>
		
		<u-gap height="12" bg-color="#e7e7e7"></u-gap>
		
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="config.platform=='h5'?300:400" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="g-device-item u-flex u-row-between u-m-b-24" v-for="item in dataList" :key="item.id">
				<view class="u-font-30" style="color: #414141;">
					<view class="u-m-b-10 ">
						<text>{{item.deviceType|deviceType}}</text>
						<text  class="u-p-l-40" style="font-weight: bold;">{{item.roadName}}-{{item.spaceName}}</text>
					</view>
					<view class="u-m-b-10" v-if="item.deviceType==3">
						<text>{{item.entranceName}}</text>
						<text class="u-m-l-20">{{item.roadwayName}}</text>
					</view>
					<view class="u-font-26">设备编号：{{item.deviceNo}}</view>
				</view>
				<view class="">
					<view class="" :class="{'c-offline':item.deviceStatus=='0','c-online':item.deviceStatus=='1','c-repair':item.deviceStatus=='2'}">
						{{item.deviceStatus|deviceStatus}}
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data(){
			return{
				selectShow:false,
				roadSelectShow:false,
				title:"设备列表",
				deviceTypeName:'全部类型',
				deviceType:null,
				roadName:'全部路段/停车场',
				roadNo:'',
				deviceRunStatus:'',
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					// auto:false,
					// use:false,
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						// btnText: '去看看'
					}
				},
				dataList: [], //列表数据
				deviceTypeId:'',//设备类型id
				deviceTypeListData:this.config.deviceTypeList,
				roadListData:[],
				dictData:[],
			}
		},
		onLoad(page){
			// console.log('page',page);
			this.deviceRunStatus = page.param;
			if(this.deviceRunStatus==''){
				this.title = "全部设备"
			}else if(this.deviceRunStatus=='0'){
				this.title = "离线设备"
			} else if(this.deviceRunStatus=='1'){
				this.title = "运行中"
			}else if(this.deviceRunStatus=='2'){
				this.title = "未检测"
			}
			this.getRoadList();
			// this.deviceTypeList();
			// this.handlegetDictData('device_run_status');
		},
		onShow(){
		},
		computed:{
			filterDeviceStatus(){
				return function(value){
					let v = '';
					for (let i = 0; i < this.dictData.length; i++){
						// console.log('value',value);
						// console.log('value',this.dictData[i]);
						let item = this.dictData[i];
						if (value == item.status) {
						  v = item.dictLabel;
						  break;
						}
					}
					return v
				}
			}
		},
		methods:{
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log('page',page)
				//联网加载数据
				// let keyword = this.tabs[this.tabIndex]?.text;
				let params ={
					roadNo:this.roadNo,
					deviceType:this.deviceType,
					deviceStatus:this.deviceRunStatus,
					pageNum:page.num,
					pageSize:page.size
				} 
				this.$u.api.getDeviceList(params).then(curPageData=>{
					console.log('curPageData',curPageData)
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(curPageData.total);
					this.mescroll.endBySize(curPageData.data.rows.length, curPageData.total);
					//设置列表数据
					if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList=this.dataList.concat(curPageData.data.rows); //追加新数据
				}).catch((err)=>{
					uni.showToast({
						title:'链接失败'
					});
					console.log('err',err)
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				
			},
			// 切换菜单
			tabChange(index) {
				this.dataList = [];// 先置空列表,显示加载进度
				this.tabIndex = index;
				this.mescroll.resetUpScroll(); // 再刷新列表数据
				
			},
			customBack(){
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			handlegetDictData(device_status){
				let that = this;
				this.$u.api.getDictData(device_status).then(res=>{
					if(res.code==200){
						res.data.data.map(function(currentValue,index,arr){
							that.dictData.push({status:currentValue.dictValue,dictLabel:currentValue.dictLabel})
							// console.log('currentValue',currentValue);
						})
						// this.dictData = res.data.data;
						console.log('getDeviceStatis',this.dictData);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			// deviceTypeList(){
			// 	this.$u.api.getDeviceTypeList().then(res=>{
			// 		if(res.code==200){
			// 			this.deviceTypeListData = res.data;
			// 			// console.log('getDeviceStatis',res);
			// 		}else{
			// 			uni.showToast({
			// 				icon:'none',
			// 				title:res.msg
			// 			})
			// 		}
			// 		console.log('res',res);
			// 	}).catch(err=>{
			// 		console.log('err',err);
			// 	})
			// },
			selectConfirm(e){
				console.log('selectConfirm',e);
				this.deviceTypeName = e[0].label;
				this.deviceType = e[0].value;
				this.mescroll.resetUpScroll();
			},
			getRoadList(){
				let that = this;
				that.$u.api.getRoadList()
				.then(res=>{
					this.roadListData = res.data;
					console.log('this.getRoadList',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			roadSelectConfirm(e){
				// console.log('roadSelectConfirm',e[0]);
				this.roadName = e[0].label;
				this.roadNo = e[0].value;
				console.log('this.roadNo',this.roadNo);
				this.mescroll.resetUpScroll();
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import  './equipmentList.scss'
</style>