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>
|