bigdata_WX/pages/fourBase/allocation.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<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="ass_list">
				<checkbox-group class="che_group" @change="checkboxchange">
					<label class="equipment" v-for="(items,indexs) in assignments.children" :key="items.id">
						<view class="equipment_top">
							<image :src="'http://static.yfpyx.com/bigdata_app'+assignments.src" 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>
					</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 {
				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: {},
				addtype: [],
				isTop:false
			}
		},
		methods: {
			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)
					for (var j = 0; j < this.images.length; j++) {
						if (this.assignment[i].id == this.images[j].id) {
							this.assignment[i].src = this.images[j].path
						}
					}
				}
				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.addtype.length; j++) {
						if (this.assignments.children[i].type_name == this.addtype[j]) {
							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 i = 0; i < this.assignments.children.length; i++) {
					// this.assignments.children[i].check = false
					for (let j = 0; j < this.addtype.length; j++) {
						if (this.assignments.children[i].type_name == this.addtype[j]) {
							this.assignments.children[i].check = true
							console.log(this.assignments.children[i].check)
						}
					}
				}
				for (let key in obj) {
					for (let i = 0; i < key.length; i++) {
						for (let j = 0; j < this.assignments.children.length; j++) {
							if (Number(obj[key][i]) == this.assignments.children[j].type_name) {
								this.assignments.children[j].check = true

							}
						}
					}
				}
				this.$forceUpdate()
			},
			change(index) {
				this.current = index
				this.assignments = this.assignment[index]
				this.forchange(this.obj)
				console.log(this.obj)
			},
			checkboxchange(e, items) {
				this.obj[this.assignments.type_name] = e.detail.value
				this.forchange(this.obj)
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			cancel() {
				this.clickLeft()
			},
			canfirm() {
				uni.setStorage({
					key: "id",
					data: JSON.stringify(this.obj),
					success: () => {
						uni.navigateBack({
							delta: 1
						})
					}

				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.type) {
				this.addtype = option.type.split("#")
				console.log(this.addtype)
			}
			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: 88px;
		z-index: 100;
	}

	.bases_search {
		width: 100%;
		position: fixed;
		top: 84px;
		z-index: 100;
		background-color: #FFFFFF;
		height: 80rpx;
		padding-top: 20rpx;

		.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 {
		position: absolute;
		top: 84px;
		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>