terry
/
smart_streetlights


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>智慧交通</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            @font-face{
                font-family:"led regular";
                src:url('/fonts/DS-DIGI.TTF');
            }
            .wrapper{
                width:128px;
                height:256px;
                background: #020202;

            }
            .wrap-head{
                width:100%;
                height:26px;
                line-height: 26px;
                color:#fff;
            }
            .wrap-head h2{
                font-size:16px;
                color:#fff;
                 height:26px;
                line-height: 26px;
                text-align:center;
                font-weight: normal;
            }
            .wrap-content{
                width:100%;
                position:relative;
            }
            .temperature-box{
                width:63px;
                height:77px;
                border:1px solid #fff;
                /*background: #f44f21;*/
                color:#fff;
            }
            .temperature-box p{
                font-size:13px;
                margin-left:7px;
                padding-top:5px;
            }
            .temperature-box h2{
                font-size:30px;
                margin-top:10px;
                font-weight: normal;
                text-align:center;
                font-family:"led regular";
            }
            .air-qua{
               width:100%;
               height:70px;
               color:#fff;
                border-top:1px solid #fff;
               /*background: #0cc75f;*/
               position:relative;
            }
            .air-qua p{
                margin-left:6px;
                font-size:13px;
                padding-top:4px;
            }
            .air-qua h2{
                margin-left:8px;
                font-weight:normal;
                color:red;
                font-size:40px;
                font-family:"led regular";
            }
            .air-level{
                position:absolute;
                left:75px;
                width:39px;
                /*top:10px;*/
                bottom:2px;
                text-align: center;
                border:2px solid #fff;
                font-size:10px;
                border-radius:12px;
                padding:1px 3px;
                color:#00e400;
            }
            .humidity{
                position: absolute;
                top:0;
                right:1px;
                /*background: #81b906;*/
            }
            .pm25{
                position: absolute;
                bottom:2px;
                left:0;
                /*background: #03a5f0;*/
            }
            .pm10{
                position: absolute;
                bottom:2px;
                right:1px;
                /*background: #f9b91e;*/
            }

             /*第二个*/
            .wrap-head2{
                width:74%;
                margin:0 auto;
                height:160px;
                color:#0de408;
               
                text-align:center;
            }
            .tips-txt{
                color:#0de408;
                font-size:30px;
                line-height: 46px;
                text-align:center;
                padding-right:0;
            }
            .tips-txt span{
                letter-spacing:15px;
            }
            /*第四个 status4*/
            .speed-box{
                width:40px;
                height:40px;
                margin:0 auto;
                margin-top:15px;
                text-align:center;
                line-height:40px;
                font-size:50px;
               
                font-family:"led regular";
                src:url('/fonts/DS-DIGI.TTF');
            }
            .chaosu .tips-txt{
                color:#e40808 ;
            }
            .chaosu .speed-box{
                color:#e40808 ;
                border-color:#e40808;
                font-family:"led regular";
                src:url('/fonts/DS-DIGI.TTF');
            }
            #status4, #status2, #status3 {
                display: none;
            }
        </style>
    </head>
    <body>
       <div class="wrapper" id="status1" >
         <div class="wrap-head">
            <h2 id="time">09:48</h2>
         </div>
         <div class="wrap-content">
            <div class="air-qua">
                <p>空气质量</p>
                <h2 id="aqi">25</h2>
                <div class="air-level" id="zs"><span>优</span></div>
            </div>
            <div style="position:relative;height:157px;margin-top:3px">
            <div class="temperature-box">
                <p>温度</p>
                <h2 id="wd">25C</h2>
            </div>
            <div class="temperature-box humidity">
                <p>湿度</p>
                <h2 id="sd">25%</h2>
            </div>
            <div class="temperature-box pm25">
                <p>PM2.5</p>
                <h2 id="pm25">28</h2>
            </div>
            <div class="temperature-box pm10">
                <p>PM10</p>
                <h2 id="pm10">28</h2>
            </div>
            </div>
         </div>
       </div>
       <div class="wrapper" id="status2" >
         <div class="wrap-head2">
            <p class="tips-txt"><span>前</span>注<span>方</span>意<span>路</span>安<span>口</span>全</p>
        <div class="speed-box" id="cs2" style="border:0;border-radius:0;height:40px;line-height:40px;">
            
        </div>
         </div>
       </div>
       <div class="wrapper" id="status3" >
         <div class="wrap-head2">
            <p class="tips-txt"><span>前</span>注<span>方</span>意<span>路</span>安<span>口</span>全</p>
        <div class="speed-box" id="cs3" style="color:#ff0808;">
            50
        </div>
         </div>
       </div>
       <div class="wrapper chaosu" id="status4">
         <div class="wrap-head2">
            <p class="tips-txt"><span>速</span>注<span>度</span>意<span>过</span>控<span>快</span>速</p>
            <div class="speed-box" id="cs4">
            </div>
        </div>
         </div>
       </div>
    </body>
    <script src="/js/jquery.min.js"></script>
    <script>
        var flag = 0;
        var speed = 0;
        var csfz = 0;
        function fn(){
            var myDate=new Date;
            var month = myDate.getMonth() + 1 < 10 ? "0" + (myDate.getMonth() + 1) : myDate.getMonth() + 1;
            var date = myDate.getDate() < 10 ? "0" + myDate.getDate():myDate.getDate();
            var h=myDate.getHours() < 10 ? ('0' + myDate.getHours()) : myDate.getHours();
            var m=myDate.getMinutes() < 10 ? ('0' + myDate.getMinutes()) : myDate.getMinutes();
            var s=myDate.getSeconds() < 10 ? ('0' + myDate.getSeconds()) : myDate.getSeconds();
            var newTime = month + '-' + date +' ' + h  + ':' + m + ':' + s;
            document.getElementById('time').innerHTML = newTime;
        }
        fn();
        setInterval(fn,1000);
        function fn3(){
            if (speed == 0) {
                if (flag > 1) { // 0
                    $('#status1').show();
                    $('#status2').hide();
                    $('#status3').hide();
                    $('#status4').hide();
                    flag = 1;  // 0
                } else {
                    $('#status1').hide();
                    $('#status2').hide();
                    $('#status3').show();
                    $('#status4').hide();
                    flag = 3;
                }
            }
        };
        setInterval('fn3()',5000);
        function fn2(){
            $.ajax({
                type : "GET",
                url : "/getdata",
                dataType : "json",
                data : {"code":""},
                success:function(res){
                    $('#aqi').text(res.data.aqi);
                    $('#wd').text(res.data.wd);
                    $('#sd').text(res.data.sd);
                    $('#pm25').text(res.data.pm25);
                    $('#pm10').text(res.data.pm10);
                    $('#zs').text(res.data.zs);
                    $('#status1').show();
                    $('#status2').hide();
                    $('#status3').hide();
                    $('#status4').hide();
                    if(res.data.aqi <=50 && res.data.aqi >0){
                        $('#zs').css('color','#00e400')
                    }else if(res.data.aqi> 50 && res.data.aqi <=100 ){
                        $('#zs').css('color','#ffbb17')
                    }else if(res.data.aqi> 100 && res.data.aqi <=150 ){
                        $('#zs').css('color','#ff7e00')
                    }else if(res.data.aqi> 150 && res.data.aqi <=200 ){
                        $('#zs').css('color','#ff0000')
                    }else if(res.data.aqi> 200 && res.data.aqi <=300 ){
                        $('#zs').css('color','#99004c')
                    }else if(res.data.aqi > 300){
                        $('#zs').css('color','#7e0023')
                    }
                }
            })
        }

        fn2();
         setInterval(fn2,500);
    </script>
</html>