643 lines
30 KiB
Plaintext
643 lines
30 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProject1.aspx.cs" Inherits="FineUIPro.Web.common.mainProject1" %>
|
|||
|
|
|
|||
|
|
<!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>
|
|||
|
|
.wrap{
|
|||
|
|
height:100%;
|
|||
|
|
padding:15px;
|
|||
|
|
}
|
|||
|
|
.top-wrap{
|
|||
|
|
height:100%;
|
|||
|
|
}
|
|||
|
|
.bw-b-bottom{
|
|||
|
|
width:100%;
|
|||
|
|
height:100%;
|
|||
|
|
}
|
|||
|
|
.bw-b-bottom-up {
|
|||
|
|
border-radius:0;
|
|||
|
|
height: 100%;
|
|||
|
|
margin:0;
|
|||
|
|
box-shadow:none;
|
|||
|
|
}
|
|||
|
|
.bottom-wrap{
|
|||
|
|
padding:0;
|
|||
|
|
}
|
|||
|
|
.pdtb0{
|
|||
|
|
padding-top:0 !important;
|
|||
|
|
padding-bottom:0 !important;
|
|||
|
|
}
|
|||
|
|
.tit-center{
|
|||
|
|
text-align:center;
|
|||
|
|
font-size:12px;
|
|||
|
|
}
|
|||
|
|
.tit-one{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.pdl{
|
|||
|
|
padding-left:15px;
|
|||
|
|
font-size:12px;
|
|||
|
|
}
|
|||
|
|
.more {
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-align: right;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
}
|
|||
|
|
.bg-img{
|
|||
|
|
width:100%;
|
|||
|
|
max-height:225px;
|
|||
|
|
}
|
|||
|
|
.item{
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-size:10px;
|
|||
|
|
}
|
|||
|
|
.item:last-child{
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
.item-two{
|
|||
|
|
margin: 5px 0;
|
|||
|
|
}
|
|||
|
|
.jd-list-wrap{
|
|||
|
|
padding: 10px 10px;
|
|||
|
|
}
|
|||
|
|
.jd-list-long{
|
|||
|
|
width:100%;
|
|||
|
|
}
|
|||
|
|
.jd-list{
|
|||
|
|
height:100%;
|
|||
|
|
background-color:#1A5A92;
|
|||
|
|
font-size:10px;
|
|||
|
|
}
|
|||
|
|
.jd-list .jd-title{
|
|||
|
|
color:#fff;
|
|||
|
|
}
|
|||
|
|
.jd-list .jd-item{
|
|||
|
|
display:flex;
|
|||
|
|
align-items:center;
|
|||
|
|
border-bottom:1px solid #1D6FA9;
|
|||
|
|
}
|
|||
|
|
.jd-list .jd-item .item{
|
|||
|
|
flex:1;
|
|||
|
|
display:flex;
|
|||
|
|
justify-content:center;
|
|||
|
|
}
|
|||
|
|
.pd10{
|
|||
|
|
padding:10px !important;
|
|||
|
|
}
|
|||
|
|
.bg-img-1{
|
|||
|
|
height:100%;
|
|||
|
|
background: url(../Images/siteProject.jpg) center center no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
.tab-wrap-hastit{
|
|||
|
|
position:relative;
|
|||
|
|
}
|
|||
|
|
.tab-wrap-pos{
|
|||
|
|
left: auto;
|
|||
|
|
right: 30px;
|
|||
|
|
top: 5px;
|
|||
|
|
}
|
|||
|
|
.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">
|
|||
|
|
<div class="flex2 flex flexV top-wrap" style="margin-right:5px;">
|
|||
|
|
<div class="item flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up flex flexV">
|
|||
|
|
<div class="tit-one tit-center" style="color:#fff">赢得值曲线</div>
|
|||
|
|
<div class="bw-item-content flex1 pdtb0">
|
|||
|
|
<div id='left_one' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up flex flexV">
|
|||
|
|
<div class="tit-one tit-center" style="color:#fff">项目进度完成度</div>
|
|||
|
|
<div class="bw-item-content flex1 flex jd-list-wrap">
|
|||
|
|
<div class="jd-list jd-list-long">
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item jd-title">项目名称</div>
|
|||
|
|
<div class="item jd-title">时间</div>
|
|||
|
|
<div class="item jd-title">状态</div>
|
|||
|
|
<div class="item jd-title">人数</div>
|
|||
|
|
<div class="item jd-title">进度情况</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">名称1</div>
|
|||
|
|
<div class="item">2020-02-08</div>
|
|||
|
|
<div class="item">在建</div>
|
|||
|
|
<div class="item ">270</div>
|
|||
|
|
<div class="item">20%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">名称2</div>
|
|||
|
|
<div class="item">2020-02-18</div>
|
|||
|
|
<div class="item">已完成</div>
|
|||
|
|
<div class="item">240</div>
|
|||
|
|
<div class="item">100%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">名称3</div>
|
|||
|
|
<div class="item">2021-02-18</div>
|
|||
|
|
<div class="item">在建</div>
|
|||
|
|
<div class="item">434</div>
|
|||
|
|
<div class="item">85%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">名称4</div>
|
|||
|
|
<div class="item">2020-02-18</div>
|
|||
|
|
<div class="item">已完成</div>
|
|||
|
|
<div class="item">240</div>
|
|||
|
|
<div class="item">100%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">名称5</div>
|
|||
|
|
<div class="item">2021-02-18</div>
|
|||
|
|
<div class="item">在建</div>
|
|||
|
|
<div class="item">434</div>
|
|||
|
|
<div class="item">85%</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="more">查看更多</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up flex flexV">
|
|||
|
|
<div class="tit-one tit-center" style="color:#fff">各工种人力情况</div>
|
|||
|
|
<div class="bw-item-content flex1 pdtb0">
|
|||
|
|
<div id='left_two' style="width: 100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex1 flex flexV">
|
|||
|
|
<div class="item-one flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up flex flexV">
|
|||
|
|
<div class="tit-one pdl" style="color:#fff">HSE绩效</div>
|
|||
|
|
<div class="bw-item-content flex1 pd10">
|
|||
|
|
<div class="jd-list">
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">绩效1</div>
|
|||
|
|
<div class="item">12</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">绩效2</div>
|
|||
|
|
<div class="item">20</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">绩效3</div>
|
|||
|
|
<div class="item">20</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">绩效4</div>
|
|||
|
|
<div class="item">20</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item-two flex1" id="swiper-pre">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up flex flexV">
|
|||
|
|
<div class="tit-one pdl" style="color:#fff">质量管理</div>
|
|||
|
|
<div class="bw-item-content flex1 pd10">
|
|||
|
|
<div class="jd-list">
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">数据1</div>
|
|||
|
|
<div class="item">08</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">数据2</div>
|
|||
|
|
<div class="item">18</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">数据3</div>
|
|||
|
|
<div class="item">18</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">数据4</div>
|
|||
|
|
<div class="item">18</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">数据3</div>
|
|||
|
|
<div class="item">18</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="jd-item">
|
|||
|
|
<div class="item">数据4</div>
|
|||
|
|
<div class="item">18</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="item-three flex1">
|
|||
|
|
<div class="bw-b-bottom">
|
|||
|
|
<div class="bw-b-bottom-up flex flexV">
|
|||
|
|
<div class="tit-one pdl" style="color:#fff">关键事项</div>
|
|||
|
|
<div class="bw-item-content flex1 pdtb0">
|
|||
|
|
<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">
|
|||
|
|
function line(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: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: '{a}<br />{b}: {c}%'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
},
|
|||
|
|
left: 0
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
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)'
|
|||
|
|
},
|
|||
|
|
formatter: '{value} %'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: data,
|
|||
|
|
grid: {
|
|||
|
|
top: '15%',
|
|||
|
|
left: '10',
|
|||
|
|
right: '10',
|
|||
|
|
bottom: '0%',
|
|||
|
|
containLabel: true,
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
// borderColor: 'rgba(0,162,233, 1)'
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
//color: 'rgba(200,201,10, 1)'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
var two = { "title": "赢得值曲线", "xFontNum": 0, "legend": null, "categories": ["2020-07", "2020-08", "2020-09", "2020-10", "2020-11", "2020-12", "2021-01", "2021-02"], "series": [{ "name": null, "type": null, "data": [5.0, 2.0, 0.0, 1.0, 4.0, 8.0, 2.0, 3.0], "dataString": null, "dataObject": null }, { "name": null, "type": null, "data": [8.0, 12.0, 4.0, 9.0, 10.0, 2.0, 3.0, 3.0], "dataString": null, "dataObject": null }, { "name": null, "type": null, "data": [12.0, 2.0, 5.0, 10.0, 3.0, 3.0, 8.0, 10.0], "dataString": null, "dataObject": null }, { "name": null, "type": null, "data": [4.0, 3.0, 14.0, 8.0, 10.0, 3.0, 5.0, 10.0], "dataString": null, "dataObject": null }], "series2": null };
|
|||
|
|
var xArr1 = two.categories
|
|||
|
|
var data1 = [ {
|
|||
|
|
name: '计划值',
|
|||
|
|
type: 'bar',
|
|||
|
|
//smooth: true,
|
|||
|
|
data: two.series[0].data,
|
|||
|
|
lineStyle: {
|
|||
|
|
//color: 'rgba(200,201,10, 1)'
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
name: '实际值',
|
|||
|
|
type: 'bar',
|
|||
|
|
//smooth: true,
|
|||
|
|
data: two.series[2].data,
|
|||
|
|
},{
|
|||
|
|
name: '累计计划值',
|
|||
|
|
type: 'line',
|
|||
|
|
//smooth: true,
|
|||
|
|
data: two.series[1].data,
|
|||
|
|
lineStyle: {
|
|||
|
|
//color: 'rgba(200,201,10, 1)'
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
name: '累计实际值',
|
|||
|
|
type: 'line',
|
|||
|
|
//smooth: true,
|
|||
|
|
data: two.series[3].data,
|
|||
|
|
}]
|
|||
|
|
line('left_one', xArr1, data1)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category(id, xArr, series) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById(id))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
// left:'center',
|
|||
|
|
text: '',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
fontSize: 16
|
|||
|
|
},
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
left: '3%',
|
|||
|
|
show: false,
|
|||
|
|
selectedMode: false,
|
|||
|
|
textStyle: {//图例文字的样式
|
|||
|
|
color: '#ffffff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: 50,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 8,
|
|||
|
|
color: 'rgba(255, 255, 255, 0.8)'
|
|||
|
|
},
|
|||
|
|
//formatter: function(params) {
|
|||
|
|
// var newParamsName = ''
|
|||
|
|
// var paramsNameNumber = params.length
|
|||
|
|
// var provideNumber = 6
|
|||
|
|
// var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
|
|||
|
|
// for (let row = 0; row < rowNumber; row++) {
|
|||
|
|
// newParamsName +=
|
|||
|
|
// params.substring(
|
|||
|
|
// row * provideNumber,
|
|||
|
|
// (row + 1) * provideNumber
|
|||
|
|
// ) + '\n'
|
|||
|
|
// }
|
|||
|
|
// return newParamsName
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
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)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//设置网格线颜色
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: ['#182067'],
|
|||
|
|
width: 1,
|
|||
|
|
type: 'solid'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: series,
|
|||
|
|
grid: {
|
|||
|
|
top: '12%',
|
|||
|
|
left: '10',
|
|||
|
|
right: '10',
|
|||
|
|
bottom: '10',
|
|||
|
|
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 two = { "title": "各工种人力情况", "xFontNum": 0, "legend": null, "categories": ["焊接工", "安全员", "安全协管员", "安装工", "钣金工", "保温工", "材料员", "财务管理", "操作工", "测量工", "车工", "出纳", "厨师", "测绘工程师", "电工", "电气工程师", "吊车司机", "防火工"], "series": [{ "name": null, "type": null, "data": [1.0, 4.0, 0.0, 0.0, 0.0, 12.0, 0.0, 0.0, 10.0, 0.0, 20.0, 0.0, 6.0, 0.0, 0.0, 0.0, 8.0, 0.0], "dataString": null, "dataObject": null }], "series2": null };
|
|||
|
|
var xArr2 = two.categories
|
|||
|
|
var data = [12, 5, 28, 43, 22]
|
|||
|
|
var data1 = [21, 9, 12, 15, 8]
|
|||
|
|
var series = [{
|
|||
|
|
name: '各工种人力情况',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 20,
|
|||
|
|
//barGap:10,
|
|||
|
|
data: two.series[0].data,
|
|||
|
|
itemStyle: { normal: { color: '#0c81fe' } }
|
|||
|
|
}];
|
|||
|
|
category('left_two', xArr2, series)
|
|||
|
|
</script>
|
|||
|
|
<script>
|
|||
|
|
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="关于严格执<E6A0BC><E689A7>
|
|||
|
|
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) {
|
|||
|
|
$("#swiper2").html(swiper_One)
|
|||
|
|
mySwiper = new Swiper('#swiper2', {
|
|||
|
|
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")
|
|||
|
|
if (data != "") {
|
|||
|
|
//Window1.GetShowReference(data) + "return false;";
|
|||
|
|
document.getElementById("hdNoticeId").value = noticeId;
|
|||
|
|
document.getElementById("imgBtn").click();
|
|||
|
|
window.open(data);
|
|||
|
|
top.window.location.reload();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
var slidesNum = 5
|
|||
|
|
var mySwiper = null
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
|
|||
|
|
var height = $("#swiper-pre").height() - 29
|
|||
|
|
$("#swiper2").css("height", (height) + 'px')
|
|||
|
|
slidesNum = Math.floor((height) / 24)
|
|||
|
|
$("#swiper2").html(swiper_One)
|
|||
|
|
mySwiper = new Swiper('#swiper2', {
|
|||
|
|
autoplay: 4000,//可选选项，自动滑动
|
|||
|
|
direction: 'vertical',
|
|||
|
|
loop: true,
|
|||
|
|
slidesPerView: slidesNum
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$(".project").hover(function () {
|
|||
|
|
$(".project-list").show();
|
|||
|
|
}, function () {
|
|||
|
|
$(".project-list").hide();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(".project-list>div").click(function () {
|
|||
|
|
var $this = $(this)
|
|||
|
|
top.window.location.href = "../indexProject.aspx?projectName=" + $this.html();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|