YQ-August
/
yzCctvHelm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!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">
		<script src="https://webapi.amap.com/maps?v=1.4.15&key=3705e0f15b2b36d6902e9ebdf24a93d8&plugin=AMap.Scale"></script>
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/pako.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">
			.amap-info-content{
				padding: 0;
			}
			.amap-info-close{
				right: 10px !important;
				top: 8px;
				color: #fff;
				font-size: 24px;
			}
			.nowShip{
				color: #000;
				width: 220px;
				border-radius: 2px;
				overflow: hidden;
				font-size: 14px;
				background-color: #fff;
				box-shadow: 0 10px 2px rgba(0, 0, 0,0.5);
			}
			.mapTitle {
				padding: 6px 10px;
				font-weight: bold;
				font-size: 15px;
				color: #fff;
				background-color: #0068ff;
			}
			.mapInfo>div{
				display: flex;
				align-items: flex-start;
				color: #474747;
				margin-bottom: 4px;
			}
			.mapInfo>div>div:first-child{
				color:#0068ff;
				width: 50px;
			}
			.mapInfo>div>div:last-child{
				width:calc(100% - 50px);
			}
			.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;
			}
			.ajaxTime{
				position: absolute;
				right: 10px;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak style="height:100vh;overflow: auto;" class="padding-xs">
			<el-row :gutter="10" style="height: 100%;">
				<el-col :xs="24" :span="6">
					<div style="height: calc( 50vh - 10px);" class="Sense margin-bottom-xs padding-sm">
						<div class="flex align-center text-sm text-white" style="position: relative;">
							<img src="../img/icon.png" alt="" style="width: 18px;margin-right: 10px;">
							<span>违规行为报警</span>
							<div class="ajaxTime">{{nowTime}}</div>
						</div>
						<div class="flex flex-wrap" style="height: calc(100% - 20px);">
							<div v-for="(item,index) in cctvWarm" :key="index" class="wramBox ">
								<div>{{item.count}}</div>
								<div>{{item.name}}</div>
							</div>
						</div>
					</div>
					<div style="height: calc( 50vh - 10px);" class=" margin-top-sm Sense padding-sm">
						<div class="flex align-center text-sm text-white">
							<img src="../img/icon.png" alt="" style="width: 18px;margin-right: 10px;">
							<span>起重机报警</span>
						</div>
						<div class="flex flex-wrap" style="height: calc(100% - 20px);">
							<div v-for="(item,index) in craneWarm" :key="index" class="wramBox ">
								<div>{{item.count}}</div>
								<div>{{item.name}}</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :span="12" style="height: 100%;">
					<div id="areaMap" style="width: 100%;height: 100%;"></div>
				</el-col>
				<el-col :xs="24" :span="6">
					<div style="height: calc( 50vh - 10px);" class="Sense margin-bottom-xs padding-sm">
						<div class="flex align-center text-sm text-white">
							<img src="../img/icon.png" alt="" style="width: 18px;margin-right: 10px;">
							<span>电子围栏报警</span>
						</div>
						<div class="flex flex-wrap" style="height: calc(100% - 20px);">
							<div v-for="(item,index) in fenceWarm" :key="index" class="wramBox ">
								<div>{{item.count}}</div>
								<div>{{item.name}}</div>
							</div>
						</div>
					</div>
					<div style="height: calc( 50vh - 10px);" class=" margin-top-sm Sense padding-sm">
						<div class="flex align-center text-sm text-white">
							<img src="../img/icon.png" alt="" style="width: 18px;margin-right: 10px;">
							<span>报警详情</span>
						</div>
						<div class="flex flex-wrap" style="height: calc(100% - 20px);">
							<div v-for="(item,index) in genWarmDetail" :key="index" class="wramBox ">
								<div>{{item.count}}</div>
								<div>{{item.name}}</div>
							</div>
						</div>
						<!-- <div style="height: calc(100% - 20px);font-size: 0.8rem;color: #6d67ff;overflow: auto;">
							<div v-for="(item,index) in 4" :key="index"	class="padding-top-sm">
								<span>{{index+1}}号钢丝绳检测出断丝，请及时处理！</span>
								<span class="text-gray">&nbsp;16:04:4{{index}}</span>
							</div>
						</div> -->
					</div>
				</el-col>
			</el-row>
		</div>

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

</html>