<!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>
|
<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>
|
</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="width:400px;margin:10px auto;">
|
<span style="font-size:32px;font-family:SimHei;font-weight:bold;text-align-all:center;">首都师范大学第二附属中学</span>
|
</div>
|
</div>
|
|
<div style="background:#e6e6fa;height:60px;float:left; width:10%"><img onclick="update()" src="static/cl3.jpg" style="margin-top:4px;"></div>
|
</div>
|
|
<div style="display:flex;">
|
|
</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;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>
|
|
<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>
|
|
<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">
|
<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>
|
|
<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>
|
</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){
|
|
},"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()", 10000 );
|
setInterval("nowPeople()", 10000);
|
});
|
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>
|
</div>
|
</body>
|
</html>
|
