bigDataApp/pages/fourBase/allocation.vue

<template>
	<view>
		<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="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>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				checken: false,
				assignment: [],
				assignments: [],
				list: [],
				current: 0,
				assignment_items: [],
				images: [{
					path: "../../static/image/fourMoodBase/测报灯.png",
					id: 3
				}, {
					path: "../../static/image/fourMoodBase/环境监测.png",
					id: 5
				}, {
					path: "../../static/image/fourMoodBase/监控.png",
					id: 6
				}, {
					path: "../../static/image/fourMoodBase/孢子仪.png",
					id: 7
				}],
				src: '',
				obj: {},
				addtype:[]
			}
		},
		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)
					if (this.assignment[i].id == this.images[i].id) {
						this.assignment[i].src = this.images[i].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
						}
					}
				}
			},
			forchange(obj) {
				for (let i = 0; i < this.assignments.children.length; i++) {
					this.assignments.children[i].check = false
				}
				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) {
				console.log(e.detail.value)
				this.obj[this.assignments.type_name] = e.detail.value
				this.forchange(this.obj)
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			cancel() {
				this.clickLeft()
			},
			canfirm() {
				localStorage.setItem("id",JSON.stringify(this.obj))
				uni.navigateBack({
					delta:1
				})
			},
		},
		onLoad(option) {
			if(option.type!=''){
				this.addtype = option.type.split("#")
				console.log(this.addtype)
			}
			this.getFourbase()
		},
	}
</script>

<style lang="scss">
	.utabs {
		width: 100%;
		position: fixed;
		top: 44px;
		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: 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;
		}
	}
</style>