劳务人员看板
This commit is contained in:
geh
@@ -0,0 +1,335 @@
|
||||
<%@ 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"><asp:Literal runat="server" Text="全屏"/></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"><asp:Literal runat="server" Text="累计安全人工时"/></div>
|
||||
<div class="number" id ="divSafeTotal">0</div>
|
||||
</div>
|
||||
<div class="row-1" style="margin-top: .25rem;">
|
||||
<div class="label"><asp:Literal runat="server" Text="一周安全人工时"/></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><asp:Literal runat="server" Text="施工单位名称"/></span>
|
||||
</div>
|
||||
<div class="th" style="width: 20%;">
|
||||
<span><asp:Literal runat="server" Text="当日总数/系统总数"/></span>
|
||||
</div>
|
||||
<div class="th" style="width: 60%;">
|
||||
<div class="th-1"><asp:Literal runat="server" Text="特种作业人员"/></div>
|
||||
<div class="th-2">
|
||||
<span style="width: 50%;"><asp:Literal runat="server" Text="特岗名称"/></span>
|
||||
<span style="width: 25%;"><asp:Literal runat="server" Text="系统登记人数"/></span>
|
||||
<span style="width: 25%;"><asp:Literal runat="server" Text="当前在场人数"/></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 = ['施工人员 ', '<%=remark2 %>', '<%=remark3 %>', '<%=remark4 %>', '<%=remark5 %>', '<%=remark6 %>']
|
||||
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('<%=title2 %>')
|
||||
}
|
||||
|
||||
// 退出全屏
|
||||
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('<%=title1 %>')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user