代码拉取完成，页面将自动刷新
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap.min.css">
<!--
style="width: 500px;"
style="table-layout: fixed;"
-->
<title>系统v0.01</title>
</head>
<body>
<script src="jquery.slim.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="sql-wasm.js"></script>
<div id="111">当前时间</div>
<script>
function initSql(date, name)
{
initSqlJs({
locateFile: name => 'sql-wasm.wasm'
}).then(SQL => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'db2.db', true);
xhr.responseType = 'arraybuffer';
xhr.onload = e => {
const uInt8Array = new Uint8Array(xhr.response);
const db = new SQL.Database(uInt8Array);
//const contents = db.exec("SELECT * FROM 排班表");
let now = date;
let strDay1 = now.getFullYear() + ((now.getMonth() + 1) < 10 ? "0" + (now.getMonth() + 1) : (now.getMonth() + 1)) + (now.getDate() < 10 ? "0" + now.getDate() : now.getDate());
now.setDate(now.getDate() + 1);
let strDay2 = now.getFullYear() + ((now.getMonth() + 1) < 10 ? "0" + (now.getMonth() + 1) : (now.getMonth() + 1)) + (now.getDate() < 10 ? "0" + now.getDate() : now.getDate());
now.setDate(now.getDate() - 2);
let strDay0 = now.getFullYear() + ((now.getMonth() + 1) < 10 ? "0" + (now.getMonth() + 1) : (now.getMonth() + 1)) + (now.getDate() < 10 ? "0" + now.getDate() : now.getDate());
console.log(strDay0+" "+ strDay1 +" "+ strDay2);
//const day0 = db.exec("select a.ID,a.单位 ,a.职名 ,a.姓名, b.时间 ,b.班次 from 排班表 a,班次时间表 b where a.单位= b.单位 and a.班次=b.班次 and a.日期 = '" + strDay0 +"'");
// contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
// select aa.单位 ,aa.职名 ,aa.姓名 , max(case when aa.日期 = '20240701' then aa.时间 else '' end) 时间0, max(case when aa.日期 = '20240702' then aa.时间 else '' end) 时间1,max(case when aa.日期 = '20240703' then aa.时间 else '' end) 时间2 from (select a.ID,a.单位 ,a.职名 ,a.姓名 ,b.时间,a.日期 from 排班表 a,班次时间表 b where a.单位= b.单位 and a.班次=b.班次 and a.日期 in ('20240701','20240702','20240703')) aa group by aa.单位,aa.职名,aa.姓名;
let whereName = '';
if(name != '')
{
whereName = " where aa.姓名 = '" + name + "'";
}
const data = db.exec("select aa.单位 ,aa.职名 ,aa.姓名 ,max(aa.时间0) 时间0,max(aa.时间1) 时间1,max(aa.时间2) 时间2 from (select a.ID,a.单位 ,a.职名 ,a.姓名 ,b.时间 时间0, '' 时间1, '' 时间2 from 排班表 a,班次时间表 b where a.单位= b.单位 and a.班次=b.班次 and a.日期 = '" + strDay0 + "' union all select a.ID,a.单位 ,a.职名 ,a.姓名 ,'' 时间0, b.时间 时间1, '' 时间2 from 排班表 a,班次时间表 b where a.单位= b.单位 and a.班次=b.班次 and a.日期 = '" + strDay1 + "' union all select a.ID,a.单位 ,a.职名 ,a.姓名 ,'' 时间0, '' 时间1, b.时间 时间2 from 排班表 a,班次时间表 b where a.单位= b.单位 and a.班次=b.班次 and a.日期 = '" + strDay2 + "') aa " + whereName + " group by aa.单位,aa.职名,aa.姓名");
date.setDate(date.getDate() + 1);
if(data.length == 0)
{
document.getElementById('111').innerHTML = now.getFullYear() + "年" + parseInt(now.getMonth() + 1) + "月" + parseInt(now.getDate()) + "日没有查到 " + name + " 排班信息！";
}
else
{
init(data, date);
}
};
xhr.send();
});
}
function init(data, date){
let ymd = [];
console.log(date);
console.log(data);
let now = new Date(date.getFullYear(),date.getMonth(),date.getDate(),0,0,0,0);
ymd[0] = (now.getMonth() + 1) + '月' + now.getDate() + '日';
now.setDate(now.getDate() + 1);
ymd[1] = (now.getMonth() + 1) + '月' + now.getDate() + '日';
var table = document.createElement('table');
table.classList.add('table');
table.classList.add('table-striped');
table.setAttribute("style", "table-layout: fixed;");
// 添加标题行
var thead = table.createTHead();
// 表头第一行
var row = thead.insertRow();
// 第1列
var cell = row.insertCell();
cell.setAttribute("style", "width: 20px;");
// 第2列
cell = row.insertCell();
cell.setAttribute("style", "width: 100px;");
// 第3列
cell = row.insertCell();
cell.setAttribute("style", "width: 120px;");
// 第4列
cell = row.insertCell();
cell.setAttribute("style", "width: 80px;");
// 第5列 日期第一天
cell = row.insertCell();
cell.setAttribute("style", "width: 480px;");
cell.colSpan=24;
cell.textContent = ymd[0];
cell.classList.add('font-weight-bold');
cell.classList.add('text-center');
// 第6列 日期第二天
cell = row.insertCell();
cell.setAttribute("style", "width: 480px;");
cell.colSpan=24;
cell.textContent = ymd[1];
cell.classList.add('font-weight-bold');
cell.classList.add('text-center');
// 第7列 右侧留白
cell = row.insertCell();
cell.setAttribute("style", "width: 10px; padding-left: 0px; padding-right: 0px;");
// 表头第二行
var row1 = thead.insertRow();
// 第1列
cell = row1.insertCell();
cell.textContent = "#";
cell.classList.add('font-weight-bold');
cell.classList.add('text-center');
// 第2列
cell = row1.insertCell();
cell.textContent = "单位";
cell.classList.add('font-weight-bold');
cell.classList.add('text-center');
// 第3列
cell = row1.insertCell();
cell.textContent = "职名";
cell.classList.add('font-weight-bold');
cell.classList.add('text-center');
// 第4列
cell = row1.insertCell();
cell.textContent = "姓名";
cell.classList.add('font-weight-bold');
cell.classList.add('text-center');
// 第5列，第一天
for(var i=0;i<24;i++)
{
cell = row1.insertCell();
cell.textContent = (i<10 ? "0"+i : i );
cell.classList.add('font-weight-bold');
cell.setAttribute("style", "padding-left: 0px;padding-right: 0px;");
cell.classList.add('text-center');
}
// 第6列，第二天
for(var i=0;i<24;i++)
{
cell = row1.insertCell();
cell.textContent = (i<10 ? "0"+i : i );
cell.classList.add('font-weight-bold');
cell.setAttribute("style", "padding-left: 0px;padding-right: 0px;");
cell.classList.add('text-center');
}
// 第7列 右侧留白
cell = row1.insertCell();
// 合并数据
now = new Date();
// 添加数据行
var tbody = table.createTBody();
var queryDate = new Date(date.getFullYear(),date.getMonth(),date.getDate(),0,0,0,0);
var queryDate2 = new Date(date.getFullYear(),date.getMonth(),date.getDate(),0,0,0,0);
queryDate2.setDate(queryDate2.getDate() + 1);
var nowDate = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0,0);
var nowHours = now.getHours();
if(nowDate.getTime() == queryDate.getTime())
{
nowHours = now.getHours();
}
else if(nowDate.getTime() == queryDate2.getTime())
{
nowHours = now.getHours()+24;
}
else if(nowDate.getTime() > queryDate2.getTime())
{
nowHours = 48;
}
else if(nowDate.getTime() < queryDate.getTime())
{
nowHours = -1;
}
// 第一天
for (var i = 0; i < data[0].values.length; i++) {
var newTime = new Map();
if(nowHours >=0 && nowHours < 48)
{
newTime.set(nowHours, 3);
}
if(data[0].values[i][3] != '')
{
var tmp = data[0].values[i][3];
if(tmp.indexOf(',0') != -1)
{
tmp = tmp.substring(tmp.indexOf(',0')+1);
var time = tmp.split(',');
for(var z=0; z<time.length; z++)
{
if(time[z] <= nowHours)
{
newTime.set(parseInt(time[z]),1);
}
else
{
newTime.set(parseInt(time[z]),2);
}
}
}
}
if(data[0].values[i][4] != '')
{
var tmp = data[0].values[i][4];
if(tmp.indexOf(',0') != -1)
{
tmp = tmp.substring(0, tmp.indexOf(',0'));
}
var time = tmp.split(',');
for(var z=0; z<time.length; z++)
{
if(parseInt(time[z]) <= nowHours)
{
newTime.set(parseInt(time[z]),1);
}
else
{
newTime.set(parseInt(time[z]),2);
}
}
var tmp1 = data[0].values[i][4];
if(tmp1.indexOf(',0') != -1)
{
tmp1 = tmp1.substring(tmp1.indexOf(',0')+1);
var time1 = tmp1.split(',');
for(var z=0; z<time1.length; z++)
{
var key = parseInt(time1[z])+24;
if(key <= nowHours)
{
newTime.set(key,1);
}
else
{
newTime.set(key,2);
}
}
}
}
if(data[0].values[i][5] != '')
{
var tmp = data[0].values[i][5];
if(tmp.indexOf(',0') != -1)
{
tmp = tmp.substring(0, tmp.indexOf(',0'));
}
var time = tmp.split(',');
for(var z=0; z<time.length; z++)
{
var key = parseInt(time[z])+24;
if(key <= nowHours)
{
newTime.set(key,1);
}
else
{
newTime.set(key,2);
}
}
}
console.log(newTime);
row = tbody.insertRow();
cell = row.insertCell();
cell.textContent = i+1;
cell.classList.add('text-center');
cell = row.insertCell();
cell.textContent = data[0].values[i][0];
cell.classList.add('text-center');
cell = row.insertCell();
cell.textContent = data[0].values[i][1];
cell.classList.add('text-center');
cell = row.insertCell();
cell.textContent = data[0].values[i][2];
cell.classList.add('text-center');
for(var j=0;j < 48;j++)
{
cell = row.insertCell();
if(newTime.has(j))
{
if(newTime.get(j) == 1)
{
cell.classList.add('bg-danger');
}
else if(newTime.get(j) == 2)
{
cell.classList.add('table-success');
}
else if(newTime.get(j) == 3)
{
cell.classList.add('table-danger');
}
}
}
}
// 将表格添加到文档中
document.body.appendChild(table);
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);
document.body.lastChild.style.visibility = 'hidden';
var showDate = new Date(now.getFullYear(),now.getMonth(),now.getDate(),now.getHours(),0,0,0);
document.body.lastChild.innerHTML=showDate.getTime();
}
function showtime()
{
var year,month,day,hour,minute,second;
var now;
var today = new Date();
var week = today.getDay();//获取星期几
switch(week)
{
case 0 :
{
week = '星期日';
break;
}
case 1 :
{
week = '星期一';
break;
}
case 2 :
{
week = '星期二';
break;
}
case 3 :
{
week = '星期三';
break;
}
case 4 :
{
week = '星期四';
break;
}
case 5 :
{
week = '星期五';
break;
}
case 6 :
{
week = '星期六';
break;
}
}
year = today.getFullYear();
month = today.getMonth()+1;
day = today.getDate();
hour = today.getHours();
minute = today.getMinutes();
second = today.getSeconds();
now = year+'年'+month+'月'+day+'号'+week+'的'+hour+'时'+minute+'分'+second+'秒';
document.getElementById('111').innerHTML = now;
var showDate = new Date(today.getFullYear(),today.getMonth(),today.getDate(),today.getHours(),0,0,0);
if((''+showDate.getTime()) != document.body.lastChild.innerHTML)
{
location.reload();
}
}
console.log(window.location.search.substr(1));
var input = decodeURIComponent(window.location.search.substr(1));
if(input.length==8)
{
var hisDate = window.location.search.substr(1);
hisDate = new Date(parseInt(hisDate.substring(0,4)),parseInt(hisDate.substring(4,6))-1,parseInt(hisDate.substring(6,8)),0,0,0,0);
initSql(hisDate, '');
}
else if(input.indexOf('?') != -1)
{
var hisDate = input.split('?')[0];
var name = input.split('?')[1];
hisDate = new Date(parseInt(hisDate.substring(0,4)),parseInt(hisDate.substring(4,6))-1,parseInt(hisDate.substring(6,8)),0,0,0,0);
initSql(hisDate, name);
}
else
{
//获取当前时间函数
setInterval('showtime()',900);
initSql(new Date(), '');
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手