335 lines
11 KiB
Plaintext
335 lines
11 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JZYScreen.aspx.cs" Inherits="FineUIPro.Web.HSSE.KqShowScreen.JZYScreen" %>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head runat="server">
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<script src="../..//res/lib/flex.js"></script>
|
||
<link rel="stylesheet" href="../../res/css/jzyscreen.css">
|
||
</head>
|
||
<style>
|
||
.header{
|
||
position: relative;
|
||
}
|
||
.b-wrap{
|
||
position: absolute;
|
||
top:6px;
|
||
right:6px;
|
||
font-size: 12px;
|
||
padding:2px 6px;
|
||
border: 1px solid #ffffff;
|
||
text-align: center;
|
||
color:#fff;
|
||
}
|
||
</style>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="header">
|
||
<h1><%=ProjectName%>现场人员动态看板</h1>
|
||
<div style="position: absolute;top: 0.5rem;right: 0.2rem;color: #ffffff;" id="divTime"></div>
|
||
<div class="b-wrap">全屏</div>
|
||
</div>
|
||
<div class="conterner">
|
||
<div class="row">
|
||
<div class="row-1">
|
||
|
||
<div class="label">距离12·31中交目标还剩余（天）</div>
|
||
<div class="number" id ="divDayRel">0</div>
|
||
|
||
|
||
</div>
|
||
<div class="row-1" style="margin-top: .25rem;">
|
||
<div class="label">累计安全人工时</div>
|
||
<div class="number" id ="divSafeTotal">0</div>
|
||
</div>
|
||
<div class="row-1" style="margin-top: .25rem;">
|
||
<div class="label">一周安全人工时</div>
|
||
<div class="number"id ="divSafeWeek">0</div>
|
||
</div>
|
||
|
||
<div id="rs">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="c-row">
|
||
<div class="table">
|
||
<div class="table-head">
|
||
<div class="th" style="width: 20%;">
|
||
<span>施工单位名称</span>
|
||
</div>
|
||
<div class="th" style="width: 20%;">
|
||
<span>当日总数/系统总数</span>
|
||
</div>
|
||
<div class="th" style="width: 60%;">
|
||
<div class="th-1">特种作业人员</div>
|
||
<div class="th-2">
|
||
<span style="width: 50%;">特岗名称</span>
|
||
<span style="width: 25%;">系统登记人数</span>
|
||
<span style="width: 25%;">当前在场人数</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="table-body">
|
||
<div class="scroll-box">
|
||
<div class="t" id="divScroller">
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script src="../../res/lib/echarts.min.js"></script>
|
||
<script src="../../res/lib/jquery.js"></script>
|
||
<script>
|
||
var projectid = '<%=ProjectId%>'
|
||
var timer = null;
|
||
|
||
function isScroll() {
|
||
let mainEle = document.querySelector('.table-body')
|
||
let serollEle = document.querySelector('.scroll-box')
|
||
if (serollEle.children[0].children.length < 6) {
|
||
return
|
||
}
|
||
serollEle.appendChild(serollEle.children[0].cloneNode(true))
|
||
|
||
function Marquee() {
|
||
if (mainEle.offsetHeight + mainEle.scrollTop < serollEle.offsetHeight) {
|
||
mainEle.scrollTop++
|
||
console.log(mainEle.offsetHeight, serollEle.offsetHeight)
|
||
} else {
|
||
serollEle.appendChild(serollEle.children[0].cloneNode(true))
|
||
serollEle.removeChild(serollEle.children[0])
|
||
}
|
||
}
|
||
|
||
timer = setInterval(Marquee, 90)
|
||
mainEle.onmouseover = function () { clearInterval(timer) }
|
||
mainEle.onmouseout = function () { timer = setInterval(Marquee, 90) }
|
||
}
|
||
|
||
|
||
var temp=[]
|
||
function createSM(value1) {
|
||
var chartDom = document.getElementById('rs');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
let leftLabel = ['施工人员 ', '天辰管理人员', '监理管理人员', '业主管理人员', '当前现场人数', '当日最高人数']
|
||
option = {
|
||
grid: {
|
||
top: 4,
|
||
left: 4,
|
||
right: 4,
|
||
bottom: 4,
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
position: 'left',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: "#ffffff",
|
||
fontWeight: "bolder",
|
||
fontSize: 24,
|
||
textShadowColor: '#000000', // 设置阴影颜色
|
||
textShadowBlur: 1, // 设置阴影模糊度
|
||
textShadowOffsetX: 1, // 设置阴影水平偏移
|
||
textShadowOffsetY: 1 // 设置阴影垂直偏移
|
||
},
|
||
data: leftLabel,
|
||
|
||
}, {
|
||
type: '',
|
||
position: 'right',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontFamily: "DIN",
|
||
color: "#CCCCCC",
|
||
fontWeight: "bolder",
|
||
fontSize: 30,
|
||
textShadowColor: '#000000', // 设置阴影颜色
|
||
textShadowBlur: 1, // 设置阴影模糊度
|
||
textShadowOffsetX: 1, // 设置阴影水平偏移
|
||
textShadowOffsetY: 1 // 设置阴影垂直偏移
|
||
},
|
||
data: value1,
|
||
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '人数',
|
||
type: 'bar',
|
||
// stack: 'total',
|
||
barWidth: 30,
|
||
label: {
|
||
show: false,
|
||
fontSize: 30,
|
||
fontFamily: "DIN",
|
||
align: "left",
|
||
|
||
},
|
||
itemStyle: {
|
||
color: "#1e7bc9"
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: value1
|
||
}
|
||
]
|
||
};
|
||
|
||
if (temp.length != value1.length || (temp[0] != value1[0] || temp[1] != value1[1] || temp[2] != value1[2] || temp[3] != value1[3] || temp[4] != value1[4] || temp[5] != value1[5])) {
|
||
myChart.clear();
|
||
temp = value1;
|
||
option && myChart.setOption(option);
|
||
}
|
||
}
|
||
|
||
|
||
getData();
|
||
function getData() {
|
||
$.ajax({
|
||
url: "JZYScreen.aspx/getData",
|
||
type: "POST",
|
||
contentType: "application/json; charset=utf-8",
|
||
dataType: "json",
|
||
data: JSON.stringify({
|
||
projectId: projectid
|
||
}),
|
||
success: function (data) {
|
||
if (data.d != null) {
|
||
var company = data.d.company;
|
||
if (company != null) {
|
||
$("#divScroller").html(data.d.company);
|
||
//if (timer != null) {
|
||
// clearInterval(timer);
|
||
//}
|
||
//isScroll();
|
||
}
|
||
debugger
|
||
createSM(data.d.num)
|
||
$("#divSafeTotal").html(data.d.safeTotal);
|
||
$("#divSafeWeek").html(data.d.safeTotalWeek);
|
||
|
||
const now = new Date();
|
||
const yearEnd = new Date(now.getFullYear(), 11, 31);
|
||
const diff = yearEnd - now;
|
||
var dayRes = diff > 0 ? Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1 : 0;
|
||
$("#divDayRel").html(dayRes);
|
||
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
setInterval(function () { //执行任务
|
||
getData();
|
||
}, 10000);
|
||
|
||
setInterval(function () { //执行任务
|
||
var now = new Date(); // 获取当前时间
|
||
var years = now.getFullYear(); // 小时
|
||
var months = now.getMonth()+1; // 小时
|
||
var days = now.getDate(); // 小时
|
||
var hours = now.getHours(); // 小时
|
||
var minutes = now.getMinutes(); // 分钟
|
||
var seconds = now.getSeconds(); // 秒
|
||
|
||
// 确保时间总是以两位数显示
|
||
hours = hours < 10 ? '0' + hours : hours;
|
||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||
seconds = seconds < 10 ? '0' + seconds : seconds;
|
||
|
||
// 更新时钟显示
|
||
var clock = years + '-' + months+'-'+days+' ' + hours + ':' + minutes + ':' + seconds;
|
||
$("#divTime").html(clock);
|
||
|
||
}, 1000);
|
||
|
||
|
||
|
||
|
||
|
||
|
||
$('.b-wrap').on('click', function () {
|
||
if (isFullScreen()) {
|
||
// 处于全屏
|
||
exitFullScreen()
|
||
} else {
|
||
// 未处于全屏
|
||
requestFullScreen(document.querySelector(".wrap"));
|
||
}
|
||
|
||
|
||
})
|
||
|
||
function isFullScreen() {
|
||
return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement);
|
||
}
|
||
|
||
|
||
function requestFullScreen(element) {
|
||
if (element.requestFullscreen) {
|
||
element.requestFullscreen();
|
||
} else if (element.mozRequestFullScreen) {
|
||
element.mozRequestFullScreen();
|
||
} else if (element.webkitRequestFullscreen) {
|
||
element.webkitRequestFullscreen();
|
||
} else if (element.msRequestFullscreen) {
|
||
element.msRequestFullscreen();
|
||
}
|
||
$('.b-wrap').text("退出全屏")
|
||
}
|
||
|
||
// 退出全屏
|
||
function exitFullScreen() {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen();
|
||
} else if (document.webkitExitFullscreen) {
|
||
document.webkitExitFullscreen();
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen();
|
||
}
|
||
$('.b-wrap').text("全屏")
|
||
}
|
||
</script> |