1716 lines
70 KiB
Plaintext
1716 lines
70 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main_copy_index.aspx.cs" Inherits="FineUIPro.Web.common.main_copy_index" %>
|
||
|
||
<!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: #fff;
|
||
}
|
||
|
||
.base-wrap .base-txt-wrap {
|
||
margin-top: 5px;
|
||
background-color: #0B508B;
|
||
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;
|
||
}
|
||
|
||
.info-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.info-wrap .info-item {
|
||
align-items: center;
|
||
margin: 0 20px;
|
||
}
|
||
|
||
.info-wrap .info-item .title {
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.info-wrap .info-item .item {
|
||
width: 100%;
|
||
height: 40%;
|
||
background-color: #267AA4;
|
||
border-radius: 15px;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.info-wrap .info-item .item .i-num {
|
||
color: #F48A5C;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.info-wrap .info-item .item .i-num-c {
|
||
color: #C1DF8E;
|
||
}
|
||
|
||
.tab .t-item {
|
||
width: auto;
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.tit-item {
|
||
padding: 0 10px;
|
||
color: #fff;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tip-item {
|
||
margin-left: 10px;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.tip {
|
||
width: 25px;
|
||
height: 13px;
|
||
background-color: #258F76;
|
||
border-radius: 2px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.tip-next {
|
||
background-color: #92BF55;
|
||
}
|
||
|
||
.mglone {
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.mgrone {
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.mgbone {
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.pdtb0 {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
.tit-center {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tit-one {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.content-ul .c-item .tit {
|
||
display: block;
|
||
position: relative;
|
||
padding-left: 2em;
|
||
}
|
||
|
||
|
||
.content-ul .c-item .tit::before {
|
||
content: '';
|
||
position: absolute;
|
||
border-color: #57B8BD;
|
||
border-style: solid;
|
||
border-width: 0.25em;
|
||
height: 0;
|
||
top: 0;
|
||
left: 0.6em;
|
||
margin-top: 0.5em;
|
||
width: 0;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.content-ul .c-item .tit-read::before {
|
||
content: '';
|
||
position: absolute;
|
||
border-color: #ffffff;
|
||
border-style: solid;
|
||
border-width: 0.25em;
|
||
height: 0;
|
||
top: 0;
|
||
left: 0.6em;
|
||
margin-top: 0.25em;
|
||
width: 0;
|
||
border-radius: 50%
|
||
}
|
||
|
||
.content-ul .c-item .tit .tit-t {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
.content-ul .c-item.disabled .tit::before {
|
||
display: none !important;
|
||
}
|
||
|
||
.content-ul .c-item .tit .tit-v {
|
||
margin-left: 12px;
|
||
width: 80px;
|
||
}
|
||
|
||
.top-wrap{
|
||
width: 100%;
|
||
height: 100%;
|
||
justify-content: center;
|
||
align-items:center;
|
||
/*上移，数字能居中*/
|
||
margin-top:-18px;
|
||
}
|
||
.top-desc{
|
||
margin-bottom: 15px;
|
||
width:100%;
|
||
padding: 0 10px;
|
||
}
|
||
.content-1 {
|
||
width: 100%;
|
||
margin-bottom: 5px;
|
||
align-items: center;
|
||
padding:0 15px;
|
||
}
|
||
|
||
.content-1 .cc-num-wrap {
|
||
justify-content: space-around;
|
||
align-items:center;
|
||
}
|
||
|
||
.content-1 .cc-num-wrap .cc-num {
|
||
color: #F4B286;
|
||
background-color: #4967AD;
|
||
font-size: 38px;
|
||
/* padding: 0 2px; */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 60px;
|
||
width: 40px;
|
||
border-radius:6px;
|
||
}
|
||
|
||
.content-1 .unit1 {
|
||
margin-left: 6px;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap flex flexV">
|
||
<div class="bottom-wrap flex1">
|
||
<div class="top">
|
||
<div class="item flex1 flex flexV">
|
||
<div class="bw-b-bottom mgbone">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="flex flexV top-wrap">
|
||
<div class="top-desc">
|
||
<marquee direction="left"><%=ProjectDate %>起,本项目已安全运行</marquee>
|
||
</div>
|
||
<div class="content-1 flex">
|
||
<div class="cc-num-wrap flex1 flex">
|
||
<div id="divPNum4" class="specialNum cc-num"><%=ProjectDay4 %></div>
|
||
<div id="divPNum3" class="specialNum cc-num"><%=ProjectDay3 %></div>
|
||
<div id="divPNum2" class="specialNum cc-num"><%=ProjectDay2 %></div>
|
||
<div id="divPNum1" class="specialNum cc-num"><%=ProjectDay1 %></div>
|
||
</div>
|
||
<div class="unit1">天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item flex1 mglone mgrone">
|
||
<div class="top flex" style="width: 100%; height: 100%;">
|
||
<div class="item flex1 flex flexV">
|
||
<div class="bw-b-bottom mgbone">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content flex" style="width: 100%; height: 100%;">
|
||
<div id='one1' class="flex1" style="width: 100%; height: 100%;"></div>
|
||
<div id='one2' class="flex1" style="width: 100%; height: 100%;"></div>
|
||
<div id='one3' class="flex1" style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item flex3">
|
||
<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>
|
||
|
||
</div>
|
||
<div class="bottom-wrap flex1">
|
||
<div class="top flex">
|
||
<div class="bw-b-bottom flex1 mgrone">
|
||
<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 class="bw-b-bottom flex1">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="tab-wrap">
|
||
<div class="tab" data-value="3">
|
||
<div class="t-item ">施工分包商</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item active">问题类别</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item">专业</div>
|
||
</div>
|
||
</div>
|
||
<div class="bw-item-content">
|
||
<div id='two2' style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-wrap flex1">
|
||
<div class="top">
|
||
<div class="item flex1 mgrone" id="divJD_wrap">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="tab-wrap">
|
||
<div class="tab" data-value="2">
|
||
<div class="t-item active">单位</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item ">岗位</div>
|
||
</div>
|
||
</div>
|
||
<div class="bw-item-content">
|
||
<div id='three' style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item flex1 flex">
|
||
<div class="bw-b-bottom-up flex1 mgrone" style="margin-bottom: 0;">
|
||
<div class="bw-item-content flex flexV" style="padding: 0;">
|
||
<div class="tit-new" style="border-radius: 0">待办</div>
|
||
<div class="" style="padding: 0 10px 0; overflow: hidden;">
|
||
<div class="swiper-container " id='swiper1' runat="server">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bw-b-bottom-up flex1" style="margin-bottom: 0;">
|
||
<div class="bw-item-content flex flexV" style="padding: 0;">
|
||
<div class="tit-new" style="border-radius: 0">预警</div>
|
||
<div class="" style="padding: 0 10px 0; overflow: hidden;">
|
||
<div class="swiper-container " id='swiper2' runat="server">
|
||
</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("~/") %>';
|
||
var sitePerson =<%=SitePerson %>;
|
||
category_Two('two', sitePerson.categories, sitePerson.series[0].data)
|
||
function category_Two(id, categories, data1) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
left: 'center',
|
||
text: '项目安全人工时',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
fontWeight: '300'
|
||
},
|
||
show: true
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
show: false
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
}
|
||
},
|
||
type: 'category',
|
||
data: categories
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '累计人工时',
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
data: data1
|
||
}],
|
||
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(9,199,113, 1)'
|
||
},
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
|
||
|
||
//$(function () {
|
||
|
||
// getsiteperson()
|
||
//})
|
||
|
||
//function getsiteperson() {
|
||
// $.ajax({
|
||
// url: "/common/main_copy_index.aspx/getSitePerson",
|
||
// type: "post",
|
||
// dataType: "json",
|
||
// contentType: "application/json; charset=utf-8",
|
||
// success: function (result) {
|
||
// result = JSON.parse(result.d)
|
||
// var categories = $.map(result, function (a) {
|
||
// return a.Date;
|
||
// });
|
||
// var date1 = $.map(result, function (a) {
|
||
// return a.TotalPersonWorkTime;
|
||
// });
|
||
|
||
// var date2 = $.map(result, function (a) {
|
||
// return a.DayWorkTime;
|
||
// });
|
||
// category_Two('two', categories, date1, date2)
|
||
// },
|
||
// error: function () {
|
||
|
||
// }
|
||
// })
|
||
//}
|
||
</script>
|
||
<script type="text/javascript">
|
||
function category_two3(id, xArr, data) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: [{
|
||
text: '项目焊接工程量统计',
|
||
top: '10',
|
||
//left:'center',
|
||
textStyle: {
|
||
color: '#278AC8',
|
||
fontSize: 12,
|
||
//fontWeight:300
|
||
}
|
||
}],
|
||
legend: {
|
||
show: true,
|
||
bottom: 0,
|
||
align: 'left',
|
||
textStyle: {//图例文字的样式
|
||
color: '#fff'
|
||
}
|
||
},
|
||
color: ['#1E9B7D', '#8EC43D'],
|
||
series: [
|
||
{
|
||
name: '项目焊接工程量统计',
|
||
type: 'pie',
|
||
center: ['50%', '55%'],
|
||
radius: ['50%', '65%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: function (data) { return data.percent.toFixed(2) + "%"; }
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 35, name: '已完成' },
|
||
{ value: 10, name: '未完成' }
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var xArr = ["分包一", "分包二"]
|
||
var data = [
|
||
{
|
||
name: '质量一次性合格率',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
data: [0.85, 0.82],
|
||
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
|
||
},
|
||
{
|
||
name: '施工资料同步率',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
data: [0.69, 0.65],
|
||
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
|
||
}
|
||
]
|
||
category_two3('two3', xArr, data)
|
||
</script>
|
||
<script type="text/javascript">
|
||
function pie(id, data, title, text, needLegend) {
|
||
var myChartPie = echarts.init(document.getElementById(id));
|
||
var needLegend = needLegend || false
|
||
var optionPie = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
show: true
|
||
},
|
||
legend: {
|
||
show: needLegend,
|
||
selectedMode: false,
|
||
left: 'right',
|
||
orient: 'horizontal',
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
title: {
|
||
left: 'center',
|
||
top: '16%',
|
||
text: title,
|
||
textStyle: {
|
||
color: '#00A2E9',
|
||
fontSize: 12,
|
||
},
|
||
show: true
|
||
},
|
||
graphic: {
|
||
type: "text",
|
||
left: "center",
|
||
top: "center",
|
||
style: {
|
||
text: text,
|
||
textAlign: "center",
|
||
fill: "#fff",
|
||
fontSize: 12,
|
||
fontWeight: 700
|
||
}
|
||
},
|
||
color: ['#169BD5', '#D7D7D7'],
|
||
series: [
|
||
{
|
||
name: ' ',
|
||
hoverOffset: 0,
|
||
type: 'pie',
|
||
clickable: false,
|
||
radius: ['50%', '75%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '10',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: data
|
||
}
|
||
]
|
||
};
|
||
//为echarts对象加载数据
|
||
myChartPie.setOption(optionPie);
|
||
}
|
||
var oneData1 =<%=anquanwentizhenggailv%>
|
||
var oneData2 =<%=zhiliangwentizhenggailv%>
|
||
var oneData3 =<%=hanjieyicihegelv%>
|
||
|
||
var one4 = { "title": null, "num1": 0, "num2": 0, "num3": 0, "num4": 0, "num5": 0, "num6": 0, "num7": 0, "num8": 0, "num9": 0 };
|
||
var data4 = [{ value: oneData1 , name: '已完成' },
|
||
{ value: 100 - oneData1 ,name: '未完成' }];
|
||
var data5 = [{ value: oneData2, name: '已完成' },
|
||
{ value: 100 - oneData2, name: '未完成' }];
|
||
var data6 = [{ value: oneData3, name: '已完成' },
|
||
{ value: 100 - oneData3, name: '未完成' }];
|
||
pie('one1', data4, "安全整改率", oneData1)
|
||
pie('one2', data5, "质量整改率", oneData2)
|
||
pie('one3', data6, "焊接一次合格率",oneData3)
|
||
<%--
|
||
function category_One(id, title, dataNum, text) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
//tooltip: {
|
||
// formatter: '{a} <br/>{b} : {c}%'
|
||
//},
|
||
title: {
|
||
left: 'center',
|
||
top: '15%',
|
||
text: title,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
},
|
||
show: true
|
||
},
|
||
graphic: {
|
||
type: "text",
|
||
left: "center",
|
||
bottom: "25%",
|
||
style: {
|
||
text: text,
|
||
textAlign: "center",
|
||
fill: "#fff",
|
||
fontSize: 10,
|
||
fontWeight: 100
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: ' ',
|
||
center: ["50%", "60%"],
|
||
type: 'gauge',
|
||
radius: "90%",
|
||
axisLabel: { //文字样式（及“10”、“20”等文字样式）
|
||
fontSize: 8,
|
||
distance: 2 //文字离表盘的距离
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
length: '70%',
|
||
width: 3
|
||
},
|
||
axisTick: { //刻度线样式（及短线样式）
|
||
length: 0
|
||
},
|
||
splitLine: {
|
||
length: 10,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,.1)'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [ //表盘颜色
|
||
[0.5, "#91C7AE"],//0-50%处的颜色
|
||
[0.7, "#63869E"],//51%-70%处的颜色
|
||
[1, "#88C8E2"],//70%-100%处的颜色
|
||
],
|
||
width: 8//表盘宽度
|
||
}
|
||
},
|
||
min: 0,
|
||
max: 100,
|
||
detail: {
|
||
show: false,
|
||
formatter: '{value}%'
|
||
},
|
||
data: [{
|
||
value: dataNum,
|
||
name: ''
|
||
}]
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option, true)
|
||
}
|
||
var one1 =0
|
||
var one2 = 98.0
|
||
var one3 = 97.0
|
||
category_One('one1', "质量问题整\n改率", one1, one1 + "%")
|
||
category_One('one2', "焊接完成率\n按进度", one2, one2 + "%")
|
||
category_One('one3', "焊接完成率\n按质量", one3, one3 + "%")--%>
|
||
|
||
//function category_One(id, title, dataNum, text) {
|
||
// // 基于准备好的dom，初始化echarts实例
|
||
// var myChart = echarts.init(document.getElementById(id))
|
||
// // 指定图表的配置项和数据
|
||
// var option = {
|
||
// //tooltip: {
|
||
// // formatter: '{a} <br/>{b} : {c}%'
|
||
// //},
|
||
// title: {
|
||
// left: 'center',
|
||
// bottom: '0',
|
||
// text: title,
|
||
// textStyle: {
|
||
// color: '#fff',
|
||
// fontSize: 10,
|
||
// },
|
||
// show: true
|
||
// },
|
||
// graphic: {
|
||
// type: "text",
|
||
// left: "center",
|
||
// bottom: "18%",
|
||
// style: {
|
||
// text: text,
|
||
// textAlign: "center",
|
||
// fill: "#fff",
|
||
// fontSize: 10,
|
||
// fontWeight: 100
|
||
// }
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: ' ',
|
||
// center: ["50%", "50%"],
|
||
// type: 'gauge',
|
||
// radius: "90%",
|
||
// axisLabel: { //文字样式（及“10”、“20”等文字样式）
|
||
// fontSize: 8,
|
||
// distance: 2 //文字离表盘的距离
|
||
// },
|
||
// pointer: {
|
||
// show: true,
|
||
// length: '70%',
|
||
// width: 3
|
||
// },
|
||
// axisTick: { //刻度线样式（及短线样式）
|
||
// length: 0
|
||
// },
|
||
// splitLine: {
|
||
// length: 10,
|
||
// lineStyle: {
|
||
// color: 'rgba(255,255,255,.1)'
|
||
// }
|
||
// },
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// color: [ //表盘颜色
|
||
// [0.5, "#91C7AE"],//0-50%处的颜色
|
||
// [0.7, "#63869E"],//51%-70%处的颜色
|
||
// [1, "#88C8E2"],//70%-100%处的颜色
|
||
// ],
|
||
// width: 8//表盘宽度
|
||
// }
|
||
// },
|
||
// min: 0,
|
||
// max: 100,
|
||
// detail: {
|
||
// show: false,
|
||
// formatter: '{value}%'
|
||
// },
|
||
// data: [{
|
||
// value: dataNum,
|
||
// name: ''
|
||
// }]
|
||
// }
|
||
// ]
|
||
// };
|
||
// // 使用刚指定的配置项和数据显示图表。
|
||
// myChart.setOption(option, true)
|
||
//}
|
||
//var one1 = 0.0
|
||
//var one2 = 0.0
|
||
//var one3 = 0.0
|
||
//category_One('one1', "质量验收一次合格率", one1, one1 + "%")
|
||
//category_One('one2', "施工资料同步率", one2, one2 + "%")
|
||
//category_One('one3', "质量问题整改完成率", one3, one3 + "%")
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
function category_Four(id, xArr, series, title,num) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
// left:'center',
|
||
text: title,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
fontWeight: '300',
|
||
},
|
||
show: true
|
||
},
|
||
tooltip: {},
|
||
color: ['#88cc00', '#AE4B23'],
|
||
legend: {
|
||
left: '15%',
|
||
show: true,
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff',
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
},
|
||
formatter: function (value) {
|
||
var ret = "";//拼接加\n返回的类目项
|
||
var maxLength = num;//每项显示文字个数
|
||
var valLength = value.length;//X轴类目项的文字个数
|
||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
if (rowN > 1)//如果类目项的文字大于maxLength,
|
||
{
|
||
for (var i = 0; i < rowN; i++) {
|
||
var temp = "";//每次截取的字符串
|
||
var start = i * maxLength;//开始截取的位置
|
||
var end = start + maxLength;//结束截取的位置
|
||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||
//temp = value.substring(start, end) + "\n";
|
||
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
||
ret += temp; //凭借最终的字符串
|
||
}
|
||
return ret;
|
||
}
|
||
else {
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
type: 'category',
|
||
data: xArr
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
}
|
||
}
|
||
},
|
||
series: series,
|
||
grid: {
|
||
top: '25%',
|
||
left: '0%',
|
||
right: '0%',
|
||
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(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var four1 = <%=RectifyNoticesUnit%>
|
||
//var four1 = { "title": "安全检查问题统计", "xFontNum": 0, "legend": null, "categories": ["十六化建", "十三化建"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [1.0, 4.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
|
||
var xArr = four1.categories
|
||
var data = [{
|
||
name: '待整改',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: four1.series[0].data
|
||
}, {
|
||
name: '全部',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: four1.series[0].data2,
|
||
itemStyle: { normal: { color: 'rgba(174,75,37, 1)' } }
|
||
}];
|
||
category_Four('four', xArr, data, "安全检查问题统计")
|
||
|
||
// 现场人员
|
||
var three1 = { "title": "现场人员", "xFontNum": 4, "legend": null, "categories": ["十六化建", "十三化建"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [1.0, 4.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
var WorkingPeople = <%=WorkingPeople%>
|
||
var WorkingRole = <%=WorkingRole%>
|
||
var xArrWorkingPeople = WorkingPeople.unitNames
|
||
var seriesWorkingPeople = [{
|
||
name: '签到',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: WorkingPeople.data,
|
||
itemStyle: { normal: { color: '#6FCE7C' } }
|
||
}
|
||
//, {
|
||
//name: '系统',
|
||
//type: 'bar',
|
||
//barWidth: 20,
|
||
//data: three1.series[1].data,
|
||
//itemStyle: { normal: { color: '#BF467C' } }
|
||
//}
|
||
|
||
];
|
||
|
||
var xArrWorkingRole = WorkingRole.roleName
|
||
var seriesWorkingRole = [{
|
||
name: '签到',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: WorkingRole.data,
|
||
itemStyle: { normal: { color: '#6FCE7C' } }
|
||
}
|
||
//, {
|
||
//name: '系统',
|
||
//type: 'bar',
|
||
//barWidth: 20,
|
||
//data: three1.series[1].data,
|
||
//itemStyle: { normal: { color: '#BF467C' } }
|
||
//}
|
||
|
||
];
|
||
// category_Four('three', xArrWorkingRole, seriesWorkingRole, "现场人员")
|
||
|
||
category_Four('three', xArrWorkingPeople, seriesWorkingPeople, "现场人员",14)
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
function pie(id, data, title, text, needLegend) {
|
||
var myChartPie = echarts.init(document.getElementById(id));
|
||
var needLegend = needLegend || false
|
||
var optionPie = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
show: true
|
||
},
|
||
legend: {
|
||
show: needLegend,
|
||
selectedMode: false,
|
||
left: 'right',
|
||
orient: 'horizontal',
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
title: {
|
||
left: 'center',
|
||
bottom: '0',
|
||
text: title,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
fontWeight: '300'
|
||
},
|
||
show: true
|
||
},
|
||
graphic: {
|
||
type: "text",
|
||
left: "center",
|
||
top: "center",
|
||
style: {
|
||
text: text,
|
||
textAlign: "center",
|
||
fill: "#fff",
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
}
|
||
},
|
||
color: ['#258F76', '#92BF55'],
|
||
series: [
|
||
{
|
||
name: ' ',
|
||
hoverOffset: 0,
|
||
type: 'pie',
|
||
clickable: false,
|
||
radius: ['50%', '65%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '10',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: data
|
||
}
|
||
]
|
||
};
|
||
//为echarts对象加载数据
|
||
myChartPie.setOption(optionPie);
|
||
}
|
||
var one4 = { "title": null, "num1": 0, "num2": 0, "num3": 0, "num4": 0, "num5": 0, "num6": 0, "num7": 0, "num8": 0, "num9": 0 };
|
||
var data4 = [{ value: one4.num2, name: '已完成' },
|
||
{ value: one4.num1, name: '未完成' }];
|
||
var data5 = [{ value: one4.num5, name: '已完成' },
|
||
{ value: one4.num4, name: '未完成' }];
|
||
var data6 = [{ value: one4.num8, name: '已完成' },
|
||
{ value: one4.num7, name: '未完成' }];
|
||
pie('one4', data4, "A类", one4.num3)
|
||
pie('one5', data5, "B类", one4.num6)
|
||
pie('one6', data6, "C类", one4.num9)
|
||
</script>
|
||
<script type="text/javascript">
|
||
function category_Two2(id, xArr, data, num) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
// left:'center',
|
||
text: '质量问题统计',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontWeight: 'normal',
|
||
fontSize: 12
|
||
},
|
||
show: true
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
left: '15%',
|
||
show: true,
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff',
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
},
|
||
interval: 0,
|
||
formatter: function (value) {
|
||
var ret = "";//拼接加\n返回的类目项
|
||
var maxLength = num > 0 ? num : 3;//每项显示文字个数
|
||
var valLength = value.length;//X轴类目项的文字个数
|
||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
if (rowN > 1)//如果类目项的文字大于maxLength,
|
||
{
|
||
for (var i = 0; i < rowN; i++) {
|
||
var temp = "";//每次截取的字符串
|
||
var start = i * maxLength;//开始截取的位置
|
||
var end = start + maxLength;//结束截取的位置
|
||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||
//temp = value.substring(start, end) + "\n";
|
||
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
||
ret += temp; //凭借最终的字符串
|
||
}
|
||
return ret;
|
||
}
|
||
else {
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
type: 'category',
|
||
data: xArr,
|
||
boundaryGap: [0, 0.01],
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(162,63,21, 1)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(206,143,135,1)'
|
||
}
|
||
}
|
||
},
|
||
series: data,
|
||
grid: {
|
||
top: '20%',
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
containLabel: true,
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
// borderColor: 'rgba(0,162,233, 1)'
|
||
},
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var two2 = <%=Two4 %>;
|
||
//var xArr = ["分包1", "分包2", "分包3", "分包4", "分包5", "分包6", "分包7", "分包8", "分包9"]
|
||
var xArr = two2.categories
|
||
var data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth: 20,
|
||
//data: [3, 5, 8, 10, 6, 4, 5, 9, 12],
|
||
data: two2.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth: 20,
|
||
//data: [2, 7, 5, 9, 12, 9, 2, 8, 10],
|
||
data: two2.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
]
|
||
category_Two2('two2', xArr, data, two2.xFontNum)
|
||
</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 = { "title": "安全检查问题统计", "xFontNum": 0, "legend": null, "categories": ["十六化建", "十三化建"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [1.0, 4.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
//var four2 = { "title": "安全检查问题统计", "xFontNum": 0, "legend": null, "categories": ["PPE", "开挖作业", "临边洞口", "临时用电", "人员教育", "三气管理", "设备管理", "受限空间", "文明施工", "作业平台", "其他", "安全通道", "热处理作业", "吊装作业", "动火作业", "高处作业", "管理类", "基坑围护", "交叉作业", "脚手架"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 2.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
|
||
if (value == 4) {
|
||
var four2 = <%=RectifyNoticesHiddenHazardType%>
|
||
var xArr = four1.categories
|
||
var data = [{
|
||
name: '待整改',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: four1.series[0].data
|
||
}, {
|
||
name: '全部',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: four1.series[0].data2,
|
||
itemStyle: { normal: { color: 'rgba(174,75,37, 1)' } }
|
||
}];
|
||
category_Four('four', xArr, data, "安全检查问题统计",14)
|
||
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, "安全检查问题统计",2)
|
||
}
|
||
|
||
}
|
||
else if (value == 3) {
|
||
var two =<%=Two %>;
|
||
//var two2 =<%=Two2 %>;
|
||
var two3 =<%=Two3 %>;
|
||
var two4 =<%=Two4 %>;
|
||
var xArr = two.categories
|
||
var data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
data: two.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [2, 7, 5, 9, 12, 9, 2, 8, 10],
|
||
data: two.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
];
|
||
num = two.xFontNum;
|
||
if (index == 2) {
|
||
xArr = two4.categories
|
||
data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
data: two4.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
data: two4.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
];
|
||
num = two4.xFontNum;
|
||
}
|
||
else if (index == 6) {
|
||
//xArr = two2.categories
|
||
//data = [
|
||
// {
|
||
// name: '未整改',
|
||
// type: 'bar',
|
||
// stack: '总量',
|
||
// data: two2.series[0].data,
|
||
// itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
// },
|
||
// {
|
||
// name: '已整改',
|
||
// type: 'bar',
|
||
// stack: '总量',
|
||
// data: two2.series[1].data,
|
||
// itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
// }
|
||
//];
|
||
//num = two2.xFontNum;
|
||
}
|
||
else if (index == 4) {
|
||
xArr = two3.categories
|
||
data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
data: two3.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
data: two3.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
];
|
||
num = two3.xFontNum;
|
||
}
|
||
category_Two2('two2', xArr, data,num)
|
||
}
|
||
else if (value == 2) {
|
||
var WorkingPeople = <%=WorkingPeople%>
|
||
var WorkingRole = <%=WorkingRole%>
|
||
var xArrWorkingPeople = WorkingPeople.unitNames
|
||
var seriesWorkingPeople = [{
|
||
name: '签到',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: WorkingPeople.data,
|
||
itemStyle: { normal: { color: '#6FCE7C' } }
|
||
}
|
||
//, {
|
||
//name: '系统',
|
||
//type: 'bar',
|
||
//barWidth: 20,
|
||
//data: three1.series[1].data,
|
||
//itemStyle: { normal: { color: '#BF467C' } }
|
||
//}
|
||
|
||
];
|
||
|
||
var xArrWorkingRole = WorkingRole.roleName
|
||
var seriesWorkingRole = [{
|
||
name: '签到',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: 0.05,
|
||
data: WorkingRole.data,
|
||
itemStyle: { normal: { color: '#6FCE7C' } }
|
||
}
|
||
//, {
|
||
//name: '系统',
|
||
//type: 'bar',
|
||
//barWidth: 20,
|
||
//data: three1.series[1].data,
|
||
//itemStyle: { normal: { color: '#BF467C' } }
|
||
//}
|
||
|
||
];
|
||
if (index == 0) {
|
||
category_Four('three', xArrWorkingPeople, seriesWorkingPeople, "现场人员",14);
|
||
}
|
||
else {
|
||
category_Four('three', xArrWorkingRole, seriesWorkingRole, "现场人员",2);
|
||
}
|
||
|
||
}
|
||
})
|
||
</script>
|
||
<script type="text/javascript">
|
||
var slidesNum = 5
|
||
var mySwiper = null
|
||
var mySwiper_JD = null
|
||
var slidesNum_JD = 15
|
||
var swiper_One = '<ul class="content-ul swiper-wrapper"></ul>'
|
||
var swiper_Two = '<%=toDo %>'
|
||
var swiper_Three = '<%=toWarn %>'
|
||
var todoNum = '<%=TodoNum %>'
|
||
var toWarnNum = <%=ToWarnNum%>
|
||
var accident = { "title": "质量事故", "xFontNum": 0, "legend": null, "categories": ["潮州华瀛", "黄州危废", "山东滨州首站", "嘉盛工程", "湘渝盐化", "东华能源", "广汇启东", "重庆涪陵", "开阳PPA项目", "广西华谊", "金新锅炉", "兴力项目", "济民可信", "哈密广汇", "俄罗斯", "印尼罐区", "印度TALCHER", "天津渤化", "宜都兴发", "图克二期", "云华安"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data3": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data4": [34.56, 37.80, 21.00, 0.00, 6.00, 29.45, 43.12, 29.00, 0.00, 2.84, 95.00, 95.00, 90.00, 23.00, 39.00, 15.00, 17.23, 50.00, 99.00, 86.00, 64.00], "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null }
|
||
$(document).ready(function () {
|
||
|
||
var height = $("#divJD_wrap").height() - 30
|
||
var width = $("#divJD_wrap").width() / 2
|
||
$("#swiper1").css("height", (height) + 'px').css("width", (width - 30) + 'px')
|
||
slidesNum = Math.floor((height) / 24)
|
||
$("#swiper1").html(swiper_Two)
|
||
$("#swiper1").find(".swiper-wrapper").css("flex-direction", "column").end().find("li").css("height", "24px")
|
||
if (todoNum >= slidesNum) {
|
||
mySwiper = new Swiper('#swiper1', {
|
||
autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
}
|
||
|
||
$("#swiper1").on('click', 'li', function () {
|
||
window.location.href = "./todo.aspx";
|
||
})
|
||
|
||
$("#swiper2").css("height", (height) + 'px').css("width", (width - 30) + 'px')
|
||
var str = '<ul class="content-ul swiper-wrapper">'
|
||
for (var i = 0; i < accident.categories.length; i++) {
|
||
str += '<li data-id="../PZHGL/GJSX/GJSXListEdit.aspx?EditType=Edit&Id=1809800004" notice-id="1809800004" class="c-item swiper-slide"><div class="tit" title="' + accident.categories[i] + '"><div class="flex" ><div class="tit-t flex1">' + accident.categories[i] + '</div><div class="tit-v">2021-04-15</div></div></div></li>'
|
||
}
|
||
str += '</ul>'
|
||
$("#swiper2").html(swiper_Three)
|
||
$("#swiper2").find(".swiper-wrapper").css("flex-direction", "column").end().find("li").css("height", "24px")
|
||
|
||
if (toWarnNum > slidesNum) {
|
||
mySwiper_JD = new Swiper('#swiper2', {
|
||
autoplay: 3000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
}
|
||
})
|
||
</script>
|
||
<script>
|
||
//var swiper_One = '<ul class="content-ul swiper-wrapper"><li data-id="../Notice/NoticeView2.aspx?NoticeId=2acbfdd5-dc97-432e-9e66-8281906fe507" notice-id="2acbfdd5-dc97-432e-9e66-8281906fe507" class="c-item swiper-slide"><div class="tit" title="请于2017年6月10日组织开展高处作业安全检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月10日组织开展高处作业安全检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2ad4da01-085b-44fc-9fb2-b17ff4188157" class="c-item disabled swiper-slide"><div class="tit tit-read" title="关于现场焊工持证上岗的通知"><div class="flex" ><div class="tit-t flex1">关于现场焊工持证上岗的通知</div><div class="tit-v">2019-12-18</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2fc6d514-adb9-4071-86da-48dc527f2b05" notice-id="2fc6d514-adb9-4071-86da-48dc527f2b05" class="c-item swiper-slide"><div class="tit" title="通知"><div class="flex" ><div class="tit-t flex1">通知</div><div class="tit-v">2017-03-21</div></div></div></li></ul>'
|
||
//var swiper_One = '<ul class="content-ul swiper-wrapper"><li data-id="../Notice/NoticeView2.aspx?NoticeId=0597eed1-07b2-4d4e-af0c-3946c96a08df" notice-id="0597eed1-07b2-4d4e-af0c-3946c96a08df" class="c-item swiper-slide"><div class="tit" title="Strengthening prevention measures of Sunstroke"><div class="flex" ><div class="tit-t flex1">Strengthening prevention measures of Sunstroke</div><div class="tit-v">2017-07-09</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=062bc818-5994-45da-9d49-19815bef02d4" notice-id="062bc818-5994-45da-9d49-19815bef02d4" class="c-item swiper-slide"><div class="tit" title="关于规范现场人员出入管理的通知"><div class="flex" ><div class="tit-t flex1">关于规范现场人员出入管理的通知</div><div class="tit-v">2017-02-06</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=07ab4cbd-e09d-404a-9c4e-01846a164ad6" notice-id="07ab4cbd-e09d-404a-9c4e-01846a164ad6" class="c-item swiper-slide"><div class="tit" title="关于开展国庆节前安全大检查的通知"><div class="flex" ><div class="tit-t flex1">关于开展国庆节前安全大检查的通知</div><div class="tit-v">2019-09-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=07bbe33f-4c65-4bab-b97d-3c0983f7c83e" notice-id="07bbe33f-4c65-4bab-b97d-3c0983f7c83e" class="c-item swiper-slide"><div class="tit" title="关于报送HSE相关资料的通知"><div class="flex" ><div class="tit-t flex1">关于报送HSE相关资料的通知</div><div class="tit-v">2018-04-08</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=0af9fdd1-847f-45cc-8831-03d2a0ccbed1" class="c-item disabled swiper-slide"><div class="tit tit-read" title="About Dining Room"><div class="flex" ><div class="tit-t flex1">About Dining Room</div><div class="tit-v">2017-08-13</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=0c7ca6d4-d1f1-484f-b561-9e6f1e7e1f48" class="c-item disabled swiper-slide"><div class="tit tit-read" title="请于2017年6月8日组织开展施工机具专项检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月8日组织开展施工机具专项检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=0e0d4655-be58-4ba7-8aa0-4b8ea2052e52" notice-id="0e0d4655-be58-4ba7-8aa0-4b8ea2052e52" class="c-item swiper-slide"><div class="tit" title="请于5月25日前开展HSE内业资料检查、消防安全检查"><div class="flex" ><div class="tit-t flex1">请于5月25日前开展HSE内业资料检查、消防安全检查</div><div class="tit-v">2017-05-23</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=14fe97ba-d619-44c6-9327-4db5eb4aa186" notice-id="14fe97ba-d619-44c6-9327-4db5eb4aa186" class="c-item swiper-slide"><div class="tit" title="关于加强项目现场射线探伤作业安全管理的通知"><div class="flex" ><div class="tit-t flex1">关于加强项目现场射线探伤作业安全管理的通知</div><div class="tit-v">2017-03-22</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=16e3f479-e5fa-4a14-aeb5-88af9ba1a66c" notice-id="16e3f479-e5fa-4a14-aeb5-88af9ba1a66c" class="c-item swiper-slide"><div class="tit" title="关于做好履带吊大臂受损后续工作安排的通知"><div class="flex" ><div class="tit-t flex1">关于做好履带吊大臂受损后续工作安排的通知</div><div class="tit-v">2019-11-10</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=19443b9e-5e92-4c00-9510-02d8c30b03ff" notice-id="19443b9e-5e92-4c00-9510-02d8c30b03ff" class="c-item swiper-slide"><div class="tit" title="关于加强新建LNG罐区大门管理的通知"><div class="flex" ><div class="tit-t flex1">关于加强新建LNG罐区大门管理的通知</div><div class="tit-v">2019-10-10</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=1b21886b-e7df-4cbc-ae3c-1cd1daee93a9" notice-id="1b21886b-e7df-4cbc-ae3c-1cd1daee93a9" class="c-item swiper-slide"><div class="tit" title="关于严格执行作业票证制度和作业前安全技术交底工作的通知"><div class="flex" ><div class="tit-t flex1">关于严格执行作业票证制度和作业前安全技术交底工作的通知</div><div class="tit-v">2018-03-12</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=1c3ff63e-df82-4b0c-ba54-d623f0473e14" notice-id="1c3ff63e-df82-4b0c-ba54-d623f0473e14" class="c-item swiper-slide"><div class="tit" title="Important HSE instructions"><div class="flex" ><div class="tit-t flex1">Important HSE instructions</div><div class="tit-v">2017-08-01</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=227d6922-f455-4382-8f86-7fc83c45d22b" notice-id="227d6922-f455-4382-8f86-7fc83c45d22b" class="c-item swiper-slide"><div class="tit" title="关于报送HSE相关资料的通知"><div class="flex" ><div class="tit-t flex1">关于报送HSE相关资料的通知</div><div class="tit-v">2019-07-23</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=23c364db-62af-4f05-b5e9-3ef60cf1aa9d" notice-id="23c364db-62af-4f05-b5e9-3ef60cf1aa9d" class="c-item swiper-slide"><div class="tit" title="Crane Rejection"><div class="flex" ><div class="tit-t flex1">Crane Rejection</div><div class="tit-v">2017-12-11</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=247fe11c-4f16-4c74-9098-ae287f860b71" notice-id="247fe11c-4f16-4c74-9098-ae287f860b71" class="c-item swiper-slide"><div class="tit" title="关于做好土建撤场工作安排的通知"><div class="flex" ><div class="tit-t flex1">关于做好土建撤场工作安排的通知</div><div class="tit-v">2019-11-06</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=279da471-c47e-47b4-a89d-a3f97692961e" notice-id="279da471-c47e-47b4-a89d-a3f97692961e" class="c-item swiper-slide"><div class="tit" title="请于2017年6月5日前开展动火作业安全专项检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月5日前开展动火作业安全专项检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2a35f657-1206-479b-8510-8639cc024e0c" notice-id="2a35f657-1206-479b-8510-8639cc024e0c" class="c-item swiper-slide"><div class="tit" title="关于设定马苏项目重点消防区域及组建义务消防队的通知"><div class="flex" ><div class="tit-t flex1">关于设定马苏项目重点消防区域及组建义务消防队的通知</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2acbfdd5-dc97-432e-9e66-8281906fe507" notice-id="2acbfdd5-dc97-432e-9e66-8281906fe507" class="c-item swiper-slide"><div class="tit" title="请于2017年6月10日组织开展高处作业安全检查"><div class="flex" ><div class="tit-t flex1">请于2017年6月10日组织开展高处作业安全检查</div><div class="tit-v">2017-05-30</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2ad4da01-085b-44fc-9fb2-b17ff4188157" class="c-item disabled swiper-slide"><div class="tit tit-read" title="关于现场焊工持证上岗的通知"><div class="flex" ><div class="tit-t flex1">关于现场焊工持证上岗的通知</div><div class="tit-v">2019-12-18</div></div></div></li><li data-id="../Notice/NoticeView2.aspx?NoticeId=2fc6d514-adb9-4071-86da-48dc527f2b05" notice-id="2fc6d514-adb9-4071-86da-48dc527f2b05" class="c-item swiper-slide"><div class="tit" title="通知"><div class="flex" ><div class="tit-t flex1">通知</div><div class="tit-v">2017-03-21</div></div></div></li></ul>'
|
||
// var swiper_One = '<ul class="content-ul swiper-wrapper"><li data-id="../PZHGL/GJSX/GJSXListEdit.aspx?EditType=Edit&Id=1809800001" notice-id="1809800001" class="c-item swiper-slide"><div class="tit" title="珠光砂装填完成"><div class="flex" ><div class="tit-t flex1">珠光砂装填完成</div><div class="tit-v">2021-04-15</div></div></div></li><li data-id="../PZHGL/GJSX/GJSXListEdit.aspx?EditType=Edit&Id=1809800003" notice-id="1809800003" class="c-item swiper-slide"><div class="tit" title="3#空分整改"><div class="flex" ><div class="tit-t flex1">3#空分整改</div><div class="tit-v">2021-04-15</div></div></div></li><li data-id="../PZHGL/GJSX/GJSXListEdit.aspx?EditType=Edit&Id=1809800004" notice-id="1809800004" class="c-item swiper-slide"><div class="tit" title="盲板阀卸货，尺寸复测。"><div class="flex" ><div class="tit-t flex1">盲板阀卸货，尺寸复测。</div><div class="tit-v">2021-04-15</div></div></div></li></ul>'
|
||
// var swiper_Two = '<ul class="content-ul swiper-wrapper"></ul>'
|
||
// var swiper_One = '<ul class="content-ul swiper-wrapper"></ul>'
|
||
// var swiper_Two = '<%=toDo %>'
|
||
// var todoNum = '<%=TodoNum %>'
|
||
//var todoNum = '0'
|
||
$(".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')
|
||
if (value == 0) {
|
||
var maptype = index == 0 ? 'world' : 'china'
|
||
mapEchart('map', maptype)
|
||
} else if (value == 1) {
|
||
if (index == 0) {
|
||
$("#swiper1").html(swiper_One)
|
||
mySwiper = new Swiper('#swiper1', {
|
||
autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
} else if (index == 2) {
|
||
$("#swiper2").html(swiper_Two)
|
||
if (todoNum >= slidesNum) {
|
||
mySwiper = new Swiper('#swiper2', {
|
||
autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
}
|
||
else {
|
||
mySwiper = new Swiper('#swiper2', {
|
||
//autoplay: 4000,//可选选项，自动滑动
|
||
direction: 'vertical',
|
||
loop: true,
|
||
slidesPerView: slidesNum
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
</script>
|
||
</html>
|