288 lines
9.6 KiB
Plaintext
288 lines
9.6 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JZYScreenOld.aspx.cs" Inherits="FineUIPro.Web.HSSE.KqShowScreen.JZYScreenOld" %>
|
|||
|
|
|
|||
|
|
<!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">
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column {
|
|||
|
|
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size:0.6rem;
|
|||
|
|
}
|
|||
|
|
.column div{
|
|||
|
|
font-size:0.6rem;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="context">
|
|||
|
|
<div class="left site">
|
|||
|
|
<div class="block">
|
|||
|
|
<div class="title">当前现场总人数</div>
|
|||
|
|
<div class="main xc">
|
|||
|
|
<div class="number" id="divTotal">
|
|||
|
|
0
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="block1 ">
|
|||
|
|
<div class="title">当前公司现场人数</div>
|
|||
|
|
<ul >
|
|||
|
|
<li>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="column" style="width:10rem;line-height:1rem">单位</div>
|
|||
|
|
<div class="column" style="width:3rem;line-height:1rem">总人数</div>
|
|||
|
|
<div class="column"style="width: 8rem;line-height:1rem">工种</div>
|
|||
|
|
<div class="column" style="width:3rem;line-height:1rem">人数</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div id="ulbox" class="main gsxc" style="overflow:hidden;height:11rem;">
|
|||
|
|
<ul id="ulcom1">
|
|||
|
|
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
<ul id="ulcom" >
|
|||
|
|
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<%-- <div class="right site">
|
|||
|
|
<div class="block1">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="info">
|
|||
|
|
<ul id="infoul">
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="photo">
|
|||
|
|
<img id="header" src="">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="block">
|
|||
|
|
<div class="title">当前现场岗位人数量</div>
|
|||
|
|
<div class="main" id="gwnum">
|
|||
|
|
|
|||
|
|
</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%>'
|
|||
|
|
|
|||
|
|
function createGWNUM(name, value1) {
|
|||
|
|
let type = name//['焊工', '电工', '架子工', '木工', '管工', '仪表安装工', '电气安装工', '钢筋工', '起重司机', '钳工', '起重指挥', '混凝土工', '维护电工']
|
|||
|
|
let value = value1// [100, 96, 89, 88, 87, 81, 80, 76, 75, 72, 70, 65, 62, 61]
|
|||
|
|
let opt = {
|
|||
|
|
grid: {
|
|||
|
|
top: 20,
|
|||
|
|
left: 60,
|
|||
|
|
right:60
|
|||
|
|
// bottom: 30
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: type,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#84D7FE'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0, // 坐标轴刻度标签的显示间隔
|
|||
|
|
rotate: -30 // 标签倾斜的角度
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#84D7FE'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#2E87AC',
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
type: 'slider', // 单独滚动条
|
|||
|
|
filterMode: 'none', // 不过滤数据 - 保证 y 轴数据范围不变
|
|||
|
|
brushSelect: true,
|
|||
|
|
bottom: 0,
|
|||
|
|
height: 10,
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
// 选中范围的填充颜色
|
|||
|
|
fillerColor: 'transparent',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
borderColor: 'transparent',
|
|||
|
|
dataBackground: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'transparent'
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: 'transparent'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectedDataBackground: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'transparent'
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: 'transparent'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 10,
|
|||
|
|
xAxisIndex: [0],
|
|||
|
|
showDetail: false,
|
|||
|
|
|
|||
|
|
handleSize: '0%',
|
|||
|
|
// 移动手柄尺寸高度
|
|||
|
|
// 测试发现手柄颜色和边框颜色会出现 偏差，所有设置手柄高度为0, 添加边框高度。由边框撑起高度
|
|||
|
|
moveHandleSize: 0, // 设置拖动手柄高度为0，只由边框负责高度展示
|
|||
|
|
// 不展示拖动手柄图标
|
|||
|
|
moveHandleIcon: 'none',
|
|||
|
|
moveHandleStyle: {
|
|||
|
|
// borderColor: systemTheme === 'light' ? '#E4E6E7' : '#5d6177',
|
|||
|
|
borderColor:'#5d6177',
|
|||
|
|
borderWidth: 10, // 设置边框高度
|
|||
|
|
borderType: 'solid',
|
|||
|
|
borderCap: 'round',
|
|||
|
|
// 保证拖动手柄右边框结尾有圆角
|
|||
|
|
borderJoin: 'round'
|
|||
|
|
},
|
|||
|
|
// 拖动高亮时设置
|
|||
|
|
emphasis: {
|
|||
|
|
moveHandleStyle: {
|
|||
|
|
// borderColor: systemTheme === 'light' ? '#E4E6E7' : '#5d6177',
|
|||
|
|
borderColor: '#5d6177',
|
|||
|
|
borderWidth: 10,
|
|||
|
|
borderType: 'solid',
|
|||
|
|
borderCap: 'round'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '',
|
|||
|
|
data: value,
|
|||
|
|
type: 'bar',
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#ffffff',
|
|||
|
|
position: 'top',
|
|||
|
|
},
|
|||
|
|
barWidth: 16,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1) ).toString(16);}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var myEchart = echarts.init(document.getElementById('gwnum'));
|
|||
|
|
myEchart.setOption(opt);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
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) {
|
|||
|
|
$("#ulcom1").html(data.d.company);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
roll(t);
|
|||
|
|
$("#divTotal").html(data.d.total);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function roll(t) {
|
|||
|
|
var ul1 = document.getElementById("ulcom1");
|
|||
|
|
var ul2 = document.getElementById("ulcom");
|
|||
|
|
var ulbox = document.getElementById("ulbox");
|
|||
|
|
ul2.innerHTML = ul1.innerHTML;
|
|||
|
|
ulbox.scrollTop = 0; // 开始无滚动时设为0
|
|||
|
|
var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
|
|||
|
|
// 鼠标移入div时暂停滚动
|
|||
|
|
ulbox.onmouseover = function () {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
}
|
|||
|
|
// 鼠标移出div后继续滚动
|
|||
|
|
ulbox.onmouseout = function () {
|
|||
|
|
timer = setInterval(rollStart, t);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function rollStart() {
|
|||
|
|
// 上面声明的DOM对象为局部对象需要再次声明
|
|||
|
|
var ul1 = document.getElementById("ulcom1");
|
|||
|
|
var ulbox = document.getElementById("ulbox");
|
|||
|
|
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
|
|||
|
|
if (ulbox.scrollTop >= ul1.scrollHeight) {
|
|||
|
|
ulbox.scrollTop = 0;
|
|||
|
|
} else {
|
|||
|
|
ulbox.scrollTop += 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
window.onload = roll(200);
|
|||
|
|
|
|||
|
|
setInterval(function () { //执行任务
|
|||
|
|
getData();
|
|||
|
|
}, 10000);
|
|||
|
|
|
|||
|
|
</script>
|