ChengDa_English/SGGL/FineUIPro.Web/common/mainMenu_HSSE.aspx

714 lines
27 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: 'bar',
barWidth: 20,
data: sumdata,
itemStyle: {
emphasis: {
barBorderRadius: [10, 10, 0, 0],
},
normal: {
barBorderRadius: [10, 10, 0, 0],
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>