1099 lines
52 KiB
Plaintext
1099 lines
52 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_HSSE2.aspx.cs" Inherits="FineUIPro.Web.common.mainMenu_HSSE2" %>
|
||
|
||
<!DOCTYPE html>
|
||
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head runat="server">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
<title>安全生产数据看板</title>
|
||
<link rel="stylesheet" href="../res/assets/iconfont/iconfont.css"/>
|
||
<link rel="stylesheet" href="../res/assets/css/video-7.15.0.min.css"/>
|
||
<link rel="stylesheet" href="../res/assets/css/index1.css"/>
|
||
</head>
|
||
<body>
|
||
<div class="sd-index1-body">
|
||
<div class="sd-header" style="display:none">
|
||
<div class="sd-header-top">
|
||
<div class="sd-header-top-right">
|
||
<div id="sd-location-time" class="sd-location-time">----年--月--日 --:--:-- 星期-</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-header-title">
|
||
安全生产数据
|
||
</div>
|
||
</div>
|
||
<div class="sd-body">
|
||
<div class="sd-body-top flexCenter">
|
||
<div class="sd-top-left">
|
||
<div class="stl-top bg">
|
||
<div class="tit">安监人员数据</div>
|
||
<div class="content">
|
||
<div class="item flexCenter">
|
||
<div class="i-item stl-top-tw">
|
||
<div class="i-tit i-tit-w">企业总部人数</div>
|
||
<div class="flexCenter">
|
||
<div class="i-content flexCenterV rightGap">
|
||
<div class="num"><%=showData(hSSEData_HSSE.HeadOfficeInspectorGeneralNum,"--") %></div>
|
||
<div class="desc">总监</div>
|
||
</div>
|
||
<div class="i-content flexCenterV">
|
||
<div class="num"><%=showData(hSSEData_HSSE.HeadOfficeFullTimeNum,"--") %></div>
|
||
<div class="desc">专职</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="i-item stl-top-tw">
|
||
<div class="i-tit">分支机构</div>
|
||
<div class="flexCenter">
|
||
<div class="i-content flexCenterV rightGap">
|
||
<div class="num"><%=showData(hSSEData_HSSE.BranchInspectorGeneralNum,"--") %></div>
|
||
<div class="desc">总监</div>
|
||
</div>
|
||
<div class="i-content flexCenterV">
|
||
<div class="num"><%=showData(hSSEData_HSSE.BranchFullTimeNum,"--") %></div>
|
||
<div class="desc">专职</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item flexCenter">
|
||
<div class="i-item stl-top-cw">
|
||
<div class="i-tit">项目人数</div>
|
||
<div class="flexCenter">
|
||
<div class="i-content flexCenterV rightGap">
|
||
<div class="num"><%=showData(hSSEData_HSSE.ProjectInspectorGeneralNum,"--") %></div>
|
||
<div class="desc">总监</div>
|
||
</div>
|
||
<div class="i-content flexCenterV rightGap">
|
||
<div class="num"><%=showData(hSSEData_HSSE.ProjectFullTimeNum,"--") %></div>
|
||
<div class="desc">专职</div>
|
||
</div>
|
||
<div class="i-content flexCenterV">
|
||
<div class="num"><%=showData(hSSEData_HSSE.ProjectSafetyMonitorNum,"--") %></div>
|
||
<div class="desc">安全监护</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="i-item stl-top-cw1">
|
||
<div class="i-tit i-tit-w1">注安师</div>
|
||
<div class="flexCenter">
|
||
<div class="i-content flexCenterV">
|
||
<div class="num"><%=showData(hSSEData_HSSE.SafetyInjectionEngineer,"--") %></div>
|
||
<div class="desc">在岗执业</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="i-item">
|
||
<div class="i-tit">三类人员</div>
|
||
<div class="flexCenter">
|
||
<div class="i-content flexCenterV rightGap">
|
||
<div class="num"><%=showData(hSSEData_HSSE.CertificateANum,"--") %></div>
|
||
<div class="desc">A证</div>
|
||
</div>
|
||
<div class="i-content flexCenterV rightGap">
|
||
<div class="num"><%=showData(hSSEData_HSSE.CertificateBNum,"--") %></div>
|
||
<div class="desc">B证</div>
|
||
</div>
|
||
<div class="i-content flexCenterV">
|
||
<div class="num"><%=showData(hSSEData_HSSE.CertificateCNum,"--") %></div>
|
||
<div class="desc">C证</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stl-bottom bg">
|
||
<div class="tit">安全会议数据</div>
|
||
<div class="aqhysj-wrap flexCenter">
|
||
<div class="aqhysj">
|
||
<div class="item">
|
||
<div class="desc desc1pos" style="position:absolute;">企业安委会</div>
|
||
<div class="num num1pos"><%=showData(hSSEData_HSSE.SafetyCommitteeMeetingNum,"--") %></div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="desc desc2pos">企业专题</div>
|
||
<div class="num num2pos"><%=showData(hSSEData_HSSE.EnterpriseTopicsMeetingNum,"--") %></div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="num num3pos"><%=showData(hSSEData_HSSE.ProjectSafetyLeadingGroupMeetingNum,"--") %></div>
|
||
<div class="desc desc3pos">项目安全领导小组</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="num num4pos"><%=showData(hSSEData_HSSE.ProjectSafetyMeetingNum,"--") %></div>
|
||
<div class="desc desc4pos">项目安全例会</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-top-center">
|
||
<div class="stc-top flexCenter">
|
||
<div class="i-item">
|
||
<div class="desc desc-cl1">在建项目</div>
|
||
<div class="desc desc-cl1"><%=showData(hSSEData_HSSE.BeUnderConstructionNum,"--") %></div>
|
||
</div>
|
||
<div class="i-item">
|
||
<div class="desc desc-cl2">停工项目</div>
|
||
<div class="desc desc-cl2"><%=showData(hSSEData_HSSE.ShutdownNum,"--") %></div>
|
||
</div>
|
||
<div class="i-item">
|
||
<div class="desc desc-cl3">参建人数</div>
|
||
<div class="desc desc-cl3"><%=showData(hSSEData_HSSE.JoinConstructionPersonNum,"--") %></div>
|
||
</div>
|
||
<div class="i-item">
|
||
<div class="desc desc-cl4">在施危大工程</div>
|
||
<div class="desc desc-cl4"><%=showData(hSSEData_HSSE.MajorProjectsUnderConstructionNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="stc-center">
|
||
<div class="sd-body-map">
|
||
<!-- <div class="sd-body-map-switch-btn">中国地图<i class="iconfont icon-switch"></i></div> -->
|
||
<div class="js-echarts-map">
|
||
<div class="map">
|
||
<div class="sd-map"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stc-bottom flexCenter">
|
||
<div class="i-item">
|
||
<div class="ii-desc">工时数据</div>
|
||
<div class="ii-item bg1">
|
||
<div class="desc">总工时数</div>
|
||
<div class="num"><%=showData(hSSEData_HSSE.TotalWorkingHour,"--") %></div>
|
||
</div>
|
||
<div class="ii-item bg2">
|
||
<div class="desc">损失工时数</div>
|
||
<div class="num num-cl1"><%=showData(hSSEData_HSSE.LostWorkingHour,"--") %></div>
|
||
</div>
|
||
<div class="ii-item bg3">
|
||
<div class="desc">安全工时数</div>
|
||
<div class="num num-cl2"><%=showData(hSSEData_HSSE.SafeWorkingHour,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="i-item">
|
||
<div class="ii-desc">安全教育培训人数数据</div>
|
||
<div class="ii-item bg4">
|
||
<div class="desc">三级安全教育培训</div>
|
||
<div class="num"><%=showData(hSSEData_HSSE.SafeTrainNum,"--") %></div>
|
||
</div>
|
||
<div class="ii-item bg4">
|
||
<div class="desc">专项培训</div>
|
||
<div class="num"><%=showData(hSSEData_HSSE.SpecialTrainNum,"--") %></div>
|
||
</div>
|
||
<div class="ii-item bg4">
|
||
<div class="desc">特种作业培训</div>
|
||
<div class="num"><%=showData(hSSEData_HSSE.SpecialOperationTrainNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="i-item">
|
||
<div class="ii-desc">环保数据</div>
|
||
<div class="ii-item bg5">
|
||
<div class="desc">能耗总量</div>
|
||
<div class="num num-cl3"><%=showData(hSSEData_HSSE.TotalEnergyConsumption,"--") %></div>
|
||
</div>
|
||
<div class="ii-item bg5">
|
||
<div class="desc">万元营业收入综合能耗</div>
|
||
<div class="num num-cl3"><%=showData(hSSEData_HSSE.IncomeComprehensiveEnergyConsumption,"--") %></div>
|
||
</div>
|
||
<div class="ii-item bg5">
|
||
<div class="desc">用新水量</div>
|
||
<div class="num num-cl3"><%=showData(hSSEData_HSSE.NewWaterConsumption,"--") %></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-top-right">
|
||
<div class="str-top flexCenter">
|
||
<div class="i-item">
|
||
<div class="i-txt">安全费用</div>
|
||
<div class="i-desc flexCenterV tbMg">
|
||
<div class="id-txt">费用提取（万元）</div>
|
||
<div class="id-num"><%=showData(hSSEData_HSSE.CostExtract,"--") %></div>
|
||
</div>
|
||
<div class="i-desc flexCenterV">
|
||
<div class="id-txt">费用使用</div>
|
||
<div class="id-num"><%=showData(hSSEData_HSSE.CostUse,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="i-item">
|
||
<div class="i-txt">施工机具设备</div>
|
||
<div class="i-desc flexCenterV tbMg">
|
||
<div class="id-txt">在用</div>
|
||
<div class="id-num"><%=showData(hSSEData_HSSE.UseEquipmentNum,"--") %></div>
|
||
</div>
|
||
<div class="i-desc flexCenterV">
|
||
<div class="id-txt">特种设备</div>
|
||
<div class="id-num"><%=showData(hSSEData_HSSE.SpecialEquipmentNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="i-item">
|
||
<div class="i-txt">高风险作业许可</div>
|
||
<div class="i-desc flexCenterV tbMg">
|
||
<div class="id-txt">许可项</div>
|
||
<div class="id-num id-num-cl1"><%=showData(hSSEData_HSSE.LicensesNum,"--") %></div>
|
||
</div>
|
||
<div class="i-desc flexCenterV">
|
||
<div class="id-txt">关闭项</div>
|
||
<div class="id-num id-num-cl2"><%=showData(hSSEData_HSSE.LicensesCloseNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="str-bottom bg">
|
||
<div class="tit">
|
||
<div class="txt tab-wrap">
|
||
<div>隐患排查治理数据</div>
|
||
<div class="tab">
|
||
<div class="active">一般隐患</div>
|
||
<div>重大隐患</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="strb-top flexCenter">
|
||
<div class="strbt-left">
|
||
<div class="sl-item flexCenterV">
|
||
<div class="desc">整改闭环项</div>
|
||
<div id="yhpc_1" class="num"><%=showData(hSSEData_HSSE.GeneralClosedNum,"--") %></div>
|
||
</div>
|
||
<div class="sl-item flexCenterV">
|
||
<div class="desc">未整改完成项</div>
|
||
<div id="yhpc_2" class="num1"><%=showData(hSSEData_HSSE.GeneralNotClosedNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="strbt-right">
|
||
<div id="zgl" class="strbt-right-pic"></div>
|
||
<div class="strbt-right-tit flexCenter">整改率</div>
|
||
</div>
|
||
</div>
|
||
<div class="strb-bottom">
|
||
<div id="yhpczlsj" class="strb-bottom-pic"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sd-body-bottom">
|
||
<div class="bb-item">
|
||
<div class="tit">
|
||
<div class="txt">安全监督检查数据</div>
|
||
</div>
|
||
<div class="content">
|
||
<div id="aqjdjcsj" class="sd-chart"></div>
|
||
</div>
|
||
</div>
|
||
<div class="bb-item">
|
||
<div class="tit">
|
||
<div class="txt">事故事件数据</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="sgsjsj">
|
||
<div class="sg-top">
|
||
<div class="sg-top-item">
|
||
<div>未遂事件</div>
|
||
<div class="num"><%=showData(hSSEData_HSSE.NearMissNum,"--") %></div>
|
||
</div>
|
||
<div class="sg-top-item">
|
||
<div>可记录事件</div>
|
||
<div class="num"><%=showData(hSSEData_HSSE.RecordableEventNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div id="sgsjsj" class="sg-chart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bb-item">
|
||
<div class="tit">
|
||
<div class="txt tab-wrap">
|
||
<div>应急管理数据</div>
|
||
<div class="tab">
|
||
<div class="active">企业级</div>
|
||
<div>项目级</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content flexCenter">
|
||
<div class="yjglsj">
|
||
<div class="item">
|
||
<div class="item-inner flexCenterV">
|
||
<div id="yj_num_1" class="num"><%=showData(hSSEData_HSSE.CompanyComprehensivePlanNum,"--") %></div>
|
||
<div class="desc">综合预案</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner flexCenterV">
|
||
<div id="yj_num_2" class="num"><%=showData(hSSEData_HSSE.CompanySpecialPlanNum,"--") %></div>
|
||
<div class="desc">专项预案</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner flexCenterV">
|
||
<div id="yj_num_3" class="num"><%=showData(hSSEData_HSSE.CompanyOnSiteDisposalPlan,"--") %></div>
|
||
<div class="desc">现场处置预案</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner flexCenterV">
|
||
<div id="yj_num_4" class="num"><%=showData(hSSEData_HSSE.CompanyDrillNum,"--") %></div>
|
||
<div class="desc">演练次数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bb-item">
|
||
<div class="tit">
|
||
<div class="txt">安全云监控</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="sd-video-play">
|
||
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
||
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" />
|
||
</video>
|
||
<div class="sd-video-desc">
|
||
<span>实时线路：线路1</span>
|
||
<span>2020-10-10 12:40:26</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bb-item">
|
||
<div class="tit">
|
||
<div class="txt">安全风险数据</div>
|
||
</div>
|
||
<div class="content">
|
||
<div id="fxId" class="sd-chart"></div>
|
||
</div>
|
||
</div>
|
||
<div class="bb-item">
|
||
<div class="tit">
|
||
<div class="txt tab-wrap">
|
||
<div>危大工程数据</div>
|
||
<div class="tab">
|
||
<div class="active">危大工程</div>
|
||
<div>超危大工程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content flexCenter">
|
||
<div class="wdgcsj">
|
||
<div class="item">
|
||
<div class="item-inner leftPos">
|
||
<div class="desc mgbS">审批完成</div>
|
||
<div id="pro_static_1" class="num"><%=showData(hSSEData_HSSE.CompletedNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner rightPos">
|
||
<div class="desc mgbS">培训人次数</div>
|
||
<div id="pro_static_2" class="num"><%=showData(hSSEData_HSSE.TrainPersonNum,"--") %></div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner leftPos">
|
||
<div id="pro_static_3" class="num mgbS numC1"><%=showData(hSSEData_HSSE.ConstructionNum,"--") %></div>
|
||
<div class="desc">施工个数</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-inner rightPos">
|
||
<div id="pro_static_4" class="num mgbS numC2"><%=showData(hSSEData_HSSE.FinishedNum,"--") %></div>
|
||
<div class="desc">完工个数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="../res/assets/js/jquery-2.1.1.min.js"></script>
|
||
<script src="../res/assets/js/jquery.mousewheel.min.js"></script>
|
||
<script src="../res/assets/js/hScrollPane.js"></script>
|
||
<script src="../res/assets/js/echarts-5.2.0.min.js"></script>
|
||
<script src="../res/assets/js/video-7.15.0.min.js"></script>
|
||
<script src="../res/assets/js/china.js"></script>
|
||
<script>
|
||
|
||
function initMapEchart() {
|
||
// 1. 实例化对象
|
||
var myChart = echarts.init(document.querySelector(".sd-map"));
|
||
|
||
|
||
var series = [
|
||
{
|
||
name: "china map",
|
||
type: "effectScatter",
|
||
coordinateSystem: "geo",
|
||
rippleEffect: {
|
||
brushType: "stroke",
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFC00",
|
||
},
|
||
},
|
||
data: [<%=projectData%>] ,
|
||
},
|
||
];
|
||
|
||
|
||
|
||
var regions = [];
|
||
|
||
var option = {
|
||
tooltip: {
|
||
show: true,
|
||
// position: [0, 0],
|
||
trigger: "item",
|
||
triggerOn: 'click', // 提示框内有”查看详情“需要点击，所以这里需要设置成click，而不能是mousemove
|
||
confine: true,
|
||
backgroundColor: 'rgba(7,44,89,0.8)',
|
||
borderColor: 'rgba(7,166,255,0.76)',
|
||
extraCssText: 'box-shadow: 0 0 10px rgba(7,166,255, 0.8);',
|
||
padding: 20,
|
||
enterable: true,
|
||
// alwaysShowContent: true,
|
||
// hideDelay: 2000,
|
||
formatter: function (params, ticket, callback) {
|
||
if (params.seriesType == "effectScatter") {
|
||
// 标注点的描述信息 height: 247px;
|
||
var html = ''
|
||
html += '<div style="color:#fff;font-size:14px;width: 260px;height: 240px;">'
|
||
html += '<div style="font-size:18px;margin-bottom:8px;">' + params.data.name + '</div>'
|
||
//html += '<div style="width: 98px;height: 24px;margin-bottom:10px;background: #F24166;border-radius: 12px;text-align:center;">' + '在施危大工程' + '</div>'
|
||
html += '<div style="width: 240px; white-space:normal; word-break:break-all;word-break:break-all;overflow:auto; white-space:normal; margin-bottom:12px;">监理单位：' + params.data.jLUnit + '</div>'
|
||
html += '<div style="width: 240px; white-space:normal; word-break:break-all;word-break:break-all;overflow:auto; white-space:normal; margin-bottom:12px;">施工单位：' + params.data.sGUnit + '</div>'
|
||
html += '<div style="width: 240px; white-space:normal; word-break:break-all;word-break:break-all;overflow:auto; white-space:normal; margin-bottom:12px;">建设单位：' + params.data.ownUnit + '</div>'
|
||
html += '<div style="width: 240px; white-space:normal; word-break:break-all;word-break:break-all;overflow:auto; white-space:normal; margin-bottom:12px;">工程造价：' + params.data.projectMoney + '</div>'
|
||
html += '<div style="width: 240px; white-space:normal; word-break:break-all;word-break:break-all;overflow:auto; white-space:normal; ">工程地点：' + params.data.address + '</div>'
|
||
html += '<div><a style="font-size:12px;color:#1AB1FF;cursor:pointer;" href="../indexProject.aspx?projectId=' + params.data.id +'" target="_blank">项目详情>></a></div>'
|
||
html += '</div>'
|
||
return html;
|
||
// return '<div style="color:#fff;font-size:16px;width: 260px;height: 247px;">' + params.data.name + '</div>'
|
||
// return '标注区域：' + params.data.name;
|
||
}
|
||
},
|
||
},
|
||
geo: {
|
||
show: true,
|
||
map: "china",
|
||
label: {
|
||
show: true, // 显示地图上城市名称
|
||
color: "#fff",
|
||
emphasis: {
|
||
show: true,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
roam: false,
|
||
// aspectScale: 1,
|
||
zoom: 1.2,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: "#2648A6", // 地图颜色
|
||
borderColor: "#089DD4",
|
||
borderWidth: 1,
|
||
// shadowBlur: 1,
|
||
shadowColor: "#1B3783",
|
||
shadowOffsetX: -11,
|
||
shadowOffsetY: 5,
|
||
opacity: 0.6,
|
||
},
|
||
emphasis: {
|
||
areaColor: "rgb(38 72 166 / 50%)",
|
||
//areaColor: '#FFDF33'
|
||
},
|
||
},
|
||
regions: regions,
|
||
},
|
||
series: series,
|
||
};
|
||
myChart.getZr().on('click', function (params) {
|
||
console.log(params)
|
||
});
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
var Box_Height = $(".el-scrollbar").outerHeight();
|
||
var content_Height = $(".el-scrollbar__wrap").outerHeight();
|
||
var bar_Height = $(".is-vertical").outerHeight();
|
||
var isMouseDown = false;
|
||
var distance = 0;
|
||
|
||
//滚动条初始高度；
|
||
var n = Box_Height / content_Height * bar_Height
|
||
$(".is-vertical .el-scrollbar__thumb").css("height", n)
|
||
$(".is-vertical").mousedown(down);
|
||
$(window).mousemove(move);
|
||
$(window).mouseup(up);
|
||
|
||
function down(event) {
|
||
isMouseDown = true;
|
||
}
|
||
|
||
function move(event) {
|
||
event.preventDefault();
|
||
distance = event.pageY - $(".is-vertical").offset().top;
|
||
if (isMouseDown == true) {
|
||
scroll(distance)
|
||
}
|
||
}
|
||
|
||
function up() {
|
||
isMouseDown = false;
|
||
$(".el-scrollbar").find(".is-vertical").css('opacity', 0);
|
||
}
|
||
|
||
function scroll(distance) {
|
||
if (distance < 0) {
|
||
distance = 0
|
||
} else if (distance > bar_Height - $(".is-vertical .el-scrollbar__thumb").outerHeight()) {
|
||
distance = bar_Height - $(".is-vertical .el-scrollbar__thumb").outerHeight();
|
||
}
|
||
$(".is-vertical .el-scrollbar__thumb").css("top", distance)
|
||
// 滚动距离 = 滑块移动距离 ÷ 窗口高度 x 页面长度
|
||
var scroll_distance = parseInt(distance / Box_Height * content_Height)
|
||
$(".el-scrollbar__wrap").css("margin-top", -scroll_distance)
|
||
}
|
||
|
||
function initScroll() {
|
||
|
||
$(".el-scrollbar").hover(function () {
|
||
var $this = $(this)
|
||
$this.find(".is-vertical").css('opacity', 1);
|
||
}, function () {
|
||
if (isMouseDown) {
|
||
return
|
||
}
|
||
var $this = $(this)
|
||
$this.find(".is-vertical").css('opacity', 0);
|
||
})
|
||
|
||
// 滚轮事件；
|
||
$(".el-scrollbar").bind('mousewheel', function (event, delta) {
|
||
event.preventDefault()
|
||
var dir = delta > 0 ? 'Up' : 'Down',
|
||
vel = delta
|
||
distance = $(".is-vertical .el-scrollbar__thumb").offset().top - $(".el-scrollbar").offset().top;
|
||
vel > 0 ? distance -= 10 : distance += 10
|
||
scroll(distance);
|
||
});
|
||
}
|
||
|
||
//获取当前时间
|
||
function getNowTime() {
|
||
var date = new Date();
|
||
//年 getFullYear()：四位数字返回年份
|
||
var year = date.getFullYear(); //getFullYear()代替getYear()
|
||
//月 getMonth()：0 ~ 11
|
||
var month = date.getMonth() + 1;
|
||
//日 getDate()：(1 ~ 31)
|
||
var day = date.getDate();
|
||
//时 getHours()：(0 ~ 23)
|
||
var hour = date.getHours();
|
||
//分 getMinutes()： (0 ~ 59)
|
||
var minute = date.getMinutes();
|
||
//秒 getSeconds()：(0 ~ 59)
|
||
var second = date.getSeconds();
|
||
var dayweeks = date.getDay();
|
||
var weeks = new Array(
|
||
"星期日",
|
||
"星期一",
|
||
"星期二",
|
||
"星期三",
|
||
"星期四",
|
||
"星期五",
|
||
"星期六"
|
||
);
|
||
var week = weeks[dayweeks];
|
||
var time = year + '年' + this.addZero(month) + '月' + this.addZero(day) + '日 ' + this.addZero(hour) + ':' + this.addZero(minute) + ':' + this.addZero(second);
|
||
return time + ' ' + week;
|
||
}
|
||
//小于10的拼接上0字符串
|
||
function addZero(s) {
|
||
return s < 10 ? ('0' + s) : s;
|
||
}
|
||
|
||
function getDateDesc() {
|
||
var dateNow = getNowTime()
|
||
$('#sd-location-time').html(dateNow)
|
||
}
|
||
|
||
function initDate() {
|
||
setInterval(() => {
|
||
getDateDesc()
|
||
}, 1000);
|
||
}
|
||
|
||
function initPie(id, data) {
|
||
var chartDom = document.getElementById(id);
|
||
var myChartPie = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a}<br />{b}<span style="color:#000;font-weight:bold;margin-left:15px;">{d}%</span>'
|
||
},
|
||
color: ['#1AB1FF', '#FADC42', '#E56E34', '#F24166'],
|
||
series: [
|
||
{
|
||
name: '安全风险数据',
|
||
type: 'pie', // 设置图表类型为饼图
|
||
radius: ['40%', '50%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||
startAngle: 90,//起始角度 不设置该值默认为：90
|
||
data: data,
|
||
label: {
|
||
color: '#97B0D3'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
option && myChartPie.setOption(option);
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChartPie.resize();
|
||
});
|
||
}
|
||
|
||
function initSgsjsj(id, data) {
|
||
var chartDom = document.getElementById(id);
|
||
var myChartSg = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
legend: {
|
||
show: false,
|
||
top: 'bottom'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a}<br />{b}<span style="color:#000;font-weight:bold;margin-left:15px;">{c}</span>'
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
color: ['#595AFF', '#E9E931', '#FFA602', '#FF7474'],
|
||
series: [
|
||
{
|
||
name: '事故事件数据',
|
||
type: 'pie',
|
||
radius: [30, 55],
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
itemStyle: {
|
||
borderRadius: 0
|
||
},
|
||
data: data,
|
||
label: {
|
||
color: '#fff',
|
||
// formatter: '{b}\n{c}',
|
||
formatter: function (data) {
|
||
if (data.dataIndex == 0) {
|
||
return '{name1|' + data.data.name + '}\n{time|' + data.data.value + '}';
|
||
} else if (data.dataIndex == 1) {
|
||
return '{name2|' + data.data.name + '}\n{time|' + data.data.value + '}';
|
||
} else if (data.dataIndex == 2) {
|
||
return '{name3|' + data.data.name + '}\n{time|' + data.data.value + '}';
|
||
} else if (data.dataIndex == 3) {
|
||
return '{name4|' + data.data.name + '}\n{time|' + data.data.value + '}';
|
||
}
|
||
},
|
||
rich: {
|
||
name1: {
|
||
color: '#595AFF',
|
||
fontSize: 10
|
||
},
|
||
name2: {
|
||
color: '#E9E931',
|
||
fontSize: 10
|
||
},
|
||
name3: {
|
||
color: '#FFA602',
|
||
fontSize: 10
|
||
},
|
||
name4: {
|
||
color: '#FF7474',
|
||
fontSize:10
|
||
},
|
||
time: {
|
||
color: '#ffffff',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
},
|
||
labelLine: {
|
||
length: 10,
|
||
length2: 0,
|
||
maxSurfaceAngle: 50
|
||
},
|
||
}
|
||
]
|
||
};
|
||
option && myChartSg.setOption(option);
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChartSg.resize();
|
||
});
|
||
}
|
||
|
||
function initAqjdjcsj(id, data, maxNum) {
|
||
var chartDom = document.getElementById(id);
|
||
var myChartLD = echarts.init(chartDom);
|
||
var option;
|
||
option = {
|
||
title: {
|
||
text: '安全监督检查数据',
|
||
show: false
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
radar: {
|
||
splitNumber: 4, // 雷达图圈数设置
|
||
nameGap: 10,
|
||
// shape: 'circle',
|
||
indicator: [
|
||
{ name: '企业负责人\n带班检查次数', max: maxNum },
|
||
{ name: '企业综合\n检查次数', max: maxNum },
|
||
{ name: '企业专项\n检查次数', max: maxNum },
|
||
{ name: '项目负责人\n带班检查次数', max: maxNum },
|
||
{ name: '项目专项\n检查次数', max: maxNum },
|
||
{ name: '项目专业\n检查次数', max: maxNum }
|
||
],
|
||
axisName: {
|
||
color: '#97B0D3'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
width: 0,
|
||
type: 'solid'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)'
|
||
}
|
||
},
|
||
// center: ['75%', '50%'],
|
||
radius: 60,
|
||
},
|
||
series: [
|
||
{
|
||
name: '安全监督检查数据',
|
||
type: 'radar',
|
||
symbolSize: 0,
|
||
data: [
|
||
{
|
||
value: data,
|
||
name: '检查数据',
|
||
lineStyle: {
|
||
width: 3
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'radial',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#0091F8' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#00FDF6' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
option && myChartLD.setOption(option);
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChartLD.resize();
|
||
});
|
||
}
|
||
|
||
function initZgl(id, data) {
|
||
var chartDom = document.getElementById(id);
|
||
var myChartzgl = echarts.init(chartDom);
|
||
var option;
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
radius: '100%',
|
||
center: ['50%', '50%'],
|
||
splitNumber: 0, //刻度数量
|
||
startAngle: 210,
|
||
endAngle: -30,
|
||
// startAngle: 270,
|
||
// endAngle: -90,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
color: [
|
||
[
|
||
0.9, new echarts.graphic.LinearGradient(
|
||
0, 0, 1, 0, [{
|
||
offset: 0,
|
||
color: '#0347FF'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#0197FF'
|
||
}
|
||
]
|
||
)
|
||
],
|
||
[
|
||
1, '#262795'
|
||
]
|
||
]
|
||
}
|
||
},
|
||
//分隔线样式。
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
pointer: {
|
||
show: false
|
||
},
|
||
title: {
|
||
show: false
|
||
},
|
||
//仪表盘详情，用于显示数据。
|
||
detail: {
|
||
show: true,
|
||
offsetCenter: [0, 0],
|
||
color: '#fff',
|
||
formatter: function (params) {
|
||
return params + '%'
|
||
},
|
||
textStyle: {
|
||
fontSize: fontSize(36),
|
||
color: '#01ACFF'
|
||
}
|
||
},
|
||
data: [{
|
||
name: "",
|
||
value: data
|
||
}]
|
||
}
|
||
]
|
||
};
|
||
option && myChartzgl.setOption(option);
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChartzgl.resize();
|
||
});
|
||
}
|
||
|
||
function intiYhpczlsj(id, xArr, dataQ, dataZ) {
|
||
var chartDom = document.getElementById(id);
|
||
var myChartyh = echarts.init(chartDom);
|
||
var option;
|
||
|
||
const labelOption = {
|
||
rotate: 0,
|
||
align: 'center',
|
||
verticalAlign: 'middle',
|
||
position: 'insideBottom',
|
||
distance: 15
|
||
};
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
color: ['#3A7EF9', '#FFA602'],
|
||
grid: {
|
||
top: '20%',
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '8%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
// '全部', '待整改'
|
||
show: true,
|
||
data: [{
|
||
name: '全部',
|
||
textStyle: {
|
||
color: "#3A7EF9"
|
||
},
|
||
}, {
|
||
name: '待整改',
|
||
textStyle: {
|
||
color: "#FFA602"
|
||
},
|
||
}]
|
||
},
|
||
toolbox: {
|
||
show: false
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: { show: false },
|
||
data: xArr,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#84D7FE'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#84D7FE'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#2E87AC",
|
||
width: 1,
|
||
type: "dashed"
|
||
},
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '全部',
|
||
type: 'bar',
|
||
// barGap: 0,
|
||
label: labelOption,
|
||
// data: [210, 90, 155, 155, 60]
|
||
data: dataQ
|
||
},
|
||
{
|
||
name: '待整改',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
// data: [140, 40, 90, 110, 45]
|
||
data: dataZ
|
||
}
|
||
]
|
||
};
|
||
option && myChartyh.setOption(option);
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChartyh.resize();
|
||
});
|
||
}
|
||
|
||
function fontSize(res) {
|
||
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||
if (!clientWidth) return;
|
||
let fontSize = clientWidth / 1920;
|
||
return res * fontSize;
|
||
}
|
||
|
||
function initTab() {
|
||
$(document).on('click', '.tab > div', function () {
|
||
var $this = $(this)
|
||
if ($this.hasClass('active')) {
|
||
return
|
||
}
|
||
var $tab = $this.closest('.tab')
|
||
$tab.find('div').removeClass('active')
|
||
$this.addClass('active')
|
||
debugger
|
||
if ($this.html() === '一般隐患') {
|
||
$('#yhpc_1').html('<%=showData(hSSEData_HSSE.GeneralClosedNum,"--") %>');
|
||
$('#yhpc_2').html('<%=showData(hSSEData_HSSE.GeneralNotClosedNum,"--") %>');
|
||
initZgl('zgl', <%=zgl1%>)
|
||
}else if ($this.html() === '重大隐患') {
|
||
$('#yhpc_1').html('<%=showData(hSSEData_HSSE.MajorClosedNum,"--") %>');
|
||
$('#yhpc_2').html('<%=showData(hSSEData_HSSE.MajorNotClosedNum,"--") %>');
|
||
initZgl('zgl', <%=zgl2%>)
|
||
} else if ($this.html() === '企业级') {
|
||
$('#yj_num_1').html('<%=showData(hSSEData_HSSE.CompanyComprehensivePlanNum,"--") %>');
|
||
$('#yj_num_2').html('<%=showData(hSSEData_HSSE.CompanySpecialPlanNum,"--") %>');
|
||
$('#yj_num_3').html('<%=showData(hSSEData_HSSE.CompanyOnSiteDisposalPlan,"--") %>');
|
||
$('#yj_num_4').html('<%=showData(hSSEData_HSSE.CompanyDrillNum,"--") %>');
|
||
} else if ($this.html() === '项目级') {
|
||
$('#yj_num_1').html('<%=showData(hSSEData_HSSE.ProjectComprehensivePlanNum,"--") %>');
|
||
$('#yj_num_2').html('<%=showData(hSSEData_HSSE.ProjectSpecialPlanNum,"--") %>');
|
||
$('#yj_num_3').html('<%=showData(hSSEData_HSSE.ProjectOnSiteDisposalPlan,"--") %>');
|
||
$('#yj_num_4').html('<%=showData(hSSEData_HSSE.ProjectDrillNum,"--") %>');
|
||
} else if ($this.html() === '危大工程') {
|
||
$('#pro_static_1').html('<%=showData(hSSEData_HSSE.CompletedNum,"--") %>');
|
||
$('#pro_static_2').html('<%=showData(hSSEData_HSSE.TrainPersonNum,"--") %>');
|
||
$('#pro_static_3').html('<%=showData(hSSEData_HSSE.ConstructionNum,"--") %>');
|
||
$('#pro_static_4').html('<%=showData(hSSEData_HSSE.FinishedNum,"--") %>');
|
||
} else if ($this.html() === '超危大工程') {
|
||
$('#pro_static_1').html('<%=showData(hSSEData_HSSE.SuperCompletedNum,"--") %>');
|
||
$('#pro_static_2').html('<%=showData(hSSEData_HSSE.SuperTrainPersonNum,"--") %>');
|
||
$('#pro_static_3').html('<%=showData(hSSEData_HSSE.SuperConstructionNum,"--") %>');
|
||
$('#pro_static_4').html('<%=showData(hSSEData_HSSE.SuperFinishedNum,"--") %>');
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
$(function () {
|
||
initDate()
|
||
initZgl('zgl',<%=zgl1%>)
|
||
var dataYHQ = [<%=dataYHQ%>]
|
||
var dataYHZ = [<%=dataYHZ%>]
|
||
var xArrYH = [<%=xArrYH%>]
|
||
intiYhpczlsj('yhpczlsj', xArrYH, dataYHQ, dataYHZ)
|
||
var dataaq = [<%=showData(hSSEData_HSSE.CompanyLeadShiftCheckNum,"0")%>, <%=showData(hSSEData_HSSE.CompanyComprehensiveCheckNum,"0")%>, <%=showData(hSSEData_HSSE.CompanySpecialCheckNum,"0")%>, <%=showData(hSSEData_HSSE.ProjectLeadShiftCheckNum,"0")%>, <%=showData(hSSEData_HSSE.ProjectSpecialCheckNum,"0")%>, <%=showData(hSSEData_HSSE.ProjectMajorCheckNum,"0")%>]
|
||
initAqjdjcsj('aqjdjcsj', dataaq, 50)
|
||
var datasg = [
|
||
{ value: <%=showData(hSSEData_HSSE.GeneralAccidentNum,"0")%>, name: '一般事故' },
|
||
{ value: <%=showData(hSSEData_HSSE.MajorAccidentNum,"0")%>, name: '较大事故' },
|
||
{ value: <%=showData(hSSEData_HSSE.SeriousAccidentNum,"0")%>, name: '重大事故' },
|
||
{ value: <%=showData(hSSEData_HSSE.SpecialSeriousAccidentNum,"0")%>, name: '特别重大' },
|
||
]
|
||
initSgsjsj('sgsjsj', datasg)
|
||
var data = [ // 数据数组，name 为数据项名称，value 为数据项值
|
||
{ value: <%=showData(hSSEData_HSSE.CompletedNum,"0")%>, name: '一般' },
|
||
{ value: <%=showData(hSSEData_HSSE.LowRiskNum,"0")%>, name: '低风险' },
|
||
{ value: <%=showData(hSSEData_HSSE.MediumRiskNum,"0")%>, name: '中风险' },
|
||
{ value: <%=showData(hSSEData_HSSE.HighRiskNum,"0")%>, name: '高风险' },
|
||
]
|
||
initPie('fxId', data)
|
||
initMapEchart()
|
||
initTab()
|
||
// initScroll()
|
||
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|