realty/virgo.wzfrontend/console/src/views/work/iot/firefighting/thoroughfare.vue

<template>
	<div class="yui-tree-box">
		<select-space></select-space>
		<div class="hui-tree-content">
			<div class="access-control box-background">
				<div class="access-control-box">
					<div class="access-control-center">
						<div class="hui-test-alarm">
							<div class="test-box">
								<div class="test-item">
									<div class="test-icon">
										<i class="iconfont huifont-zaichangrenshu"></i>
									</div>
									<div class="test-label">
										<div class="test-name">当前在场人数</div>
										<div class="test-value alibaba">100</div>
									</div>
								</div>
								<div class="test-item">
									<div class="test-icon green">
										<i class="iconfont huifont-chuchang"></i>
									</div>
									<div class="test-label">
										<div class="test-name">进场人数</div>
										<div class="test-value alibaba">86</div>
									</div>
								</div>
								<div class="test-item">
									<div class="test-icon red">
										<i class="iconfont huifont-chuchang"></i>
									</div>
									<div class="test-label">
										<div class="test-name">出场人数</div>
										<div class="test-value alibaba">14</div>
									</div>
								</div>
							</div>
							<div class="alarm-table-box hui-flex">
								<div class="alarm-title">
									<div class="hui-chart-title">
										分层人数
									</div>
									<div class="alarm-tr">
										<span class="tr-flex">层数</span>
										<span class="tr-80 tr-center">进场人数</span>
										<span class="tr-80 tr-center">出场人数</span>
										<span class="tr-80 tr-center">现场人数</span>
									</div>
								</div>
								<div class="alarm-table hui-flex-box">
									<div class="alarm-tr">
										<span class="tr-flex">一层</span>
										<span class="tr-80 tr-center color-green alibaba">12</span>
										<span class="tr-80 tr-center color-red alibaba">11</span>
										<span class="tr-80 tr-center color-blue alibaba">0</span>
									</div>
									<div class="alarm-tr">
										<span class="tr-flex">二层</span>
										<span class="tr-80 tr-center color-green alibaba">12</span>
										<span class="tr-80 tr-center color-red alibaba">11</span>
										<span class="tr-80 tr-center color-blue alibaba">0</span>
									</div>
									<div class="alarm-tr">
										<span class="tr-flex">三层</span>
										<span class="tr-80 tr-center color-green alibaba">12</span>
										<span class="tr-80 tr-center color-red alibaba">11</span>
										<span class="tr-80 tr-center color-blue alibaba">0</span>
									</div>
									<div class="alarm-tr">
										<span class="tr-flex">四层</span>
										<span class="tr-80 tr-center color-green alibaba">12</span>
										<span class="tr-80 tr-center color-red alibaba">11</span>
										<span class="tr-80 tr-center color-blue alibaba">0</span>
									</div>
									<div class="alarm-tr">
										<span class="tr-flex">三层</span>
										<span class="tr-80 tr-center color-green alibaba">12</span>
										<span class="tr-80 tr-center color-red alibaba">11</span>
										<span class="tr-80 tr-center color-blue alibaba">0</span>
									</div>
									<div class="alarm-tr">
										<span class="tr-flex">四层</span>
										<span class="tr-80 tr-center color-green alibaba">12</span>
										<span class="tr-80 tr-center color-red alibaba">11</span>
										<span class="tr-80 tr-center color-blue alibaba">0</span>
									</div>
								</div>
							</div>
						</div>
						<div class="bim-box">
							<model type="thoroughfare" fileId="10000754876737"></model>
						</div>
					</div>
					<div class="access-control-right">
						<div class="access-control-record alarm-table-box hui-flex">
							<div class="access-control-record-title">
								<div class="hui-chart-title">
									消防通道巡查记录
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容</span>
									<span class="tr-130">巡查时间</span>
								</div>
							</div>
							<div class="alarm-table hui-flex-box">
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
							</div>
						</div>
						<div class="access-control-record alarm-table-box hui-flex">
							<div class="access-control-record-title">
								<div class="hui-chart-title">
									防火门巡查记录
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容</span>
									<span class="tr-130">巡查时间</span>
								</div>
							</div>
							<div class="alarm-table hui-flex-box">
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
								<div class="alarm-tr">
									<span class="tr-flex">巡查内容巡查内容巡查内容</span>
									<span class="tr-130">2020-01-01 20:00:06</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import selectSpace from '@/components/work/common/selectSpace'
	import model from '@/components/work/common/model'
	export default {
		components: {
			selectSpace,
			model
		}
	}
</script>

<style lang="scss">
	.access-control {
		width: 100%;
		height: 100%;
		padding: 20px;
		overflow: auto;

		.access-control-box {
			width: 100%;
			height: 100%;
			min-width: 1100px;
			min-height: 699px;
			display: flex;
		}

		.access-control-center {
			flex: 1;
			width: 0;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.access-control-right {
			height: 100%;
			width: 350px;
			margin-left: 12px;
			display: flex;
			flex-direction: column;

			.access-control-record {
				flex: 1;
				height: 0;
				background: rgba(0, 4, 10, 0.3);
				width: 100%;
				margin-bottom: 12px;

				.access-control-record-title {
					padding: 20px 20px 0 20px;
				}
			}

			.access-control-record:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>