bigdata_WX/pages/fourBase/allocation.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<view style="position: fixed;z-index: 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" />
				</view>
			</view>
			<view class="loading" v-if="nonetf">
				暂无可分配设备
			</view>
			<view class="ass_list">
				<checkbox-group class="che_group" @change="checkboxchange">
					<label v-for="(items,indexs) in assignments.children" :key="items.id">
						<view class="" v-if="items.type_name.search(inputdata)+1" class="equipment">
							<view class="equipment_top">
								<image
									:src="$imageURL+'/bigdata_app/image/fourMoodBase/'+assignments.id+'.png'"
									mode="" class="equipment_top_img"></image>
								<span class="equipment_top_name">{{assignments.type_name}}</span>
								<checkbox :value="String(items.type_name)" :checked="items.check" class="ucheckbox"
									color="#42b983" />
							</view>
							<view class="equipment_bot">
								<p class="equipment_bot_id">设备ID：{{items.id}}</p>
								<p class="equipment_bot_name">设备名称：{{items.type_name}}</p>
								<view class="equipment_state">在线</view>
							</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>
	export default {
		data() {
			return {
				search: '',
				checken: false,
				assignment: [],
				assignments: [],
				list: [],
				current: 0,
				assignment_items: [],
				images: [{
						path: "/image/fourMoodBase/1.png",
						id: 3
					}, {
						path: "/image/fourMoodBase/5.png",
						id: 5
					}, {
						path: "/image/fourMoodBase/2.png",
						id: 6
					}, {
						path: "/image/fourMoodBase/4.png",
						id: 7
					},
					{
						path: "/image/fourMoodBase/10.png",
						id: 10
					}
				],
				src: '',
				obj: {},
				isTop: false,
				base_id: "",
				baseidarr: "",
				inputdata: "",
				nonetf: false, //设备列表为空判断
			}
		},
		methods: {
			async ybase() { //获取基地已绑定设备
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_map_list',
					data: {
						base_id: this.base_id
					}
				})
				this.baseidarr = res
				console.log(res)
				var arr = []
				for (var i = 0; i < res.length; i++) {
					if (arr.indexOf(res[i].type_name) === -1) {
						arr.push(res[i].type_name)
					}
				}
				var obj = {}
				for (var i = 0; i < arr.length; i++) {
					obj[arr[i]] = []
				}
				for (var i = 0; i < res.length; i++) {
					for (var key in obj) {
						if (res[i].type_name == key) {
							obj[key].push(res[i].device_id)
						}
					}
				}
				console.log(obj)
				this.obj = obj
				this.getFourbase()
			},
			async getFourbase() { //全部设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_equip',
				})
				this.assignment = res.data
				for (var i = 0; i < this.assignment.length; i++) {
					let obj = {}
					obj.name = this.assignment[i].type_name
					this.list.push(obj)
				}
				if (this.list.length == 0) {
					let obj = {}
					obj.name = "全部"
					this.list.push(obj)
					this.nonetf = true
				}
				this.assignments = this.assignment[this.current]
				for (let i = 0; i < this.assignments.children.length; i++) {
					this.assignments.children[i].check = false
					for (let j = 0; j < this.baseidarr.length; j++) {
						if (this.assignments.children[i].type_name == this.baseidarr[j].device_id) {
							this.assignments.children[i].check = true
							console.log(this.assignments.children[i].check)
						}
					}
				}
			},
			forchange(obj) {
				for (let i = 0; i < this.assignments.children.length; i++) {
					this.assignments.children[i].check = false
					for (let key in obj) {
						if (key == this.list[this.current].name) {
							for (let j = 0; j < obj[key].length; j++) {
								if (this.assignments.children[i].type_name == obj[key][j]) {
									this.assignments.children[i].check = true
								}
							}
						}
					}
				}
			},
			change(index) {
				this.current = index
				this.assignments = this.assignment[index]
				console.log(this.obj)
				this.forchange(this.obj)
			},
			checkboxchange(e, items) {
				this.obj[this.assignments.type_name] = JSON.parse(JSON.stringify(e.detail.value))
				console.log(this.obj)
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			cancel() {
				this.clickLeft()
			},
			canfirm() {
				uni.setStorage({
					key: "typeid",
					data: JSON.stringify(this.obj),
					success: () => {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			searchs() {
				console.log(this.inputdata.search("好"))
			},
		},
		onLoad(option) {
			this.base_id = option.base_id
			if (this.base_id) {
				this.ybase()
			} else {
				this.getFourbase()
			}
		},
		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: 80px;
		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;
			}
		}
	}

	.loading {
		position: fixed;
		top: 440px;
		width: 95%;
		left: 2.5%;
		text-align: center;

		.img {
			width: 300rpx;
			height: 40rpx;
		}
	}

	.ass_list {
		position: absolute;
		top: 115px;
		width: 100%;
		margin-bottom: 40px;

		.che_group {
			display: flex;
			flex-direction: column;
			width: 90%;
			margin: 0 auto;
		}

		.equipment {
			width: 90%;
			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: 24rpx;
				}

				.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>