bigDataApp/pages/fourBase/basefacility.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="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>
</template>

<script>
	export default {
		data() {
			return {
				base_id:"",
				assignments:[],
				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
				}],
				tishiTF: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
				})
			}
		},
		onLoad(option) {
			this.base_id = option.id
			this.ybase(option.id)
		},

	}
</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: 24rpx;
					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: 10px;
				}

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

				}
			}
		}
	}
</style>