realty/virgo.wzfrontend/console/src/views/work/iot/environment/air.vue

<template>
	<div class="yui-tree-box">
		<project-item-tree @treeclick="treeclick" iconfontClass="el-icon-place"></project-item-tree>
		<div class="hui-tree-content">
			<div class="hui-flex hui-content box-background">
				<div class="hui-content-title">
					<div class="hui-title-item active">空气检测</div>
				</div>
				<div class="hui-flex-box hui-no-tips" v-if="list.length === 0">
					<empty description="暂无空气检测设备"></empty>
				</div>
				<div class="hui-flex-box smell-list" v-else>
					<div class="smell-item" v-for="(item,index) in list" :key="index">
						<div class="smell-item-title">
							<i class="iconfont huifont-shouye"></i>
							<span>{{item.name}}</span>
						</div>
						<div class="smell-item-box">
							<div class="smell-item-row">
								<div class="smell-item-label">
									<div class="smell-item-value alibaba color-green">{{item.temperature}}</div>
									<div class="smell-item-name">温度(°C)</div>
								</div>
								<div class="smell-item-label">
									<div class="smell-item-value alibaba color-green">{{item.tVoc}}</div>
									<div class="smell-item-name">Tvoc(ppm)</div>
								</div>
							</div>
							<div class="smell-item-row">
								<div class="smell-item-label">
									<div class="smell-item-value alibaba color-green">{{item.humidity}}</div>
									<div class="smell-item-name">湿度(%)</div>
								</div>
								<div class="smell-item-label">
									<div class="smell-item-value color-green">{{item.pm25}}</div>
									<div class="smell-item-name">PM2.5(ug/m3)</div>
								</div>
							</div>
							<div class="smell-item-row">
								<div class="smell-item-label">
									<div class="smell-item-value alibaba color-green">{{item.co2}}</div>
									<div class="smell-item-name">CO2(ppm)</div>
								</div>
								<div class="smell-item-label">
									<div class="smell-item-value alibaba color-green">{{item.pm10}}</div>
									<div class="smell-item-name">PM10(ug/m3)</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import projectItemTree from '@/components/common/projectItemTree'
	import {
		getAirList
	} from '@/httpApi/test'
	export default {
		components: {
			projectItemTree
		},
		data() {
			return {
				list: []
			}
		},
		created() {
			this.init();
		},
		methods: {
			init(option) {
				let postData = {
					type: this.type,
					projectId: this.$store.getters.project.id
				}
				if (option) postData = Object.assign(postData, option);
				getAirList(postData).then(res => {
					if (res.state) {
						this.list = res.data.dataList;
					}
				})
			},
			treeclick(item) {
				let obj = item.id ? {
					projectItemTargetId: item.id
				} : {};
				this.init(obj);
			},
		},
	}
</script>

<style lang="scss">
	.smell-list {
		padding: 15px 0 0 15px;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;

		.smell-item {
			width: 276px;
			height: 160px;
			background: #232A37;
			border-radius: 2px;
			overflow: hidden;
			margin-right: 15px;
			margin-bottom: 15px;

			.smell-item-title {
				width: 276px;
				height: 40px;
				background: #2B3446;
				display: flex;
				align-items: center;
				padding: 0 13px;
				border-bottom: 1px solid $--color-border;

				.huifont-shouye {
					font-size: 22px;
					opacity: 0.7;
					margin-right: 4px;
				}
			}

			.smell-item-box {
				display: flex;
				flex-wrap: wrap;
				padding-left: 14px;
				padding-top: 10px;
			}

			.smell-item-row {
				padding-right: 14px;
			}

			.smell-item-label {
				overflow: hidden;
				height: 40px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-bottom: 14px;

				.smell-item-name {
					font-size: 12px;
				}

			}
		}
	}
</style>