realty/virgo.wzfrontend/console/src/components/work/bim/operationRoom.vue

<template>
	<div class="hui-flex operation-room">
		<div class="hui-flex-box hui-no-tips" v-if="list.length === 0">
			<empty description="暂未设置房间"></empty>
		</div>
		<div class="hui-flex-box operation-room-list" v-else>
			<div class="operation-room-item" v-for="(item,index) in list" :key="index">
				<div class="operation-room-box">
					<div class="operation-room-title">
						<i class="iconfont huifont-shouye"></i>
						<span class="label">{{item.roomNumber}}</span>
						<div>
							<div v-if="item.state == 1" class="hui-state">
								<span class="hui-state-bage hui-state-primary"></span>
								<span class="hui-state-label">空闲</span>
							</div>
							<div v-if="item.state == 2" class="hui-state">
								<span class="hui-state-bage hui-state-common"></span>
								<span class="hui-state-label">即将到期</span>
							</div>
							<div v-if="item.state == 3" class="hui-state">
								<span class="hui-state-bage hui-state-success"></span>
								<span class="hui-state-label">租赁中</span>
							</div>
							<div v-if="item.state == 4" class="hui-state">
								<span class="hui-state-bage hui-state-error"></span>
								<span class="hui-state-label">已逾期</span>
							</div>
						</div>
					</div>
					<div class="operation-room-content">
						<div class="room-title">
							<div class="iconfont-box">
								<i class="iconfont huifont-moxingguanli"></i>
							</div>
							<span class="label">面积</span>
						</div>
						<div class="room-content">{{item.area}}</div>
						<div class="room-title">
							<div class="iconfont-box">
								<i class="iconfont huifont-zuzhiguanli"></i>
							</div>
							<span class="label">入驻公司</span>
						</div>
						<div class="room-content">{{item.merchantName||item.clientName||'-'}}</div>
						<div class="room-title">
							<div class="iconfont-box">
								<i class="iconfont huifont-shijian" style="font-size: 13px;"></i>
							</div>
							<span class="label">入驻时间</span>
						</div>
						<div class="room-content">{{item.startDate || '-'}}</div>
						<div class="room-title">
							<div class="iconfont-box">
								<i class="iconfont huifont-shebeiguanli"></i>
							</div>
							<span class="label">合同日期</span>
						</div>
						<div class="room-content" style="font-size: 13px;">
							{{item.startDate ? (item.startDate+'至'+item.endDate) :'-'}}
						</div>
						<div class="room-title">
							<div class="iconfont-box">
								<i class="iconfont huifont-guanlipingtai"></i>
							</div>
							<span class="label">负责人</span>
						</div>
						<div class="room-content">{{item.chargePersonName}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getHouseListByLevel
	} from '@/httpApi/space'
	export default {
		props: ['target'],
		data() {
			return {
				list: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				getHouseListByLevel(this.target.id).then(res => {
					if (res.state) {
						this.list = res.data.map(node => {
							if (node.contractList.length === 0) {
								node['state'] = 1;
								return node
							};
							let contract = node.contractList(node.contractList.length - 1);
							let state = 3;
							let nowDate = this.dayjs(),
								endDate = this.$dayjs(contract.endDate);
							if (nowDate.isBefore(endDate)) {
								state = 4;
							} else {
								if (endDate.diff(nowDate, 'day') <= 7) state = 2;
							}
							let obj = {
								merchantName: contract.merchantName,
								clientName: contract.clientName,
								startDate: contract.startDate,
								endDate: contract.endDate,
								state: state
							}
							return Object.assign(node, obj);
						});
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.operation-room {
		background: $--box-background;

		.operation-room-list {
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			align-content: flex-start;
		}

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

			.label {
				flex: 1;
			}

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

			.hui-state-label {
				font-size: 12px;
			}
		}

		.operation-room-item {
			padding: 10px;
		}

		.operation-room-box {
			width: 220px;
			background: #232A37;
		}

		.operation-room-content {
			padding: 10px 10px 5px 10px;

			.iconfont-box {
				width: 20px;
				text-align: center;
			}

			.room-title {
				opacity: 0.8;
				display: flex;
				align-items: center;

				.label {
					font-size: 12px;
				}
			}

			.room-content {
				padding: 5px 0 10px 0;
				padding-left: 20px;
			}
		}
	}
</style>