705 lines
26 KiB
Plaintext
705 lines
26 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_HSSE.aspx.cs" Inherits="FineUIPro.Web.mainMenu_HSSE" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head id="Head1" runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>首页</title>
|
|
<link href="../res/indexv1/assets/css/sub_index.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="sd-sub-body sd-sub-body--security">
|
|
<div class="sub-sections dis-flex">
|
|
<div class="sub-section sub-section-01">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">当前现场总人数</span>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div class="real-time-num" runat="server" id="divPersonNum">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-02 flex-1">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">项目安全人工时</span>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts02" class="echarts-box" runat="server"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-03">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">应急通讯</span>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div class="cm-banner">
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_bg.png" alt="" />
|
|
<div class="cm-box">
|
|
<div class="cm-box-item" title="110">
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_1.png" alt="" />
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_1_copy.png" alt="" />
|
|
<div class="cm-box-name">报警</div>
|
|
</div>
|
|
<div class="cm-box-item" title="119">
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_2.png" alt="" />
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_2_copy.png" alt="" />
|
|
<div class="cm-box-name">消防</div>
|
|
</div>
|
|
<div class="cm-box-item" title="119">
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_3.png" alt="" />
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_3_copy.png" alt="" />
|
|
<div class="cm-box-name">急救</div>
|
|
</div>
|
|
<div class="cm-box-item" id="divXmTel">
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_4.png" alt="" />
|
|
<img src="../res/indexv1/assets/image/sub_index/security/03_4_copy.png" alt="" />
|
|
<div class="cm-box-name">项目部</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-sections dis-flex">
|
|
<div class="sub-section sub-section-04 flex-1">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">安全检查问题统计</span>
|
|
<ul class="sub-sections-tabs">
|
|
<li class="sub-section-item active" data-type="sgfbs">施工分包商</li>
|
|
<li class="sub-section-item" data-type="wtlx">问题类别</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts04" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-05 flex-1">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">作业许可数量统计</span>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts05" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sub-sections dis-flex">
|
|
<div class="sub-section sub-section-06 flex-1">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">入场安全培训</span>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts06" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-07 flex-1">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">事故统计</span>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts07" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../res/indexv1/assets/js/jquery-2.1.1.min.js" type="text/javascript"></script>
|
|
<script src="../res/indexv1/assets/js/echarts-5.2.0.min.js" type="text/javascript"></script>
|
|
<script src="../res/indexv1/assets/js/draw-circle.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
var divXmTelTitle = '<%=divXmTelTitle %>'
|
|
function getTXValues() {
|
|
$('#divXmTel').attr('title', divXmTelTitle);
|
|
}
|
|
getTXValues();
|
|
</script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$('.sub-section-04 ul li').click(function () {
|
|
var type = $(this).attr('data-type')
|
|
$(this).addClass('active').siblings().removeClass('active')
|
|
// 重新绘制图
|
|
if (type == 'sgfbs') {
|
|
// 施工分包商
|
|
initEchart04(dataT1, dataT11, dataT12)
|
|
} else if (type == 'wtlx') {
|
|
// 问题类型
|
|
initEchart04(dataT2, dataT21, dataT22)
|
|
}
|
|
})
|
|
})
|
|
function initEchart02() {
|
|
var chartDom = document.getElementById('echarts02');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var xAxisData = JSON.parse('<%=SafeWorkTimeMonths %>');
|
|
var data = JSON.parse('<%=SafeWorkTimeCounts %>');
|
|
var sumdata = JSON.parse('<%=SumSafeWorkTimeCounts %>');
|
|
option = {
|
|
color: ['#179eb3'],
|
|
grid: {
|
|
top: '10%',
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showDelay: 0,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: true,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
interval: 0
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
onZero: true,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0d3760 ',
|
|
},
|
|
},
|
|
splitNumber: 5,
|
|
},
|
|
series: [
|
|
{
|
|
name: '项目安全人工时',
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
data: data,
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
},
|
|
normal: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 1, 1, 0,
|
|
[
|
|
{ offset: 0, color: '#4989fb' },
|
|
{ offset: 1, color: '#18fbfd' }
|
|
]
|
|
)
|
|
}
|
|
}
|
|
}, {
|
|
name: '累计人工时',
|
|
type: 'line',
|
|
data: sumdata,
|
|
itemStyle: {
|
|
normal: { color: '#4989fb' }
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.clear();//清空
|
|
if (xAxisData.length > 10) {
|
|
option.dataZoom=[{
|
|
type: 'slider',
|
|
show: true,
|
|
startValue: 0,
|
|
endValue: 9,
|
|
height: '3',
|
|
backgroundColor: 'rgba(47,69,84,0)',
|
|
fillerColor: 'rgba(47,69,84,0)',
|
|
bottom: '0%',
|
|
zoomLock: true,
|
|
moveOnMouseWheel: true,
|
|
brushSelect: true,
|
|
showDetail: false,
|
|
}]
|
|
}
|
|
option && myChart.setOption(option);
|
|
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
|
|
}
|
|
function initEchart04(dataT, data1, data2) {
|
|
var chartDom = document.getElementById('echarts04');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
option = {
|
|
color: ['#1ab1ff', '#f24166'],
|
|
grid: {
|
|
top: '20%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showDelay: 0,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
// y: '55%',
|
|
top: '4%',
|
|
left: 'center',
|
|
textStyle: {
|
|
fontSize: 12,//字体大小
|
|
color: ['#1ab1ff', '#f24166']//字体颜色
|
|
},
|
|
data: ['全部', '待整改'],
|
|
itemWidth: 12,//图例的宽度
|
|
itemHeight: 6,//图例的高度
|
|
},
|
|
xAxis: {
|
|
data: dataT,
|
|
boundaryGap: true,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
onZero: true,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0D3C65',
|
|
},
|
|
},
|
|
splitNumber: 5,
|
|
},
|
|
series: [
|
|
{
|
|
name: '全部',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
data: data1,
|
|
barGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
|
barCategoryGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
|
itemStyle: {
|
|
color: '#1ab1ff',
|
|
emphasis: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
},
|
|
normal: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '待整改',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
data: data2,
|
|
barGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
|
barCategoryGap: '0%',/*多个并排柱子设置柱子之间的间距*/
|
|
itemStyle: {
|
|
color: '#f24166',
|
|
emphasis: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
},
|
|
normal: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
myChart.clear();//清空
|
|
if (dataT.length > 6) {
|
|
option.dataZoom=[{
|
|
type: 'slider',
|
|
show: true,
|
|
startValue: 0,
|
|
endValue: 5,
|
|
height: '3',
|
|
backgroundColor: 'rgba(47,69,84,0)',
|
|
fillerColor: 'rgba(47,69,84,0)',
|
|
bottom: '0%',
|
|
zoomLock: true,
|
|
moveOnMouseWheel: true,
|
|
brushSelect: true,
|
|
showDetail: false,
|
|
}]
|
|
}
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function initEchart05() {
|
|
var chartDom = document.getElementById('echarts05');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
var xAxisData =JSON.parse('<%=LicenseStates %>');
|
|
var data = JSON.parse('<%=LicenseCounts %>');
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
// formatter: '{c}',
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
alignWithLabel: true,
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0D3C65',
|
|
},
|
|
},
|
|
splitNumber: 5,
|
|
},
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
color: '#17b1e5', //线条颜色
|
|
smooth: true, //线条平滑
|
|
symbol: 'none',
|
|
data: data,
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: '#0d6692' // 100% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#03193d' // 0% 处的颜色
|
|
}],
|
|
global: false
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
label: { show: false }, //顶部显示数值
|
|
}
|
|
}
|
|
},
|
|
],
|
|
}
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function initEchart06() {
|
|
var chartDom = document.getElementById('echarts06');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
var dataMonth = JSON.parse('<%=EduTrainMonths %>');
|
|
var dataCount =JSON.parse('<%=EduTrainCounts %>');
|
|
var dataCountSum =JSON.parse('<%=EduTrainSumCounts %>');
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
// formatter: '{c}',
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
data: dataMonth,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
interval: 0
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0D3C65',
|
|
},
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '入场安全培训',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
},
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: '#11244a'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#167ebd'
|
|
}
|
|
])
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: dataCount
|
|
}, {
|
|
name: '累计入场培训',
|
|
type: 'line',
|
|
data: dataCountSum,
|
|
itemStyle: {
|
|
normal: { color: '#4989fb' }
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();//清空
|
|
if (dataMonth.length > 6) {
|
|
option.dataZoom=[{
|
|
type: 'slider',
|
|
show: true,
|
|
startValue: 0,
|
|
endValue: 5,
|
|
height: '3',
|
|
backgroundColor: 'rgba(47,69,84,0)',
|
|
fillerColor: 'rgba(47,69,84,0)',
|
|
bottom: '0%',
|
|
zoomLock: true,
|
|
moveOnMouseWheel: true,
|
|
brushSelect: true,
|
|
showDetail: false,
|
|
}]
|
|
}
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
function initEchart07() {
|
|
var chartDom = document.getElementById('echarts07');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
var dataAccidentTypes = ['人身伤害', '未遂事故', '火灾', '机械设备', '环境影响', '其他'];
|
|
var dataAccidentCounts = JSON.parse('<%=AccidentCounts %>');
|
|
option = {
|
|
color: ['#1ab1ff'],
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showDelay: 0,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: dataAccidentTypes,
|
|
boundaryGap: true,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
onZero: true,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0d3760',
|
|
},
|
|
},
|
|
splitNumber: 5,
|
|
},
|
|
series: [
|
|
{
|
|
name: '事故统计',
|
|
type: 'pictorialBar',
|
|
symbol: 'triangle',
|
|
barWidth: 40,
|
|
data: dataAccidentCounts,
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
},
|
|
normal: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
1, 1, 1, 0,
|
|
[
|
|
{ offset: 0, color: '#3f6db9' },
|
|
{ offset: 1, color: '#0cb0c2' }
|
|
]
|
|
)
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
|
|
}
|
|
initEchart02()
|
|
|
|
// 施工分包商
|
|
var dataT1 = JSON.parse('<%=CheckUnit %>');
|
|
var dataT11 = JSON.parse('<%=CheckUnitALLCount %>');
|
|
var dataT12 = JSON.parse('<%=CheckUnitNoCount %>');
|
|
|
|
var dataT2 = JSON.parse('<%=CheckType %>');
|
|
var dataT21 = JSON.parse('<%=CheckTypeALLCount %>');
|
|
var dataT22 = JSON.parse('<%=CheckTypeNoCount %>');
|
|
initEchart04(dataT1, dataT11, dataT12)
|
|
initEchart05()
|
|
initEchart06()
|
|
initEchart07()
|
|
</script>
|
|
</body>
|
|
</html>
|