0813
This commit is contained in:
gaofei
@@ -9,103 +9,123 @@
|
||||
<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;
|
||||
.wrap {
|
||||
height: 100%;
|
||||
margin:0;
|
||||
box-shadow:none;
|
||||
padding: 15px;
|
||||
}
|
||||
.bottom-wrap{
|
||||
padding:0;
|
||||
|
||||
.top-wrap {
|
||||
height: 100%;
|
||||
}
|
||||
.pdtb0{
|
||||
padding-top:0 !important;
|
||||
padding-bottom:0 !important;
|
||||
|
||||
.bw-b-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.tit-center{
|
||||
text-align:center;
|
||||
font-size:12px;
|
||||
|
||||
.bw-b-bottom-up {
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.tit-one{
|
||||
|
||||
|
||||
.bottom-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
.pdl{
|
||||
padding-left:15px;
|
||||
font-size:12px;
|
||||
|
||||
.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 {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bg-img{
|
||||
width:100%;
|
||||
max-height:225px;
|
||||
|
||||
.bg-img {
|
||||
width: 100%;
|
||||
max-height: 225px;
|
||||
}
|
||||
.item{
|
||||
|
||||
.item {
|
||||
margin-bottom: 5px;
|
||||
font-size:10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.item:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.item-two{
|
||||
|
||||
.item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-two {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.jd-list{
|
||||
height:100%;
|
||||
background-color:#1A5A92;
|
||||
font-size:10px;
|
||||
|
||||
.jd-list {
|
||||
height: 100%;
|
||||
background-color: #1A5A92;
|
||||
font-size: 10px;
|
||||
}
|
||||
.jd-list .jd-title{
|
||||
color:#fff;
|
||||
|
||||
.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;
|
||||
}
|
||||
.jd-list .jd-item{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
border-bottom:1px solid #1D6FA9;
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap flex">
|
||||
<div class="flex3 flex flexV top-wrap" style="margin-right:5px;">
|
||||
<div class="item flex1">
|
||||
<div class="flex3 flex flexV top-wrap" style="margin-right: 5px;">
|
||||
<div class="item flex1" style="display: none;">
|
||||
<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="tit-one tit-center" style="color: #fff">周计划完成情况统计</div>
|
||||
<div class="bw-item-content flex1 pd0 flex">
|
||||
<div class="flex1" id='one1' style="width: 100%; height: 100%;"></div>
|
||||
<div class="flex1" id='one2' style="width: 100%; height: 100%;"></div>
|
||||
@@ -115,28 +135,38 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flex1">
|
||||
<div class="item-one 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="tit-one pdl" style="color: #fff">进度统计</div>
|
||||
<div class="bw-item-content flex1 pdtb0">
|
||||
<div id='two' style="width: 100%; height: 100%;"></div>
|
||||
<div id='four' 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 pdtb0">
|
||||
<div id='two' style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item flex1" style="display: none;">
|
||||
<div class="bw-b-bottom">
|
||||
<div class="bw-b-bottom-up flex flexV">
|
||||
<div class='tab-wrap-hastit'>
|
||||
<div class="tit-one tit-center" style="color:#fff">施工进度统计</div>
|
||||
<div class="tab-wrap tab-wrap-pos">
|
||||
<div class="tab" data-value="0">
|
||||
<div class="t-item active">安装单位工程</div>
|
||||
<div class="spline"></div>
|
||||
<div class="t-item">建筑单位工程</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tit-one tit-center" style="color: #fff">施工进度统计</div>
|
||||
<div class="tab-wrap tab-wrap-pos">
|
||||
<div class="tab" data-value="0">
|
||||
<div class="t-item active">安装单位工程</div>
|
||||
<div class="spline"></div>
|
||||
<div class="t-item">建筑单位工程</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bw-item-content flex1 pdtb0">
|
||||
<div id='three' style="width: 100%; height: 100%;"></div>
|
||||
@@ -145,23 +175,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1 flex flexV">
|
||||
<div class="item-one flex1">
|
||||
<div class="flex1 flex flexV" style="display: none;">
|
||||
|
||||
<div class="item-two flex2" style="display: none;">
|
||||
<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 id='four' style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-two flex2">
|
||||
<div class="bw-b-bottom">
|
||||
<div class="bw-b-bottom-up flex flexV">
|
||||
<div class="tit-one pdl" style="color:#fff">项目里程碑节点</div>
|
||||
<div class="tit-one pdl" style="color: #fff">项目里程碑节点</div>
|
||||
<div class="bw-item-content flex1 pd10">
|
||||
<%--<div id='five' style="width: 100%; height: 100%;"></div>--%>
|
||||
<%--<div id='five' style="width: 100%; height: 100%;"></div>--%>
|
||||
<div class="jd-list">
|
||||
<div class="jd-item">
|
||||
<div class="item jd-title">节点名称</div>
|
||||
@@ -180,12 +201,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-three flex3">
|
||||
<div class="item-three flex3" style="display: none;">
|
||||
<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" style="margin-top:10px;">
|
||||
<div style="width:100%;height:100%;">
|
||||
<div class="tit-one pdl" style="color: #fff">形象进度照片</div>
|
||||
<div class="bw-item-content flex1 pdtb0" style="margin-top: 10px;">
|
||||
<div style="width: 100%; height: 100%;">
|
||||
<div class="bg-img-1"></div>
|
||||
<%--<img src="../Images/siteProject.jpg" alt="Alternate Text" class="bg-img" />--%>
|
||||
</div>
|
||||
@@ -201,13 +222,13 @@
|
||||
<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) {
|
||||
function line(id, xArr, data) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById(id))
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
left:'center',
|
||||
left: 'center',
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
@@ -217,12 +238,12 @@
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '{a}<br />{b}: {c}%'
|
||||
},
|
||||
formatter: '{a}<br />{b}: {c}%'
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
left: 0
|
||||
},
|
||||
@@ -259,7 +280,7 @@
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)'
|
||||
},
|
||||
formatter: '{value} %'
|
||||
formatter: '{value} %'
|
||||
}
|
||||
},
|
||||
series: data,
|
||||
@@ -286,7 +307,7 @@
|
||||
}
|
||||
var two =<%=Two %>;
|
||||
var xArr1 = two.categories
|
||||
var data1 = [ {
|
||||
var data1 = [{
|
||||
name: '计划值',
|
||||
type: 'bar',
|
||||
//smooth: true,
|
||||
@@ -294,12 +315,12 @@
|
||||
lineStyle: {
|
||||
//color: 'rgba(200,201,10, 1)'
|
||||
}
|
||||
},{
|
||||
}, {
|
||||
name: '实际值',
|
||||
type: 'bar',
|
||||
//smooth: true,
|
||||
data: two.series[2].data,
|
||||
},{
|
||||
data: two.series[2].data,
|
||||
}, {
|
||||
name: '累计计划值',
|
||||
type: 'line',
|
||||
//smooth: true,
|
||||
@@ -307,11 +328,11 @@
|
||||
lineStyle: {
|
||||
//color: 'rgba(200,201,10, 1)'
|
||||
}
|
||||
},{
|
||||
}, {
|
||||
name: '累计实际值',
|
||||
type: 'line',
|
||||
//smooth: true,
|
||||
data: two.series[3].data,
|
||||
data: two.series[3].data,
|
||||
}]
|
||||
line('two', xArr1, data1)
|
||||
</script>
|
||||
@@ -327,7 +348,7 @@
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: '300',
|
||||
fontSize:12
|
||||
fontSize: 12
|
||||
},
|
||||
show: false
|
||||
},
|
||||
@@ -336,8 +357,8 @@
|
||||
left: '3%',
|
||||
show: false,
|
||||
selectedMode: false,
|
||||
textStyle:{//图例文字的样式
|
||||
color:'#ffffff'
|
||||
textStyle: {//图例文字的样式
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
@@ -413,16 +434,16 @@
|
||||
var myChart = echarts.init(document.getElementById(id))
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: [{
|
||||
text: title,
|
||||
bottom:'0',
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff',
|
||||
title: [{
|
||||
text: title,
|
||||
bottom: '0',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight:300
|
||||
}
|
||||
}],
|
||||
fontWeight: 300
|
||||
}
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
@@ -432,13 +453,13 @@
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
align :'left',
|
||||
align: 'left',
|
||||
data: xArr,
|
||||
textStyle:{//图例文字的样式
|
||||
color:'#f2f2f2'
|
||||
textStyle: {//图例文字的样式
|
||||
color: '#f2f2f2'
|
||||
}
|
||||
},
|
||||
color: ['#1D9A78','#8BC145','#36AFCE','#1D6FA9'],
|
||||
color: ['#1D9A78', '#8BC145', '#36AFCE', '#1D6FA9'],
|
||||
series: [
|
||||
{
|
||||
name: title,
|
||||
@@ -448,11 +469,11 @@
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
textStyle:{
|
||||
color:'#333'
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
},
|
||||
position: 'inside',
|
||||
formatter: function(data){ return data.percent.toFixed(0)+"%";}
|
||||
formatter: function (data) { return data.percent.toFixed(0) + "%"; }
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
@@ -474,8 +495,8 @@
|
||||
}
|
||||
var xArr = ['完成', '未完成']
|
||||
var data = [
|
||||
{ value: 80, name: '完成' },
|
||||
{ value: 20, name: '未完成' }
|
||||
{ value: 80, name: '完成' },
|
||||
{ value: 20, name: '未完成' }
|
||||
]
|
||||
pie('one1', '单位一', xArr, data)
|
||||
pie('one2', '单位二', xArr, data)
|
||||
@@ -484,7 +505,8 @@
|
||||
</script>
|
||||
<script>
|
||||
var dataX = ['项目']
|
||||
var data = [20]
|
||||
var one =<%=One %>;
|
||||
var data = [one]
|
||||
var dataT = [100]
|
||||
echartsBarInit('four', "进度统计", dataX, data, dataT);
|
||||
function echartsBarInit(id, title, dataX, data, dataT) {
|
||||
@@ -497,8 +519,8 @@
|
||||
text: title,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:12,
|
||||
fontWeight:'300',
|
||||
fontSize: 12,
|
||||
fontWeight: '300',
|
||||
},
|
||||
show: false
|
||||
},
|
||||
@@ -593,12 +615,12 @@
|
||||
)
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$(".bg-img-1").css("background", "url(../Images/siteProject.jpg) center center no-repeat").css("background-size", "100% 100%")
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$(".bg-img-1").css("background", "url(../Images/siteProject.jpg) center center no-repeat").css("background-size", "100% 100%")
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
$(".tab .t-item").click(function () {
|
||||
var $this = $(this)
|
||||
var index = $this.index()
|
||||
@@ -609,7 +631,7 @@
|
||||
var value = $tab.attr("data-value")
|
||||
$tab.find(".t-item").removeClass('active');
|
||||
$this.addClass('active')
|
||||
|
||||
|
||||
var three =<%=Three %>;
|
||||
var three2 =<%=Three2 %>;
|
||||
if (value == 0) {
|
||||
@@ -629,4 +651,4 @@
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user