FE-app-oam/pages/iotDevice/index.vue

<!-- 物联设备列表 -->
<template>
	<view id="iotDevice-index">
		<view class="query-max-big-box">
			<view class="query-input-box">
				<input class="query-input" v-model="queryParams.searchValue"   
				style="width:170rpx;" :maxlength="10"
				type="text"  placeholder="输入名称" placeholder-style="color:#999;">
			</view>
			<view class="query-input-box">
				<picker @change="typeListChange" :value="typeListIndex" :range="typeList">
					<view style="width:140rpx;" class="query-input"
					:class="!typeName?'query-input-placeholder':''">
						{{typeName?typeName:'选择类型'}}
					</view>
				</picker>
			</view>
			<view class="query-button-one" @click="handleQuery">查询</view>
			<view class="query-button-two" @click="resetQuery">重置</view>
			<view class="query-button-three" @click="addButton">新增</view>
		</view>
		<view class="list-max-big-box">
			<view class="list-max-big-null" v-if="!dataList[0]">暂无数据</view>
			<view class="for-list-max-big-box" @click="clickButton(item)"
			v-for="(item,index) in dataList" :key="index">
				<view class="for-item-text-box">
					<view class="name-box">{{item.deviceName}}</view>
					<view class="num-box">{{item.typeName}}</view>
					<view class="img-box">
						<image v-if="item.state" :src="revImg"></image>
						<image v-else :src="stopImg"></image>
					</view>
					<view class="img-box">
						<image v-if="item.online" :src="onlineImg"></image>
						<image v-else :src="offlineImg"></image>
					</view>
				</view>
				<view class="for-item-num">编号：{{item.deviceNo}}</view>
				<view class="for-item-address">位置：{{item.schoolName}}{{item.buildName}}{{item.floorName}}{{item.subjectName}}</view>
			</view>
		</view>
		<view class="pagination-max-big-box">
			<view class="pagination-button" @click="paginationButton(1)"
			:class="queryParams.page == 1 ? 'pagination-color':''">上一页</view>
			<view class="pagination-num">{{queryParams.page}}/{{pages}}</view>
			<view class="pagination-button" @click="paginationButton(2)"
			:class="queryParams.page == pages || queryParams.page > pages? 'pagination-color':''">下一页</view>
		</view>
	</view>
</template>

<script>
	
import { iotDeviceList,iotTypeGetAllTypes,iotDeviceDelete } from '@/api/index.js'
export default {
  data() {
    return {
			//图片
			offlineImg:require('@/images/offline_icon.png'),
			onlineImg:require('@/images/online_icon.png'),
			revImg:require('@/images/rev_icon.png'),
			stopImg:require('@/images/stop_icon.png'),
			//分类下拉列表
			typeDataList:[],
			typeList:[],
			typeListIndex:0,
			typeName:'',
			//列表数据
			dataList:[],
			pages:0,
			queryParams:{
				page:1,
				pageSize:10,
				searchValue:'',
				typeId:'',
			},
		}
	},
  onLoad(option) {

  },
  onShow(){
		this.iotTypeGetAllTypes();
		this.getList();
  },
  methods: {
		//点击事件
		clickButton(item){
			let self = this;
			uni.showActionSheet({
				itemList: ['详情','编辑','删除'],
				success (res) {
					if(res.tapIndex == 0){
						uni.navigateTo({
							url:'/pages/iotDevice/infoPage?id='+item.id
						});
					}else if(res.tapIndex == 1){
						uni.navigateTo({
							url:'/pages/iotDevice/addPage?id='+item.id
						});
					}else if(res.tapIndex == 2){
						uni.showModal({
							title:'警告',
							content:'是否确认删除"'+item.deviceName+'"',
							showCancel: true,
							cancelColor:'#999999,',
							confirmColor: '#FF6666',
							success: (res) => {
								if(res.confirm){
									self.iotDeviceDelete(item);
								}
							},
							fail: (res) => {}
						})
					}
				},
				fail (res) {
					
				}
			});
		},
		//删除
		async iotDeviceDelete(item){
			let self = this;
			const {data} = await iotDeviceDelete({id:item.id});
			if(data.code==200){
				uni.showToast({
					mask: true,
					icon: "none",
					position: "center",
					title: data.message,
					duration: 2000
				});
				setTimeout(function(){
					self.resetQuery();
				},1800);
			}
		},
		//新增
		addButton(){
			uni.navigateTo({
				url: '/pages/iotDevice/addPage',
			});
		},
		//查询按钮
		handleQuery(){
			this.$set(this.queryParams,'page',1);
			this.getList();
		},
		//重置按钮
		resetQuery(){
			this.$set(this,'typeListIndex',0);
			this.$set(this,'typeName','');
			this.$set(this,'queryParams',{
				page:1,
				pageSize:10,
				searchValue:'',
				typeId:'',
			});
			this.getList();
		},
		//翻页
		paginationButton(type){
			if(type == 1){
				if(this.queryParams.page != 1){
					this.queryParams.page--
					this.getList();
				}
			}else if(type == 2){
				if(this.queryParams.page != this.pages && this.queryParams.page < this.pages){
					this.queryParams.page++
					this.getList();
				}
			}
		},
		//获取物联设备列表
		async getList(){
			const {data} = await iotDeviceList(this.queryParams);
			if(data.code==200){
				this.$set(this,'pages',data.data.pages);
				this.$set(this,'dataList',data.data.records);
			}
		},
		//获取物联分类下拉列表
		async iotTypeGetAllTypes(){
			const {data} = await iotTypeGetAllTypes();
			if(data.code==200){
				this.$set(this,'typeDataList',data.data);
				let list = [];
				data.data.forEach((item) => {
					list.push(item.typeName);
				})
				this.$set(this,'typeList',list);
			}
		},
		//选中分类
		typeListChange(event){
			this.$set(this,'typeListIndex',event.target.value);
			this.$set(this,'typeName',this.typeDataList[event.target.value].typeName);
			this.$set(this.queryParams,'typeId',this.typeDataList[event.target.value].typeId);
		},
	},
}
</script>

