<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
<head>
|
<th:block th:include="include :: header('首页选项卡 & 面板')"/>
|
</head>
|
<body class="gray-bg">
|
<div class="wrapper wrapper-content animated fadeIn">
|
<div class="row">
|
<div class="tabs-container">
|
<ul class="nav nav-tabs">
|
<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 隐患统计</a>
|
</li>
|
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">风险统计</a>
|
</li>
|
</ul>
|
<div class="tab-content">
|
<div id="tab-1" class="tab-pane active">
|
<div class="panel-body">
|
<div class="row">
|
<!--部门隐患图-->
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>部门隐患统计图</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="dept-danger"></div>
|
</div>
|
</div>
|
</div>
|
<!--隐患类别隐患图-->
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>隐患类别统计图</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="trouble-type-danger"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>月度隐患统计图</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="Monthly-hidden-trouble"></div>
|
</div>
|
</div>
|
</div>
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>年度隐患统计图</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="Yearly-hidden-trouble"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div id="tab-2" class="tab-pane">
|
<div class="panel-body">
|
<!--Content in here-->
|
<div class="row">
|
<!--部门风险图-->
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>部门风险统计图</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="dept-risk"></div>
|
</div>
|
</div>
|
</div>
|
<!--区域风险图-->
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>区域风险统计</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="region-risk"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<!--风险单元统计图-->
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title" style="height: 50px;margin-top: 15px;padding-top: 0px">
|
<h5 style="margin-top: 10px">风险单元统计图</h5>
|
<div class="form-group" style="float: right">
|
<div style="float: left">
|
<label class="control-label" style="margin-top: 8px">风险单元类型：</label>
|
</div>
|
<div style="float: right">
|
<select id="riskType" name="riskType" class="form-control m-b"
|
style="margin-bottom: 0px">
|
<option value="1" selected>设备设施</option>
|
<option value="2">作业活动</option>
|
<option value="3">工艺节点</option>
|
</select>
|
</div>
|
</div>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="risk-point"></div>
|
</div>
|
</div>
|
</div>
|
<!--风险变化趋势图-->
|
<div class="col-sm-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title" style="height: 50px;margin-top: 15px;padding-top: 0px">
|
<h5 style="margin-top: 10px">风险趋势图</h5>
|
<div class="form-group" style="float: right">
|
<div style="float: left">
|
<label class="control-label" style="margin-top: 8px">
|
<!--if you need, title is here-->
|
</label>
|
</div>
|
<div style="float: right">
|
<!--if you need, content is here-->
|
</div>
|
</div>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="risk-trend"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<th:block th:include="include :: footer"/>
|
<th:block th:include="include :: echarts-js"/>
|
<script type="text/javascript">
|
var firstPage = function () {
|
//部门隐患图
|
let deptDangersReportResult = $.ajax({url: ctx + "tr/report/deptDangersReport", async: false});
|
let deptReport = JSON.parse(deptDangersReportResult.responseText);
|
let deptDangersReportChart = echarts.init(document.getElementById("dept-danger"));
|
let deptDangersReportOption = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
color: ['#2E9AFE', '#FF0000'],
|
legend: {
|
data: ['一般隐患', '重大隐患']
|
},
|
grid: {
|
x: 30,
|
x2: 40,
|
y2: 24,
|
bottom: 60
|
},
|
calculable: true,
|
dataZoom: [
|
{
|
show: true,
|
realtime: true,
|
start: 0,
|
end: 100
|
},
|
{
|
type: 'inside'
|
}
|
],
|
xAxis: [
|
{
|
type: 'category',
|
data: deptReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '一般隐患',
|
type: 'bar',
|
data: deptReport['normalDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'bar',
|
data: deptReport['highDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
deptDangersReportChart.setOption(deptDangersReportOption);
|
$(window).resize(deptDangersReportChart.resize());
|
//隐患类别图
|
let troubleTypeDangersReportResult = $.ajax({url: ctx + "tr/report/troubleTypeDangersReport", async: false});
|
let troubleTypeDangersReport = JSON.parse(troubleTypeDangersReportResult.responseText);
|
let troubleTypeDangersReportChart = echarts.init(document.getElementById("trouble-type-danger"));
|
let troubleTypeDangersReportOption = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
color: ['#2E9AFE', '#FF0000'],
|
legend: {
|
data: ['一般隐患', '重大隐患']
|
},
|
grid: {
|
x: 30,
|
x2: 40,
|
y2: 24,
|
bottom: 60
|
},
|
calculable: true,
|
dataZoom: [
|
{
|
show: true,
|
realtime: true,
|
start: 0,
|
end: 100
|
},
|
{
|
type: 'inside'
|
}
|
],
|
xAxis: [
|
{
|
type: 'category',
|
data: troubleTypeDangersReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '一般隐患',
|
type: 'bar',
|
data: troubleTypeDangersReport['normalDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'bar',
|
data: troubleTypeDangersReport['highDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
troubleTypeDangersReportChart.setOption(troubleTypeDangersReportOption);
|
$(window).resize(troubleTypeDangersReportChart.resize());
|
//月度隐患统计
|
let monthlyDangerReportResult = $.ajax({url: ctx + "tr/report/monthlyDangerReport", async: false});
|
let monthlyDangerReport = JSON.parse(monthlyDangerReportResult.responseText);
|
let monthlyDangerChart = echarts.init(document.getElementById("Monthly-hidden-trouble"));
|
let monthlyDangerOption = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
color: ['#2E9AFE', '#FF0000'],
|
legend: {
|
data: ['一般隐患', '重大隐患']
|
},
|
grid: {
|
x: 40,
|
x2: 40,
|
y2: 24
|
},
|
calculable: true,
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: monthlyDangerReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '一般隐患',
|
type: 'line',
|
data: monthlyDangerReport['normalDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'line',
|
data: monthlyDangerReport['highDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
monthlyDangerChart.setOption(monthlyDangerOption);
|
$(window).resize(monthlyDangerChart.resize());
|
// 年度隐患统计
|
let yearlyDangerReportResult = $.ajax({url: ctx + "tr/report/yearlyDangerReport", async: false});
|
let yearlyDangerReport = JSON.parse(yearlyDangerReportResult.responseText);
|
let yearlyDangerChart = echarts.init(document.getElementById("Yearly-hidden-trouble"));
|
let yearlyDangerOption = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
color: ['#2E9AFE', '#FF0000'],
|
legend: {
|
data: ['一般隐患', '重大隐患']
|
},
|
grid: {
|
x: 40,
|
x2: 40,
|
y2: 24
|
},
|
calculable: true,
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: yearlyDangerReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '一般隐患',
|
type: 'line',
|
data: yearlyDangerReport['normalDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'line',
|
data: yearlyDangerReport['highDanger'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
yearlyDangerChart.setOption(yearlyDangerOption);
|
$(window).resize(yearlyDangerChart.resize());
|
};
|
firstPage();
|
//部门风险图
|
var deptRisk = function () {
|
let deptRiskReportResult = $.ajax({url: ctx + "tr/report/deptRiskReport", async: false});
|
let deptRiskReport = JSON.parse(deptRiskReportResult.responseText);
|
let deptRiskReportChart = echarts.init(document.getElementById("dept-risk"));
|
let deptRiskReportOption = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
color: ['#5ABAFF', '#FFFF00', '#FF8800', '#FF0000'],
|
legend: {
|
data: ['重大风险', '较大风险', '一般风险', '低风险']
|
},
|
grid: {
|
x: 30,
|
x2: 40,
|
y2: 24,
|
bottom: 60
|
},
|
calculable: true,
|
dataZoom: [
|
{
|
show: true,
|
realtime: true,
|
start: 0,
|
end: 100
|
},
|
{
|
type: 'inside'
|
}
|
],
|
xAxis: [
|
{
|
type: 'category',
|
data: deptRiskReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '重大风险',
|
type: 'bar',
|
data: deptRiskReport['seriesRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '较大风险',
|
type: 'bar',
|
data: deptRiskReport['middleRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '一般风险',
|
type: 'bar',
|
data: deptRiskReport['normalRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '低风险',
|
type: 'bar',
|
data: deptRiskReport['lowRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
deptRiskReportChart.setOption(deptRiskReportOption);
|
$(window).resize(deptRiskReportChart.resize());
|
};
|
//区域风险图
|
var regionRisk = function () {
|
let regionRiskReportResult = $.ajax({url: ctx + "tr/report/regionRiskReport", async: false});
|
let regionRiskReport = JSON.parse(regionRiskReportResult.responseText);
|
let regionRiskReportChart = echarts.init(document.getElementById("region-risk"));
|
let regionRiskReportOption = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
color: ['#5ABAFF', '#FFFF00', '#FF8800', '#FF0000'],
|
legend: {
|
data: ['重大风险', '较大风险', '一般风险', '低风险']
|
},
|
grid: {
|
x: 30,
|
x2: 40,
|
y2: 24,
|
bottom: 60
|
},
|
calculable: true,
|
dataZoom: [
|
{
|
show: true,
|
realtime: true,
|
start: 0,
|
end: 100
|
},
|
{
|
type: 'inside'
|
}
|
],
|
xAxis: [
|
{
|
type: 'category',
|
data: regionRiskReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '重大风险',
|
type: 'bar',
|
data: regionRiskReport['seriesRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '较大风险',
|
type: 'bar',
|
data: regionRiskReport['middleRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '一般风险',
|
type: 'bar',
|
data: regionRiskReport['normalRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '低风险',
|
type: 'bar',
|
data: regionRiskReport['lowRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
regionRiskReportChart.setOption(regionRiskReportOption);
|
$(window).resize(regionRiskReportChart.resize());
|
};
|
//风险单元统计图
|
var riskType = 1;
|
var riskPoint = function () {
|
let riskPointReportResult = $.ajax({url: ctx + "tr/report/riskPointReport/" + riskType, async: false});
|
let riskPointReport = JSON.parse(riskPointReportResult.responseText);
|
let riskPointReportChart = echarts.init(document.getElementById("risk-point"));
|
let riskPointReportOption = {
|
tooltip: {
|
trigger: 'item',
|
formatter: "{b} : {c} ({d}%)"
|
},
|
legend: {
|
orient: 'vertical',
|
x: 'left',
|
data: riskPointReport['reportNames']
|
},
|
calculable: true,
|
series: [
|
{
|
type: 'pie',
|
radius: '80%',
|
center: ['50%', '50%'],
|
label:{ //饼图图形上的文本标签
|
normal:{
|
show:true,
|
position:'inner', //标签的位置
|
textStyle : {
|
fontWeight : 300,
|
fontSize : 12 //文字的字体大小
|
},
|
formatter:'{d}%'
|
}
|
},
|
data: riskPointReport['data']
|
}
|
]
|
};
|
riskPointReportChart.setOption(riskPointReportOption);
|
$(window).resize(riskPointReportChart.resize());
|
};
|
//风险趋势图
|
var riskTrend = function(){
|
let riskTrendReportResult = $.ajax({url: ctx + "tr/report/riskTrendReport", async: false});
|
let riskTrendReport = JSON.parse(riskTrendReportResult.responseText);
|
let riskTrendReportChart = echarts.init(document.getElementById("risk-trend"));
|
let riskTrendReportOption = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
color: ['#5ABAFF', '#FFFF00', '#FF8800', '#FF0000'],
|
legend: {
|
data: ['重大风险', '较大风险', '一般风险', '低风险']
|
},
|
grid: {
|
x: 30,
|
x2: 40,
|
y2: 24,
|
bottom: 60
|
},
|
calculable: true,
|
dataZoom: [
|
{
|
show: true,
|
realtime: true,
|
start: 0,
|
end: 100
|
},
|
{
|
type: 'inside'
|
}
|
],
|
xAxis: [
|
{
|
type: 'category',
|
data: riskTrendReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '重大风险',
|
type: 'line',
|
data: riskTrendReport['seriesRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '较大风险',
|
type: 'line',
|
data: riskTrendReport['middleRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '一般风险',
|
type: 'line',
|
data: riskTrendReport['normalRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '低风险',
|
type: 'line',
|
data: riskTrendReport['lowRisk'],
|
markPoint: {
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
riskTrendReportChart.setOption(riskTrendReportOption);
|
$(window).resize(riskTrendReportChart.resize());
|
};
|
//切换Tab栏时触发该事件
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
let temp = e.target.hash;
|
if (temp == "#tab-1"){
|
firstPage();
|
}
|
if (temp == "#tab-2"){
|
deptRisk();
|
regionRisk();
|
riskPoint();
|
riskTrend()
|
}
|
});
|
//切换风险单元统计图中的select时触发该事件
|
$("#riskType").on("change", function () {
|
riskType = $("#riskType").val();
|
riskPoint()
|
})
|
</script>
|
</body>
|
</html>
|
