From 0fa636c14dbd6fa55aeae48c4d8d76c1468dd919 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 10 十一月 2022 16:18:24 +0800 Subject: [PATCH] 首页和菜单栏字体 --- src/main/resources/templates/main.html | 1470 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 1,392 insertions(+), 78 deletions(-) diff --git a/src/main/resources/templates/main.html b/src/main/resources/templates/main.html index eee0bb9..344efc5 100644 --- a/src/main/resources/templates/main.html +++ b/src/main/resources/templates/main.html @@ -1,97 +1,1411 @@ -<!DOCTYPE html> -<html lang="zh" xmlns:th="http://www.thymeleaf.org"> +<!--<!DOCTYPE html>--> +<!--<html lang="zh" xmlns:th="http://www.thymeleaf.org">--> +<!--<head>--> +<!-- <th:block th:include="include :: header('首页选项卡 & 面板')"/>--> +<!-- <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 : ${companyImages}" 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>--> +<!-- <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>--> + +<!--</div>--> +<!--<th:block th:include="include :: footer"/>--> +<!--<th:block th:include="include :: echarts-js"/>--> +<!--<script type="text/javascript">--> + +<!-- //代办事项查询--> +<!-- 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>--> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> - <th:block th:include="include :: header('首页选项卡 & 面板')"/> - <link rel="stylesheet" href="/ajax/libs/layui/css/layui.css" media="all"> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <meta name="keywords" content=""/> + <meta name="description" content=""/> + <title>安全管理服务</title> + <th:block th:include="include :: publicity-css"/> </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 class="container" style="height: 850px!important;"> + <div class="header"> + <div class="header_left row"> + <div class="logo_text">安全管理服务</div> + </div> + <div class="header_center">安全信息公示平台</div> + <div class="header_right"> + <div class="datetime">2019-2020</div> + <div class="switch_fullscreen flexNone"><i class="anticon anticon-fullscreen"> + <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="fullscreen" + aria-hidden="true"> + <path d="M290 236.4l43.9-43.9a8.01 8.01 0 0 0-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0 0 13.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 0 0 0 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 0 0-11.3 0l-42.4 42.3a8.03 8.03 0 0 0 0 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 0 0 4.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 0 0-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 0 0-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"></path> + </svg> + </i></div> + + <div class="switch_fullscreen flexNone" id="homePage"><i class="anticon anticon-home"> + <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="home" + aria-hidden="true"> + <path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"> + </path> + </svg> + </i></div> + + <div class="switch_fullscreen flexNone ant-tooltip-open" id="logout"><i _ngcontent-vjs-c1="" nz-icon="" + nztheme="outline" nztype="logout" + class="anticon anticon-logout"> + <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="logout" + aria-hidden="true"> + <path d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 0 1-112.7 75.9A352.8 352.8 0 0 1 512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 0 1-112.7-75.9 353.28 353.28 0 0 1-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z"></path> + </svg> + </i></div> + </div> + </div> + <div class="firstRow"> + <div class="rowCenter"> + <div class="tj1"> + <div class="tj1_card column"> + <div class="tj1_card_title flexNone">当前风险总量</div> + <div class="tj1_card_value flexNone" th:text="${allRiskCount}">98</div> </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 : ${companyImages}" style="text-align: center"> - <img th:src="${image}" style="max-width: 100%;max-height: 100%"> + <div class="tj1_card column tj1_card_center"> + <div class="tj1_card_title flexNone">年度隐患总量</div> + <div class="tj1_card_value flexNone" th:text="${yearlyDangerCount}">98</div> + </div> + <div class="tj1_card column"> + <div class="tj1_card_title flexNone">月度隐患总量</div> + <div class="tj1_card_value flexNone" th:text="${thisMonthDangerCount}">98</div> + </div> + </div> + <div class="tj2"> + <div class="tj2_bg"></div> + <div class="tj2_content"> + <div class="row"> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">重大风险</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon zdfx"></div> + <div class="tj2_item__value" th:text="${seriesRiskCount}">5</div> + </div> + </div> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">较大风险</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon jdfx"></div> + <div class="tj2_item__value" th:text="${middleRiskCount}">5</div> + </div> + </div> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">一般风险</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon ybfx"></div> + <div class="tj2_item__value" th:text="${normalRiskCount}">19</div> + </div> + </div> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">低风险</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon dfx"></div> + <div class="tj2_item__value" th:text="${lowRiskCount}">69</div> + </div> + </div> + </div> + <div class="row2"> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">当月重大隐患</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon zdyh"></div> + <div class="tj2_item__value" th:text="${thisMonthHighDangerCount}">5</div> + </div> + </div> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">当月一般隐患</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon ybyh"></div> + <div class="tj2_item__value" th:text="${thisMonthNormalDangerCount}">5</div> + </div> + </div> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">未整改隐患</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon wzgyh"></div> + <div class="tj2_item__value" th:text="${unRectifyDangerCount}">19</div> + </div> + </div> + <div class="tj2_item column"> + <div class="tj2_item_title flexNone">隐患整改率</div> + <div class="tj2_item_value_wrap flexNone"> + <div class="tj2_item__icon yhzgl"></div> + <div class="tj2_item__value" th:text="${dangerRectifyPercent}" style="font-size: 20px"> + 69 + </div> </div> </div> </div> </div> </div> </div> - <div class="col-sm-6"> - <div class="ibox"> - <div class="ibox-title"> - <h5>待办事项</h5> + <div class="map"> + <div class="swiper-container swiper-container-horizontal lunbo"> + <div class="swiper-wrapper"> + <div class="swiper-slide" th:each="url:${fourColorMapUrl}"> + <img style="max-width: 100%;max-height: 100%" th:src="${url}"> + </div>` </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> - <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 class="swiper-pagination"></div> + </div> + <div class="swiper-button-prev"></div> + <div class="swiper-button-next"></div> + </div> + + <div class="rowRight"> + <div class="row gs_card"> + <div class="swiper_left"> + <div class="two_title">重大风险公示</div> + <div class="swiper-container swiper-container-horizontal gongshi"> + <div class="swiper-wrapper"> + <div th:if="${#lists.isEmpty(seriesRisks)}" > + <div class="inner-content" style="margin-left: 50px">暂无数据</div> + </div> + <div class="swiper-slide" th:each="seriesRisk:${seriesRisks}" style="font-size: 13px"> + <div class="inner-content"> + <div>风险对象:<span th:text="${seriesRisk.name}">aaaa</span></div> + <div>管辖部门:<span th:text="${seriesRisk.deptName}">aaaa</span></div> + <div>区域:<span th:text="${seriesRisk.regionName}">aaaa</span></div> + </div> + </div> + </div> + <div class="swiper-pagination"></div> + </div> + + </div> + <div class="swiper_right"> + <div class="two_title">重大隐患公示</div> + <div class="swiper-container swiper-container-horizontal gongshi"> + <div class="swiper-wrapper"> + <div th:if="${#lists.isEmpty(seriesDangers)}" > + <div class="inner-content" style="margin-left: 50px">暂无数据</div> + </div> + <div class="swiper-slide" th:each="seriesDanger:${seriesDangers}" style="font-size: 13px"> + <div class="inner-content"> + <div>隐患名称:<span th:text="${seriesDanger.dangerName}">aaaa</span></div> + <div>隐患描述:<span th:text="${seriesDanger.dangerDescription}">aaaa</span></div> + <div>整改人:<span th:text="${seriesDanger.rectifyUserName}">aaaa</span></div> + <div>排查时间:<span th:text="${seriesDanger.checkTime}">aaaa</span></div> + </div> + </div> + </div> + <div class="swiper-pagination"></div> </div> </div> - </div> </div> </div> -</div> + <div class="endRow"> + <div class="endRow_left"> + <div class="two_title">风险统计</div> + <div style="margin-bottom:0px; flex:1"> + <div class="chart_card" style="margin: 0;padding: 0; border-width: 13px"> + <div id="risk" style="height: 195px"></div> + </div> + </div> + <div style="flex:1"> + <div class="chart_card" style="margin: 0;padding: 0; border-width: 13px"> + <div id="riskPoint" style="height: 195px"></div> + </div> + </div> + </div> + <div class="endRow_right"> + <div class="two_title">隐患统计</div> + <div style="margin-bottom:0px; flex:1;"> + <div class="chart_card" style="margin: 0;padding: 0; border-width: 13px"> + <div id="danger" style="height: 195px"></div> + </div> + </div> + <div style="flex:1"> + <div class="chart_card" style="margin: 0;padding: 0; border-width: 13px"> + <div id="dangerTrend" style="height: 195px"></div> + </div> + </div> + </div> + </div> </div> -<th:block th:include="include :: footer"/> -<th:block th:include="include :: echarts-js"/> -<script type="text/javascript"> - - //代办事项查询 - 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> +<th:block th:include="include :: publicity-js"/> +<th:block th:include="include :: echarts-js"/> +<script th:inline="javascript"> + $(function () { + var date = new Date(); + var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; + $(".datetime").html(date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':' + (date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()) + ' ' + weekday[date.getDay()]); + setInterval(function () { + var date = new Date(); + $(".datetime").html(date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':' + (date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()) + ' ' + weekday[date.getDay()]); + }, 1000); + + new Swiper(".swiper-container", { + loop: !0, + speed: 500, + autoplay: { + delay: 3e3, + disableOnInteraction: false + }, + slidesOffsetBefore: 0, + parallax: !0, + pagination: { + el: ".pc-bg-container .swiper-pagination", + clickable: true + } + }); + new Swiper(".lunbo", { + loop: !0, + speed: 500, + autoplay: { + delay: 3e3, + disableOnInteraction: false + }, + slidesOffsetBefore: 0, + parallax: !0, + pagination: { + el: ".pc-bg-container .swiper-pagination", + clickable: true + }, + navigation: { + nextEl: ".swiper-button-next", + prevEl: ".swiper-button-prev" + } + }) + + }); + + $(".anticon-fullscreen").click(function () { + if ($(this).hasClass('anticon-fullscreen')) { + enterfullscreen(); + $(this).removeClass('anticon-fullscreen').addClass('anticon-fullscreen-exit'); + } else { + exitfullscreen(); + $(this).removeClass('anticon-fullscreen-exit').addClass('anticon-fullscreen'); + } + + }); + + function enterfullscreen() { //进入全屏 + var docElm = document.documentElement; + //W3C + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } + //FireFox + else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } + //Chrome等 + else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } + //IE11 + else if (elem.msRequestFullscreen) { + elem.msRequestFullscreen(); + } + } + + function exitfullscreen() { //退出全屏 + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } + } + + $("#homePage").click(function () { + window.location.href = "/index"; + }); + $("#logout").click(function () { + window.location.href = "/logout"; + }); + //从后台获取图标报告所需数据 + var reportData = null; + var riskTimer = null; + var riskPointTimer = null; + var dangerTimer = null; + var getReportData = function(){ + $.ajax({ + type: "post", + url: "/tr/report/publicity", + async: false, + success: function (result) { + reportData = result; + } + }); + //风险区域图表数据处理 + var riskChart = echarts.init(document.getElementById("risk")); + var regionRiskOption = { + title: { + text: '风险按区域统计', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + color: ['#FF0000', '#FF8800', '#FFFF00', '#5ABAFF'], + legend: { + data: ['重大风险','较大风险','一般风险','低风险'], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["regionRiskMap"]["reportNames"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name: '重大风险', + type: 'bar', + data: reportData["regionRiskMap"]["seriesRisk"] + }, + { + name: '较大风险', + type: 'bar', + data: reportData["regionRiskMap"]["middleRisk"] + }, + { + name: '一般风险', + type: 'bar', + data: reportData["regionRiskMap"]["normalRisk"] + }, + { + name: '低风险', + type: 'bar', + data: reportData["regionRiskMap"]["lowRisk"] + } + ] + }; + var deptRiskOption = { + title: { + text: '风险按部门统计', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + color: ['#FF0000', '#FF8800', '#FFFF00', '#5ABAFF'], + legend: { + data: ['重大风险','较大风险','一般风险','低风险'], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["deptRiskMap"]["reportNames"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name: '重大风险', + type: 'bar', + data: reportData["deptRiskMap"]["seriesRisk"] + }, + { + name: '较大风险', + type: 'bar', + data: reportData["deptRiskMap"]["middleRisk"] + }, + { + name: '一般风险', + type: 'bar', + data: reportData["deptRiskMap"]["normalRisk"] + }, + { + name: '低风险', + type: 'bar', + data: reportData["deptRiskMap"]["lowRisk"] + } + ] + }; + riskChart.setOption(regionRiskOption); + $(window).resize(riskChart.resize); + var riskReportArray = []; + riskReportArray.push(regionRiskOption); + riskReportArray.push(deptRiskOption); + //风险单元区域图表数据处理 + var riskPointChart = echarts.init(document.getElementById("riskPoint")); + var deviceRiskPointOption = { + title: { + text: '风险单元统计(设备设施)', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + legend: { + data: [], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["deviceRiskPointMap"]["riskPointName"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name:'', + type: 'bar', + data: reportData["deviceRiskPointMap"]["riskPointCount"] + } + ] + }; + var workRiskPointOption = { + title: { + text: '风险单元统计(作业活动)', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + legend: { + data: [], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["workRiskPointMap"]["riskPointName"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name:'', + type: 'bar', + data: reportData["workRiskPointMap"]["riskPointCount"] + } + ] + }; + var craftRiskPointOption = { + title: { + text: '风险单元统计(工艺节点)', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + legend: { + data: [], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["craftRiskPointMap"]["riskPointName"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name:'', + type: 'bar', + data: reportData["craftRiskPointMap"]["riskPointCount"] + } + ] + }; + riskPointChart.setOption(deviceRiskPointOption); + $(window).resize(riskPointChart.resize); + var riskPointReportArray = []; + riskPointReportArray.push(deviceRiskPointOption); + riskPointReportArray.push(workRiskPointOption); + riskPointReportArray.push(craftRiskPointOption); + //隐患区域图表数据处理 + var dangerChart = echarts.init(document.getElementById("danger")); + var deptDangerOption = { + title: { + text: '按责任单位统计', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + color: ['#FF0000', '#5ABAFF'], + legend: { + data: ['重大隐患','一般隐患'], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["deptDangerMap"]["reportNames"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name: '重大隐患', + type: 'bar', + data: reportData["deptDangerMap"]["highDanger"] + }, + { + name: '一般隐患', + type: 'bar', + data: reportData["deptDangerMap"]["normalDanger"] + } + ] + }; + var regionDangerOption = { + title: { + text: '按区域统计', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + color: ['#FF0000', '#5ABAFF'], + legend: { + data: ['重大隐患','一般隐患'], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["regionDangerMap"]["reportNames"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name: '重大隐患', + type: 'bar', + data: reportData["regionDangerMap"]["highDanger"] + }, + { + name: '一般隐患', + type: 'bar', + data: reportData["regionDangerMap"]["normalDanger"] + } + ] + }; + var typeDangerOption = { + title: { + text: '按类别统计', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + color: ['#FF0000', '#5ABAFF'], + legend: { + data: ['重大隐患','一般隐患'], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["typeDangerMap"]["reportNames"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name: '重大隐患', + type: 'bar', + data: reportData["typeDangerMap"]["highDanger"] + }, + { + name: '一般隐患', + type: 'bar', + data: reportData["typeDangerMap"]["normalDanger"] + } + ] + }; + dangerChart.setOption(deptDangerOption); + $(window).resize(dangerChart.resize); + var dangerReportArray = []; + dangerReportArray.push(deptDangerOption); + dangerReportArray.push(regionDangerOption); + dangerReportArray.push(typeDangerOption); + //隐患趋势区域图表数据处理 + var dangerTrendChart = echarts.init(document.getElementById("dangerTrend")); + var dangerTrendOption = { + title: { + text: '隐患变化趋势', + top: 0, + textStyle:{ + color:'#00D9FA', + fontSize:16 + } + }, + tooltip: { + trigger: 'axis', + axisPointer:{ + type:"shadow" + } + }, + color: ['#FF0000', '#1890FF'], + legend: { + data: ['重大隐患','一般隐患'], + right: 10, + textStyle:{ + color:"#C7FFFE", + fontSize:12 + } + }, + grid: { + x: 30, + x2: 40, + y2: 24, + left: 30, + right: 10, + top: 30, + bottom: 60 + }, + calculable: true, + dataZoom: [ + { + show: true, + realtime: true, + start: 0, + end: 100, + height: 20, + textStyle:{ + color:'transparent' + }, + backgroundColor:'#063C58', + fillerColor:'rgba(167,183,204,0.1)', + borderColor: 'rgba(0,0,0,0)', + dataBackground:{ + areaStyle:{ + color:'#16A2C8', + } + } + }, + { + type: 'inside' + } + ], + xAxis: [ + { + type: 'category', + data: reportData["dangerTrendMap"]["reportNames"], + axisLabel:{ + color:'#C7FFFE' + }, + axisLine: { + lineStyle: { + color: '#306375' + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLine: { + show: false + }, + axisLabel:{ + color:'#C7FFFE' + }, + splitLine:{ + lineStyle: { + color:'#306375' + } + } + } + ], + series: [ + { + name: '重大隐患', + type: 'line', + data: reportData["dangerTrendMap"]["highDanger"] + }, + { + name: '一般隐患', + type: 'line', + data: reportData["dangerTrendMap"]["normalDanger"] + } + ] + }; + dangerTrendChart.setOption(dangerTrendOption); + $(window).resize(dangerTrendChart.resize()); + var riskTemp = 0; + var riskPointTemp = 0; + var dangerTemp = 0; + //处理定时换图任务 + var startRiskTask = function(){ + riskTimer = setInterval(function () { + riskTemp = (++riskTemp) % 2; + riskChart.setOption(riskReportArray[riskTemp]); + $(window).resize(riskChart.resize); + },5000); + }; + var startRiskPointTask = function(){ + riskPointTimer = setInterval(function () { + riskPointTemp = (++riskPointTemp) % 3; + riskPointChart.setOption(riskPointReportArray[riskPointTemp]); + $(window).resize(riskPointChart.resize); + },5000); + }; + var startDangerTask = function(){ + dangerTimer = setInterval(function () { + dangerTemp = (++dangerTemp) % 3; + dangerChart.setOption(dangerReportArray[dangerTemp]); + $(window).resize(dangerChart.resize); + },5000); + }; + startRiskTask(); + startRiskPointTask(); + startDangerTask(); + $("#risk").mouseover(function () { + clearInterval(riskTimer); + }) + $("#risk").mouseleave(function(){ + startRiskTask(); + }) + $("#riskPoint").mouseover(function () { + clearInterval(riskPointTimer); + }) + $("#riskPoint").mouseleave(function(){ + startRiskPointTask() + }) + $("#danger").mouseover(function () { + clearInterval(dangerTimer); + }) + $("#danger").mouseleave(function(){ + startDangerTask(); + }) + }; + getReportData(); + //设置每小时更新一次数据,更新数据后清除上一个轮播定时器 + setInterval(function () { + $("#risk").unbind(); + $("#riskPoint").unbind(); + $("#danger").unbind(); + clearInterval(riskTimer); + clearInterval(riskPointTimer); + clearInterval(dangerTimer); + getReportData(); + },3600000); +</script> +</html> \ No newline at end of file -- Gitblit v1.9.2