<style lang="stylus" scoped>
	#iotDevice-index{
		flex:1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.query-max-big-box{
			height:80rpx;
			background-color: #fff;
			display: flex;
			font-size:28rpx;
			.query-input-box{
				display: flex;
				margin:10rpx 0 0 10rpx;
				.query-input{
					padding:0 20rpx;
					height:60rpx;
					line-height:60rpx;
					font-size:26rpx;
					border-radius:8rpx;
					border:1px solid #dedede;
				}
				.query-input-placeholder{
					color: #999 !important;
				}
			}
			.query-button-one{
				margin:10rpx 0 0 10rpx;
				background-color: #0183FA;
				color:#fff;
				border-radius:8rpx;
				width:100rpx;
				height:62rpx;
				line-height:62rpx;
				text-align: center;
				font-size:28rpx;
			}
			.query-button-two{
				margin:10rpx;
				background-color: #999;
				color:#fff;
				border-radius:8rpx;
				width:100rpx;
				height:62rpx;
				line-height:62rpx;
				text-align: center;
				font-size:28rpx;
			}
			.query-button-three{
				margin:10rpx 10rpx 0 0;
				background-color: #409EFF;
				color:#fff;
				border-radius:8rpx;
				width:100rpx;
				height:62rpx;
				line-height:62rpx;
				text-align: center;
				font-size:28rpx;
			}
		}
		.list-max-big-box{
			flex:1;
			overflow-x: hidden;
			overflow-y: scroll;
			margin:20rpx;
			.list-max-big-null{
				font-size:28rpx;
				text-align:center;
				line-height:100rpx;
				color:#999;
			}
			.for-list-max-big-box{
				background-color: #fff;
				color:#333;
				font-size:30rpx;
				margin-bottom:20rpx;
				padding:20rpx;
				border-radius:16rpx;
				.for-item-text-box{
					display: flex;
					.name-box{
						flex:1;
						line-height:40rpx;
					}
					.num-box{
						width:200rpx;
					}
					.img-box{
						width:40rpx;
						height:40rpx;
						image{
							width:30rpx;
							height:30rpx;
							margin:5rpx;
						}
					}
				}
				.for-item-num{
					line-height:40rpx;
				}
				.for-item-address{
					line-height:40rpx;
				}
			}
		}
		.pagination-max-big-box{
			height:80rpx;
			background-color: #fff;
			display: flex;
			.pagination-button{
				margin:10rpx;
				border-radius:8rpx;
				width:140rpx;
				height:60rpx;
				line-height:60rpx;
				text-align: center;
				font-size:28rpx;
				background-color:#0183FA;
				color:#fff;
			}
			.pagination-num{
				flex:1;
				text-align: center;
				line-height:80rpx;
			}
			.pagination-color{
				background-color: #dedede;
			}
		}
	}
</style>