bigDataApp/pages/equipMange/index/assignment.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;top:44px;width: 100%;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="设备分配"></uni-nav-bar>
			</view>
			<view class="utabs">
				<view style="width: 95%;margin: 0 auto;">
					<u-tabs :list="list" :is-scroll="true" :current="current" @change="change" item-width="140" font-size="24" gutter="20"
					 bar-width="60" active-color="#42b983"></u-tabs>
				</view>
			</view>
			<view class="bases_search">
				<view class="bases_search_text">
					<u-icon name="search" class="search" @click="searchs"></u-icon>
					<input type="text" v-model="inputdata" placeholder="请输入设备ID"  @input="searchinp"/>
				</view>
			</view>
			<view class="ass_list">
				<checkbox-group class="che_group" @change="checkboxchange">
					<label class="equipment" v-for="(items,index) in assignment" :key="index">
						<view class="equipment_top">
							<image :src="$imageURL+'/bigdata_app/image/fourMoodBase/'+items.device_type_id+'.png'" mode="" class="equipment_top_img"></image>
							<span class="equipment_top_name">{{items.device_type_id_name}}</span>
							<checkbox :value="String(items.d_id)" :checked="items.device_user==user_info.uid" class="ucheckbox" color="#42b983" />
						</view>
						<view class="equipment_bot">
							<p class="equipment_bot_id">设备ID：{{items.device_id}}</p>
							<p class="equipment_bot_name">设备名称：{{items.device_name||"无"}}</p>
							<view class="equipment_state">在线</view>
						</view>
					</label>
				</checkbox-group>
			</view>
			<view class="allocbtn">
				<button @click="cancel" class="cancel">取消分配</button>
				<button @click="canfirm" class="canfirm">确定分配</button>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="$imageURL+ '/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>
