437 lines
15 KiB
Plaintext
437 lines
15 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_SYHSE.aspx.cs" Inherits="FineUIPro.Web.common.mainMenu_SYHSE" %>
|
|
|
|
<!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/index3.css"/>
|
|
</head>
|
|
<body>
|
|
<div class="sd-index3-body">
|
|
<div class="sd-header" style="display:none">
|
|
<div class="sd-header-title">
|
|
实业板块数据
|
|
</div>
|
|
</div>
|
|
<div class="sd-body">
|
|
<div class="sb-left">
|
|
<div class="sbl-top bg">
|
|
<div class="tit">风险管控</div>
|
|
<div class="pic" id="fxgk"></div>
|
|
</div>
|
|
<div class="sbl-bottom bg">
|
|
<div class="tit">重大危险源</div>
|
|
<div class="sblb-list">
|
|
<div class="sblbl-item">
|
|
<div class="desc">分级责任人</div>
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.GradedResponsiblePersonNum,"--") %></div>
|
|
</div>
|
|
<div class="sblbl-item">
|
|
<div class="desc">包保责任人</div>
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.ChargeInsurancePersonNum,"--") %></div>
|
|
</div>
|
|
<div class="sblbl-item">
|
|
<div class="desc">设计量</div>
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.DesignQuantity,"--") %></div>
|
|
</div>
|
|
<div class="sblbl-item">
|
|
<div class="desc">运行量</div>
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.RunningCapacity,"--") %></div>
|
|
</div>
|
|
<div class="sblbl-item">
|
|
<div class="desc">联锁设定值</div>
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.InterlockSettingValue,"--") %></div>
|
|
</div>
|
|
<div class="sblbl-item">
|
|
<div class="desc">视频监控</div>
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.VideoSurveillanceNum,"--") %></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sb-right">
|
|
<div class="sbr-top flexCenter">
|
|
<div class="sbrt-left ">
|
|
<div class="sbrtl-top bg">
|
|
<div class="tit">基本数据</div>
|
|
<div class="sbrtlt-list">
|
|
<div class="sbrtlt-item item-bg1">
|
|
<div class="sbrtlti-desc flexCenterV">
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.TotalWorkinghours,"--") %></div>
|
|
<div class="desc">总工时数</div>
|
|
</div>
|
|
</div>
|
|
<div class="sbrtlt-item item-bg2">
|
|
<div class="sbrtlti-desc flexCenterV">
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.SafeWorkinghours,"--") %></div>
|
|
<div class="desc">安全工时数</div>
|
|
</div>
|
|
</div>
|
|
<div class="sbrtlt-item item-bg3">
|
|
<div class="sbrtlti-desc flexCenterV">
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.LostWorkinghours,"--") %></div>
|
|
<div class="desc">损失工时数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sbrtl-bottom bg">
|
|
<div class="tit">环保数据</div>
|
|
<div class="sbrtlb-list">
|
|
<div class="sbrtlb-item">
|
|
<div class="num item-bg1 flexCenter"><%=showData(sYHSEData_SYHSE.TotalEnergyConsumption,"--") %></div>
|
|
<div class="desc">能耗总量</div>
|
|
</div>
|
|
<div class="sbrtlb-item">
|
|
<div class="num item-bg2 flexCenter"><%=showData(sYHSEData_SYHSE.IncomeComprehensiveEnergyConsumption,"--") %></div>
|
|
<div class="desc mt">万元营业收入综合能耗</div>
|
|
</div>
|
|
<div class="sbrtlb-item">
|
|
<div class="num item-bg3 flexCenter"><%=showData(sYHSEData_SYHSE.NewWaterConsumption,"--") %></div>
|
|
<div class="desc">用新水量</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sbrt-right bg">
|
|
<div class="tit">隐患排查治理</div>
|
|
<div class="sbrtr-content">
|
|
<div class="item">
|
|
<div class="i-tit tbg tbg1">一般隐患项</div>
|
|
<div class="i-list flexCenter">
|
|
<div class="il-item bg1 flexCenterV">
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.GeneralClosedNum,"--") %></div>
|
|
<div class="desc">整改闭环项</div>
|
|
</div>
|
|
<div class="il-item bg2 flexCenterV">
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.GeneralNotClosedNum,"--") %></div>
|
|
<div class="desc">未整改完成项</div>
|
|
</div>
|
|
<div class="il-item bg3 flexCenterV">
|
|
<div class="num"><%=generalRate %></div>
|
|
<div class="desc">整改率</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="i-tit tbg tbg2">重大隐患项</div>
|
|
<div class="i-list flexCenter">
|
|
<div class="il-item bg1 flexCenterV">
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.MajorClosedNum,"--") %></div>
|
|
<div class="desc">整改闭环项</div>
|
|
</div>
|
|
<div class="il-item bg2 flexCenterV">
|
|
<div class="num"><%=showData(sYHSEData_SYHSE.MajorNotClosedNum,"--") %></div>
|
|
<div class="desc">未整改完成项</div>
|
|
</div>
|
|
<div class="il-item bg3 flexCenterV">
|
|
<div class="num"><%=majorRate %></div>
|
|
<div class="desc">整改率</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sbr-bottom bg">
|
|
<div class="tit">作业管理</div>
|
|
<div class="zygl" id="zygl"></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>
|
|
|
|
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 initFxgk (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: ['20%', '70%'],
|
|
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: 13
|
|
},
|
|
name2: {
|
|
color: '#E9E931',
|
|
fontSize: 13
|
|
},
|
|
name3: {
|
|
color: '#FFA602',
|
|
fontSize: 13
|
|
},
|
|
name4: {
|
|
color: '#FF7474',
|
|
fontSize: 13
|
|
},
|
|
time: {
|
|
color: '#ffffff',
|
|
fontSize: 15
|
|
}
|
|
},
|
|
},
|
|
labelLine: {
|
|
length: 15,
|
|
length2: 20,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
}
|
|
]
|
|
};
|
|
option && myChartSg.setOption(option);
|
|
|
|
window.addEventListener("resize", function () {
|
|
myChartSg.resize();
|
|
});
|
|
}
|
|
|
|
function intiZygl (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: ['#12CDA2', '#959595'],
|
|
grid: {
|
|
top:'15%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '8%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
// '许可项', '关闭项'
|
|
show: true,
|
|
right:"3%",
|
|
top:'0',
|
|
data: [{
|
|
name: '许可项',
|
|
textStyle: {
|
|
color: "#12CDA2"
|
|
},
|
|
}, {
|
|
name: '关闭项',
|
|
textStyle: {
|
|
color: "#959595"
|
|
},
|
|
}]
|
|
},
|
|
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,
|
|
barWidth: '20%',
|
|
// data: [210, 90, 155, 155, 60]
|
|
data: dataQ
|
|
},
|
|
{
|
|
name: '关闭项',
|
|
type: 'bar',
|
|
label: labelOption,
|
|
barWidth: '20%',
|
|
// 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 () {
|
|
var dataYHQ = [<%=showData(sYHSEData_SYHSE.HotWorkPermitNum,"0") %>, <%=showData(sYHSEData_SYHSE.HighPermitNum,"0") %>, <%=showData(sYHSEData_SYHSE.TemporaryElectricityPermitNum,"0") %>, <%=showData(sYHSEData_SYHSE.BlindPlatePermitNum,"0") %>, <%=showData(sYHSEData_SYHSE.GroundbreakingPermitNum,"0") %>, <%=showData(sYHSEData_SYHSE.OpenCircuitPermitNum,"0") %>, <%=showData(sYHSEData_SYHSE.HoistingPermitNum,"0") %>]
|
|
var dataYHZ = [<%=showData(sYHSEData_SYHSE.HotWorkClosedNum,"0") %>, <%=showData(sYHSEData_SYHSE.HighClosedNum,"0") %>, <%=showData(sYHSEData_SYHSE.TemporaryElectricityClosedNum,"0") %>, <%=showData(sYHSEData_SYHSE.BlindPlatePermitNum,"0") %>, <%=showData(sYHSEData_SYHSE.GroundbreakingClosedNum,"0") %>, <%=showData(sYHSEData_SYHSE.OpenCircuitClosedNum,"0") %>, <%=showData(sYHSEData_SYHSE.HoistingClosedNum,"0") %>]
|
|
var xArrYH = ['动火', '高处', '临电', '盲板', '动土', '断路', '吊装']
|
|
intiZygl('zygl', xArrYH, dataYHQ, dataYHZ)
|
|
var datasg = [
|
|
{ value: <%=showData(sYHSEData_SYHSE.GeneralRiskNum, "0")%>, name: '一般风险' },
|
|
{ value: <%=showData(sYHSEData_SYHSE.LowRiskNum, "0")%>, name: '低风险' },
|
|
{ value: <%=showData(sYHSEData_SYHSE.MediumRiskNum, "0")%>, name: '中风险' },
|
|
{ value: <%=showData(sYHSEData_SYHSE.HighRiskNum, "0")%>, name: '高风险' },
|
|
]
|
|
initFxgk('fxgk', datasg)
|
|
initScroll()
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|