YQ-August
/
yzCctvHelm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>证书统计</title>
		<link rel="stylesheet" href="../css/index.css">
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<link rel="stylesheet" href="../css/tablema.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/echarts.min.js"></script>
		<script type="text/javascript">
			document.write('<script src="../assets/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
			document.write('<script src="../assets/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
		</script>
		<script>
			checkLogin();
		</script>
		<style type="text/css">
			.wramBox{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 50%;
				font-size: 0.8rem;
			}
			.wramBox>div:first-child{
				font-size: 2.8rem;
				/* color: #6d67ff; */
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak class="padding-xs">
			<el-row :gutter="10">
				<el-col :xs="24" :span="6">
					<div class="Sense margin-bottom-xs padding-sm">
						<div class="text-center text-df text-bold text-white">证书一览</div>
						<div class="flex flex-wrap" style="height: calc(50vh - 50px);">
							<div v-for="(item,index) in statisLi" :key="index" class="wramBox">
								<div :style="{ color: item.colr }">{{ item.value }}</div>
								<div>{{ item.name }}</div>
							</div>
						</div>
					</div>
					<div class="Sense padding-sm">
						<div class="text-center text-df text-bold text-white">证书列表</div>
						<div style="height: calc(50vh - 50px);overflow-y: auto;" class="padding-tb-sm text-sm">
							<p v-for="(wani,wanind) in warmList" :key="wanind" class="margin-bottom">
								{{wanind+1}}、证书
								<span class="text-blue">{{"《"+wani.certificateName+"》"}}</span>
								{{wani.nextTime<0?"已于":"将于"}}
								<span class="text-blue">{{wani.certificateEffectiveDate}}</span>
								过期,请留意及时更新！</p>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :span="12">
					<div class="Sense padding-sm">
						<div class="text-center text-df text-bold text-white margin-bottom-sm">报警详情</div>
						<el-table class="elTable"
							:data="tableData"  
							border 
							height="calc(100vh - 64px)"
							:header-cell-style="{ background: '#082041', color: '#ddd', padding: '2px 0'}">
							<el-table-column align="center" prop="certificateName" label="证书名称">
								<template slot-scope="scope">
									《{{ scope.row.certificateName }}》
								</template>
							</el-table-column>
							<el-table-column align="center" prop="certificateIssueDate" label="签发日期"></el-table-column>
							<el-table-column align="center" label="证书有效期">
								<template slot-scope="scope">
									{{(isNaN(scope.row.certificateEffectiveDate) && !isNaN(Date.parse(scope.row.certificateEffectiveDate)))?scope.row.certificateEffectiveDate:"长期"}}
								</template>
							</el-table-column>
							<el-table-column align="center" sortable prop="nextTime" label="到期剩余天数">
								<template slot-scope="scope">
									<span v-if="scope.row.nextTime == '长期'">长期</span>
									<span v-else :class="scope.row.nextTime<0?'text-red':''">{{scope.row.nextTime}}</span>
								</template>
							</el-table-column>
						</el-table>
						
					</div>
				</el-col>
				<el-col :xs="24" :span="6">
					<div class="Sense margin-bottom-xs padding-sm">
						<div class="text-center text-df text-bold text-white">有效期分类</div>
						<div id="periodChart" style="height: calc(50vh - 50px);width: 100%;"></div>
					</div>
					<div class="Sense padding-sm">
						<div class="text-center text-df text-bold text-white">证书分类</div>
						<div id="typeChart" style="height: calc(50vh - 50px);width: 100%;"></div>
					</div>
				</el-col>
			</el-row>
		</div>

		<script type="text/javascript">
			document.write('<script src="../assets/fileApi.js?id=' + (new Date().getTime()) + '" type="text/javascript" charset="utf-8"><\/script>');
			document.write('<script src="../assets/certificate.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
		</script>
	</body>

</html>