<script>
	import {
		Debounce,
		Throttle
	} from "../../../util/anitthro.js"
	export default {
		data() {
			return {
				user_info: {},
				list: [],
				current: 0,
				assignment: [],
				data: {
					devicetypeid: '',
					pagesize: 10,
					page: 1
				},
				allocationvalues: [], //原始数据
				allocationvalues2: [], //选项框更改后的数据
				allocationvalues3: [], //头部导航栏点击后的数据
				allocationvaluesTF: false, //判断选项框是否变动
				topbarTF: false ,//判断头部导航栏是否变更
				isTop:false,
				type_id:0,
				inputdata:"",//设备搜索
			}
		},
		methods: {
			async devicetypelist() { //所有设备类型
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=home.homes.user_device_type',
				})
				console.log(res)
				this.list = [
					{
						name: "全部",
						id:0
					}
				]
				for(var i = 0; i < res.length; i++){
					if(res[i].type_name == "性诱3.0" ||
					   res[i].type_name == "吸虫塔" ||
					   res[i].type_name == "病虫害可视监测" ||
					   res[i].type_name == "小麦赤霉病" ||
					   res[i].type_name == "温室大棚" 
					   ){
						continue;
					}
					var obj = {
						name:res[i].type_name,
						id:res[i].id
					}
					this.list.push(obj)
				}
			},
			deweight(arr) {
				var newArr = []
				for (var i = 0; i < arr.length; i++) {
					if (newArr.indexOf(arr[i]) === -1) {
						newArr.push(arr[i])
					}
				}
				return newArr
			},
			clickLeft() { //返回上一页
				uni.navigateTo({
					url: './useroperation?item=' + JSON.stringify(this.user_info)
				})
			},
			change(index) { //头部导航栏的点击
				this.topbarTF = true //更改导航栏状态
				console.log(this.allocationvalues3)
				this.current = index
				this.data.page = 1
				this.data.devicetypeid = ''
				this.type_id =  this.list[index].id
				uni.pageScrollTo({
					scrollTop: 0
				});
				if (index == 0) {
					this.assignment = []
					this.getAssign(this.data)
				} else {
					this.assignment = []
					this.data.devicetypeid = this.list[index].id
					this.getAssign(this.data)
				}
			},
			async getAssign(data) { //获取设备信息
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.user_device_info',
					data: {
						owner_uid: this.user_info.uid,
						device_type_id: data.devicetypeid,
						page_size: data.pagesize,
						page: data.page,
						device_id: this.inputdata
					}
				})
				this.assignment = this.assignment.concat(res.data)
				for (var i = 0; i < this.assignment.length; i++) {
					if (this.assignment[i].device_user != 0) {
						this.allocationvalues.push(this.assignment[i].d_id)
					}
					for (var j = 0; j < this.list.length; j++) {
						if (this.assignment[i].device_type_id == this.list[j].id) {
							this.assignment[i].device_type_id_name = this.list[j].name
						}
					}
				}
			},
			async allocation(data) { //分配设备
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.allot_device',
					data: {
						device_ids: data.device_ids,
						uid: data.uid
					}
				})
			},
			checkboxchange(e) { //多选框变动时
				this.allocationvaluesTF = e._processed
				this.allocationvalues2 = e.detail.value
				if (this.topbarTF) {
					this.allocationvalues3 = this.allocationvalues3.concat(e.detail.value)
					console.log(e.detail.value)
				}
				console.log(e.detail.value)
			},
			canfirm() { //确定分配
				let data = {}
				if (this.topbarTF) {
					data.device_ids = this.deweight(this.allocationvalues3.concat(this.allocationvalues)).join(',')
				} else {
					if (this.allocationvaluesTF) {
						this.allocationvalues2 = this.deweight(this.allocationvalues2)
						data.device_ids = this.allocationvalues2.join(',')
					} else {
						data.device_ids = this.allocationvalues.join(',')
					}
				}

				data.uid = this.user_info.uid
				this.allocation(data)
				uni.navigateTo({
					url: './useroperation?item=' + JSON.stringify(this.user_info)
				})
			},
			cancel() { //取消分配
				uni.navigateTo({
					url: './useroperation?item=' + JSON.stringify(this.user_info)
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			searchs(){
				var data = {
					pagesize:10,
					page:1,
					devicetypeid:""
				}
				if (this.type_id==0) {
					this.assignment = []
					this.getAssign(data)
				} else {
					data.devicetypeid = this.type_id
					this.assignment = []
					this.getAssign(data)
				}
			},
			searchinp(){
				Debounce(() => {
					this.searchs()
				}, 1000)()
			}
		},
		onLoad(option) {
			this.user_info = JSON.parse(option.item)
			console.log(this.user_info)
			this.devicetypelist()
			this.getAssign(this.data)
		},
		onReachBottom() {
			this.data.page++
			this.getAssign(this.data)
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>

<style lang="scss">
	.utabs {
		width: 100%;
		position: fixed;
		top: 88px;
		z-index: 100;
	}
	.bases_search {
		width: 100%;
		position: fixed;
		top: 120px;
		z-index: 100;
		background-color: #FFFFFF;
	
		.bases_search_text {
			width: 90%;
			margin: 0 auto;
			background-color: #F8F8F8;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			line-height: 60rpx;
	
			.search {
				padding: 0 20rpx;
				font-size: 34rpx;
			}
	
			input {
				width: 80%;
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	.ass_list {
		margin: 220rpx 0 0;

		.che_group {
			display: flex;
			flex-direction: column;
		}

		.equipment {
			width: 600rpx;
			margin: 20rpx auto;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx 30rpx;

			.equipment_top {
				height: 60rpx;
				width: 100%;
				border-bottom: 1px solid #dfe5ec;
				position: relative;

				.equipment_top_img {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
				}

				.equipment_top_name {
					font-size: 24rpx;
					margin-left: 60rpx;
				}

				.ucheckbox {
					float: right;
					margin: 0rpx -4rpx;
					transform: scale(0.7);
				}
			}

			.equipment_bot {
				padding: 30rpx 0;
				position: relative;

				.equipment_bot_id {
					font-weight: 700;
					font-size: 15px;
					margin-bottom: 16rpx;
				}

				.equipment_bot_name {
					font-size: 10px;
				}

				.equipment_state {
					position: absolute;
					top: 20rpx;
					right: 0;
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					color: #42b983;

				}
			}
		}
	}
	.allocbtn {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 100;
		display: flex;
	
		button {
			width: 50%;
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 0;
		}
	
		.cancel {
			background-color: #C8C7CC;
			color: #555555;
		}
	
		.canfirm {
			color: white;
			background-color: #42b983;
		}
	}
	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>