bigDataApp/pages/fourBase/basefacility.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="ass_list">
				<view class="equipment" v-for="(items,indexs) in assignments" :key="items.id" v-if="tishiTF">
					<view class="equipment_top">
						<image :src="items.src" mode="" class="equipment_top_img"></image>
						<span class="equipment_top_name">{{items.type_name}}</span>
					</view>
					<view class="equipment_bot">
						<p class="equipment_bot_id">设备ID：{{items.d_id}}</p>
						<p class="equipment_bot_name">设备名称：{{items.device_id}}</p>
						<view class="equipment_state">在线</view>
					</view>
				</view>
				<view class="tishi" v-if="!tishiTF">
					暂无数据
				</view>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image src="../../static/image/6209a98f0cb3b5086f2ca36152c9269.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base_id: "",
				assignments: [],
				images: [{
					path: "../../static/image/fourMoodBase/1.png",
					id: 3
				}, {
					path: "../../static/image/fourMoodBase/5.png",
					id: 5
				}, {
					path: "../../static/image/fourMoodBase/2.png",
					id: 6
				}, {
					path: "../../static/image/fourMoodBase/4.png",
					id: 3
				}, {
					path: "../../static/image/fourMoodBase/qxz.png",
					id: 5
				}, {
					path: "../../static/image/fourMoodBase/jk.png",
					id: 6
				}, {
					path: "../../static/image/fourMoodBase/bzy.png",
					id: 7
				}],
				tishiTF: false,
				isTop:false
			}
		},
		methods: {
			async ybase(id) { //获取分布位置
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_map_list',
					data: {
						base_id: id
					}
				})
				this.assignments = res
				console.log(this.assignments)
				for (var i = 0; i < this.images.length; i++) {
					for (var j = 0; j < this.assignments.length; j++) {
						if (this.assignments[j].equip_type == this.images[i].id) {
							this.assignments[j].src = this.images[i].path
						}
					}
				}
				if (this.assignments.length == 0) {
					this.tishiTF = false
				} else {
					this.tishiTF = true
				}
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		},
		onLoad(option) {
			this.base_id = option.id
			this.ybase(option.id)
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>

<style lang="scss">
	.ass_list {
		position: absolute;
		top: 54px;
		width: 100%;
		margin-bottom: 40px;

		.tishi {
			width: 100%;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
		}

		.equipment {
			width: 90%;
			margin: 20rpx auto;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.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: 28rpx;
					margin-left: 60rpx;
				}
			}

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

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

				.equipment_bot_name {
					font-size: 13px;
				}

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

				}
			}
		}
	}
	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>