<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="refresh" content="120">
		<title>企业管理及健康监管平台</title>
		<link th:href="@{/static/css/mui.min.css}" href="static/css/mui.min.css" rel="stylesheet" />
		<link th:href="@{/static/fonts/iconfont.css}" href="static/css/iconfont.css" rel="stylesheet" />
		<link th:href="@{/static/css/sczpfyy.css}" href="static/css/sczpfyy.css" rel="stylesheet" />
		<style>
			header .mui-pull-right {
				z-index: 99 !important;
			}
			
			.header-right-wz {
				margin-left: 5px;
			}
		</style>
		<link th:href="@{/static/css/xpwyfyy.css}" href="static/css/xpwyfyy.css" rel="stylesheet" />
		<link th:href="@{/static/css/wallfyy.css}" href="static/css/wallfyy.css" rel="stylesheet" />
		<style>
			.fyy-statistics.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				padding: 0 10px;
			}
			
			.fyy-statistics.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				text-align: inherit;
				margin: 0;
				display: inherit;
				line-height: inherit;
				height: auto;
				background: #283464;
				padding: 15px 0;
				border-radius: 4px;
				border: #375cf5 solid 1px;
			}
			
			.fyy-statistics.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
				padding: 0;
				font-size: 60px
			}
			
			.fyy-wall-top .mui-table-view-cell p {
				color: #ffffff;
				font-size: 24px;
				margin: 20px 0
			}
			
			.mui-bar .mui-content-padded h5 {
				font-size: 24px;
				position: absolute;
				right: 15px;
				top: 50%;
				margin-top: -12px;
				color: #ffffff
			}
			
			.fyy-wall-top .mui-col-xs-3 {
				width: 25%
			}
			
			.fyy-slider .mui-table-view-cell,
			.fyy-slider .mui-table-view-cell .mui-content-padded,
			.fyy-slider .mui-table-view {
				padding: 10px
			}
			
			.mui-segmented-control.mui-scroll-wrapper,
			.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
				height: 60px
			}
			
			.mui-segmented-control .fyy-control-item {
				line-height: 60px;
			}
			
			.mui-bar {
				height: 100px;
			}
			
			.mui-bar .mui-title {
				font-size: 60px;
				line-height: 100px;
				font-weight: 600;
				letter-spacing: 10px;
				top: 0;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 120px
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .fyy-control-item {
				font-size: 24px
			}
			
			.mui-table-view .mui-table-view-cell {
				font-size: 18px;
				line-height: 30px;
			}
			
			.mui-table-view-cell p {
				font-size: 18px
			}
			
			.mui-slider-group .mui-col-xs-1 {
				width: 12.5%
			}

			.mui-table-view:before,.mui-table-view:after{
				background:0
			}
			.fyy-facema{
				position: absolute;
				left:0;
				bottom:0;
				width:25%
			}
		</style>
	</head>

	<body>
		<div id="app">
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title"><span th:text="${company.name}"></span>健康公示墙</h1>
				<div class="mui-content-padded">
					<h5 th:text="${now}"></h5>
				</div>
			</header>
			<div class="mui-content fyy-wall">
				<div class="fyy-wall-top">
					<div class="fyy-wall-today">
						<ul class="mui-table-view mui-grid-view mui-grid-9 fyy-statistics">
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
								<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-renyuanjieshao"></span>
									<p>当日已测人数<span style="margin:0 5px">/</span>当日应测人数</p>
									<h1>
                                <span class="colorf6f448" th:text="${checkedPersonNum}">0</span>
                                <span style="margin:0 15px">/</span>
                                <span class="color4fc5f7" th:text="${personNum}">0</span>
                            </h1>
								</div>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
								<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-renshu"></span>
									<p>当日已测访客人数</p>
									<h1 class="colorda94f8" th:text="${checkedVisitorNum}">0</h1>
								</div>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
								<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-leijicishu1"></span>
									<p>当日累计检测人次</p>
									<h1 class="colorf8b155" th:text="${totalCheckNum}">0</h1>
								</div>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-2">
								<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-baojing"></span>
									<p>当日异常人数<span style="margin:0 5px">/</span>累计异常人数</p>
									<h1>
                                <span class="colorfe616c" th:text="${dayAbnormalNum}">0</span>
                                <span style="margin:0 15px">/</span>
                                <span class="colorfe616c" th:text="${totalAbnormalNum}">0</span>
                            </h1>
								</div>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
								<div class="mui-media-body" style="margin-bottom:5px">
									<span class="mui-icon iconfont icon-shijian"></span>
									<p>连续无异常天数</p>
									<h1 class="color05c8af" th:text="${normalDays}">0</h1>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<ul class="mui-table-view" style="display:flex;flex-direction:row;flex-wrap:wrap;justify-content: space-between;">
					<li class="mui-table-view-cell mui-media" th:each="item : ${itemList}" style="width:12.5%;">
						<div class="mui-content-padded">
							<div class="mui-media-object" style="width:100%;height:180px;">
								<img
									th:if="${item.faceImage!=null}"
									th:src="${item.faceImage} + '?x-oss-process=image/resize,m_fill,w_200,h_200'"
									style="object-fit:cover;min-height:100%;width:100%;" class="fyy-faceimage"/>
								<img
									th:if="${item.faceImage==null}"
									th:src="@{static/img/wu.jpg}"
									style="object-fit:cover;min-height:100%;width:100%;" class="fyy-faceimage"/>
								<img th:if="${item.healthyCode=='00'}" th:src="@{static/img/jiankangma.jpg}" src="static/img/jiankangma.jpg" class="fyy-facema"/>
							</div>
							<div class="mui-media-body">
								<span th:text="${item.name}"></span>
								<span class="mui-pull-right" th:class="${item.temperature>37.2 ? 'colorfe616c': 'color05c8af'}" th:text="${item.temperature}"></span>
							</div>
							<p th:text="${#dates.format(item.recordTime, 'MM-dd HH:mm')}"></p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>