<!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('riskHome')"/>
|
</head>
|
<body>
|
<div class="wrapper wrapper-content animated fadeIn gray-bg">
|
<div class="row">
|
<div class="col-sm-6">
|
<div class="ibox">
|
<div id="tab-1" class="tab-pane active">
|
<div class="panel-body">
|
<div class="tabs-container">
|
<ul class="nav nav-tabs">
|
<li class="active"><a data-toggle="tab" href="#tab-3" aria-expanded="true">部门隐患</a>
|
</li>
|
<li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">区域隐患</a>
|
</li>
|
<li class=""><a data-toggle="tab" href="#tab-5" aria-expanded="false">类别隐患</a>
|
</li>
|
<li class=""><a data-toggle="tab" href="#tab-6" aria-expanded="false">月度隐患</a>
|
</li>
|
<li class=""><a data-toggle="tab" href="#tab-7" aria-expanded="false">年度隐患</a>
|
</li>
|
</ul>
|
<div class="tab-content">
|
<!--部门隐患图-->
|
<div id="tab-3" class="tab-pane active">
|
<div class="panel-body">
|
<div class="row">
|
<div class="col-sm-12">
|
<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>
|
</div>
|
</div>
|
<!--区域隐患图-->
|
<div id="tab-4" class="tab-pane">
|
<div class="panel-body">
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>区域隐患统计图</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="echarts" id="region-danger"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--类别隐患图-->
|
<div id="tab-5" class="tab-pane">
|
<div class="panel-body">
|
<div class="row">
|
<div class="col-sm-12">
|
<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>
|
</div>
|
<!--月度隐患图-->
|
<div id="tab-6" class="tab-pane">
|
<div class="panel-body">
|
<div class="row">
|
<div class="col-sm-12">
|
<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>
|
</div>
|
</div>
|
<!--年度隐患图-->
|
<div id="tab-7" class="tab-pane">
|
<div class="panel-body">
|
<div class="row">
|
<div class="col-sm-12">
|
<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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-sm-6">
|
<div class="ibox">
|
<div class="ibox-title">
|
<h5>待办事项</h5>
|
</div>
|
<div class="ibox-content" style="height: 410px;">
|
<div class="list-group">
|
<a href="/tr/hiddenDangerCheck/dangerPlanExecute" class="list-group-item list-group-item-action">计划隐患排查
|
<span class="badge badge-pill badge-danger" id="troubleCheckCount"></span></a>
|
<a href="/tr/hiddenDangerCheck/dangerReport" class="list-group-item list-group-item-action">隐患处理
|
<span class="badge badge-pill badge-danger" id="troubleReportCount"></span></a>
|
<a href="/tr/hiddenDangerCheck/dangerExamine" class="list-group-item list-group-item-action">隐患核查
|
<span class="badge badge-pill badge-danger" id="troubleExamineCount"></span></a>
|
<a href="/tr/hiddenDangerCheck/dangerRectify" class="list-group-item list-group-item-action">隐患整改
|
<span class="badge badge-pill badge-danger" id="troubleRectifyCount"></span></a>
|
<a href="/tr/hiddenDangerCheck/dangerAccept" class="list-group-item list-group-item-action">隐患验收
|
<span class="badge badge-pill badge-danger" id="troubleAcceptCount"></span></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<th:block th:include="include :: footer"/>
|
<th:block th:include="include :: echarts-js"/>
|
<script type="text/javascript">
|
//部门隐患图
|
let deptDangers = 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: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'bar',
|
data: deptReport['highDanger'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
deptDangersReportChart.setOption(deptDangersReportOption);
|
$(window).resize(deptDangersReportChart.resize());
|
};
|
deptDangers();
|
//区域隐患图
|
let regionDangers = function () {
|
let regionDangersReportResult = $.ajax({url: ctx + "tr/report/regionDangerReport", async: false});
|
let regionDangersReport = JSON.parse(regionDangersReportResult.responseText);
|
let regionDangersReportChart = echarts.init(document.getElementById("region-danger"));
|
let regionDangersReportOption = {
|
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: regionDangersReport['reportNames']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '一般隐患',
|
type: 'bar',
|
data: regionDangersReport['normalDanger'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'bar',
|
data: regionDangersReport['highDanger'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
regionDangersReportChart.setOption(regionDangersReportOption);
|
$(window).resize(regionDangersReportChart.resize());
|
};
|
//隐患类别图
|
let troubleTypeDangers = function () {
|
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: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'bar',
|
data: troubleTypeDangersReport['highDanger'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
troubleTypeDangersReportChart.setOption(troubleTypeDangersReportOption);
|
$(window).resize(troubleTypeDangersReportChart.resize());
|
};
|
//月度隐患统计
|
let monthlyDanger = function () {
|
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: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'line',
|
data: monthlyDangerReport['highDanger'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
monthlyDangerChart.setOption(monthlyDangerOption);
|
$(window).resize(monthlyDangerChart.resize());
|
};
|
// 年度隐患统计
|
let yearlyDanger = function () {
|
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: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '重大隐患',
|
type: 'line',
|
data: yearlyDangerReport['highDanger'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
yearlyDangerChart.setOption(yearlyDangerOption);
|
$(window).resize(yearlyDangerChart.resize());
|
};
|
//切换Tab栏时触发该事件
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
let temp = e.target.hash;
|
switch (temp) {
|
case "#tab-3":
|
deptDangers();
|
break;
|
case "#tab-4":
|
regionDangers();
|
break;
|
case "#tab-5":
|
troubleTypeDangers();
|
break;
|
case "#tab-6":
|
monthlyDanger();
|
break;
|
case "#tab-7":
|
yearlyDanger();
|
break;
|
}
|
});
|
//代办事项查询
|
let taskData = $.ajax({url: ctx + "tr/report/taskCount", async: false});
|
let taskDataReport = JSON.parse(taskData.responseText);
|
let handleTaskData = function(){
|
$("#troubleCheckCount").html(taskDataReport["troubleCheckCount"]);
|
$("#troubleReportCount").html(taskDataReport["troubleReportCount"]);
|
$("#troubleExamineCount").html(taskDataReport["troubleExamineCount"]);
|
$("#troubleRectifyCount").html(taskDataReport["troubleRectifyCount"]);
|
$("#troubleAcceptCount").html(taskDataReport["troubleAcceptCount"])
|
};
|
handleTaskData()
|
</script>
|
</body>
|
</html>
|
