<template>
	<div class="home">
		<el-container>
			<el-header>
				<div class="home_content">
					<div>
						<p class="home_title">欢迎登录，{{$store.state.user.name}}&nbsp;!</p>
						<p class="home_data">系统已经安全运行<span>&nbsp;{{homeData.daysOfOperation}}&nbsp;</span>天</p>
					</div>
				</div>
			</el-header>
			<el-main>
				<div class="home_main_box1">
					<div class="home_m_b_f">
						<div class="home_m_b_f_t">人像库数量</div>
						<div class="home_m_b_f_b">{{homeData.libNumber}}</div>
					</div>
				</div>
				<div class="home_main_box2">
					<div class="home_m_b_f">
						<div class="home_m_b_f_t">人脸数量</div>
						<div class="home_m_b_f_b">{{homeData.faceNumber}}</div>
					</div>
				</div>
				<div class="home_main_box3">
					<div class="home_m_b_f">
						<div class="home_m_b_f_t">布控任务数</div>
						<div class="home_m_b_f_b">{{homeData.taskNumber}}</div>
					</div>
				</div>
				<div class="home_main_box4">
					<div class="home_m_b_f">
						<div class="home_m_b_f_t">预警数量</div>
						<div class="home_m_b_f_b">{{homeData.warnNumber}}</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				sysInfo: {
					osName: '',
					osVersion: '',
					osArch: '',
					processors: 0,
					totalPhysical: 0,
					freePhysical: 0,
					memoryRate: 0,
					userLanguage: '',
					jvmName: '',
					javaVersion: '',
					javaHome: '',
					userDir: '',
					javaTotalMemory: 0,
					javaFreeMemory: 0,
					javaMaxMemory: 0,
					userName: '',
					systemCpuLoad: 0,
					userTimezone: ''
				},
				homeData: {}
			}
		},
		created() {
			this.getSysInfo()
			this.data()
		},
		methods: {
			getSysInfo() {
				this.$http.get('/sys/info').then(({
					data: res
				}) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg)
					}
					this.sysInfo = res.data
				}).catch(() => {})
			},
			data() {
				this.$http.get('/index/show')
					.then(res => {
						if (res.data.code == 0) {
							this.homeData = res.data.data
						}

					})
					.catch(err => {
						console.log(err);

					})
			}
		},
		mounted() {

		}
	}
</script>
<style scoped>
	.el-header {
		width: 1632px;
		color: #fff;
		margin-bottom: 20px;
		background: url(~@/assets/img/home_bgc0.png) no-repeat;
	}

	.home_content {
		width: 700px;
		height: 180px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 174px;
		margin-top: 110px;
	}

	.home_content div {
		margin-left: 28px;
	}

	.home_content .home_title {
		font-size: 24px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
	}

	.home_content .home_data {
		font-size: 24px;
		font-family: Bahnschrift;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
	}

	.home_content .home_data span {
		width: 63px;
		height: 35px;
		font-size: 48px;
		font-family: Bahnschrift;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
	}

	.el-main {
		width: 1632px;
		height: 100%;
		padding: 0px;
		display: flex;
		justify-content: space-between
	}

	.el-main .home_main_box1,
	.home_main_box2,
	.home_main_box3,
	.home_main_box4 {
		width: 390px;
		height: 410px;
	}

	.el-main .home_main_box1 {
		background-image: url("../../../assets/img/123_06.png")
	}

	.el-main .home_main_box2 {
		background-image: url("../../../assets/img/123_08.png")
	}

	.el-main .home_main_box3 {
		background-image: url("../../../assets/img/123_10.png")
	}

	.el-main .home_main_box4 {
		background-image: url("../../../assets/img/123_12.png")
	}

	.el-main .home_m_b_f .home_m_b_f_t {
		font-size: 24px;
		font-family: Source Han Sans CN;
		color: rgba(255, 255, 255, 1);
		margin-left: 58px;
		padding-top: 50px;
		opacity: 1;
	}

	.el-main .home_m_b_f .home_m_b_f_b {
		font-size: 60px;
		font-family: Bahnschrift;
		margin-left: 58px;
		padding-top: 10px
	}

	.el-main .home_main_box1 .home_m_b_f .home_m_b_f_b {
		color: rgba(255, 220, 82, 1);
	}

	.el-main .home_main_box2 .home_m_b_f .home_m_b_f_b {
		color: rgba(72, 255, 180, 1);
	}

	.el-main .home_main_box3 .home_m_b_f .home_m_b_f_b {
		color: rgba(79, 187, 255, 1);
	}

	.el-main .home_main_box4 .home_m_b_f .home_m_b_f_b {
		color: rgba(255, 78, 82, 1);
	}
</style>
