CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/common/mainMenu_HSSE2.aspx

1271 lines
62 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ 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"/>
<link rel="stylesheet" href="../res/assets/css/xfk.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 js-hover" data-type="HeadOfficeNum">
<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 js-hover" data-type="Branch">
<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 js-hover" data-type="ProjectNum">
<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 js-hover" data-type="SafetyInjectionEngineer">
<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 js-hover" data-type="Certificate">
<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 js-hover" data-type="SafetyMeetingData">
<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 js-hover" data-type="BeUnderConstructionNum">
<div class="desc desc-cl1">在建项目</div>
<div class="desc desc-cl1"><%=showData(hSSEData_HSSE.BeUnderConstructionNum,"--") %></div>
</div>
<div class="i-item js-hover" data-type="ShutdownNum">
<div class="desc desc-cl2">停工项目</div>
<div class="desc desc-cl2"><%=showData(hSSEData_HSSE.ShutdownNum,"--") %></div>
</div>
<div class="i-item js-hover" data-type="JoinConstructionPersonNum">
<div class="desc desc-cl3">参建人数</div>
<div class="desc desc-cl3"><%=showData(hSSEData_HSSE.JoinConstructionPersonNum,"--") %></div>
</div>
<div class="i-item js-hover" data-type="MajorProjectsUnderConstructionNum">
<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 js-hover" data-type="WorkingHourData">
<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 js-hover" data-type="SafeTrainData">
<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 js-hover" data-type="EnvironmentalData">
<div class="ii-desc">环保数据</div>
<div class="ii-item bg5">
<div class="desc">能耗总量<br/>(万吨标准煤)</div>
<div class="num num-cl3"><%=showDecimalData(hSSEData_HSSE.TotalEnergyConsumption,"--") %></div>
<%--<div class="num num-cl3">45.5708</div>--%>
</div>
<div class="ii-item bg5">
<div class="desc">万元营业收入综合能耗<br/>(吨标准煤/万元)</div>
<div class="num num-cl3"><%=showDecimalData(hSSEData_HSSE.IncomeComprehensiveEnergyConsumption,"--") %></div>
<%--<div class="num num-cl3">0.9664</div>--%>
</div>
<div class="ii-item bg5">
<div class="desc">二氧化碳<br/>(万吨)</div>
<div class="num num-cl3"><%=showDecimalData(hSSEData_HSSE.NewWaterConsumption,"--") %></div>
<%--<div class="num num-cl3">780.7763</div>--%>
</div>
</div>
</div>
</div>
<div class="sd-top-right">
<div class="str-top flexCenter">
<div class="i-item js-hover" data-type="SafeCost">
<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 js-hover" data-type="ConstructionEquipment">
<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 js-hover" data-type="HighRiskWorkPermit">
<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" data-type="yb">一般隐患</div>
<div data-type="zd">重大隐患</div>
</div>
</div>
</div>
<div class="strb-top flexCenter js-hover" data-type="yhpc" data-tabType="yhpc">
<div class="strbt-left js-hover" >
<div class="sl-item flexCenterV js-hover" >
<div class="desc">整改闭环项</div>
<div id="yhpc_1" class="num"><%=showData(hSSEData_HSSE.GeneralClosedNum,"--") %></div>
</div>
<div class="sl-item flexCenterV js-hover" >
<div class="desc">未整改完成项</div>
<div id="yhpc_2" class="num1"><%=showData(hSSEData_HSSE.GeneralNotClosedNum,"--") %></div>
</div>
</div>
<div class="strbt-right js-hover" >
<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 js-hover" data-type="SafetySupervisionAndInspectionData">
<div class="tit">
<div class="txt">安全监督检查数据</div>
</div>
<div class="content">
<div id="aqjdjcsj" class="sd-chart"></div>
</div>
</div>
<div class="bb-item js-hover" data-type="AccidentEventData">
<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" data-type="qyj">企业级</div>
<div data-type="xmj">项目级</div>
</div>
</div>
</div>
<div class="content flexCenter">
<div class="yjglsj">
<div class="item js-hover" data-type="yjglsj" data-tabType="yjglsj">
<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 js-hover" data-type="yjglsj" data-tabType="yjglsj">
<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 js-hover" data-type="yjglsj" data-tabType="yjglsj">
<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 js-hover" data-type="yjglsj" data-tabType="yjglsj">
<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 js-hover" data-type="Video">
<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 js-hover" data-type="SafeRiskData">
<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" data-type="large">危大工程</div>
<div data-type="super">超危大工程</div>
</div>
</div>
</div>
<div class="content flexCenter">
<div class="wdgcsj">
<div class="item js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<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 js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<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 js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<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 js-hover" data-type="wdgcsj" data-tabType="wdgcsj">
<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>
<div class="hover-wrap">
<div class="hover-item">
</div>
</div>
<div class="click-wrap" >
<div class="click-close"></div>
<div class="click-item">
<%-- <iframe src="../SysManage/Unit.aspx" width="100%" height="450"></iframe>--%>
<iframe src="" id="iframe" width="100%" height="450"></iframe>
</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 GetClickHtml(obj) {
var $this = $(obj), type = $this.attr('data-type'), tabType = $this.attr('data-tabType') || '';
var title = '';
if (tabType != '') {
tabType = $this.closest('.bb-item').find('.tab-wrap .tab .active').attr('data-type')
if (tabType == null) {
tabType = $this.closest('.str-bottom').find('.tab-wrap .tab .active').attr('data-type')
}
}
console.log(type)
if (type == 'HeadOfficeNum') {
$('iframe').attr('src', '../DataShow/CompanyPerson.aspx') //企业总部
window.open("../DataShow/CompanyPerson.aspx")
}
else if (type == 'Branch') {
$('iframe').attr('src', '../DataShow/CompanyPerson.aspx') //分支机构
window.open("../DataShow/CompanyPerson.aspx")
}
else if (type == 'ProjectNum') {
$('iframe').attr('src', '../DataShow/ProjectPerson.aspx')//项目人员
window.open("../DataShow/ProjectPerson.aspx")
}
else if (type == 'SafetyInjectionEngineer') {
$('iframe').attr('src', '../DataShow/ProjectPerson.aspx')//项目人员
window.open("../DataShow/ProjectPerson.aspx")
}
else if (type == 'Certificate') {
$('iframe').attr('src', '../DataShow/ProjectPerson.aspx') //项目人员
window.open("../DataShow/ProjectPerson.aspx")
}
else if (type == 'SafetyMeetingData') {
$('iframe').attr('src', '../DataShow/Meeting.aspx') //安全会议数据
window.open("../DataShow/Meeting.aspx")
}
else if (type == 'BeUnderConstructionNum') {
$('iframe').attr('src', '../DataShow/Project.aspx') //项目信息
window.open("../DataShow/Project.aspx")
}
else if (type == 'ShutdownNum') {
$('iframe').attr('src', '../DataShow/Project.aspx') //项目信息
window.open("../DataShow/Project.aspx")
}
else if (type == 'JoinConstructionPersonNum') {
$('iframe').attr('src', '../DataShow/Project.aspx') //项目信息
window.open("../DataShow/Project.aspx")
}
else if (type == 'MajorProjectsUnderConstructionNum') {
$('iframe').attr('src', '../DataShow/Project.aspx') //项目信息
window.open("../DataShow/Project.aspx")
}
else if (type == 'WorkingHourData') {
$('iframe').attr('src', '../DataShow/WorkingHours.aspx') //工时数据
window.open("../DataShow/WorkingHours.aspx")
}
else if (type == 'SafeTrainData') {
$('iframe').attr('src', '../DataShow/EduTrain.aspx') //安全教育培训
window.open("../DataShow/EduTrain.aspx")
}
else if (type == 'EnvironmentalData') {
$('iframe').attr('src', '../DataShow/Environmental.aspx') //环保数据
window.open("../DataShow/Environmental.aspx")
}
else if (type == 'SafeCost') {
$('iframe').attr('src', '../DataShow/SecurityCost.aspx') //安全费用
window.open("../DataShow/SecurityCost.aspx")
}
else if (type == 'ConstructionEquipment') {
$('iframe').attr('src', '../DataShow/ConstructionEquipment.aspx') //施工机具设备
window.open("../DataShow/ConstructionEquipment.aspx")
}
else if (type == 'HighRiskWorkPermit') {
$('iframe').attr('src', '../DataShow/License.aspx') //高风险作业许可
window.open("../DataShow/License.aspx")
}
else if (type == 'SafetySupervisionAndInspectionData') {
$('iframe').attr('src', '../DataShow/Check.aspx') //安全监督检查
window.open("../DataShow/Check.aspx")
}
else if (type == 'AccidentEventData') {
$('iframe').attr('src', '../DataShow/Accident.aspx') //事故事件数据
window.open("../DataShow/Accident.aspx")
}
else if (type == 'SafeRiskData') {
$('iframe').attr('src', '../DataShow/SecurityRisk.aspx') //安全风险数据
window.open("../DataShow/SecurityRisk.aspx")
}
else if (type == 'yjglsj' && tabType == "qyj") {
$('iframe').attr('src', '../DataShow/Emergency.aspx')//应急管理数据-企业级
window.open("../DataShow/Emergency.aspx")
}
else if (type == 'yjglsj' && tabType == "xmj") {
$('iframe').attr('src', '../DataShow/Emergency.aspx')//应急管理数据-项目级
window.open("../DataShow/Emergency.aspx")
}
else if (type == 'wdgcsj' && tabType == "large") {
$('iframe').attr('src', '../DataShow/LargeEngineering.aspx')//危大工程- 危大工程
window.open("../DataShow/LargeEngineering.aspx")
}
else if (type == 'wdgcsj' && tabType == "super") {
$('iframe').attr('src', '../DataShow/LargeEngineering.aspx') // 危大工程 - 超危大工程
window.open("../DataShow/LargeEngineering.aspx")
}
else if (type == 'yhpc' && tabType == "yb") {
$('iframe').attr('src', '../DataShow/HiddenRectification.aspx') //隐患排查-一般隐患
window.open("../DataShow/HiddenRectification.aspx")
}
else if (type == 'yhpc' && tabType == "zd") {
$('iframe').attr('src', '../DataShow/HiddenRectification.aspx')//隐患排查-重大隐患
window.open("../DataShow/HiddenRectification.aspx")
}/*
else if (type == 'Video') {
$('iframe').attr('src', '../InterfacePopup/HSSE/VideoView.aspx') //视频监控
}*/
else {
// $('iframe').attr('src', '../SysManage/Unit.aspx')
// window.open("../DataShow/Unit.aspx")
console.log("通用")
}
}
function initClick() {
// 设置iframe高度
$('.click-wrap .click-item iframe').height($('.click-wrap').height())
$(".js-hover").click(function () {
var htmlContent = GetClickHtml(this)
// $('.click-wrap').show()
// $(".hover-wrap").hide()
})
$('.click-close').click(function () {
$('.click-wrap').hide()
})
}
$(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")%>]
var max = Math.max(<%=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, max)
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.GeneralRiskNum,"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()
initClick();
});
</script>
</body>
</html>