bigdata_WX/pages/equipMange/index/assignment.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 64px;">
			<view style="position: fixed;z-index: 100;top:64px;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="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="'http://static.yfpyx.com/bigdata_app'+items.src" mode="" class="equipment_top_img"></image>
							<span class="equipment_top_name">{{list[items.device_type_id-1].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="'http://static.yfpyx.com/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				user_info: {},
				list: [{
					name: "全部"
				}, {
					name: "杀虫灯"
				}, {
					name: "测报灯"
				}, {
					name: "智能性诱"
				}, {
					name: "环境检测"
				}, {
					name: "监控设备"
				}, {
					name: "孢子仪"
				}, {
					name: "性诱设备"
				}, {
					name: "糖醋测报"
				}, {
					name: "性诱2.0"
				}],
				current: 0,
				assignment: [],
				data: {
					devicetypeid: '',
					pagesize: 10,
					page: 1
				},
				images: [{
						path: "/image/fourMoodBase/scd.png",
						id: 2
					},
					{
						path: "/image/fourMoodBase/cbd.png",
						id: 3
					}, {
						path: "/image/fourMoodBase/xycb.png",
						id: 4
					}, {
						path: "/image/fourMoodBase/qxz.png",
						id: 5
					}, {
						path: "/image/fourMoodBase/jk.png",
						id: 6
					}, {
						path: "/image/fourMoodBase/bzy.png",
						id: 7
					},
					{
						path: "/image/fourMoodBase/10.png",
						id: 10
					}
				],
				allocationvalues: [], //原始数据
				allocationvalues2: [], //选项框更改后的数据
				allocationvalues3: [], //头部导航栏点击后的数据
				allocationvaluesTF: false, //判断选项框是否变动
				topbarTF: false ,//判断头部导航栏是否变更
				isTop:false
			}
		},
		methods: {
			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 //更改导航栏状态
				// this.allocationvalues3 = this.deweight(this.allocationvalues3.concat(this.allocationvalues2)) //合并数据
				console.log(this.allocationvalues3)
				this.current = index
				this.data.page = 1
				this.data.devicetypeid = ''
				uni.pageScrollTo({
					scrollTop: 0
				});
				if (index == 0) {
					this.assignment = []
					this.getAssign(this.data)
				} else {
					this.assignment = []
					this.data.devicetypeid = index + 1
					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
					}
				})
				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.images.length; j++) {
						if (this.assignment[i].device_type_id == this.images[j].id) {
							this.assignment[i].src = this.images[j].path
						}
					}
				}
			},
			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)
				}
			},
			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
				})
			}
		},
		onLoad(option) {
			this.user_info = JSON.parse(option.item)
			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: 108px;
		z-index: 100;
	}

	.ass_list {
		margin: 190rpx 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>