161 lines
6.5 KiB
HTML
161 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>WebTools-Web开发者素材</title>
|
|
<link rel="icon" href="../../img/logo.png">
|
|
<link rel="stylesheet" href="css/index.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="content-body">
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<span>水质情况实时监测预警系统</span>
|
|
</div>
|
|
<div class="header-time">
|
|
<span id="time"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="content-con">
|
|
<div class="left-body">
|
|
<div class="left-top public-bg">
|
|
<div class="public-title">重点水质量检测区</div>
|
|
<div class="top-body">
|
|
<div class="top-left">
|
|
<div class="top-left-title">
|
|
<h6>注水量</h6>
|
|
<span><b>1756</b>m3/h</span>
|
|
<img src="image/pictre.png" alt="更多资源：http://www.anydo.wang">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="top-right">
|
|
<div class="top-left-title">
|
|
<h6>泄水量</h6>
|
|
<span><b>3520</b>m3/h</span>
|
|
<img src="image/pictre.png" alt="更多资源：http://www.anydo.wang">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="left-con public-bg">
|
|
<div class="public-title">水质量分布情况</div>
|
|
<div class="title-nav" id="leida"></div>
|
|
</div>
|
|
<div class="left-bottom public-bg">
|
|
<div class="public-title">企业污染排放情况</div>
|
|
<div class="title-nav" id="wuran"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-body">
|
|
<div class="map" id="map"></div>
|
|
</div>
|
|
|
|
<div class="right-body">
|
|
<div class="right-top public-bg">
|
|
<div class="public-title">水质污染TOP5</div>
|
|
<div class="title-nav">
|
|
<div class="top5-ul">
|
|
<ul>
|
|
<li>
|
|
<span>1</span>
|
|
<span>严重</span>
|
|
<span>北京市</span>
|
|
<span>房山区</span>
|
|
<span>重度污染</span>
|
|
<span>15公里</span>
|
|
</li>
|
|
<li>
|
|
<span>2</span>
|
|
<span>严重</span>
|
|
<span>上海市</span>
|
|
<span>闵行区</span>
|
|
<span>重度污染</span>
|
|
<span>10公里</span>
|
|
</li>
|
|
<li>
|
|
<span>3</span>
|
|
<span>严重</span>
|
|
<span>北京市</span>
|
|
<span>朝阳区</span>
|
|
<span>重度污染</span>
|
|
<span>9.3公里</span>
|
|
</li>
|
|
<li>
|
|
<span>4</span>
|
|
<span>中度</span>
|
|
<span>广东省</span>
|
|
<span>广州市</span>
|
|
<span>中度污染</span>
|
|
<span>8.6公里</span>
|
|
</li>
|
|
<li>
|
|
<span>5</span>
|
|
<span>中度</span>
|
|
<span>浙江省</span>
|
|
<span>杭州市</span>
|
|
<span>中度污染</span>
|
|
<span>6.6公里</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-con public-bg">
|
|
<div class="public-title">水质类别占比</div>
|
|
<div class="title-nav" id="huaxing"></div>
|
|
</div>
|
|
<div class="right-bottom public-bg">
|
|
<div class="public-title">主要地区水流量</div>
|
|
<div class="title-nav" id="zhexian"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--更多资源：http://www.anydo.wang -->
|
|
</body>
|
|
</html>
|
|
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/echarts/echarts.min.js"></script>
|
|
<script src="../../js/echarts/china.js"></script>
|
|
<script type="text/javascript" src="js/index.js"></script>
|
|
|
|
<script>
|
|
//顶部时间
|
|
function getTime(){
|
|
var myDate = new Date();
|
|
var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
|
|
var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
|
|
var myToday = myDate.getDate(); //获取当前日(1-31)
|
|
var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
|
|
var myHour = myDate.getHours(); //获取当前小时数(0-23)
|
|
var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
|
|
var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
|
|
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
|
|
var nowTime;
|
|
|
|
nowTime = myYear+'年'+fillZero(myMonth)+'月'+fillZero(myToday)+'日'+' '+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+' '+week[myDay]+' ';
|
|
//console.log(nowTime);
|
|
$('#time').html(nowTime);
|
|
};
|
|
function fillZero(str){
|
|
var realNum;
|
|
if(str<10){
|
|
realNum = '0'+str;
|
|
}else{
|
|
realNum = str;
|
|
}
|
|
return realNum;
|
|
}
|
|
//大屏
|
|
setInterval(getTime,1000);
|
|
</script>
|