977 lines
32 KiB
Plaintext
977 lines
32 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_HSSE.aspx.cs" Inherits="FineUIPro.Web.mainMenu_HSSE" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head id="Head1" runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<title>首页</title>
|
|||
|
|
<link href="../res/index/css/reset.css" rel="stylesheet" />
|
|||
|
|
<link href="../res/index/css/home.css" rel="stylesheet" />
|
|||
|
|
<link href="../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
|
|||
|
|
<style type="text/css">
|
|||
|
|
* {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flexV {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrap {
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-wrap {
|
|||
|
|
padding: 0;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-wrap:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bw-item-content {
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bw-b-bottom {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.itemlr {
|
|||
|
|
margin: 0 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bw-b-bottom-up {
|
|||
|
|
border-radius: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info {
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
color: red;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info .tit {
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yj-info .tel {
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-wrap {
|
|||
|
|
left: auto;
|
|||
|
|
right: 15px;
|
|||
|
|
top: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab .t-item {
|
|||
|
|
width: auto;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-list {
|
|||
|
|
height: 100px;
|
|||
|
|
padding: 15px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
color: #fff;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-list .bl-left {
|
|||
|
|
float: left;
|
|||
|
|
margin-right: 30px;
|
|||
|
|
margin-left: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-list .bl-right {
|
|||
|
|
float: right;
|
|||
|
|
margin-right: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab .t-item {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex: 3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body .content-item {
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.part-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.part-tag {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: #107ca2;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.part-tag + .part-tag {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-top {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #fff;
|
|||
|
|
border-bottom: 1px solid #f2f2f2;
|
|||
|
|
padding: 10px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unit {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
text-align: right;
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding-right: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unit-btn {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 10px 0px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.do-btn {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #107ca2;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
flex: 1;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px 0px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.base-wrap{
|
|||
|
|
padding:15px 10px;
|
|||
|
|
height:100%;
|
|||
|
|
}
|
|||
|
|
.base-wrap .base-tit{
|
|||
|
|
font-size:12px;
|
|||
|
|
color:#00a2e9
|
|||
|
|
}
|
|||
|
|
.base-wrap .base-txt-wrap{
|
|||
|
|
margin-top:5px;
|
|||
|
|
/*background-color:#f2f5f7;*/
|
|||
|
|
border-radius:5px;
|
|||
|
|
color:#FFAE72;
|
|||
|
|
height:100%;
|
|||
|
|
align-items:center;
|
|||
|
|
justify-content:space-around;
|
|||
|
|
}
|
|||
|
|
.base-wrap .base-txt-wrap .num-1{
|
|||
|
|
background-color:#2A759C;
|
|||
|
|
padding:5px;
|
|||
|
|
font-size:40px;
|
|||
|
|
}
|
|||
|
|
.yj-info-1{
|
|||
|
|
height:100%;
|
|||
|
|
}
|
|||
|
|
.yj-info-1-list{
|
|||
|
|
color:#fff;
|
|||
|
|
}
|
|||
|
|
.yj-info-1 .telbg{
|
|||
|
|
height:100%;
|
|||
|
|
width:85px;
|
|||
|
|
background: url(../res/index/images/tel.png) center center no-repeat;
|
|||
|
|
background-size: contain;
|
|||
|
|
}
|
|||
|
|
.yj-info-1-list-item{
|
|||
|
|
padding:0 5px;
|
|||
|
|
background-color:#2A759C;
|
|||
|
|
margin-bottom:5px;
|
|||
|
|
font-size:12px;
|
|||
|
|
align-items:center;
|
|||
|
|
justify-content:center;
|
|||
|
|
}
|
|||
|
|
.yj-info-1-list-item:last-child{
|
|||
|
|
margin-bottom:0;
|
|||
|
|
}
|
|||
|
|
.yj-info-1-list-item .telnum{
|
|||
|
|
text-align:center;
|
|||
|
|
align-items:center;
|
|||
|
|
justify-content:center;
|
|||
|
|
display:flex;
|
|||
|
|
}
|
|||
|
|
.yj-info-1-info{
|
|||
|
|
color:#fff;
|
|||
|
|
background-color:#2A759C;
|
|||
|
|
text-align:center;
|
|||
|
|
font-size:16px;
|
|||
|
|
height:40px;
|
|||
|
|
line-height:40px;
|
|||
|
|
margin-top:5px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body style="background-color:transparent">
|
|||
|
|
<div class="wrap flex flexV">
|
|||
|
|
<div class="bottom-wrap flex1">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="item flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="bw-item-content pd0">
|
|||
|
|
<div class="base-wrap flex flexV">
|
|||
|
|
<div class="base-tit">当前现场总人数</div>
|
|||
|
|
<div class="base-txt-wrap flex flex1">
|
|||
|
|
<div class="num-1 specialNum" runat="server" id="divperson">0</div>
|
|||
|
|
<div class="num-1 specialNum" runat="server" id="person00">0</div>
|
|||
|
|
<div class="num-1 specialNum" runat="server" id="person01">0</div>
|
|||
|
|
<div class="num-1 specialNum" runat="server" id="person02">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item flex3 itemlr">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="bw-item-content">
|
|||
|
|
<div id='two' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="bw-item-content">
|
|||
|
|
<div class="yj-info-1 flex flexV">
|
|||
|
|
<div class="flex flex1">
|
|||
|
|
<div style="height:100%;">
|
|||
|
|
<div class="telbg"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex1 flex flexV yj-info-1-list">
|
|||
|
|
<div class="flex flex1 yj-info-1-list-item">
|
|||
|
|
<div class="flex1 telnum">110</div>
|
|||
|
|
<div>报警</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex1 yj-info-1-list-item">
|
|||
|
|
<div class="flex1 telnum">119</div>
|
|||
|
|
<div>消防</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex1 yj-info-1-list-item">
|
|||
|
|
<div class="flex1 telnum">120</div>
|
|||
|
|
<div>急救</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex1 yj-info-1-list-item">
|
|||
|
|
<div id="xmb" runat="server" class="flex1 telnum"></div>
|
|||
|
|
<div>项目部</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="yj-info-1-info">
|
|||
|
|
<button type="button" class="yj-info-1-info" onclick="ope();" style="width: 100%;vertical-align: middle;border: none;height: auto;line-height:1;">应 急 流 程</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom-wrap flex1">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="tab-wrap">
|
|||
|
|
<div class="tab" data-value="4">
|
|||
|
|
<div class="t-item active">施工分包商</div>
|
|||
|
|
<div class="spline"></div>
|
|||
|
|
<div class="t-item">问题类别</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bw-item-content">
|
|||
|
|
<div id='four' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom-wrap flex1">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="item flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="bw-item-content">
|
|||
|
|
<div id='three' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item flex2 itemlr">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="bw-item-content">
|
|||
|
|
<div id='five' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up">
|
|||
|
|
<div class="bw-item-content">
|
|||
|
|
<div id='six' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/index/js/echarts.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var basePath = '<%= ResolveUrl("~/") %>';
|
|||
|
|
function ope() {
|
|||
|
|
parent.addExampleTab({
|
|||
|
|
id: 'hello_fineui_tab',
|
|||
|
|
iframeUrl: basePath + 'HSSE/Emergency/EmergencyProcess.aspx',
|
|||
|
|
title: '应急流程',
|
|||
|
|
refreshWhenExist: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function category_Two(id, xArr, data) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: '项目安全人工时',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#00a2e9',
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: '300'
|
|||
|
|
},
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
},
|
|||
|
|
formatter: function (value) {
|
|||
|
|
//return value;
|
|||
|
|
var ret = "";//拼接加\n返回的类目项
|
|||
|
|
var maxLength = 5;//每项显示文字个数
|
|||
|
|
var valLength = value.length;//X轴类目项的文字个数
|
|||
|
|
if (valLength > 10) {
|
|||
|
|
ret = value.substring(0, 5) + "\n" + value.substring(5, 9) + '...';
|
|||
|
|
} else if (valLength > 5) {
|
|||
|
|
ret = value.substring(0, 5) + "\n" + value.substring(5, value.length - 1);
|
|||
|
|
} else {
|
|||
|
|
ret = value;
|
|||
|
|
}
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
data: xArr
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: data,
|
|||
|
|
grid: {
|
|||
|
|
top: '15%',
|
|||
|
|
left: '10',
|
|||
|
|
right: '10',
|
|||
|
|
bottom: '10%',
|
|||
|
|
containLabel: true,
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'rgba(9,199,113, 1)'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
option.dataZoom = [//给x轴设置滚动条
|
|||
|
|
{
|
|||
|
|
start: 0,//默认为0
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 9,
|
|||
|
|
height: 6,
|
|||
|
|
bottom: '0%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true,
|
|||
|
|
showDetail: false,
|
|||
|
|
borderColor: "rgba(43,48,67,0.8)",
|
|||
|
|
fillerColor: '#269cdb',//滑动块的颜色
|
|||
|
|
backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
|
|||
|
|
}]
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var two =<%=Two %>;
|
|||
|
|
var xArr = two.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '累计人工时',
|
|||
|
|
type: 'bar',
|
|||
|
|
|
|||
|
|
data: two.series[0].data
|
|||
|
|
}]
|
|||
|
|
category_Two('two', xArr, data)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category_Three(id, xArr, data) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: '作业许可数量统计',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#00a2e9',
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: '300'
|
|||
|
|
},
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)',
|
|||
|
|
fontSize: 10,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
data: xArr
|
|||
|
|
},
|
|||
|
|
series: data,
|
|||
|
|
grid: {
|
|||
|
|
top: '15%',
|
|||
|
|
left: '10',
|
|||
|
|
right: '10',
|
|||
|
|
bottom: '0%',
|
|||
|
|
containLabel: true,
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'rgba(200,201,10, 1)'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var three =<%=Three %>;
|
|||
|
|
var xArr = three.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '作业许可数量统计',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: three.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#7BB259' } }
|
|||
|
|
}]
|
|||
|
|
category_Three('three', xArr, data)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category_Four(id, xArr, series) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
// left:'center',
|
|||
|
|
text: '安全检查问题统计',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#00a2e9',
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: '300',
|
|||
|
|
},
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
color: ['#88cc00', '#AE4B23'],
|
|||
|
|
legend: {
|
|||
|
|
left: '15%',
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {//图例文字的样式
|
|||
|
|
color: '#00a2e9',
|
|||
|
|
fontSize: 10,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: 0,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var newParamsName = "";// 最终拼接成的字符串
|
|||
|
|
var paramsNameNumber = params.length;// 实际标签的个数
|
|||
|
|
var provideNumber = 14;// 每行能显示的字的个数
|
|||
|
|
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
|
|||
|
|
/**
|
|||
|
|
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|||
|
|
*/
|
|||
|
|
// 条件等同于rowNumber>1
|
|||
|
|
if (paramsNameNumber > provideNumber) {
|
|||
|
|
/** 循环每一行,p表示行 */
|
|||
|
|
for (var p = 0; p < rowNumber; p++) {
|
|||
|
|
var tempStr = "";// 表示每一次截取的字符串
|
|||
|
|
var start = p * provideNumber;// 开始截取的位置
|
|||
|
|
var end = start + provideNumber;// 结束截取的位置
|
|||
|
|
// 此处特殊处理最后一行的索引值
|
|||
|
|
if (p == rowNumber - 1) {
|
|||
|
|
// 最后一次不换行
|
|||
|
|
tempStr = params.substring(start, paramsNameNumber);
|
|||
|
|
} else {
|
|||
|
|
// 每一次拼接字符串并换行
|
|||
|
|
tempStr = params.substring(start, end) + "\n";
|
|||
|
|
}
|
|||
|
|
newParamsName += tempStr;// 最终拼成的字符串
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
// 将旧标签的值赋给新标签
|
|||
|
|
newParamsName = params;
|
|||
|
|
}
|
|||
|
|
//将最终的字符串返回
|
|||
|
|
return newParamsName
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
data: xArr
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: series,
|
|||
|
|
grid: {
|
|||
|
|
top: '25%',
|
|||
|
|
left: '0%',
|
|||
|
|
right: '0%',
|
|||
|
|
bottom: '10%',
|
|||
|
|
containLabel: true,
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|||
|
|
},
|
|||
|
|
//itemStyle: {
|
|||
|
|
// color: 'rgba(200,201,10, 1)'
|
|||
|
|
//},
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
option.dataZoom = [//给x轴设置滚动条
|
|||
|
|
{
|
|||
|
|
start: 0,//默认为0
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 9,
|
|||
|
|
height: 6,
|
|||
|
|
bottom: '0%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true,
|
|||
|
|
showDetail: false,
|
|||
|
|
borderColor: "rgba(43,48,67,0.8)",
|
|||
|
|
fillerColor: '#269cdb',//滑动块的颜色
|
|||
|
|
backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
|
|||
|
|
}]
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
var four1 =<%=Four1 %>;
|
|||
|
|
var xArr = four1.categories
|
|||
|
|
var series = [{
|
|||
|
|
name: '待整改',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
barGap:0.05,
|
|||
|
|
data: four1.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#88cc00' } }
|
|||
|
|
}, {
|
|||
|
|
name: '全部',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: four1.series[0].data2,
|
|||
|
|
itemStyle: { normal: { color: '#AE4B23' } }
|
|||
|
|
}];
|
|||
|
|
category_Four('four', xArr, series)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category_Five(id, xArr, data) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: '入场安全培训',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#00a2e9',
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: '300'
|
|||
|
|
},
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
fontSize:10,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
data: xArr
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: data,
|
|||
|
|
grid: {
|
|||
|
|
top: '15%',
|
|||
|
|
left: '10',
|
|||
|
|
right: '10',
|
|||
|
|
bottom: '10%',
|
|||
|
|
containLabel: true,
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'rgba(200,201,10, 1)'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(26, 177, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
option.dataZoom = [//给x轴设置滚动条
|
|||
|
|
{
|
|||
|
|
start: 0,//默认为0
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 9,
|
|||
|
|
height: 6,
|
|||
|
|
bottom: '0%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true,
|
|||
|
|
showDetail: false,
|
|||
|
|
borderColor: "rgba(43,48,67,0.8)",
|
|||
|
|
fillerColor: '#269cdb',//滑动块的颜色
|
|||
|
|
backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
|
|||
|
|
}]
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
var five =<%=Five %>;
|
|||
|
|
var xArr = five.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '总数',
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
data: five.series[1].data,
|
|||
|
|
itemStyle: { normal: { color: 'rgba(26, 177, 255, 0.8)'} }
|
|||
|
|
},{
|
|||
|
|
name: '当月',
|
|||
|
|
type: 'bar',
|
|||
|
|
|
|||
|
|
data: five.series[0].data
|
|||
|
|
}]
|
|||
|
|
|
|||
|
|
category_Five('five', xArr, data)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category_six(id, xArr, data,data2) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: [{
|
|||
|
|
text: '事故统计',
|
|||
|
|
top: '0',
|
|||
|
|
left: '30%',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#00a2e9',
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: 300
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
right: 20,
|
|||
|
|
top: 'center',
|
|||
|
|
|
|||
|
|
data: ['人身伤害', '未遂事故', '火灾', '机械设备', '环境影响', '其他'],
|
|||
|
|
textStyle: {//图例文字的样式
|
|||
|
|
color: '#f2f2f2',
|
|||
|
|
fontSize: 10,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
graphic: {
|
|||
|
|
type: "text",
|
|||
|
|
left: "36%",
|
|||
|
|
top: "52%",
|
|||
|
|
style: {
|
|||
|
|
text: data2,
|
|||
|
|
textAlign: "center",
|
|||
|
|
fill: "#00a2e9",
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: 600
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
color: ['#CFE5B7', '#BBD4A4', '#A3C78A', '#88B53D', '#7CA63B', '#698E30'],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '事故统计',
|
|||
|
|
type: 'pie',
|
|||
|
|
center: ['38%', '55%'],
|
|||
|
|
radius: ['40%', '78%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'inside',
|
|||
|
|
formatter: function (data) { return data.percent.toFixed(2); }
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: data[0], name: '人身伤害' },
|
|||
|
|
{ value: data[1], name: '未遂事故' },
|
|||
|
|
{ value: data[2], name: '火灾' },
|
|||
|
|
{ value: data[3], name: '机械设备' },
|
|||
|
|
{ value: data[4], name: '环境影响' },
|
|||
|
|
{ value: data[5], name: '其他' }
|
|||
|
|
],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderWidth: 3,
|
|||
|
|
borderColor: 'rgba(218,235,234, 1)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
var six=<%=Six %>;
|
|||
|
|
var xArr = ["分包一", "分包二"]
|
|||
|
|
var data = six.series[0].data
|
|||
|
|
var data2 = data[0]+data[1]+data[2]+data[3]+data[4]+data[5]
|
|||
|
|
category_six('six', xArr, data,data2)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(".tab .t-item").click(function () {
|
|||
|
|
var $this = $(this)
|
|||
|
|
var index = $this.index()
|
|||
|
|
if ($this.hasClass('active') && index == 0) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
var $tab = $this.closest(".tab")
|
|||
|
|
var value = $tab.attr("data-value")
|
|||
|
|
$tab.find(".t-item").removeClass('active');
|
|||
|
|
$this.addClass('active')
|
|||
|
|
|
|||
|
|
var four1 =<%=Four1 %>;
|
|||
|
|
var four2 =<%=Four2 %>;
|
|||
|
|
if (value == 4) {
|
|||
|
|
var xArr = four1.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '待整改',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: four1.series[0].data
|
|||
|
|
}, {
|
|||
|
|
name: '全部',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: four1.series[0].data2,
|
|||
|
|
itemStyle: { normal: { color: 'rgba(174,75,37, 1)' } }
|
|||
|
|
}];
|
|||
|
|
if (index == 2) {
|
|||
|
|
var xArr = four2.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '待整改',
|
|||
|
|
data: four2.series[0].data
|
|||
|
|
}, {
|
|||
|
|
name: '全部',
|
|||
|
|
data: four2.series[0].data2,
|
|||
|
|
itemStyle: { normal: { color: 'rgba(174,75,37, 1)' } }
|
|||
|
|
}];
|
|||
|
|
}
|
|||
|
|
category_Four('four', xArr, data)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</html>
|
|||
|
|
|