| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | | <script src="/static/js/easyui/jquery.min.js" type="text/javascript"></script> |
| | | <script src="/static/js/easyui/jquery.easyui.min.js" type="text/javascript"></script> |
| | | <link href="/static/js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> |
| | | <link href="/static/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> |
| | | <script src="/static/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> |
| | | <title>首师大二附中</title> |
| | | <script src="static/jquery-1.9.1.min.js" type="text/javascript"></script> |
| | | <link href="static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> |
| | | <script src="static/bootstrap-3.3.7/js/bootstrap.min.js" ></script> |
| | | <script src="static/js/easyui/jquery.easyui.min.js" type="text/javascript"></script> |
| | | <link href="static/js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> |
| | | <link href="static/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> |
| | | <script src="static/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> |
| | | <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> |
| | | <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> |
| | | <style type="text/css"> |
| | | body{ |
| | | overflow-x:hidden; |
| | | overflow-y:hidden; |
| | | } |
| | | </style> |
| | | <link href="static/count.css" rel="stylesheet" /> |
| | | <script type="text/javascript" src="static/echarts.js"></script> |
| | | </head> |
| | | <body style="margin:0" oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()> |
| | | |
| | | <div > |
| | | <div style="background:#FFFFFF;background-size:100%;height:60px; width:100%;border:0px"> |
| | | <div style="background:#e6e6fa;height:60px;float:left; width:90%"> |
| | | <div style="margin:10px 650px"> |
| | | <span style="font-size:32px;font-family:SimHei;font-weight:bold;text-align-all:center;">首都师范大学第二附属中学</span> |
| | | </div> |
| | | <body style="margin:0;" oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy="document.selection.empty()" onselect="document.selection.empty()"> |
| | | <div style="width:100%;height:100%;"> |
| | | <div class="topMenu"> |
| | | <div class="logo center"> |
| | | <span class="topFont">首都师范大学第二附属中学</span> |
| | | </div> |
| | | |
| | | <div style="background:#e6e6fa;height:60px;float:left; width:10%"><img onclick="update()" src="static/cl3.jpg" style="margin:0px 0px"></div> |
| | | <div class="topSet"> |
| | | <img onclick="update()" src="static/cl3.jpg" /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="background:#F0F4F7;height:990px; width:100%;border:0"> |
| | | <div style="background:#F0F4F7;height:100%;float:left; width:141px"></div> |
| | | <div style="background:#F0F4F7;height:100%;float:left; width:391px"> |
| | | <div style="background:#F0F4F7;height:70px;float:left; width:391px"></div> |
| | | <div onclick="changeCountType(1)" style="background:url('/static/01.jpg');height:160px;float:left; width:391px"> |
| | | <div style="margin:60px -10px;text-align:center;float:left;height:160px; width:190px"> |
| | | <div style="text-align:center;float:left;height:60px; width:190px;"> |
| | | <span style="font-size:22px;color:white">进校人数</span><br/> |
| | | <span style="font-size:11px;color:white">Enter the school</span> |
| | | </div> |
| | | <div class="content"> |
| | | <div class="leftDiv"> |
| | | <div onclick="changeCountType(1)" class="imgDiv inImg"> |
| | | <div class="imgText"> |
| | | <span class="cn">进校人数</span><br/> |
| | | <span class="en">Enter the school</span> |
| | | </div> |
| | | |
| | | <div style="margin:-250px 150px;text-align:left;float:left;height:160px; width:200px"> |
| | | <span><font style="font-size:70px;color:white" id="dat_in">0</font> |
| | | <font style="font-size:20px;color:white"> 人</font> |
| | | <div class="countDiv"> |
| | | <span> |
| | | <font class="countFont" id="dat_in">0</font> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="background:#F0F4F7;height:45px;float:left; width:391px"></div> |
| | | |
| | | <div onclick="changeCountType(-1)"style="background:url('/static/02.jpg');height:160px;float:left; width:391px"> |
| | | <div style="margin:60px -10px;text-align:center;float:left;height:160px; width:190px"> |
| | | <div style="text-align:center;margin:80 auto;float:left;height:160px; width:190px"> |
| | | <span style="font-size:22px;color:white">出校人数</span><br/> |
| | | <span style="font-size:11px;color:white">left the school</span> |
| | | </div> |
| | | <div onclick="changeCountType(-1)" class="imgDiv outImg"> |
| | | <div class="imgText"> |
| | | <span class="cn">出校人数</span><br/> |
| | | <span class="en">Left the school</span> |
| | | </div> |
| | | <div style="margin:-250px 150px;text-align:left;float:left;height:160px; width:200px"> |
| | | <span><font style="font-size:70px;color:white" id="dat_out">0</font><font |
| | | style="font-size:20px;color:white"> 人</font></span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="background:#F0F4F7;height:45px;float:left; width:391px"></div> |
| | | <div onclick="changeCountType(0)" style="background:url('/static/03.jpg');height:160px;float:left; width:391px"> |
| | | <div style="margin:60px -10px;text-align:center;float:left;height:160px; width:190px"> |
| | | <div style="text-align:center;margin:80 auto;float:left;height:117px; width:190px"> |
| | | <span style="font-size:22px;color:white">校内人数</span><br/> |
| | | <span style="font-size:11px;color:white">The number</span> |
| | | </div> |
| | | </div> |
| | | <div style="margin:-250px 150px;text-align:left;float:left;height:137px; width:200px"> |
| | | <span><font style="font-size:70px;color:white" id="dat_no">0</font><font |
| | | style="font-size:20px;color:white"> 人</font></span> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div style="background:#F0F4F7;height:45px;float:left; width:391px"> |
| | | </div> |
| | | |
| | | <div style="background:#3C3C3C;height:100px;float:left; width:50px;display:inline" onclick="setdate()"> |
| | | <div style="margin:25px 10px;background-image: url('static/zz.png');backround-repeat: no-repeat;background-position: center top;;text-align:center;float:left;width: 30px;height: 30px"> |
| | | |
| | | </div> |
| | | </div> |
| | | <div style="background:#F0F4F7;height:100px;float:left; width:17px;display:inline"> |
| | | |
| | | </div> |
| | | <div style="background:#F0F4F7;height:100px;float:left; width:153px;display:inline"> |
| | | <div style=" background:url('/static/03.jpg');;text-align:center;float:left;height:100px; width:153px"> |
| | | <div style="margin:30px auto;text-align:left;float:left;height:137px; width:200px"> |
| | | <div class="countDiv"> |
| | | <span> |
| | | <font style="font-size:14px;color:white">当前进校</font> |
| | | <font style="font-size:28px;color:white" id="inNow">0</font> |
| | | <font style="font-size:14px;color:white"> 人</font></span> |
| | | <font class="countFont" id="dat_out">0</font> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div onclick="changeCountType(0)" class="imgDiv allImg"> |
| | | <div class="imgText"> |
| | | <span class="cn">校内人数</span><br/> |
| | | <span class="en">The number</span> |
| | | </div> |
| | | <div class="countDiv"> |
| | | <span> |
| | | <font class="countFont" id="dat_no">0</font> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div class="leftBottom"> |
| | | <div class="reloadDiv" onclick="setdate()"> |
| | | <div class="reloadImg"></div> |
| | | </div> |
| | | <div class="curInDiv"> |
| | | <div class="curInBg"> |
| | | <!--<div style="margin:30px auto;text-align:left;height:137px; width:200px">--> |
| | | <span> |
| | | <font style="font-size:14px;color:white">当前进校</font> |
| | | <font style="font-size:28px;color:white" id="inNow">0</font> |
| | | </span> |
| | | <!--</div>--> |
| | | </div> |
| | | </div> |
| | | <div class="curInDiv" style="margin-left:10px;"> |
| | | <div class="curOutBg"> |
| | | <!--<div style="margin:30px auto;text-align:left;height:137px; width:200px">--> |
| | | <span> |
| | | <font style="font-size:14px;color:white">当前出校</font> |
| | | <font style="font-size:28px;color:white" id="outNow">0</font> |
| | | </span> |
| | | <!--</div>--> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="background:#F0F4F7;height:100px;float:left; width:17px;display:inline"></div> |
| | | <div style="background:#F0F4F7;height:100px;float:left; width:153px;display:inline"> |
| | | <div style=" background:url('/static/02.jpg');;text-align:center;float:left;height:100px; width:153px"> |
| | | <div style="margin:30px auto;text-align:left;float:left;height:137px; width:153px"> |
| | | <span > |
| | | <font style="font-size:14px;color:white">当前出校</font> |
| | | <font style="font-size:28px;color:white" id="outNow">0</font> |
| | | <font style="font-size:14px;color:white">人</font></span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <span style="font-size:20px;font-family:SimHei;text-align-all:center;" id="start_time"></span> |
| | | </div> |
| | | |
| | | <div style="background:#F0F4F7;height:100%;float:left; width:86px"> |
| | | </div> |
| | | <div style="background:#F0F4F7;height:100%;float:left; width:1201px"> |
| | | <div style="background:#F0F4F7;height:70px;float:right; width:1200px;text-align: right"> |
| | | <span style="font-size:28px;font-family:SimHei;text-align-all:center;" id="date_time">2018年11月1日 12:11 星期四</span> |
| | | </div> |
| | | <div style="background:white;height:800px;float:left; width:1200px"> |
| | | <div style="height: 20px;margin:50 90 auto;font-size:25;strong">校内人数统计表</div> |
| | | <div id="container" style="height: 80%;margin:50 auto;"></div> |
| | | <script type="text/javascript" src="/static/echarts.js"></script> |
| | | |
| | | <script type="text/javascript"> |
| | | |
| | | var dom = document.getElementById("container"); |
| | | var myChart = echarts.init(dom); |
| | | var option = { |
| | | title: { |
| | | text: '', |
| | | left: 90, |
| | | top: -10 |
| | | |
| | | }, |
| | | |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18;00', '20:00', '22:00', '24:00'], |
| | | name: "时间", |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: "人数", |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | nameLocation: "end" |
| | | }, |
| | | series: [{ |
| | | data: [0, 0, 0, 0, 0, 0, 0, 0, 0], |
| | | type: 'line', |
| | | smooth: true, |
| | | label: { |
| | | normal: { |
| | | show: true, |
| | | position: 'top' |
| | | } |
| | | }, |
| | | }] |
| | | }; |
| | | if (option && typeof option === "object") { |
| | | myChart.setOption(option, true); |
| | | } |
| | | </script> |
| | | |
| | | <div class="rightDiv"> |
| | | <div class="calendarDiv"><span id="date_time">2018年11月1日 12:11 星期四</span></div> |
| | | <div class="chartDiv"> |
| | | <div class="header">校内人数统计表</div> |
| | | <div id="container" style="height: 90%;"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <input type="hidden" id="pw1"> |
| | | <!--<script src='/static/jquery.js'></script>--> |
| | | <!--<script type='text/javascript' src='/static/jquery-1.7.2.min.js'></script>--> |
| | | <script type="text/javascript"> |
| | | var dateTime = new Date(); |
| | | Date.prototype.Format = function (fmt) { //author: meizz |
| | | var o = { |
| | | "M+": this.getMonth() + 1, //月份 |
| | | "d+": this.getDate(), //日 |
| | | "h+": this.getHours(), //小时 |
| | | "m+": this.getMinutes(), //分 |
| | | "s+": this.getSeconds(), //秒 |
| | | "q+": Math.floor((this.getMonth() + 3) / 3), //季度 |
| | | "S": this.getMilliseconds() //毫秒 |
| | | }; |
| | | if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); |
| | | for (var k in o) |
| | | if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); |
| | | return fmt; |
| | | } |
| | | function changeCountType(num) { |
| | | $.post("/api-count/changeCountType",{countType:num}, |
| | | function(data){ |
| | | <!--<div class="topMenu">--> |
| | | <!--<div style="background:#e6e6fa;height:60px;float:left; width:90%">--> |
| | | <!--<div style="width:400px;margin:10px auto;">--> |
| | | <!--<span style="font-size:32px;font-family:SimHei;font-weight:bold;text-align-all:center;">首都师范大学第二附属中学</span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | |
| | | },"json"); |
| | | startRequest(); |
| | | } |
| | | function setdate() { |
| | | $.messager.confirm('消息','确定统计此时之后的进出入人数吗?',function(r){ |
| | | if (r){ |
| | | dateTime = new Date(); |
| | | reCountNowPeople(); |
| | | } |
| | | <!--<div style="background:#e6e6fa;height:60px;float:left; width:10%"><img onclick="update()" src="static/cl3.jpg" style="margin-top:4px;"></div>--> |
| | | <!--</div>--> |
| | | |
| | | }).panel('move',{ left:800, top:800}); |
| | | } |
| | | function nowPeople(){ |
| | | $.post("/api-count/nowPeople",{initialTime:dateTime.Format("yyyy-MM-dd hh:mm")}, |
| | | function(data){ |
| | | document.getElementById("inNow").innerHTML= data.inNow; |
| | | document.getElementById("outNow").innerHTML= data.outNow; |
| | | },"json"); |
| | | <!--<div style="background:#F0F4F7;height:990px; width:100%;border:0">--> |
| | | <!--<div style="background:#F0F4F7;height:100%;float:left; width:391px;margin-left:20px;margin-right:20px;">--> |
| | | <!--<div style="background:#F0F4F7;height:70px;float:left; width:391px"></div>--> |
| | | <!--<div onclick="changeCountType(1)" style="background:url('/static/01.jpg');height:160px;float:left; width:391px">--> |
| | | <!--<div style="margin:60px -10px;text-align:center;float:left;height:160px; width:190px">--> |
| | | <!--<div style="text-align:center;float:left;height:60px; width:190px;">--> |
| | | <!--<span style="font-size:22px;color:white">进校人数</span><br/>--> |
| | | <!--<span style="font-size:11px;color:white">Enter the school</span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | |
| | | } |
| | | <!--<div style="margin:-250px 150px;text-align:left;float:left;height:160px; width:200px">--> |
| | | <!--<span><font style="font-size:70px;color:white" id="dat_in">0</font>--> |
| | | <!--<font style="font-size:20px;color:white"> 人</font>--> |
| | | <!--</span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | |
| | | //重新计算进出人数 |
| | | function reCountNowPeople(){ |
| | | $.post("/api-count/nowPeople",{initialTime:'111'}, |
| | | function(data){ |
| | | document.getElementById("inNow").innerHTML= data.inNow; |
| | | document.getElementById("outNow").innerHTML= data.outNow; |
| | | },"json"); |
| | | <!--<div style="background:#F0F4F7;height:45px;float:left; width:391px"></div>--> |
| | | |
| | | } |
| | | <!--<div onclick="changeCountType(-1)"style="background:url('/static/02.jpg');height:160px;float:left; width:391px">--> |
| | | <!--<div style="margin:60px -10px;text-align:center;float:left;height:160px; width:190px">--> |
| | | <!--<div style="text-align:center;margin:80 auto;float:left;height:160px; width:190px">--> |
| | | <!--<span style="font-size:22px;color:white">出校人数</span><br/>--> |
| | | <!--<span style="font-size:11px;color:white">left the school</span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--<div style="margin:-250px 150px;text-align:left;float:left;height:160px; width:200px">--> |
| | | <!--<span><font style="font-size:70px;color:white" id="dat_out">0</font><font--> |
| | | <!--style="font-size:20px;color:white"> 人</font></span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | |
| | | $(function () { |
| | | startRequest(); |
| | | setInterval("startRequest()", 5000 ); |
| | | setInterval("nowPeople()", 5000); |
| | | }); |
| | | function update() { |
| | | $.messager.confirm('消息','确定进行基础设置吗?',function(r){ |
| | | if (r){ |
| | | window.location.href="/static/update.html"; |
| | | } |
| | | <!--<div style="background:#F0F4F7;height:45px;float:left; width:391px"></div>--> |
| | | <!--<div onclick="changeCountType(0)" style="background:url('/static/03.jpg');height:160px;float:left; width:391px">--> |
| | | <!--<div style="margin:60px -10px;text-align:center;float:left;height:160px; width:190px">--> |
| | | <!--<div style="text-align:center;margin:80 auto;float:left;height:117px; width:190px">--> |
| | | <!--<span style="font-size:22px;color:white">校内人数</span><br/>--> |
| | | <!--<span style="font-size:11px;color:white">The number</span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--<div style="margin:-250px 150px;text-align:left;float:left;height:137px; width:200px">--> |
| | | <!--<span><font style="font-size:70px;color:white" id="dat_no">0</font><font--> |
| | | <!--style="font-size:20px;color:white"> 人</font></span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | |
| | | }).panel('move',{ left:800, top:800}); |
| | | } |
| | | |
| | | function startRequest() { |
| | | $.ajax({ |
| | | url: "/api-count/count?random=" + Math.random(), |
| | | type: 'GET', |
| | | dataType: 'json', |
| | | success: function (arg) { |
| | | console.log(arg); |
| | | document.getElementById("dat_in").innerHTML = arg.dat_in; |
| | | document.getElementById("dat_out").innerHTML = arg.dat_out; |
| | | document.getElementById("dat_no").innerHTML = arg.dat_no; |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: arg.time_set, |
| | | name: "时间", |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: arg.countType, |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | nameLocation: "end" |
| | | }, |
| | | series: [{ |
| | | //data: [200, 700, 600, 800, 1000,1200,1400,1600,2000], |
| | | data: arg.dat_all, |
| | | type: 'line', |
| | | smooth: true, |
| | | label: { |
| | | normal: { |
| | | show: true, |
| | | position: 'top' |
| | | } |
| | | }, |
| | | }] |
| | | }; |
| | | <!--<div style="background:#F0F4F7;height:45px;float:left; width:391px">--> |
| | | <!--</div>--> |
| | | |
| | | if (option && typeof option === "object") { |
| | | myChart.setOption(option, true); |
| | | } |
| | | <!--<div style="background:#3C3C3C;height:100px;float:left; width:50px;display:inline" onclick="setdate()">--> |
| | | <!--<div style="margin:25px 10px;background-image: url('static/zz.png');backround-repeat: no-repeat;background-position: center top;;text-align:center;float:left;width: 30px;height: 30px">--> |
| | | |
| | | } |
| | | }); |
| | | } |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--<div style="background:#F0F4F7;height:100px;float:left; width:17px;display:inline">--> |
| | | |
| | | function time() { |
| | | var today = new Date(); |
| | | var day; |
| | | var date_getHours = today.getHours() |
| | | var date_getMinutes = today.getMinutes() |
| | | var date_getSeconds = today.getSeconds() |
| | | var d = today.getDay(); |
| | | if (d == 0) { |
| | | day = "日"; |
| | | } |
| | | else if (d == 1) { |
| | | day = "一"; |
| | | } |
| | | else if (d == 2) { |
| | | day = "二"; |
| | | } |
| | | else if (d == 3) { |
| | | day = "三"; |
| | | } |
| | | else if (d == 4) { |
| | | day = "四"; |
| | | } |
| | | else if (d == 5) { |
| | | day = "五"; |
| | | } |
| | | else if (d == 6) { |
| | | day = "六"; |
| | | } |
| | | document.getElementById("date_time").innerHTML = (today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日 " + (date_getHours > 9 ? date_getHours : "0" + date_getHours) + ":" + (date_getMinutes > 9 ? date_getMinutes : "0" + date_getMinutes) + ":" + (date_getSeconds > 9 ? date_getSeconds : "0" + date_getSeconds) + " " + " 星期" + day); |
| | | } |
| | | <!--</div>--> |
| | | <!--<div style="background:#F0F4F7;height:100px;float:left; width:153px;display:inline">--> |
| | | <!--<div style=" background:url('/static/03.jpg');;text-align:center;float:left;height:100px; width:153px">--> |
| | | <!--<div style="margin:30px auto;text-align:left;float:left;height:137px; width:200px">--> |
| | | <!--<span>--> |
| | | <!--<font style="font-size:14px;color:white">当前进校</font>--> |
| | | <!--<font style="font-size:28px;color:white" id="inNow">0</font>--> |
| | | <!--<font style="font-size:14px;color:white"> 人</font></span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | |
| | | var myTime = setInterval("time()", 1000); |
| | | </script> |
| | | </div> |
| | | <!--<div style="background:#F0F4F7;height:100px;float:left; width:17px;display:inline"></div>--> |
| | | <!--<div style="background:#F0F4F7;height:100px;float:left; width:153px;display:inline">--> |
| | | <!--<div style=" background:url('/static/02.jpg');;text-align:center;float:left;height:100px; width:153px">--> |
| | | <!--<div style="margin:30px auto;text-align:left;float:left;height:137px; width:153px">--> |
| | | <!--<span >--> |
| | | <!--<font style="font-size:14px;color:white">当前出校</font>--> |
| | | <!--<font style="font-size:28px;color:white" id="outNow">0</font>--> |
| | | <!--<font style="font-size:14px;color:white">人</font></span>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--<span style="font-size:20px;font-family:SimHei;text-align-all:center;" id="start_time"></span>--> |
| | | <!--</div>--> |
| | | <!--<div style="background:#F0F4F7;height:100%;float:left; width:1201px">--> |
| | | <!--<div style="background:#F0F4F7;height:70px;float:right; width:1200px;text-align: right">--> |
| | | <!--<span style="font-size:28px;font-family:SimHei;text-align-all:center;" id="date_time">2018年11月1日 12:11 星期四</span>--> |
| | | <!--</div>--> |
| | | <!--<div style="background:white;height:800px;float:left; width:1200px">--> |
| | | <!--<div style="height: 20px;margin:50 90 auto;font-size:25;strong">校内人数统计表</div>--> |
| | | <!--<div id="container" style="height: 80%;margin:50 auto;"></div>--> |
| | | <!--<script type="text/javascript" src="/static/echarts.js"></script>--> |
| | | |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <!--</div>--> |
| | | <input type="hidden" id="pw1" /> |
| | | </body> |
| | | <script type="text/javascript"> |
| | | var dom = document.getElementById("container"); |
| | | var myChart = echarts.init(dom); |
| | | var option = { |
| | | title: { |
| | | text: '', |
| | | left: 90, |
| | | top: -10 |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18;00', '20:00', '22:00', '24:00'], |
| | | name: "时间", |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: "人数", |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | nameLocation: "end" |
| | | }, |
| | | series: [{ |
| | | data: [0, 0, 0, 0, 0, 0, 0, 0, 0], |
| | | type: 'line', |
| | | smooth: true, |
| | | label: { |
| | | normal: { |
| | | show: true, |
| | | position: 'top' |
| | | } |
| | | }, |
| | | }] |
| | | }; |
| | | if (option && typeof option === "object") { |
| | | myChart.setOption(option, true); |
| | | } |
| | | </script> |
| | | <script type="text/javascript"> |
| | | var dateTime = new Date(); |
| | | Date.prototype.Format = function (fmt) { //author: meizz |
| | | var o = { |
| | | "M+": this.getMonth() + 1, //月份 |
| | | "d+": this.getDate(), //日 |
| | | "h+": this.getHours(), //小时 |
| | | "m+": this.getMinutes(), //分 |
| | | "s+": this.getSeconds(), //秒 |
| | | "q+": Math.floor((this.getMonth() + 3) / 3), //季度 |
| | | "S": this.getMilliseconds() //毫秒 |
| | | }; |
| | | if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); |
| | | for (var k in o) |
| | | if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); |
| | | return fmt; |
| | | } |
| | | function changeCountType(num) { |
| | | $.post("/api-count/changeCountType",{countType:num}, |
| | | function(data){ |
| | | |
| | | },"json"); |
| | | startRequest(); |
| | | } |
| | | function setdate() { |
| | | $.messager.confirm('消息','确定统计此时之后的进出入人数吗?',function(r){ |
| | | if (r){ |
| | | dateTime = new Date(); |
| | | reCountNowPeople(); |
| | | } |
| | | |
| | | }).panel('move',{ left:800, top:800}); |
| | | } |
| | | function nowPeople(){ |
| | | $.post("/api-count/nowPeople",{initialTime:dateTime.Format("yyyy-MM-dd hh:mm")}, |
| | | function(data){ |
| | | document.getElementById("inNow").innerHTML= data.inNow; |
| | | document.getElementById("outNow").innerHTML= data.outNow; |
| | | },"json"); |
| | | |
| | | } |
| | | |
| | | //重新计算进出人数 |
| | | function reCountNowPeople(){ |
| | | $.post("/api-count/nowPeople",{initialTime:'111'}, |
| | | function(data){ |
| | | document.getElementById("inNow").innerHTML= data.inNow; |
| | | document.getElementById("outNow").innerHTML= data.outNow; |
| | | },"json"); |
| | | |
| | | } |
| | | |
| | | $(function () { |
| | | startRequest(); |
| | | setInterval("startRequest()", 1000 ); |
| | | setInterval("nowPeople()", 1000); |
| | | }); |
| | | function update() { |
| | | $.messager.confirm('消息','确定进行基础设置吗?',function(r){ |
| | | if (r){ |
| | | window.location.href="/static/update.html"; |
| | | } |
| | | |
| | | }).panel('move',{ left:800, top:800}); |
| | | } |
| | | |
| | | function startRequest() { |
| | | $.ajax({ |
| | | url: "/api-count/count?random=" + Math.random(), |
| | | type: 'GET', |
| | | dataType: 'json', |
| | | success: function (arg) { |
| | | console.log(arg); |
| | | document.getElementById("dat_in").innerHTML = arg.dat_in; |
| | | document.getElementById("dat_out").innerHTML = arg.dat_out; |
| | | document.getElementById("dat_no").innerHTML = arg.dat_no; |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: arg.time_set, |
| | | name: "时间", |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: arg.countType, |
| | | nameTextStyle: {color: 'blue', fontSize: 18}, |
| | | nameLocation: "end" |
| | | }, |
| | | series: [{ |
| | | //data: [200, 700, 600, 800, 1000,1200,1400,1600,2000], |
| | | data: arg.dat_all, |
| | | type: 'line', |
| | | smooth: true, |
| | | label: { |
| | | normal: { |
| | | show: true, |
| | | position: 'top' |
| | | } |
| | | }, |
| | | }] |
| | | }; |
| | | |
| | | if (option && typeof option === "object") { |
| | | myChart.setOption(option, true); |
| | | } |
| | | |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function time() { |
| | | var today = new Date(); |
| | | var day; |
| | | var date_getHours = today.getHours() |
| | | var date_getMinutes = today.getMinutes() |
| | | var date_getSeconds = today.getSeconds() |
| | | var d = today.getDay(); |
| | | if (d == 0) { |
| | | day = "日"; |
| | | } |
| | | else if (d == 1) { |
| | | day = "一"; |
| | | } |
| | | else if (d == 2) { |
| | | day = "二"; |
| | | } |
| | | else if (d == 3) { |
| | | day = "三"; |
| | | } |
| | | else if (d == 4) { |
| | | day = "四"; |
| | | } |
| | | else if (d == 5) { |
| | | day = "五"; |
| | | } |
| | | else if (d == 6) { |
| | | day = "六"; |
| | | } |
| | | document.getElementById("date_time").innerHTML = (today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日 " + (date_getHours > 9 ? date_getHours : "0" + date_getHours) + ":" + (date_getMinutes > 9 ? date_getMinutes : "0" + date_getMinutes) + ":" + (date_getSeconds > 9 ? date_getSeconds : "0" + date_getSeconds) + " " + " 星期" + day); |
| | | } |
| | | |
| | | var myTime = setInterval("time()", 1000); |
| | | </script> |
| | | </html> |
| | | |