1251 lines
56 KiB
Plaintext
1251 lines
56 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main_copy_index_1.aspx.cs" Inherits="FineUIPro.Web.common.main_copy_index_1" %>
|
|||
|
|
|
|||
|
|
<!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;
|
|||
|
|
justify-content: 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;
|
|||
|
|
}
|
|||
|
|
</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="info-wrap flex">
|
|||
|
|
<div class="info-item flex flexV flex1">
|
|||
|
|
<div class="title">一次合格率</div>
|
|||
|
|
<div class="item flex flexV">
|
|||
|
|
<div class="specialNum i-num">87</div>
|
|||
|
|
<div style="font-size:10px">单位：%</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item flex flexV flex1">
|
|||
|
|
<div class="title">焊工总人数</div>
|
|||
|
|
<div class="item flex flexV">
|
|||
|
|
<div class="specialNum i-num i-num-c">176</div>
|
|||
|
|
<div style="font-size:10px">单位：人</div>
|
|||
|
|
</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="2">
|
|||
|
|
<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 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="bg-item flex1 mgrone" style="margin-bottom:0;">
|
|||
|
|
<div class="bw-item-content flex flexV" style="padding:0;">
|
|||
|
|
<div class="tit-new">代办</div>
|
|||
|
|
<div class="" style="padding: 0 10px 0; overflow: hidden;">
|
|||
|
|
<div class="swiper-container " id='swiper1' runat="server">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-item flex1" style="margin-bottom:0;">
|
|||
|
|
<div class="bw-item-content flex flexV" style="padding:0;">
|
|||
|
|
<div class="tit-new">预警</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("~/") %>';
|
|||
|
|
|
|||
|
|
function category_Two(id, xArr, data) {
|
|||
|
|
// 基于准备好的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: 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: 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(9,199,113, 1)'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var two = { "title": "项目安全人工时", "xFontNum": 0, "legend": null, "categories": ["2020-11", "2020-12", "2021-01", "2021-02", "2021-03", "2021-04"], "series": [{ "name": null, "type": null, "data": [64.0, 64.0, 14297.0, 14830.0, 19742.0, 22734.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": [64.0, 0.0, 14233.0, 533.0, 4912.0, 2992.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 = two.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '累计人工时',
|
|||
|
|
type: 'line',
|
|||
|
|
data: two.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#00c771' } }
|
|||
|
|
}, {
|
|||
|
|
name: '当月人工时',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
data: two.series[1].data
|
|||
|
|
}]
|
|||
|
|
category_Two('two', xArr, data)
|
|||
|
|
</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: 40,
|
|||
|
|
data: [0.85, 0.82],
|
|||
|
|
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '施工资料同步率',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
data: [0.69, 0.65],
|
|||
|
|
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
//category_two3('two3', xArr, data)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
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: '25%',
|
|||
|
|
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.0
|
|||
|
|
var one2 = 0.0
|
|||
|
|
var one3 = 0.0
|
|||
|
|
category_One('one1', "质量问题整改率", one1, one1 + "%")
|
|||
|
|
category_One('one2', "焊接完成率\n按进度", one2, one2 + "%")
|
|||
|
|
category_One('one3', "焊接完成率\n按质量", one3, one3 + "%")
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category_Four(id, xArr, series, title) {
|
|||
|
|
// 基于准备好的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)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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 = { "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 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[1].data,
|
|||
|
|
itemStyle: { normal: { color: '#AE4B23' } }
|
|||
|
|
}];
|
|||
|
|
category_Four('four', xArr, series, "安全检查问题统计")
|
|||
|
|
// 现场人员
|
|||
|
|
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 xArr = four1.categories
|
|||
|
|
var series = [{
|
|||
|
|
name: '签到',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
barGap: 0.05,
|
|||
|
|
data: three1.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#6FCE7C' } }
|
|||
|
|
}, {
|
|||
|
|
name: '系统',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: three1.series[1].data,
|
|||
|
|
itemStyle: { normal: { color: '#BF467C' } }
|
|||
|
|
}];
|
|||
|
|
category_Four('three', xArr, series, "现场人员")
|
|||
|
|
</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(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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 = { "title": "质量问题统计", "xFontNum": 4, "legend": null, "categories": ["分包1", "分包2", "分包3", "分包4", "分包5", "分包6"], "series": [{ "name": null, "type": null, "data": [64.0, 64.0, 14297.0, 14830.0, 19742.0, 22734.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": [64.0, 0.0, 14233.0, 533.0, 4912.0, 2992.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 = ["分包1", "分包2", "分包3", "分包4", "分包5", "分包6", "分包7", "分包8", "分包9"]
|
|||
|
|
var xArr = two2.categories
|
|||
|
|
var data = [
|
|||
|
|
{
|
|||
|
|
name: '未整改',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: '总量',
|
|||
|
|
barWidth: 40,
|
|||
|
|
//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: 40,
|
|||
|
|
//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 xArr = four1.categories
|
|||
|
|
var data = [{
|
|||
|
|
name: '待整改',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: four1.series[0].data
|
|||
|
|
}, {
|
|||
|
|
name: '全部',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: four1.series[1].data,
|
|||
|
|
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].data,
|
|||
|
|
itemStyle: { normal: { color: 'rgba(174,75,37, 1)' } }
|
|||
|
|
}];
|
|||
|
|
}
|
|||
|
|
category_Four('four', xArr, data)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var slidesNum = 5
|
|||
|
|
var mySwiper = null
|
|||
|
|
var mySwiper_JD = null
|
|||
|
|
var slidesNum_JD = 15
|
|||
|
|
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('<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>')
|
|||
|
|
mySwiper = new Swiper('#swiper1', {
|
|||
|
|
autoplay: 4000,//可选选项，自动滑动
|
|||
|
|
direction: 'vertical',
|
|||
|
|
loop: true,
|
|||
|
|
slidesPerView: slidesNum
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#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(str)
|
|||
|
|
if (accident.categories.length > 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="关于严格执
|
|||
|
|
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 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
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$("#swiper2").on('click', 'li', function () {
|
|||
|
|
var $this = $(this)
|
|||
|
|
var data = $this.attr("data-id")
|
|||
|
|
var noticeId = $this.attr("notice-id")
|
|||
|
|
|
|||
|
|
//$(".project-list-wrap").show();
|
|||
|
|
//return
|
|||
|
|
if (data != "") {
|
|||
|
|
//Window1.GetShowReference(data) + "return false;";
|
|||
|
|
document.getElementById("hdNoticeId").value = noticeId;
|
|||
|
|
document.getElementById("imgBtn").click();
|
|||
|
|
window.open(data);
|
|||
|
|
top.window.location.reload();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</html>
|