qzyReal
/
face-ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
							<!DOCTYPE html>
<html>
	<head>
		<title>车辆备案-列表</title>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/kj/httpVueLoader.js"></script>
		<script src="../../static/kj/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<style>
			/* 第一行 */
			.sa-wnk {
				background-color: #FFF;
				border: 1px #ddd solid;
				margin-bottom: 14px;
				min-height: 100px;
				cursor: pointer;
				transition: all 0.3s;
				overflow: hidden;
			}

			.sa-wnk:hover {
				box-shadow: 0 0 20px #999;
			}

			.sa-wnk img {
				float: left;
				line-height: 100px;
				margin: 25px 0px 0 20px;
				width: 50px;
				height: 50px;
				vertical-align: middle;
			}

			.sa-wnk .sa-wnk-tv {
				float: left;
				margin-left: 10px;
				max-width: calc(100% - 100px);
			}

			.sa-wnk-title {
				margin-top: 25px;
				font-size: 16px;
			}

			.sa-wnk-value {
				margin-top: 4px;
				font-size: 24px;
				padding-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<el-card>
				<div slot="header">
					<h2>进出记录监控</h2>
				</div>
				<el-row :gutter="14">
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-user.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">今日进出人数</p>
								<p class="sa-wnk-value">{{sta.todayCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-user.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">最近一周进出人数</p>
								<p class="sa-wnk-value">{{sta.weekCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-user.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">最近一个月进出人数</p>
								<p class="sa-wnk-value">{{sta.monthCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-user.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">最近一年进出人数</p>
								<p class="sa-wnk-value">{{sta.yearCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="4" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-user.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">平均每天进出人数</p>
								<p class="sa-wnk-value">{{sta.avg}}</p>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
		<!-- 	<el-card>
				<div slot="header">
					<h2>健康码监控</h2>
				</div>
				<el-row :gutter="14">
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-error.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">今日健康码异常数</p>
								<p class="sa-wnk-value">{{sta.todayHealthErrorCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-error.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">最近一周健康码异常数</p>
								<p class="sa-wnk-value">{{sta.weekHealthErrorCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-error.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">最近一个月健康码异常数</p>
								<p class="sa-wnk-value">{{sta.monthHealthErrorCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="5" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-error.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">最近一年健康码异常数</p>
								<p class="sa-wnk-value">{{sta.yearHealthErrorCount}}</p>
							</div>
						</div>
					</el-col>
					<el-col :lg="4" :sm="8" :xs="24">
						<div class="sa-wnk">
							<img src="../../static/icon/icon-error.png">
							<div class="sa-wnk-tv">
								<p class="sa-wnk-title">平均每天健康码异常数</p>
								<p class="sa-wnk-value">{{sta.avgError}}</p>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card> -->
		</div>
		<script>
			var app = new Vue({

				el: '.vue-box',
				data: {
					timmer:null,
					sta: {
						todayCount: 0,
						todayHealthErrorCount: 0,
						weekCount: 0,
						weekHealthErrorCount: 0,
						monthCount: 0,
						monthHealthErrorCount: 0,
						yearCount: 0,
						yearHealthErrorCount: 0,
						avg: 0,
						avgError: 0
					},
				},
				methods: {
					getMonitor() {
						sa.ajax('/monitor/watch', function(res) {
							this.sta = res.data;
						}.bind(this));
					}
				},
				created: function() {
					this.getMonitor();
					this.timmer=setInterval(()=>{
						this.getMonitor()
					},30000)
				},
				onbeforeunload() {
					clearInterval(this.timmer)
				}
			})
		</script>
	</body>
</html>