<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('首页选项卡 & 面板')"/>
|
<link rel="stylesheet" href="/static/ajax/libs/layui/css/layui.css" media="all">
|
</head>
|
<body>
|
<div class="wrapper wrapper-content animated fadeIn gray-bg">
|
<div class="row">
|
<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="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 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>
|
</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());
|
};
|
//部门风险图
|
let 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: ['#FF0000', '#FF8800', '#FFFF00', '#5ABAFF'],
|
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: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '较大风险',
|
type: 'bar',
|
data: deptRiskReport['middleRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '一般风险',
|
type: 'bar',
|
data: deptRiskReport['normalRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '低风险',
|
type: 'bar',
|
data: deptRiskReport['lowRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
deptRiskReportChart.setOption(deptRiskReportOption);
|
$(window).resize(deptRiskReportChart.resize());
|
};
|
//区域风险图
|
let 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: ['#FF0000', '#FF8800', '#FFFF00', '#5ABAFF'],
|
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: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '较大风险',
|
type: 'bar',
|
data: regionRiskReport['middleRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '一般风险',
|
type: 'bar',
|
data: regionRiskReport['normalRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '低风险',
|
type: 'bar',
|
data: regionRiskReport['lowRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
}
|
]
|
};
|
regionRiskReportChart.setOption(regionRiskReportOption);
|
$(window).resize(regionRiskReportChart.resize());
|
};
|
//风险单元统计图
|
let riskType = 1;
|
let 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());
|
};
|
//风险趋势图
|
let 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: ['#FF0000', '#FF8800', '#FFFF00', '#5ABAFF'],
|
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: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '较大风险',
|
type: 'line',
|
data: riskTrendReport['middleRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '一般风险',
|
type: 'line',
|
data: riskTrendReport['normalRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
data: [
|
{type: 'max', name: '最大值'},
|
{type: 'min', name: '最小值'}
|
]
|
},
|
markLine: {
|
data: [
|
{type: 'average', name: '平均值'}
|
]
|
}
|
},
|
{
|
name: '低风险',
|
type: 'line',
|
data: riskTrendReport['lowRisk'],
|
markPoint: {
|
itemStyle: {
|
normal:{
|
label:{
|
show: true,
|
color: '#000000',//气泡中字体颜色
|
}
|
}
|
},
|
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;
|
switch (temp) {
|
case "#tab-1":
|
deptDangers();
|
break;
|
case "#tab-2":
|
deptRisk();
|
regionRisk();
|
riskPoint();
|
riskTrend();
|
break;
|
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;
|
}
|
});
|
//切换风险单元统计图中的select时触发该事件
|
$("#riskType").on("change", function () {
|
riskType = $("#riskType").val();
|
riskPoint()
|
});
|
//代办事项查询
|
let taskData = $.ajax({url: ctx + "tr/report/taskCount", async: false});
|
let taskDataReport = JSON.parse(taskData.responseText);
|
let handleTaskData = function () {
|
$("#identityCount").html(taskDataReport["identityCount"]);
|
$("#evaluationCount").html(taskDataReport["evaluationCount"]);
|
$("#reviewCount").html(taskDataReport["reviewCount"]);
|
$("#troubleCheckCount").html(taskDataReport["troubleCheckCount"]);
|
$("#troubleReportCount").html(taskDataReport["troubleReportCount"]);
|
$("#troubleExamineCount").html(taskDataReport["troubleExamineCount"]);
|
$("#troubleRectifyCount").html(taskDataReport["troubleRectifyCount"]);
|
$("#troubleAcceptCount").html(taskDataReport["troubleAcceptCount"])
|
};
|
handleTaskData()
|
// //四色图查询
|
// let fourColorPic = $.ajax({url: ctx + "tr/report/fourColorPic", async: false});
|
// let picUrl = fourColorPic.responseText.replace(/^http:\/\/[^/]+/, "");
|
// $("#fourColorPic").attr("src", picUrl)
|
</script>
|
|
<script>
|
layui.use('carousel', function(){
|
var carousel = layui.carousel;
|
//建造实例
|
carousel.render({
|
elem: '#test1'
|
,width: '100%' //设置容器宽度
|
,arrow: 'always' //始终显示箭头
|
//,anim: 'updown' //切换动画方式
|
,height: '100%'
|
});
|
});
|
</script>
|
</body>
|
</html>
|
