<!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')"/>
|
<link rel="stylesheet" href="/ajax/libs/layui/css/layui.css" media="all">
|
</head>
|
<body>
|
<div class="wrapper wrapper-content animated fadeIn gray-bg">
|
<div class="row">
|
<div class="col-sm-6">
|
<div class="ibox">
|
<div class="ibox-title">
|
<h5>企业四色风险分布图</h5>
|
</div>
|
<div class="ibox-content"
|
style="display: flex;justify-content: center;align-items: center;height: 350px">
|
<div class="layui-carousel" id="test1">
|
<div carousel-item>
|
<div th:each="image : ${fourColorPic}" style="text-align: center">
|
<img th:src="${image}" style="max-width: 100%;max-height: 100%">
|
</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: 350px;">
|
<div class="list-group">
|
<a href="/tr/riskEvaluationPlan/identify" class="list-group-item list-group-item-action">风险辨识
|
<span class="badge badge-pill badge-danger" id="identityCount"></span></a>
|
<a href="/tr/riskCheckPoint/evaluation" class="list-group-item list-group-item-action">风险评价
|
<span class="badge badge-pill badge-danger" id="evaluationCount"></span></a>
|
<a href="/tr/riskCheckPoint/review" class="list-group-item list-group-item-action">风险审核
|
<span class="badge badge-pill badge-danger" id="reviewCount"></span></a>
|
</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="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>
|
<th:block th:include="include :: footer"/>
|
<th:block th:include="include :: echarts-js"/>
|
<script type="text/javascript">
|
//部门风险图
|
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());
|
};
|
deptRisk();
|
//区域风险图
|
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());
|
};
|
regionRisk();
|
//风险单元统计图
|
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());
|
};
|
riskPoint();
|
//风险趋势图
|
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());
|
};
|
riskTrend();
|
//切换风险单元统计图中的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"])
|
};
|
handleTaskData()
|
// //四色图查询
|
// let fourColorPic = $.ajax({url: ctx + "tr/report/fourColorPic", async: false});
|
// let picUrl = fourColorPic.responseText.replace(/^http:\/\/[^/]+/, "");
|
// console.log(picUrl)
|
// $("#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>
|
