shuochen
/
LargeScreenVisualization


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水质监测</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</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="">
                            </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="">
                            </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>

</body>
</html>

<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="js/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)+'日'+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //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>